@eightshift/ui-components 0.0.1 → 0.0.2

package/dist/components/base-control/base-control.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-BM136LvS.js";
-import { classnames } from "../../utilities/classnames.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-Cyxp9ewv.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * Component that allows wrapping components with a common layout that includes a label and optional icon, subtitle, actions, and help text.
@@ -17,6 +17,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @param {string} [props.controlContainerClassName] - Classes to pass to the control container.
  * @param {boolean} [props.fullWidthLabel] - If `true`, the label expands to fill up the whole width, instead of taking up only the space it needs.
  * @param {JSX.Element} [props.labelAs] - If provided, the label (includes icon and subtitle) will be rendered as this element.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The BaseControl component.
  *
@@ -39,53 +40,42 @@ const BaseControl = (props) => {
     className,
     controlContainerClassName,
     fullWidthLabel,
-    labelAs
+    labelAs,
+    hidden
   } = props;
-  if (!children) {
+  if (!children || hidden) {
     return null;
   }
   if (!(label || icon || subtitle)) {
     return children;
   }
-  return /* @__PURE__ */ jsxs("div", { className: classnames("es-uic-space-y-1", className), children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: classnames(
-          "es-uic-flex es-uic-items-center es-uic-gap-1",
-          !inline && !icon && "es-uic-pb-0.5"
-        ),
-        children: [
-          (label || icon || subtitle) && /* @__PURE__ */ jsx(
-            RichLabel,
-            {
-              icon,
-              label,
-              subtitle,
-              fullWidth: fullWidthLabel,
-              as: labelAs
-            }
-          ),
-          inline && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classnames(
-                "es-uic-ml-auto es-uic-flex es-uic-items-center es-uic-gap-1",
-                controlContainerClassName
-              ),
-              children
-            }
-          ),
-          !inline && actions && /* @__PURE__ */ jsx("div", { className: classnames("es-uic-flex es-uic-items-center es-uic-gap-1", !inline && "es-uic-ml-auto"), children: actions })
-        ]
-      }
-    ),
-    !inline && Array.isArray(children) && children.filter(Boolean).length > 1 && /* @__PURE__ */ jsx("div", { className: classnames("es-uic-space-y-1", controlContainerClassName), children }),
+  return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-space-y-1", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1", !inline && !icon && "es-uic-pb-0.5"), children: [
+      (label || icon || subtitle) && /* @__PURE__ */ jsx(
+        RichLabel,
+        {
+          icon,
+          label,
+          subtitle,
+          fullWidth: fullWidthLabel,
+          as: labelAs
+        }
+      ),
+      inline && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("es-uic-ml-auto es-uic-flex es-uic-items-center es-uic-gap-1", controlContainerClassName),
+          children
+        }
+      ),
+      !inline && actions && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1", !inline && "es-uic-ml-auto"), children: actions })
+    ] }),
+    !inline && Array.isArray(children) && children.filter(Boolean).length > 1 && /* @__PURE__ */ jsx("div", { className: clsx("es-uic-space-y-1", controlContainerClassName), children }),
     !inline && (!Array.isArray(children) || children.filter(Boolean).length < 2) && children,
     help && /* @__PURE__ */ jsx(
       $514c0188e459b4c0$export$5f1af8db9871e1d6,
       {
-        className: "es-uic-text-sm es-uic-text-gray-400",
+        className: "es-uic-inline-block es-uic-text-sm es-uic-text-gray-400",
         slot: "description",
         children: help
       }

package/dist/components/breakpoint-preview/breakpoint-preview.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { upperFirst } from "../../utilities/text-helpers.js";
 /**
  * Component that renders a preview of the breakpoints to help users visualize the options they set.
@@ -101,7 +101,7 @@ const BreakpointPreview = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classnames(
+      className: clsx(
         "es-uic-grid es-uic-w-fit es-uic-mx-auto es-uic-shrink-0 es-uic-auto-cols-auto es-uic-grid-rows-[auto,_auto] es-uic-gap-x-2 es-uic-gap-y-0.5"
       ),
       children: [
@@ -133,7 +133,7 @@ const BreakpointPreview = (props) => {
                 dotsStart2 && /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: classnames(
+                    className: clsx(
                       "es-uic-flex es-uic-gap-0.5",
                       active ? activeTextColor : "text-gray-300"
                     ),
@@ -148,7 +148,7 @@ const BreakpointPreview = (props) => {
                 /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: classnames(
+                    className: clsx(
                       "es-uic-grow es-uic-rounded",
                       active ? "es-uic-h-0.5" : "es-uic-h-px es-uic-bg-gray-300",
                       active && activeBgColor
@@ -159,7 +159,7 @@ const BreakpointPreview = (props) => {
                 dotsEnd2 && /* @__PURE__ */ jsxs(
                   "div",
                   {
-                    className: classnames(
+                    className: clsx(
                       "es-uic-flex es-uic-gap-0.5",
                       active ? activeTextColor : "es-uic-text-gray-300"
                     ),
@@ -175,7 +175,7 @@ const BreakpointPreview = (props) => {
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: classnames(
+                    className: clsx(
                       "es-uic-rounded es-uic-px-1 es-uic-py-0.5",
                       hasActive && active && "es-uic-text-white",
                       hasActive && active && activeBgColor,
@@ -189,7 +189,7 @@ const BreakpointPreview = (props) => {
                 value && /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: classnames(
+                    className: clsx(
                       "-es-uic-mt-0.5 es-uic-px-1",
                       active ? "es-uic-text-gray-400" : "es-uic-text-gray-400",
                       alignEnd && "es-uic-ml-auto"

package/dist/components/button/button.js

@@ -1,9 +1,10 @@
 import "react/jsx-runtime";
-import { B, a } from "../../button-BkkdyHfJ.js";
-import "../../utilities/classnames.js";
-import "../../tooltip-CkCndvTI.js";
-import "../../default-i18n-BhE-OUmt.js";
-import "../../utils-BsiH7-5Y.js";
+import "../../Button-eebLs4cp.js";
+import { B, a } from "../../button-idVI4jmd.js";
+import "../../lite-pbIeT7tm.js";
+import "../../tooltip-T6H9uF-Z.js";
+import "../../default-i18n-Bk1GxDHz.js";
+import "../../utils-DIBzm1e4.js";
 export {
   B as Button,
   a as ButtonGroup

package/dist/components/checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BLcVbhiO.js";
-import { classnames } from "../../utilities/classnames.js";
+import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BN0TEda-.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";
@@ -20,6 +20,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @param {string} [props.className] - Additional classes to add to the checkbox container.
  * @param {string} [props.labelClassName] - Additional classes to add to the label container.
  * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Checkbox component.
  *
@@ -46,8 +47,12 @@ const Checkbox = (props) => {
     labelClassName,
     alignEnd,
     children,
+    hidden,
     ...other
   } = props;
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     $bc237834342dbd75$export$48513f6b9f8ce62d,
     {
@@ -56,10 +61,7 @@ const Checkbox = (props) => {
       isReadOnly: readOnly,
       isSelected: checked ?? false,
       onChange,
-      className: classnames(
-        "es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-1.5 es-uic-text-sm",
-        className
-      ),
+      className: clsx("es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-1.5 es-uic-text-sm", className),
       ...other,
       children: ({ isIndeterminate, isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         (icon || alignEnd) && (label || subtitle) && /* @__PURE__ */ jsx(
@@ -75,7 +77,7 @@ const Checkbox = (props) => {
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classnames(
+            className: clsx(
               "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded-md es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
               isSelected ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
             ),

package/dist/components/color-pickers/color-picker.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 import { Menu, MenuSection, MenuItem } from "../menu/menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { icons } from "../../icons/icons.js";
 /**
  * Color picker.
@@ -14,7 +14,7 @@ import { icons } from "../../icons/icons.js";
  * @param {string} [props.icon] - Icon to display.
  * @param {string} [props.label] - Label to display.
  * @param {string} [props.subtitle] - Subtitle to display.
- * @param {string} [props.labelClassName] - Additional classnames passed to the label.
+ * @param {string} [props.labelClassName] - Additional clsx passed to the label.
  * @param {string} props.value - Selected value.
  * @param {Function} props.onChange - Function to run when the value changes.
  * @param {Object[]} props.colors - Colors to display.
@@ -25,10 +25,12 @@ import { icons } from "../../icons/icons.js";
  * @param {boolean} [props.noColorGroups] - If `true`, colors won't be grouped by shades.
  * @param {ColorPickerType} props.type - Type of the color picker. Affects the icon and tooltip.
  * @param {boolean} [props.clearable] - If `true`, the color can be deselected.
+ * @param {boolean} [props.stacked] - If `true`, the control is not rendered inline.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ColorPicker component.
  *
- * @typedef {'default' | 'fillColor' | 'textColor' | 'textHighlightColor'} ColorPickerType
+ * @typedef {'default' | 'fillColor' | 'textColor' | 'textHighlightColor' | 'listMarkerColor'} ColorPickerType
  *
  * @example
  * <ColorPicker
@@ -59,9 +61,14 @@ const ColorPicker = (props) => {
     showColorCode,
     noColorGroups,
     type = "default",
+    stacked,
     clearable,
+    hidden,
     ...rest
   } = props;
+  if (hidden) {
+    return null;
+  }
   const currentColor = (_a = colors == null ? void 0 : colors.find(({ slug }) => slug === value)) == null ? void 0 : _a.color;
   const colorSuffixRegex = /(?!^.+)(-?(?:50|100|200|300|400|500|600|700|800|900|950|10|20|30|40|50|60|70|80|90){1})$/gi;
   const hasColorGroups = !noColorGroups && (colors == null ? void 0 : colors.some(({ slug }) => colorSuffixRegex.test(slug)));
@@ -130,14 +137,21 @@ const ColorPicker = (props) => {
     }
   );
   let tooltipText;
-  if (!label && type === "default") {
+  let menuTriggerIcon;
+  if (type === "default") {
     tooltipText = __("Color", "eightshift-ui-components");
-  } else if (!label && type === "fillColor") {
+  } else if (type === "fillColor") {
     tooltipText = __("Fill color", "eightshift-ui-components");
-  } else if (!label && type === "textColor") {
+    menuTriggerIcon = icons.colorPickerFill;
+  } else if (type === "textColor") {
     tooltipText = __("Text color", "eightshift-ui-components");
-  } else if (!label && type === "textHighlightColor") {
+    menuTriggerIcon = icons.colorPickerText;
+  } else if (type === "textHighlightColor") {
     tooltipText = __("Text highlight color", "eightshift-ui-components");
+    menuTriggerIcon = icons.colorPickerTextHighlight;
+  } else if (type === "listMarkerColor") {
+    tooltipText = __("List marker color", "eightshift-ui-components");
+    menuTriggerIcon = icons.colorPickerListMarker;
   }
   return /* @__PURE__ */ jsx(
     BaseControl,
@@ -145,8 +159,8 @@ const ColorPicker = (props) => {
       icon,
       label,
       subtitle,
-      className: classnames("es-uic-w-full", labelClassName),
-      inline: true,
+      className: clsx("es-uic-w-full", labelClassName),
+      inline: !stacked,
       children: /* @__PURE__ */ jsxs(
         Menu,
         {
@@ -158,28 +172,8 @@ const ColorPicker = (props) => {
                 className: "!es-uic-size-6 !es-uic-shadow-none"
               }
             ),
-            !icon && type === "fillColor" && /* @__PURE__ */ jsxs("div", { className: "es-uic-relative es-uic-size-6 [&>svg]:es-uic-absolute [&>svg]:-es-uic-top-0.5 [&>svg]:es-uic-left-0.5 [&>svg]:es-uic-size-[1.125rem]", children: [
-              icons.fillColor,
-              /* @__PURE__ */ jsx(
-                ColorSwatch,
-                {
-                  color: currentColor,
-                  className: "es-uic-absolute -es-uic-bottom-0.5 es-uic-left-0 !es-uic-h-2 !es-uic-shadow-none"
-                }
-              )
-            ] }),
-            !icon && type === "textColor" && /* @__PURE__ */ jsxs("div", { className: "es-uic-relative es-uic-size-6 [&>svg]:es-uic-absolute [&>svg]:-es-uic-top-[0.25rem] [&>svg]:es-uic-left-0 [&>svg]:es-uic-size-6", children: [
-              icons.textAbc,
-              /* @__PURE__ */ jsx(
-                ColorSwatch,
-                {
-                  color: currentColor,
-                  className: "es-uic-absolute -es-uic-bottom-0.5 es-uic-left-0 !es-uic-h-2 !es-uic-shadow-none"
-                }
-              )
-            ] }),
-            !icon && type === "textHighlightColor" && /* @__PURE__ */ jsxs("div", { className: "es-uic-relative es-uic-size-6 [&>svg]:es-uic-absolute [&>svg]:-es-uic-top-[0.325rem] [&>svg]:es-uic-left-0 [&>svg]:es-uic-size-6", children: [
-              icons.titleGeneric,
+            !icon && type !== "default" && /* @__PURE__ */ jsxs("div", { className: "es-uic-relative es-uic-size-6 [&>svg]:es-uic-absolute [&>svg]:es-uic-inset-0 [&>svg]:es-uic-size-full", children: [
+              menuTriggerIcon,
               /* @__PURE__ */ jsx(
                 ColorSwatch,
                 {
@@ -190,10 +184,7 @@ const ColorPicker = (props) => {
             ] })
           ] }),
           keepOpen: true,
-          triggerProps: {
-            tooltip: tooltipText,
-            ...rest.triggerProps
-          },
+          tooltip: !label && tooltipText,
           ...rest,
           children: [
             (noColorGroups || !hasColorGroups) && colors.map((color) => /* @__PURE__ */ jsx(

package/dist/components/color-pickers/color-swatch.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Cmlex_kT.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-CUhoK9EN.js";
-import { classnames } from "../../utilities/classnames.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BrowHhTG.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../intlStrings-Ctkp0HDc.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 /**
  * A simple color/gradient swatch.
  *
@@ -10,7 +10,7 @@ import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
  * @param {Object} props - Component props.
  * @param {string} [props.color] - The color to display.
  * @param {string} [props.gradient] - The gradient to display.
- * @param {string} [props.className] - Additional classnames to apply.
+ * @param {string} [props.className] - Additional clsx to apply.
  * @param {string} [props.colorName] - The name of the color. Should be auto-generated for colors.
  *
  * @returns {JSX.Element} The ColorSwatch component.
@@ -46,7 +46,7 @@ const ColorSwatch = (props) => {
       style: {
         background: (color || gradient) && backgroundGradient
       },
-      className: () => classnames(
+      className: () => clsx(
         "es-uic-size-6 es-uic-rounded es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
         !color && !gradient && "es-uic-bg-white",
         className

package/dist/components/color-pickers/gradient-editor.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __, s as sprintf } from "../../default-i18n-BhE-OUmt.js";
+import { _ as __, s as sprintf } from "../../default-i18n-Bk1GxDHz.js";
 import { useMemo } from "react";
-import { a as ButtonGroup } from "../../button-BkkdyHfJ.js";
+import { a as ButtonGroup } from "../../button-idVI4jmd.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { Repeater } from "../repeater/repeater.js";
 import { RepeaterItem } from "../repeater/repeater-item.js";
@@ -9,13 +9,13 @@ import { icons } from "../../icons/icons.js";
 import { SolidColorPicker } from "./solid-color-picker.js";
 import { Slider } from "../slider/slider.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Cmlex_kT.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-BrowHhTG.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Spacer } from "../spacer/spacer.js";
 import { Toggle } from "../toggle/toggle.js";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 function c(e, o = ",") {
   let t = [], n = 0, i = 0;
   o = new RegExp(o);
@@ -200,6 +200,7 @@ const linearDirections = [
  * @param {Object} props - Component props.
  * @param {string} props.value - The gradient definition.
  * @param {Function} props.onChange - Function to run when the gradient changes.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The GradientEditor component.
  *
@@ -213,7 +214,7 @@ const linearDirections = [
  */
 const GradientEditor = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-  const { value, onChange } = props;
+  const { value, onChange, hidden } = props;
   const gradientData = useMemo(() => {
     if ((value == null ? void 0 : value.startsWith("radial-gradient")) || (value == null ? void 0 : value.startsWith("repeating-radial-gradient"))) {
       return K(value ?? "");
@@ -239,6 +240,9 @@ const GradientEditor = (props) => {
     () => getGradientResult(gradientData, gradientType),
     [gradientData, gradientType]
   );
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs("div", { className: "es-uic-w-full es-uic-space-y-2.5", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -295,7 +299,7 @@ const GradientEditor = (props) => {
             return /* @__PURE__ */ jsx(
               MenuItem,
               {
-                icon: /* @__PURE__ */ jsx("div", { className: classnames("es-uic-size-5 es-uic-from-gray-700 es-uic-to-gray-200 es-uic-rounded-sm", iconClass) }),
+                icon: /* @__PURE__ */ jsx("div", { className: clsx("es-uic-size-5 es-uic-from-gray-700 es-uic-to-gray-200 es-uic-rounded-sm", iconClass) }),
                 onClick: () => {
                   setGradientData({
                     ...gradientData,

package/dist/components/color-pickers/solid-color-picker.js

@@ -1,30 +1,30 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { forwardRef, useContext, createContext, useMemo, useRef, useState, useCallback } from "react";
 import { a as $4e85f108e88277b8$export$ebe63fadcdce34ed, b as $4e85f108e88277b8$export$44644b8a16031b5b, c as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-CrNYmadY.js";
-import { c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-BsiH7-5Y.js";
+import { c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-DIBzm1e4.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cc-4eouh.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, m as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, u as $c87311424ea30a05$export$a11b0059900ceec8 } from "../../focusSafely-C3K8zAKj.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-CUhoK9EN.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CRx_hYC4.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, m as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, u as $c87311424ea30a05$export$a11b0059900ceec8 } from "../../focusSafely-B0hyd-S4.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-Ctkp0HDc.js";
 import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-rWqELA8W.js";
-import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-BosCCRVE.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Dg62M_3P.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-Buc9YJcv.js";
-import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-5q1Gek1J.js";
-import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-Pyh2V4bY.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-jMy6xdVq.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-Prmz0h0A.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BYRI1Lfo.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-wtMA4667.js";
-import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-jsbb4ugq.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-BAPPNXic.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-BLU3uhSR.js";
-import { classnames } from "../../utilities/classnames.js";
+import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-BRZdHY-4.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-C7E5SkOi.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-aHn6-wRk.js";
+import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-CHfpEdlE.js";
+import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-C5U5N7uM.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BAcFg5GO.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-WsEL47qR.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BPJVSUyp.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ILxgMZy5.js";
+import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BJA4rmIo.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-CdYmOaXI.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-ZH2Qyyxh.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
-import { T as TriggeredPopover } from "../../popover-Dx3vKXUX.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { T as TriggeredPopover } from "../../popover-o2Q28Ljn.js";
 import { icons } from "../../icons/icons.js";
 import { Spacer } from "../spacer/spacer.js";
 const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /* @__PURE__ */ createContext(null);
@@ -1294,6 +1294,7 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef($1c
  * @param {Function} [props.onChangeEnd] - The change end handler.
  * @param {boolean} [props.allowTransparency=false] - Whether the color picker allows transparency.
  * @param {import('react-aria-components').ColorFormat} [props.outputFormat] - The output format. Default is 'hex' (or 'hexa' if `allowTransparency` is true).
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ButtonGroup component.
  *
@@ -1303,18 +1304,14 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef($1c
  * @preserve
  */
 const SolidColorPicker = (props) => {
-  const {
-    value: rawValue,
-    onChange,
-    disabled,
-    onChangeEnd,
-    allowTransparency = false,
-    outputFormat
-  } = props;
+  const { value: rawValue, onChange, disabled, onChangeEnd, allowTransparency = false, outputFormat, hidden } = props;
   const value = rawValue == null ? void 0 : rawValue.replace("transparent", "rgba(0, 0, 0, 0)");
   const defaultColor = $799cddbef784668f$export$6e865ea70d7724f("#00000000").toFormat(allowTransparency ? "hsla" : "hsl");
   const modifiedValue = value && (value == null ? void 0 : value.length) > 1 ? $799cddbef784668f$export$6e865ea70d7724f(value) : defaultColor;
   const [color, setColor] = useState(modifiedValue.toFormat(allowTransparency ? "hsla" : "hsl"));
+  if (hidden) {
+    return null;
+  }
   let handleChangeEnd;
   if (onChangeEnd) {
     handleChangeEnd = (color2) => {
@@ -1326,7 +1323,7 @@ const SolidColorPicker = (props) => {
     setColor(color2 ?? defaultColor);
     onChange(color2 == null ? void 0 : color2.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
   };
-  const valueInputClassName = classnames(
+  const valueInputClassName = clsx(
     "es-uic-h-8 es-uic-w-12 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-tabular-nums es-uic-text-sm es-uic-shadow-sm es-uic-transition es-uic-text-right selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
     "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
   );
@@ -1337,7 +1334,7 @@ const SolidColorPicker = (props) => {
         value: color,
         xChannel: "saturation",
         yChannel: "lightness",
-        className: classnames(
+        className: clsx(
           "es-uic-size-48 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-shadow-sm es-uic-transition",
           '[&:has(>_[data-focus-visible="true"])]:es-uic-ring [&:has(>_[data-focus-visible="true"])]:es-uic-ring-teal-500 [&:has(>_[data-focus-visible="true"])]:es-uic-ring-opacity-50',
           "disabled:!es-uic-bg-gradient-to-r disabled:es-uic-from-white disabled:es-uic-to-gray-100"
@@ -1348,7 +1345,7 @@ const SolidColorPicker = (props) => {
         children: /* @__PURE__ */ jsx(
           $e2b71ec1d6016406$export$a3cc47cee1c1ccc,
           {
-            className: classnames(
+            className: clsx(
               "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-shadow-[0_0_0_1px_black] es-uic-transition",
               "dragging:!-es-uic-translate-x-1/2 dragging:!-es-uic-translate-y-1/2 dragging:!es-uic-scale-110",
               "focus-visible:!-es-uic-translate-x-1/2 focus-visible:!-es-uic-translate-y-1/2 focus-visible:!es-uic-scale-125",
@@ -1368,7 +1365,7 @@ const SolidColorPicker = (props) => {
         children: /* @__PURE__ */ jsx(
           $6f909507e6374d18$export$105594979f116971,
           {
-            className: classnames(
+            className: clsx(
               "es-uic-h-7 es-uic-w-48 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
               '[&:has(>_[data-focus-visible="true"])]:es-uic-ring [&:has(>_[data-focus-visible="true"])]:es-uic-ring-teal-500 [&:has(>_[data-focus-visible="true"])]:es-uic-ring-opacity-50',
               "disabled:!es-uic-bg-gradient-to-r disabled:es-uic-from-white disabled:es-uic-to-gray-100"
@@ -1376,7 +1373,7 @@ const SolidColorPicker = (props) => {
             children: /* @__PURE__ */ jsx(
               $e2b71ec1d6016406$export$a3cc47cee1c1ccc,
               {
-                className: classnames(
+                className: clsx(
                   "es-uic-top-3.25",
                   "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-shadow-[0_0_0_1px_black] es-uic-transition",
                   "dragging:!-es-uic-translate-x-1/2 dragging:!-es-uic-translate-y-1/2 dragging:!es-uic-scale-110",
@@ -1399,7 +1396,7 @@ const SolidColorPicker = (props) => {
         children: /* @__PURE__ */ jsx(
           $6f909507e6374d18$export$105594979f116971,
           {
-            className: classnames(
+            className: clsx(
               "es-uic-h-7 es-uic-w-48 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
               '[&:has(>_[data-focus-visible="true"])]:es-uic-ring [&:has(>_[data-focus-visible="true"])]:es-uic-ring-teal-500 [&:has(>_[data-focus-visible="true"])]:es-uic-ring-opacity-50',
               "disabled:!es-uic-bg-gradient-to-r disabled:es-uic-from-white disabled:es-uic-to-gray-100"
@@ -1414,7 +1411,7 @@ const SolidColorPicker = (props) => {
             children: /* @__PURE__ */ jsx(
               $e2b71ec1d6016406$export$a3cc47cee1c1ccc,
               {
-                className: classnames(
+                className: clsx(
                   "es-uic-top-3.25",
                   "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-shadow-[0_0_0_1px_black] es-uic-transition",
                   "dragging:!-es-uic-translate-x-1/2 dragging:!-es-uic-translate-y-1/2 dragging:!es-uic-scale-110",
@@ -1438,8 +1435,8 @@ const SolidColorPicker = (props) => {
           children: /* @__PURE__ */ jsx(
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
-              className: classnames(
-                "es-uic-h-9 es-uic-w-20 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-tabular-nums es-uic-text-sm es-uic-shadow-sm es-uic-transition",
+              className: clsx(
+                "es-uic-h-9 es-uic-w-20 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-tabular-nums es-uic-shadow-sm es-uic-transition",
                 "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
               )
             }