@eightshift/ui-components 5.0.3 → 5.0.4

package/dist/components/button/button.js

@@ -1,14 +1,16 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BpwTmkAe.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, b as $0393f8ab869a0f1a$export$c17561cb55d4db30 } from "../../Button-DH22t_SM.js";
 import { k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-CZt7LCbO.js";
 import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-BEPI2m7u.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import React__default, { useState, useRef, forwardRef, createContext } from "react";
+import React__default, { useState, useRef, forwardRef, createContext, cloneElement } from "react";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { c as cva } from "../../index-BljRBEr_.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-DZCiis5V.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
   let [isInToolbar, setInToolbar] = useState(false);
@@ -101,12 +103,14 @@ const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef(fun
  * @param {React.Ref} [props.forwardedRef] - Ref to forward to the button. Use the same as the `ref` prop.
  * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
  * @param {Object} [props.tooltipProps] - Props to pass to the tooltip.
+ * @param {boolean} [props.pending] - If `true`, the button is in a pending state, which can be used to indicate that an action is being processed.
+ * @param {string} [props.pendingAriaLabel='Loading'] - ARIA label for the pending state, used for screen readers.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Button component.
  *
  * @typedef {'small' | 'default' | 'large'} ButtonSize
- * @typedef {'default' | 'selected' | 'ghost' | 'danger' | 'dangerGhost'} ButtonType
+ * @typedef {'default' | 'selected' | 'selectedGhost' | 'ghost' | 'danger' | 'dangerGhost'} ButtonType
  *
  * @example
  * <Button onPress={() => console.log('Hi!')} icon={icons.myIcon} />
@@ -121,6 +125,8 @@ const Button = (props) => {
     icon,
     size = "default",
     type = "default",
+    pending,
+    pendingAriaLabel = __("Loading", "eightshift-ui-components"),
     disabled,
     className,
     tooltip: rawTooltip,
@@ -150,8 +156,9 @@ const Button = (props) => {
       "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:enabled:cursor-pointer",
+      "es:enabled:not-pending:cursor-pointer",
       "es:shrink-0",
+      "es:pending:shadow-none! es:pending:cursor-wait",
       icon && children ? "es:justify-start" : "es:justify-center",
       className
     ],
@@ -173,6 +180,13 @@ const Button = (props) => {
             "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!"
+          ],
+          selectedGhost: [
+            "es:border-transparent es:text-accent-600",
+            "es:enabled:hover:bg-accent-500/5 es:enabled:active:bg-accent-500/10 es:enabled:pressed:bg-accent-500/10",
+            "es:focus-visible:text-accent-700",
+            "es:focus-visible:ring-accent-500/30 es:focus-visible:border-accent-500 es:focus-visible:inset-ring-accent-100",
+            "es:disabled:border-transparent!"
           ]
         }
       },
@@ -300,25 +314,39 @@ const Button = (props) => {
       }
     }
   );
-  const component = /* @__PURE__ */ jsxs(
+  const component = /* @__PURE__ */ jsx(
     $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
     {
       onPress,
       isDisabled: disabled,
+      isPending: pending,
       className: componentClasses({
-        disabled,
-        hasIcon: Boolean(icon),
-        iconOnly: Boolean(icon && !children),
+        disabled: !pending && disabled,
+        hasIcon: pending || Boolean(icon),
+        iconOnly: pending || Boolean(icon && !children),
         size,
         type
       }),
       ref: objRef,
       "aria-label": ariaLabel,
       ...other,
-      children: [
-        icon,
-        children
-      ]
+      children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        !isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          children
+        ] }),
+        isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            $0393f8ab869a0f1a$export$c17561cb55d4db30,
+            {
+              "aria-label": pendingAriaLabel,
+              className: "es:sr-only",
+              isIndeterminate: true
+            }
+          ),
+          cloneElement(icons.loader, { className: "es:motion-preset-spin es:motion-duration-1750" })
+        ] })
+      ] })
     }
   );
   if (!tooltip) {

package/dist/components/checkbox/checkbox.js

@@ -5,8 +5,8 @@ import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useEffect, useRef, forwardRef, useContext, createContext, useMemo } from "react";
 import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-Dy0PXJg5.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BrJylgPR.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-CDa3YAZI.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DWBuejBp.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-yGuUBU7q.js";
 import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-ibcBUHnB.js";
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";

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

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-DntWEAC3.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Dt3lRApA.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-lVhk8V_G.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-CNqKeT8D.js";
 /**
  * A simple color/gradient swatch.
  *

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

@@ -6,7 +6,7 @@ import { icons } from "../../icons/icons.js";
 import { SolidColorPicker } from "./solid-color-picker.js";
 import { Slider } from "../slider/slider.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
-import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-DntWEAC3.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-Dt3lRApA.js";
 import { Menu, MenuItem } from "../menu/menu.js";
 import { MatrixAlign } from "../matrix-align/matrix-align.js";
 import { Spacer } from "../spacer/spacer.js";

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

@@ -5,11 +5,11 @@ import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
 import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, g as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, p as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, c as $c87311424ea30a05$export$fedb369cb70207f1, v as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-lVhk8V_G.js";
-import { $ as $9446cca9a3875146$export$cb6e0bb50bc19463, a as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-GajL10e1.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-CNqKeT8D.js";
+import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-CHmNj-oR.js";
 import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B7-lUnAF.js";
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-D2YaWRIA.js";
-import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-C-S1oEH9.js";
+import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-uOPcIpqS.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-C9GO0IDB.js";
 import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BYi0pekx.js";
@@ -17,7 +17,7 @@ import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError
 import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CU1_u8ze.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D0u2bh8g.js";
 import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-Dy0PXJg5.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";

package/dist/components/draggable/draggable.js

@@ -427,9 +427,10 @@ function computed(compute, comparator) {
   return w(compute);
 }
 function deepEqual(a2, b2) {
-  if (a2 === b2) {
+  if (Object.is(a2, b2)) {
     return true;
   }
+  if (a2 === null || b2 === null) return false;
   if (typeof a2 === "function" && typeof b2 === "function") {
     return a2 === b2;
   }
@@ -453,11 +454,13 @@ function deepEqual(a2, b2) {
     );
     return !hasDifferentValues;
   }
-  try {
-    return JSON.stringify(a2) === JSON.stringify(b2);
-  } catch (e2) {
-    return false;
+  if (typeof a2 === "object" && typeof b2 === "object") {
+    const aKeys = Object.keys(a2);
+    const bKeys = Object.keys(b2);
+    if (aKeys.length !== bKeys.length) return false;
+    return aKeys.some((key) => deepEqual(a2[key], b2[key]));
   }
+  return false;
 }
 function reactive({ get }, _2) {
   return {
@@ -4434,6 +4437,7 @@ render_fn = function() {
   };
   dropEffectCleanup = E(() => {
     if (dragOperation.status.dropped) {
+      queueMicrotask(() => dropEffectCleanup == null ? void 0 : dropEffectCleanup());
       const onComplete = cleanup;
       cleanup = void 0;
       source.status = "dropping";

package/dist/components/expandable/expandable.js

@@ -6,7 +6,7 @@ import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BpwTmkAe.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DH22t_SM.js";
 import { e as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-CZt7LCbO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-C2SkI1Fn.js";

package/dist/components/layout/hstack.js

@@ -5,6 +5,7 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  *
  * @component
  * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.as] - Element to render the component as. Defaults to `div`.
  * @param {boolean} [props.noWrap] - If `true`, the children will not wrap if their size exceeds the container size.
  * @param {string} [props.className] - Classes to pass to the component.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
@@ -19,11 +20,12 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @preserve
  */
 const HStack = (props) => {
-  const { children, noWrap, className, hidden } = props;
+  const { children, noWrap, className, hidden, as } = props;
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:items-center es:gap-x-1.5 es:gap-y-2", !noWrap && "es:flex-wrap", className), children });
+  const ComponentToRender = as ?? "div";
+  return /* @__PURE__ */ jsx(ComponentToRender, { className: clsx("es:flex es:items-center es:gap-x-1.5 es:gap-y-2", !noWrap && "es:flex-wrap", className), children });
 };
 export {
   HStack

package/dist/components/layout/vstack.js

@@ -5,6 +5,7 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  *
  * @component
  * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.as] - Element to render the component as. Defaults to `div`.
  * @param {boolean} [props.noWrap] - If `true`, the children will not wrap if their size exceeds the container size.
  * @param {string} [props.className] - Classes to pass to the component.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
@@ -19,11 +20,12 @@ import { c as clsx } from "../../lite-DVmmD_-j.js";
  * @preserve
  */
 const VStack = (props) => {
-  const { children, noWrap, className, hidden } = props;
+  const { children, noWrap, className, hidden, as } = props;
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-x-1.5 es:gap-y-1.5", !noWrap && "es:flex-wrap", className), children });
+  const ComponentToRender = as ?? "div";
+  return /* @__PURE__ */ jsx(ComponentToRender, { className: clsx("es:flex es:flex-col es:gap-x-1.5 es:gap-y-1.5", !noWrap && "es:flex-wrap", className), children });
 };
 export {
   VStack

package/dist/components/link-input/link-input.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BpwTmkAe.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-BJpTEATT.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-DH22t_SM.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-D7KpCYaK.js";
 import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DDPhPPTQ.js";
 import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-BTxlCGcc.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-O9uw63D7.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-_nDFq8-H.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-CJVCRT8_.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";

package/dist/components/menu/menu.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-CaTBkETC.js";
-import { a as $3674c52c6b3c5bce$export$27d2ad3c5815583e, b as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, c as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, d as $3674c52c6b3c5bce$export$4b1545b4f2016d26, e as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-O9uw63D7.js";
+import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-BN3mjL6q.js";
+import { a as $3674c52c6b3c5bce$export$27d2ad3c5815583e, b as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, c as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, d as $3674c52c6b3c5bce$export$4b1545b4f2016d26, e as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-CJVCRT8_.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
 import { Popover } from "../popover/popover.js";

package/dist/components/modal/modal.js

@@ -1,10 +1,10 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { h as $a11501f3d1d39e6c$export$ea8f71083e90600f, i as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, j as $337b884510726a0d$export$14c98a7594375490, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, n as $337b884510726a0d$export$c6fdb837b070b4ff, g as $de32f1b87079253c$export$2e1e1122cf0cba88, f as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-O9uw63D7.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { h as $a11501f3d1d39e6c$export$ea8f71083e90600f, i as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, j as $337b884510726a0d$export$14c98a7594375490, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, n as $337b884510726a0d$export$c6fdb837b070b4ff, g as $de32f1b87079253c$export$2e1e1122cf0cba88, f as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-CJVCRT8_.js";
 import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-ba38ScjJ.js";
 import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useState, useEffect, forwardRef, useContext, createContext, useRef, useMemo } from "react";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-5aDgmImj.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-CjvnevpX.js";
 import { Button } from "../button/button.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -191,6 +191,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @param {Object} props - Component props.
  * @param {boolean} [props.open] - **Controlled mode ** - whether the modal is open.
  * @param {boolean} [props.defaultOpen] - **Uncontrolled mode ** - whether the modal is initially open.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the modal footer, typically buttons.
  * @param {string|JSX.Element} [props.triggerLabel] - Label for the trigger button.
  * @param {JSX.Element} [props.triggerIcon] - Trigger button icon.
  * @param {Object} [props.triggerProps] - Props to pass to the trigger button.
@@ -201,7 +202,11 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @param {boolean} [props.noKeyboardDismiss] - If `true`, the modal will not close when pressing the `Esc` key.
  * @param {string} [props.className] - Classes to pass to the modal container.
  * @param {string} [props.overlayClassName] - Classes to pass to the modal backdrop.
+ * @param {string} [props.actionsClassName] - Classes to pass to the modal footer (actions) container.
+ * @param {string} [props.headerClassName] - Classes to pass to the modal header container.
+ * @param {string} [props.contentContainerClassName] - Classes to pass to the modal content container.
  * @param {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
+ * @param {Function} [props.onOpenChange] - Function called when the modal's open state changes. `(isOpen: boolean) => void`
  *
  * @returns {JSX.Element} The Modal component.
  *
@@ -213,92 +218,111 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @preserve
  */
 const Modal2 = (props) => {
+  const { triggerLabel, triggerIcon, triggerProps, customTrigger, open } = props;
+  if (typeof open !== "undefined") {
+    return /* @__PURE__ */ jsx(ModalInternal, { ...props });
+  }
+  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
+    !customTrigger && /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: triggerIcon,
+        ...triggerProps,
+        children: triggerLabel ?? (!triggerIcon && __("Open", "eightshift-frontend-libs"))
+      }
+    ),
+    customTrigger,
+    /* @__PURE__ */ jsx(ModalInternal, { ...props })
+  ] });
+};
+const ModalInternal = (props) => {
   const {
     children,
     shouldCloseOnInteractOutside,
     open,
     defaultOpen,
-    triggerLabel,
-    triggerIcon,
-    triggerProps,
-    customTrigger,
+    onOpenChange,
     title,
+    actions,
     noCloseButton,
     noClickToDismiss,
     noKeyboardDismiss,
     "aria-label": ariaLabel,
     className,
-    overlayClassName
+    headerClassName,
+    actionsClassName,
+    overlayClassName,
+    contentContainerClassName,
+    ...rest
   } = props;
-  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
-    !customTrigger && /* @__PURE__ */ jsx(
-      Button,
-      {
-        icon: triggerIcon,
-        ...triggerProps,
-        children: triggerLabel ?? (!triggerIcon && __("Open", "eightshift-frontend-libs"))
-      }
-    ),
-    customTrigger,
-    /* @__PURE__ */ jsx(
-      $f3f84453ead64de5$export$8948f78d83984c69,
-      {
-        isDismissable: !noClickToDismiss,
-        defaultOpen,
-        isOpen: open,
-        shouldCloseOnInteractOutside,
-        isKeyboardDismissDisabled: noKeyboardDismiss,
-        className: ({ isEntering, isExiting }) => clsx(
-          "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-y-auto es:bg-black/25 es:p-4 es:text-center es:backdrop-blur-xs",
-          isEntering && "es:motion-opacity-in es:motion-duration-150",
-          isExiting && "es:motion-opacity-out es:motion-duration-150",
-          overlayClassName
-        ),
-        children: /* @__PURE__ */ jsx(
-          $f3f84453ead64de5$export$2b77a92f1a5ad772,
-          {
-            className: ({ isEntering, isExiting }) => clsx(
-              "es:w-full es:max-w-lg es:overflow-hidden es:rounded-2xl es:border es:border-secondary-100 es:bg-white es:p-5 es:text-left es:align-middle es:shadow-xl es:inset-ring es:inset-ring-secondary-50",
-              isEntering && "es:motion-safe:motion-scale-in-95 es:motion-fade-in es:motion-duration-300 es:motion-ease-spring-smooth/scale",
-              isExiting && "es:motion-safe:motion-scale-out-95 es:motion-fade-out es:motion-duration-250 es:motion-ease-spring-smooth/scale",
-              className
-            ),
-            children: /* @__PURE__ */ jsx(
-              $de32f1b87079253c$export$3ddf2d174ce01153,
-              {
-                className: "es:relative es:text-sm es:outline-hidden",
-                "aria-label": ariaLabel,
-                children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsxs(HStack, { children: [
-                    title && /* @__PURE__ */ jsx(
-                      $5cb03073d3f54797$export$a8a3e93435678ff9,
-                      {
-                        className: "es:text-balance es:text-base",
-                        slot: "title",
-                        children: title
-                      }
-                    ),
-                    !noCloseButton && /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        className: "es:ml-auto",
-                        onPress: close,
-                        type: "ghost",
-                        size: "small",
-                        icon: icons.clear,
-                        "aria-label": __("Close modal", "eightshift-frontend-libs")
-                      }
-                    )
-                  ] }),
-                  children
-                ] })
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    $f3f84453ead64de5$export$8948f78d83984c69,
+    {
+      isDismissable: !noClickToDismiss,
+      defaultOpen,
+      isOpen: open,
+      shouldCloseOnInteractOutside,
+      onOpenChange,
+      isKeyboardDismissDisabled: noKeyboardDismiss,
+      className: ({ isEntering, isExiting }) => clsx(
+        "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-y-auto es:p-4 es:text-center es:bg-black/30 es:backdrop-blur-sm",
+        isEntering && "es:motion-opacity-in es:motion-duration-150",
+        isExiting && "es:motion-opacity-out es:motion-duration-150",
+        overlayClassName
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        $f3f84453ead64de5$export$2b77a92f1a5ad772,
+        {
+          className: ({ isEntering, isExiting }) => clsx(
+            "es:w-full es:max-w-lg es:overflow-hidden es:rounded-3xl es:border es:border-secondary-100 es:bg-white es:text-left es:align-middle es:shadow-xl es:inset-ring es:inset-ring-secondary-50",
+            isEntering && "es:motion-safe:motion-scale-in-95 es:motion-fade-in es:motion-duration-300 es:motion-ease-spring-smooth/scale",
+            isExiting && "es:motion-safe:motion-scale-out-95 es:motion-fade-out es:motion-duration-250 es:motion-ease-spring-smooth/scale",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(
+            $de32f1b87079253c$export$3ddf2d174ce01153,
+            {
+              className: "es:relative es:text-sm es:outline-hidden",
+              "aria-label": ariaLabel,
+              children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  HStack,
+                  {
+                    className: clsx(!title && "es:relative", title && "es:px-5 es:py-3 es:justify-between es:bg-secondary-50 es:border-b es:border-secondary-200", headerClassName),
+                    children: [
+                      title && /* @__PURE__ */ jsx(
+                        $5cb03073d3f54797$export$a8a3e93435678ff9,
+                        {
+                          className: "es:text-balance es:text-base! es:my-0! es:font-medium!",
+                          slot: "title",
+                          children: title
+                        }
+                      ),
+                      !noCloseButton && /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          className: !title && "es:absolute es:top-4 es:right-4 es:bg-white/60 es:backdrop-blur-lg",
+                          onPress: close,
+                          type: "ghost",
+                          size: "small",
+                          icon: icons.clear,
+                          "aria-label": __("Close", "eightshift-frontend-libs"),
+                          tooltip: true
+                        }
+                      )
+                    ]
+                  }
+                ),
+                children && /* @__PURE__ */ jsx("div", { className: clsx("es:p-5 es:space-y-2.5", contentContainerClassName), children }),
+                actions && /* @__PURE__ */ jsx(HStack, { className: clsx("es:justify-end es:px-5 es:py-3 es:border-t es:border-secondary-100", actionsClassName), children: actions })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
 };
 export {
   Modal2 as Modal

package/dist/components/number-picker/number-picker.js

@@ -4,14 +4,14 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DDPhPPTQ.js";
 import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BpwTmkAe.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DH22t_SM.js";
 import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CU1_u8ze.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D0u2bh8g.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";

package/dist/components/popover/popover.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-O9uw63D7.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-CJVCRT8_.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { Button } from "../button/button.js";

package/dist/components/radio/radio.js

@@ -7,7 +7,7 @@ import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJge
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-D2YaWRIA.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BrJylgPR.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DWBuejBp.js";
 import { a as $f645667febf57a63$export$4c014de7c8940b4c, b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
 import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-Dy0PXJg5.js";
 import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-BEPI2m7u.js";

package/dist/components/select/v2/async-select.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { _ as __ } from "../../../default-i18n-CT_oS1Fy.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-BpwTmkAe.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a, b as $d01f2c01039c0eec$export$c02625b26074192c } from "../../../ComboBox-BJpTEATT.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-DH22t_SM.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a, b as $d01f2c01039c0eec$export$c02625b26074192c } from "../../../ComboBox-D7KpCYaK.js";
 import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-BmDS8Juy.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-JS_ob-kh.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BTxlCGcc.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-O9uw63D7.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-_nDFq8-H.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-CJVCRT8_.js";
 import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-BuJgePCv.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";

package/dist/components/select/v2/shared.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-BTxlCGcc.js";
+import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-_nDFq8-H.js";
 import { c as clsx } from "../../../utils-CZt7LCbO.js";
 const OptionItemBase = (props) => {
   var _a;