From 5dc37676e9d4f6fdd4bca1d7017b7860da5e3cbf Mon Sep 17 00:00:00 2001
From: Ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 4 Jul 2024 06:36:17 +0800
Subject: [PATCH] Update lesson list (#2582)

* Update progress bar color

* Update the position of "All my courses"

* Update the position of the progress bar and its label

* Update progress bar label color

* Update progress bar height

* Update course outline module header style

* do not display lesson title

* Update status color

* Update the course completed checking function

* render in progress status by half-filled-circle

* Update the styles of the lesson without a module

* Add locked icon

* fix sign in button style

* Add border-radius

* Move js files into src.

* add comments

* fix unstarted course icon border thickness

* update styles

- reduce space between lessons
- give unstarted course a thicker border

* Update the color of the progress bar on My Courses

* Use icons from wordpress library.

* update comments and remove the use of sensei icon

* Fix linting errors

* fix preview button style

* change to use @wordpress/element

* make code more concise

* Fix logged out not displaying icon error

* fix styles of moduled lesson items

* update style value
---
 .../themes/pub/wporg-learn-2024/functions.php |  1 +
 .../themes/pub/wporg-learn-2024/package.json  |  4 +-
 .../patterns/page-my-courses-content.php      |  2 +-
 .../patterns/sidebar-meta-info.php            | 12 ++-
 .../src/course-outline/block.json             |  3 +
 .../src/course-outline/index.js               | 28 ++++++
 .../src/course-outline/index.php              | 69 +++++++++++++
 .../wporg-learn-2024/src/style/_sensei.scss   | 97 +++++++++++++++++++
 .../wporg-learn-2024/src/style/_sidebar.scss  | 11 +--
 .../themes/pub/wporg-learn-2024/theme.json    |  1 +
 yarn.lock                                     | 81 ++++++++++++++++
 11 files changed, 292 insertions(+), 17 deletions(-)
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/course-outline/block.json
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php

diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
index 1d025bd7e..f5c3c1f3a 100644
--- a/wp-content/themes/pub/wporg-learn-2024/functions.php
+++ b/wp-content/themes/pub/wporg-learn-2024/functions.php
@@ -6,6 +6,7 @@
 
 // Block files
 require_once __DIR__ . '/src/course-grid/index.php';
+require_once __DIR__ . '/src/course-outline/index.php';
 require_once __DIR__ . '/src/learning-pathway-cards/index.php';
 require_once __DIR__ . '/src/learning-pathway-header/index.php';
 require_once __DIR__ . '/src/lesson-grid/index.php';
diff --git a/wp-content/themes/pub/wporg-learn-2024/package.json b/wp-content/themes/pub/wporg-learn-2024/package.json
index e15a5c9bd..edc6065d1 100644
--- a/wp-content/themes/pub/wporg-learn-2024/package.json
+++ b/wp-content/themes/pub/wporg-learn-2024/package.json
@@ -7,7 +7,9 @@
 	"private": true,
 	"devDependencies": {
 		"@wordpress/scripts": "27.2.0",
-		"rtlcss-webpack-plugin": "4.0.7"
+		"rtlcss-webpack-plugin": "4.0.7",
+		"@wordpress/icons": "^10.2.0",
+		"react-dom": "^18.3.1"
 	},
 	"eslintConfig": {
 		"extends": "../../../../.eslintrc.js"
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
index ffe258336..9570fc5d9 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/page-my-courses-content.php
@@ -46,7 +46,7 @@
 
 				<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"typography":{"lineHeight":1.6},"layout":{"selfStretch":"fill","flexSize":null}}} /-->
 
-				<!-- wp:sensei-lms/course-progress {"barColor":"blueberry-1","defaultBarColor":"blueberry-1","barBackgroundColor":"blueberry-3","height":8,"className":"wporg-learn-sidebar-course-progress"} /-->
+				<!-- wp:sensei-lms/course-progress {"customBarColor":"var(--wp--custom--color--green-50)","height":8,"className":"wporg-learn-sidebar-course-progress"} /-->
 
 				<!-- wp:spacer {"height":"0px","style":{"layout":{"selfStretch":"fixed","flexSize":"0px"}}} -->
 				<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>
diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sidebar-meta-info.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sidebar-meta-info.php
index 02a76f7f0..b75692afe 100644
--- a/wp-content/themes/pub/wporg-learn-2024/patterns/sidebar-meta-info.php
+++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sidebar-meta-info.php
@@ -5,16 +5,20 @@
  * Inserter: no
  */
 
- use function WPOrg_Learn\Sensei\{get_my_courses_page_url}
+use function WPOrg_Learn\Sensei\{get_my_courses_page_url};
+
+$completed_course = Sensei_Utils::user_completed_course( get_the_ID() );
 
 ?>
 
 <!-- wp:group {"align":"full","className":"wporg-learn-sidebar-meta-info","layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull wporg-learn-sidebar-meta-info">
 
+	<!-- wp:sensei-lms/course-progress {<?php echo ( $completed_course ? '"customTextColor":"var(--wp--custom--color--green-50)",' : '' ); ?>"customBarColor":"var(--wp--custom--color--green-50)","height":10,"className":"wporg-learn-sidebar-course-progress"} /-->
+
 	<?php if ( Sensei_Course::is_user_enrolled( get_the_ID() ) ) : ?>
-	<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}},"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":26px}},"textColor":"blueberry-1","fontSize":"normal","fontFamily":"inter","className":""wporg-learn-sidebar-all-courses"} -->
-	<p class="has-blueberry-1-color has-text-color has-link-color has-inter-font-family has-normal-font-size wporg-learn-sidebar-all-courses" style="font-style:normal;font-weight:400;line-height:26px">
+	<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"40px","top":"10px"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}},"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":26px}},"textColor":"blueberry-1","fontSize":"normal","fontFamily":"inter","className":""wporg-learn-sidebar-all-courses"} -->
+	<p class="has-blueberry-1-color has-text-color has-link-color has-inter-font-family has-normal-font-size wporg-learn-sidebar-all-courses" style="font-style:normal;font-weight:400;line-height:26px;margin-top:10px;margin-bottom:40px">
 		<a href="<?php echo esc_url( get_my_courses_page_url() ); ?>">
 			<?php esc_html_e( 'All My Courses', 'wporg-learn' ); ?>
 		</a>
@@ -22,8 +26,6 @@
 	<!-- /wp:paragraph -->
 	<?php endif; ?>
 
-	<!-- wp:sensei-lms/course-progress {"barColor":"blueberry-1","barBackgroundColor":"blueberry-3","height":8,"className":"wporg-learn-sidebar-course-progress"} /-->
-
 	<!-- wp:sensei-lms/button-take-course {"align":"full","borderRadius":2,"className":"is-style-default"} -->
 	<div class="wp-block-sensei-lms-button-take-course is-style-default wp-block-sensei-button wp-block-button has-text-align-full">
 		<button class="wp-block-button__link" style="border-radius:2px">
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/course-outline/block.json b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/block.json
new file mode 100644
index 000000000..0869f98b8
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/block.json
@@ -0,0 +1,3 @@
+{
+	"script": "file:./index.js"
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js
new file mode 100644
index 000000000..d8e60617e
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js
@@ -0,0 +1,28 @@
+/* global wporgCourseOutlineData */
+
+import { Icon, drafts, lockOutline } from '@wordpress/icons';
+import { renderToString } from '@wordpress/element';
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	wporgCourseOutlineData[ 'in-progress' ]?.forEach( ( title ) => {
+		const lessonLinks = document.querySelectorAll( '.wp-block-sensei-lms-course-outline-lesson' );
+		lessonLinks.forEach( ( link ) => {
+			const span = link.querySelector( 'span' );
+			if ( span && span.textContent.trim() === title ) {
+				const statusIcon = link.querySelector( '.wp-block-sensei-lms-course-outline-lesson__status' );
+				if ( statusIcon ) {
+					statusIcon.outerHTML = renderToString( <Icon icon={ drafts } transform={ 'scale(1.5)' } /> );
+				}
+			}
+		} );
+	} );
+	wporgCourseOutlineData.locked?.forEach( ( title ) => {
+		const lessonLinks = document.querySelectorAll( '.wp-block-sensei-lms-course-outline-lesson' );
+		lessonLinks.forEach( ( link ) => {
+			const span = link.querySelector( 'span' );
+			if ( span && span.textContent.trim() === title ) {
+				span.insertAdjacentHTML( 'afterend', renderToString( <Icon icon={ lockOutline } /> ) );
+			}
+		} );
+	} );
+} );
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php
new file mode 100644
index 000000000..3edfa7a82
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.php
@@ -0,0 +1,69 @@
+<?php
+
+/**
+ * Enqueue scripts and styles.
+ */
+function enqueue_assets() {
+	$script_asset_path = get_stylesheet_directory() . '/build/course-outline/index.asset.php';
+	if ( ! file_exists( $script_asset_path ) ) {
+		wp_die( 'You need to run `yarn start` or `yarn build` to build the required assets.' );
+	}
+
+	$script_asset = require( $script_asset_path );
+	wp_enqueue_script(
+		'wporg-learn-2024-course-outline',
+		get_stylesheet_directory_uri() . '/build/course-outline/index.js',
+		$script_asset['dependencies'],
+		$script_asset['version'],
+		true
+	);
+
+	if ( is_singular( 'course' ) ) {
+		$lesson_data = get_lesson_data();
+		wp_localize_script(
+			'wporg-learn-2024-course-outline',
+			'wporgCourseOutlineData',
+			$lesson_data
+		);
+	}
+}
+add_action( 'wp_enqueue_scripts', 'enqueue_assets' );
+
+/**
+ * Get the titles of specific status lessons.
+ *
+ * The returned array $lesson_data has the following structure:
+ * [
+ *     'in-progress' => [ (string) The title of the lesson, ... ],
+ *     'locked' => [ (string) The title of the lesson, ... ],
+ * ]
+ *
+ * @return array $lesson_data Array of lesson data.
+ */
+function get_lesson_data() {
+	$lesson_data = array();
+	$lesson_ids = Sensei()->course->course_lessons( get_the_ID(), 'publish', 'ids' );
+
+	foreach ( $lesson_ids as $lesson_id ) {
+		$user_lesson_status = Sensei_Utils::user_lesson_status( $lesson_id, get_current_user_id() );
+		$lesson_title = get_the_title( $lesson_id );
+		$is_preview_lesson = Sensei_Utils::is_preview_lesson( $lesson_id );
+
+		// Add in-progress lesson title to lesson data
+		if ( $user_lesson_status ) {
+			$lesson_status = $user_lesson_status->comment_approved;
+			if ( 'in-progress' === $lesson_status ) {
+				$lesson_data['in-progress'][] = $lesson_title;
+			}
+		}
+
+		// Add previewable and prerequisite-required lesson title to lesson data
+		if ( ( ! $is_preview_lesson && ! Sensei_Course::is_user_enrolled( get_the_ID() ) )
+			|| ! Sensei_Lesson::is_prerequisite_complete( $lesson_id, get_current_user_id() )
+		) {
+			$lesson_data['locked'][] = $lesson_title;
+		}
+	}
+
+	return $lesson_data;
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
index 099c6fb25..f4e287b35 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
@@ -73,6 +73,103 @@ body.sensei {
 			font-size: var(--wp--preset--font-size--heading-2);
 		}
 	}
+
+	section.wp-block-sensei-lms-course-outline {
+		> section.wp-block-sensei-lms-course-outline-module-bordered {
+			border: 1px solid var(--wp--preset--color--light-grey-1) !important;
+			border-radius: 2px;
+
+			header {
+				background-color: var(--wp--preset--color--light-grey-2) !important;
+				color: var(--wp--preset--color--charcoal-1) !important;
+				padding: var(--wp--preset--spacing--20);
+
+				h2 {
+					font-size: var(--wp--preset--font-size--heading-6);
+					font-weight: 600;
+				}
+
+				div.wp-block-sensei-lms-course-outline-module__progress-indicator {
+					border-radius: 2px;
+
+					&.completed {
+						color: var(--wp--custom--color--green-50) !important;
+					}
+
+					.wp-block-sensei-lms-course-outline-module__progress-indicator__text {
+						font-family: "SF Pro Text", sans-serif;
+						font-size: 11px;
+						font-weight: 600;
+						line-height: var(--wp--custom--body--huge--typography--line-height);
+						margin: 4px 8px;
+					}
+				}
+			}
+
+			.wp-block-sensei-lms-course-outline-module__lessons-title {
+				display: none;
+			}
+
+			.wp-block-sensei-lms-collapsible {
+				// lesson item that belongs to a module
+				> .wp-block-sensei-lms-course-outline-lesson:first-of-type {
+					padding-top: 5px;
+				}
+
+				> .wp-block-sensei-lms-course-outline-lesson:last-of-type {
+					padding-bottom: 5px;
+				}
+			}
+		}
+
+		// every lesson item
+		.wp-block-sensei-lms-course-outline-lesson {
+			> span:first-of-type {
+				line-height: var(--wp--custom--body--short-text--typography--line-height);
+				padding: 15px var(--wp--preset--spacing--10);
+			}
+
+			> svg {
+				margin-left: var(--wp--preset--spacing--20);
+			}
+
+			> .wp-block-sensei-lms-course-outline-lesson__status {
+				border: 2px solid var(--wp--preset--color--charcoal-1);
+			}
+
+			> .wp-block-sensei-lms-course-outline-lesson__status:has(use) {
+				border-color: var(--wp--custom--color--green-50);
+				background: var(--wp--preset--color--acid-green-3);
+				color: var(--wp--custom--color--green-50);
+			}
+
+			> .wp-block-sensei-lms-course-outline-lesson__status--in-progress {
+				width: 24px;
+				height: 24px;
+			}
+
+			> .wp-block-sensei-lms-course-outline-lesson__status--locked {
+				width: 24px;
+				height: 24px;
+			}
+		}
+
+		// lesson item that doesn't belong to a module
+		> .wp-block-sensei-lms-course-outline-lesson {
+			padding-top: 5px;
+			padding-bottom: 5px;
+			border: 1px solid var(--wp--preset--color--light-grey-1) !important;
+			margin-bottom: var(--wp--preset--spacing--20) !important;
+			border-radius: 2px;
+		}
+	}
+
+	// sign in button on the lesson page when user is logged out
+	.sensei-course-theme-locked-lesson-notice__actions {
+		.is-secondary.sensei-course-theme__button {
+			border: solid 1px var(--sensei-secondary-color);
+		}
+	}
 }
 
 .course:not(body) {
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sidebar.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sidebar.scss
index 9787fd10f..0054c97a1 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sidebar.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sidebar.scss
@@ -18,15 +18,6 @@
 	}
 
 	.wporg-learn-sidebar-course-progress {
-		margin-top: 16px;
-		margin-bottom: 40px;
-		display: flex;
-		flex-direction: column;
-
-		.sensei-progress-bar__label {
-			order: 1;
-			margin-bottom: 0;
-			margin-top: 16px;
-		}
+		margin-bottom: unset;
 	}
 }
diff --git a/wp-content/themes/pub/wporg-learn-2024/theme.json b/wp-content/themes/pub/wporg-learn-2024/theme.json
index 15178f541..10533afe6 100644
--- a/wp-content/themes/pub/wporg-learn-2024/theme.json
+++ b/wp-content/themes/pub/wporg-learn-2024/theme.json
@@ -29,6 +29,7 @@
 		"custom": {
 			"color": {
 				"border": "var(--wp--preset--color--light-grey-1)",
+				"green-50": "#008A20",
 				"green-70": "#005C12"
 			},
 			"form": {
diff --git a/yarn.lock b/yarn.lock
index 47d9cc160..46c82e0b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2385,6 +2385,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.2.25":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.0.21":
   version "18.2.79"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
@@ -2411,6 +2418,14 @@
     "@types/scheduler" "^0.16"
     csstype "^3.0.2"
 
+"@types/react@^18.2.79":
+  version "18.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
+  integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/responselike@^1.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.3.tgz#cc29706f0a397cfe6df89debfe4bf5cea159db50"
@@ -3849,6 +3864,20 @@
     react "^18.2.0"
     react-dom "^18.2.0"
 
+"@wordpress/element@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-6.2.0.tgz#44a05b4bd37e6e4f88db8ae87a109283b0ab510a"
+  integrity sha512-pRCchhYoH7eN0bxL4iUMBm82psqSUozlmk4B5IhQiqzYoOWn7OjvkGqejAnt81iDZUNZ8hIY2gLpRplgwwiZlQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@types/react" "^18.2.79"
+    "@types/react-dom" "^18.2.25"
+    "@wordpress/escape-html" "^3.2.0"
+    change-case "^4.1.2"
+    is-plain-object "^5.0.0"
+    react "^18.3.0"
+    react-dom "^18.3.0"
+
 "@wordpress/env@9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@wordpress/env/-/env-9.3.0.tgz#0fbd26ca39988cffd7a225e1202a300fed96855a"
@@ -3881,6 +3910,13 @@
   dependencies:
     "@babel/runtime" "^7.16.0"
 
+"@wordpress/escape-html@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/escape-html/-/escape-html-3.2.0.tgz#86ca52251ec9dd1f94a1ff0bf92e48b6a8e788bf"
+  integrity sha512-GFJ91lrs46zN3bgRGBHREaZ4jegwUA+2Gx+P6f11VDLhihNGKyg67uNf0lXqLoLj6iQQCBDP+15k/0k2ccr3YA==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
 "@wordpress/eslint-plugin@^17.8.0":
   version "17.13.0"
   resolved "https://registry.yarnpkg.com/@wordpress/eslint-plugin/-/eslint-plugin-17.13.0.tgz#e1ab509caba98289bf01735f4e16e46c1a002c73"
@@ -3970,6 +4006,15 @@
     sprintf-js "^1.1.1"
     tannin "^1.2.0"
 
+"@wordpress/icons@^10.2.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/icons/-/icons-10.2.0.tgz#05c41f3e4fc5aae97132f009145c39547cb51c50"
+  integrity sha512-6N39YvCUHgmqfewByKY1biBE+w/r/o1O9hQgW/zd4v1RVFQNOTxfmhqSmbbTePLzrdKcbB1setM+lJtwvwvrnA==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/element" "^6.2.0"
+    "@wordpress/primitives" "^4.2.0"
+
 "@wordpress/icons@^2.10.3", "@wordpress/icons@^2.8.0", "@wordpress/icons@^2.9.0", "@wordpress/icons@^2.9.1":
   version "2.10.3"
   resolved "https://registry.yarnpkg.com/@wordpress/icons/-/icons-2.10.3.tgz#56253dd0119794c600c923cb2255778db66b97f3"
@@ -4173,6 +4218,15 @@
     "@wordpress/element" "^5.33.0"
     classnames "^2.3.1"
 
+"@wordpress/primitives@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/primitives/-/primitives-4.2.0.tgz#5dc0267c26bcbf060aa34d2d4864e5b35bfc7a8e"
+  integrity sha512-UofDIMe3pQ4UvubCAjm4/Y+o/niAiHFRjhavvxBOZ5iCFyjG/1knbJcWa8+0qvjIA5YTBzZxfN6PD4Je1SwtFw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/element" "^6.2.0"
+    clsx "^2.1.1"
+
 "@wordpress/priority-queue@^1.10.1", "@wordpress/priority-queue@^1.11.2":
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/@wordpress/priority-queue/-/priority-queue-1.11.2.tgz#0c130df3c7af356f39b02f64922a4bdbf14d9686"
@@ -5780,6 +5834,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -12142,6 +12201,14 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-dom@^18.3.0, react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.2"
+
 react-easy-crop@^3.0.0:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/react-easy-crop/-/react-easy-crop-3.5.3.tgz#7481b6e484a8b6ac308373f0b173aad4f1d10239"
@@ -12303,6 +12370,13 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+react@^18.3.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -12927,6 +13001,13 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"