@crystallize/design-system 1.24.34 → 1.24.36

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @crystallize/design-system
 
+## 1.24.36
+
+### Patch Changes
+
+- 92b8a39: This PR is migrating most of the get image query to next, but showcases part is left on legacy.
+  Design system is exporting colors to be used in color picker/
+
+## 1.24.35
+
+### Patch Changes
+
+- c231583: Update fixedValue icon
+
 ## 1.24.34
 
 ### Patch Changes

package/dist/{chunk-ZLRCCIEB.mjs → chunk-RGQ4WALV.mjs}

@@ -2398,31 +2398,31 @@ import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
 var FixedValue = forwardRef47((delegated, ref) => {
   return /* @__PURE__ */ jsxs42("svg", {
     ref,
-    width: "23",
+    width: "22",
     height: "22",
-    viewBox: "0 0 23 22",
+    viewBox: "0 0 22 22",
     fill: "none",
     ...delegated,
     children: [
       /* @__PURE__ */ jsx52("path", {
-        d: "M17.764 3.734h-11.2c-.998 0-1.7.984-1.7 2.05v10.5c0 1.067.702 2.05 1.7 2.05h11.2c.998 0 1.7-.983 1.7-2.05v-10.5c0-1.066-.702-2.05-1.7-2.05Z",
-        fill: "#fff"
+        fill,
+        d: "M7.379 7.414c-.413.248-.959.148-1.218-.259"
       }),
-      /* @__PURE__ */ jsx52("path", {
-        d: "m8.745 8.47 1.218-.84 2.24-.392 1.856.29 1.707.88-.868 1.109-2.694-.688-2.413.619-.99-.145-.056-.833ZM8.58 10.549h7.117v1.301H8.58zM8.58 13.372h7.117v1.301H8.58z",
-        fill
+      /* @__PURE__ */ jsx52("mask", {
+        id: "fixed-value-mask",
+        fill: "#fff",
+        children: /* @__PURE__ */ jsx52("path", {
+          d: "M5 15.59c0-.817.663-1.48 1.48-1.48v.615l-.088.005a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.773l.088.004h9.72l.089-.004a.865.865 0 0 0 .772-.773l.004-.088a.865.865 0 0 0-.776-.86l-.088-.005v-.615a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 15.59Zm11.2-1.48v.615H6.48v-.615h9.72ZM5 10.742c0-.817.663-1.48 1.48-1.48v.616l-.088.004a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.772l.088.005h9.72l.089-.005a.865.865 0 0 0 .772-.771l.004-.089a.865.865 0 0 0-.776-.86l-.088-.004v-.616a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 10.742Zm11.2-1.48v.616H6.48v-.616h9.72ZM11.34 4c1.893 0 3.53.409 5.276 1.522l.123.087c.54.43.663 1.175.364 1.762l-.07.123c-.452.708-1.37.864-2.044.465-1.44-.852-2.466-1-3.649-1-1.328 0-2.413.24-3.644.982-.627.377-1.482.277-1.963-.327l-.09-.128c-.407-.638-.268-1.524.414-1.959l.328-.2C8.018 4.36 9.583 4 11.34 4Zm0 .615c-1.767 0-3.306.381-4.953 1.43l-.066.049a.803.803 0 0 0-.16 1.061c.243.381.738.494 1.14.301l.078-.042c1.34-.807 2.537-1.069 3.961-1.069l.237.002c1.176.021 2.269.22 3.725 1.083.387.23.887.15 1.16-.194l.053-.073a.812.812 0 0 0-.162-1.074l-.068-.048c-1.537-.98-2.968-1.376-4.613-1.421l-.332-.005Z"
+        })
       }),
       /* @__PURE__ */ jsx52("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M4.563 5.785c0-1.163.775-2.35 2-2.35h11.2c1.226 0 2 1.187 2 2.35v10.5c0 1.162-.774 2.35-2 2.35h-11.2c-1.225 0-2-1.188-2-2.35v-10.5Zm2-1.75c-.77 0-1.4.78-1.4 1.75v10.5c0 .97.63 1.75 1.4 1.75h11.2c.771 0 1.4-.78 1.4-1.75v-10.5c0-.97-.629-1.75-1.4-1.75h-11.2Z",
-        fill: stroke
+        fill,
+        d: "M5 15.59c0-.817.663-1.48 1.48-1.48v.615l-.088.005a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.773l.088.004h9.72l.089-.004a.865.865 0 0 0 .772-.773l.004-.088a.865.865 0 0 0-.776-.86l-.088-.005v-.615a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 15.59Zm11.2-1.48v.615H6.48v-.615h9.72ZM5 10.742c0-.817.663-1.48 1.48-1.48v.616l-.088.004a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.772l.088.005h9.72l.089-.005a.865.865 0 0 0 .772-.771l.004-.089a.865.865 0 0 0-.776-.86l-.088-.004v-.616a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 10.742Zm11.2-1.48v.616H6.48v-.616h9.72ZM11.34 4c1.893 0 3.53.409 5.276 1.522l.123.087c.54.43.663 1.175.364 1.762l-.07.123c-.452.708-1.37.864-2.044.465-1.44-.852-2.466-1-3.649-1-1.328 0-2.413.24-3.644.982-.627.377-1.482.277-1.963-.327l-.09-.128c-.407-.638-.268-1.524.414-1.959l.328-.2C8.018 4.36 9.583 4 11.34 4Zm0 .615c-1.767 0-3.306.381-4.953 1.43l-.066.049a.803.803 0 0 0-.16 1.061c.243.381.738.494 1.14.301l.078-.042c1.34-.807 2.537-1.069 3.961-1.069l.237.002c1.176.021 2.269.22 3.725 1.083.387.23.887.15 1.16-.194l.053-.073a.812.812 0 0 0-.162-1.074l-.068-.048c-1.537-.98-2.968-1.376-4.613-1.421l-.332-.005Z"
       }),
       /* @__PURE__ */ jsx52("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M8.872 7.837c1.092-.695 2.127-.951 3.291-.951 1.175 0 2.2.255 3.287.948.527.336.63 1.017.32 1.502-.343.538-1.036.65-1.538.353-.82-.486-1.392-.566-2.069-.566-.76 0-1.367.135-2.065.554-.497.3-1.197.2-1.545-.346-.307-.482-.205-1.16.32-1.494Zm.378 2.203h5.826a1.118 1.118 0 1 1 0 2.237H9.25a1.118 1.118 0 1 1 0-2.237Zm0 2.906h5.826a1.118 1.118 0 1 1 0 2.236H9.25a1.118 1.118 0 1 1 0-2.236ZM9.06 9.008a.536.536 0 0 0 .73.155c.803-.483 1.52-.64 2.374-.64.76 0 1.444.098 2.375.65a.536.536 0 0 0 .727-.16.485.485 0 0 0-.138-.673c-.982-.626-1.893-.854-2.964-.854-1.059 0-1.981.228-2.968.857a.48.48 0 0 0-.136.665Zm-.327 2.15c0 .287.232.519.518.519h5.826a.518.518 0 0 0 0-1.037H9.25a.518.518 0 0 0-.518.518Zm0 2.906c0 .286.232.518.518.518h5.826a.518.518 0 0 0 0-1.036H9.25a.518.518 0 0 0-.518.518Z",
-        fill: stroke
+        fill: stroke,
+        d: "M5 15.59H4h1Zm1.48-1.48v-1 1Zm-.088.62-.051-.999-.025.001-.025.003.1.995Zm-.777.86h-1v.026l.002.025.998-.05Zm.005.088-.999.051.001.025.003.025.995-.1Zm.772.773-.101.994.025.003.025.001.05-.998Zm.088.004-.05.999.024.001h.026v-1Zm9.72 0v1h.026l.026-.001-.051-.999Zm.089-.004.05.998.026-.001.025-.003-.101-.994Zm.772-.773.995.101.002-.025.002-.025-1-.05Zm.004-.088.999.051.001-.025v-.026h-1Zm-.776-.86.1-.995-.024-.003-.025-.001-.051.999Zm-.088-.62v-1 1Zm1.48 1.48h1-1Zm-1.48 1.48v1-1Zm-9.721 0v1-1ZM5 10.742H4h1Zm1.48-1.48v-1 1Zm-.088.62-.051-.998h-.025l-.025.003.1.995Zm-.777.86h-1v.026l.002.025.998-.05Zm.005.088-.999.051.001.025.003.025.995-.1Zm.772.772-.101.995.025.003.025.001.05-.999Zm.088.005-.05.999h.05v-1Zm9.72 0v1h.026l.026-.001-.051-1Zm.089-.005.05 1 .026-.002.025-.003-.101-.995Zm.772-.771.995.1.002-.025.002-.025-1-.05Zm.004-.089.999.051.001-.025v-.026h-1Zm-.776-.86.1-.995-.024-.002-.025-.002-.051 1Zm-.088-.62v-1 1Zm1.48 1.48h1-1Zm-1.48 1.48v1-1Zm-9.721 0v1-1ZM11.34 4V3v1Zm5.276 1.522.58-.815-.02-.015-.022-.013-.538.843Zm.123.087.622-.783-.021-.016-.022-.016-.58.815Zm.364 1.762.869.496.012-.021.01-.022-.89-.453Zm-.07.123.843.538.014-.021.012-.021-.869-.496Zm-2.044.465.509-.86-.51.86Zm-3.649-1v-1 1Zm-3.644.982.516.857-.516-.857Zm-1.963-.327-.815.58.016.021.017.022.782-.623Zm-.09-.128-.844.538.014.02.014.021.815-.579Zm.414-1.959-.523-.852-.007.004-.007.005.537.843Zm.328-.2-.51-.862-.007.005-.007.004.524.852Zm4.955-.712.014-1h-.014v1Zm-4.953 1.43-.537-.842-.022.014-.022.015.581.814Zm-.066.049-.582-.814-.02.015-.021.016.623.783Zm-.16 1.061-.843.538.843-.538Zm1.14.301.432.902.022-.01.022-.013-.477-.879Zm.078-.042.477.878.02-.01.018-.012-.515-.856Zm3.961-1.069.008-1h-.008v1Zm.237.002.018-1h-.011l-.007 1Zm3.725 1.083-.51.86.51-.86Zm1.16-.194.784.622.016-.02.015-.022-.814-.58Zm.053-.073.814.58.015-.02.014-.022-.843-.538Zm-.162-1.074.623-.782-.02-.016-.02-.015-.583.813Zm-.068-.048.583-.813-.022-.016-.023-.014-.538.843ZM11.672 4.62l.028-1h-.014l-.014 1ZM5 15.59h1a.48.48 0 0 1 .48-.48v-2A2.48 2.48 0 0 0 4 15.59h1Zm1.48-1.48h-1v.615h2v-.615h-1Zm0 .615-.05-.998-.09.004.052.999.05.998.089-.004-.051-.999Zm-.088.005-.101-.995a1.865 1.865 0 0 0-1.676 1.855h2c0 .07-.053.127-.122.135l-.101-.995Zm-.777.86-.998.051.004.088.999-.05.999-.051-.005-.088-.999.05Zm.005.088-.995.101c.09.88.786 1.577 1.666 1.666l.1-.994.102-.995a.135.135 0 0 1 .122.122l-.995.1Zm.772.773-.051.998.088.005.05-.999.052-.999-.088-.004-.051.999Zm.088.004v1h9.72v-2H6.48v1Zm9.72 0 .052.999.088-.005-.051-.998-.051-1-.088.005.05.999Zm.089-.004.1.994a1.865 1.865 0 0 0 1.667-1.666l-.995-.1-.995-.101a.135.135 0 0 1 .122-.122l.1.995Zm.772-.773.998.051.005-.088-.999-.05-.998-.051-.005.088.999.05Zm.004-.088h1c0-.965-.733-1.76-1.675-1.855l-.101.995-.101.995a.135.135 0 0 1-.123-.135h1Zm-.776-.86.05-.999-.087-.005-.051 1-.051.998.088.004.05-.998Zm-.088-.005h1v-.615h-2v.615h1Zm0-.615v1a.48.48 0 0 1 .48.48h2a2.48 2.48 0 0 0-2.48-2.48v1Zm1.48 1.48h-1a.48.48 0 0 1-.48.48v2a2.48 2.48 0 0 0 2.48-2.48h-1Zm-1.48 1.48v-1H6.48v2h9.72v-1Zm-9.721 0v-1a.48.48 0 0 1-.48-.48H4a2.48 2.48 0 0 0 2.48 2.48v-1Zm9.72-2.96h-1v.615h2v-.615h-1Zm0 .615v-1H6.48v2h9.72v-1Zm-9.72 0h1v-.615h-2v.615h1Zm0-.615v1h9.72v-2H6.48v1ZM5 10.742h1a.48.48 0 0 1 .48-.48v-2A2.48 2.48 0 0 0 4 10.742h1Zm1.48-1.48h-1v.616h2v-.616h-1Zm0 .616-.05-.999-.09.005.052.998.05.999.089-.005-.051-.998Zm-.088.004-.101-.995a1.865 1.865 0 0 0-1.676 1.855h2a.135.135 0 0 1-.122.135l-.101-.995Zm-.777.86-.998.051.004.088.999-.05.999-.051-.005-.089-.999.051Zm.005.088-.995.101c.089.88.787 1.577 1.666 1.666l.1-.995.102-.994a.135.135 0 0 1 .122.122l-.995.1Zm.772.772-.051 1 .088.004.05-1 .052-.998-.088-.004-.051.998Zm.088.005v1h9.72v-2H6.48v1Zm9.72 0 .052.999.088-.005-.051-.999-.051-.998-.088.004.05.999Zm.089-.005.1.995a1.865 1.865 0 0 0 1.667-1.666l-.995-.1-.995-.101a.135.135 0 0 1 .122-.122l.1.994Zm.772-.771.998.05.005-.088-.999-.05-.998-.052-.005.089.999.05Zm.004-.089h1c0-.966-.734-1.76-1.675-1.855l-.101.995-.101.995a.135.135 0 0 1-.123-.135h1Zm-.776-.86.05-.998-.087-.005-.051.999-.051.998.088.005.05-.999Zm-.088-.004h1v-.616h-2v.616h1Zm0-.616v1a.48.48 0 0 1 .48.48h2a2.48 2.48 0 0 0-2.48-2.48v1Zm1.48 1.48h-1a.48.48 0 0 1-.48.48v2a2.48 2.48 0 0 0 2.48-2.48h-1Zm-1.48 1.48v-1H6.48v2h9.72v-1Zm-9.721 0v-1a.48.48 0 0 1-.48-.48H4a2.48 2.48 0 0 0 2.48 2.48v-1Zm9.72-2.96h-1v.616h2v-.616h-1Zm0 .616v-1H6.48v2h9.72v-1Zm-9.72 0h1v-.616h-2v.616h1Zm0-.616v1h9.72v-2H6.48v1ZM11.34 4v1c1.719 0 3.166.363 4.739 1.365l.537-.843.538-.843C15.234 3.455 13.408 3 11.34 3v1Zm5.276 1.522-.58.815.123.087.58-.815.579-.815-.122-.087-.58.815Zm.123.087-.623.783c.14.11.197.328.096.526l.892.453.89.453c.497-.976.31-2.248-.633-2.998l-.622.783Zm.364 1.762-.868-.496-.07.123.868.496.869.496.07-.123-.869-.496Zm-.07.123-.843-.538a.51.51 0 0 1-.692.142l-.51.86-.509.861c1.093.647 2.628.419 3.397-.787l-.843-.538Zm-2.044.465.509-.86c-1.624-.962-2.835-1.14-4.158-1.14v2c1.043 0 1.885.118 3.14.86l.509-.86Zm-3.649-1v-1c-1.484 0-2.752.278-4.16 1.125l.516.857.516.857c1.055-.635 1.955-.838 3.128-.838v-1Zm-3.644.982-.516-.857c-.24.145-.527.08-.664-.093l-.783.623-.782.623c.824 1.035 2.247 1.17 3.26.56l-.515-.856Zm-1.963-.327.815-.58-.09-.127-.816.579-.815.58.091.127.815-.579Zm-.09-.128.842-.538a.415.415 0 0 1 .11-.578l-.538-.843-.537-.843c-1.188.756-1.398 2.277-.72 3.34l.842-.538Zm.414-1.959.523.852.328-.2-.523-.853-.524-.852-.327.201.523.852Zm.328-.2.508.86C8.357 5.322 9.743 5 11.34 5V3c-1.916 0-3.66.399-5.464 1.465l.509.861Zm4.955-.712v-1c-1.941 0-3.67.427-5.49 1.588l.537.843.538.843c1.473-.938 2.822-1.274 4.415-1.274v-1Zm-4.953 1.43-.58-.813-.068.048.582.814.58.813.068-.047-.582-.814Zm-.066.049-.623-.783c-.743.591-.86 1.628-.38 2.382l.843-.538.843-.538c.034.054.048.172-.06.259l-.623-.782Zm-.16 1.061-.843.538c.544.852 1.607 1.052 2.415.665L7.3 7.456l-.432-.901a.07.07 0 0 1 .048-.004.155.155 0 0 1 .088.066l-.843.538Zm1.14.301.476.88.079-.044-.477-.878-.477-.88-.079.043.477.88Zm.078-.042.515.856c1.164-.7 2.177-.925 3.446-.925v-2c-1.58 0-2.96.299-4.477 1.212l.516.857Zm3.961-1.069-.007 1 .237.002.007-1 .007-1-.236-.002-.008 1Zm.237.002-.019 1c1.027.018 1.946.18 3.234.943l.51-.86.51-.86c-1.624-.962-2.89-1.199-4.217-1.223l-.018 1Zm3.725 1.083-.51.86c.789.467 1.848.33 2.454-.432l-.783-.622-.783-.623a.139.139 0 0 1 .082-.052c.02-.003.037 0 .05.008l-.51.86Zm1.16-.194.815.58.052-.072-.814-.58-.815-.581-.051.072.814.58Zm.053-.073.843.538c.484-.759.364-1.8-.382-2.394l-.623.782-.623.783c-.104-.084-.09-.197-.059-.247l.844.538Zm-.162-1.074.582-.813-.067-.048-.582.813-.583.813.067.048.583-.813Zm-.068-.048.538-.843C15.127 4.116 13.517 3.67 11.7 3.62l-.028 1-.028 1c1.472.04 2.726.386 4.104 1.264l.537-.843ZM11.672 4.62l.014-1-.332-.005-.014 1-.013 1 .332.005.013-1Z",
+        mask: "url(#fixed-value-mask)"
       })
     ]
   });

package/dist/index.css

@@ -423,9 +423,59 @@
   --c-color-elevate: var(--c-color-purple-50-900);
   --c-color-overlay: 0 0 0 ;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+.ml-4 {
+  margin-left: 1rem;
+}
 .block {
   display: block;
 }
+.h-5 {
+  height: 1.25rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.border {
+  border-width: 1px;
+}
+.border-solid {
+  border-style: solid;
+}
+.p-0 {
+  padding: 0px;
+}
+.p-0\.5 {
+  padding: 0.125rem;
+}
+.p-5 {
+  padding: 1.25rem;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.font-bold {
+  font-weight: 700;
+}
+.capitalize {
+  text-transform: capitalize;
+}
+.text-gray-500-400 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-500-400) / var(--tw-text-opacity));
+}
 
 /* src/button/button.css */
 .c-btn {
@@ -1619,6 +1669,9 @@
   background-color: rgb(var(--c-color-gray-100-800) / var(--tw-bg-opacity));
   opacity: 0.4;
 }
+.c-radio-item:not(:disabled) {
+  cursor: pointer;
+}
 .c-radio-item[aria-checked=true] {
   --tw-border-opacity: 1;
   border-color: rgb(var(--c-color-cyan-700-200) / var(--tw-border-opacity));

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ComponentPropsWithRef, ComponentProps, RefAttributes, ComponentPropsWithoutRef, LabelHTMLAttributes } from 'react';
+import react__default, { HTMLAttributes, ReactNode, ComponentPropsWithRef, ComponentProps, RefAttributes, ComponentPropsWithoutRef, LabelHTMLAttributes, SetStateAction } from 'react';
 import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
 import { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
@@ -482,6 +482,15 @@ type CustomSwitchProps = SwitchStylesProps & Omit<SwitchProps, 'checked'> & {
 };
 declare function Switch({ size, checked, ...props }: CustomSwitchProps): JSX.Element;
 
+type ColorPickerProps = {
+    value?: string;
+    setValue: (value: string) => void;
+    children: react__default.ReactNode;
+    isOpen: boolean;
+    setIsOpen: react__default.Dispatch<SetStateAction<boolean>>;
+};
+declare function ColorPicker({ value, setValue, children, isOpen, setIsOpen }: ColorPickerProps): JSX.Element;
+
 declare const Icon: {
     Add: react.ForwardRefExoticComponent<Pick<react.SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "height" | "stroke" | "strokeLinecap" | "name" | "type" | "to" | "href" | "target" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "end" | "orientation" | "max" | "media" | "method" | "min" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "strokeDasharray" | "strokeDashoffset" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & react.RefAttributes<SVGSVGElement>>;
     Archive: react.ForwardRefExoticComponent<Pick<react.SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "width" | "height" | "stroke" | "strokeLinecap" | "name" | "type" | "to" | "href" | "target" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "end" | "orientation" | "max" | "media" | "method" | "min" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "strokeDasharray" | "strokeDashoffset" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & react.RefAttributes<SVGSVGElement>>;
@@ -641,4 +650,4 @@ declare const tokens: {
     card: string;
 };
 
-export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Popover, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };
+export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, ColorPicker, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Popover, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };

package/dist/index.js

@@ -2803,31 +2803,31 @@ var init_fixed_value = __esm({
     FixedValue = (0, import_react49.forwardRef)((delegated, ref) => {
       return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("svg", {
         ref,
-        width: "23",
+        width: "22",
         height: "22",
-        viewBox: "0 0 23 22",
+        viewBox: "0 0 22 22",
         fill: "none",
         ...delegated,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", {
-            d: "M17.764 3.734h-11.2c-.998 0-1.7.984-1.7 2.05v10.5c0 1.067.702 2.05 1.7 2.05h11.2c.998 0 1.7-.983 1.7-2.05v-10.5c0-1.066-.702-2.05-1.7-2.05Z",
-            fill: "#fff"
+            fill,
+            d: "M7.379 7.414c-.413.248-.959.148-1.218-.259"
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", {
-            d: "m8.745 8.47 1.218-.84 2.24-.392 1.856.29 1.707.88-.868 1.109-2.694-.688-2.413.619-.99-.145-.056-.833ZM8.58 10.549h7.117v1.301H8.58zM8.58 13.372h7.117v1.301H8.58z",
-            fill
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("mask", {
+            id: "fixed-value-mask",
+            fill: "#fff",
+            children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", {
+              d: "M5 15.59c0-.817.663-1.48 1.48-1.48v.615l-.088.005a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.773l.088.004h9.72l.089-.004a.865.865 0 0 0 .772-.773l.004-.088a.865.865 0 0 0-.776-.86l-.088-.005v-.615a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 15.59Zm11.2-1.48v.615H6.48v-.615h9.72ZM5 10.742c0-.817.663-1.48 1.48-1.48v.616l-.088.004a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.772l.088.005h9.72l.089-.005a.865.865 0 0 0 .772-.771l.004-.089a.865.865 0 0 0-.776-.86l-.088-.004v-.616a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 10.742Zm11.2-1.48v.616H6.48v-.616h9.72ZM11.34 4c1.893 0 3.53.409 5.276 1.522l.123.087c.54.43.663 1.175.364 1.762l-.07.123c-.452.708-1.37.864-2.044.465-1.44-.852-2.466-1-3.649-1-1.328 0-2.413.24-3.644.982-.627.377-1.482.277-1.963-.327l-.09-.128c-.407-.638-.268-1.524.414-1.959l.328-.2C8.018 4.36 9.583 4 11.34 4Zm0 .615c-1.767 0-3.306.381-4.953 1.43l-.066.049a.803.803 0 0 0-.16 1.061c.243.381.738.494 1.14.301l.078-.042c1.34-.807 2.537-1.069 3.961-1.069l.237.002c1.176.021 2.269.22 3.725 1.083.387.23.887.15 1.16-.194l.053-.073a.812.812 0 0 0-.162-1.074l-.068-.048c-1.537-.98-2.968-1.376-4.613-1.421l-.332-.005Z"
+            })
           }),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M4.563 5.785c0-1.163.775-2.35 2-2.35h11.2c1.226 0 2 1.187 2 2.35v10.5c0 1.162-.774 2.35-2 2.35h-11.2c-1.225 0-2-1.188-2-2.35v-10.5Zm2-1.75c-.77 0-1.4.78-1.4 1.75v10.5c0 .97.63 1.75 1.4 1.75h11.2c.771 0 1.4-.78 1.4-1.75v-10.5c0-.97-.629-1.75-1.4-1.75h-11.2Z",
-            fill: stroke
+            fill,
+            d: "M5 15.59c0-.817.663-1.48 1.48-1.48v.615l-.088.005a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.773l.088.004h9.72l.089-.004a.865.865 0 0 0 .772-.773l.004-.088a.865.865 0 0 0-.776-.86l-.088-.005v-.615a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 15.59Zm11.2-1.48v.615H6.48v-.615h9.72ZM5 10.742c0-.817.663-1.48 1.48-1.48v.616l-.088.004a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.772l.088.005h9.72l.089-.005a.865.865 0 0 0 .772-.771l.004-.089a.865.865 0 0 0-.776-.86l-.088-.004v-.616a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 10.742Zm11.2-1.48v.616H6.48v-.616h9.72ZM11.34 4c1.893 0 3.53.409 5.276 1.522l.123.087c.54.43.663 1.175.364 1.762l-.07.123c-.452.708-1.37.864-2.044.465-1.44-.852-2.466-1-3.649-1-1.328 0-2.413.24-3.644.982-.627.377-1.482.277-1.963-.327l-.09-.128c-.407-.638-.268-1.524.414-1.959l.328-.2C8.018 4.36 9.583 4 11.34 4Zm0 .615c-1.767 0-3.306.381-4.953 1.43l-.066.049a.803.803 0 0 0-.16 1.061c.243.381.738.494 1.14.301l.078-.042c1.34-.807 2.537-1.069 3.961-1.069l.237.002c1.176.021 2.269.22 3.725 1.083.387.23.887.15 1.16-.194l.053-.073a.812.812 0 0 0-.162-1.074l-.068-.048c-1.537-.98-2.968-1.376-4.613-1.421l-.332-.005Z"
           }),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M8.872 7.837c1.092-.695 2.127-.951 3.291-.951 1.175 0 2.2.255 3.287.948.527.336.63 1.017.32 1.502-.343.538-1.036.65-1.538.353-.82-.486-1.392-.566-2.069-.566-.76 0-1.367.135-2.065.554-.497.3-1.197.2-1.545-.346-.307-.482-.205-1.16.32-1.494Zm.378 2.203h5.826a1.118 1.118 0 1 1 0 2.237H9.25a1.118 1.118 0 1 1 0-2.237Zm0 2.906h5.826a1.118 1.118 0 1 1 0 2.236H9.25a1.118 1.118 0 1 1 0-2.236ZM9.06 9.008a.536.536 0 0 0 .73.155c.803-.483 1.52-.64 2.374-.64.76 0 1.444.098 2.375.65a.536.536 0 0 0 .727-.16.485.485 0 0 0-.138-.673c-.982-.626-1.893-.854-2.964-.854-1.059 0-1.981.228-2.968.857a.48.48 0 0 0-.136.665Zm-.327 2.15c0 .287.232.519.518.519h5.826a.518.518 0 0 0 0-1.037H9.25a.518.518 0 0 0-.518.518Zm0 2.906c0 .286.232.518.518.518h5.826a.518.518 0 0 0 0-1.036H9.25a.518.518 0 0 0-.518.518Z",
-            fill: stroke
+            fill: stroke,
+            d: "M5 15.59H4h1Zm1.48-1.48v-1 1Zm-.088.62-.051-.999-.025.001-.025.003.1.995Zm-.777.86h-1v.026l.002.025.998-.05Zm.005.088-.999.051.001.025.003.025.995-.1Zm.772.773-.101.994.025.003.025.001.05-.998Zm.088.004-.05.999.024.001h.026v-1Zm9.72 0v1h.026l.026-.001-.051-.999Zm.089-.004.05.998.026-.001.025-.003-.101-.994Zm.772-.773.995.101.002-.025.002-.025-1-.05Zm.004-.088.999.051.001-.025v-.026h-1Zm-.776-.86.1-.995-.024-.003-.025-.001-.051.999Zm-.088-.62v-1 1Zm1.48 1.48h1-1Zm-1.48 1.48v1-1Zm-9.721 0v1-1ZM5 10.742H4h1Zm1.48-1.48v-1 1Zm-.088.62-.051-.998h-.025l-.025.003.1.995Zm-.777.86h-1v.026l.002.025.998-.05Zm.005.088-.999.051.001.025.003.025.995-.1Zm.772.772-.101.995.025.003.025.001.05-.999Zm.088.005-.05.999h.05v-1Zm9.72 0v1h.026l.026-.001-.051-1Zm.089-.005.05 1 .026-.002.025-.003-.101-.995Zm.772-.771.995.1.002-.025.002-.025-1-.05Zm.004-.089.999.051.001-.025v-.026h-1Zm-.776-.86.1-.995-.024-.002-.025-.002-.051 1Zm-.088-.62v-1 1Zm1.48 1.48h1-1Zm-1.48 1.48v1-1Zm-9.721 0v1-1ZM11.34 4V3v1Zm5.276 1.522.58-.815-.02-.015-.022-.013-.538.843Zm.123.087.622-.783-.021-.016-.022-.016-.58.815Zm.364 1.762.869.496.012-.021.01-.022-.89-.453Zm-.07.123.843.538.014-.021.012-.021-.869-.496Zm-2.044.465.509-.86-.51.86Zm-3.649-1v-1 1Zm-3.644.982.516.857-.516-.857Zm-1.963-.327-.815.58.016.021.017.022.782-.623Zm-.09-.128-.844.538.014.02.014.021.815-.579Zm.414-1.959-.523-.852-.007.004-.007.005.537.843Zm.328-.2-.51-.862-.007.005-.007.004.524.852Zm4.955-.712.014-1h-.014v1Zm-4.953 1.43-.537-.842-.022.014-.022.015.581.814Zm-.066.049-.582-.814-.02.015-.021.016.623.783Zm-.16 1.061-.843.538.843-.538Zm1.14.301.432.902.022-.01.022-.013-.477-.879Zm.078-.042.477.878.02-.01.018-.012-.515-.856Zm3.961-1.069.008-1h-.008v1Zm.237.002.018-1h-.011l-.007 1Zm3.725 1.083-.51.86.51-.86Zm1.16-.194.784.622.016-.02.015-.022-.814-.58Zm.053-.073.814.58.015-.02.014-.022-.843-.538Zm-.162-1.074.623-.782-.02-.016-.02-.015-.583.813Zm-.068-.048.583-.813-.022-.016-.023-.014-.538.843ZM11.672 4.62l.028-1h-.014l-.014 1ZM5 15.59h1a.48.48 0 0 1 .48-.48v-2A2.48 2.48 0 0 0 4 15.59h1Zm1.48-1.48h-1v.615h2v-.615h-1Zm0 .615-.05-.998-.09.004.052.999.05.998.089-.004-.051-.999Zm-.088.005-.101-.995a1.865 1.865 0 0 0-1.676 1.855h2c0 .07-.053.127-.122.135l-.101-.995Zm-.777.86-.998.051.004.088.999-.05.999-.051-.005-.088-.999.05Zm.005.088-.995.101c.09.88.786 1.577 1.666 1.666l.1-.994.102-.995a.135.135 0 0 1 .122.122l-.995.1Zm.772.773-.051.998.088.005.05-.999.052-.999-.088-.004-.051.999Zm.088.004v1h9.72v-2H6.48v1Zm9.72 0 .052.999.088-.005-.051-.998-.051-1-.088.005.05.999Zm.089-.004.1.994a1.865 1.865 0 0 0 1.667-1.666l-.995-.1-.995-.101a.135.135 0 0 1 .122-.122l.1.995Zm.772-.773.998.051.005-.088-.999-.05-.998-.051-.005.088.999.05Zm.004-.088h1c0-.965-.733-1.76-1.675-1.855l-.101.995-.101.995a.135.135 0 0 1-.123-.135h1Zm-.776-.86.05-.999-.087-.005-.051 1-.051.998.088.004.05-.998Zm-.088-.005h1v-.615h-2v.615h1Zm0-.615v1a.48.48 0 0 1 .48.48h2a2.48 2.48 0 0 0-2.48-2.48v1Zm1.48 1.48h-1a.48.48 0 0 1-.48.48v2a2.48 2.48 0 0 0 2.48-2.48h-1Zm-1.48 1.48v-1H6.48v2h9.72v-1Zm-9.721 0v-1a.48.48 0 0 1-.48-.48H4a2.48 2.48 0 0 0 2.48 2.48v-1Zm9.72-2.96h-1v.615h2v-.615h-1Zm0 .615v-1H6.48v2h9.72v-1Zm-9.72 0h1v-.615h-2v.615h1Zm0-.615v1h9.72v-2H6.48v1ZM5 10.742h1a.48.48 0 0 1 .48-.48v-2A2.48 2.48 0 0 0 4 10.742h1Zm1.48-1.48h-1v.616h2v-.616h-1Zm0 .616-.05-.999-.09.005.052.998.05.999.089-.005-.051-.998Zm-.088.004-.101-.995a1.865 1.865 0 0 0-1.676 1.855h2a.135.135 0 0 1-.122.135l-.101-.995Zm-.777.86-.998.051.004.088.999-.05.999-.051-.005-.089-.999.051Zm.005.088-.995.101c.089.88.787 1.577 1.666 1.666l.1-.995.102-.994a.135.135 0 0 1 .122.122l-.995.1Zm.772.772-.051 1 .088.004.05-1 .052-.998-.088-.004-.051.998Zm.088.005v1h9.72v-2H6.48v1Zm9.72 0 .052.999.088-.005-.051-.999-.051-.998-.088.004.05.999Zm.089-.005.1.995a1.865 1.865 0 0 0 1.667-1.666l-.995-.1-.995-.101a.135.135 0 0 1 .122-.122l.1.994Zm.772-.771.998.05.005-.088-.999-.05-.998-.052-.005.089.999.05Zm.004-.089h1c0-.966-.734-1.76-1.675-1.855l-.101.995-.101.995a.135.135 0 0 1-.123-.135h1Zm-.776-.86.05-.998-.087-.005-.051.999-.051.998.088.005.05-.999Zm-.088-.004h1v-.616h-2v.616h1Zm0-.616v1a.48.48 0 0 1 .48.48h2a2.48 2.48 0 0 0-2.48-2.48v1Zm1.48 1.48h-1a.48.48 0 0 1-.48.48v2a2.48 2.48 0 0 0 2.48-2.48h-1Zm-1.48 1.48v-1H6.48v2h9.72v-1Zm-9.721 0v-1a.48.48 0 0 1-.48-.48H4a2.48 2.48 0 0 0 2.48 2.48v-1Zm9.72-2.96h-1v.616h2v-.616h-1Zm0 .616v-1H6.48v2h9.72v-1Zm-9.72 0h1v-.616h-2v.616h1Zm0-.616v1h9.72v-2H6.48v1ZM11.34 4v1c1.719 0 3.166.363 4.739 1.365l.537-.843.538-.843C15.234 3.455 13.408 3 11.34 3v1Zm5.276 1.522-.58.815.123.087.58-.815.579-.815-.122-.087-.58.815Zm.123.087-.623.783c.14.11.197.328.096.526l.892.453.89.453c.497-.976.31-2.248-.633-2.998l-.622.783Zm.364 1.762-.868-.496-.07.123.868.496.869.496.07-.123-.869-.496Zm-.07.123-.843-.538a.51.51 0 0 1-.692.142l-.51.86-.509.861c1.093.647 2.628.419 3.397-.787l-.843-.538Zm-2.044.465.509-.86c-1.624-.962-2.835-1.14-4.158-1.14v2c1.043 0 1.885.118 3.14.86l.509-.86Zm-3.649-1v-1c-1.484 0-2.752.278-4.16 1.125l.516.857.516.857c1.055-.635 1.955-.838 3.128-.838v-1Zm-3.644.982-.516-.857c-.24.145-.527.08-.664-.093l-.783.623-.782.623c.824 1.035 2.247 1.17 3.26.56l-.515-.856Zm-1.963-.327.815-.58-.09-.127-.816.579-.815.58.091.127.815-.579Zm-.09-.128.842-.538a.415.415 0 0 1 .11-.578l-.538-.843-.537-.843c-1.188.756-1.398 2.277-.72 3.34l.842-.538Zm.414-1.959.523.852.328-.2-.523-.853-.524-.852-.327.201.523.852Zm.328-.2.508.86C8.357 5.322 9.743 5 11.34 5V3c-1.916 0-3.66.399-5.464 1.465l.509.861Zm4.955-.712v-1c-1.941 0-3.67.427-5.49 1.588l.537.843.538.843c1.473-.938 2.822-1.274 4.415-1.274v-1Zm-4.953 1.43-.58-.813-.068.048.582.814.58.813.068-.047-.582-.814Zm-.066.049-.623-.783c-.743.591-.86 1.628-.38 2.382l.843-.538.843-.538c.034.054.048.172-.06.259l-.623-.782Zm-.16 1.061-.843.538c.544.852 1.607 1.052 2.415.665L7.3 7.456l-.432-.901a.07.07 0 0 1 .048-.004.155.155 0 0 1 .088.066l-.843.538Zm1.14.301.476.88.079-.044-.477-.878-.477-.88-.079.043.477.88Zm.078-.042.515.856c1.164-.7 2.177-.925 3.446-.925v-2c-1.58 0-2.96.299-4.477 1.212l.516.857Zm3.961-1.069-.007 1 .237.002.007-1 .007-1-.236-.002-.008 1Zm.237.002-.019 1c1.027.018 1.946.18 3.234.943l.51-.86.51-.86c-1.624-.962-2.89-1.199-4.217-1.223l-.018 1Zm3.725 1.083-.51.86c.789.467 1.848.33 2.454-.432l-.783-.622-.783-.623a.139.139 0 0 1 .082-.052c.02-.003.037 0 .05.008l-.51.86Zm1.16-.194.815.58.052-.072-.814-.58-.815-.581-.051.072.814.58Zm.053-.073.843.538c.484-.759.364-1.8-.382-2.394l-.623.782-.623.783c-.104-.084-.09-.197-.059-.247l.844.538Zm-.162-1.074.582-.813-.067-.048-.582.813-.583.813.067.048.583-.813Zm-.068-.048.538-.843C15.127 4.116 13.517 3.67 11.7 3.62l-.028 1-.028 1c1.472.04 2.726.386 4.104 1.264l.537-.843ZM11.672 4.62l.014-1-.332-.005-.014 1-.013 1 .332.005.013-1Z",
+            mask: "url(#fixed-value-mask)"
           })
         ]
       });
@@ -40901,6 +40901,7 @@ __export(src_exports, {
   Checkbox: () => Checkbox,
   Collapsible: () => Collapsible,
   CollapsibleTrigger: () => CollapsibleTrigger,
+  ColorPicker: () => ColorPicker,
   Dialog: () => Dialog,
   DropdownMenu: () => DropdownMenu,
   Icon: () => Icon,
@@ -41543,6 +41544,254 @@ function Switch2({ size, checked, ...props }) {
   });
 }
 
+// src/color-picker/color-picker.tsx
+var import_react153 = require("react");
+
+// src/colors/colors.json
+var colors_default = {
+  cyan: {
+    "50": "#eefdfc",
+    "100": "#bff6f8",
+    "200": "#acf1f5",
+    "300": "#73e5ed",
+    "400": "#33d0dd",
+    "500": "#17b3c3",
+    "600": "#1690a4",
+    "700": "#197385",
+    "800": "#1d5e6d",
+    "900": "#1c4e5d"
+  },
+  pink: {
+    "50": "#fef1f9",
+    "100": "#fee5f4",
+    "200": "#ffccec",
+    "300": "#ffa1db",
+    "400": "#ff66c0",
+    "500": "#fb39a4",
+    "600": "#eb1782",
+    "700": "#cd0966",
+    "800": "#a90b54",
+    "900": "#8d0e49"
+  },
+  gray: {
+    "50": "#f5f5f6",
+    "100": "#e4e5e9",
+    "200": "#cccfd5",
+    "300": "#a9aeb7",
+    "400": "#7e8592",
+    "500": "#626778",
+    "600": "#545866",
+    "700": "#4c4f5a",
+    "800": "#40424a",
+    "900": "#393a40"
+  },
+  purple: {
+    "50": "#f7f6f9",
+    "100": "#eeecf2",
+    "200": "#d8d5e2",
+    "300": "#b6b0c9",
+    "400": "#8e85ab",
+    "500": "#706691",
+    "600": "#5b5178",
+    "700": "#4b4262",
+    "800": "#403953",
+    "900": "#393347"
+  },
+  green: {
+    "50": "#f3f8f8",
+    "100": "#dfebee",
+    "200": "#c3dade",
+    "300": "#9abfc6",
+    "400": "#699ca7",
+    "500": "#528693",
+    "600": "#436a77",
+    "700": "#3b5863",
+    "800": "#374b53",
+    "900": "#314148"
+  },
+  orange: {
+    "50": "#fff9eb",
+    "100": "#ffedc6",
+    "200": "#ffde99",
+    "300": "#ffbf4a",
+    "400": "#ffa520",
+    "500": "#f98107",
+    "600": "#dd5c02",
+    "700": "#b73d06",
+    "800": "#942e0c",
+    "900": "#7a270d"
+  },
+  "s-red": {
+    "50": "#fef2f2",
+    "100": "#ffe1e1",
+    "200": "#ffc8c8",
+    "300": "#ffadad",
+    "400": "#fd6c6c",
+    "500": "#f53e3e",
+    "600": "#e22020",
+    "700": "#be1717",
+    "800": "#9d1717",
+    "900": "#821a1a"
+  },
+  "s-orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#ffd6a5",
+    "300": "#ffbb72",
+    "400": "#fd943a",
+    "500": "#fc7513",
+    "600": "#ed5909",
+    "700": "#c4420a",
+    "800": "#9c3410",
+    "900": "#7d2d11"
+  },
+  "s-yellow": {
+    "50": "#fefee8",
+    "100": "#fdffb6",
+    "200": "#fffe88",
+    "300": "#fff744",
+    "400": "#fee911",
+    "500": "#eecf04",
+    "600": "#cda201",
+    "700": "#a47404",
+    "800": "#875b0c",
+    "900": "#734a10"
+  },
+  "s-green": {
+    "50": "#f2ffee",
+    "100": "#deffd8",
+    "200": "#caffbf",
+    "300": "#8dfd78",
+    "400": "#53f236",
+    "500": "#2cdb0c",
+    "600": "#1eb603",
+    "700": "#1b8e07",
+    "800": "#1a700b",
+    "900": "#165b0c"
+  },
+  "s-blue": {
+    "50": "#eff5ff",
+    "100": "#dae7ff",
+    "200": "#bed5ff",
+    "300": "#a0c4ff",
+    "400": "#5d96fd",
+    "500": "#376ffa",
+    "600": "#214fef",
+    "700": "#193adc",
+    "800": "#1b31b2",
+    "900": "#1c2f8c"
+  },
+  "s-purple": {
+    "50": "#f4f3ff",
+    "100": "#ebe8ff",
+    "200": "#d9d5ff",
+    "300": "#bdb2ff",
+    "400": "#9d88fd",
+    "500": "#7e58fa",
+    "600": "#6f35f2",
+    "700": "#6023de",
+    "800": "#501dba",
+    "900": "#431a98"
+  },
+  "s-pink": {
+    "50": "#fff4ff",
+    "100": "#ffe7ff",
+    "200": "#ffc6ff",
+    "300": "#fea9fa",
+    "400": "#fc76f4",
+    "500": "#f342e7",
+    "600": "#d722c8",
+    "700": "#b219a1",
+    "800": "#921684",
+    "900": "#771869"
+  }
+};
+
+// src/color-picker/color-picker.tsx
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var SHADES = ["200", "300", "400", "500", "600", "700", "800"];
+var ORDERED_COLOR_NAMES = [
+  "s-green",
+  "s-red",
+  "orange",
+  "s-yellow",
+  "purple",
+  "gray",
+  "green",
+  "s-pink",
+  "pink",
+  "cyan",
+  "s-purple",
+  "s-blue"
+];
+function ColorPicker({ value, setValue, children, isOpen, setIsOpen }) {
+  const [hoveredColor, setHoveredColor] = (0, import_react153.useState)(null);
+  const colorLookupMap = (0, import_react153.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    ORDERED_COLOR_NAMES.forEach((colorName) => {
+      SHADES.forEach((shade) => {
+        const color = colors_default[colorName];
+        map.set(color[shade], `${colorName} ${shade}`);
+      });
+    });
+    return map;
+  }, []);
+  const getColorNameAndHue = (colorValue) => {
+    return colorLookupMap.get(colorValue) || "Color Name and Hue not found";
+  };
+  const displayedColorInfo = hoveredColor || value ? getColorNameAndHue(hoveredColor ?? value) : "Select a color";
+  const handleColorSelect = (colorValue) => {
+    setValue(colorValue);
+    setIsOpen(false);
+  };
+  const handleMouseEnter = (colorValue) => setHoveredColor(colorValue);
+  const handleMouseLeave = () => setHoveredColor(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Popover, {
+    open: isOpen,
+    side: "bottom",
+    hasArrow: true,
+    onOpenChange: setIsOpen,
+    content: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(Card, {
+      variant: "elevate",
+      className: " border border-solid border-border p-5",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", {
+          className: "mb-3",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", {
+              className: "text-sm font-bold capitalize",
+              children: displayedColorInfo
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", {
+              className: "ml-4 text-sm italic text-gray-500-400",
+              children: hoveredColor ?? value
+            })
+          ]
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+          className: "grid grid-cols-12",
+          children: ORDERED_COLOR_NAMES.map((colorName) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+            children: SHADES.map((shade) => {
+              const colorValue = colors_default[colorName][shade];
+              return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+                className: "cursor-pointer rounded p-0.5",
+                onClick: () => handleColorSelect(colorValue),
+                onMouseEnter: () => handleMouseEnter(colorValue),
+                onMouseLeave: handleMouseLeave,
+                children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", {
+                  className: "h-5 w-5",
+                  style: { backgroundColor: colorValue }
+                })
+              }, colorValue);
+            })
+          }, colorName))
+        })
+      ]
+    }),
+    children
+  });
+}
+
 // src/index.ts
 init_iconography();
 var tokens = {
@@ -41558,6 +41807,7 @@ var tokens = {
   Checkbox,
   Collapsible,
   CollapsibleTrigger,
+  ColorPicker,
   Dialog,
   DropdownMenu,
   Icon,

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-ZLRCCIEB.mjs";
+} from "./chunk-RGQ4WALV.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -486,7 +486,7 @@ function Tag({
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LazyRichTextEditor = lazy(() => import("./rich-text-editor-LN7M5QFI.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-MZTMZK5H.mjs"));
 var RichTextEditor = (props) => {
   return /* @__PURE__ */ jsx15(Suspense, {
     fallback: null,
@@ -599,6 +599,254 @@ function Switch({ size, checked, ...props }) {
   });
 }
 
+// src/color-picker/color-picker.tsx
+import { useState, useMemo } from "react";
+
+// src/colors/colors.json
+var colors_default = {
+  cyan: {
+    "50": "#eefdfc",
+    "100": "#bff6f8",
+    "200": "#acf1f5",
+    "300": "#73e5ed",
+    "400": "#33d0dd",
+    "500": "#17b3c3",
+    "600": "#1690a4",
+    "700": "#197385",
+    "800": "#1d5e6d",
+    "900": "#1c4e5d"
+  },
+  pink: {
+    "50": "#fef1f9",
+    "100": "#fee5f4",
+    "200": "#ffccec",
+    "300": "#ffa1db",
+    "400": "#ff66c0",
+    "500": "#fb39a4",
+    "600": "#eb1782",
+    "700": "#cd0966",
+    "800": "#a90b54",
+    "900": "#8d0e49"
+  },
+  gray: {
+    "50": "#f5f5f6",
+    "100": "#e4e5e9",
+    "200": "#cccfd5",
+    "300": "#a9aeb7",
+    "400": "#7e8592",
+    "500": "#626778",
+    "600": "#545866",
+    "700": "#4c4f5a",
+    "800": "#40424a",
+    "900": "#393a40"
+  },
+  purple: {
+    "50": "#f7f6f9",
+    "100": "#eeecf2",
+    "200": "#d8d5e2",
+    "300": "#b6b0c9",
+    "400": "#8e85ab",
+    "500": "#706691",
+    "600": "#5b5178",
+    "700": "#4b4262",
+    "800": "#403953",
+    "900": "#393347"
+  },
+  green: {
+    "50": "#f3f8f8",
+    "100": "#dfebee",
+    "200": "#c3dade",
+    "300": "#9abfc6",
+    "400": "#699ca7",
+    "500": "#528693",
+    "600": "#436a77",
+    "700": "#3b5863",
+    "800": "#374b53",
+    "900": "#314148"
+  },
+  orange: {
+    "50": "#fff9eb",
+    "100": "#ffedc6",
+    "200": "#ffde99",
+    "300": "#ffbf4a",
+    "400": "#ffa520",
+    "500": "#f98107",
+    "600": "#dd5c02",
+    "700": "#b73d06",
+    "800": "#942e0c",
+    "900": "#7a270d"
+  },
+  "s-red": {
+    "50": "#fef2f2",
+    "100": "#ffe1e1",
+    "200": "#ffc8c8",
+    "300": "#ffadad",
+    "400": "#fd6c6c",
+    "500": "#f53e3e",
+    "600": "#e22020",
+    "700": "#be1717",
+    "800": "#9d1717",
+    "900": "#821a1a"
+  },
+  "s-orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#ffd6a5",
+    "300": "#ffbb72",
+    "400": "#fd943a",
+    "500": "#fc7513",
+    "600": "#ed5909",
+    "700": "#c4420a",
+    "800": "#9c3410",
+    "900": "#7d2d11"
+  },
+  "s-yellow": {
+    "50": "#fefee8",
+    "100": "#fdffb6",
+    "200": "#fffe88",
+    "300": "#fff744",
+    "400": "#fee911",
+    "500": "#eecf04",
+    "600": "#cda201",
+    "700": "#a47404",
+    "800": "#875b0c",
+    "900": "#734a10"
+  },
+  "s-green": {
+    "50": "#f2ffee",
+    "100": "#deffd8",
+    "200": "#caffbf",
+    "300": "#8dfd78",
+    "400": "#53f236",
+    "500": "#2cdb0c",
+    "600": "#1eb603",
+    "700": "#1b8e07",
+    "800": "#1a700b",
+    "900": "#165b0c"
+  },
+  "s-blue": {
+    "50": "#eff5ff",
+    "100": "#dae7ff",
+    "200": "#bed5ff",
+    "300": "#a0c4ff",
+    "400": "#5d96fd",
+    "500": "#376ffa",
+    "600": "#214fef",
+    "700": "#193adc",
+    "800": "#1b31b2",
+    "900": "#1c2f8c"
+  },
+  "s-purple": {
+    "50": "#f4f3ff",
+    "100": "#ebe8ff",
+    "200": "#d9d5ff",
+    "300": "#bdb2ff",
+    "400": "#9d88fd",
+    "500": "#7e58fa",
+    "600": "#6f35f2",
+    "700": "#6023de",
+    "800": "#501dba",
+    "900": "#431a98"
+  },
+  "s-pink": {
+    "50": "#fff4ff",
+    "100": "#ffe7ff",
+    "200": "#ffc6ff",
+    "300": "#fea9fa",
+    "400": "#fc76f4",
+    "500": "#f342e7",
+    "600": "#d722c8",
+    "700": "#b219a1",
+    "800": "#921684",
+    "900": "#771869"
+  }
+};
+
+// src/color-picker/color-picker.tsx
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var SHADES = ["200", "300", "400", "500", "600", "700", "800"];
+var ORDERED_COLOR_NAMES = [
+  "s-green",
+  "s-red",
+  "orange",
+  "s-yellow",
+  "purple",
+  "gray",
+  "green",
+  "s-pink",
+  "pink",
+  "cyan",
+  "s-purple",
+  "s-blue"
+];
+function ColorPicker({ value, setValue, children, isOpen, setIsOpen }) {
+  const [hoveredColor, setHoveredColor] = useState(null);
+  const colorLookupMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    ORDERED_COLOR_NAMES.forEach((colorName) => {
+      SHADES.forEach((shade) => {
+        const color = colors_default[colorName];
+        map.set(color[shade], `${colorName} ${shade}`);
+      });
+    });
+    return map;
+  }, []);
+  const getColorNameAndHue = (colorValue) => {
+    return colorLookupMap.get(colorValue) || "Color Name and Hue not found";
+  };
+  const displayedColorInfo = hoveredColor || value ? getColorNameAndHue(hoveredColor ?? value) : "Select a color";
+  const handleColorSelect = (colorValue) => {
+    setValue(colorValue);
+    setIsOpen(false);
+  };
+  const handleMouseEnter = (colorValue) => setHoveredColor(colorValue);
+  const handleMouseLeave = () => setHoveredColor(null);
+  return /* @__PURE__ */ jsx18(Popover, {
+    open: isOpen,
+    side: "bottom",
+    hasArrow: true,
+    onOpenChange: setIsOpen,
+    content: /* @__PURE__ */ jsxs10(Card, {
+      variant: "elevate",
+      className: " border border-solid border-border p-5",
+      children: [
+        /* @__PURE__ */ jsxs10("div", {
+          className: "mb-3",
+          children: [
+            /* @__PURE__ */ jsx18("span", {
+              className: "text-sm font-bold capitalize",
+              children: displayedColorInfo
+            }),
+            /* @__PURE__ */ jsx18("span", {
+              className: "ml-4 text-sm italic text-gray-500-400",
+              children: hoveredColor ?? value
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx18("div", {
+          className: "grid grid-cols-12",
+          children: ORDERED_COLOR_NAMES.map((colorName) => /* @__PURE__ */ jsx18("div", {
+            children: SHADES.map((shade) => {
+              const colorValue = colors_default[colorName][shade];
+              return /* @__PURE__ */ jsx18("div", {
+                className: "cursor-pointer rounded p-0.5",
+                onClick: () => handleColorSelect(colorValue),
+                onMouseEnter: () => handleMouseEnter(colorValue),
+                onMouseLeave: handleMouseLeave,
+                children: /* @__PURE__ */ jsx18("div", {
+                  className: "h-5 w-5",
+                  style: { backgroundColor: colorValue }
+                })
+              }, colorValue);
+            })
+          }, colorName))
+        })
+      ]
+    }),
+    children
+  });
+}
+
 // src/index.ts
 var tokens = {
   button: buttonTokens,
@@ -612,6 +860,7 @@ export {
   Checkbox,
   Collapsible,
   CollapsibleTrigger,
+  ColorPicker,
   Dialog,
   DropdownMenu,
   Icon,

package/dist/{rich-text-editor-LN7M5QFI.mjs → rich-text-editor-MZTMZK5H.mjs}

@@ -6,7 +6,7 @@ import {
   Icon,
   IconButton,
   InputWithLabel
-} from "./chunk-ZLRCCIEB.mjs";
+} from "./chunk-RGQ4WALV.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/rich-text-editor/rich-text-editor.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.24.34",
+  "version": "1.24.36",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/color-picker/color-picker.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useMemo, type SetStateAction } from 'react';
+
+import { Card } from '../card';
+import { colors } from '../colors';
+import { Popover } from '../popover';
+
+const SHADES = ['200', '300', '400', '500', '600', '700', '800'] as const;
+
+const ORDERED_COLOR_NAMES = [
+  's-green',
+  's-red',
+  'orange',
+  's-yellow',
+  'purple',
+  'gray',
+  'green',
+  's-pink',
+  'pink',
+  'cyan',
+  's-purple',
+  's-blue',
+] as const;
+
+type ColorPickerProps = {
+  value?: string;
+  setValue: (value: string) => void;
+  children: React.ReactNode;
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<SetStateAction<boolean>>;
+};
+
+export function ColorPicker({ value, setValue, children, isOpen, setIsOpen }: ColorPickerProps) {
+  const [hoveredColor, setHoveredColor] = useState<string | null>(null);
+
+  const colorLookupMap = useMemo(() => {
+    const map = new Map();
+    ORDERED_COLOR_NAMES.forEach(colorName => {
+      SHADES.forEach(shade => {
+        const color = colors[colorName];
+        map.set(color[shade], `${colorName} ${shade}`);
+      });
+    });
+    return map;
+  }, []);
+
+  const getColorNameAndHue = (colorValue?: string): string => {
+    return colorLookupMap.get(colorValue) || 'Color Name and Hue not found';
+  };
+
+  const displayedColorInfo = hoveredColor || value ? getColorNameAndHue(hoveredColor ?? value) : 'Select a color';
+
+  const handleColorSelect = (colorValue: string) => {
+    setValue(colorValue);
+    setIsOpen(false);
+  };
+
+  const handleMouseEnter = (colorValue: string) => setHoveredColor(colorValue);
+  const handleMouseLeave = () => setHoveredColor(null);
+
+  return (
+    <Popover
+      open={isOpen}
+      side="bottom"
+      hasArrow
+      onOpenChange={setIsOpen}
+      content={
+        <Card variant="elevate" className=" border border-solid border-border p-5">
+          <div className="mb-3">
+            <span className="text-sm font-bold capitalize">{displayedColorInfo}</span>
+            <span className="ml-4 text-sm italic text-gray-500-400">{hoveredColor ?? value}</span>
+          </div>
+
+          <div className="grid grid-cols-12">
+            {ORDERED_COLOR_NAMES.map(colorName => (
+              <div key={colorName}>
+                {SHADES.map(shade => {
+                  const colorValue = colors[colorName][shade];
+
+                  return (
+                    <div
+                      key={colorValue}
+                      className="cursor-pointer rounded p-0.5"
+                      onClick={() => handleColorSelect(colorValue)}
+                      onMouseEnter={() => handleMouseEnter(colorValue)}
+                      onMouseLeave={handleMouseLeave}
+                    >
+                      <div className="h-5 w-5" style={{ backgroundColor: colorValue }} />
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </Card>
+      }
+    >
+      {children}
+    </Popover>
+  );
+}

package/src/color-picker/index.ts

@@ -0,0 +1 @@
+export { ColorPicker } from './color-picker';

package/src/iconography/fixed-value.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, SVGProps } from 'react';
 
-import { fill, stroke } from './variables';
+import { stroke, fill } from './variables';
 
 type FixedValueProps = SVGProps<SVGSVGElement>;
 
@@ -8,26 +8,19 @@ type FixedValueRef = SVGSVGElement;
 
 export const FixedValue = forwardRef<FixedValueRef, FixedValueProps>((delegated, ref) => {
   return (
-    <svg ref={ref} width="23" height="22" viewBox="0 0 23 22" fill="none" {...delegated}>
+    <svg ref={ref} width="22" height="22" viewBox="0 0 22 22" fill="none" {...delegated}>
+      <path fill={fill} d="M7.379 7.414c-.413.248-.959.148-1.218-.259" />
+      <mask id="fixed-value-mask" fill="#fff">
+        <path d="M5 15.59c0-.817.663-1.48 1.48-1.48v.615l-.088.005a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.773l.088.004h9.72l.089-.004a.865.865 0 0 0 .772-.773l.004-.088a.865.865 0 0 0-.776-.86l-.088-.005v-.615a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 15.59Zm11.2-1.48v.615H6.48v-.615h9.72ZM5 10.742c0-.817.663-1.48 1.48-1.48v.616l-.088.004a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.772l.088.005h9.72l.089-.005a.865.865 0 0 0 .772-.771l.004-.089a.865.865 0 0 0-.776-.86l-.088-.004v-.616a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 10.742Zm11.2-1.48v.616H6.48v-.616h9.72ZM11.34 4c1.893 0 3.53.409 5.276 1.522l.123.087c.54.43.663 1.175.364 1.762l-.07.123c-.452.708-1.37.864-2.044.465-1.44-.852-2.466-1-3.649-1-1.328 0-2.413.24-3.644.982-.627.377-1.482.277-1.963-.327l-.09-.128c-.407-.638-.268-1.524.414-1.959l.328-.2C8.018 4.36 9.583 4 11.34 4Zm0 .615c-1.767 0-3.306.381-4.953 1.43l-.066.049a.803.803 0 0 0-.16 1.061c.243.381.738.494 1.14.301l.078-.042c1.34-.807 2.537-1.069 3.961-1.069l.237.002c1.176.021 2.269.22 3.725 1.083.387.23.887.15 1.16-.194l.053-.073a.812.812 0 0 0-.162-1.074l-.068-.048c-1.537-.98-2.968-1.376-4.613-1.421l-.332-.005Z" />
+      </mask>
       <path
-        d="M17.764 3.734h-11.2c-.998 0-1.7.984-1.7 2.05v10.5c0 1.067.702 2.05 1.7 2.05h11.2c.998 0 1.7-.983 1.7-2.05v-10.5c0-1.066-.702-2.05-1.7-2.05Z"
-        fill="#fff"
-      />
-      <path
-        d="m8.745 8.47 1.218-.84 2.24-.392 1.856.29 1.707.88-.868 1.109-2.694-.688-2.413.619-.99-.145-.056-.833ZM8.58 10.549h7.117v1.301H8.58zM8.58 13.372h7.117v1.301H8.58z"
         fill={fill}
+        d="M5 15.59c0-.817.663-1.48 1.48-1.48v.615l-.088.005a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.773l.088.004h9.72l.089-.004a.865.865 0 0 0 .772-.773l.004-.088a.865.865 0 0 0-.776-.86l-.088-.005v-.615a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 15.59Zm11.2-1.48v.615H6.48v-.615h9.72ZM5 10.742c0-.817.663-1.48 1.48-1.48v.616l-.088.004a.865.865 0 0 0-.777.86l.005.088c.041.408.365.731.772.772l.088.005h9.72l.089-.005a.865.865 0 0 0 .772-.771l.004-.089a.865.865 0 0 0-.776-.86l-.088-.004v-.616a1.48 1.48 0 0 1 0 2.96H6.48A1.48 1.48 0 0 1 5 10.742Zm11.2-1.48v.616H6.48v-.616h9.72ZM11.34 4c1.893 0 3.53.409 5.276 1.522l.123.087c.54.43.663 1.175.364 1.762l-.07.123c-.452.708-1.37.864-2.044.465-1.44-.852-2.466-1-3.649-1-1.328 0-2.413.24-3.644.982-.627.377-1.482.277-1.963-.327l-.09-.128c-.407-.638-.268-1.524.414-1.959l.328-.2C8.018 4.36 9.583 4 11.34 4Zm0 .615c-1.767 0-3.306.381-4.953 1.43l-.066.049a.803.803 0 0 0-.16 1.061c.243.381.738.494 1.14.301l.078-.042c1.34-.807 2.537-1.069 3.961-1.069l.237.002c1.176.021 2.269.22 3.725 1.083.387.23.887.15 1.16-.194l.053-.073a.812.812 0 0 0-.162-1.074l-.068-.048c-1.537-.98-2.968-1.376-4.613-1.421l-.332-.005Z"
       />
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.563 5.785c0-1.163.775-2.35 2-2.35h11.2c1.226 0 2 1.187 2 2.35v10.5c0 1.162-.774 2.35-2 2.35h-11.2c-1.225 0-2-1.188-2-2.35v-10.5Zm2-1.75c-.77 0-1.4.78-1.4 1.75v10.5c0 .97.63 1.75 1.4 1.75h11.2c.771 0 1.4-.78 1.4-1.75v-10.5c0-.97-.629-1.75-1.4-1.75h-11.2Z"
-        fill={stroke}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.872 7.837c1.092-.695 2.127-.951 3.291-.951 1.175 0 2.2.255 3.287.948.527.336.63 1.017.32 1.502-.343.538-1.036.65-1.538.353-.82-.486-1.392-.566-2.069-.566-.76 0-1.367.135-2.065.554-.497.3-1.197.2-1.545-.346-.307-.482-.205-1.16.32-1.494Zm.378 2.203h5.826a1.118 1.118 0 1 1 0 2.237H9.25a1.118 1.118 0 1 1 0-2.237Zm0 2.906h5.826a1.118 1.118 0 1 1 0 2.236H9.25a1.118 1.118 0 1 1 0-2.236ZM9.06 9.008a.536.536 0 0 0 .73.155c.803-.483 1.52-.64 2.374-.64.76 0 1.444.098 2.375.65a.536.536 0 0 0 .727-.16.485.485 0 0 0-.138-.673c-.982-.626-1.893-.854-2.964-.854-1.059 0-1.981.228-2.968.857a.48.48 0 0 0-.136.665Zm-.327 2.15c0 .287.232.519.518.519h5.826a.518.518 0 0 0 0-1.037H9.25a.518.518 0 0 0-.518.518Zm0 2.906c0 .286.232.518.518.518h5.826a.518.518 0 0 0 0-1.036H9.25a.518.518 0 0 0-.518.518Z"
         fill={stroke}
+        d="M5 15.59H4h1Zm1.48-1.48v-1 1Zm-.088.62-.051-.999-.025.001-.025.003.1.995Zm-.777.86h-1v.026l.002.025.998-.05Zm.005.088-.999.051.001.025.003.025.995-.1Zm.772.773-.101.994.025.003.025.001.05-.998Zm.088.004-.05.999.024.001h.026v-1Zm9.72 0v1h.026l.026-.001-.051-.999Zm.089-.004.05.998.026-.001.025-.003-.101-.994Zm.772-.773.995.101.002-.025.002-.025-1-.05Zm.004-.088.999.051.001-.025v-.026h-1Zm-.776-.86.1-.995-.024-.003-.025-.001-.051.999Zm-.088-.62v-1 1Zm1.48 1.48h1-1Zm-1.48 1.48v1-1Zm-9.721 0v1-1ZM5 10.742H4h1Zm1.48-1.48v-1 1Zm-.088.62-.051-.998h-.025l-.025.003.1.995Zm-.777.86h-1v.026l.002.025.998-.05Zm.005.088-.999.051.001.025.003.025.995-.1Zm.772.772-.101.995.025.003.025.001.05-.999Zm.088.005-.05.999h.05v-1Zm9.72 0v1h.026l.026-.001-.051-1Zm.089-.005.05 1 .026-.002.025-.003-.101-.995Zm.772-.771.995.1.002-.025.002-.025-1-.05Zm.004-.089.999.051.001-.025v-.026h-1Zm-.776-.86.1-.995-.024-.002-.025-.002-.051 1Zm-.088-.62v-1 1Zm1.48 1.48h1-1Zm-1.48 1.48v1-1Zm-9.721 0v1-1ZM11.34 4V3v1Zm5.276 1.522.58-.815-.02-.015-.022-.013-.538.843Zm.123.087.622-.783-.021-.016-.022-.016-.58.815Zm.364 1.762.869.496.012-.021.01-.022-.89-.453Zm-.07.123.843.538.014-.021.012-.021-.869-.496Zm-2.044.465.509-.86-.51.86Zm-3.649-1v-1 1Zm-3.644.982.516.857-.516-.857Zm-1.963-.327-.815.58.016.021.017.022.782-.623Zm-.09-.128-.844.538.014.02.014.021.815-.579Zm.414-1.959-.523-.852-.007.004-.007.005.537.843Zm.328-.2-.51-.862-.007.005-.007.004.524.852Zm4.955-.712.014-1h-.014v1Zm-4.953 1.43-.537-.842-.022.014-.022.015.581.814Zm-.066.049-.582-.814-.02.015-.021.016.623.783Zm-.16 1.061-.843.538.843-.538Zm1.14.301.432.902.022-.01.022-.013-.477-.879Zm.078-.042.477.878.02-.01.018-.012-.515-.856Zm3.961-1.069.008-1h-.008v1Zm.237.002.018-1h-.011l-.007 1Zm3.725 1.083-.51.86.51-.86Zm1.16-.194.784.622.016-.02.015-.022-.814-.58Zm.053-.073.814.58.015-.02.014-.022-.843-.538Zm-.162-1.074.623-.782-.02-.016-.02-.015-.583.813Zm-.068-.048.583-.813-.022-.016-.023-.014-.538.843ZM11.672 4.62l.028-1h-.014l-.014 1ZM5 15.59h1a.48.48 0 0 1 .48-.48v-2A2.48 2.48 0 0 0 4 15.59h1Zm1.48-1.48h-1v.615h2v-.615h-1Zm0 .615-.05-.998-.09.004.052.999.05.998.089-.004-.051-.999Zm-.088.005-.101-.995a1.865 1.865 0 0 0-1.676 1.855h2c0 .07-.053.127-.122.135l-.101-.995Zm-.777.86-.998.051.004.088.999-.05.999-.051-.005-.088-.999.05Zm.005.088-.995.101c.09.88.786 1.577 1.666 1.666l.1-.994.102-.995a.135.135 0 0 1 .122.122l-.995.1Zm.772.773-.051.998.088.005.05-.999.052-.999-.088-.004-.051.999Zm.088.004v1h9.72v-2H6.48v1Zm9.72 0 .052.999.088-.005-.051-.998-.051-1-.088.005.05.999Zm.089-.004.1.994a1.865 1.865 0 0 0 1.667-1.666l-.995-.1-.995-.101a.135.135 0 0 1 .122-.122l.1.995Zm.772-.773.998.051.005-.088-.999-.05-.998-.051-.005.088.999.05Zm.004-.088h1c0-.965-.733-1.76-1.675-1.855l-.101.995-.101.995a.135.135 0 0 1-.123-.135h1Zm-.776-.86.05-.999-.087-.005-.051 1-.051.998.088.004.05-.998Zm-.088-.005h1v-.615h-2v.615h1Zm0-.615v1a.48.48 0 0 1 .48.48h2a2.48 2.48 0 0 0-2.48-2.48v1Zm1.48 1.48h-1a.48.48 0 0 1-.48.48v2a2.48 2.48 0 0 0 2.48-2.48h-1Zm-1.48 1.48v-1H6.48v2h9.72v-1Zm-9.721 0v-1a.48.48 0 0 1-.48-.48H4a2.48 2.48 0 0 0 2.48 2.48v-1Zm9.72-2.96h-1v.615h2v-.615h-1Zm0 .615v-1H6.48v2h9.72v-1Zm-9.72 0h1v-.615h-2v.615h1Zm0-.615v1h9.72v-2H6.48v1ZM5 10.742h1a.48.48 0 0 1 .48-.48v-2A2.48 2.48 0 0 0 4 10.742h1Zm1.48-1.48h-1v.616h2v-.616h-1Zm0 .616-.05-.999-.09.005.052.998.05.999.089-.005-.051-.998Zm-.088.004-.101-.995a1.865 1.865 0 0 0-1.676 1.855h2a.135.135 0 0 1-.122.135l-.101-.995Zm-.777.86-.998.051.004.088.999-.05.999-.051-.005-.089-.999.051Zm.005.088-.995.101c.089.88.787 1.577 1.666 1.666l.1-.995.102-.994a.135.135 0 0 1 .122.122l-.995.1Zm.772.772-.051 1 .088.004.05-1 .052-.998-.088-.004-.051.998Zm.088.005v1h9.72v-2H6.48v1Zm9.72 0 .052.999.088-.005-.051-.999-.051-.998-.088.004.05.999Zm.089-.005.1.995a1.865 1.865 0 0 0 1.667-1.666l-.995-.1-.995-.101a.135.135 0 0 1 .122-.122l.1.994Zm.772-.771.998.05.005-.088-.999-.05-.998-.052-.005.089.999.05Zm.004-.089h1c0-.966-.734-1.76-1.675-1.855l-.101.995-.101.995a.135.135 0 0 1-.123-.135h1Zm-.776-.86.05-.998-.087-.005-.051.999-.051.998.088.005.05-.999Zm-.088-.004h1v-.616h-2v.616h1Zm0-.616v1a.48.48 0 0 1 .48.48h2a2.48 2.48 0 0 0-2.48-2.48v1Zm1.48 1.48h-1a.48.48 0 0 1-.48.48v2a2.48 2.48 0 0 0 2.48-2.48h-1Zm-1.48 1.48v-1H6.48v2h9.72v-1Zm-9.721 0v-1a.48.48 0 0 1-.48-.48H4a2.48 2.48 0 0 0 2.48 2.48v-1Zm9.72-2.96h-1v.616h2v-.616h-1Zm0 .616v-1H6.48v2h9.72v-1Zm-9.72 0h1v-.616h-2v.616h1Zm0-.616v1h9.72v-2H6.48v1ZM11.34 4v1c1.719 0 3.166.363 4.739 1.365l.537-.843.538-.843C15.234 3.455 13.408 3 11.34 3v1Zm5.276 1.522-.58.815.123.087.58-.815.579-.815-.122-.087-.58.815Zm.123.087-.623.783c.14.11.197.328.096.526l.892.453.89.453c.497-.976.31-2.248-.633-2.998l-.622.783Zm.364 1.762-.868-.496-.07.123.868.496.869.496.07-.123-.869-.496Zm-.07.123-.843-.538a.51.51 0 0 1-.692.142l-.51.86-.509.861c1.093.647 2.628.419 3.397-.787l-.843-.538Zm-2.044.465.509-.86c-1.624-.962-2.835-1.14-4.158-1.14v2c1.043 0 1.885.118 3.14.86l.509-.86Zm-3.649-1v-1c-1.484 0-2.752.278-4.16 1.125l.516.857.516.857c1.055-.635 1.955-.838 3.128-.838v-1Zm-3.644.982-.516-.857c-.24.145-.527.08-.664-.093l-.783.623-.782.623c.824 1.035 2.247 1.17 3.26.56l-.515-.856Zm-1.963-.327.815-.58-.09-.127-.816.579-.815.58.091.127.815-.579Zm-.09-.128.842-.538a.415.415 0 0 1 .11-.578l-.538-.843-.537-.843c-1.188.756-1.398 2.277-.72 3.34l.842-.538Zm.414-1.959.523.852.328-.2-.523-.853-.524-.852-.327.201.523.852Zm.328-.2.508.86C8.357 5.322 9.743 5 11.34 5V3c-1.916 0-3.66.399-5.464 1.465l.509.861Zm4.955-.712v-1c-1.941 0-3.67.427-5.49 1.588l.537.843.538.843c1.473-.938 2.822-1.274 4.415-1.274v-1Zm-4.953 1.43-.58-.813-.068.048.582.814.58.813.068-.047-.582-.814Zm-.066.049-.623-.783c-.743.591-.86 1.628-.38 2.382l.843-.538.843-.538c.034.054.048.172-.06.259l-.623-.782Zm-.16 1.061-.843.538c.544.852 1.607 1.052 2.415.665L7.3 7.456l-.432-.901a.07.07 0 0 1 .048-.004.155.155 0 0 1 .088.066l-.843.538Zm1.14.301.476.88.079-.044-.477-.878-.477-.88-.079.043.477.88Zm.078-.042.515.856c1.164-.7 2.177-.925 3.446-.925v-2c-1.58 0-2.96.299-4.477 1.212l.516.857Zm3.961-1.069-.007 1 .237.002.007-1 .007-1-.236-.002-.008 1Zm.237.002-.019 1c1.027.018 1.946.18 3.234.943l.51-.86.51-.86c-1.624-.962-2.89-1.199-4.217-1.223l-.018 1Zm3.725 1.083-.51.86c.789.467 1.848.33 2.454-.432l-.783-.622-.783-.623a.139.139 0 0 1 .082-.052c.02-.003.037 0 .05.008l-.51.86Zm1.16-.194.815.58.052-.072-.814-.58-.815-.581-.051.072.814.58Zm.053-.073.843.538c.484-.759.364-1.8-.382-2.394l-.623.782-.623.783c-.104-.084-.09-.197-.059-.247l.844.538Zm-.162-1.074.582-.813-.067-.048-.582.813-.583.813.067.048.583-.813Zm-.068-.048.538-.843C15.127 4.116 13.517 3.67 11.7 3.62l-.028 1-.028 1c1.472.04 2.726.386 4.104 1.264l.537-.843ZM11.672 4.62l.014-1-.332-.005-.014 1-.013 1 .332.005.013-1Z"
+        mask="url(#fixed-value-mask)"
       />
     </svg>
   );

package/src/index.ts

@@ -29,6 +29,7 @@ export * from './rich-text-editor';
 export * from './toast';
 export * from './tooltip';
 export * from './switch';
+export * from './color-picker';
 
 // Icons ---
 export * from './iconography';

package/src/radio/radio.css

@@ -10,6 +10,10 @@
     @apply bg-gray-100-800 opacity-40;
   }
 
+  &:not(:disabled) {
+    @apply cursor-pointer;
+  }
+
   &[aria-checked='true'] {
     @apply border-cyan-700-200 bg-cyan-200-700;
   }