@wordpress/components 21.0.2 → 21.1.2-next.4d3b314fd5.0

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -1,533 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ColorPalette Dropdown .renderContent should render dropdown content 1`] = `
-<DropdownContentWrapperDiv
-  className="components-dropdown-content-wrapper"
-  data-wp-c16t={true}
-  data-wp-component="DropdownContentWrapper"
-  paddingSize="none"
->
-  <LegacyAdapter
-    color="#f00"
-    onChange={[Function]}
-  />
-</DropdownContentWrapperDiv>
-`;
-
-exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`] = `
+exports[`ColorPalette should allow disabling custom color picker 1`] = `
 .emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-}
-
-.emotion-1 {
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-2>* {
-  min-width: 0;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  gap: calc(4px * 3);
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-3>* {
-  min-width: 0;
-}
-
-.emotion-5 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-.emotion-7 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-8 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
+.emotion-0>* {
   min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-10 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-14 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-18 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-<Flex
-  align="flex-start"
-  aria-expanded={true}
-  aria-haspopup="true"
-  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-  as="button"
-  className="components-color-palette__custom-color"
-  justify="space-between"
-  onClick={[MockFunction]}
-  style={
-    Object {
-      "background": "#f00",
-      "color": "#000",
-    }
-  }
->
-  <View
-    aria-expanded={true}
-    aria-haspopup="true"
-    aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-    as="button"
-    className="emotion-0 emotion-1 emotion-2 components-flex components-color-palette__custom-color"
-    data-wp-c16t={true}
-    data-wp-component="Flex"
-    onClick={[MockFunction]}
-    style={
-      Object {
-        "background": "#f00",
-        "color": "#000",
-      }
-    }
+<div>
+  <div
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
   >
-    <Noop />
-    <button
-      aria-expanded={true}
-      aria-haspopup="true"
-      aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-      className="components-flex components-color-palette__custom-color emotion-3 emotion-4"
-      data-wp-c16t={true}
-      data-wp-component="Flex"
-      onClick={[MockFunction]}
-      style={
-        Object {
-          "background": "#f00",
-          "color": "#000",
-        }
-      }
+    <div
+      class="components-circular-option-picker"
     >
-      <FlexItem
-        as={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "__contextSystemKey__": Array [
-              "Truncate",
-            ],
-            "render": [Function],
-            "selector": ".components-truncate",
-          }
-        }
-        className="components-color-palette__custom-color-name"
-        isBlock={true}
+      <div
+        class="components-circular-option-picker__swatches"
       >
-        <View
-          as={
-            Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "__contextSystemKey__": Array [
-                "Truncate",
-              ],
-              "render": [Function],
-              "selector": ".components-truncate",
-            }
-          }
-          className="emotion-5 emotion-6 emotion-7 components-flex-item components-color-palette__custom-color-name"
-          data-wp-c16t={true}
-          data-wp-component="FlexItem"
+        <div
+          class="components-circular-option-picker__option-wrapper"
         >
-          <Noop />
-          <Truncate
-            className="components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
-            data-wp-c16t={true}
-            data-wp-component="FlexItem"
+          <button
+            aria-label="Color: red"
+            aria-pressed="true"
+            class="components-button components-circular-option-picker__option is-pressed"
+            style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
+            type="button"
+          />
+          <svg
+            aria-hidden="true"
+            fill="#000"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <View
-              as="span"
-              className="emotion-10 components-truncate components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
-              data-wp-c16t={true}
-              data-wp-component="FlexItem"
-            >
-              <Noop />
-              <span
-                className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-4 emotion-14 emotion-4"
-                data-wp-c16t={true}
-                data-wp-component="FlexItem"
-              >
-                red
-              </span>
-            </View>
-          </Truncate>
-        </View>
-      </FlexItem>
-      <FlexItem
-        as="span"
-        className="components-color-palette__custom-color-value"
-      >
-        <View
-          as="span"
-          className="emotion-5 emotion-6 components-flex-item components-color-palette__custom-color-value"
-          data-wp-c16t={true}
-          data-wp-component="FlexItem"
+            <path
+              d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+            />
+          </svg>
+        </div>
+        <div
+          class="components-circular-option-picker__option-wrapper"
         >
-          <Noop />
-          <span
-            className="components-flex-item components-color-palette__custom-color-value emotion-18 emotion-4"
-            data-wp-c16t={true}
-            data-wp-component="FlexItem"
-          >
-            f00
-          </span>
-        </View>
-      </FlexItem>
-    </button>
-  </View>
-</Flex>
-`;
-
-exports[`ColorPalette Dropdown should render it correctly 1`] = `
-.emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-1 {
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-2>* {
-  min-width: 0;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-3>* {
-  min-width: 0;
-}
-
-.emotion-5 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-.emotion-7 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-8 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-10 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-14 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-18 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-<Dropdown
-  contentClassName="components-color-palette__custom-color-dropdown-content"
-  popoverProps={
-    Object {
-      "offset": 8,
-      "placement": "bottom",
-      "shift": true,
-    }
-  }
-  renderContent={[Function]}
-  renderToggle={[Function]}
->
-  <div
-    className="components-dropdown"
-    tabIndex="-1"
-  >
-    <Flex
-      align="flex-start"
-      aria-expanded={false}
-      aria-haspopup="true"
-      aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-      as="button"
-      className="components-color-palette__custom-color"
-      justify="space-between"
-      onClick={[Function]}
-      style={
-        Object {
-          "background": "#f00",
-          "color": "#000",
-        }
-      }
-    >
-      <View
-        aria-expanded={false}
-        aria-haspopup="true"
-        aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-        as="button"
-        className="emotion-0 emotion-1 emotion-2 components-flex components-color-palette__custom-color"
-        data-wp-c16t={true}
-        data-wp-component="Flex"
-        onClick={[Function]}
-        style={
-          Object {
-            "background": "#f00",
-            "color": "#000",
-          }
-        }
+          <button
+            aria-label="Color: white"
+            aria-pressed="false"
+            class="components-button components-circular-option-picker__option"
+            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
+            type="button"
+          />
+        </div>
+        <div
+          class="components-circular-option-picker__option-wrapper"
+        >
+          <button
+            aria-label="Color: blue"
+            aria-pressed="false"
+            class="components-button components-circular-option-picker__option"
+            style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
+            type="button"
+          />
+        </div>
+      </div>
+      <div
+        class="components-circular-option-picker__custom-clear-wrapper"
       >
-        <Noop />
         <button
-          aria-expanded={false}
-          aria-haspopup="true"
-          aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-          className="components-flex components-color-palette__custom-color emotion-3 emotion-4"
-          data-wp-c16t={true}
-          data-wp-component="Flex"
-          onClick={[Function]}
-          style={
-            Object {
-              "background": "#f00",
-              "color": "#000",
-            }
-          }
+          class="components-button components-circular-option-picker__clear is-tertiary"
+          type="button"
         >
-          <FlexItem
-            as={
-              Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "__contextSystemKey__": Array [
-                  "Truncate",
-                ],
-                "render": [Function],
-                "selector": ".components-truncate",
-              }
-            }
-            className="components-color-palette__custom-color-name"
-            isBlock={true}
-          >
-            <View
-              as={
-                Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "__contextSystemKey__": Array [
-                    "Truncate",
-                  ],
-                  "render": [Function],
-                  "selector": ".components-truncate",
-                }
-              }
-              className="emotion-5 emotion-6 emotion-7 components-flex-item components-color-palette__custom-color-name"
-              data-wp-c16t={true}
-              data-wp-component="FlexItem"
-            >
-              <Noop />
-              <Truncate
-                className="components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
-                data-wp-c16t={true}
-                data-wp-component="FlexItem"
-              >
-                <View
-                  as="span"
-                  className="emotion-10 components-truncate components-flex-item components-color-palette__custom-color-name emotion-8 emotion-4"
-                  data-wp-c16t={true}
-                  data-wp-component="FlexItem"
-                >
-                  <Noop />
-                  <span
-                    className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-4 emotion-14 emotion-4"
-                    data-wp-c16t={true}
-                    data-wp-component="FlexItem"
-                  >
-                    red
-                  </span>
-                </View>
-              </Truncate>
-            </View>
-          </FlexItem>
-          <FlexItem
-            as="span"
-            className="components-color-palette__custom-color-value"
-          >
-            <View
-              as="span"
-              className="emotion-5 emotion-6 components-flex-item components-color-palette__custom-color-value"
-              data-wp-c16t={true}
-              data-wp-component="FlexItem"
-            >
-              <Noop />
-              <span
-                className="components-flex-item components-color-palette__custom-color-value emotion-18 emotion-4"
-                data-wp-c16t={true}
-                data-wp-component="FlexItem"
-              >
-                f00
-              </span>
-            </View>
-          </FlexItem>
+          Clear
         </button>
-      </View>
-    </Flex>
+      </div>
+    </div>
   </div>
-</Dropdown>
-`;
-
-exports[`ColorPalette should allow disabling custom color picker 1`] = `
-<VStack
-  spacing={3}
->
-  <SinglePalette
-    actions={
-      <ButtonAction
-        onClick={[Function]}
-      >
-        Clear
-      </ButtonAction>
-    }
-    clearColor={[Function]}
-    clearable={true}
-    colors={
-      Array [
-        Object {
-          "color": "#f00",
-          "name": "red",
-        },
-        Object {
-          "color": "#fff",
-          "name": "white",
-        },
-        Object {
-          "color": "#00f",
-          "name": "blue",
-        },
-      ]
-    }
-    onChange={[MockFunction]}
-    value="#f00"
-  />
-</VStack>
+</div>
 `;
 
 exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
@@ -536,9 +103,6 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-}
-
-.emotion-1 {
   -webkit-align-items: normal;
   -webkit-box-align: normal;
   -ms-flex-align: normal;
@@ -552,52 +116,11 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   justify-content: space-between;
 }
 
-.emotion-2>* {
+.emotion-0>* {
   min-height: 0;
 }
 
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-}
-
-.emotion-3>* {
-  min-height: 0;
-}
-
-.emotion-6 {
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  gap: calc(4px * 2);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.emotion-7>* {
-  min-width: 0;
-}
-
-.emotion-8 {
+.emotion-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -616,43 +139,11 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   width: 100%;
 }
 
-.emotion-8>* {
-  min-width: 0;
-}
-
-.emotion-10 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
-  min-width: 0;
-}
-
-.emotion-12 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-13 {
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  min-height: 0;
+.emotion-2>* {
   min-width: 0;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
 }
 
-.emotion-15 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.emotion-19 {
+.emotion-5 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -667,7 +158,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   flex: 1;
 }
 
-.emotion-23 {
+.emotion-7 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -675,533 +166,105 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
   min-width: 0;
 }
 
-<ColorPalette
-  colors={
-    Array [
-      Object {
-        "color": "#f00",
-        "name": "red",
-      },
-      Object {
-        "color": "#fff",
-        "name": "white",
-      },
-      Object {
-        "color": "#00f",
-        "name": "blue",
-      },
-    ]
-  }
-  onChange={[MockFunction]}
-  value="#f00"
->
-  <VStack
-    spacing={3}
+<div>
+  <div
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
   >
-    <View
-      className="emotion-0 emotion-1 emotion-2 components-flex components-h-stack components-v-stack"
-      data-wp-c16t={true}
-      data-wp-component="VStack"
-      isColumn={true}
+    <div
+      class="components-dropdown"
+      tabindex="-1"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+        class="components-flex components-color-palette__custom-color emotion-2 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="Flex"
+        style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+      >
+        <span
+          class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-1 emotion-5 emotion-1"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          red
+        </span>
+        <span
+          class="components-flex-item components-color-palette__custom-color-value emotion-7 emotion-1"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          f00
+        </span>
+      </button>
+    </div>
+    <div
+      class="components-circular-option-picker"
     >
-      <Noop />
       <div
-        className="components-flex components-h-stack components-v-stack emotion-3 emotion-4"
-        data-wp-c16t={true}
-        data-wp-component="VStack"
+        class="components-circular-option-picker__swatches"
       >
-        <CustomColorPickerDropdown
-          isRenderedInSidebar={false}
-          key=".0"
-          renderContent={[Function]}
-          renderToggle={[Function]}
+        <div
+          class="components-circular-option-picker__option-wrapper"
         >
-          <Dropdown
-            contentClassName="components-color-palette__custom-color-dropdown-content"
-            popoverProps={
-              Object {
-                "offset": 8,
-                "placement": "bottom",
-                "shift": true,
-              }
-            }
-            renderContent={[Function]}
-            renderToggle={[Function]}
+          <button
+            aria-label="Color: red"
+            aria-pressed="true"
+            class="components-button components-circular-option-picker__option is-pressed"
+            style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
+            type="button"
+          />
+          <svg
+            aria-hidden="true"
+            fill="#000"
+            focusable="false"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <div
-              className="components-dropdown"
-              tabIndex="-1"
-            >
-              <Flex
-                align="flex-start"
-                aria-expanded={false}
-                aria-haspopup="true"
-                aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                as="button"
-                className="components-color-palette__custom-color"
-                justify="space-between"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "background": "#f00",
-                    "color": "#000",
-                  }
-                }
-              >
-                <View
-                  aria-expanded={false}
-                  aria-haspopup="true"
-                  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                  as="button"
-                  className="emotion-0 emotion-6 emotion-7 components-flex components-color-palette__custom-color"
-                  data-wp-c16t={true}
-                  data-wp-component="Flex"
-                  onClick={[Function]}
-                  style={
-                    Object {
-                      "background": "#f00",
-                      "color": "#000",
-                    }
-                  }
-                >
-                  <Noop />
-                  <button
-                    aria-expanded={false}
-                    aria-haspopup="true"
-                    aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                    className="components-flex components-color-palette__custom-color emotion-8 emotion-4"
-                    data-wp-c16t={true}
-                    data-wp-component="Flex"
-                    onClick={[Function]}
-                    style={
-                      Object {
-                        "background": "#f00",
-                        "color": "#000",
-                      }
-                    }
-                  >
-                    <FlexItem
-                      as={
-                        Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "__contextSystemKey__": Array [
-                            "Truncate",
-                          ],
-                          "render": [Function],
-                          "selector": ".components-truncate",
-                        }
-                      }
-                      className="components-color-palette__custom-color-name"
-                      isBlock={true}
-                    >
-                      <View
-                        as={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "__contextSystemKey__": Array [
-                              "Truncate",
-                            ],
-                            "render": [Function],
-                            "selector": ".components-truncate",
-                          }
-                        }
-                        className="emotion-10 emotion-11 emotion-12 components-flex-item components-color-palette__custom-color-name"
-                        data-wp-c16t={true}
-                        data-wp-component="FlexItem"
-                      >
-                        <Noop />
-                        <Truncate
-                          className="components-flex-item components-color-palette__custom-color-name emotion-13 emotion-4"
-                          data-wp-c16t={true}
-                          data-wp-component="FlexItem"
-                        >
-                          <View
-                            as="span"
-                            className="emotion-15 components-truncate components-flex-item components-color-palette__custom-color-name emotion-13 emotion-4"
-                            data-wp-c16t={true}
-                            data-wp-component="FlexItem"
-                          >
-                            <Noop />
-                            <span
-                              className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-4 emotion-19 emotion-4"
-                              data-wp-c16t={true}
-                              data-wp-component="FlexItem"
-                            >
-                              red
-                            </span>
-                          </View>
-                        </Truncate>
-                      </View>
-                    </FlexItem>
-                    <FlexItem
-                      as="span"
-                      className="components-color-palette__custom-color-value"
-                    >
-                      <View
-                        as="span"
-                        className="emotion-10 emotion-11 components-flex-item components-color-palette__custom-color-value"
-                        data-wp-c16t={true}
-                        data-wp-component="FlexItem"
-                      >
-                        <Noop />
-                        <span
-                          className="components-flex-item components-color-palette__custom-color-value emotion-23 emotion-4"
-                          data-wp-c16t={true}
-                          data-wp-component="FlexItem"
-                        >
-                          f00
-                        </span>
-                      </View>
-                    </FlexItem>
-                  </button>
-                </View>
-              </Flex>
-            </div>
-          </Dropdown>
-        </CustomColorPickerDropdown>
-        <SinglePalette
-          actions={
-            <ButtonAction
-              onClick={[Function]}
-            >
-              Clear
-            </ButtonAction>
-          }
-          clearColor={[Function]}
-          clearable={true}
-          colors={
-            Array [
-              Object {
-                "color": "#f00",
-                "name": "red",
-              },
-              Object {
-                "color": "#fff",
-                "name": "white",
-              },
-              Object {
-                "color": "#00f",
-                "name": "blue",
-              },
-            ]
-          }
-          key=".1"
-          onChange={[MockFunction]}
-          value="#f00"
+            <path
+              d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+            />
+          </svg>
+        </div>
+        <div
+          class="components-circular-option-picker__option-wrapper"
         >
-          <CircularOptionPicker
-            actions={
-              <ButtonAction
-                onClick={[Function]}
-              >
-                Clear
-              </ButtonAction>
-            }
-            options={
-              Array [
-                <Option
-                  aria-label="Color: red"
-                  isSelected={true}
-                  onClick={[Function]}
-                  selectedIconProps={
-                    Object {
-                      "fill": "#000",
-                    }
-                  }
-                  style={
-                    Object {
-                      "backgroundColor": "#f00",
-                      "color": "#f00",
-                    }
-                  }
-                  tooltipText="red"
-                />,
-                <Option
-                  aria-label="Color: white"
-                  isSelected={false}
-                  onClick={[Function]}
-                  selectedIconProps={Object {}}
-                  style={
-                    Object {
-                      "backgroundColor": "#fff",
-                      "color": "#fff",
-                    }
-                  }
-                  tooltipText="white"
-                />,
-                <Option
-                  aria-label="Color: blue"
-                  isSelected={false}
-                  onClick={[Function]}
-                  selectedIconProps={Object {}}
-                  style={
-                    Object {
-                      "backgroundColor": "#00f",
-                      "color": "#00f",
-                    }
-                  }
-                  tooltipText="blue"
-                />,
-              ]
-            }
-          >
-            <div
-              className="components-circular-option-picker"
-            >
-              <div
-                className="components-circular-option-picker__swatches"
-              >
-                <Option
-                  aria-label="Color: red"
-                  isSelected={true}
-                  key="#f00-0"
-                  onClick={[Function]}
-                  selectedIconProps={
-                    Object {
-                      "fill": "#000",
-                    }
-                  }
-                  style={
-                    Object {
-                      "backgroundColor": "#f00",
-                      "color": "#f00",
-                    }
-                  }
-                  tooltipText="red"
-                >
-                  <div
-                    className="components-circular-option-picker__option-wrapper"
-                  >
-                    <Tooltip
-                      text="red"
-                    >
-                      <ForwardRef(Button)
-                        aria-label="Color: red"
-                        className="components-circular-option-picker__option"
-                        isPressed={true}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        style={
-                          Object {
-                            "backgroundColor": "#f00",
-                            "color": "#f00",
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label="Color: red"
-                          aria-pressed={true}
-                          className="components-button components-circular-option-picker__option is-pressed"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          style={
-                            Object {
-                              "backgroundColor": "#f00",
-                              "color": "#f00",
-                            }
-                          }
-                          type="button"
-                        />
-                      </ForwardRef(Button)>
-                    </Tooltip>
-                    <Icon
-                      fill="#000"
-                      icon={
-                        <SVG
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <Path
-                            d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                          />
-                        </SVG>
-                      }
-                    >
-                      <SVG
-                        fill="#000"
-                        height={24}
-                        viewBox="0 0 24 24"
-                        width={24}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          aria-hidden={true}
-                          fill="#000"
-                          focusable={false}
-                          height={24}
-                          viewBox="0 0 24 24"
-                          width={24}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <Path
-                            d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                          >
-                            <path
-                              d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                            />
-                          </Path>
-                        </svg>
-                      </SVG>
-                    </Icon>
-                  </div>
-                </Option>
-                <Option
-                  aria-label="Color: white"
-                  isSelected={false}
-                  key="#fff-1"
-                  onClick={[Function]}
-                  selectedIconProps={Object {}}
-                  style={
-                    Object {
-                      "backgroundColor": "#fff",
-                      "color": "#fff",
-                    }
-                  }
-                  tooltipText="white"
-                >
-                  <div
-                    className="components-circular-option-picker__option-wrapper"
-                  >
-                    <Tooltip
-                      text="white"
-                    >
-                      <ForwardRef(Button)
-                        aria-label="Color: white"
-                        className="components-circular-option-picker__option"
-                        isPressed={false}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        style={
-                          Object {
-                            "backgroundColor": "#fff",
-                            "color": "#fff",
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label="Color: white"
-                          aria-pressed={false}
-                          className="components-button components-circular-option-picker__option"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          style={
-                            Object {
-                              "backgroundColor": "#fff",
-                              "color": "#fff",
-                            }
-                          }
-                          type="button"
-                        />
-                      </ForwardRef(Button)>
-                    </Tooltip>
-                  </div>
-                </Option>
-                <Option
-                  aria-label="Color: blue"
-                  isSelected={false}
-                  key="#00f-2"
-                  onClick={[Function]}
-                  selectedIconProps={Object {}}
-                  style={
-                    Object {
-                      "backgroundColor": "#00f",
-                      "color": "#00f",
-                    }
-                  }
-                  tooltipText="blue"
-                >
-                  <div
-                    className="components-circular-option-picker__option-wrapper"
-                  >
-                    <Tooltip
-                      text="blue"
-                    >
-                      <ForwardRef(Button)
-                        aria-label="Color: blue"
-                        className="components-circular-option-picker__option"
-                        isPressed={false}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseDown={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        style={
-                          Object {
-                            "backgroundColor": "#00f",
-                            "color": "#00f",
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label="Color: blue"
-                          aria-pressed={false}
-                          className="components-button components-circular-option-picker__option"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseDown={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          style={
-                            Object {
-                              "backgroundColor": "#00f",
-                              "color": "#00f",
-                            }
-                          }
-                          type="button"
-                        />
-                      </ForwardRef(Button)>
-                    </Tooltip>
-                  </div>
-                </Option>
-              </div>
-              <div
-                className="components-circular-option-picker__custom-clear-wrapper"
-              >
-                <ButtonAction
-                  onClick={[Function]}
-                >
-                  <ForwardRef(Button)
-                    className="components-circular-option-picker__clear"
-                    onClick={[Function]}
-                    variant="tertiary"
-                  >
-                    <button
-                      aria-describedby={null}
-                      className="components-button components-circular-option-picker__clear is-tertiary"
-                      onClick={[Function]}
-                      type="button"
-                    >
-                      Clear
-                    </button>
-                  </ForwardRef(Button)>
-                </ButtonAction>
-              </div>
-            </div>
-          </CircularOptionPicker>
-        </SinglePalette>
+          <button
+            aria-label="Color: white"
+            aria-pressed="false"
+            class="components-button components-circular-option-picker__option"
+            style="background-color: rgb(255, 255, 255); color: rgb(255, 255, 255);"
+            type="button"
+          />
+        </div>
+        <div
+          class="components-circular-option-picker__option-wrapper"
+        >
+          <button
+            aria-label="Color: blue"
+            aria-pressed="false"
+            class="components-button components-circular-option-picker__option"
+            style="background-color: rgb(0, 0, 255); color: rgb(0, 0, 255);"
+            type="button"
+          />
+        </div>
       </div>
-    </View>
-  </VStack>
-</ColorPalette>
+      <div
+        class="components-circular-option-picker__custom-clear-wrapper"
+      >
+        <button
+          class="components-button components-circular-option-picker__clear is-tertiary"
+          type="button"
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
 `;