@eightshift/ui-components 1.7.2 → 1.9.0

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-BVIXT8qq.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-DNDWaukZ.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**

package/dist/components/button/button.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-VbCAu4hd.js";
-import { j as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928, l as $df56164dff5785e2$export$4338b53315abf666 } from "../../utils-BCJajCwh.js";
-import { a as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-CtCX0OGo.js";
-import React__default, { useState, useRef, forwardRef, createContext } from "react";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Cs-ZD1nu.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BMFbEXg1.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-BSLBwuuO.js";
+import { $ as $9bf71ea28793e738$export$c5251b9e124bf29 } from "../../FocusScope-EoLYfbMp.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-KeRYAbEi.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { T as Tooltip } from "../../tooltip-eKaARDoV.js";
-import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
   let [isInToolbar, setInToolbar] = useState(false);
@@ -51,6 +51,9 @@ function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   };
   return {
     toolbarProps: {
+      ...$65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+        labelable: true
+      }),
       role: !isInToolbar ? "toolbar" : "group",
       "aria-orientation": orientation,
       "aria-label": ariaLabel,

package/dist/components/checkbox/checkbox.js

@@ -1,15 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { a as $4e85f108e88277b8$export$b085522c77523c51 } from "../../RSPContexts-2lR5GG9p.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, c as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-BCJajCwh.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-BSLBwuuO.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$dad6ae84456c676a, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-BjMhz_VI.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-BmltE9Zr.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-DZXLEnA_.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-BMOTWmOx.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CgFLw4FA.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-WhC7vZaL.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a, b as $e5be200c675c3b3a$export$a763b9476acd3eb, c as $e5be200c675c3b3a$export$dad6ae84456c676a } from "../../useFormValidation-BNzOc2t9.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-xTkcGUkt.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-Dpw3WpSw.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-BSKwCUIW.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DMAlRYjX.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CZY36ssv.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-BHNhi-ls.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { icons } from "../../icons/icons.js";
@@ -29,8 +30,16 @@ function $406796ff087fe49b$export$e375f10ce42261c5(props, state, inputRef) {
   useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = !!isIndeterminate;
   });
+  let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled: isDisabled || isReadOnly,
+    onPress() {
+      let { [$e5be200c675c3b3a$export$a763b9476acd3eb]: groupValidationState } = props;
+      let { commitValidation } = groupValidationState ? groupValidationState : validationState;
+      commitValidation();
+    }
+  });
   return {
-    labelProps,
+    labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, pressProps),
     inputProps: {
       ...inputProps,
       checked: isSelected,
@@ -115,7 +124,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
   let groupState = useContext($bc237834342dbd75$export$139c5b8563afc1fc);
   let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
   let { labelProps, inputProps, isSelected, isDisabled, isReadOnly, isPressed, isInvalid } = groupState ? $fba3e38d5ca8983f$export$353b32fc6898d37d({
-    ...props,
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
     // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
     // it's passed explicitly here to avoid typescript error (requires ignore).
     // @ts-ignore
@@ -123,7 +132,7 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
     // ReactNode type doesn't allow function children.
     children: typeof props.children === "function" ? true : props.children
   }, groupState, inputRef) : $406796ff087fe49b$export$e375f10ce42261c5({
-    ...props,
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
     children: typeof props.children === "function" ? true : props.children,
     validationBehavior
   }, $3017fa7ffdddec74$export$8042c6c013fd5226(props), inputRef);
@@ -134,7 +143,6 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
     isDisabled: isInteractionDisabled
   });
   let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
-    // TODO: should data attrs go on the label or on the <input>? useCheckbox passes them to the input...
     ...props,
     defaultClassName: "react-aria-Checkbox",
     values: {
@@ -257,7 +265,8 @@ const Checkbox = (props) => {
                 {
                   transition: "scaleFade",
                   visible: isIndeterminate,
-                  children: /* @__PURE__ */ jsx("div", { className: "es-uic-h-[1.5px] es-uic-w-3 es-uic-rounded es-uic-bg-white" })
+                  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" })
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -265,7 +274,7 @@ const Checkbox = (props) => {
                 {
                   transition: "scaleRotateFade",
                   visible: !isIndeterminate && isSelected,
-                  className: "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-2",
+                  className: "es-uic-transition-none [&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-[3]",
                   noInitial: true,
                   children: icons.check
                 }

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { Menu, MenuItem, MenuSeparator, MenuSection } from "../menu/menu.js";
 import { ColorSwatch } from "./color-swatch.js";
 import { RichLabel } from "../rich-label/rich-label.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-CinC14s3.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-BpLubxWI.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-B6s54Jb3.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f } from "../../Color-B-cqXgPz.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 /**
  * A simple color/gradient swatch.
  *

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

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __, s as sprintf } from "../../default-i18n-DRnM8y4w.js";
+import { _ as __, s as sprintf } from "../../default-i18n-CM1-Xvzf.js";
 import { useMemo, useState } from "react";
 import { Button, ButtonGroup } from "../button/button.js";
 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-CinC14s3.js";
+import { $ as $251c695a52d94a8d$export$cae13e90592f246a } from "../../ColorSwatch-B6s54Jb3.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

@@ -1,29 +1,29 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useMemo, useRef, useState, useCallback, forwardRef, useContext, createContext } from "react";
 import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-2lR5GG9p.js";
-import { c as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-BCJajCwh.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-BSLBwuuO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-BMOTWmOx.js";
-import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, m as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, v as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CgFLw4FA.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-BpLubxWI.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DMAlRYjX.js";
+import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, n as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, u as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CZY36ssv.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-B-cqXgPz.js";
 import { $ as $9446cca9a3875146$export$cb6e0bb50bc19463, a as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-GajL10e1.js";
-import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-CvK0YHTZ.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-5dFkeiXx.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-B8m1uz1J.js";
-import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-ByyKSVQv.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-D9Cs6yKr.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Cs-ZD1nu.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-BaKmjFNp.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-WhC7vZaL.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-BttM1Nxd.js";
-import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CV1qVS6t.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BwqMVkuV.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BVIXT8qq.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-BjMhz_VI.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-DMMUTZ-h.js";
+import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-G2G-nukT.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-CraZ2Sej.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BAEM0o25.js";
+import { b as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-BlkOMLma.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-QNPrj4N9.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-KeRYAbEi.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-B73fhEA7.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BHNhi-ls.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DKicm3R0.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BXSxJ_44.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BtoiUpt8.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-DNDWaukZ.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-BNzOc2t9.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-CQP9-nH5.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { icons } from "../../icons/icons.js";
 import { Spacer } from "../spacer/spacer.js";
@@ -189,7 +189,7 @@ function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
   return useMemo(() => {
     if (typeof value === "string") try {
       return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
-    } catch (err) {
+    } catch {
       return void 0;
     }
     return value;
@@ -231,7 +231,7 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
     let color;
     try {
       color = (0, $799cddbef784668f$export$6e865ea70d7724f)(inputValue.startsWith("#") ? inputValue : `#${inputValue}`);
-    } catch (err) {
+    } catch {
       color = null;
     }
     return color;

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { s as sprintf, _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { s as sprintf, _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";

package/dist/components/container-panel/container-panel.js

@@ -84,8 +84,8 @@ const ContainerPanel = (props) => {
         )
       ] }),
       className: clsx(
-        "es-uic-space-y-2 es-uic-border-t es-uic-border-t-gray-200",
-        closable && open && "es-uic-space-y-0",
+        "es-uic-border-t es-uic-border-t-gray-200",
+        !closable && typeof use === "undefined" && "es-uic-space-y-2",
         justClosable && open && "es-uic-pb-4",
         justUse && use && "es-uic-pb-4",
         useAndClosable && use && open && "es-uic-pb-4",
@@ -102,7 +102,8 @@ const ContainerPanel = (props) => {
           AnimatedVisibility,
           {
             visible: open,
-            className: clsx(open && "es-uic-space-y-2 es-uic-px-4"),
+            className: "es-uic-space-y-2 es-uic-px-4",
+            transition: "scaleSlideFade",
             children
           }
         ),
@@ -110,7 +111,8 @@ const ContainerPanel = (props) => {
           AnimatedVisibility,
           {
             visible: closable ? use && open : use,
-            className: clsx((closable ? use && open : use) && "es-uic-space-y-2 es-uic-px-4"),
+            className: "es-uic-space-y-2 es-uic-px-4",
+            transition: "scaleSlideFade",
             children
           }
         )

package/dist/components/draggable/draggable-handle.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-DRnM8y4w.js";
+import "../../default-i18n-CM1-Xvzf.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-B5HVwW_W.js";
+import "../../react-jsx-parser.min-CVit0rZn.js";
 /**
  * A Draggable item handle.
  *

package/dist/components/draggable/draggable.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef, useEffect, useLayoutEffect, useState, createContext, startTransition, useTransition, useContext, useCallback, useId } from "react";
-import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { DraggableContext } from "./draggable-context.js";
-import { r as reactDomExports } from "../../index-BTCzc3zb.js";
+import { r as reactDomExports } from "../../index-BYHhzLf-.js";
 var i = Symbol.for("preact-signals");
 function t() {
   if (!(s > 1)) {

package/dist/components/draggable-list/draggable-list-item.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-DRnM8y4w.js";
+import "../../default-i18n-CM1-Xvzf.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { cloneElement } from "react";
-import "../../react-jsx-parser.min-B5HVwW_W.js";
+import "../../react-jsx-parser.min-CVit0rZn.js";
 /**
  * A DraggableList item.
  *

package/dist/components/draggable-list/draggable-list.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { _ as __ } from "../../default-i18n-DRnM8y4w.js";
+import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { L as List, a as arrayRemove, b as arrayMove } from "../../List-Bx2anbX-.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-Ct3nzFZG.js";
 const fixIds = (items, itemIdBase) => {
   return items == null ? void 0 : items.map((item, i) => ({
     ...item,

package/dist/components/expandable/expandable.js

@@ -1,13 +1,211 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default from "react";
+import React__default, { useRef, useCallback, useEffect, forwardRef, useContext, createContext } from "react";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 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-DRnM8y4w.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BwqMVkuV.js";
-import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope-CtCX0OGo.js";
+import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BMFbEXg1.js";
+import { f as $bdb11010cef70236$export$f680877a34711e37, e as $b5e257d569688ac6$export$535bd6ca7f90a273, l as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, n as $5dc95899b306f630$export$c9058316764c140e, d as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-BSLBwuuO.js";
+import { r as reactDomExports } from "../../index-BYHhzLf-.js";
+import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-B0yfN_Zu.js";
+import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-CZY36ssv.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DMAlRYjX.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BtoiUpt8.js";
+function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
+  let { isDisabled } = props;
+  let triggerId = $bdb11010cef70236$export$f680877a34711e37();
+  let panelId = $bdb11010cef70236$export$f680877a34711e37();
+  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  let supportsBeforeMatch = !isSSR && "onbeforematch" in document.body;
+  let raf = useRef(null);
+  let handleBeforeMatch = useCallback(() => {
+    raf.current = requestAnimationFrame(() => {
+      if (ref.current) ref.current.setAttribute("hidden", "until-found");
+    });
+    reactDomExports.flushSync(() => {
+      state.toggle();
+    });
+  }, [
+    ref,
+    state
+  ]);
+  $e9faafb641e167db$export$90fc3a17d93f704c(ref, "beforematch", supportsBeforeMatch ? handleBeforeMatch : null);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (raf.current) cancelAnimationFrame(raf.current);
+    if (supportsBeforeMatch && ref.current && !isDisabled) {
+      if (state.isExpanded) ref.current.removeAttribute("hidden");
+      else ref.current.setAttribute("hidden", "until-found");
+    }
+  }, [
+    isDisabled,
+    ref,
+    state.isExpanded,
+    supportsBeforeMatch
+  ]);
+  useEffect(() => {
+    return () => {
+      if (raf.current) cancelAnimationFrame(raf.current);
+    };
+  }, []);
+  return {
+    buttonProps: {
+      id: triggerId,
+      "aria-expanded": state.isExpanded,
+      "aria-controls": panelId,
+      onPress: (e) => {
+        if (!isDisabled && e.pointerType !== "keyboard") state.toggle();
+      },
+      isDisabled,
+      onPressStart(e) {
+        if (e.pointerType === "keyboard" && !isDisabled) state.toggle();
+      }
+    },
+    panelProps: {
+      id: panelId,
+      // This can be overridden at the panel element level.
+      role: "group",
+      "aria-labelledby": triggerId,
+      "aria-hidden": !state.isExpanded,
+      hidden: supportsBeforeMatch ? true : !state.isExpanded
+    }
+  };
+}
+function $bf996d45f4a36925$export$3fcbf6e4407997e0(props) {
+  let [isExpanded, setExpanded] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.isExpanded, props.defaultExpanded || false, props.onExpandedChange);
+  const expand = useCallback(() => {
+    setExpanded(true);
+  }, [
+    setExpanded
+  ]);
+  const collapse = useCallback(() => {
+    setExpanded(false);
+  }, [
+    setExpanded
+  ]);
+  const toggle = useCallback(() => {
+    setExpanded(!isExpanded);
+  }, [
+    setExpanded,
+    isExpanded
+  ]);
+  return {
+    isExpanded,
+    setExpanded,
+    expand,
+    collapse,
+    toggle
+  };
+}
+const $28f4fd908f0de97f$export$1d40e3e0cc4d5de = /* @__PURE__ */ createContext(null);
+const $28f4fd908f0de97f$export$d665dd135a51b28a = /* @__PURE__ */ createContext(null);
+const $28f4fd908f0de97f$export$dab3ea4a6ef094da = /* @__PURE__ */ createContext(null);
+const $28f4fd908f0de97f$var$InternalDisclosureContext = /* @__PURE__ */ createContext(null);
+function $28f4fd908f0de97f$var$Disclosure(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $28f4fd908f0de97f$export$d665dd135a51b28a);
+  let groupState = useContext($28f4fd908f0de97f$export$1d40e3e0cc4d5de);
+  let { id, ...otherProps } = props;
+  let defaultId = $bdb11010cef70236$export$f680877a34711e37();
+  id || (id = defaultId);
+  let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
+  let state = $bf996d45f4a36925$export$3fcbf6e4407997e0({
+    ...props,
+    isExpanded,
+    onExpandedChange(isExpanded2) {
+      var _props_onExpandedChange;
+      if (groupState) groupState.toggleKey(id);
+      (_props_onExpandedChange = props.onExpandedChange) === null || _props_onExpandedChange === void 0 ? void 0 : _props_onExpandedChange.call(props, isExpanded2);
+    }
+  });
+  let panelRef = React__default.useRef(null);
+  let isDisabled = props.isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || false;
+  let { buttonProps, panelProps } = $5e910fae8e128ead$export$6e3e27031a30522f({
+    ...props,
+    isExpanded,
+    isDisabled
+  }, state, panelRef);
+  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    within: true
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    id: void 0,
+    defaultClassName: "react-aria-Disclosure",
+    values: {
+      isExpanded: state.isExpanded,
+      isDisabled,
+      isFocusVisibleWithin,
+      state
+    }
+  });
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(otherProps);
+  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        {
+          slots: {
+            [$64fa3d84918910a7$export$c62b8e45d58ddad9]: {},
+            trigger: buttonProps
+          }
+        }
+      ],
+      [
+        $28f4fd908f0de97f$var$InternalDisclosureContext,
+        {
+          panelProps,
+          panelRef
+        }
+      ],
+      [
+        $28f4fd908f0de97f$export$dab3ea4a6ef094da,
+        state
+      ]
+    ]
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    ref,
+    "data-expanded": state.isExpanded || void 0,
+    "data-disabled": isDisabled || void 0,
+    "data-focus-visible-within": isFocusVisibleWithin || void 0,
+    ...domProps,
+    ...focusWithinProps,
+    ...renderProps
+  }, renderProps.children));
+}
+function $28f4fd908f0de97f$var$DisclosurePanel(props, ref) {
+  let { role = "group" } = props;
+  let { panelProps, panelRef } = useContext($28f4fd908f0de97f$var$InternalDisclosureContext);
+  let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    within: true
+  });
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-DisclosurePanel",
+    values: {
+      isFocusVisibleWithin
+    }
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ref: $5dc95899b306f630$export$c9058316764c140e(ref, panelRef),
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(panelProps, focusWithinProps),
+    ...renderProps,
+    role,
+    "data-focus-visible-within": isFocusVisibleWithin || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
+        null
+      ]
+    ]
+  }, props.children));
+}
+const $28f4fd908f0de97f$export$74a362b31437ec83 = /* @__PURE__ */ forwardRef($28f4fd908f0de97f$var$Disclosure);
+const $28f4fd908f0de97f$export$feabaa331e1d464c = /* @__PURE__ */ forwardRef($28f4fd908f0de97f$var$DisclosurePanel);
 /**
  * A component that allows hiding content in an expandable panel, to declutter the UI.
  *
@@ -23,10 +221,10 @@ import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope
  * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the panel header, left of the expand button.
  * @param {boolean} [props.keepActionsOnExpand=false] - If `true`, the actions are not hidden when the panel is expanded.
  * @param {boolean} [props.disabled] - If `true`, the expand button is disabled.
- * @param {boolean} [props.noFocusHandling] - If `true`, the focus trapping when the item is expanded is disabled. Useful when part of another component that manages focus itself.
  * @param {boolean} [props.open] - Whether the expandable is open.
  * @param {Function} [props.onOpenChange] - Function is called when the panel is opened or closed.
  * @param {object} [props.headerProps] - Props to pass to the header (label + trigger).
+ * @param {JSX.Element} [props.customOpenButton] - Allows adding a custom open button. **IMPORTANT**: make sure to set `slot='trigger'` on the passed element!
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Expandable component.
@@ -66,12 +264,19 @@ const Expandable = (props) => {
   if (hidden) {
     return null;
   }
-  const component = /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    $28f4fd908f0de97f$export$74a362b31437ec83,
     {
+      isExpanded: isOpen,
+      onExpandedChange: (value) => {
+        setIsOpen(value);
+        if (onOpenChange) {
+          onOpenChange(!isOpen);
+        }
+      },
       className: clsx(
-        "es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-opacity-0 es-uic-text-sm es-uic-transition focus:es-uic-outline-none",
-        isOpen && "es-uic-border-opacity-100 es-uic-shadow-lg",
+        "es-uic-w-full es-uic-rounded-lg es-uic-border es-uic-border-gray-300/0 es-uic-text-sm es-uic-transition",
+        isOpen && "es-uic-border-gray-300/100 es-uic-shadow-lg",
         className
       ),
       ...other,
@@ -80,7 +285,6 @@ const Expandable = (props) => {
           "div",
           {
             className: clsx("es-uic-flex es-uic-h-10 es-uic-items-center es-uic-gap-1 es-uic-transition-[padding]", isOpen && "es-uic-py-1 es-uic-pl-2 es-uic-pr-1", headerClassName),
-            ...headerProps,
             children: [
               /* @__PURE__ */ jsx(
                 RichLabel,
@@ -118,6 +322,7 @@ const Expandable = (props) => {
               !customOpenButton && /* @__PURE__ */ jsx(
                 Button,
                 {
+                  slot: "trigger",
                   type: "ghost",
                   icon: isOpen ? icons.caretDownFill : icons.caretDown,
                   onPress: () => {
@@ -136,29 +341,19 @@ const Expandable = (props) => {
           }
         ),
         /* @__PURE__ */ jsx(
-          AnimatedVisibility,
+          $28f4fd908f0de97f$export$feabaa331e1d464c,
           {
-            visible: isOpen,
-            className: clsx("es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-2", contentClassName),
-            transition: "slideFade",
-            noInitial: true,
+            className: clsx(
+              isOpen && "es-uic-space-y-2.5 es-uic-border-t es-uic-border-t-gray-200 es-uic-p-2",
+              isOpen && "es-uic-animate-in es-uic-fade-in-0 es-uic-slide-in-from-top-3 es-uic-fill-mode-forwards",
+              contentClassName
+            ),
             children
           }
         )
       ]
     }
   );
-  if (noFocusHandling) {
-    return component;
-  }
-  return /* @__PURE__ */ jsx(
-    $9bf71ea28793e738$export$20e40289641fbbb6,
-    {
-      contain: isOpen,
-      autoFocus: isOpen,
-      children: component
-    }
-  );
 };
 export {
   Expandable