@eightshift/ui-components 0.0.1

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

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-BM136LvS.js";
+import { classnames } from "../../utilities/classnames.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.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display in the label.
+ * @param {string} props.label - Label to display.
+ * @param {string} props.subtitle - Subtitle to display below the label.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {string} [props.help] - Help text to show below the component.
+ * @param {boolean} [props.inline] - If `true`, the component is displayed inline - icon/label/subtitle are on the left, the passed content is on the right. **Note:** not compatible with `actions`.
+ * @param {string} [props.className] - Classes to pass to the main element wrapper.
+ * @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.
+ *
+ * @returns {JSX.Element} The BaseControl component.
+ *
+ * @example
+ * <BaseControl label='My component' icon={icons.myIcon}>
+ * 	<div>Content</div>
+ * </BaseControl>
+ *
+ * @preserve
+ */
+const BaseControl = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    actions,
+    help,
+    children,
+    inline,
+    className,
+    controlContainerClassName,
+    fullWidthLabel,
+    labelAs
+  } = props;
+  if (!children) {
+    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 }),
+    !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",
+        slot: "description",
+        children: help
+      }
+    )
+  ] });
+};
+export {
+  BaseControl
+};

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

@@ -0,0 +1,218 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
+import { classnames } from "../../utilities/classnames.js";
+import { upperFirst } from "../../utilities/text-helpers.js";
+/**
+ * Component that renders a preview of the breakpoints to help users visualize the options they set.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {Object[]} [props.blocks] - Blocks to display.
+ * @param {string} [props.blocks[].width] - Current breakpoint width. Left-aligned with the block.
+ * @param {string} [props.blocks[].widthEnd] - Current breakpoint width. Right-aligned with the block.
+ * @param {string} [props.blocks[].breakpoint] - Breakpoint name.
+ * @param {string} [props.blocks[].value] - Current value at the breakpoint.
+ * @param {boolean} [props.blocks[].dotsStart=false] - If `true`, dots are displayed at the start of the block.
+ * @param {boolean} [props.blocks[].dotsEnd=false] - If `true`, dots are displayed at the end of the block.
+ * @param {boolean} [props.blocks[].active=false] - If `true`, the block is active.
+ * @param {boolean} [props.blocks[].alignEnd=false] - If `true`, the block is aligned to the end.
+ * @param {BreakpointColor} [props.blocks[].color] - Color of the block.
+ * @param {boolean} [props.dotsStart=false] - If `true`, dots are displayed at the start of the preview.
+ * @param {boolean} [props.dotsEnd=false] - If `true`, dots are displayed at the end of the preview.
+ *  *
+ * @returns {JSX.Element} The BreakpointPreview component.
+ *
+ * @typedef {'blue' | 'green' | 'yellow' | 'red' | 'indigo' | 'orange' | 'cyan' | 'teal' | 'fuchsia' | 'black' | 'default'} BreakpointColor
+ *
+ * @example
+ * <BreakpointPreview
+ * 		blocks={[
+ * 			{
+ * 				breakpoint: 'Mobile',
+ * 				widthEnd: '480px',
+ * 				value: 'Regular',
+ * 				dotsStart: true,
+ * 				alignEnd: true,
+ * 				active: true,
+ * 			},
+ * 			{
+ * 				breakpoint: 'Default',
+ * 				value: 'Small',
+ * 				dotsEnd: true,
+ * 			},
+ * 		]}
+ * />
+ *
+ * @preserve
+ */
+const BreakpointPreview = (props) => {
+  const { blocks: rawBlocks, dotsStart = false, dotsEnd = false } = props;
+  const blocks = rawBlocks.filter(Boolean);
+  if (!blocks || blocks.length < 1) {
+    return null;
+  }
+  const hasActive = (blocks == null ? void 0 : blocks.some(({ active }) => active)) ?? false;
+  const activeColors = {
+    blue: {
+      text: "es-uic-text-blue-500",
+      bg: "es-uic-bg-blue-500"
+    },
+    green: {
+      text: "es-uic-text-lime-500",
+      bg: "es-uic-bg-lime-500"
+    },
+    yellow: {
+      text: "es-uic-text-yellow-400",
+      bg: "es-uic-bg-yellow-400"
+    },
+    red: {
+      text: "es-uic-text-red-500",
+      bg: "es-uic-bg-red-500"
+    },
+    indigo: {
+      text: "es-uic-text-indigo-500",
+      bg: "es-uic-bg-indigo-500"
+    },
+    orange: {
+      text: "es-uic-text-orange-500",
+      bg: "es-uic-bg-orange-500"
+    },
+    cyan: {
+      text: "es-uic-text-cyan-500",
+      bg: "es-uic-bg-cyan-500"
+    },
+    teal: {
+      text: "es-uic-text-teal-500",
+      bg: "es-uic-bg-teal-500"
+    },
+    fuchsia: {
+      text: "es-uic-text-fuchsia-500",
+      bg: "es-uic-bg-fuchsia-500"
+    },
+    black: {
+      text: "es-uic-text-black",
+      bg: "es-uic-bg-black"
+    },
+    default: {
+      text: "es-uic-text-slate-600",
+      bg: "es-uic-bg-slate-600"
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(
+        "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: [
+        dotsStart && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-text-gray-400 es-uic-justify-self-end", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
+            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px es-uic-justify-self-end" })
+        ] }),
+        blocks.map(
+          ({
+            width,
+            widthEnd,
+            breakpoint,
+            value,
+            dotsStart: dotsStart2 = false,
+            dotsEnd: dotsEnd2 = false,
+            active = false,
+            alignEnd = false,
+            color
+          }, i) => {
+            var _a, _b;
+            const activeTextColor = ((_a = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _a.text) ?? activeColors.default.text;
+            const activeBgColor = ((_b = activeColors == null ? void 0 : activeColors[color]) == null ? void 0 : _b.bg) ?? activeColors.default.bg;
+            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-min-w-28 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: [
+                dotsStart2 && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: classnames(
+                      "es-uic-flex es-uic-gap-0.5",
+                      active ? activeTextColor : "text-gray-300"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+                    ]
+                  }
+                ),
+                width && /* @__PURE__ */ jsx("span", { children: width }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classnames(
+                      "es-uic-grow es-uic-rounded",
+                      active ? "es-uic-h-0.5" : "es-uic-h-px es-uic-bg-gray-300",
+                      active && activeBgColor
+                    )
+                  }
+                ),
+                widthEnd && /* @__PURE__ */ jsx("span", { children: widthEnd }),
+                dotsEnd2 && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: classnames(
+                      "es-uic-flex es-uic-gap-0.5",
+                      active ? activeTextColor : "es-uic-text-gray-300"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+                      /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "es-uic-row-start-2 es-uic-flex es-uic-w-full es-uic-min-w-28 es-uic-flex-col es-uic-items-start es-uic-gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classnames(
+                      "es-uic-rounded es-uic-px-1 es-uic-py-0.5",
+                      hasActive && active && "es-uic-text-white",
+                      hasActive && active && activeBgColor,
+                      hasActive && !active && "es-uic-bg-gray-200 es-uic-text-gray-500",
+                      !hasActive && "es-uic-bg-gray-600 es-uic-text-white",
+                      alignEnd && "es-uic-ml-auto"
+                    ),
+                    children: upperFirst(breakpoint)
+                  }
+                ),
+                value && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classnames(
+                      "-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"
+                    ),
+                    children: value
+                  }
+                )
+              ] })
+            ] }, i);
+          }
+        ),
+        dotsEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-1 es-uic-flex es-uic-shrink-0 -es-uic-translate-x-1 es-uic-items-center es-uic-gap-1 es-uic-font-mono es-uic-font-medium es-uic-text-gray-400", children: /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-text-gray-300", children: [
+            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" }),
+            /* @__PURE__ */ jsx("div", { className: "es-uic-size-0.5 es-uic-rounded es-uic-bg-current" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "es-uic-row-start-2 es-uic-size-px" })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  BreakpointPreview
+};

package/dist/components/button/button.js

@@ -0,0 +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";
+export {
+  B as Button,
+  a as ButtonGroup
+};

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { $ as $bc237834342dbd75$export$48513f6b9f8ce62d } from "../../Checkbox-BLcVbhiO.js";
+import { classnames } from "../../utilities/classnames.js";
+import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
+import { icons } from "../../icons/icons.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+/**
+ * A simple checkbox.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - The checkbox icon.
+ * @param {string} [props.label] - The checkbox label.
+ * @param {string} [props.subtitle] - The checkbox subtitle.
+ * @param {boolean} props.checked - Whether the checkbox is checked.
+ * @param {boolean} [props.disabled] - Whether the checkbox is disabled.
+ * @param {boolean} [props.readOnly] - Whether the checkbox is read-only.
+ * @param {boolean} [props.indeterminate] - Whether the checkbox is in an indeterminate state.
+ * @param {Function} props.onChange - The function to call when the checkbox is changed.
+ * @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.
+ *
+ * @returns {JSX.Element} The Checkbox component.
+ *
+ * @example
+ * <Checkbox
+ *  label='My label'
+ *  checked={myValue}
+ *  onChange={(value) => setMyValue(value)}
+ * />
+ *
+ * @preserve
+ */
+const Checkbox = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    checked,
+    disabled,
+    readOnly,
+    indeterminate,
+    onChange,
+    className,
+    labelClassName,
+    alignEnd,
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    $bc237834342dbd75$export$48513f6b9f8ce62d,
+    {
+      isDisabled: disabled,
+      isIndeterminate: indeterminate,
+      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
+      ),
+      ...other,
+      children: ({ isIndeterminate, isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        (icon || alignEnd) && (label || subtitle) && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon,
+            label,
+            subtitle,
+            className: labelClassName,
+            fullWidth: true
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classnames(
+              "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"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  transition: "scaleRotateFade",
+                  visible: isIndeterminate,
+                  children: /* @__PURE__ */ jsx("div", { className: "es-uic-h-[1.5px] es-uic-w-3 es-uic-rounded es-uic-bg-white" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  transition: "scaleRotateFade",
+                  visible: !isIndeterminate && isSelected,
+                  className: "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-2",
+                  noInitial: true,
+                  children: icons.check
+                }
+              )
+            ]
+          }
+        ),
+        !icon && !alignEnd && (label || subtitle) && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            label,
+            subtitle,
+            className: labelClassName
+          }
+        ),
+        !(icon || label || subtitle) && children
+      ] })
+    }
+  );
+};
+export {
+  Checkbox
+};

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

@@ -0,0 +1,242 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { _ as __ } from "../../default-i18n-BhE-OUmt.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 { icons } from "../../icons/icons.js";
+/**
+ * Color picker.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @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.value - Selected value.
+ * @param {Function} props.onChange - Function to run when the value changes.
+ * @param {Object[]} props.colors - Colors to display.
+ * @param {string} props.colors[].name - Color name.
+ * @param {string} props.colors[].slug - Color slug.
+ * @param {string} props.colors[].color - Color value (HEX, RGB, HSL, HSB).
+ * @param {boolean} [props.showColorCode] - If `true`, the HEX color code is shown below the color name.
+ * @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.
+ *
+ * @returns {JSX.Element} The ColorPicker component.
+ *
+ * @typedef {'default' | 'fillColor' | 'textColor' | 'textHighlightColor'} ColorPickerType
+ *
+ * @example
+ * <ColorPicker
+ * 	icon={icons.fillColor}
+ * 	label={__('Fill color', 'eightshift-ui-components')}
+ * 	subtitle={__('Select fill color', 'eightshift-ui-components')}
+ * 	value={fillColor}
+ * 	onChange={(value) => setAttributes({ fillColor: value })}
+ * 	colors={[
+ * 		{ name: 'Red', slug: 'red', color: '#ff0000' },
+ * 		{ name: 'Green', slug: 'green', color: '#00ff00' },
+ * 		{ name: 'Blue', slug: 'blue', color: '#0000ff' },
+ * 	]}
+ * />
+ *
+ * @preserve
+ */
+const ColorPicker = (props) => {
+  var _a;
+  const {
+    icon,
+    label,
+    subtitle,
+    labelClassName,
+    value,
+    onChange,
+    colors,
+    showColorCode,
+    noColorGroups,
+    type = "default",
+    clearable,
+    ...rest
+  } = props;
+  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)));
+  let groupedColors;
+  const colorGroupNames = {
+    generic: __("Other colors", "eightshift-ui-components")
+  };
+  if (hasColorGroups) {
+    groupedColors = colors.reduce(
+      (output, current) => {
+        var _a2;
+        if (current === void 0 || (current == null ? void 0 : current.name) === void 0 || (current == null ? void 0 : current.slug) === void 0) {
+          return output;
+        }
+        if ((_a2 = current.slug.match(colorSuffixRegex)) == null ? void 0 : _a2.length) {
+          const newSlug = current.slug.replace(colorSuffixRegex, "").trim();
+          if (!output[newSlug]) {
+            output[newSlug] = [];
+            colorGroupNames[newSlug] = current.name.replace(colorSuffixRegex, "").trim();
+          }
+          output[newSlug] = [
+            ...output[newSlug],
+            {
+              ...current,
+              shade: current.slug.match(colorSuffixRegex)[0].replace("-", "")
+            }
+          ];
+        } else {
+          output.generic = [...output.generic, current];
+        }
+        return output;
+      },
+      { generic: [] }
+    );
+  }
+  const SingleItem = ({ name, slug, color, ...rest2 }) => /* @__PURE__ */ jsxs(
+    MenuItem,
+    {
+      ...rest2,
+      endIcon: /* @__PURE__ */ jsx(
+        ColorSwatch,
+        {
+          className: "!es-uic-size-5.5",
+          color
+        }
+      ),
+      onClick: () => {
+        if (clearable && value === slug) {
+          onChange(void 0);
+          return;
+        }
+        onChange(slug);
+      },
+      checked: clearable ? value === slug : null,
+      selected: !clearable ? value === slug : null,
+      children: [
+        !showColorCode && name,
+        showColorCode && /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            label: name,
+            subtitle: color.toUpperCase()
+          }
+        )
+      ]
+    }
+  );
+  let tooltipText;
+  if (!label && type === "default") {
+    tooltipText = __("Color", "eightshift-ui-components");
+  } else if (!label && type === "fillColor") {
+    tooltipText = __("Fill color", "eightshift-ui-components");
+  } else if (!label && type === "textColor") {
+    tooltipText = __("Text color", "eightshift-ui-components");
+  } else if (!label && type === "textHighlightColor") {
+    tooltipText = __("Text highlight color", "eightshift-ui-components");
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      className: classnames("es-uic-w-full", labelClassName),
+      inline: true,
+      children: /* @__PURE__ */ jsxs(
+        Menu,
+        {
+          triggerIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
+            (type === "default" || icon) && /* @__PURE__ */ jsx(
+              ColorSwatch,
+              {
+                color: currentColor,
+                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,
+              /* @__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"
+                }
+              )
+            ] })
+          ] }),
+          keepOpen: true,
+          triggerProps: {
+            tooltip: tooltipText,
+            ...rest.triggerProps
+          },
+          ...rest,
+          children: [
+            (noColorGroups || !hasColorGroups) && colors.map((color) => /* @__PURE__ */ jsx(
+              SingleItem,
+              {
+                ...color
+              },
+              color.slug
+            )),
+            hasColorGroups && /* @__PURE__ */ jsxs(Fragment, { children: [
+              Object.entries(groupedColors).map(([groupSlug, colors2]) => {
+                if (groupSlug === "generic") {
+                  return null;
+                }
+                return /* @__PURE__ */ jsx(
+                  MenuSection,
+                  {
+                    label: colorGroupNames[groupSlug],
+                    children: colors2.map((color) => /* @__PURE__ */ jsx(
+                      SingleItem,
+                      {
+                        ...color
+                      },
+                      color.slug
+                    ))
+                  },
+                  groupSlug
+                );
+              }),
+              groupedColors.generic.length > 0 && /* @__PURE__ */ jsx(MenuSection, { "aria-label": colorGroupNames.generic, children: groupedColors.generic.map((color) => /* @__PURE__ */ jsx(
+                SingleItem,
+                {
+                  ...color
+                },
+                color.slug
+              )) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ColorPicker
+};