From 8fdab47761aefc315e985558ab64beea3f54ef91 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Sun, 19 Mar 2023 17:10:29 +0000
Subject: [PATCH 1/6] Basic settings page

---
 .DS_Store                 | Bin 0 -> 8196 bytes
 includes/Settings.php     |  54 +++
 package.json              |   2 +
 plugin.php                |  39 ++
 src/.DS_Store             | Bin 0 -> 6148 bytes
 src/components/Layout.tsx |  47 ++
 src/settings.tsx          |   3 +
 webpack.config.js         |   2 +-
 yarn.lock                 | 900 +++++++++++++++++++++++++++++++++++++-
 9 files changed, 1032 insertions(+), 15 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 includes/Settings.php
 create mode 100644 src/.DS_Store
 create mode 100644 src/components/Layout.tsx
 create mode 100644 src/settings.tsx

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..fbedf6188fb53f61e72cb9cda6967c37b5b7ea98
GIT binary patch
literal 8196
zcmeHM&2G~`5S~ra)(HfPgw!5=LE=zF38-o%R4EGO&>K<^900X;9Fl-*N3qjTLQpQe
z1MmijC*j1A2jKzWn_0KAokrq>P`fMb&c^<}{rP5WceX^NT4S$4v`Iu3D%<sIXf7yx
zpX)*?Bv&?I75GFkg*2iL+F$`~E*J%j0!9I&fKk9G@INSkZ#EZe$#-AhHLX#=C~zee
z;P-=#%C?!<xwi7^KqDytYzdd8ppQI2ICf&2iJfaJRE(*!2bEA&l42-L$9<dOu+7BI
zwbgV|nocU2StS{YlG(wt1x~7|t!a${Mu9~IICrm7jk@H~Ad|np!tdUJA9h?nbb;ar
z>jCQB-%`*cDho3rAJ_nF<o-Fv*Bqk+MvrI8;uNnVJ#ys?$E(2De6G;VaX#iaH^3P(
z4l9Yl>!Q!65jA>EQI7j7$6X<p#^CtmWswCZhpfu^#xZ6JDUvy4d_MEYF@O98(+96Z
zZ?eqdUXHm+eaz%zPV6a%{g%U8*hPRbeeA~rKDTr6;ir@j*Tj1rAOqe{c64I@rP0^L
z7d-AE9b@etX7Lwi5r1ZRLvnbhXnVjf(M+*V)4VeF+(+$TZ8ds}IsNPk6?-zxr~u7-
z=O_y#BEZjb#HVRa5u-1}Zh`%G0m_|3!{nLx?hgGy6xZuNRiRi~SzWWNidCsrUbg$;
zq#Zl)IBGeg=ltuj6ZhSu|0E3k^S<Lg9dsv$>$e|<LF^2I?nuZ3uM5bFXM?~CC#`TC
zc#(|L);BDxY?Tk!H>cBkyE|L<Zhf|8PaBQx`&;(Tc6~N0TN`&8dk06yr|+ikXCFRe
zD<~@YdeTk(`@H>vULwLtdldL#&|^4i6^~K``T0msUJ1)wCqbK*YX!_x3E5l-7CB_o
z$W=O#@bfTBF1$Hhm6ZzDTQmXI#ke}0YKv>jI-5f{GeQ}wa^P+bjtd_@4&Dp{%QeL)
zaM=_n>J4pj{{LwC`Tu3xw%LzSz$lPXK$Z5}`z>5J`|BWePr96I+o(sVTo^akRw!sB
l9fy^49QOPlhUnXXGN+l?xwg21^6w7<%=ce}H_eq+;18%~eh~lw

literal 0
HcmV?d00001

diff --git a/includes/Settings.php b/includes/Settings.php
new file mode 100644
index 0000000..9c2a389
--- /dev/null
+++ b/includes/Settings.php
@@ -0,0 +1,54 @@
+<?php
+/**
+ * Admin setting page for feature flags
+ *
+ * @package mr-feature-flags
+ * @since 1.0.0
+ */
+
+declare(strict_types=1);
+
+namespace MR\FeatureFlags;
+
+/**
+ * Class Settings
+ *
+ * @package mr-feature-flags
+ * @since 1.0.0
+ */
+class Settings {
+
+	/**
+	 * Register feature flag settings page.
+	 *
+	 * @return void
+	 * @since 1.0.0
+	 */
+	public function register_feature_settings() {
+		add_action( 'admin_menu', [ $this, 'register_settings' ] );
+	}
+
+	/**
+	 * Register settings action method.
+	 *
+	 * @return void
+	 * @since 1.0.0
+	 */
+	public function register_settings() {
+		add_menu_page(
+			'MR Feature Flags',
+			'Feature Flags',
+			'manage_options',
+			'mr-feature-flags',
+			[ $this, 'render_page' ],
+			'data:image/svg+xml;base64,' . base64_encode( '<svg width="15" height="18" viewBox="0 0 2000 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M0 896q0-130 51-248.5t136.5-204 204-136.5 248.5-51h768q130 0 248.5 51t204 136.5 136.5 204 51 248.5-51 248.5-136.5 204-204 136.5-248.5 51h-768q-130 0-248.5-51t-204-136.5-136.5-204-51-248.5zm1408 512q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5-198.5 40.5-163.5 109.5-109.5 163.5-40.5 198.5 40.5 198.5 109.5 163.5 163.5 109.5 198.5 40.5z"/></svg>' )
+		);
+	}
+
+	/**
+	 * Render page
+	 */
+	public function render_page() {
+		echo '<div id="mr_feature_flags_settings_screen"></div>';
+	}
+}
diff --git a/package.json b/package.json
index 86605ae..4a9c124 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
   "author": "Mohan Raj <https://mohanraj.dev>",
   "license": "ISC",
   "dependencies": {
+    "@types/wordpress__components": "^23.0.1",
+    "@wordpress/components": "^23.6.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2"
   }
diff --git a/plugin.php b/plugin.php
index 780214b..491d702 100644
--- a/plugin.php
+++ b/plugin.php
@@ -67,6 +67,42 @@ function(): void {
 	}
 );
 
+add_action(
+	'admin_enqueue_scripts',
+	function( string $page ): void {
+		if ( 'toplevel_page_mr-feature-flags' === $page ) {
+			load_settings_scripts();
+		}
+	}
+);
+
+/**
+ * Load settings page assets
+ *
+ * @return void
+ */
+function load_settings_scripts(): void {
+	$plugin_url          = plugin_dir_url( MR_FEATURE_FLAGS_PLUGIN_PATH );
+	$settings_asset_file = require_once plugin_dir_path( MR_FEATURE_FLAGS_PLUGIN_PATH ) . 'build/settings.asset.php'; // @phpcs:ignore
+
+	wp_enqueue_script(
+		'mr-feature-flags-settings',
+		$plugin_url . 'build/settings.js',
+		$settings_asset_file['dependencies'],
+		$settings_asset_file['version'],
+		true
+	);
+
+	wp_localize_script(
+		'mr-feature-flags-settings',
+		'mrFeatureFlags',
+		[
+			'flags' => get_option( FeatureFlags::$option_name ),
+		]
+	);
+
+}
+
 add_action(
 	'admin_enqueue_scripts',
 	function(): void {
@@ -98,3 +134,6 @@ function(): void {
 
 	}
 );
+
+$admin_settings = new Settings();
+$admin_settings->register_feature_settings();
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..531553f147482122373c71b72f612397684f0ca5
GIT binary patch
literal 6148
zcmeHKyGjH>5bV}N4mG$;!wHQ9|6n=Jz}O#<dmzH<3a)TwoA@z)pC6!A-R;4y3uYqH
z4L#K}(>1eGu=5ZRoj<QHL}nr~g%g#*h_QLJYcG-~K(#R%d5{gfm8X$`{$dlq{ZLlY
z$h|zG+<pI5-K>^%vqV3|d4r#Qm?5GdcgS61wOcvodi(i$GRQxMA{*qj#=Aw$Sh5}P
zUI)AbWVZ4mHQ2*B-Uqp;rlkU@Kq`<5qyj%GfHRvmJ#x%46-WhAft>=}9}1jU1$K_M
zb)c{(0Fc*cGsL_ulT!k#z|IjpFm)=>sTxlVbvoKh<W+&4qtiv>@u4yE*W*QPc8p&v
zU9@t{G8IS#`U>oOb;k4m62HvoBfn3{S}KqV{4)h~vbbK%v8Xs(zb%hvZGqpwY0T>w
nz!3K?0jO{vIkisjFN~2_1$K@ch3!TM=0(5+$s!f_1qD6<=DS0~

literal 0
HcmV?d00001

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..78172c0
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,47 @@
+import {
+	ToggleControl,
+	TextControl,
+	Flex,
+	FlexItem,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+interface flag {
+	name: string;
+	enabled: boolean;
+}
+const Layout = (): JSX.Element => {
+	const [flags] = useState(window.mrFeatureFlags.flags);
+	return (
+		<div id="mr-feature-flag-layout">
+			<h1>Feature Flags settings</h1>
+			<p>You can manage all available flags here.</p>
+			<div id="mr-feature-flag-content">
+				{flags.map((flag: flag) => {
+					return (
+						<div id="mr-feature-flag-item" key={flag.name}>
+							<Flex justify={'flex-start'}>
+								<FlexItem>
+									<TextControl
+										value={flag.name.toUpperCase()}
+										disabled
+										onChange={() => null}
+									/>
+								</FlexItem>
+								<FlexItem>
+									<ToggleControl
+										label={flag.name}
+										checked={flag.enabled}
+										onChange={() => null}
+									/>
+								</FlexItem>
+							</Flex>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default Layout;
diff --git a/src/settings.tsx b/src/settings.tsx
new file mode 100644
index 0000000..a49bea8
--- /dev/null
+++ b/src/settings.tsx
@@ -0,0 +1,3 @@
+import { render } from '@wordpress/element';
+import Layout from './components/Layout';
+render(<Layout />, document.getElementById('mr_feature_flags_settings_screen'));
diff --git a/webpack.config.js b/webpack.config.js
index bed404a..7f0c2fc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,7 +7,7 @@ const config = {
 	entry: {
 		...defaultConfig.entry,
 		index: path.resolve(__dirname, 'src/index.ts'),
-		// settings: path.resolve(__dirname, 'src/entry-points/settings.tsx'),
+		settings: path.resolve(__dirname, 'src/settings.tsx'),
 	},
 	output: {
 		...defaultConfig.output,
diff --git a/yarn.lock b/yarn.lock
index c910094..a9ea784 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -163,7 +163,7 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
-"@babel/helper-module-imports@^7.18.6":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
   integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
@@ -996,7 +996,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.16.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.16.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -1055,6 +1055,136 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emotion/babel-plugin@^11.10.6":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz#a68ee4b019d661d6f37dec4b8903255766925ead"
+  integrity sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.1"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.1.3"
+
+"@emotion/cache@^11.10.5", "@emotion/cache@^11.7.1":
+  version "11.10.5"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.5.tgz#c142da9351f94e47527ed458f7bbbbe40bb13c12"
+  integrity sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/sheet" "^1.2.1"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    stylis "4.1.3"
+
+"@emotion/css@^11.7.1":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.10.6.tgz#5d226fdd8ef2a46d28e4eb09f66dc01a3bda5a04"
+  integrity sha512-88Sr+3heKAKpj9PCqq5A1hAmAkoSIvwEq1O2TwDij7fUtsJpdkV4jMTISSTouFeRvsGvXIpuSuDQ4C1YdfNGXw==
+  dependencies:
+    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/sheet" "^1.2.1"
+    "@emotion/utils" "^1.2.0"
+
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
+
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/is-prop-valid@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
+  integrity sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@^11.7.1":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.6.tgz#dbe5e650ab0f3b1d2e592e6ab1e006e75fd9ac11"
+  integrity sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/cache" "^11.10.5"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.1.tgz#0595701b1902feded8a96d293b26be3f5c1a5cf0"
+  integrity sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c"
+  integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==
+
+"@emotion/styled@^11.6.0":
+  version "11.10.6"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.6.tgz#d886afdc51ef4d66c787ebde848f3cc8b117ebba"
+  integrity sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.6"
+    "@emotion/is-prop-valid" "^1.2.0"
+    "@emotion/serialize" "^1.1.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
+    "@emotion/utils" "^1.2.0"
+
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df"
+  integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==
+
+"@emotion/utils@^1.0.0", "@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
+"@emotion/weak-memoize@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
+  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+
 "@es-joy/jsdoccomment@0.10.8":
   version "0.10.8"
   resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.10.8.tgz#b3152887e25246410ed4ea569a55926ec13b2b05"
@@ -1100,6 +1230,25 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.2.3":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.4.tgz#89e6311b021190c9e121fcf20306e76ac66e4066"
+  integrity sha512-SQOeVbMwb1di+mVWWJLpsUTToKfqVNioXys011beCAhyOIFtS+GQoW4EQSneuxzmQKddExDwQ+X0hLl4lJJaSQ==
+
+"@floating-ui/dom@^1.0.0":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.4.tgz#e2eb2674f57fc182c425587e48ea43e336f4b8f8"
+  integrity sha512-4+k+BLhtWj+peCU60gp0+rHeR8+Ohqx6kjJf/lHMnJ8JD5Qj6jytcq1+SZzRwD7rvHKRhR7TDiWWddrNrfwQLg==
+  dependencies:
+    "@floating-ui/core" "^1.2.3"
+
+"@floating-ui/react-dom@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.0.0.tgz#e0975966694433f1f0abffeee5d8e6bb69b7d16e"
+  integrity sha512-uiOalFKPG937UCLm42RxjESTWUVpbbatvlphQAU6bsv+ence6IoVG8JOUZcy8eW81NkU+Idiwvx10WFLmR4MIg==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -1361,6 +1510,59 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@motionone/animation@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
+  integrity sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==
+  dependencies:
+    "@motionone/easing" "^10.15.1"
+    "@motionone/types" "^10.15.1"
+    "@motionone/utils" "^10.15.1"
+    tslib "^2.3.1"
+
+"@motionone/dom@^10.15.3":
+  version "10.15.5"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.15.5.tgz#4af18f8136d85c2fc997cac98121c969f6731802"
+  integrity sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==
+  dependencies:
+    "@motionone/animation" "^10.15.1"
+    "@motionone/generators" "^10.15.1"
+    "@motionone/types" "^10.15.1"
+    "@motionone/utils" "^10.15.1"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.15.1.tgz#95cf3adaef34da6deebb83940d8143ede3deb693"
+  integrity sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==
+  dependencies:
+    "@motionone/utils" "^10.15.1"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.15.1.tgz#dc6abb11139d1bafe758a41c134d4c753a9b871c"
+  integrity sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==
+  dependencies:
+    "@motionone/types" "^10.15.1"
+    "@motionone/utils" "^10.15.1"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.15.1.tgz#89441b54285012795cbba8612cbaa0fa420db3eb"
+  integrity sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==
+
+"@motionone/utils@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.15.1.tgz#6b5f51bde75be88b5411e084310299050368a438"
+  integrity sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==
+  dependencies:
+    "@motionone/types" "^10.15.1"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -1394,6 +1596,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.5.4":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -1543,6 +1750,31 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@tannin/compile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@tannin/compile/-/compile-1.1.0.tgz#1e4d1c5364cbfeffa1c20352c053e19ef20ffe93"
+  integrity sha512-n8m9eNDfoNZoxdvWiTfW/hSPhehzLJ3zW7f8E7oT6mCROoMNWCB4TYtv041+2FMAxweiE0j7i1jubQU4MEC/Gg==
+  dependencies:
+    "@tannin/evaluate" "^1.2.0"
+    "@tannin/postfix" "^1.1.0"
+
+"@tannin/evaluate@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@tannin/evaluate/-/evaluate-1.2.0.tgz#468a13c45eff45340108836fc46c708457199c3f"
+  integrity sha512-3ioXvNowbO/wSrxsDG5DKIMxC81P0QrQTYai8zFNY+umuoHWRPbQ/TuuDEOju9E+jQDXmj6yI5GyejNuh8I+eg==
+
+"@tannin/plural-forms@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@tannin/plural-forms/-/plural-forms-1.1.0.tgz#cffbb060d2640a56a314e3c77cbf6ea6072b51d5"
+  integrity sha512-xl9R2mDZO/qiHam1AgMnAES6IKIg7OBhcXqy6eDsRCdXuxAFPcjrej9HMjyCLE0DJ/8cHf0i5OQTstuBRhpbHw==
+  dependencies:
+    "@tannin/compile" "^1.1.0"
+
+"@tannin/postfix@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@tannin/postfix/-/postfix-1.1.0.tgz#6071f4204ae26c2e885cf3a3f1203a9f71e3f291"
+  integrity sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -1680,6 +1912,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
+"@types/mousetrap@^1.6.8":
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/@types/mousetrap/-/mousetrap-1.6.11.tgz#ef9620160fdcefcb85bccda8aaa3e84d7429376d"
+  integrity sha512-F0oAily9Q9QQpv9JKxKn0zMKfOo36KHCW7myYsmUyf2t0g+sBTbG3UleTPoguHdE1z3GLFr3p7/wiOio52QFjQ==
+
 "@types/node@*":
   version "18.15.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014"
@@ -1717,6 +1954,22 @@
   dependencies:
     "@types/react" "^17"
 
+"@types/react-dom@^18.0.6":
+  version "18.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
+  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@^18.0.21":
+  version "18.0.28"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
+  integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/react@^17", "@types/react@^17.0.37":
   version "17.0.53"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.53.tgz#10d4d5999b8af3d6bc6a9369d7eb953da82442ab"
@@ -1751,6 +2004,11 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
+"@types/tinycolor2@*":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.3.tgz#ed4a0901f954b126e6a914b4839c77462d56e706"
+  integrity sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==
+
 "@types/uglify-js@*":
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.17.1.tgz#e0ffcef756476410e5bce2cb01384ed878a195b5"
@@ -1784,6 +2042,45 @@
     anymatch "^3.0.0"
     source-map "^0.6.0"
 
+"@types/wordpress__components@*", "@types/wordpress__components@^23.0.1":
+  version "23.0.1"
+  resolved "https://registry.yarnpkg.com/@types/wordpress__components/-/wordpress__components-23.0.1.tgz#b7a6eff7be24e69681ff0fcffcd7e08cdd2ee7bd"
+  integrity sha512-mpAVr74ElANYR6f8+atultx4A1Md40vZeKfA2ZtgcJMWXQWez3OzP1W2g20BENxOo2kWVsp1r3Tcik/mt/8l/g==
+  dependencies:
+    "@types/react" "*"
+    "@types/tinycolor2" "*"
+    "@types/wordpress__components" "*"
+    "@types/wordpress__notices" "*"
+    "@types/wordpress__rich-text" "*"
+    "@wordpress/element" "^5.0.0"
+    downshift "^6.0.15"
+    re-resizable "^6.4.0"
+
+"@types/wordpress__data@*":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@types/wordpress__data/-/wordpress__data-6.0.2.tgz#a9ad7df4e8d4c38d7f03a5143202908ef1894a77"
+  integrity sha512-Pu67knXXoTWgCpxTKwePNZz/iKkYe8AQbkkSD/Ba1mw8t4zgEM+jJs5IV5N5ij/awwjs4Subj8mkvS3jMTDwyw==
+  dependencies:
+    "@types/react" "*"
+    redux "^4.1.0"
+
+"@types/wordpress__notices@*":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@types/wordpress__notices/-/wordpress__notices-3.5.1.tgz#d79feab47c85cc958c9ce907f204e6be12989177"
+  integrity sha512-O9QwWKQrwA64rMuWHZAW6hHBb663j5NAbxhGDHSC05b/PBUxcAcT5AJwjTMC8Pz9P1PeQ0CdHnZBHEJNSSGReA==
+  dependencies:
+    "@types/react" "*"
+    "@types/wordpress__data" "*"
+
+"@types/wordpress__rich-text@*":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@types/wordpress__rich-text/-/wordpress__rich-text-6.0.0.tgz#990ccd742a11ecc9d9a4e603569fbad6a4f749e6"
+  integrity sha512-j1swtUrCUFVi+jpsMA1Qs8YojGewGmB3+RpJh7cX7DmCobt39HMKW53M2rib79fDZcFkhtTkyZ0F+MJAIoDq6Q==
+  dependencies:
+    "@types/react" "*"
+    "@types/wordpress__data" "*"
+    "@types/wordpress__rich-text" "*"
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -1964,6 +2261,18 @@
     "@typescript-eslint/types" "5.55.0"
     eslint-visitor-keys "^3.3.0"
 
+"@use-gesture/core@10.2.24":
+  version "10.2.24"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.24.tgz#88d13a60954ba62463c774acb92d12bf7b3d810c"
+  integrity sha512-ZL7F9mgOn3Qlnp6QLI9jaOfcvqrx6JPE/BkdVSd8imveaFTm/a3udoO6f5Us/1XtqnL4347PsIiK6AtCvMHk2Q==
+
+"@use-gesture/react@^10.2.24":
+  version "10.2.24"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.24.tgz#bc13780381e786b286f099f69ea3801bb9ed27a5"
+  integrity sha512-rAZ8Nnpu1g4eFzqCPlaq+TppJpMy0dTpYOQx5KpfoBF4P3aWnCqwj7eKxcmdIb1NJKpIJj50DPugUH4mq5cpBg==
+  dependencies:
+    "@use-gesture/core" "10.2.24"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -2124,6 +2433,15 @@
     object.fromentries "^2.0.0"
     prop-types "^15.7.0"
 
+"@wordpress/a11y@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/a11y/-/a11y-3.29.0.tgz#219a88004c2f36b735a13ffe1f4d742abfeb4e62"
+  integrity sha512-9XpfEcBzOtRJHX5CPxQIvmk2DZy2y45+FtaSHjbQ6/BgQrOBTviIk/0AYlPf+AZ7WOauGuKaKiYhIvIYFMYyVA==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/dom-ready" "^3.29.0"
+    "@wordpress/i18n" "^4.29.0"
+
 "@wordpress/babel-plugin-import-jsx-pragma@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-3.2.0.tgz#0d4dc9ca50ed0cf1c14966db602351b13625303a"
@@ -2157,6 +2475,109 @@
   resolved "https://registry.yarnpkg.com/@wordpress/browserslist-config/-/browserslist-config-4.1.3.tgz#24bfe25b1ca11960e6a82908cc1707cf12b9809f"
   integrity sha512-M4WQ0C4zCfMWyCmK40git3rfPdNkRwg5boGjoTL4LSdhrY+rtchFAtfOHS9KovAZ5ZzTB0gyZsCu/QKZlPClog==
 
+"@wordpress/components@^23.6.0":
+  version "23.6.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/components/-/components-23.6.0.tgz#0a052b6584c52362fccd4acbdd984309443065f1"
+  integrity sha512-k4eiAwWKiyOV41Yy+TxgIW9xk/52P6el0WvHxr/kkuZc8WYerfRCdP7YJtucYKMQKGtuitROpUG4lAeHJYCxAw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/css" "^11.7.1"
+    "@emotion/react" "^11.7.1"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/styled" "^11.6.0"
+    "@emotion/utils" "^1.0.0"
+    "@floating-ui/react-dom" "1.0.0"
+    "@use-gesture/react" "^10.2.24"
+    "@wordpress/a11y" "^3.29.0"
+    "@wordpress/compose" "^6.6.0"
+    "@wordpress/date" "^4.29.0"
+    "@wordpress/deprecated" "^3.29.0"
+    "@wordpress/dom" "^3.29.0"
+    "@wordpress/element" "^5.6.0"
+    "@wordpress/escape-html" "^2.29.0"
+    "@wordpress/hooks" "^3.29.0"
+    "@wordpress/html-entities" "^3.29.0"
+    "@wordpress/i18n" "^4.29.0"
+    "@wordpress/icons" "^9.20.0"
+    "@wordpress/is-shallow-equal" "^4.29.0"
+    "@wordpress/keycodes" "^3.29.0"
+    "@wordpress/primitives" "^3.27.0"
+    "@wordpress/private-apis" "^0.11.0"
+    "@wordpress/rich-text" "^6.6.0"
+    "@wordpress/warning" "^2.29.0"
+    change-case "^4.1.2"
+    classnames "^2.3.1"
+    colord "^2.7.0"
+    date-fns "^2.28.0"
+    deepmerge "^4.3.0"
+    dom-scroll-into-view "^1.2.1"
+    downshift "^6.0.15"
+    fast-deep-equal "^3.1.3"
+    framer-motion "^7.6.1"
+    gradient-parser "^0.1.5"
+    highlight-words-core "^1.2.2"
+    is-plain-object "^5.0.0"
+    lodash "^4.17.21"
+    memize "^1.1.0"
+    path-to-regexp "^6.2.1"
+    re-resizable "^6.4.0"
+    react-colorful "^5.3.1"
+    reakit "^1.3.8"
+    remove-accents "^0.4.2"
+    use-lilius "^2.0.1"
+    uuid "^8.3.0"
+    valtio "1.7.0"
+
+"@wordpress/compose@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/compose/-/compose-6.6.0.tgz#e2a25907d331971b6665a3b0222dcf609505ea32"
+  integrity sha512-+LsVWPf4IhL7Br3RB89m+If/6Swspu0wB2nSd28z3spHP92ndszp0Lli6rrFRRkDPWEva/b+bfxv8oDFBx3qCg==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@types/mousetrap" "^1.6.8"
+    "@wordpress/deprecated" "^3.29.0"
+    "@wordpress/dom" "^3.29.0"
+    "@wordpress/element" "^5.6.0"
+    "@wordpress/is-shallow-equal" "^4.29.0"
+    "@wordpress/keycodes" "^3.29.0"
+    "@wordpress/priority-queue" "^2.29.0"
+    change-case "^4.1.2"
+    clipboard "^2.0.8"
+    mousetrap "^1.6.5"
+    use-memo-one "^1.1.1"
+
+"@wordpress/data@^8.6.0":
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/data/-/data-8.6.0.tgz#82307cf049de5b82548710b834f9031c0db0bf60"
+  integrity sha512-+bQ5dTkJkHeOng3mXXzLBZkudUlOifJql1U99sWGbtLarU/yjfF0ldi/a6uR1cVvDJkGizDYHf9vv/nA39Oaqw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/compose" "^6.6.0"
+    "@wordpress/deprecated" "^3.29.0"
+    "@wordpress/element" "^5.6.0"
+    "@wordpress/is-shallow-equal" "^4.29.0"
+    "@wordpress/priority-queue" "^2.29.0"
+    "@wordpress/private-apis" "^0.11.0"
+    "@wordpress/redux-routine" "^4.29.0"
+    deepmerge "^4.3.0"
+    equivalent-key-map "^0.2.2"
+    is-plain-object "^5.0.0"
+    is-promise "^4.0.0"
+    redux "^4.1.2"
+    turbo-combine-reducers "^1.0.2"
+    use-memo-one "^1.1.1"
+
+"@wordpress/date@^4.29.0":
+  version "4.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/date/-/date-4.29.0.tgz#3d5a8fe4f4fb8975c222a788c1d7e0f436f4351b"
+  integrity sha512-hzFDrZuuzLeFcE8Ou5ZnGDb5Xk1Kb/G5B/jvJty5H4NbXWVXPvSBG9OT6H1MeE44DKexHCvYYQTsd82hktSS+g==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/deprecated" "^3.29.0"
+    moment "^2.29.4"
+    moment-timezone "^0.5.40"
+
 "@wordpress/dependency-extraction-webpack-plugin@^3.2.1":
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/@wordpress/dependency-extraction-webpack-plugin/-/dependency-extraction-webpack-plugin-3.7.0.tgz#e52ef31f66b8c4add3d773a87e11007375127b04"
@@ -2165,6 +2586,29 @@
     json2php "^0.0.4"
     webpack-sources "^3.2.2"
 
+"@wordpress/deprecated@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/deprecated/-/deprecated-3.29.0.tgz#3a8aa7714f930997e0f1e3c28d8c47af71cca60a"
+  integrity sha512-2rn5xhe1r8xQnmI+JRjkMDC099AoO4+KTeBmqz7zDsKoelc5ECXNUak4tj7DpAehh23DQnyBvXkl/CX6Hf9UwQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/hooks" "^3.29.0"
+
+"@wordpress/dom-ready@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/dom-ready/-/dom-ready-3.29.0.tgz#598dd73823790b2812d23af1e8891fa52032341d"
+  integrity sha512-cPGNJ2FCsWZKLib3lWC2b0WyLQe1RHiDGNZGy5LbDkEuZCZzjbmYCziBzLnKfe626ck2abHAcX0RkE17JbmN1g==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
+"@wordpress/dom@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/dom/-/dom-3.29.0.tgz#785bc633734654072a9d379d0406edd76ba782f2"
+  integrity sha512-OBTbirMjAMX/2EOKjj5eCqvpb6ZYh/frxTM2vBsqcmjjn8GOqOi4MHLfX2G1XmtW47Xz1KhrENE7cTqxYDtQtw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/deprecated" "^3.29.0"
+
 "@wordpress/element@^4.13.0":
   version "4.20.0"
   resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-4.20.0.tgz#d78499521cbb471b97e011a81ec6236daeac24ad"
@@ -2179,7 +2623,21 @@
     react "^17.0.2"
     react-dom "^17.0.2"
 
-"@wordpress/escape-html@^2.22.0":
+"@wordpress/element@^5.0.0", "@wordpress/element@^5.6.0":
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/element/-/element-5.6.0.tgz#8e411fba3c3cee3b0f48e4c6a9c39832ce8af6cf"
+  integrity sha512-pQdpyzUtmn12vvNX26RiYHEPnQHKK24Ro0MK0tGRYcE9BRVgnH54uL03Nfad2zc6TwQUglD/wkRoeonZ0XmVTw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@types/react" "^18.0.21"
+    "@types/react-dom" "^18.0.6"
+    "@wordpress/escape-html" "^2.29.0"
+    change-case "^4.1.2"
+    is-plain-object "^5.0.0"
+    react "^18.2.0"
+    react-dom "^18.2.0"
+
+"@wordpress/escape-html@^2.22.0", "@wordpress/escape-html@^2.29.0":
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/@wordpress/escape-html/-/escape-html-2.29.0.tgz#59e1215302ca96b0ab1c8eeabb15ed12937d59d4"
   integrity sha512-/zsYF2jXIm7SbLlR0hXHzJpjiSycZ/rPKXWaZRK8EUxzA30FLc7mPiwWY0pmJxi+1mq+q7t8tHhIp01Z64LOBQ==
@@ -2230,6 +2688,48 @@
     prettier "npm:wp-prettier@2.2.1-beta-1"
     requireindex "^1.2.0"
 
+"@wordpress/hooks@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/hooks/-/hooks-3.29.0.tgz#4a3f353faac92f6ec936373be63433e3251524c4"
+  integrity sha512-zegXz35LCUntVgCMLfTNuzC42TEMetGp2mcdNEZdQRDOrjxoqdXZrIRRupJBdJduKvUjwjG/aL+61svq8WpBXw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
+"@wordpress/html-entities@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/html-entities/-/html-entities-3.29.0.tgz#9b32abed2d353f4ac83c3c9ba0935b70825e012d"
+  integrity sha512-eWfiV9xf9gtVzR/ut1QMZA8lFAuq+JH470+K0WzhOnDdZzJhH4I4vcGBuv3FSg+0a3gz8zgucF4vKRY5xTI7tQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
+"@wordpress/i18n@^4.29.0":
+  version "4.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/i18n/-/i18n-4.29.0.tgz#0a2eeca269b76ccc3c264f491221349cff945597"
+  integrity sha512-7azBKWunyHhGHAvRTR7dytURV5UcJnMSbnMB+TfAhxJu7wMBUR/wHHaMWEbshCYN79KKabNSMhqHTcUnETKdCQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/hooks" "^3.29.0"
+    gettext-parser "^1.3.1"
+    memize "^1.1.0"
+    sprintf-js "^1.1.1"
+    tannin "^1.2.0"
+
+"@wordpress/icons@^9.20.0":
+  version "9.20.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/icons/-/icons-9.20.0.tgz#c2b8f1068d8272efab7cc80b456d3d101a6660e6"
+  integrity sha512-fPnye9boxKfq2a/5Kf2dnpRG5glZNgzpCFtuiYlcVeuxp57I8aLAjCfRPiCqcnJUIwGNNcCGG7DFP6hrL+I7Mg==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/element" "^5.6.0"
+    "@wordpress/primitives" "^3.27.0"
+
+"@wordpress/is-shallow-equal@^4.29.0":
+  version "4.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/is-shallow-equal/-/is-shallow-equal-4.29.0.tgz#7c3e0f177303ec8d932748091c454d1f118c1793"
+  integrity sha512-aftVUNlivrXIXZT9Xepc6VYoitCX2v6RnT2j7voHSU3lrL6QcWfY4HMiIsIrBbHUCraUxkD0NrFiJ6t3kcOQlw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
 "@wordpress/jest-console@^4.1.1":
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/@wordpress/jest-console/-/jest-console-4.1.1.tgz#804c1f4b0ee6b54299c97ffb2fd6017850b8a534"
@@ -2250,6 +2750,15 @@
     enzyme "^3.11.0"
     enzyme-to-json "^3.4.4"
 
+"@wordpress/keycodes@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/keycodes/-/keycodes-3.29.0.tgz#5e1fafc6fa7e3c21d9faabf1880c5cd87d1e0dd8"
+  integrity sha512-SZd7FSngpKhI/JjjRRuFojoTrU782ZaYSzxZyyV3ByqIzVs51sxwdjwNNswTPyD3eMTIz1SQb0U8ma0FH0epwA==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/i18n" "^4.29.0"
+    change-case "^4.1.2"
+
 "@wordpress/npm-package-json-lint-config@^4.1.0":
   version "4.14.0"
   resolved "https://registry.yarnpkg.com/@wordpress/npm-package-json-lint-config/-/npm-package-json-lint-config-4.14.0.tgz#35998c5f4ced5143e41911b28840275e50f91f97"
@@ -2268,6 +2777,57 @@
   resolved "https://registry.yarnpkg.com/@wordpress/prettier-config/-/prettier-config-1.4.0.tgz#8eaeb8daf7253e8b0806da2279017d4f4fef0f62"
   integrity sha512-uvrgUAhRnOvIysXjcXH9VDsrKLqH9r3BfdGoy+WFLSHFnTfdMhW7bdDQXl4F4UIUuefUwGi+ZvT/rChg9zoBkQ==
 
+"@wordpress/primitives@^3.27.0":
+  version "3.27.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/primitives/-/primitives-3.27.0.tgz#838b7643200334411f57b5be700dacdb723c58eb"
+  integrity sha512-JzHNZgnhxOlhbp6nGWC+5bZ6EnIPbPXOxKVvOP4yse+93dlDsQ5nhVH8mckU6t/fq+W/hiMEqT2S4DgW9dFN/w==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/element" "^5.6.0"
+    classnames "^2.3.1"
+
+"@wordpress/priority-queue@^2.29.0":
+  version "2.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/priority-queue/-/priority-queue-2.29.0.tgz#7eeb05ded38d9f3b49c842a728a0943593c36740"
+  integrity sha512-vgEQcqpF3JX3tDVQRX09yXBmbw7aBCminlWeXE/oAC9Q6iGY3BuIAUpg4J9uPdjF0mNa0zyLLh/LgiYZynhzOg==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    requestidlecallback "^0.3.0"
+
+"@wordpress/private-apis@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/private-apis/-/private-apis-0.11.0.tgz#2c1565baaf42e1c4fd1910b2a7fa66bcc75eec0f"
+  integrity sha512-GpAZ34Ou9YkYi9fuJCb9oDIZhsLqj41stuHflxpTNih6vV/Qw7ApBkLZDhDCyWjOybnjtHQH1LWw3K3RCN4miw==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+
+"@wordpress/redux-routine@^4.29.0":
+  version "4.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/redux-routine/-/redux-routine-4.29.0.tgz#a10bfaa51f678dedec9967fabe03dd3294ed104a"
+  integrity sha512-p4FuiNVVCtHs0NSb3W2xbTXagUVHNofX7qVlpr8mREhGk31v8gD2EhHl+M7Fkm45PFJRhoOtIHgSP3t4QBb3+Q==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    is-plain-object "^5.0.0"
+    is-promise "^4.0.0"
+    rungen "^0.3.2"
+
+"@wordpress/rich-text@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/rich-text/-/rich-text-6.6.0.tgz#54b38e38017442e1f253794af00ffd2414112c4b"
+  integrity sha512-ZmLn/thoLyWYvfL5MghU06uQssHUE5deqjwPDoPG2ukRixfr0codUHzmKQehJfjZ61WucX+K4wWBFoBwwHthFQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/a11y" "^3.29.0"
+    "@wordpress/compose" "^6.6.0"
+    "@wordpress/data" "^8.6.0"
+    "@wordpress/deprecated" "^3.29.0"
+    "@wordpress/element" "^5.6.0"
+    "@wordpress/escape-html" "^2.29.0"
+    "@wordpress/i18n" "^4.29.0"
+    "@wordpress/keycodes" "^3.29.0"
+    memize "^1.1.0"
+    rememo "^4.0.0"
+
 "@wordpress/scripts@^19.2.2":
   version "19.2.4"
   resolved "https://registry.yarnpkg.com/@wordpress/scripts/-/scripts-19.2.4.tgz#9722f0bd3b96c5d0584a36f1bd4b6c1371364f05"
@@ -2334,7 +2894,7 @@
     stylelint-config-recommended-scss "^4.2.0"
     stylelint-scss "^3.17.2"
 
-"@wordpress/warning@^2.15.0":
+"@wordpress/warning@^2.15.0", "@wordpress/warning@^2.29.0":
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/@wordpress/warning/-/warning-2.29.0.tgz#5730b616af0595268cec0ced0b9069b40313fb85"
   integrity sha512-e5jhOeX1g9kmr6Z79zjJnbhOdDpZx4alK1rXzV2nKpFs4TIw19rOkSO8i9Y2qmaWtZ2HVs6/uD4KwBPRcZ+eBQ==
@@ -2749,6 +3309,15 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 babel-plugin-polyfill-corejs2@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
@@ -2851,6 +3420,11 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+body-scroll-lock@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
+
 body@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/body/-/body-5.1.0.tgz#e4ba0ce410a46936323367609ecb4e6553125069"
@@ -3173,6 +3747,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz#a99d8ec34c1c628a4541567aa7b457446460c62b"
@@ -3181,6 +3760,15 @@ clean-webpack-plugin@^3.0.0:
     "@types/webpack" "^4.4.31"
     del "^4.1.1"
 
+clipboard@^2.0.8:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -3268,7 +3856,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colord@^2.9.1:
+colord@^2.7.0, colord@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
   integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
@@ -3330,6 +3918,11 @@ component-emitter@^1.2.1:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
+compute-scroll-into-view@^1.0.17:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
+  integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3349,7 +3942,7 @@ continuable-cache@^0.3.1:
   resolved "https://registry.yarnpkg.com/continuable-cache/-/continuable-cache-0.3.1.tgz#bd727a7faed77e71ff3985ac93351a912733ad0f"
   integrity sha512-TF30kpKhTH8AGCG3dut0rdd/19B7Z+qCnrMoBLpyQu/2drZdNrrpcjPEoJeSVsQM+8KmWG5O56oPDjSSUsuTyA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
@@ -3598,6 +4191,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.28.0, date-fns@^2.29.2:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -3687,7 +4285,7 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^4.2.2:
+deepmerge@^4.2.2, deepmerge@^4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -3740,6 +4338,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -3781,6 +4384,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-scroll-into-view@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-1.2.1.tgz#e8f36732dd089b0201a88d7815dc3f88e6d66c7e"
+  integrity sha512-LwNVg3GJOprWDO+QhLL1Z9MMgWe/KAFLxVWKzjRTxNSPn8/LLDIfmuG71YHznXCqaqTjvHJDYO1MEAgX6XCNbQ==
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -3879,6 +4487,17 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+downshift@^6.0.15:
+  version "6.1.12"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-6.1.12.tgz#f14476b41a6f6fd080c340bad1ddf449f7143f6f"
+  integrity sha512-7XB/iaSJVS4T8wGFT3WRXmSF1UlBHAA40DshZtkrIscIN+VC+Lh363skLxFTvJwtNgHxAMDGEHT4xsyQFWL+UA==
+  dependencies:
+    "@babel/runtime" "^7.14.8"
+    compute-scroll-into-view "^1.0.17"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    tslib "^2.3.0"
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -3909,6 +4528,13 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+encoding@^0.1.12:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4001,6 +4627,11 @@ enzyme@^3.11.0:
     rst-selector-parser "^2.2.3"
     string.prototype.trim "^1.2.1"
 
+equivalent-key-map@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/equivalent-key-map/-/equivalent-key-map-0.2.2.tgz#be4d57049bb8d46a81d6e256c1628465620c2a13"
+  integrity sha512-xvHeyCDbZzkpN4VHQj/n+j2lOwL0VWszG30X4cOrc9Y7Tuo2qCdZK/0AMod23Z5dCtNUbaju6p0rwOhHUk05ew==
+
 error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -4699,6 +5330,11 @@ find-process@^1.4.4:
     commander "^5.1.0"
     debug "^4.1.1"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -4778,6 +5414,17 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^7.6.1:
+  version "7.10.3"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-7.10.3.tgz#8b23f50bbc1ee8c830c869c5398e457d5272feb5"
+  integrity sha512-k2ccYeZNSpPg//HTaqrU+4pRq9f9ZpaaN7rr0+Rx5zA4wZLbk547wtDzge2db1sB+1mnJ6r59P4xb+aEIi/W+w==
+  dependencies:
+    "@motionone/dom" "^10.15.3"
+    hey-listen "^1.0.8"
+    tslib "2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -4879,6 +5526,14 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
 
+gettext-parser@^1.3.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/gettext-parser/-/gettext-parser-1.4.0.tgz#f8baf34a292f03d5e42f02df099d301f167a7ace"
+  integrity sha512-sedZYLHlHeBop/gZ1jdg59hlUEcpcZJofLq2JFwJT1zTqAU3l2wFv6IsuwFHGqbiT9DWzMUW4/em2+hspnmMMA==
+  dependencies:
+    encoding "^0.1.12"
+    safe-buffer "^5.1.1"
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -5010,6 +5665,13 @@ gonzales-pe@^4.3.0:
   dependencies:
     minimist "^1.2.5"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -5022,6 +5684,11 @@ graceful-fs@^4.1.2, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
+gradient-parser@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/gradient-parser/-/gradient-parser-0.1.5.tgz#0c7e2179559e5ce7d8d71f4423af937100b2248c"
+  integrity sha512-+uPlcVbjrKOnTzvz0MjTj7BfACj8OmxIa1moIjJV7btvhUMSJk0D47RfDCgDrZE3dYMz9Cf5xKJwnrKLjUq0KQ==
+
 grapheme-splitter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
@@ -5129,6 +5796,23 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
+highlight-words-core@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
+  integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
+
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 homedir-polyfill@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
@@ -5237,7 +5921,7 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.6.3:
+iconv-lite@^0.6.2, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -5610,6 +6294,11 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
+is-promise@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-4.0.0.tgz#42ff9f84206c1991d26debf520dd5c01042dd2f3"
+  integrity sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==
+
 is-regex@^1.0.5, is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
@@ -6751,6 +7440,11 @@ mdurl@^1.0.1:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
+memize@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/memize/-/memize-1.1.0.tgz#4a5a684ac6992a13b1299043f3e49b1af6a0b0d3"
+  integrity sha512-K4FcPETOMTwe7KL2LK0orMhpOmWD2wRGwWWpbZy0fyArwsyIKR8YJVz8+efBAh3BO4zPqlSICu4vsLTRRqtFAg==
+
 meow@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467"
@@ -6920,11 +7614,28 @@ mkdirp@^0.5.1, mkdirp@^0.5.6, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+moment-timezone@^0.5.40:
+  version "0.5.41"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.41.tgz#a7ad3285fd24aaf5f93b8119a9d749c8039c64c5"
+  integrity sha512-e0jGNZDOHfBXJGz8vR/sIMXvBIGJJcqFjmlg9lmE+5KX1U7/RZNMswfD8nKnNCnQdKTIj50IaRKwl1fvMLyyRg==
+  dependencies:
+    moment "^2.29.4"
+
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 moo@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
   integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
 
+mousetrap@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
+  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
+
 mrmime@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
@@ -7453,6 +8164,11 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-to-regexp@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
+  integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -7917,7 +8633,7 @@ prompts@^2.0.1, prompts@^2.4.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.0, prop-types@^15.8.1:
+prop-types@^15.7.0, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7926,6 +8642,11 @@ prop-types@^15.7.0, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+proxy-compare@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.3.0.tgz#ac9633ae52918ff9c9fcc54dfe6316c7a02d20ee"
+  integrity sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ==
+
 proxy-from-env@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
@@ -8044,6 +8765,16 @@ rc@~1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+re-resizable@^6.4.0:
+  version "6.9.9"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.9.tgz#99e8b31c67a62115dc9c5394b7e55892265be216"
+  integrity sha512-l+MBlKZffv/SicxDySKEEh42hR6m5bAHfNu3Tvxks2c4Ah+ldnWjfnVRwxo/nxF27SsUsxDS0raAzFuJNKABXA==
+
+react-colorful@^5.3.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -8053,7 +8784,15 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-is@^16.12.0, react-is@^16.13.1:
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -8094,6 +8833,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  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"
@@ -8146,6 +8892,36 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+reakit-system@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.15.2.tgz#a485fab84b3942acbed6212c3b56a6ef8611c457"
+  integrity sha512-TvRthEz0DmD0rcJkGamMYx+bATwnGNWJpe/lc8UV2Js8nnPvkaxrHk5fX9cVASFrWbaIyegZHCWUBfxr30bmmA==
+  dependencies:
+    reakit-utils "^0.15.2"
+
+reakit-utils@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.15.2.tgz#b4d5836e534576bfd175171541d43182ad97f2d2"
+  integrity sha512-i/RYkq+W6hvfFmXw5QW7zvfJJT/K8a4qZ0hjA79T61JAFPGt23DsfxwyBbyK91GZrJ9HMrXFVXWMovsKBc1qEQ==
+
+reakit-warning@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/reakit-warning/-/reakit-warning-0.6.2.tgz#9c346ae483eb1f284f2088653f90cabd26dbee56"
+  integrity sha512-z/3fvuc46DJyD3nJAUOto6inz2EbSQTjvI/KBQDqxwB0y02HDyeP8IWOJxvkuAUGkWpeSx+H3QWQFSNiPcHtmw==
+  dependencies:
+    reakit-utils "^0.15.2"
+
+reakit@^1.3.8:
+  version "1.3.11"
+  resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.3.11.tgz#c15360ac43e94fbe4291d233af3ac5040428252e"
+  integrity sha512-mYxw2z0fsJNOQKAEn5FJCPTU3rcrY33YZ/HzoWqZX0G7FwySp1wkCYW79WhuYMNIUFQ8s3Baob1RtsEywmZSig==
+  dependencies:
+    "@popperjs/core" "^2.5.4"
+    body-scroll-lock "^3.1.5"
+    reakit-system "^0.15.2"
+    reakit-utils "^0.15.2"
+    reakit-warning "^0.6.2"
+
 rechoir@^0.7.0:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686"
@@ -8161,6 +8937,13 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.1.0, redux@^4.1.2:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
+  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -8254,6 +9037,16 @@ remark@^13.0.0:
     remark-stringify "^9.0.0"
     unified "^9.1.0"
 
+rememo@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/rememo/-/rememo-4.0.2.tgz#8af1f09fd3bf5809ca0bfd0b803926c67ead8c1e"
+  integrity sha512-NVfSP9NstE3QPNs/TnegQY0vnJnstKQSpcrsI2kBTB3dB2PkdfKdTa+abbjMIDqpc63fE5LfjLgfMst0ULMFxQ==
+
+remove-accents@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.4.tgz#73704abf7dae3764295d475d2b6afac4ea23e4d9"
+  integrity sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg==
+
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -8269,6 +9062,11 @@ repeat-string@^1.0.0, repeat-string@^1.6.1:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
 
+requestidlecallback@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/requestidlecallback/-/requestidlecallback-0.3.0.tgz#6fb74e0733f90df3faa4838f9f6a2a5f9b742ac5"
+  integrity sha512-TWHFkT7S9p7IxLC5A1hYmAYQx2Eb9w1skrXmQ+dS1URyvR8tenMLl4lHbqEOUnpEYxNKpkVMXUgknVpBZWXXfQ==
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -8331,7 +9129,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
 
-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.22.1, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.22.1, resolve@^1.9.0:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -8393,6 +9191,11 @@ run-parallel@^1.1.4, run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rungen@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/rungen/-/rungen-0.3.2.tgz#400c09ebe914e7b17e0b6ef3263400fc2abc7cb3"
+  integrity sha512-zWl10xu2D7zoR8zSC2U6bg5bYF6T/Wk7rxwp8IPaJH7f0Ge21G03kNHVgHR7tyVkSSfAOG0Rqf/Cl38JftSmtw==
+
 rxjs@^6.6.3:
   version "6.6.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
@@ -8400,7 +9203,7 @@ rxjs@^6.6.3:
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -8483,6 +9286,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@>1.0.0, schema-utils@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
@@ -8511,6 +9321,11 @@ schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -8723,7 +9538,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.6:
+source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
@@ -8786,6 +9601,11 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+sprintf-js@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"
+  integrity sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -9046,6 +9866,11 @@ stylelint@^13.8.0:
     v8-compile-cache "^2.3.0"
     write-file-atomic "^3.0.3"
 
+stylis@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
+  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+
 sugarss@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
@@ -9145,6 +9970,13 @@ table@^6.0.9, table@^6.6.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tannin@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tannin/-/tannin-1.2.0.tgz#1da6fe65280dca4c3d84efb075b077b1b94362a6"
+  integrity sha512-U7GgX/RcSeUETbV7gYgoz8PD7Ni4y95pgIP/Z6ayI3CfhSujwKEBlGFTCRN+Aqnuyf4AN2yHL+L8x+TCGjb9uA==
+  dependencies:
+    "@tannin/plural-forms" "^1.1.0"
+
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -9224,6 +10056,11 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-lr@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tiny-lr/-/tiny-lr-1.1.1.tgz#9fa547412f238fedb068ee295af8b682c98b2aab"
@@ -9342,12 +10179,17 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.3.0, tslib@^2.3.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
@@ -9359,6 +10201,11 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+turbo-combine-reducers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/turbo-combine-reducers/-/turbo-combine-reducers-1.0.2.tgz#aa3650b3c63daa6804d35a4042014f6d31df1e47"
+  integrity sha512-gHbdMZlA6Ym6Ur5pSH/UWrNQMIM9IqTH6SoL1DbHpqEdQ8i+cFunSmSlFykPt0eGQwZ4d/XTHOl74H0/kFBVWw==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -9585,6 +10432,23 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-lilius@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/use-lilius/-/use-lilius-2.0.3.tgz#07cdf1dea72da6f0c72d9234c16516fbbd396e2d"
+  integrity sha512-+Q7nspdv+QGnyHGVMd6yAdLrqv5EGB4n3ix4GJH0JEE27weKCLCLmZSuAr5Nw+yPBCZn/iZ+KjL5+UykLCWXrw==
+  dependencies:
+    date-fns "^2.29.2"
+
+use-memo-one@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
+  integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
+
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -9632,6 +10496,14 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+valtio@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.7.0.tgz#2105716db440402f7d0402073f938bdda7207acd"
+  integrity sha512-3Tnix66EERwMcrl1rfB3ylcewOcL5L/GiPmC3FlVNreQzqf2jufEeqlNmgnLgSGchkEmH3WYVtS+x6Qw4r+yzQ==
+  dependencies:
+    proxy-compare "2.3.0"
+    use-sync-external-store "1.2.0"
+
 vfile-message@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"

From d95f06567f5c4a70f3c436c5f4b82214f0af8d45 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Sun, 19 Mar 2023 17:27:08 +0000
Subject: [PATCH 2/6] Fix namespaces

---
 plugin.php | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/plugin.php b/plugin.php
index 491d702..e644c78 100644
--- a/plugin.php
+++ b/plugin.php
@@ -137,3 +137,24 @@ function(): void {
 
 $admin_settings = new Settings();
 $admin_settings->register_feature_settings();
+
+add_filter( 'plugin_action_links_mr-feature-flags/plugin.php', function ( $links )
+	{
+		// Build and escape the URL.
+		$url = esc_url(
+			add_query_arg(
+				'page',
+				'mr-feature-flags',
+				get_admin_url() . 'admin.php'
+			)
+		);
+		// Create the link.
+		$settings_link = "<a href='$url'>" . __( 'Settings', 'mr-feature-flags' ) . '</a>';
+		// Adds the link to the end of the array.
+		array_push(
+			$links,
+			$settings_link
+		);
+		return $links;
+	}
+);

From 18b3a70639ef258f12b4588f078c166d7a5c632e Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Mon, 20 Mar 2023 17:42:12 +0000
Subject: [PATCH 3/6] Adds more features

---
 includes/FeatureFlags.php         |  11 +++-
 includes/Settings.php             |   3 +-
 plugin.php                        |  30 ++++-----
 src/components/Layout.tsx         |  71 ++++++++++-----------
 src/components/LineItem.tsx       | 100 ++++++++++++++++++++++++++++++
 src/components/SubmitControls.tsx |  39 ++++++++++++
 src/index.ts                      |   4 +-
 src/settings.tsx                  |   1 +
 src/styles/index.scss             |   3 -
 src/styles/settings.scss          |   3 +
 types/index.ts                    |   5 ++
 11 files changed, 210 insertions(+), 60 deletions(-)
 create mode 100644 src/components/LineItem.tsx
 create mode 100644 src/components/SubmitControls.tsx
 delete mode 100644 src/styles/index.scss
 create mode 100644 src/styles/settings.scss
 create mode 100644 types/index.ts

diff --git a/includes/FeatureFlags.php b/includes/FeatureFlags.php
index b8845ca..7913646 100644
--- a/includes/FeatureFlags.php
+++ b/includes/FeatureFlags.php
@@ -58,9 +58,18 @@ public static function add_flag( string $flag ): bool {
 			throw new \Error( "Flag \"{$flag}\" already exists" );
 		}
 
+		$flag_key = 1;
+
+		if ( is_array( $flags ) && count( $flags ) ) {
+			$flag_key = count( $flags ) + 1;
+		}
+
+		// $flag_key = count( $flags ) ? count( $flags ) + 1 : 1;
+		// ddd( $flag_key );
 		$new_flag = [
+			'id'      => $flag_key,
 			'name'    => $flag,
-			'enabled' => true,
+			'enabled' => false,
 		];
 
 		if ( $flags ) {
diff --git a/includes/Settings.php b/includes/Settings.php
index 9c2a389..585e496 100644
--- a/includes/Settings.php
+++ b/includes/Settings.php
@@ -35,8 +35,9 @@ public function register_feature_settings() {
 	 * @since 1.0.0
 	 */
 	public function register_settings() {
+
 		add_menu_page(
-			'MR Feature Flags',
+			'Feature Flags',
 			'Feature Flags',
 			'manage_options',
 			'mr-feature-flags',
diff --git a/plugin.php b/plugin.php
index e644c78..94ebf7f 100644
--- a/plugin.php
+++ b/plugin.php
@@ -49,12 +49,6 @@ function(): void {
 			true
 		);
 
-		wp_enqueue_style(
-			'mr-feature-flags-style',
-			$plugin_url . 'build/index.css',
-			[],
-			$script_asset_file['version']
-		);
 
 		wp_localize_script(
 			'mr-feature-flags-script',
@@ -86,26 +80,35 @@ function load_settings_scripts(): void {
 	$settings_asset_file = require_once plugin_dir_path( MR_FEATURE_FLAGS_PLUGIN_PATH ) . 'build/settings.asset.php'; // @phpcs:ignore
 
 	wp_enqueue_script(
-		'mr-feature-flags-settings',
+		'mr-feature-flags',
 		$plugin_url . 'build/settings.js',
 		$settings_asset_file['dependencies'],
 		$settings_asset_file['version'],
 		true
 	);
 
+	wp_enqueue_style( 'wp-edit-blocks' );
+
 	wp_localize_script(
-		'mr-feature-flags-settings',
+		'mr-feature-flags',
 		'mrFeatureFlags',
 		[
 			'flags' => get_option( FeatureFlags::$option_name ),
 		]
 	);
 
+	wp_enqueue_style(
+		'mr-feature-flags',
+		$plugin_url . 'build/settings.css',
+		[],
+		$settings_asset_file['version']
+	);
+
 }
 
 add_action(
 	'admin_enqueue_scripts',
-	function(): void {
+	function(string $page): void {
 		$plugin_url        = plugin_dir_url( MR_FEATURE_FLAGS_PLUGIN_PATH );
 		$script_asset_file = include_once plugin_dir_path( MR_FEATURE_FLAGS_PLUGIN_PATH ) . 'build/index.asset.php';
 
@@ -117,12 +120,7 @@ function(): void {
 			true
 		);
 
-		wp_enqueue_style(
-			'mr-feature-flags-style',
-			$plugin_url . 'build/index.css',
-			[],
-			$script_asset_file['version']
-		);
+
 
 		wp_localize_script(
 			'mr-feature-flags-script',
@@ -158,3 +156,5 @@ function(): void {
 		return $links;
 	}
 );
+
+// FeatureFlags::add_flag('Registration');
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 78172c0..977b2f5 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,46 +1,41 @@
-import {
-	ToggleControl,
-	TextControl,
-	Flex,
-	FlexItem,
-} from '@wordpress/components';
 import { useState } from '@wordpress/element';
+import LineItem from './LineItem';
+import { Flag } from '../../types';
+import SubmitControls from './SubmitControls';
 
-interface flag {
-	name: string;
-	enabled: boolean;
-}
 const Layout = (): JSX.Element => {
-	const [flags] = useState(window.mrFeatureFlags.flags);
+	const [flags, setFlags] = useState(window.mrFeatureFlags.flags);
+	if (!flags.length) {
+		return (
+			<>
+				<p>
+					Welcome to feature flag dashboard. You can add new flags
+					`Add flags` action.
+				</p>
+				<SubmitControls isNew={true} />
+			</>
+		);
+	}
 	return (
-		<div id="mr-feature-flag-layout">
-			<h1>Feature Flags settings</h1>
-			<p>You can manage all available flags here.</p>
-			<div id="mr-feature-flag-content">
-				{flags.map((flag: flag) => {
-					return (
-						<div id="mr-feature-flag-item" key={flag.name}>
-							<Flex justify={'flex-start'}>
-								<FlexItem>
-									<TextControl
-										value={flag.name.toUpperCase()}
-										disabled
-										onChange={() => null}
-									/>
-								</FlexItem>
-								<FlexItem>
-									<ToggleControl
-										label={flag.name}
-										checked={flag.enabled}
-										onChange={() => null}
-									/>
-								</FlexItem>
-							</Flex>
-						</div>
-					);
-				})}
+		<>
+			<div id="mr-feature-flag-layout">
+				<h1>Feature Flags settings</h1>
+				<p>Manage all feature flags.</p>
+				<div id="mr-feature-flag-content">
+					{flags.map((flag: Flag) => {
+						return (
+							<LineItem
+								key={flag.id}
+								item={flag}
+								flags={flags}
+								setFlags={setFlags}
+							/>
+						);
+					})}
+					<SubmitControls />
+				</div>
 			</div>
-		</div>
+		</>
 	);
 };
 
diff --git a/src/components/LineItem.tsx b/src/components/LineItem.tsx
new file mode 100644
index 0000000..e461fec
--- /dev/null
+++ b/src/components/LineItem.tsx
@@ -0,0 +1,100 @@
+import {
+	ToggleControl,
+	TextControl,
+	Flex,
+	FlexItem,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { Flag } from '../../types';
+
+const LineItem = ({ flags, setFlags, item }: any): JSX.Element => {
+	const [isOpen, setOpen] = useState(false);
+
+	const handleDeleteFlag = (flagId: number) => {
+		const updatedFlags = flags.filter((flag: Flag) => flag.id !== flagId);
+		setFlags(updatedFlags);
+		closeModal();
+	};
+
+	const handleFlagToggle = (flagId: number) => {
+		const updatedFlags = flags.map((flag: Flag) => {
+			if (flag.id === flagId) {
+				flag.enabled = !flag.enabled;
+			}
+			return flag;
+		});
+		setFlags(updatedFlags);
+	};
+
+	const handleFlagEdit = (value: string, flagId: number) => {
+		const updatedFlags = flags.map((flag: Flag) => {
+			if (flag.id === flagId) {
+				flag.name = value;
+			}
+			return flag;
+		});
+		setFlags(updatedFlags);
+	};
+
+	const openModal = () => {
+		setOpen(true);
+	};
+	const closeModal = () => setOpen(false);
+
+	return (
+		<>
+			<div id="mr-feature-flag-item" key={item.id}>
+				<Flex justify={'flex-start'}>
+					<FlexItem>
+						<TextControl
+							value={item.name}
+							onChange={(value) => handleFlagEdit(value, item.id)}
+						/>
+					</FlexItem>
+					<FlexItem style={{ marginTop: 7, marginLeft: 10 }}>
+						<ToggleControl
+							checked={item.enabled}
+							onChange={() => handleFlagToggle(item.id)}
+						/>
+					</FlexItem>
+					<FlexItem style={{ marginBottom: 6 }}>
+						<Button
+							icon={'trash'}
+							isDestructive
+							variant="tertiary"
+							label="Delete Flag"
+							onClick={() => openModal()}
+						/>
+					</FlexItem>
+				</Flex>
+				<hr />
+			</div>
+			{isOpen && (
+				<Modal
+					title={`Delete Feature Flag`}
+					onRequestClose={closeModal}
+				>
+					<p>
+						Are you sure want to delete flag &quot;{item.name}
+						&quot;?
+					</p>
+					<Button
+						isDestructive
+						variant="secondary"
+						onClick={() => handleDeleteFlag(item.id)}
+						style={{ marginRight: 10 }}
+					>
+						Yes
+					</Button>
+					<Button variant="tertiary" onClick={closeModal}>
+						Cancel
+					</Button>
+				</Modal>
+			)}
+		</>
+	);
+};
+
+export default LineItem;
diff --git a/src/components/SubmitControls.tsx b/src/components/SubmitControls.tsx
new file mode 100644
index 0000000..e21763b
--- /dev/null
+++ b/src/components/SubmitControls.tsx
@@ -0,0 +1,39 @@
+import { Flex, FlexItem, Button } from '@wordpress/components';
+
+const SubmitControls = ({ isNew }: { isNew?: boolean }): JSX.Element => {
+	return (
+		<div id="mr-feature-flag-submit-controls">
+			<Flex justify={'flex-start'}>
+				<FlexItem>
+					<Button
+						variant="primary"
+						onClick={() => null}
+						style={{ marginRight: 15 }}
+						icon={'plus'}
+					>
+						Add Flag
+					</Button>
+				</FlexItem>
+				{!isNew && (
+					<>
+						<FlexItem>
+							<Button variant="primary" onClick={() => null}>
+								Save
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="tertiary"
+								onClick={() => location.reload()}
+							>
+								Cancel
+							</Button>
+						</FlexItem>
+					</>
+				)}
+			</Flex>
+		</div>
+	);
+};
+
+export default SubmitControls;
diff --git a/src/index.ts b/src/index.ts
index fd59852..93216f0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,3 @@
-import './styles/index.scss';
-
 const { mrFeatureFlags } = window;
 
 mrFeatureFlags.isEnabled = (flag: string) => {
@@ -12,3 +10,5 @@ mrFeatureFlags.isEnabled = (flag: string) => {
 
 	return false;
 };
+
+export {};
diff --git a/src/settings.tsx b/src/settings.tsx
index a49bea8..0b250fd 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -1,3 +1,4 @@
 import { render } from '@wordpress/element';
 import Layout from './components/Layout';
+import './styles/settings.scss';
 render(<Layout />, document.getElementById('mr_feature_flags_settings_screen'));
diff --git a/src/styles/index.scss b/src/styles/index.scss
deleted file mode 100644
index 028b555..0000000
--- a/src/styles/index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-p{
-    color: #e01919;
-}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
new file mode 100644
index 0000000..f2e54a6
--- /dev/null
+++ b/src/styles/settings.scss
@@ -0,0 +1,3 @@
+#mr-feature-flag-slug {
+    padding-bottom: 10px;
+}
diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..5d20de7
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1,5 @@
+export interface Flag {
+	id: number;
+	name: string;
+	enabled: boolean;
+}

From 0c28631e219cb8129b8ed80b585d2ae4b0785dc7 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Mon, 20 Mar 2023 20:56:54 +0000
Subject: [PATCH 4/6] Adds new item functionality

---
 src/components/Layout.tsx         | 19 +++++++++++++++----
 src/components/LineItem.tsx       | 24 +++++++++++++++++++++++-
 src/components/SubmitControls.tsx | 16 +++++++++++++---
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 977b2f5..ba24f3b 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -4,8 +4,13 @@ import { Flag } from '../../types';
 import SubmitControls from './SubmitControls';
 
 const Layout = (): JSX.Element => {
-	const [flags, setFlags] = useState(window.mrFeatureFlags.flags);
-	if (!flags.length) {
+	const [flags, setFlags] = useState<Flag[] | undefined>(
+		window.mrFeatureFlags.flags
+	);
+
+	const flagsCount = flags?.length || 0;
+
+	if (!flagsCount) {
 		return (
 			<>
 				<p>
@@ -22,7 +27,7 @@ const Layout = (): JSX.Element => {
 				<h1>Feature Flags settings</h1>
 				<p>Manage all feature flags.</p>
 				<div id="mr-feature-flag-content">
-					{flags.map((flag: Flag) => {
+					{flags?.map((flag: Flag) => {
 						return (
 							<LineItem
 								key={flag.id}
@@ -32,7 +37,13 @@ const Layout = (): JSX.Element => {
 							/>
 						);
 					})}
-					<SubmitControls />
+
+					<SubmitControls
+						setFlags={setFlags}
+						flags={flags}
+						isNew={false}
+						flagsCount={flagsCount}
+					/>
 				</div>
 			</div>
 		</>
diff --git a/src/components/LineItem.tsx b/src/components/LineItem.tsx
index e461fec..956c620 100644
--- a/src/components/LineItem.tsx
+++ b/src/components/LineItem.tsx
@@ -5,6 +5,7 @@ import {
 	FlexItem,
 	Button,
 	Modal,
+	BaseControl,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { Flag } from '../../types';
@@ -29,6 +30,11 @@ const LineItem = ({ flags, setFlags, item }: any): JSX.Element => {
 	};
 
 	const handleFlagEdit = (value: string, flagId: number) => {
+		if (value.match(/^[a-zA-Z0-9\_-]*$/)) {
+			console.log('match found');
+		} else {
+			console.log('no match');
+		}
 		const updatedFlags = flags.map((flag: Flag) => {
 			if (flag.id === flagId) {
 				flag.name = value;
@@ -43,6 +49,14 @@ const LineItem = ({ flags, setFlags, item }: any): JSX.Element => {
 	};
 	const closeModal = () => setOpen(false);
 
+	const handleDeleteModal = (flag: Flag) => {
+		if (flag.name) {
+			openModal();
+			return;
+		}
+		handleDeleteFlag(flag.id);
+	};
+
 	return (
 		<>
 			<div id="mr-feature-flag-item" key={item.id}>
@@ -65,10 +79,18 @@ const LineItem = ({ flags, setFlags, item }: any): JSX.Element => {
 							isDestructive
 							variant="tertiary"
 							label="Delete Flag"
-							onClick={() => openModal()}
+							onClick={() => handleDeleteModal(item)}
 						/>
 					</FlexItem>
 				</Flex>
+				{!item.name && (
+					<BaseControl
+						help="Flag name should not be empty"
+						id={item.id}
+					>
+						{}
+					</BaseControl>
+				)}
 				<hr />
 			</div>
 			{isOpen && (
diff --git a/src/components/SubmitControls.tsx b/src/components/SubmitControls.tsx
index e21763b..85cb95f 100644
--- a/src/components/SubmitControls.tsx
+++ b/src/components/SubmitControls.tsx
@@ -1,13 +1,23 @@
 import { Flex, FlexItem, Button } from '@wordpress/components';
 
-const SubmitControls = ({ isNew }: { isNew?: boolean }): JSX.Element => {
+const SubmitControls = (props: any): JSX.Element => {
+	const { isNew, flags, setFlags, flagsCount } = props;
+	const handleNewFlag = () => {
+		const newFlag = { id: flagsCount + 1, name: '', enabled: false };
+		const clonedFlags = [...flags, newFlag];
+		setFlags(clonedFlags);
+	};
+
+	const handleSave = () => {
+		console.log(flags);
+	};
 	return (
 		<div id="mr-feature-flag-submit-controls">
 			<Flex justify={'flex-start'}>
 				<FlexItem>
 					<Button
 						variant="primary"
-						onClick={() => null}
+						onClick={handleNewFlag}
 						style={{ marginRight: 15 }}
 						icon={'plus'}
 					>
@@ -17,7 +27,7 @@ const SubmitControls = ({ isNew }: { isNew?: boolean }): JSX.Element => {
 				{!isNew && (
 					<>
 						<FlexItem>
-							<Button variant="primary" onClick={() => null}>
+							<Button variant="primary" onClick={handleSave}>
 								Save
 							</Button>
 						</FlexItem>

From 77491d80b390df212d7d7d7a3bc01ef17708879e Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Tue, 21 Mar 2023 16:09:33 +0000
Subject: [PATCH 5/6] Adds custom REST endpoints

---
 includes/Api/FlagOptions.php      | 120 ++++++++++++++++++++++++++++++
 package.json                      |   4 +
 plugin.php                        |  19 ++++-
 src/components/Layout.tsx         |  66 ++++++++++------
 src/components/LineItem.tsx       |  38 +++++++---
 src/components/Snackbar.jsx       |  22 ++++++
 src/components/SubmitControls.tsx |  33 ++++++--
 src/constants/index.ts            |   2 +
 src/styles/settings.scss          |  18 ++++-
 src/utils/index.ts                |  26 +++++++
 yarn.lock                         |  26 +++++++
 11 files changed, 335 insertions(+), 39 deletions(-)
 create mode 100644 includes/Api/FlagOptions.php
 create mode 100644 src/components/Snackbar.jsx
 create mode 100644 src/constants/index.ts
 create mode 100644 src/utils/index.ts

diff --git a/includes/Api/FlagOptions.php b/includes/Api/FlagOptions.php
new file mode 100644
index 0000000..8b2f6c3
--- /dev/null
+++ b/includes/Api/FlagOptions.php
@@ -0,0 +1,120 @@
+<?php
+/**
+ * API class for feature flags options
+ *
+ * @package mr-feature-flags
+ * @since 1.0.0
+ */
+
+declare(strict_types=1);
+
+namespace MR\FeatureFlags\Api;
+
+/**
+ * Class Settings
+ *
+ * @package mr-feature-flags
+ * @since 1.0.0
+ */
+class FlagOptions {
+
+	/**
+	 * Name in options table.
+	 *
+	 * @var string $option_name
+	 */
+	public static $option_name = 'mr_feature_flags';
+
+	/**
+	 * Register feature flag endpoints.
+	 *
+	 * @return void
+	 * @since 1.0.0
+	 */
+	public function register_flags_endpoints() {
+		add_action(
+			'rest_api_init',
+			function () {
+				register_rest_route(
+					'feature-flags/v1',
+					'flags',
+					[
+						[
+							'methods'             => \WP_REST_SERVER::READABLE,
+							'callback'            => [ $this, 'get_all_flags' ],
+							'permission_callback' => '__return_true',
+						],
+						[
+							'methods'             => \WP_REST_SERVER::EDITABLE,
+							'callback'            => [ $this, 'post_flags' ],
+							'permission_callback' => '__return_true',
+						],
+					]
+				);
+
+			}
+		);
+	}
+
+	/**
+	 * Get all flags from options
+	 *
+	 * @return mixed List of flags.
+	 */
+	public function get_all_flags() {
+		$flags = get_option( self::$option_name );
+
+		if ( empty( $flags ) ) {
+			return new \WP_Error( 'no_flags', 'Flags not found', array( 'status' => 404 ) );
+		}
+
+		return rest_ensure_response( $flags );
+	}
+
+	/**
+	 * Insert / Update flags in options table.
+	 *
+	 * @return mixed List of flags.
+	 */
+	public function post_flags( $request ) {
+		$flags = $request->get_json_params();
+
+		if ( is_array( $flags ) ) {
+			$result = update_option( self::$option_name, $flags );
+			return rest_ensure_response(
+				array(
+					'status'  => 200,
+					'success' => true,
+				),
+			);
+
+		} else {
+			return new \WP_Error( 'invalid_input', 'Cannot update flags', array( 'status' => 400 ) );
+		}
+	}
+
+	/**
+	 * Register settings action method.
+	 *
+	 * @return void
+	 * @since 1.0.0
+	 */
+	public function register_settings() {
+
+		add_menu_page(
+			'Feature Flags',
+			'Feature Flags',
+			'manage_options',
+			'mr-feature-flags',
+			[ $this, 'render_page' ],
+			'data:image/svg+xml;base64,' . base64_encode( '<svg width="15" height="18" viewBox="0 0 2000 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M0 896q0-130 51-248.5t136.5-204 204-136.5 248.5-51h768q130 0 248.5 51t204 136.5 136.5 204 51 248.5-51 248.5-136.5 204-204 136.5-248.5 51h-768q-130 0-248.5-51t-204-136.5-136.5-204-51-248.5zm1408 512q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5-198.5 40.5-163.5 109.5-109.5 163.5-40.5 198.5 40.5 198.5 109.5 163.5 163.5 109.5 198.5 40.5z"/></svg>' )
+		);
+	}
+
+	/**
+	 * Render page
+	 */
+	public function render_page() {
+		echo '<div id="mr_feature_flags_settings_screen"></div>';
+	}
+}
diff --git a/package.json b/package.json
index 4a9c124..b674c83 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,11 @@
   "license": "ISC",
   "dependencies": {
     "@types/wordpress__components": "^23.0.1",
+    "@wordpress/api-fetch": "^6.26.0",
     "@wordpress/components": "^23.6.0",
+    "@wordpress/data": "^8.6.0",
+    "@wordpress/i18n": "^4.29.0",
+    "@wordpress/notices": "^3.29.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2"
   }
diff --git a/plugin.php b/plugin.php
index 94ebf7f..0ca718d 100644
--- a/plugin.php
+++ b/plugin.php
@@ -19,6 +19,7 @@
 declare( strict_types = 1 );
 
 namespace MR\FeatureFlags;
+use MR\FeatureFlags\Api\FlagOptions;
 
 // If this file is called directly, abort.
 if ( ! defined( 'WPINC' ) ) {
@@ -133,8 +134,22 @@ function(string $page): void {
 	}
 );
 
-$admin_settings = new Settings();
-$admin_settings->register_feature_settings();
+$mr_feature_flags_admin_settings = new Settings();
+$mr_feature_flags_admin_settings->register_feature_settings();
+
+$mr_feature_flags_register_api = new FlagOptions();
+$mr_feature_flags_register_api->register_flags_endpoints();
+
+
+// add_action ('init', function() {
+
+// 	$request = new \WP_REST_Request( 'GET', '/feature-flags/v1/flags' );
+// 	$request->set_query_params( [] );
+// 	$response = rest_do_request( $request );
+// 	ddd(rest_get_server()->response_to_data( $response, false ));
+
+// });
+
 
 add_filter( 'plugin_action_links_mr-feature-flags/plugin.php', function ( $links )
 	{
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ba24f3b..e6cd850 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,16 +1,30 @@
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
 import LineItem from './LineItem';
 import { Flag } from '../../types';
 import SubmitControls from './SubmitControls';
+import { getFlags } from '../utils';
 
 const Layout = (): JSX.Element => {
-	const [flags, setFlags] = useState<Flag[] | undefined>(
-		window.mrFeatureFlags.flags
-	);
+	const [flags, setFlags] = useState<Flag[] | undefined>(undefined);
+	const [isLoading, setIsLoading] = useState<boolean>(true);
+
+	useEffect(() => {
+		const logFlags = async () => {
+			const result = await getFlags();
+			if (Array.isArray(result)) {
+				setFlags(result);
+				setIsLoading(false);
+			}
+		};
+		logFlags();
+	}, [getFlags, setFlags, setIsLoading]);
+
+	const [disableSave, setDisableSave] = useState(false);
 
 	const flagsCount = flags?.length || 0;
 
-	if (!flagsCount) {
+	if (!flagsCount && !isLoading) {
 		return (
 			<>
 				<p>
@@ -27,23 +41,33 @@ const Layout = (): JSX.Element => {
 				<h1>Feature Flags settings</h1>
 				<p>Manage all feature flags.</p>
 				<div id="mr-feature-flag-content">
-					{flags?.map((flag: Flag) => {
-						return (
-							<LineItem
-								key={flag.id}
-								item={flag}
-								flags={flags}
-								setFlags={setFlags}
-							/>
-						);
-					})}
+					{isLoading ? (
+						<div className="feature-flag-loader">
+							<Spinner />
+						</div>
+					) : (
+						flags?.map((flag: Flag) => {
+							return (
+								<LineItem
+									key={flag.id}
+									item={flag}
+									flags={flags}
+									setFlags={setFlags}
+									setDisableSave={setDisableSave}
+								/>
+							);
+						})
+					)}
 
-					<SubmitControls
-						setFlags={setFlags}
-						flags={flags}
-						isNew={false}
-						flagsCount={flagsCount}
-					/>
+					{!isLoading && (
+						<SubmitControls
+							setFlags={setFlags}
+							flags={flags}
+							isNew={false}
+							flagsCount={flagsCount}
+							disableSave={disableSave}
+						/>
+					)}
 				</div>
 			</div>
 		</>
diff --git a/src/components/LineItem.tsx b/src/components/LineItem.tsx
index 956c620..ab2cf37 100644
--- a/src/components/LineItem.tsx
+++ b/src/components/LineItem.tsx
@@ -10,9 +10,16 @@ import {
 import { useState } from '@wordpress/element';
 import { Flag } from '../../types';
 
-const LineItem = ({ flags, setFlags, item }: any): JSX.Element => {
+const LineItem = ({
+	flags,
+	setFlags,
+	item,
+	setDisableSave,
+}: any): JSX.Element => {
 	const [isOpen, setOpen] = useState(false);
 
+	const [hasError, setHasError] = useState(false);
+
 	const handleDeleteFlag = (flagId: number) => {
 		const updatedFlags = flags.filter((flag: Flag) => flag.id !== flagId);
 		setFlags(updatedFlags);
@@ -31,9 +38,11 @@ const LineItem = ({ flags, setFlags, item }: any): JSX.Element => {
 
 	const handleFlagEdit = (value: string, flagId: number) => {
 		if (value.match(/^[a-zA-Z0-9\_-]*$/)) {
-			console.log('match found');
+			setHasError(false);
+			setDisableSave(false);
 		} else {
-			console.log('no match');
+			setHasError(true);
+			setDisableSave(true);
 		}
 		const updatedFlags = flags.map((flag: Flag) => {
 			if (flag.id === flagId) {
@@ -83,13 +92,22 @@ const LineItem = ({ flags, setFlags, item }: any): JSX.Element => {
 						/>
 					</FlexItem>
 				</Flex>
-				{!item.name && (
-					<BaseControl
-						help="Flag name should not be empty"
-						id={item.id}
-					>
-						{}
-					</BaseControl>
+				{hasError && (
+					<>
+						<BaseControl
+							className="flag-name-error"
+							help="Flag name should not contain spaces. Allowed special characters are - and _"
+							id={item.id}
+						>
+							{}
+						</BaseControl>
+						<BaseControl
+							help="Example flag names formats: Registration, AB-testing, Auth0_Login"
+							id={item.id}
+						>
+							{}
+						</BaseControl>
+					</>
 				)}
 				<hr />
 			</div>
diff --git a/src/components/Snackbar.jsx b/src/components/Snackbar.jsx
new file mode 100644
index 0000000..fcbccd5
--- /dev/null
+++ b/src/components/Snackbar.jsx
@@ -0,0 +1,22 @@
+import { SnackbarList } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+const Notices = () => {
+	const notices = useSelect(
+		(select) =>
+			select(noticesStore)
+				.getNotices()
+				.filter((notice) => notice.type === 'snackbar'),
+		[]
+	);
+	const { removeNotice } = useDispatch(noticesStore);
+	return (
+		<SnackbarList
+			className="feature-flag-snackbar"
+			notices={notices}
+			onRemove={removeNotice}
+		/>
+	);
+};
+
+export default Notices;
diff --git a/src/components/SubmitControls.tsx b/src/components/SubmitControls.tsx
index 85cb95f..924bd03 100644
--- a/src/components/SubmitControls.tsx
+++ b/src/components/SubmitControls.tsx
@@ -1,15 +1,32 @@
 import { Flex, FlexItem, Button } from '@wordpress/components';
+import { Flag } from '../../types';
+import { updateFlags } from '../utils';
+import { useState } from '@wordpress/element';
+import Notices from './Snackbar';
+import { dispatch } from '@wordpress/data';
 
 const SubmitControls = (props: any): JSX.Element => {
-	const { isNew, flags, setFlags, flagsCount } = props;
+	const { isNew, flags, setFlags, flagsCount, disableSave } = props;
+	const [isSaving, setIsSaving] = useState<boolean>(false);
+
 	const handleNewFlag = () => {
 		const newFlag = { id: flagsCount + 1, name: '', enabled: false };
 		const clonedFlags = [...flags, newFlag];
 		setFlags(clonedFlags);
 	};
 
-	const handleSave = () => {
-		console.log(flags);
+	const handleSave = async () => {
+		setIsSaving(true);
+		const cleanFlags: Flag[] = flags.filter(
+			(item: Flag) => item.name !== ''
+		);
+		await updateFlags(cleanFlags);
+
+		setIsSaving(false);
+
+		dispatch('core/notices').createSuccessNotice('✅ Saved successfully!', {
+			type: 'snackbar',
+		});
 	};
 	return (
 		<div id="mr-feature-flag-submit-controls">
@@ -27,8 +44,12 @@ const SubmitControls = (props: any): JSX.Element => {
 				{!isNew && (
 					<>
 						<FlexItem>
-							<Button variant="primary" onClick={handleSave}>
-								Save
+							<Button
+								variant="primary"
+								onClick={handleSave}
+								disabled={disableSave || isSaving}
+							>
+								{isSaving ? 'Saving' : 'Save'}
 							</Button>
 						</FlexItem>
 						<FlexItem>
@@ -42,6 +63,8 @@ const SubmitControls = (props: any): JSX.Element => {
 					</>
 				)}
 			</Flex>
+
+			<Notices />
 		</div>
 	);
 };
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 0000000..fd35008
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,2 @@
+export const FEATURE_FLAG_NAMESPACE = '/feature-flags/v1';
+export const FEATURE_FLAG_ROUTE = 'flags';
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index f2e54a6..6ec52ff 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,3 +1,19 @@
 #mr-feature-flag-slug {
-    padding-bottom: 10px;
+	padding-bottom: 10px;
+}
+
+.flag-name-error > p {
+	color: #cc1818;
+}
+
+.feature-flag-snackbar {
+	bottom: 3.5rem;
+	position: fixed;
+}
+
+.feature-flag-loader {
+	.components-spinner {
+		width: 20px;
+		height: 20px;
+	}
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..cf051e4
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,26 @@
+import apiFetch from '@wordpress/api-fetch';
+import { FEATURE_FLAG_NAMESPACE, FEATURE_FLAG_ROUTE } from '../constants';
+import { Flag } from '../../types';
+
+export const getFlags = async (): Promise<Flag[] | Error> => {
+	const result: Flag[] | Error = await apiFetch({
+		method: 'GET',
+		path: `${FEATURE_FLAG_NAMESPACE}/${FEATURE_FLAG_ROUTE}`,
+	});
+
+	return result;
+};
+
+export const updateFlags = async (
+	flags: Flag[]
+): Promise<{ status: number; success: boolean } | Error> => {
+	const result: { status: number; success: boolean } | Error = await apiFetch(
+		{
+			method: 'POST',
+			path: `${FEATURE_FLAG_NAMESPACE}/${FEATURE_FLAG_ROUTE}`,
+			data: flags,
+		}
+	);
+
+	return result;
+};
diff --git a/yarn.lock b/yarn.lock
index a9ea784..0f6d7be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2442,6 +2442,15 @@
     "@wordpress/dom-ready" "^3.29.0"
     "@wordpress/i18n" "^4.29.0"
 
+"@wordpress/api-fetch@^6.26.0":
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/api-fetch/-/api-fetch-6.26.0.tgz#a6e6c7e2d22558e217bbe633d813435bd75962ba"
+  integrity sha512-gAishZDwMkcAakgIO4qgKzUR9VTMWOTNuRlP4Y0KozoI42EXvBomjlnH0nvlPXRf1K4vfmS2Bx03bpma5OPrBQ==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/i18n" "^4.29.0"
+    "@wordpress/url" "^3.30.0"
+
 "@wordpress/babel-plugin-import-jsx-pragma@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-3.2.0.tgz#0d4dc9ca50ed0cf1c14966db602351b13625303a"
@@ -2759,6 +2768,15 @@
     "@wordpress/i18n" "^4.29.0"
     change-case "^4.1.2"
 
+"@wordpress/notices@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/notices/-/notices-3.29.0.tgz#6297c85436c77f5f7d6c317f6cc65ed4f3e30e4b"
+  integrity sha512-yk73fppy89ZswTi/XYcXmEJtjUbqvFMxfL5KfDjUolAntc4GSK3IMg1MIQnEimSOKi+r/3hiAUakJUZJ4ivb2g==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/a11y" "^3.29.0"
+    "@wordpress/data" "^8.6.0"
+
 "@wordpress/npm-package-json-lint-config@^4.1.0":
   version "4.14.0"
   resolved "https://registry.yarnpkg.com/@wordpress/npm-package-json-lint-config/-/npm-package-json-lint-config-4.14.0.tgz#35998c5f4ced5143e41911b28840275e50f91f97"
@@ -2894,6 +2912,14 @@
     stylelint-config-recommended-scss "^4.2.0"
     stylelint-scss "^3.17.2"
 
+"@wordpress/url@^3.30.0":
+  version "3.30.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/url/-/url-3.30.0.tgz#58aeece353f45d91394808ba1a68583236be2c84"
+  integrity sha512-RtvReNo2TRuorS4JdgVeV53mgDJeMrWokCiE4LV2oTdguGuBrlQ3YcywEApfZMkoAY7MSwxexy1WAfyBdee/qg==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    remove-accents "^0.4.2"
+
 "@wordpress/warning@^2.15.0", "@wordpress/warning@^2.29.0":
   version "2.29.0"
   resolved "https://registry.yarnpkg.com/@wordpress/warning/-/warning-2.29.0.tgz#5730b616af0595268cec0ced0b9069b40313fb85"

From 0d120a5117c0aad6b118b39d4a1f703024966390 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Tue, 21 Mar 2023 16:46:08 +0000
Subject: [PATCH 6/6] Fixs last flag mismatch issue

---
 src/components/Layout.tsx         | 6 +++---
 src/components/SubmitControls.tsx | 4 ++--
 tsconfig.json                     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e6cd850..1e92cdf 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -22,9 +22,9 @@ const Layout = (): JSX.Element => {
 
 	const [disableSave, setDisableSave] = useState(false);
 
-	const flagsCount = flags?.length || 0;
+	const lastFlag = flags?.at(-1)?.id || 0;
 
-	if (!flagsCount && !isLoading) {
+	if (!lastFlag && !isLoading) {
 		return (
 			<>
 				<p>
@@ -64,7 +64,7 @@ const Layout = (): JSX.Element => {
 							setFlags={setFlags}
 							flags={flags}
 							isNew={false}
-							flagsCount={flagsCount}
+							lastFlag={lastFlag}
 							disableSave={disableSave}
 						/>
 					)}
diff --git a/src/components/SubmitControls.tsx b/src/components/SubmitControls.tsx
index 924bd03..982da5b 100644
--- a/src/components/SubmitControls.tsx
+++ b/src/components/SubmitControls.tsx
@@ -6,11 +6,11 @@ import Notices from './Snackbar';
 import { dispatch } from '@wordpress/data';
 
 const SubmitControls = (props: any): JSX.Element => {
-	const { isNew, flags, setFlags, flagsCount, disableSave } = props;
+	const { isNew, flags, setFlags, lastFlag, disableSave } = props;
 	const [isSaving, setIsSaving] = useState<boolean>(false);
 
 	const handleNewFlag = () => {
-		const newFlag = { id: flagsCount + 1, name: '', enabled: false };
+		const newFlag = { id: lastFlag + 1, name: '', enabled: false };
 		const clonedFlags = [...flags, newFlag];
 		setFlags(clonedFlags);
 	};
diff --git a/tsconfig.json b/tsconfig.json
index 5b77ff8..e40c322 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
       "outDir": "./build",
       "jsx": "react-jsx",
       "module": "ESNext",
-      "target": "es2021",
+      "target": "es2022",
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "sourceMap": true,