@eightshift/ui-components 1.9.1 → 2.0.0

package/dist/components/button/button.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BEIi9mB_.js";
-import { l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-BmaSD6gC.js";
-import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-7r2_SUa9.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-OQ5EIPvt.js";
+import { l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-39D0mStj.js";
+import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-Cs5_OoeA.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useState, useRef, forwardRef, createContext } from "react";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DtrQ3I5U.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-CDOs-GuR.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as cva } from "../../index-CcCn9HWX.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
@@ -65,7 +66,7 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   };
 }
 const $13c3c67164f4d5be$export$6311e7ab80ef752f = /* @__PURE__ */ createContext({});
-function $13c3c67164f4d5be$var$Toolbar(props, ref) {
+const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef(function Toolbar(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $13c3c67164f4d5be$export$6311e7ab80ef752f);
   let { toolbarProps } = $2680b1829e803644$export$fa142eb1681c520(props, ref);
   let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
@@ -84,8 +85,7 @@ function $13c3c67164f4d5be$var$Toolbar(props, ref) {
     slot: props.slot || void 0,
     "data-orientation": props.orientation || "horizontal"
   }, renderProps.children);
-}
-const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef($13c3c67164f4d5be$var$Toolbar);
+});
 /**
  * A simple button component.
  *
@@ -106,7 +106,7 @@ const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef($13
  * @returns {JSX.Element} The Button component.
  *
  * @typedef {'small' | 'default' | 'large'} ButtonSize
- * @typedef {'default' | 'selected' | 'ghost' | 'danger'} ButtonType
+ * @typedef {'default' | 'selected' | 'ghost' | 'danger' | 'dangerGhost'} ButtonType
  *
  * @example
  * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon} />
@@ -116,7 +116,6 @@ const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef($13
  * @preserve
  */
 const Button = (props) => {
-  var _a, _b, _c, _d;
   const {
     children,
     icon,
@@ -141,84 +140,178 @@ const Button = (props) => {
   if (hidden) {
     return null;
   }
-  const sizes = {
-    small: {
-      iconButton: "es-uic-size-7",
-      button: "es-uic-h-7 es-uic-min-w-7",
-      iconButtonPadding: "es-uic-px-1",
-      buttonPadding: "es-uic-px-2",
-      iconSize: "[&>svg]:es-uic-size-4.5"
-    },
-    default: {
-      iconButton: "es-uic-size-9",
-      button: "es-uic-h-9 es-uic-min-w-9",
-      iconButtonPadding: "es-uic-px-1.5",
-      buttonPadding: "es-uic-px-2",
-      iconSize: "[&>svg]:es-uic-size-5.5"
-    },
-    large: {
-      iconButton: "es-uic-size-10",
-      button: "es-uic-h-10 es-uic-min-w-10",
-      iconButtonPadding: "es-uic-px-2",
-      buttonPadding: "es-uic-px-4",
-      iconSize: "[&>svg]:es-uic-size-6"
-    }
-  };
-  const themes = {
-    default: {
-      regular: "es-uic-text-gray-700 es-uic-shadow-sm es-uic-border es-uic-border-gray-300 es-uic-bg-white",
-      hover: "hover:es-uic-border-gray-300 hover:es-uic-bg-gray-100",
-      disabled: "disabled:es-uic-border-gray-300 disabled:es-uic-bg-gray-50/50 disabled:es-uic-text-gray-300 es-uic-border",
-      focus: "focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50"
-    },
-    selected: {
-      regular: "es-uic-bg-teal-600 es-uic-text-white es-uic-border-teal-600 after:es-uic-opacity-45 es-uic-border es-uic-shadow-md es-uic-shadow-teal-500/25",
-      hover: "hover:es-uic-shadow-teal-600/50 hover:after:es-uic-opacity-60"
-    },
-    ghost: {
-      regular: "es-uic-border-transparent es-uic-text-gray-700",
-      hover: "hover:es-uic-bg-gray-100",
-      disabled: "disabled:es-uic-text-gray-300 disabled:es-uic-border-transparent"
-    },
-    danger: {
-      regular: "es-uic-border-red-300 es-uic-text-gray-700 es-uic-text-gray-900 es-uic-shadow-red-300/30 [&>svg]:es-uic-text-red-500 es-uic-shadow-sm es-uic-border",
-      hover: "hover:es-uic-border-red-400 hover:es-uic-bg-red-50 hover:es-uic-text-red-500 hover:es-uic-shadow-red-300/75",
-      focus: "focus-visible:es-uic-ring-red-500 focus-visible:es-uic-ring-opacity-50"
+  const componentClasses = cva(
+    [
+      "es:flex es:items-center es:gap-1",
+      "es:transition es:duration-300 es:border es:text-sm",
+      "es:any-focus:outline-hidden es:focus-visible:z-10",
+      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+      "es:focus-visible:border-accent-500",
+      "es:btn-group-mid:rounded-none",
+      "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
+      "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
+      "es:cursor-pointer",
+      "es:shrink-0",
+      icon && children ? "es:justify-start" : "es:justify-center",
+      className
+    ],
+    {
+      variants: {
+        size: {
+          small: "es:icon:size-4.5 es:rounded-md",
+          default: "es:icon:size-5.5 es:rounded-lg",
+          large: "es:icon:size-6 es:rounded-lg"
+        },
+        type: {
+          default: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
+          selected: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
+          danger: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
+          ghost: ["es:border-transparent es:text-secondary-700", "es:hover:bg-secondary-100", "es:disabled:border-transparent!"],
+          dangerGhost: [
+            "es:border-transparent es:text-red-600",
+            "es:hover:bg-red-500/5",
+            "es:focus-visible:text-red-700",
+            "es:focus-visible:ring-red-500/30 es:focus-visible:border-red-600 es:focus-visible:inset-ring-red-100",
+            "es:disabled:border-transparent!"
+          ]
+        }
+      },
+      compoundVariants: [
+        // Styles.
+        {
+          type: "default",
+          disabled: false,
+          class: [
+            "es:text-black",
+            "es:from-secondary-50 es:to-white",
+            "es:border-secondary-300",
+            "es:inset-ring-secondary-100",
+            "es:inset-shadow-secondary-100/50",
+            "es:shadow-xs",
+            "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+            "es:hover:text-accent-950",
+            "es:focus-visible:text-accent-950"
+          ]
+        },
+        {
+          type: "selected",
+          disabled: false,
+          class: [
+            "es:text-white",
+            "es:from-accent-500 es:to-accent-600",
+            "es:border-accent-700",
+            "es:inset-ring es:inset-ring-accent-600",
+            "es:inset-shadow-xs es:inset-shadow-accent-400/75",
+            "es:focus-visible:border-accent-700",
+            "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
+            "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
+            "es:shadow es:shadow-accent-600/30"
+          ]
+        },
+        {
+          type: "danger",
+          disabled: false,
+          class: [
+            "es:text-red-800",
+            "es:from-red-50/75 es:to-white",
+            "es:border-red-600/50",
+            "es:inset-ring-red-100",
+            "es:inset-shadow-red-50",
+            "es:hover:inset-shadow-red-100 es:hover:inset-ring-red-100 es:hover:text-red-800 es:hover:border-red-600",
+            "es:focus-visible:text-red-900",
+            "es:focus-visible:ring-red-500/30 es:focus-visible:border-red-600 es:focus-visible:inset-ring-red-100",
+            "es:shadow"
+          ]
+        },
+        {
+          disabled: true,
+          class: "es:disabled:border-zinc-300 es:disabled:text-zinc-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
+        },
+        // Sizes.
+        {
+          size: "small",
+          iconOnly: false,
+          class: "es:h-7 es:min-w-7"
+        },
+        {
+          size: "small",
+          iconOnly: true,
+          class: "es:size-7"
+        },
+        {
+          size: "small",
+          hasIcon: false,
+          iconOnly: false,
+          class: "es:px-2"
+        },
+        {
+          size: "small",
+          hasIcon: true,
+          iconOnly: false,
+          class: "es:px-1"
+        },
+        {
+          size: "default",
+          iconOnly: false,
+          class: "es:h-9 es:min-w-9"
+        },
+        {
+          size: "default",
+          iconOnly: true,
+          class: "es:size-9"
+        },
+        {
+          size: "default",
+          hasIcon: false,
+          iconOnly: false,
+          class: "es:px-2"
+        },
+        {
+          size: "default",
+          hasIcon: true,
+          iconOnly: false,
+          class: "es:px-1.5"
+        },
+        {
+          size: "large",
+          iconOnly: false,
+          class: "es:h-10 es:min-w-10"
+        },
+        {
+          size: "large",
+          iconOnly: true,
+          class: "es:size-10"
+        },
+        {
+          size: "large",
+          hasIcon: false,
+          iconOnly: false,
+          class: "es:px-4"
+        },
+        {
+          size: "large",
+          hasIcon: true,
+          iconOnly: false,
+          class: "es:px-2"
+        }
+      ],
+      defaultVariants: {
+        disabled: false
+      }
     }
-  };
+  );
   const component = /* @__PURE__ */ jsxs(
     $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
     {
       onPress,
       isDisabled: disabled,
-      className: clsx(
-        "es-uic-flex es-uic-items-center es-uic-gap-1 es-uic-rounded-md es-uic-transition es-uic-duration-300",
-        icon && children && "es-uic-justify-start",
-        icon && !children && "es-uic-justify-center",
-        !icon && children && "es-uic-justify-center",
-        !disabled && (((_a = themes[type]) == null ? void 0 : _a.regular) ?? themes.default.regular),
-        !disabled && (((_b = themes[type]) == null ? void 0 : _b.hover) ?? themes.default.hover),
-        "disabled:es-uic-shadow-none",
-        disabled && (((_c = themes[type]) == null ? void 0 : _c.disabled) ?? themes.default.disabled),
-        "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring",
-        ((_d = themes[type]) == null ? void 0 : _d.focus) ?? themes.default.focus,
-        icon && !children && sizes[size].iconButton,
-        children && "es-uic-text-sm",
-        children && sizes[size].button,
-        children && icon && sizes[size].iconButtonPadding,
-        children && !icon && sizes[size].buttonPadding,
-        "[.es-uic-button-group-h_&:not(:first-child)]:es-uic-rounded-l-none [.es-uic-button-group-h_&:not(:last-child)]:-es-uic-mr-px [.es-uic-button-group-h_&:not(:last-child)]:es-uic-rounded-r-none",
-        "[.es-uic-button-group-h_div:not(:first-child)_>_&]:es-uic-rounded-l-none [.es-uic-button-group-h_div:not(:last-child)_>_&]:-es-uic-mr-px [.es-uic-button-group-h_div:not(:last-child)_>_&]:es-uic-rounded-r-none",
-        sizes[size].iconSize,
-        type === "selected" && 'es-uic-relative es-uic-isolate after:es-uic-absolute after:es-uic-inset-0 after:-es-uic-z-10 after:es-uic-rounded-[0.3125rem] after:es-uic-bg-gradient-to-br after:es-uic-from-teal-100/40 after:es-uic-via-transparent after:es-uic-to-teal-200/50 after:es-uic-opacity-0 after:es-uic-transition-opacity after:es-uic-content-[""]',
-        type === "selected" && "[.es-uic-button-group-h_&:not(:first-child)]:after:es-uic-rounded-l-none [.es-uic-button-group-h_&:not(:last-child)]:after:es-uic-rounded-r-none",
-        type === "selected" && "[.es-uic-button-group-h_div:not(:first-child)_>_&]:after:es-uic-rounded-l-none [.es-uic-button-group-h_div:not(:last-child)_>_&]:after:es-uic-rounded-r-none",
-        "[.es-uic-button-group-v_&:not(:first-child)]:es-uic-rounded-t-none [.es-uic-button-group-v_&:not(:last-child)]:-es-uic-mb-px [.es-uic-button-group-v_&:not(:last-child)]:es-uic-rounded-b-none",
-        "[.es-uic-button-group-v_div:not(:first-child)_>_&]:es-uic-rounded-t-none [.es-uic-button-group-v_div:not(:last-child)_>_&]:-es-uic-mb-px [.es-uic-button-group-v_div:not(:last-child)_>_&]:es-uic-rounded-b-none",
-        type === "selected" && "[.es-uic-button-group-v_&:not(:first-child)]:after:es-uic-rounded-t-none [.es-uic-button-group-v_&:not(:last-child)]:after:es-uic-rounded-b-none",
-        type === "selected" && "[.es-uic-button-group-v_div:not(:first-child)_>_&]:after:es-uic-rounded-t-none [.es-uic-button-group-v_div:not(:last-child)_>_&]:after:es-uic-rounded-b-none",
-        className
-      ),
+      className: componentClasses({
+        disabled,
+        hasIcon: Boolean(icon),
+        iconOnly: Boolean(icon && !children),
+        size,
+        type
+      }),
       ref: objRef,
       "aria-label": ariaLabel,
       ...other,
@@ -250,27 +343,38 @@ const Button = (props) => {
  * @param {Object} props - Component props.
  * @param {string} [props.className] - Classes to pass to the button group container.
  * @param {boolean} [props.vertical] - If `true`, the buttons are displayed vertically.
+ * @param {ButtonGroupType} [props.type='segmented'] - The way the button group is laid out.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ButtonGroup component.
  *
+ * @typedef {'segmented' | 'split'} ButtonGroupType
+ *
  * @example
  * <ButtonGroup>
- * 	<Button ... />
- * 	<Button ... />
- * 	<Button ... />
+ *     <Button />
+ *     <Button />
+ *     <Button />
  * </ButtonGroup>
  *
  * @preserve
  */
-const ButtonGroup = ({ children, className, vertical, hidden, ...rest }) => {
+const ButtonGroup = ({ children, className, vertical, hidden, type = "segmented", ...rest }) => {
   if (hidden) {
     return null;
   }
   return /* @__PURE__ */ jsx(
     $13c3c67164f4d5be$export$4c260019440d418f,
     {
-      className: clsx("es-uic-flex", vertical ? "es-uic-button-group-v es-uic-flex-col" : "es-uic-button-group-h", className),
+      className: clsx(
+        "es:flex",
+        vertical && "es:flex-col",
+        type === "segmented" && vertical && "es-button-group-v es:-space-y-px!",
+        type === "segmented" && !vertical && "es-button-group-h es:-space-x-px!",
+        type === "split" && vertical && "es:space-y-1",
+        type === "split" && !vertical && "es:space-x-1.5",
+        className
+      ),
       orientation: vertical ? "vertical" : "horizontal",
       ...rest,
       children

package/dist/components/checkbox/checkbox.js

@@ -1,16 +1,16 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { a as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-2lR5GG9p.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, m as $df56164dff5785e2$export$4338b53315abf666, n as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-BmaSD6gC.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, m as $df56164dff5785e2$export$4338b53315abf666, n as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-39D0mStj.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useEffect, useRef, forwardRef, useContext, createContext } from "react";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-BxnASugK.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DZ9pn6Jl.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-Dq9VpeCd.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DA_b3LG_.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Dbj6MsFR.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-ChK5oW-0.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-D0lsNfi4.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-BWwmZQE2.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-rg_OQIGW.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-DzlgBLAJ.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DhSBQxkp.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-ClTQo25k.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";
@@ -115,7 +115,7 @@ function $fba3e38d5ca8983f$export$353b32fc6898d37d(props, state, inputRef) {
   };
 }
 const $bc237834342dbd75$export$139c5b8563afc1fc = /* @__PURE__ */ createContext(null);
-function $bc237834342dbd75$var$Checkbox(props, ref) {
+const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef(function Checkbox(props, ref) {
   let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $4e85f108e88277b8$export$b085522c77523c51);
   let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
@@ -180,8 +180,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
     ref: inputRef
   })), renderProps.children);
-}
-const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef($bc237834342dbd75$var$Checkbox);
+});
 /**
  * A simple checkbox.
  *
@@ -198,6 +197,7 @@ const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef($bc
  * @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.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Checkbox component.
@@ -211,7 +211,7 @@ const $bc237834342dbd75$export$48513f6b9f8ce62d = /* @__PURE__ */ forwardRef($bc
  *
  * @preserve
  */
-const Checkbox = (props) => {
+const Checkbox2 = (props) => {
   const {
     icon,
     label,
@@ -223,6 +223,7 @@ const Checkbox = (props) => {
     onChange,
     className,
     labelClassName,
+    inlineSubtitle,
     alignEnd,
     children,
     hidden,
@@ -231,7 +232,8 @@ const Checkbox = (props) => {
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  const selectedOrIntermediate = checked || indeterminate;
+  return /* @__PURE__ */ jsxs(
     $bc237834342dbd75$export$48513f6b9f8ce62d,
     {
       isDisabled: disabled,
@@ -239,16 +241,18 @@ const Checkbox = (props) => {
       isReadOnly: readOnly,
       isSelected: checked ?? false,
       onChange,
-      className: clsx("es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-1.5 es-uic-text-sm", className),
+      className: clsx("es:group es:flex es:w-full es:items-center es:gap-1.5 es:text-sm", className),
       ...other,
-      children: ({ isIndeterminate, isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: [
         (icon || alignEnd) && (label || subtitle) && /* @__PURE__ */ jsx(
           RichLabel,
           {
             icon,
             label,
             subtitle,
-            className: labelClassName,
+            className: clsx("es:ml-1", labelClassName),
+            inlineSubtitle,
+            fullSizeSubtitle: true,
             fullWidth: true
           }
         ),
@@ -256,25 +260,36 @@ const Checkbox = (props) => {
           "div",
           {
             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 || indeterminate ? "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white" : "es-uic-border-gray-300"
+              "es:size-5 es:flex es:items-center es:justify-center",
+              "es:transition es:cursor-pointer",
+              "es:bg-radial es:border es:rounded-md",
+              "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+              "es:any-focus:outline-hidden es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
+              !selectedOrIntermediate && "es:group-focus-visible:border-accent-500",
+              !selectedOrIntermediate && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
+              !selectedOrIntermediate && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
+              !selectedOrIntermediate && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+              selectedOrIntermediate && "es:text-white es:from-accent-500 es:to-accent-600",
+              selectedOrIntermediate && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
+              selectedOrIntermediate && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
+              !alignEnd && subtitle && "es:mb-auto"
             ),
             children: [
               /* @__PURE__ */ jsx(
                 AnimatedVisibility,
                 {
                   transition: "scaleFade",
-                  visible: isIndeterminate,
-                  className: "es-uic-transition-none",
-                  children: /* @__PURE__ */ jsx("div", { className: "es-uic-h-0.5 es-uic-w-3 es-uic-rounded es-uic-bg-white" })
+                  visible: indeterminate,
+                  className: "es:transition-none",
+                  children: /* @__PURE__ */ jsx("div", { className: "es:h-0.5 es:w-3 es:rounded es:bg-white" })
                 }
               ),
               /* @__PURE__ */ jsx(
                 AnimatedVisibility,
                 {
                   transition: "scaleRotateFade",
-                  visible: !isIndeterminate && isSelected,
-                  className: "es-uic-transition-none [&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-[3]",
+                  visible: !indeterminate && checked,
+                  className: "es:transition-none es:icon:size-3 es:icon:stroke-3",
                   noInitial: true,
                   children: icons.check
                 }
@@ -287,14 +302,16 @@ const Checkbox = (props) => {
           {
             label,
             subtitle,
-            className: labelClassName
+            className: clsx(subtitle && "es:mt-0.5", "es:ml-0.5 es:*:space-y-0.5", labelClassName),
+            inlineSubtitle,
+            fullSizeSubtitle: true
           }
         ),
         !(icon || label || subtitle) && children
-      ] })
+      ]
     }
   );
 };
 export {
-  Checkbox
+  Checkbox2 as Checkbox
 };

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

@@ -29,6 +29,7 @@ import { icons } from "../../icons/icons.js";
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  * @param {string} [props.tooltip] - If provided, overrides the default tooltip text. If there is no label, the value will still be shown within the tooltip.
  * @param {string} [props.clearItemLabel] - Label for the "None" item, if `clearable` is enabled.
+ * @param {JSX.Element|JSX.Element[]} [props.extraOptions] - If `type` is `menu`, allows passing additional menu items, which will be displayed below the options.
  *
  * @returns {JSX.Element} The ColorPicker component.
  *
@@ -68,6 +69,7 @@ const ColorPicker = (props) => {
     clearItemLabel = __("None", "eightshift-ui-components"),
     hidden,
     tooltip,
+    extraOptions,
     ...rest
   } = props;
   if (hidden) {
@@ -115,18 +117,18 @@ const ColorPicker = (props) => {
       endIcon: /* @__PURE__ */ jsx(
         ColorSwatch,
         {
-          className: "!es-uic-size-5.5",
+          className: "es:size-5.5!",
           color
         }
       ),
       onClick: () => onChange(slug),
       selected: value === slug,
       children: [
-        !showColorCode && name,
+        !showColorCode && name.replaceAll("-", " "),
         showColorCode && /* @__PURE__ */ jsx(
           RichLabel,
           {
-            label: name,
+            label: name.replaceAll("-", " "),
             subtitle: color.toUpperCase()
           }
         )
@@ -178,7 +180,7 @@ const ColorPicker = (props) => {
       icon,
       label,
       subtitle,
-      className: clsx("es-uic-w-full", labelClassName),
+      className: clsx("es:w-full", labelClassName),
       inline: !stacked,
       children: /* @__PURE__ */ jsxs(
         Menu,
@@ -188,16 +190,16 @@ const ColorPicker = (props) => {
               ColorSwatch,
               {
                 color: currentColor,
-                className: "!es-uic-size-6 !es-uic-shadow-none"
+                className: "es:size-6! es:shadow-none!"
               }
             ),
-            !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: [
+            !icon && type !== "default" && /* @__PURE__ */ jsxs("div", { className: "es:relative es:size-6 es:icon:absolute es:icon:inset-0 es:icon:size-full", children: [
               menuTriggerIcon,
               /* @__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"
+                  className: "es:absolute es:-bottom-0.5 es:left-0 es:h-2! es:shadow-none!"
                 }
               )
             ] })
@@ -216,7 +218,7 @@ const ColorPicker = (props) => {
                 {
                   onClick: () => onChange(void 0),
                   selected: typeof value === "undefined",
-                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "!es-uic-size-5.5" }),
+                  endIcon: /* @__PURE__ */ jsx(ColorSwatch, { className: "es:size-5.5!" }),
                   children: clearItemLabel
                 }
               ),
@@ -256,7 +258,9 @@ const ColorPicker = (props) => {
                 },
                 color.slug
               )) })
-            ] })
+            ] }),
+            extraOptions && /* @__PURE__ */ jsx(MenuSeparator, {}),
+            extraOptions
           ]
         }
       )

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Iijp9hzP.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-CZxTZUqH.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Dv3Wxdl_.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-B0HgM8f4.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 /**
@@ -46,10 +46,10 @@ const ColorSwatch = (props) => {
       style: {
         background: (color || gradient) && backgroundGradient
       },
-      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),
+      className: () => clsx("es:size-6 es:rounded es:border es:border-secondary-300 es:shadow-xs", !color && !gradient && "es:bg-white", className),
       colorName: !color && !gradient ? __("No color", "eightshift-ui-components") : colorName,
       color,
-      children: !color && !gradient && /* @__PURE__ */ jsx("div", { className: "es-uic-m-auto es-uic-h-full es-uic-w-px es-uic-rotate-45 es-uic-rounded es-uic-bg-red-500" })
+      children: !color && !gradient && /* @__PURE__ */ jsx("div", { className: "es:m-auto es:h-full es:w-px es:rotate-45 es:rounded es:bg-red-500" })
     }
   );
 };