@crystallize/design-system 1.24.45 → 2.0.1

package/dist/index.mjs

@@ -17,7 +17,7 @@ import {
   showError,
   showInfo,
   showWarning
-} from "./chunk-ASHS3SWM.mjs";
+} from "./chunk-B2Q2EUTC.mjs";
 import "./chunk-NIH5ZMPE.mjs";
 
 // src/card/card.tsx
@@ -36,12 +36,7 @@ var cardStyles = cva("c-card", {
   }
 });
 var Card = forwardRef(({ children, className, variant, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsx("section", {
-    ref,
-    className: cardStyles({ variant, className }),
-    ...delegated,
-    children
-  });
+  return /* @__PURE__ */ jsx("section", { ref, className: cardStyles({ variant, className }), ...delegated, children });
 });
 
 // src/card/index.ts
@@ -74,16 +69,7 @@ var avatarClassName = cva2(["c-avatar"], {
   }
 });
 var Avatar = forwardRef2(({ name, size, className, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsx2("div", {
-    ref,
-    ...delegated,
-    title: name,
-    className: avatarClassName({ size, className }),
-    children: /* @__PURE__ */ jsx2("span", {
-      className: "c-avatar-initials",
-      children: getInitials(name)
-    })
-  });
+  return /* @__PURE__ */ jsx2("div", { ref, ...delegated, title: name, className: avatarClassName({ size, className }), children: /* @__PURE__ */ jsx2("span", { className: "c-avatar-initials", children: getInitials(name) }) });
 });
 Avatar.displayName = "Avatar";
 
@@ -92,28 +78,22 @@ import { forwardRef as forwardRef3 } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var Checkbox = forwardRef3((props, ref) => {
-  return /* @__PURE__ */ jsx3(CheckboxPrimitive.Root, {
-    ...props,
-    ref,
-    className: "c-checkbox",
-    children: /* @__PURE__ */ jsx3(CheckboxPrimitive.Indicator, {
-      children: /* @__PURE__ */ jsxs("svg", {
-        viewBox: "0 0 9 9",
-        fill: "none",
-        className: "c-checkbox__svg",
-        children: [
-          /* @__PURE__ */ jsx3("path", {
-            className: "c-checkbox__svg-p1",
-            d: "M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z"
-          }),
-          /* @__PURE__ */ jsx3("path", {
-            className: "c-checkbox__svg-p2",
-            d: "M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z"
-          })
-        ]
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx3(CheckboxPrimitive.Root, { ...props, ref, className: "c-checkbox", children: /* @__PURE__ */ jsx3(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 9 9", fill: "none", className: "c-checkbox__svg", children: [
+    /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "c-checkbox__svg-p1",
+        d: "M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "path",
+      {
+        className: "c-checkbox__svg-p2",
+        d: "M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z"
+      }
+    )
+  ] }) }) });
 });
 Checkbox.displayName = "Checkbox";
 
@@ -122,10 +102,7 @@ import { cx } from "class-variance-authority";
 import * as CollapsiblePrimitives from "@radix-ui/react-collapsible";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Content2({ className, ...delegated }) {
-  return /* @__PURE__ */ jsx4(CollapsiblePrimitives.Content, {
-    ...delegated,
-    className: cx("c-collapsible-content", className)
-  });
+  return /* @__PURE__ */ jsx4(CollapsiblePrimitives.Content, { ...delegated, className: cx("c-collapsible-content", className) });
 }
 function CollapsibleTrigger({
   children,
@@ -134,26 +111,23 @@ function CollapsibleTrigger({
   mode,
   ...delegated
 }) {
-  return /* @__PURE__ */ jsx4(CollapsiblePrimitives.Trigger, {
-    asChild: true,
-    ...delegated,
-    className: cx(
-      "c-collapsible-trigger",
-      arrowPosition === "right" ? "arrow-right" : "",
-      mode === "tree" ? "c-collapsible-tree" : "",
-      className
-    ),
-    children: /* @__PURE__ */ jsxs2("div", {
-      children: [
-        arrowPosition && /* @__PURE__ */ jsx4(Icon.Caret, {
-          className: "c-collapsible-arrow",
-          width: 9,
-          height: 9
-        }),
+  return /* @__PURE__ */ jsx4(
+    CollapsiblePrimitives.Trigger,
+    {
+      asChild: true,
+      ...delegated,
+      className: cx(
+        "c-collapsible-trigger",
+        arrowPosition === "right" ? "arrow-right" : "",
+        mode === "tree" ? "c-collapsible-tree" : "",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs2("div", { children: [
+        arrowPosition && /* @__PURE__ */ jsx4(Icon.Caret, { className: "c-collapsible-arrow", width: 9, height: 9 }),
         children
-      ]
-    })
-  });
+      ] })
+    }
+  );
 }
 var Collapsible = {
   Root: CollapsiblePrimitives.Root,
@@ -179,20 +153,10 @@ var inlineRadioGroupStyles = cva3("c-inline-radio-group", {
   }
 });
 function InlineRadioGroup({ size, className, ...delegated }) {
-  return /* @__PURE__ */ jsx5(RadioGroupPrimitive.Root, {
-    ...delegated,
-    className: inlineRadioGroupStyles({ size, className })
-  });
+  return /* @__PURE__ */ jsx5(RadioGroupPrimitive.Root, { ...delegated, className: inlineRadioGroupStyles({ size, className }) });
 }
 function InlineRadioItem({ children, className, ...delegated }) {
-  return /* @__PURE__ */ jsx5(RadioGroupPrimitive.Item, {
-    ...delegated,
-    className: cx2("c-inline-radio", className),
-    children: /* @__PURE__ */ jsx5(RadioGroupPrimitive.Indicator, {
-      forceMount: true,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsx5(RadioGroupPrimitive.Item, { ...delegated, className: cx2("c-inline-radio", className), children: /* @__PURE__ */ jsx5(RadioGroupPrimitive.Indicator, { forceMount: true, children }) });
 }
 var InlineRadio = {
   Group: InlineRadioGroup,
@@ -208,14 +172,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function PopoverClose(props) {
   const { asChild, children } = props;
-  return /* @__PURE__ */ jsx6(PopoverPrimitive.Close, {
-    asChild,
-    className: "c-popover-close",
-    children: children ?? /* @__PURE__ */ jsx6(Icon.Cancel, {
-      width: 16,
-      height: 16
-    })
-  });
+  return /* @__PURE__ */ jsx6(PopoverPrimitive.Close, { asChild, className: "c-popover-close", children: children ?? /* @__PURE__ */ jsx6(Icon.Cancel, { width: 16, height: 16 }) });
 }
 
 // src/popover/popover.tsx
@@ -232,35 +189,14 @@ function Popover({
   hasArrow = true,
   ...delegatedContent
 }) {
-  return /* @__PURE__ */ jsxs3(PopoverPrimitive2.Root, {
-    open,
-    onOpenChange,
-    children: [
-      /* @__PURE__ */ jsx7(PopoverPrimitive2.Trigger, {
-        asChild: true,
-        children
-      }),
-      /* @__PURE__ */ jsx7(PopoverPrimitive2.Portal, {
-        container,
-        children: /* @__PURE__ */ jsxs3(PopoverPrimitive2.Content, {
-          ...delegatedContent,
-          side,
-          className: cx3("c-popover-content", className),
-          children: [
-            !closeButton ? null : /* @__PURE__ */ jsx7(PopoverClose, {
-              asChild: typeof closeButton !== "boolean",
-              children: typeof closeButton !== "boolean" ? closeButton : null
-            }),
-            hasArrow && /* @__PURE__ */ jsx7(PopoverPrimitive2.Arrow, {
-              className: "c-popover-arrow",
-              offset: 5
-            }),
-            content
-          ]
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs3(PopoverPrimitive2.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx7(PopoverPrimitive2.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx7(PopoverPrimitive2.Portal, { container, children: /* @__PURE__ */ jsxs3(PopoverPrimitive2.Content, { ...delegatedContent, side, className: cx3("c-popover-content", className), children: [
+      !closeButton ? null : /* @__PURE__ */ jsx7(PopoverClose, { asChild: typeof closeButton !== "boolean", children: typeof closeButton !== "boolean" ? closeButton : null }),
+      hasArrow && /* @__PURE__ */ jsx7(PopoverPrimitive2.Arrow, { className: "c-popover-arrow", offset: 5 }),
+      content
+    ] }) })
+  ] });
 }
 
 // src/progress/progress.tsx
@@ -268,27 +204,20 @@ import { cx as cx4 } from "class-variance-authority";
 import * as ProgressPrimitives from "@radix-ui/react-progress";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function Progress({ className, value }) {
-  return /* @__PURE__ */ jsx8(ProgressPrimitives.Root, {
-    className: cx4(className, "c-progress-root"),
-    value,
-    children: /* @__PURE__ */ jsx8(ProgressPrimitives.Indicator, {
+  return /* @__PURE__ */ jsx8(ProgressPrimitives.Root, { className: cx4(className, "c-progress-root"), value, children: /* @__PURE__ */ jsx8(
+    ProgressPrimitives.Indicator,
+    {
       className: "c-progress-indicator",
       style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
-    })
-  });
+    }
+  ) });
 }
 
 // src/radio/radio.tsx
 import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function RadioGroupItem(props) {
-  return /* @__PURE__ */ jsx9(RadioGroupPrimitive2.Item, {
-    ...props,
-    className: "c-radio-item",
-    children: /* @__PURE__ */ jsx9(RadioGroupPrimitive2.Indicator, {
-      className: "c-radio-indicator"
-    })
-  });
+  return /* @__PURE__ */ jsx9(RadioGroupPrimitive2.Item, { ...props, className: "c-radio-item", children: /* @__PURE__ */ jsx9(RadioGroupPrimitive2.Indicator, { className: "c-radio-indicator" }) });
 }
 var Radio = {
   Group: RadioGroupPrimitive2.Root,
@@ -302,17 +231,10 @@ import * as SelectPrimitives from "@radix-ui/react-select";
 import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var SelectItem = forwardRef4((props, ref) => {
   const { children, className, ...delegated } = props;
-  return /* @__PURE__ */ jsxs4(SelectPrimitives.Item, {
-    className: cx5("c-select-item", className),
-    ref,
-    ...delegated,
-    children: [
-      /* @__PURE__ */ jsx10(SelectPrimitives.ItemText, {
-        children
-      }),
-      /* @__PURE__ */ jsx10(SelectPrimitives.ItemIndicator, {})
-    ]
-  });
+  return /* @__PURE__ */ jsxs4(SelectPrimitives.Item, { className: cx5("c-select-item", className), ref, ...delegated, children: [
+    /* @__PURE__ */ jsx10(SelectPrimitives.ItemText, { children }),
+    /* @__PURE__ */ jsx10(SelectPrimitives.ItemIndicator, {})
+  ] });
 });
 SelectItem.displayName = "SelectItem";
 
@@ -336,39 +258,26 @@ var selectTriggerStyles = cva4("c-select-trigger", {
 });
 var SelectContainer = forwardRef5(
   ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
-    return /* @__PURE__ */ jsxs5(SelectPrimitives2.Root, {
-      ...delegated,
-      children: [
-        /* @__PURE__ */ jsxs5(SelectPrimitives2.Trigger, {
+    return /* @__PURE__ */ jsxs5(SelectPrimitives2.Root, { ...delegated, children: [
+      /* @__PURE__ */ jsxs5(
+        SelectPrimitives2.Trigger,
+        {
           ref,
           className: selectTriggerStyles({ size, className: triggerClassName }),
           disabled,
           id,
           children: [
-            /* @__PURE__ */ jsx11(SelectPrimitives2.Value, {
-              placeholder: /* @__PURE__ */ jsx11("span", {
-                className: "c-select-value",
-                children: placeholder ?? "Select..."
-              })
-            }),
+            /* @__PURE__ */ jsx11(SelectPrimitives2.Value, { placeholder: /* @__PURE__ */ jsx11("span", { className: "c-select-value", children: placeholder ?? "Select..." }) }),
             /* @__PURE__ */ jsx11(Icon.Arrow, {})
           ]
-        }),
-        /* @__PURE__ */ jsx11(SelectPrimitives2.Portal, {
-          children: /* @__PURE__ */ jsxs5(SelectPrimitives2.Content, {
-            className: "c-select-content",
-            children: [
-              /* @__PURE__ */ jsx11(SelectPrimitives2.ScrollUpButton, {}),
-              /* @__PURE__ */ jsx11(SelectPrimitives2.Viewport, {
-                className: "c-select-viewport",
-                children
-              }),
-              /* @__PURE__ */ jsx11(SelectPrimitives2.ScrollDownButton, {})
-            ]
-          })
-        })
-      ]
-    });
+        }
+      ),
+      /* @__PURE__ */ jsx11(SelectPrimitives2.Portal, { children: /* @__PURE__ */ jsxs5(SelectPrimitives2.Content, { className: "c-select-content", children: [
+        /* @__PURE__ */ jsx11(SelectPrimitives2.ScrollUpButton, {}),
+        /* @__PURE__ */ jsx11(SelectPrimitives2.Viewport, { className: "c-select-viewport", children }),
+        /* @__PURE__ */ jsx11(SelectPrimitives2.ScrollDownButton, {})
+      ] }) })
+    ] });
   }
 );
 SelectContainer.displayName = "Select";
@@ -385,41 +294,19 @@ import { cx as cx6 } from "class-variance-authority";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var Slider = forwardRef6(({ className, transparentRange, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsxs6(SliderPrimitive.Root, {
-    className: cx6("c-slider-root", className),
-    ref,
-    ...delegated,
-    children: [
-      /* @__PURE__ */ jsx12(SliderPrimitive.Track, {
-        className: "c-slider-track",
-        children: /* @__PURE__ */ jsx12(SliderPrimitive.Range, {
-          className: `c-slider-range ${transparentRange ? "c-slider-range-transparent" : ""}`
-        })
-      }),
-      /* @__PURE__ */ jsx12(SliderPrimitive.Thumb, {
-        className: "c-slider-thumb"
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs6(SliderPrimitive.Root, { className: cx6("c-slider-root", className), ref, ...delegated, children: [
+    /* @__PURE__ */ jsx12(SliderPrimitive.Track, { className: "c-slider-track", children: /* @__PURE__ */ jsx12(SliderPrimitive.Range, { className: `c-slider-range ${transparentRange ? "c-slider-range-transparent" : ""}` }) }),
+    /* @__PURE__ */ jsx12(SliderPrimitive.Thumb, { className: "c-slider-thumb" })
+  ] });
 });
 
 // src/stack-icon/stack-icon.tsx
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function StackIcon({ type, children, size = 18 }) {
-  return /* @__PURE__ */ jsxs7("span", {
-    className: "c-stack-icon",
-    children: [
-      type === "create" && /* @__PURE__ */ jsx13("span", {
-        style: { width: size, height: size },
-        className: "c-stack-icon__icon",
-        children: /* @__PURE__ */ jsx13(Icon.Add, {
-          width: size - 4,
-          height: size - 4
-        })
-      }),
-      children
-    ]
-  });
+  return /* @__PURE__ */ jsxs7("span", { className: "c-stack-icon", children: [
+    type === "create" && /* @__PURE__ */ jsx13("span", { style: { width: size, height: size }, className: "c-stack-icon__icon", children: /* @__PURE__ */ jsx13(Icon.Add, { width: size - 4, height: size - 4 }) }),
+    children
+  ] });
 }
 
 // src/tag/tag.tsx
@@ -454,16 +341,12 @@ function Tag({
   showRemoveOnHover,
   ...delegated
 }) {
-  return /* @__PURE__ */ jsxs8("div", {
-    className: tagStyles({ className, variant, size }),
-    ...delegated,
-    children: [
-      !prepend ? null : /* @__PURE__ */ jsx14("span", {
-        className: "c-tag__prepend",
-        children: prepend
-      }),
-      children,
-      onRemove && /* @__PURE__ */ jsxs8("button", {
+  return /* @__PURE__ */ jsxs8("div", { className: tagStyles({ className, variant, size }), ...delegated, children: [
+    !prepend ? null : /* @__PURE__ */ jsx14("span", { className: "c-tag__prepend", children: prepend }),
+    children,
+    onRemove && /* @__PURE__ */ jsxs8(
+      "button",
+      {
         type: "button",
         className: cx7("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
@@ -471,31 +354,20 @@ function Tag({
           onRemove();
         },
         children: [
-          /* @__PURE__ */ jsx14(Icon.Cancel, {
-            width: 12,
-            height: 12
-          }),
-          /* @__PURE__ */ jsx14("span", {
-            className: "c-tag__remove-button-text",
-            children: "Remove"
-          })
+          /* @__PURE__ */ jsx14(Icon.Cancel, { width: 12, height: 12 }),
+          /* @__PURE__ */ jsx14("span", { className: "c-tag__remove-button-text", children: "Remove" })
         ]
-      })
-    ]
-  });
+      }
+    )
+  ] });
 }
 
 // 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-LL7UCSDS.mjs"));
+var LazyRichTextEditor = lazy(() => import("./rich-text-editor-SIZB67MA.mjs"));
 var RichTextEditor = (props) => {
-  return /* @__PURE__ */ jsx15(Suspense, {
-    fallback: null,
-    children: /* @__PURE__ */ jsx15(LazyRichTextEditor, {
-      ...props
-    })
-  });
+  return /* @__PURE__ */ jsx15(Suspense, { fallback: null, children: /* @__PURE__ */ jsx15(LazyRichTextEditor, { ...props }) });
 };
 
 // src/toast/index.ts
@@ -529,42 +401,21 @@ var toast = ({ title, message, id, type = "success", timeout = 6e3 }) => {
   const withMessage = !!message;
   const toastId = id ?? Date.now().toString();
   sonnerToast.custom(
-    (id2) => /* @__PURE__ */ jsxs9("div", {
-      "data-testid": `toast-${type}`,
-      className: cx8(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
-      children: [
-        /* @__PURE__ */ jsx16("div", {
-          children: /* @__PURE__ */ jsx16(ToastIcon, {
-            width: 26,
-            height: 26
-          })
-        }),
-        /* @__PURE__ */ jsxs9("div", {
-          children: [
-            /* @__PURE__ */ jsx16("div", {
-              className: "c-toast-title",
-              children: title
-            }),
-            !!message && /* @__PURE__ */ jsx16("div", {
-              className: "c-toast-message",
-              children: message
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsx16("div", {
-          className: "c-toast-close",
-          "data-testid": "toast-close",
-          children: /* @__PURE__ */ jsx16(IconButton, {
-            onClick: () => sonnerToast.dismiss(id2),
-            size: "xs",
-            children: /* @__PURE__ */ jsx16(Icon.Cancel, {
-              width: 12,
-              height: 12
-            })
-          })
-        })
-      ]
-    }),
+    (id2) => /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        "data-testid": `toast-${type}`,
+        className: cx8(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+        children: [
+          /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(ToastIcon, { width: 26, height: 26 }) }),
+          /* @__PURE__ */ jsxs9("div", { children: [
+            /* @__PURE__ */ jsx16("div", { className: "c-toast-title", children: title }),
+            !!message && /* @__PURE__ */ jsx16("div", { className: "c-toast-message", children: message })
+          ] }),
+          /* @__PURE__ */ jsx16("div", { className: "c-toast-close", "data-testid": "toast-close", children: /* @__PURE__ */ jsx16(IconButton, { onClick: () => sonnerToast.dismiss(id2), size: "xs", children: /* @__PURE__ */ jsx16(Icon.Cancel, { width: 12, height: 12 }) }) })
+        ]
+      }
+    ),
     {
       id: toastId,
       duration: timeout,
@@ -591,14 +442,7 @@ var switchStyles = cva7(["c-switch-root"], {
   }
 });
 function Switch({ size, checked, ...props }) {
-  return /* @__PURE__ */ jsx17(RadixSwitch.Root, {
-    ...props,
-    checked: checked === null ? false : checked,
-    className: switchStyles({ size }),
-    children: /* @__PURE__ */ jsx17(RadixSwitch.Thumb, {
-      className: cx9("c-switch-thumb", checked === null ? "middle-position" : "")
-    })
-  });
+  return /* @__PURE__ */ jsx17(RadixSwitch.Root, { ...props, checked: checked === null ? false : checked, className: switchStyles({ size }), children: /* @__PURE__ */ jsx17(RadixSwitch.Thumb, { className: cx9("c-switch-thumb", checked === null ? "middle-position" : "") }) });
 }
 
 // src/color-picker/color-picker.tsx
@@ -803,50 +647,36 @@ function ColorPicker({ value, setValue, children, isOpen, setIsOpen }) {
   };
   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
-  });
+  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