@eightshift/ui-components 1.9.1 → 2.0.1

package/dist/components/tabs/tabs.js

@@ -1,18 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { d as $880e95eb8b93ba9a$export$ecf600387e221c37, k as $ae20dd8cbca75726$export$d6daf82dcd84e87c, e as $e1995378a142960e$export$18af5c7a9e9b3664, f as $e1995378a142960e$export$bf788dd355e3a401, g as $e1995378a142960e$export$fb8073518f34e6ec, h as $7135fc7d473fd974$export$4feb769f8ddf26c5, m as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "../../SelectionManager-DGbP8Ntl.js";
-import { l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, m as $df56164dff5785e2$export$4338b53315abf666, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-BmaSD6gC.js";
-import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-5cXbU70C.js";
+import { c as $880e95eb8b93ba9a$export$ecf600387e221c37, i as $ae20dd8cbca75726$export$d6daf82dcd84e87c, d as $e1995378a142960e$export$bf788dd355e3a401, e as $e1995378a142960e$export$fb8073518f34e6ec, f as $7135fc7d473fd974$export$4feb769f8ddf26c5, j as $7135fc7d473fd974$export$90e00781bc59d8f9, h as $e1995378a142960e$export$18af5c7a9e9b3664, k as $7135fc7d473fd974$export$a164736487e3f0ae } from "../../Collection-CJM_asJz.js";
+import { l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, m as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-39D0mStj.js";
+import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-DnOd_jPX.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import React__default, { useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, useId, cloneElement } from "react";
-import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-DZ9pn6Jl.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-WnPbJUyQ.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-7r2_SUa9.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DtrQ3I5U.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Dbj6MsFR.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-ChK5oW-0.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-Dr843geC.js";
+import React__default, { useState, useMemo, useRef, useEffect, forwardRef, useContext, createContext, useId, cloneElement, isValidElement } from "react";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-Cu3xtEJS.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-C_2wWraB.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-CDOs-GuR.js";
+import { a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-rg_OQIGW.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-Cs5_OoeA.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
 import { _ as __, s as sprintf } from "../../default-i18n-CM1-Xvzf.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as cva } from "../../index-CcCn9HWX.js";
 import { Notice } from "../notice/notice.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 function $83013635b024ae3d$export$eac1895992b9f3d6(ref, options) {
@@ -232,7 +233,7 @@ function $76f919a04c5a7d14$var$findDefaultSelectedKey(collection, disabledKeys)
 }
 const $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f = /* @__PURE__ */ createContext(null);
 const $5e8ad37a45e1c704$export$364712098d2aa57c = /* @__PURE__ */ createContext(null);
-function $5e8ad37a45e1c704$var$Tabs(props, ref) {
+const $5e8ad37a45e1c704$export$b2539bed5023c21c = /* @__PURE__ */ forwardRef(function Tabs(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
   let { children, orientation = "horizontal" } = props;
   children = useMemo(() => typeof children === "function" ? children({
@@ -249,7 +250,7 @@ function $5e8ad37a45e1c704$var$Tabs(props, ref) {
     collection,
     tabsRef: ref
   }));
-}
+});
 function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
   let { orientation = "horizontal" } = props;
   let state = $76f919a04c5a7d14$export$4ba071daf4e486({
@@ -297,14 +298,13 @@ function $5e8ad37a45e1c704$var$TabsInner({ props, tabsRef: ref, collection }) {
     ]
   }, renderProps.children));
 }
-const $5e8ad37a45e1c704$export$b2539bed5023c21c = /* @__PURE__ */ forwardRef($5e8ad37a45e1c704$var$Tabs);
-function $5e8ad37a45e1c704$var$TabList(props, ref) {
+const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = /* @__PURE__ */ forwardRef(function TabList(props, ref) {
   let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
   return state ? /* @__PURE__ */ React__default.createElement($5e8ad37a45e1c704$var$TabListInner, {
     props,
     forwardedRef: ref
   }) : /* @__PURE__ */ React__default.createElement($e1995378a142960e$export$fb8073518f34e6ec, props);
-}
+});
 function $5e8ad37a45e1c704$var$TabListInner({ props, forwardedRef: ref }) {
   let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
   let { CollectionRoot } = useContext($7135fc7d473fd974$export$4feb769f8ddf26c5);
@@ -337,7 +337,6 @@ function $5e8ad37a45e1c704$var$TabListInner({ props, forwardedRef: ref }) {
     persistedKeys: $7135fc7d473fd974$export$90e00781bc59d8f9(state.selectionManager.focusedKey)
   }));
 }
-const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = /* @__PURE__ */ forwardRef($5e8ad37a45e1c704$var$TabList);
 const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ $e1995378a142960e$export$18af5c7a9e9b3664("item", (props, forwardedRef, item) => {
   let state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
   let ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
@@ -377,7 +376,7 @@ const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /* @__PURE__ */ $e1995378a1429
     "data-hovered": isHovered || void 0
   });
 });
-function $5e8ad37a45e1c704$var$TabPanel(props, forwardedRef) {
+const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TabPanel(props, forwardedRef) {
   const state = useContext($5e8ad37a45e1c704$export$364712098d2aa57c);
   let ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
   let { tabPanelProps } = $34bce698202e07cb$export$fae0121b5afe572d(props, state, ref);
@@ -416,9 +415,10 @@ function $5e8ad37a45e1c704$var$TabPanel(props, forwardedRef) {
         null
       ]
     ]
-  }, renderProps.children));
-}
-const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb($5e8ad37a45e1c704$var$TabPanel);
+  }, /* @__PURE__ */ React__default.createElement($7135fc7d473fd974$export$4feb769f8ddf26c5.Provider, {
+    value: $7135fc7d473fd974$export$a164736487e3f0ae
+  }, renderProps.children)));
+});
 /**
  * Main tab container.
  *
@@ -426,10 +426,13 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
  * @param {Object} props - Component props.
  * @param {boolean} [props.vertical=false] - Whether the tabs are vertical.
  * @param {string} [props.className] - Classes to pass to the tabs container.
+ * @param {TabsType} [props.type='underline'] - Design of the tabs.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Tabs component.
  *
+ * @typedef {'underline' | 'pill' | 'pillInverse'} TabsType
+ *
  * @example
  * <Tabs>
  * 	<TabList>
@@ -442,8 +445,8 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
  *
  * @preserve
  */
-const Tabs = (props) => {
-  const { children, vertical, className, hidden, ...rest } = props;
+const Tabs2 = (props) => {
+  const { children, vertical, className, hidden, type = "underline", ...rest } = props;
   const baseId = useId();
   if (hidden) {
     return null;
@@ -464,13 +467,15 @@ const Tabs = (props) => {
         cloneElement(
           child,
           {
-            key: index
+            key: index,
+            type
           },
           childItems == null ? void 0 : childItems.map(
             (innerChild, i) => cloneElement(innerChild, {
               id: `tab-${baseId}-${i + 1}`,
               key: i,
-              isParentVertical: vertical
+              isParentVertical: vertical,
+              type
             })
           )
         )
@@ -482,7 +487,7 @@ const Tabs = (props) => {
         cloneElement(child, {
           id: `tab-${baseId}-${tabPanelCounter++}`,
           key: index,
-          className: clsx(child.props.className, vertical && "es-uic-border-l es-uic-border-l-gray-300 es-uic-pl-3")
+          className: clsx(child.props.className, vertical && "es:pl-3")
         })
       ];
     }
@@ -508,12 +513,12 @@ const Tabs = (props) => {
     {
       ...rest,
       orientation: vertical ? "vertical" : "horizontal",
-      className: clsx(vertical ? "es-uic-grid es-uic-size-full es-uic-min-h-40 es-uic-grid-cols-[minmax(0,_15rem),_2fr] es-uic-gap-4" : "es-uic-flex-col", className),
+      className: clsx(vertical ? "es:grid es:size-full es:min-h-40 es:grid-cols-[minmax(0,15rem)_2fr] es:gap-4" : "es:flex-col", className),
       children: childrenWithIds
     }
   );
 };
-Tabs.displayName = "Tabs";
+Tabs2.displayName = "Tabs";
 /**
  * Container for tabs within the Tabs component.
  *
@@ -527,24 +532,29 @@ Tabs.displayName = "Tabs";
  *
  * @preserve
  */
-const TabList = (props) => {
-  const { children, "aria-label": ariaLabel, className, ...other } = props;
+const TabList2 = (props) => {
+  const { children, "aria-label": ariaLabel, className, type, ...other } = props;
   return /* @__PURE__ */ jsx(
     $5e8ad37a45e1c704$export$e51a686c67fdaa2d,
     {
       "aria-label": ariaLabel ?? __("tabs", "eightshift-ui-components"),
-      className: ({ orientation }) => clsx(
-        "es-uic-flex",
-        orientation === "vertical" && "es-uic-h-full es-uic-flex-col es-uic-gap-px es-uic-pr-1.5",
-        orientation === "horizontal" && "es-uic-w-full es-uic-items-stretch es-uic-gap-1 es-uic-border-b es-uic-border-b-gray-300",
-        className
-      ),
+      className: ({ orientation }) => {
+        const horizontal = orientation === "horizontal";
+        const vertical = orientation === "vertical";
+        return clsx(
+          "es:flex es:p-0.5 es:-m-0.5",
+          vertical && "es:h-full es:flex-col es:gap-1.5 es:pr-1.5 es:overflow-y-auto es:overflow-x-visible",
+          horizontal && "es:w-full es:items-stretch es:gap-1.5 es:overflow-x-auto es:overflow-y-visible es:mb-3",
+          horizontal && type === "underline" && 'es:relative es:isolate es:after:content-[""] es:after:-z-10 es:after:absolute es:after:bottom-0.5 es:after:left-0 es:after:w-full es:after:h-px es:after:bg-secondary-300',
+          className
+        );
+      },
       ...other,
       children
     }
   );
 };
-TabList.displayName = "TabList";
+TabList2.displayName = "TabList";
 /**
  * A tab within the TabList component, in the Tabs component.
  *
@@ -553,6 +563,7 @@ TabList.displayName = "TabList";
  * @param {boolean} [props.disabled] - Whether the tab is disabled.
  * @param {string} [props.className] - Classes to pass to the tab.
  * @param {JSX.Element} [props.icon] - Icon to show on the tab.
+ * @param {string|JSX.Element} [props.badge] - Badge to render besides the label.
  * @param {string} [props.label] - Tab label. **Note**: overrides inner items!
  * @param {string} [props.subtitle] - Tab subtitle. **Note**: overrides inner items!
  *
@@ -563,39 +574,76 @@ TabList.displayName = "TabList";
  * @preserve
  */
 const Tab = (props) => {
-  const { children, disabled, isParentVertical, className, icon, label, subtitle, ...other } = props;
+  const { children, disabled, isParentVertical, className, icon, label, subtitle, type, badge, ...other } = props;
+  const componentClasses = cva(
+    [
+      "es:group es:flex es:items-center es:gap-1.5 es:relative es:shrink-0 es:min-h-9.5",
+      "es:select-none es:text-sm es:transition es:not-disabled:cursor-pointer",
+      "es:any-focus:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+      className
+    ],
+    {
+      variants: {
+        type: {
+          underline: "es:disabled:text-secondary-400 es:selected:text-accent-950",
+          pill: "es:font-[450] es:border es:border-transparent es:px-3 es:py-2 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-accent-900 es:selected:bg-accent-400/15 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75",
+          pillInverse: "es:font-[450] es:border es:border-transparent es:px-3 es:py-2 es:rounded-lg es:not-disabled:not-selected:hover:text-secondary-900 es:not-disabled:not-selected:hover:bg-secondary-100 es:text-secondary-500 es:selected:text-white es:selected:bg-accent-600 es:has-icon:pl-2.5 es:focus-visible:border-accent-500 es:disabled:text-secondary-400/75"
+        }
+      },
+      compoundVariants: [
+        {
+          vertical: false,
+          type: "underline",
+          class: [
+            "es:px-2 es:py-2.5 es:rounded-lg",
+            'es:after:content-[""] es:after:absolute es:after:bottom-px es:after:left-0 es:after:right-0 es:after:w-5/6 es:after:mx-auto es:after:h-0.75',
+            "es:after:bg-linear-to-b es:hover:not-selected:not-disabled:after:from-secondary-200 es:hover:not-selected:not-disabled:after:to-secondary-300 es:selected:after:from-accent-500 es:selected:after:to-accent-600",
+            "es:after:rounded-t-full es:selected:after:shadow-xs es:selected:after:shadow-accent-700/30 es:after:transition"
+          ]
+        },
+        {
+          vertical: true,
+          type: "underline",
+          class: [
+            "es:pl-3 es:pr-2 es:py-2.5 es:rounded-lg es:selected:bg-accent-50/50 es:selected:text-accent-950 es:transition",
+            'es:after:content-[""] es:after:absolute es:after:-left-0 es:after:top-0 es:after:bottom-0 es:after:h-5/6 es:after:my-auto es:after:w-1',
+            "es:after:bg-linear-to-r es:hover:not-selected:not-disabled:after:from-secondary-200 es:hover:not-selected:not-disabled:after:to-secondary-300 es:selected:after:from-accent-500 es:selected:after:to-accent-600",
+            "es:after:rounded-full es:selected:after:shadow-xs es:selected:after:shadow-accent-700/30 es:after:transition"
+          ]
+        }
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(
     $5e8ad37a45e1c704$export$3e41faf802a29e71,
     {
       ...other,
       isDisabled: disabled,
-      className: ({ isSelected, isDisabled }) => {
-        return clsx(
-          "es-uic-relative es-uic-flex es-uic-select-none es-uic-items-center es-uic-rounded es-uic-p-1.5 es-uic-text-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",
-          'after:es-uic-absolute after:es-uic-rounded-full after:es-uic-bg-teal-600 after:es-uic-shadow-sm after:es-uic-shadow-teal-500/25 after:es-uic-transition after:es-uic-duration-300 after:es-uic-content-[""]',
-          !isParentVertical && "after:es-uic-inset-x-0 after:-es-uic-bottom-px after:es-uic-h-0.5",
-          isSelected && "es-uic-border-b-teal-600 es-uic-text-teal-900 after:es-uic-opacity-100",
-          isSelected && isParentVertical && "after:es-uic-scale-y-100",
-          isSelected && !isParentVertical && "after:es-uic-scale-x-100",
-          !isSelected && !isDisabled && "es-uic-text-gray-800 after:es-uic-opacity-0 hover:es-uic-bg-gray-100",
-          !isSelected && !isDisabled && isParentVertical && "after:es-uic-scale-y-75",
-          !isSelected && !isDisabled && !isParentVertical && "after:es-uic-scale-x-75",
-          isDisabled && "es-uic-text-gray-300 after:es-uic-hidden",
-          isParentVertical && "es-uic-min-h-9 es-uic-pl-3 after:es-uic-inset-y-0 after:es-uic-left-px after:es-uic-right-auto after:es-uic-my-auto after:es-uic-h-7 after:es-uic-w-[0.1875rem]",
-          className
-        );
-      },
+      className: componentClasses({ vertical: Boolean(isParentVertical), type }),
       children: [
         (icon || subtitle) && /* @__PURE__ */ jsx(
           RichLabel,
           {
             icon,
             label: label ?? children,
-            subtitle
+            subtitle,
+            noColor: true
+          }
+        ),
+        !(icon || subtitle) && (label ?? children),
+        badge && !isValidElement(badge) && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "es:transition-colors es:px-1.5 es:py-1 es:leading-none es:rounded-md es:text-xs es:font-medium",
+              type === "underline" && "es:inset-ring es:inset-ring-secondary-200/20 es:bg-secondary-100 es:group-selected:bg-accent-500/10 es:group-selected:text-accent-900 es:group-selected:inset-ring-accent-500/10",
+              type === "pill" && "es:bg-secondary-100 es:group-selected:bg-accent-600 es:group-selected:text-white",
+              type === "pillInverse" && "es:bg-secondary-100 es:group-selected:bg-accent-50 es:group-selected:text-accent-900"
+            ),
+            children: badge
           }
         ),
-        !(icon || subtitle) && (label ?? children)
+        badge && isValidElement(badge) && /* @__PURE__ */ jsx("div", { children: badge })
       ]
     }
   );
@@ -614,21 +662,21 @@ Tab.displayName = "Tab";
  *
  * @preserve
  */
-const TabPanel = (props) => {
+const TabPanel2 = (props) => {
   const { children, className, ...other } = props;
   return /* @__PURE__ */ jsx(
     $5e8ad37a45e1c704$export$3d96ec278d3efce4,
     {
       ...other,
-      className: clsx("es-uic-mt-1.5 es-uic-space-y-2.5 es-uic-text-sm focus:es-uic-outline-none", className),
+      className: clsx("es:mt-1.5 es:space-y-2.5 es:text-sm es:focus:outline-hidden", className),
       children
     }
   );
 };
-TabPanel.displayName = "TabPanel";
+TabPanel2.displayName = "TabPanel";
 export {
   Tab,
-  TabList,
-  TabPanel,
-  Tabs
+  TabList2 as TabList,
+  TabPanel2 as TabPanel,
+  Tabs2 as Tabs
 };

package/dist/components/toggle/switch.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, m as $df56164dff5785e2$export$4338b53315abf666, n as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-BmaSD6gC.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, m as $df56164dff5785e2$export$4338b53315abf666, n as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-39D0mStj.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { forwardRef, createContext } from "react";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DA_b3LG_.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-Dq9VpeCd.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 $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DhSBQxkp.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-DzlgBLAJ.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";
 function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
   let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
@@ -24,7 +24,7 @@ function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
   };
 }
 const $8e59e948500a8fe1$export$8699e3b644d5a28a = /* @__PURE__ */ createContext(null);
-function $8e59e948500a8fe1$var$Switch(props, ref) {
+const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef(function Switch(props, ref) {
   let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $8e59e948500a8fe1$export$8699e3b644d5a28a);
   let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
@@ -73,8 +73,7 @@ function $8e59e948500a8fe1$var$Switch(props, ref) {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
     ref: inputRef
   })), renderProps.children);
-}
-const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef($8e59e948500a8fe1$var$Switch);
+});
 /**
  * A toggle switch.
  *
@@ -100,7 +99,7 @@ const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef($8e
  *
  * @preserve
  */
-const Switch = (props) => {
+const Switch2 = (props) => {
   const { checked, onChange, disabled, id, children, className, isIndeterminate, hidden } = props;
   if (hidden) {
     return null;
@@ -112,26 +111,33 @@ const Switch = (props) => {
       isDisabled: disabled,
       isSelected: checked ?? false,
       onChange,
-      className: "es-uic-group es-uic-flex es-uic-items-center es-uic-justify-between es-uic-gap-2",
+      className: "es:group es:flex es:items-center es:justify-between es:gap-2",
       children: [
         children,
-        /* @__PURE__ */ jsx("div", { className: clsx("es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-justify-center", className), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:shrink-0 es:items-center es:justify-center", className), children: /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
-              "es-uic-no-webkit-highlight es-uic-h-4 es-uic-w-7 es-uic-shrink-0 es-uic-cursor-pointer es-uic-rounded-full es-uic-border es-uic-border-gray-500 es-uic-bg-white es-uic-p-[0.1875rem] es-uic-shadow-sm es-uic-outline-none es-uic-transition",
-              "group-focus-visible:es-uic-ring group-focus-visible:es-uic-ring-teal-500 group-focus-visible:es-uic-ring-opacity-50",
-              "group-selected:es-uic-border-teal-800/75 group-selected:es-uic-bg-teal-100/25 group-selected:es-uic-shadow-teal-500/25",
-              "group-disabled:es-uic-cursor-default group-disabled:es-uic-border-gray-300 group-disabled:es-uic-bg-white"
+              "es:shrink-0 es:cursor-pointer es:no-webkit-highlight",
+              "es:h-5 es:w-9 es:p-[0.1875rem] es:rounded-full",
+              "es:outline-hidden es:bg-radial-[circle_at_75%_50%]",
+              "es:border es:inset-ring es:inset-shadow-xs",
+              "es:transition",
+              "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50 es:focus-visible:ring-3 es:shadow-xs",
+              !checked && "es:border-secondary-400 es:inset-ring-secondary-100 es:from-white es:to-secondary-100",
+              checked && "es:border-accent-700/75 es:inset-ring-accent-500 es:to-accent-500 es:from-accent-600 es:shadow-accent-600/30",
+              disabled && "es:cursor-default es:border-secondary-300 es:bg-white"
             ),
             children: /* @__PURE__ */ jsx(
               "span",
               {
                 className: clsx(
-                  "es-uic-block es-uic-size-2 es-uic-rounded-full es-uic-border es-uic-border-gray-500 es-uic-bg-gray-500 es-uic-transition es-uic-will-change-transform",
-                  "group-selected:!es-uic-translate-x-3 group-selected:!es-uic-scale-125 group-selected:es-uic-border-teal-600 group-selected:es-uic-bg-teal-600",
-                  "group-disabled:es-uic-border-gray-300 group-disabled:es-uic-bg-white",
-                  isIndeterminate && "es-uic-translate-x-1.5"
+                  "es:block es:size-3 es:rounded-full es:border es:will-change-transform es:bg-radial",
+                  "es:transition es:motion-ease-spring-snappy es:ease-[var(--motion-spring-snappy)]",
+                  !checked && "es:border-secondary-500 es:from-secondary-500 es:to-secondary-600 es:scale-95",
+                  checked && "es:translate-x-4 es:border-accent-600/20 es:from-white es:to-accent-500/30 es:from-40% es:bg-white es:shadow-xs es:shadow-accent-900/60",
+                  disabled && "es:border-secondary-300 es:bg-white",
+                  isIndeterminate && "es:translate-x-2 es:scale-100"
                 )
               }
             )
@@ -142,5 +148,5 @@ const Switch = (props) => {
   );
 };
 export {
-  Switch
+  Switch2 as Switch
 };

package/dist/components/toggle/toggle.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8G0GMsc.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
 import { Switch } from "./switch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**