@eightshift/ui-components 1.9.1 → 2.0.0

package/dist/components/toggle-button/toggle-button.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { r as $ff5963eb1fccf552$export$e08e3b67e392101e, d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-BmaSD6gC.js";
+import { p as $ff5963eb1fccf552$export$e08e3b67e392101e, d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-39D0mStj.js";
 import React__default, { createContext, forwardRef, useContext } from "react";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DA_b3LG_.js";
-import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-C5e_EJlC.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Dbj6MsFR.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-ChK5oW-0.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DhSBQxkp.js";
+import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-CmLbE5vg.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
+import { c as cva } from "../../index-CcCn9HWX.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
   const { isSelected } = state;
@@ -51,7 +51,7 @@ function $4547d1bf40011fdf$export$bc53712daae3d6e6(props, state, ref) {
 }
 const $84b7d8702d4ff4a8$export$a8a71863db173133 = /* @__PURE__ */ createContext(null);
 const $efde0372d7a700fe$export$43506d75ebd2e218 = /* @__PURE__ */ createContext({});
-function $efde0372d7a700fe$var$ToggleButton(props, ref) {
+const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(function ToggleButton(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $efde0372d7a700fe$export$43506d75ebd2e218);
   let groupState = useContext($84b7d8702d4ff4a8$export$a8a71863db173133);
   let state = $3017fa7ffdddec74$export$8042c6c013fd5226(groupState && props.id != null ? {
@@ -95,8 +95,7 @@ function $efde0372d7a700fe$var$ToggleButton(props, ref) {
     "data-hovered": isHovered || void 0,
     "data-focus-visible": isFocusVisible || void 0
   });
-}
-const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef($efde0372d7a700fe$var$ToggleButton);
+});
 /**
  * A simple toggle button component.
  *
@@ -138,90 +137,168 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef($ef
  *
  * @preserve
  */
-const ToggleButton = (props) => {
+const ToggleButton2 = (props) => {
   const { children, icon, size = "default", type = "default", disabled, className, tooltip, selected, onChange, wrapperClassName, tooltipProps, hidden, ...other } = 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-border-gray-300 es-uic-text-gray-700 es-uic-shadow-sm es-uic-border",
-      hover: "hover:es-uic-border-gray-300 hover:es-uic-bg-gray-100",
-      selected: "es-uic-bg-teal-600 es-uic-text-white es-uic-border-teal-600 after:es-uic-opacity-30 es-uic-border es-uic-shadow-md es-uic-shadow-teal-500/25",
-      selectedHover: "hover:es-uic-shadow-teal-600/50 hover:after:es-uic-opacity-40",
-      focus: " focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
-      disabled: "disabled:es-uic-border-gray-200 disabled:es-uic-text-gray-300 es-uic-border"
-    },
-    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",
-      selected: "es-uic-bg-teal-600 es-uic-text-white es-uic-border-teal-600 after:es-uic-opacity-30 es-uic-shadow es-uic-shadow-teal-500/25",
-      selectedHover: "hover:es-uic-shadow-teal-600/50 hover:after:es-uic-opacity-40"
+  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",
+      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"],
+          ghost: ["es:border-transparent es:text-secondary-700", "es:hover:bg-secondary-100", "es:disabled:border-transparent!"]
+        }
+      },
+      compoundVariants: [
+        {
+          type: "default",
+          disabled: false,
+          selected: 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: "default",
+          disabled: false,
+          selected: true,
+          class: [
+            "es:text-white es:accent-text-shadow",
+            "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-xs es:shadow-accent-600/30"
+          ]
+        },
+        {
+          disabled: true,
+          class: "es:disabled:border-secondary-300 es:disabled:text-secondary-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
+        },
+        {
+          type: "ghost",
+          disabled: false,
+          selected: true,
+          class: ["es:bg-accent-600 es:text-white es:border-accent-600 es:shadow-xs es:shadow-accent-500/25", "es:hover:shadow-accent-600/50"]
+        },
+        // 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: {
+        selected: false,
+        disabled: false
+      }
     }
-  };
+  );
   const component = /* @__PURE__ */ jsxs(
     $efde0372d7a700fe$export$d2b052e7b4be1756,
     {
       isSelected: selected,
       onChange,
       isDisabled: disabled,
-      className: ({ isSelected }) => {
-        var _a, _b, _c, _d, _e, _f;
-        return clsx(
-          "es-uic-relative es-uic-isolate 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",
-          '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-[""]',
-          "disabled:es-uic-shadow-none",
-          "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring",
-          !disabled && !isSelected && (((_a = themes[type]) == null ? void 0 : _a.regular) ?? themes.default.regular),
-          !disabled && !isSelected && (((_b = themes[type]) == null ? void 0 : _b.hover) ?? themes.default.hover),
-          !disabled && isSelected && (((_c = themes[type]) == null ? void 0 : _c.selectedHover) ?? themes.default.selectedHover),
-          ((_d = themes[type]) == null ? void 0 : _d.disabled) ?? themes.default.disabled,
-          ((_e = themes[type]) == null ? void 0 : _e.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,
-          sizes[size].iconSize,
-          isSelected && (((_f = themes[type]) == null ? void 0 : _f.selected) ?? themes.default.selected),
-          "[.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_&:not(:first-child)]:after:es-uic-rounded-l-none [.es-uic-button-group-h_&:not(:last-child)]:after: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",
-          "[.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_&:not(:first-child)]:after:es-uic-rounded-t-none [.es-uic-button-group-v_&:not(:last-child)]:after: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",
-          "[.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,
+        selected,
+        hasIcon: Boolean(icon),
+        iconOnly: Boolean(icon && !children),
+        size,
+        type
+      }),
       ...other,
       children: [
         icon,
@@ -243,5 +320,5 @@ const ToggleButton = (props) => {
   );
 };
 export {
-  ToggleButton
+  ToggleButton2 as ToggleButton
 };

package/dist/components/tooltip/tooltip.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $2a41e45df1593e64$export$d39e1813b3bdd0e1, b as $44f671af83e7d9e0$export$2de4954e8ae13b9f, c as $44f671af83e7d9e0$export$746d02f47f4d381 } from "../../OverlayArrow-Dca2JXYU.js";
-import { e as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, j as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, p as $64fa3d84918910a7$export$45fda7c47f93fd48, l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, q as $64fa3d84918910a7$export$6d3443f2c48bfc20, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-BmaSD6gC.js";
-import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c, a as $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 } from "../../useFocusable-C2xrPFl6.js";
+import { a as $fc909762b330b746$export$61c6a8c84e605fb6, b as $d3f049242431219c$export$45fda7c47f93fd48, c as $2a41e45df1593e64$export$d39e1813b3bdd0e1, $ as $d3f049242431219c$export$6d3443f2c48bfc20, d as $44f671af83e7d9e0$export$2de4954e8ae13b9f, e as $44f671af83e7d9e0$export$746d02f47f4d381 } from "../../OverlayArrow-1jx-ZyCR.js";
+import { e as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, j as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, b as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-39D0mStj.js";
+import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c, a as $e6afbd83fe6ebbd2$export$13f3202a3e5ddd5 } from "../../useFocusable-087cO5Ct.js";
 import React__default, { useContext, useState, useMemo, useRef, useEffect, forwardRef, createContext } from "react";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456, m as $507fabe10e71c6fb$export$630ff653c5ada6a9, a as $507fabe10e71c6fb$export$b9b3dfddab17db27, d as $9ab94262bd0047c7$export$420e68273165f4ec } from "../../focusSafely-ChK5oW-0.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456, k as $507fabe10e71c6fb$export$630ff653c5ada6a9, a as $507fabe10e71c6fb$export$b9b3dfddab17db27, d as $9ab94262bd0047c7$export$420e68273165f4ec } from "../../focusSafely-CiqTTjWy.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $dbSRa$reactdom } from "../../index-D0mHceYg.js";
+import { $ as $dbSRa$reactdom } from "../../index-BRp93Yfa.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 const $f57aed4a881a3485$var$Context = /* @__PURE__ */ React__default.createContext(null);
 function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
@@ -276,12 +276,12 @@ function $4e3b923658d69c60$export$8c610744efcf8a1d(props) {
     ref
   }, props.children));
 }
-function $4e3b923658d69c60$var$Tooltip({ UNSTABLE_portalContainer, ...props }, ref) {
+const $4e3b923658d69c60$export$28c660c63b792dea = /* @__PURE__ */ forwardRef(function Tooltip({ UNSTABLE_portalContainer, ...props }, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e3b923658d69c60$export$39ae08fa83328b12);
   let contextState = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
   let localState = $8796f90736e175cb$export$4d40659c25ecb50b(props);
   let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-  let isExiting = $64fa3d84918910a7$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
+  let isExiting = $d3f049242431219c$export$45fda7c47f93fd48(ref, state.isOpen) || props.isExiting || false;
   if (!state.isOpen && !isExiting) return null;
   return /* @__PURE__ */ React__default.createElement($f57aed4a881a3485$export$b47c3594eab58386, {
     portalContainer: UNSTABLE_portalContainer
@@ -290,8 +290,7 @@ function $4e3b923658d69c60$var$Tooltip({ UNSTABLE_portalContainer, ...props }, r
     tooltipRef: ref,
     isExiting
   }));
-}
-const $4e3b923658d69c60$export$28c660c63b792dea = /* @__PURE__ */ forwardRef($4e3b923658d69c60$var$Tooltip);
+});
 function $4e3b923658d69c60$var$TooltipInner(props) {
   let state = useContext($4e3b923658d69c60$export$7a7623236eec67fa);
   let arrowRef = useRef(null);
@@ -314,7 +313,7 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
     shouldFlip: props.shouldFlip,
     onClose: () => state.close(true)
   });
-  let isEntering = $64fa3d84918910a7$export$6d3443f2c48bfc20(props.tooltipRef, !!placement) || props.isEntering || false;
+  let isEntering = $d3f049242431219c$export$6d3443f2c48bfc20(props.tooltipRef, !!placement) || props.isEntering || false;
   let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
     ...props,
     defaultClassName: "react-aria-Tooltip",
@@ -383,7 +382,7 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
  *
  * @preserve
  */
-const Tooltip = (props) => {
+const Tooltip2 = (props) => {
   const {
     children,
     text,
@@ -424,14 +423,12 @@ const Tooltip = (props) => {
             offset,
             crossOffset,
             className: ({ isEntering, isExiting }) => clsx(
-              "es-uic-group",
-              "es-uic-z-20 es-uic-select-none es-uic-rounded-md es-uic-border es-uic-px-1.5 es-uic-py-0.5 es-uic-text-sm es-uic-shadow es-uic-backdrop-blur-3xl es-uic-will-change-[transform,opacity] es-uic-fill-mode-forwards",
-              theme === "light" && "es-uic-border-gray-200 es-uic-bg-white/90 es-uic-text-gray-700",
-              theme === "dark" && "es-uic-border-gray-600 es-uic-bg-black/80 es-uic-text-gray-100",
-              isEntering && "es-uic-duration-300 es-uic-ease-out es-uic-animate-in es-uic-fade-in",
-              isEntering && "placement-left:es-uic-slide-in-from-right-0.5 placement-right:es-uic-slide-in-from-left-0.5 placement-top:es-uic-slide-in-from-bottom-0.5 placement-bottom:es-uic-slide-in-from-top-0.5",
-              isExiting && "es-uic-duration-150 es-uic-ease-in es-uic-animate-out es-uic-fade-out",
-              isExiting && "placement-left:es-uic-slide-out-to-right-0.5 placement-right:es-uic-slide-out-to-left-0.5 placement-top:es-uic-slide-out-to-bottom-0.5 placement-bottom:es-uic-slide-out-to-top-0.5",
+              "es:group es:motion-translat",
+              "es:z-20 es:select-none es:rounded-md es:border es:px-1.5 es:py-0.5 es:text-sm es:shadow es:backdrop-blur-3xl es:will-change-[transform,opacity] es:fill-mode-forwards",
+              theme === "light" && "es:border-secondary-200 es:bg-white/90 es:text-secondary-700",
+              theme === "dark" && "es:border-secondary-600 es:bg-black/80 es:text-secondary-100",
+              isEntering && "es:motion-opacity-in es:motion-duration-300 es:motion-safe:data-[placement=left]:-motion-translate-x-in-25 es:motion-safe:data-[placement=right]:motion-translate-x-in-25 es:motion-safe:data-[placement=top]:motion-translate-y-in-25 es:motion-safe:data-[placement=bottom]:-motion-translate-y-in-25 es:motion-ease-spring-bouncier es:motion-ease-linear/opacity",
+              isExiting && "es:motion-opacity-out es:motion-duration-200 es:motion-safe:data-[placement=left]:motion-translate-x-out-[-12.5%] es:motion-safe:data-[placement=right]:motion-translate-x-out-[12.5%] es:motion-safe:data-[placement=top]:motion-translate-y-out-[12.5%] es:motion-safe:data-[placement=bottom]:motion-translate-y-out-[-12.5%] es:motion-ease-spring-bouncier es:motion-ease-linear/opacity",
               className
             ),
             children: [
@@ -442,11 +439,11 @@ const Tooltip = (props) => {
                   height: 8,
                   viewBox: "0 0 8 8",
                   className: clsx(
-                    "es-uic-m-px es-uic-stroke-none es-uic-drop-shadow-sm",
-                    theme === "light" && "es-uic-fill-gray-200",
-                    theme === "dark" && "es-uic-fill-gray-600",
-                    "group-placement-left:-es-uic-rotate-90 group-placement-right:es-uic-rotate-90 group-placement-bottom:es-uic-rotate-180",
-                    "forced-colors:es-uic-fill-[Canvas] forced-colors:es-uic-stroke-[ButtonBorder]"
+                    "es:m-px es:stroke-none es:drop-shadow-sm",
+                    theme === "light" && "es:fill-secondary-200",
+                    theme === "dark" && "es:fill-secondary-600",
+                    "group-placement-left:-es:rotate-90 group-placement-right:es:rotate-90 group-placement-bottom:es:rotate-180",
+                    "es:forced-colors:fill-[Canvas] es:forced-colors:stroke-[ButtonBorder]"
                   ),
                   children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })
                 }
@@ -509,18 +506,18 @@ const DecorativeTooltip = (props) => {
   });
   const ref = useRef(null);
   return /* @__PURE__ */ jsx(
-    Tooltip,
+    Tooltip2,
     {
       triggerRef: ref,
       text,
       open,
-      className: "es-uic-pointer-events-none",
+      className: "es:pointer-events-none",
       ...rest,
       children: /* @__PURE__ */ jsx(
         "div",
         {
           ref,
-          className: clsx("es-uic-inline", wrapperClassName),
+          className: clsx("es:inline", wrapperClassName),
           ...$3ef42575df84b30b$export$9d1611c77c2fe928(hoverProps, focusWithinProps),
           children
         }
@@ -530,5 +527,5 @@ const DecorativeTooltip = (props) => {
 };
 export {
   DecorativeTooltip,
-  Tooltip
+  Tooltip2 as Tooltip
 };

package/dist/{context-DtrQ3I5U.js → context-CDOs-GuR.js}

@@ -1,5 +1,5 @@
 import React__default, { useState, useEffect, useContext } from "react";
-import { e as $b5e257d569688ac6$export$535bd6ca7f90a273 } from "./utils-BmaSD6gC.js";
+import { e as $b5e257d569688ac6$export$535bd6ca7f90a273 } from "./utils-39D0mStj.js";
 const $148a7a147e38ea7f$var$RTL_SCRIPTS = /* @__PURE__ */ new Set([
   "Arab",
   "Syrc",

package/dist/{focusSafely-ChK5oW-0.js → focusSafely-CiqTTjWy.js}

@@ -1,4 +1,4 @@
-import { l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, g as $8ae05eaa5c114e9c$export$7f54fc3180508a52, e as $b5e257d569688ac6$export$535bd6ca7f90a273 } from "./utils-BmaSD6gC.js";
+import { l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, g as $8ae05eaa5c114e9c$export$7f54fc3180508a52, e as $b5e257d569688ac6$export$535bd6ca7f90a273 } from "./utils-39D0mStj.js";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 const $431fbd86ca7dc216$export$b204af158042fbac = (el) => {
   var _el_ownerDocument;
@@ -673,20 +673,21 @@ export {
   $431fbd86ca7dc216$export$f21a1ffae260145a as f,
   $431fbd86ca7dc216$export$b204af158042fbac as g,
   $6a99195332edec8b$export$80f3e147d781571c as h,
-  $507fabe10e71c6fb$export$8397ddfc504fdb9a as i,
-  $c87311424ea30a05$export$fedb369cb70207f1 as j,
-  $bbed8b41f857bcc0$export$24490316f764c430 as k,
-  $e7801be82b4b2a53$export$4debdb1a3f0fa79e as l,
-  $507fabe10e71c6fb$export$630ff653c5ada6a9 as m,
-  $7215afc6de606d6b$export$de79e2c695e052f3 as n,
-  $c87311424ea30a05$export$9ac100e40613ea10 as o,
-  $c87311424ea30a05$export$78551043582a6a98 as p,
-  $c87311424ea30a05$export$b7d78993b74f766d as q,
-  $c87311424ea30a05$export$7bef049ce92e4224 as r,
-  $6a7db85432448f7f$export$29bf1b5f2c56cf63 as s,
-  $6a7db85432448f7f$export$60278871457622de as t,
-  $c87311424ea30a05$export$a11b0059900ceec8 as u,
-  $c87311424ea30a05$export$e1865c3bedcd822b as v,
-  $c87311424ea30a05$export$186c6964ca17d99 as w,
-  $507fabe10e71c6fb$export$98e20ec92f614cfe as x
+  $c87311424ea30a05$export$a11b0059900ceec8 as i,
+  $c87311424ea30a05$export$6446a186d09e379e as j,
+  $507fabe10e71c6fb$export$630ff653c5ada6a9 as k,
+  $507fabe10e71c6fb$export$8397ddfc504fdb9a as l,
+  $c87311424ea30a05$export$fedb369cb70207f1 as m,
+  $bbed8b41f857bcc0$export$24490316f764c430 as n,
+  $e7801be82b4b2a53$export$4debdb1a3f0fa79e as o,
+  $7215afc6de606d6b$export$de79e2c695e052f3 as p,
+  $c87311424ea30a05$export$9ac100e40613ea10 as q,
+  $c87311424ea30a05$export$78551043582a6a98 as r,
+  $c87311424ea30a05$export$b7d78993b74f766d as s,
+  $c87311424ea30a05$export$7bef049ce92e4224 as t,
+  $6a7db85432448f7f$export$29bf1b5f2c56cf63 as u,
+  $6a7db85432448f7f$export$60278871457622de as v,
+  $c87311424ea30a05$export$e1865c3bedcd822b as w,
+  $c87311424ea30a05$export$186c6964ca17d99 as x,
+  $507fabe10e71c6fb$export$98e20ec92f614cfe as y
 };

package/dist/icons/icons.js

@@ -29796,6 +29796,58 @@ const icons = {
         )
       ]
     }
+  ),
+  lightMode: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      width: "20",
+      height: "20",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 18v-2m-8-6h2m11.657 5.657L14.4 14.4M4.343 15.657 5.6 14.4M10 4V2m6 8h2M5.6 5.6 4.343 4.343M14.4 5.6l1.257-1.257",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            fill: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "10",
+            cy: "10",
+            r: "4",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            fill: "none"
+          }
+        )
+      ]
+    }
+  ),
+  darkMode: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      width: "20",
+      height: "20",
+      fill: "none",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 12.939A7.4 7.4 0 0 0 12.939 3 7.396 7.396 0 1 1 3 12.939Z",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none"
+        }
+      )
+    }
   )
 };
 const illustrations = {