@eightshift/ui-components 5.2.1 → 5.3.1

package/dist/components/index.js

@@ -24,7 +24,7 @@ import { ItemCollection } from "./item-collection/item-collection.js";
 import { LinkInput } from "./link-input/link-input.js";
 import { MatrixAlign } from "./matrix-align/matrix-align.js";
 import { MediaPlaceholder } from "./placeholders/media-placeholder.js";
-import { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from "./menu/menu.js";
+import { Menu, MenuItem, MenuSection, MenuSectionHeader, MenuSeparator, SubMenuItem } from "./menu/menu.js";
 import { MiniResponsive } from "./responsive/mini-responsive.js";
 import { Notice } from "./notice/notice.js";
 import { NumberPicker } from "./number-picker/number-picker.js";
@@ -93,6 +93,7 @@ export {
   Menu,
   MenuItem,
   MenuSection,
+  MenuSectionHeader,
   MenuSeparator,
   MiniResponsive,
   Modal,

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

@@ -1,9 +1,145 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Group-C4cXobNT.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
-import { $ as $bcdf0525bf22703d$export$2c73285ae9390cec, a as $216918bed6669f72$export$f5c9f3c2c4054eec } from "../../TextField-x_eEa_qR.js";
+import { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-ChJaTNa5.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
+import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
+import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-LmGemtHE.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CUxgjvAY.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
+import { $ as $8e6cc465cc68f603$export$698f465ec27e93df } from "../../context-DCAZLyDS.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
+import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
+const $216918bed6669f72$export$2dc6166a7e65358c = /* @__PURE__ */ createContext({});
+let $216918bed6669f72$var$filterHoverProps = (props) => {
+  let { onHoverStart, onHoverChange, onHoverEnd, ...otherProps } = props;
+  return otherProps;
+};
+const $216918bed6669f72$export$f5c9f3c2c4054eec = /* @__PURE__ */ forwardRef(function TextArea(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $216918bed6669f72$export$2dc6166a7e65358c);
+  let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
+  let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f({
+    isTextInput: true,
+    autoFocus: props.autoFocus
+  });
+  let isInvalid = !!props["aria-invalid"] && props["aria-invalid"] !== "false";
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isHovered,
+      isFocused,
+      isFocusVisible,
+      isDisabled: props.disabled || false,
+      isInvalid
+    },
+    defaultClassName: "react-aria-TextArea"
+  });
+  return /* @__PURE__ */ React__default.createElement("textarea", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928($216918bed6669f72$var$filterHoverProps(props), focusProps, hoverProps),
+    ...renderProps,
+    ref,
+    "data-focused": isFocused || void 0,
+    "data-disabled": props.disabled || void 0,
+    "data-hovered": isHovered || void 0,
+    "data-focus-visible": isFocusVisible || void 0,
+    "data-invalid": isInvalid || void 0
+  });
+});
+const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /* @__PURE__ */ createContext(null);
+const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920ace$export$86427a43e3e48ebb(function TextField(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
+  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
+  var _props_validationBehavior, _ref;
+  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
+  let inputRef = useRef(null);
+  [props, inputRef] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, inputRef, $8e6cc465cc68f603$export$698f465ec27e93df);
+  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
+  let [inputElementType, setInputElementType] = useState("input");
+  let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } = $2d73ec29415bd339$export$712718f7aec83d5({
+    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
+    inputElementType,
+    label,
+    validationBehavior
+  }, inputRef);
+  let inputOrTextAreaRef = useCallback((el) => {
+    inputRef.current = el;
+    if (el) setInputElementType(el instanceof HTMLTextAreaElement ? "textarea" : "input");
+  }, [
+    inputRef
+  ]);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    values: {
+      isDisabled: props.isDisabled || false,
+      isInvalid: validation.isInvalid,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false
+    },
+    defaultClassName: "react-aria-TextField"
+  });
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
+  delete DOMProps.id;
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...DOMProps,
+    ...renderProps,
+    ref,
+    slot: props.slot || void 0,
+    "data-disabled": props.isDisabled || void 0,
+    "data-invalid": validation.isInvalid || void 0,
+    "data-readonly": props.isReadOnly || void 0,
+    "data-required": props.isRequired || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $01b77f81d0f07f68$export$75b6ee27786ba447,
+        {
+          ...labelProps,
+          ref: labelRef
+        }
+      ],
+      [
+        $3985021b0ad6602f$export$37fb8590cf2c088c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $216918bed6669f72$export$2dc6166a7e65358c,
+        {
+          ...inputProps,
+          ref: inputOrTextAreaRef
+        }
+      ],
+      [
+        $a049562f99e7db0e$export$f9c6924e160136d1,
+        {
+          role: "presentation",
+          isInvalid: validation.isInvalid,
+          isDisabled: props.isDisabled || false
+        }
+      ],
+      [
+        $514c0188e459b4c0$export$9afb8bc826b033ea,
+        {
+          slots: {
+            description: descriptionProps,
+            errorMessage: errorMessageProps
+          }
+        }
+      ],
+      [
+        $ee014567cb39d3f0$export$ff05c3ac10437e03,
+        validation
+      ]
+    ]
+  }, renderProps.children));
+});
 /**
  * An input field.
  *

package/dist/components/item-collection/item-collection.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 /**
  * A simple component to manage a collection of items.
  *

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

@@ -1,26 +1,27 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { c as $319e236875307eab$export$a9b970dcc4ae71a9, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-RTwMSBs-.js";
+import { c as $319e236875307eab$export$a9b970dcc4ae71a9, a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-npzfSoYo.js";
 import { p as $ff5963eb1fccf552$export$e08e3b67e392101e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
-import { c as $e5be200c675c3b3a$export$a763b9476acd3eb, a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-BeMxJA29.js";
-import { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Group-C4cXobNT.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
+import { d as $2d73ec29415bd339$export$712718f7aec83d5, b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-ChJaTNa5.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
-import { e as $b1f0cad8af73213b$export$3585ede4d035bf14, f as $b1f0cad8af73213b$export$9145995848b05025, c as $eed445e0843c11d0$export$7ff8f37d2d81a48d, d as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-BeC97FZ4.js";
-import { o as $168583247155ddda$export$dc9c12ed27dd1b49, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, p as $07b14b47974efb58$export$9b9a0cd73afb7ca4, e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-Xf6AsnV-.js";
+import { e as $b1f0cad8af73213b$export$3585ede4d035bf14, f as $b1f0cad8af73213b$export$9145995848b05025, c as $eed445e0843c11d0$export$7ff8f37d2d81a48d, d as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-D0Stb4wr.js";
+import { o as $168583247155ddda$export$dc9c12ed27dd1b49, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, p as $07b14b47974efb58$export$9b9a0cd73afb7ca4, e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-CQ8H6Noi.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
-import { i as $ae20dd8cbca75726$export$d6daf82dcd84e87c, m as $c5a24bc478652b5f$export$1005530eda016c13, n as $55f9b1ae81f22853$export$2b35b76d2e30e129, e as $e1995378a142960e$export$bf788dd355e3a401 } from "../../Collection-D_KhdLDC.js";
+import { k as $ae20dd8cbca75726$export$d6daf82dcd84e87c, q as $c5a24bc478652b5f$export$1005530eda016c13, t as $55f9b1ae81f22853$export$2b35b76d2e30e129, e as $e1995378a142960e$export$bf788dd355e3a401 } from "../../SelectionManager-CabSdgMq.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, f as $9daab02d461809db$export$683480f191c0e3ea } from "../../OverlayArrow-EZ0v_ljk.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, f as $9daab02d461809db$export$683480f191c0e3ea } from "../../OverlayArrow-DivvkAVb.js";
 import React__default, { useRef, useEffect, useMemo, useState, useCallback, forwardRef, createContext, cloneElement } from "react";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-Cl2ggwwq.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-CzJFsSHr.js";
-import { c as $a02d57049d202695$export$d085fb9e920b5ca7 } from "../../useListState-BSkHuB7-.js";
-import { K as $c87311424ea30a05$export$e1865c3bedcd822b, h as $d4ee10de306f2510$export$cd4e5573fbe2b576, c as $431fbd86ca7dc216$export$b204af158042fbac, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-44IApaa2.js";
-import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572 } from "../../usePress-BnrkvZ7e.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-C4wo8Iii.js";
+import { b as $e5be200c675c3b3a$export$a763b9476acd3eb, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-CUtZcedF.js";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-DattSD7d.js";
+import { c as $a02d57049d202695$export$d085fb9e920b5ca7 } from "../../useListState-Xsk-aOvN.js";
+import { J as $c87311424ea30a05$export$e1865c3bedcd822b, g as $d4ee10de306f2510$export$cd4e5573fbe2b576, c as $431fbd86ca7dc216$export$b204af158042fbac, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-LmGemtHE.js";
+import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572 } from "../../usePress-CBQIDzpQ.js";
 import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Cdxi6JSa.js";
-import { i as $2a25aae57d74318e$export$a05409b8bb224a5a, g as $453cc9f0df89c0a5$export$77d5aafae4e095b2 } from "../../Separator-Fl7qSeN-.js";
+import { f as $2a25aae57d74318e$export$a05409b8bb224a5a, e as $453cc9f0df89c0a5$export$77d5aafae4e095b2 } from "../../Separator-BPvqJny4.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-eaZiN2tE.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { Spacer } from "../spacer/spacer.js";
@@ -28,7 +29,7 @@ import { Tooltip } from "../tooltip/tooltip.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-ZqaIH2gh.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-D52mQcrH.js";
 function $4f58c5f72bcf79f7$export$496315a1608d9602(effect, dependencies) {
   const isInitialMount = useRef(true);
   const lastDeps = useRef(null);

package/dist/components/matrix-align/matrix-align.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { icons } from "../../icons/icons.js";
 import { pascalCase, upperFirst, camelCase } from "../../utilities/es-dash.js";
 import { Menu, MenuItem } from "../menu/menu.js";

package/dist/components/menu/menu.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-Fl7qSeN-.js";
-import { $ as $3674c52c6b3c5bce$export$27d2ad3c5815583e, a as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, b as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-Xf6AsnV-.js";
+import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-BPvqJny4.js";
+import { $ as $3674c52c6b3c5bce$export$27d2ad3c5815583e, a as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, b as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-CQ8H6Noi.js";
+import { RichLabel } from "../rich-label/rich-label.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
 import { Popover } from "../popover/popover.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { cloneElement } from "react";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 /**
  * A simple menu component.
  *
@@ -14,12 +15,13 @@ import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
  * @param {Object} props - Component props.
  * @param {string} [props.triggerLabel] - The label of the trigger button.
  * @param {JSX.Element} [props.triggerIcon] - The icon of the trigger button.
- * @param {Object} [props.triggerProps] - Props to pass to the trigger button.
+ * @param {ButtonProps} [props.triggerProps] - Props to pass to the trigger button.
  * @param {string} [props.tooltip] - Tooltip text to display on the trigger button.
  * @param {boolean} [props.keepOpen=false] - If `true`, the menu will not close when an item is selected.
  * @param {boolean} [props.openOnLongPress=false] - If `true`, the menu will open on long press instead of click. If enabled, a regular `onPress` event can also be passed to the trigger button to enable dual behavior.
- * @param {Object} [props.popoverProps] - Props to pass to the popover.
+ * @param {PopoverProps} [props.popoverProps] - Props to pass to the popover.
  * @param {boolean} [props.disabled] - If `true`, the trigger button is disabled.
+ * @param {boolean} [props.manualWidth=false] - If `true`, the popover will not have a fixed width.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Menu component.
@@ -72,6 +74,7 @@ const Menu = (props) => {
     "aria-label": ariaLabel = triggerLabel ?? __("Menu", "eightshift-ui-components"),
     openOnLongPress = false,
     disabled,
+    manualWidth,
     hidden
   } = props;
   if (hidden) {
@@ -111,10 +114,10 @@ const Menu = (props) => {
         /* @__PURE__ */ jsx(
           Popover,
           {
-            className: "es:p-0! es:any-focus:outline-hidden",
             "aria-label": ariaLabel,
-            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto"),
             ...popoverProps,
+            className: clsx("es:p-0! es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
+            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto", popoverProps?.wrapperClassName),
             children: /* @__PURE__ */ jsx(
               $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
               {
@@ -152,11 +155,11 @@ const MenuSection = (props) => {
     {
       className: clsx(
         "es:space-y-1 es:border-b es:border-b-secondary-200 es:last:border-b-0",
-        label && "es:pt-2 es:first:pt-1.5 es:last:pb-0",
+        label && "es:pt-2 es:first:pt-2.5 es:last:pb-0",
         !label && "es:has-[>_:only-child]:pb-0"
       ),
       children: [
-        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:ml-1.5 es:text-xs es:font-medium es:text-secondary-400", children: label }),
+        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:ml-2.5 es:text-sm es:text-secondary-500", children: label }),
         children
       ]
     }
@@ -172,7 +175,7 @@ const MenuSection = (props) => {
  * @preserve
  */
 const MenuSeparator = () => {
-  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:mb-1 es:border-b es:border-secondary-200" });
+  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:my-1 es:border-b es:border-secondary-300" });
 };
 /**
  * A menu item.
@@ -185,7 +188,10 @@ const MenuSeparator = () => {
  * @param {boolean} [props.selected] - If `true`, the item is marked as selected. This is visually represented by a circle.
  * @param {boolean} [props.disabled] - If `true`, the item will be disabled.
  * @param {JSX.Element} [props.endIcon] - The icon at the right side of the item.
+ * @param {string|JSX.Element} [props.subtitle] - The subtitle below the main label.
  * @param {Function} [props.onClick] - Function to run when the item is clicked.
+ * @param {boolean} [props.danger] - If `true`, the item appearance is tweaked to indicate a dangerous action.
+ * @param {boolean} [props.primary] - If `true`, the item appearance is tweaked to indicate a primary action.
  * @param {string} [props.className] - Classes to pass to the menu item.
  *
  * @returns {JSX.Element} The MenuItem component.
@@ -198,15 +204,26 @@ const MenuItem = (props) => {
   const {
     icon,
     children,
+    subtitle,
     checked,
     selected,
     disabled,
     endIcon,
     onClick,
     shortcut,
+    danger,
+    primary,
     className,
     "aria-label": ariaLabel = typeof children === "string" ? children : __("Menu item", "eightshift-ui-components")
   } = props;
+  let itemIcon = icon;
+  if (checked === true) {
+    itemIcon = icons.menuItemCheck;
+  } else if (selected === true) {
+    itemIcon = icons.menuItemCircle;
+  } else if (selected === false || checked === false) {
+    itemIcon = icons.dummySpacer;
+  }
   return /* @__PURE__ */ jsxs(
     $3674c52c6b3c5bce$export$2ce376c2cc3355c8,
     {
@@ -214,23 +231,34 @@ const MenuItem = (props) => {
       "aria-label": ariaLabel,
       isDisabled: disabled,
       className: clsx(
-        "es:mx-1 es:mb-1 es:flex es:min-w-44 es:min-h-9 es:items-center es:gap-1.5",
-        "es:first:mt-1 es:icon:size-5 es:icon:text-secondary-500",
+        "es:mx-1 es:mb-0.5 es:flex es:min-w-44 es:min-h-9.5 es:items-center es:gap-1.5",
+        "es:first:mt-1",
+        "es:last:mb-1",
         "es:select-none es:rounded-xl es:py-1.5 es:px-2.5 es:text-sm es:transition",
         "es:any-focus:outline-hidden",
-        !disabled && "es:hover:bg-secondary-100 es:focus-visible:inset-ring es:focus-visible:inset-ring-secondary-100/30 es:focus-visible:bg-secondary-100 es:contrast-more:focus-visible:bg-accent-500/15",
+        "es:icon:shrink-0",
+        !disabled && "es:focus-visible:inset-ring",
+        !disabled && !(danger || primary) && "es:hover:bg-secondary-950/5 es:focus-visible:inset-ring-secondary-950/10 es:focus-visible:bg-secondary-950/5 es:contrast-more:focus-visible:bg-accent-800",
+        !disabled && danger && "es:hover:bg-red-500/5 es:focus-visible:inset-ring-red-600/30 es:focus-visible:bg-red-600/5 es:hover:text-red-900 es:focus-visible:text-red-950 es:contrast-more:focus-visible:bg-red-800",
+        !disabled && primary && "es:hover:bg-accent-500/5 es:focus-visible:inset-ring-accent-600/30 es:focus-visible:bg-accent-600/5 es:hover:text-accent-900 es:focus-visible:text-accent-950 es:contrast-more:focus-visible:bg-accent-700",
+        !disabled && "es:contrast-more:focus-visible:text-white! es:contrast-more:focus-visible:icon:text-white!",
         disabled ? "es:text-secondary-400" : "es:text-secondary-800",
         className
       ),
       onAction: onClick,
       children: [
-        checked === true && icons.menuItemCheck,
-        selected === true && icons.menuItemCircle,
-        (selected === false || checked === false) && icons.dummySpacer,
-        icon,
-        children,
-        shortcut && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:pl-2 es:text-[0.6875rem] es:tracking-tight es:text-secondary-400", children: shortcut }),
-        endIcon && /* @__PURE__ */ jsx("div", { className: clsx(!shortcut && "es:ml-auto es:pl-2"), children: endIcon })
+        /* @__PURE__ */ jsx(
+          RichLabel,
+          {
+            icon: itemIcon,
+            label: children,
+            subtitle,
+            iconClassName: clsx(danger && "es:not-contrast-more:icon:text-red-700!", primary && "es:not-contrast-more:icon:text-accent-600!"),
+            noColor: true
+          }
+        ),
+        shortcut && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:pl-2 es:text-[0.6875rem] es:tracking-tight es:text-secondary-400 es:contrast-more:text-current es:shrink-0", children: shortcut }),
+        endIcon && /* @__PURE__ */ jsx("div", { className: clsx("es:shrink-0 es:icon:shrink-0", !shortcut && "es:ml-auto es:pl-2"), children: endIcon })
       ]
     }
   );
@@ -242,7 +270,8 @@ const MenuItem = (props) => {
  * @param {Object} props - Component props.
  * @param {JSX.Element} props.trigger - The trigger button for the submenu. **This should be a `MenuItem`.**
  * @param {boolean} [props.keepOpen=false] - If `true`, the submenu will not close when an item is selected.
- * @param {Object} [props.popoverProps] - Props to pass to the popover.
+ * @param {boolean} [props.manualWidth=false] - If `true`, the popover will not have a fixed width.
+ * @param {PopoverProps} [props.popoverProps] - Props to pass to the popover.
  *
  * @returns {JSX.Element} The SubMenuItem component.
  *
@@ -251,7 +280,7 @@ const MenuItem = (props) => {
  * @preserve
  */
 const SubMenuItem = (props) => {
-  const { children, trigger, popoverProps, keepOpen } = props;
+  const { children, trigger, popoverProps, keepOpen, manualWidth } = props;
   let additionalProps = {};
   if (keepOpen) {
     additionalProps = {
@@ -265,15 +294,15 @@ const SubMenuItem = (props) => {
   }
   return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
     cloneElement(trigger, {
-      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400", children: icons.caretRightFill })
+      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400 es:contrast-more:text-current", children: icons.caretRightFill })
     }),
     /* @__PURE__ */ jsx(
       Popover,
       {
         "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
-        className: "es:p-0! es:any-focus:outline-hidden",
         offset: -1,
         ...popoverProps,
+        className: clsx("es:p-0! es:any-focus:outline-hidden", !manualWidth && "es:w-56", manualWidth && "es:max-w-80", popoverProps?.className),
         children: /* @__PURE__ */ jsx(
           $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
           {
@@ -288,10 +317,51 @@ const SubMenuItem = (props) => {
   ] });
 };
 SubMenuItem.displayName = "SubMenuItem";
+/**
+ * A decorative menu section header, used to label groups of menu items.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The MenuSectionHeader component.
+ *
+ * @example
+ * <MenuSectionHeader>Section</MenuSectionHeader>
+ *
+ * @preserve
+ */
+const MenuSectionHeader = (props) => {
+  const {
+    children,
+    className,
+    hidden
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    $3674c52c6b3c5bce$export$2ce376c2cc3355c8,
+    {
+      ...props,
+      className: clsx(
+        "es:mx-1 es:p-2.5 es:pb-1 es:flex es:min-w-44 es:items-center es:gap-1.5",
+        "es:select-none es:text-sm",
+        "es:icon:shrink-0",
+        "es:text-secondary-500",
+        className
+      ),
+      isDisabled: true,
+      children
+    }
+  );
+};
+MenuSectionHeader.displayName = "MenuSectionHeader";
 export {
   Menu,
   MenuItem,
   MenuSection,
+  MenuSectionHeader,
   MenuSeparator,
   SubMenuItem
 };

package/dist/components/modal/modal.js

@@ -1,12 +1,12 @@
 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-Xf6AsnV-.js";
+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-CQ8H6Noi.js";
 import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-bh1HU5HH.js";
 import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.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-EZ0v_ljk.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-DivvkAVb.js";
 import { Button } from "../button/button.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-LF707GK8.js";
@@ -221,7 +221,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @param {JSX.Element|JSX.Element[]} [props.headerActions] - Actions to display in the modal header, next to the close button (if enabled).
  * @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.
+ * @param {ButtonProps} [props.triggerProps] - Props to pass to the trigger button.
  * @param {ReactNode} [props.customTrigger] - If provided, replaces the default trigger button. The passed component should be something button-related that can open the modal.
  * @param {string|JSX.Element} [props.title] - Title of the modal.
  * @param {boolean} [props.noCloseButton] - If `true`, the close button will not be displayed.

package/dist/components/notice/notice.js

@@ -77,7 +77,8 @@ const Notice = (props) => {
       className: clsx(
         "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-xl es:border es:bg-linear-to-tr es:shadow-sm es:inset-ring-1",
         styles[type].className,
-        icon || styles[type].icon ? "es:gap-x-1.5 es:p-2 es:pr-3 es:pl-2.5" : "es:px-2.5 es:py-2",
+        "es:icon:shrink-0",
+        icon || styles[type].icon ? "es:gap-x-2 es:py-2 es:pl-2 es:pr-3" : "es:py-2.5 es:px-3",
         className
       ),
       children: [
@@ -85,8 +86,8 @@ const Notice = (props) => {
           "div",
           {
             className: clsx(
-              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-5.5",
-              alignIconToTitle ? "es:self-baseline" : "es:self-center",
+              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-6",
+              alignIconToTitle ? "es:self-baseline" : "es:self-center-safe",
               styles[type].iconColorClassName
             ),
             children: icon ?? styles[type].icon
@@ -97,7 +98,7 @@ const Notice = (props) => {
           {
             className: clsx(
               "es:col-span-2 es:col-start-2 es:text-balance es:text-sm es:leading-tight",
-              subtitle ? "es:self-end" : "es:row-span-2 es:self-center",
+              subtitle ? "es:self-end" : "es:row-span-2 es:self-center-safe",
               styles[type].textColorClassName
             ),
             children: label
@@ -109,7 +110,7 @@ const Notice = (props) => {
             className: clsx(
               "es:col-span-2 es:col-start-2 es:text-balance es:text-xs es:leading-tight es:pt-0.5",
               styles[type].subtitleColorClassName,
-              label ? "es:self-start" : "es:row-span-2 es:self-center"
+              label ? "es:self-start" : "es:row-span-2 es:self-center-safe"
             ),
             children: subtitle
           }

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

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { forwardRef, createContext, useRef, useState, cloneElement } from "react";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
-import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Group-C4cXobNT.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
+import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-ChJaTNa5.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-RTwMSBs-.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-npzfSoYo.js";
 import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
-import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-BeMxJA29.js";
+import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-JhWPy1JY.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-BCjjZWaz.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/option-select/option-select.js

@@ -7,7 +7,7 @@ import { SubMenuItem, MenuSeparator, MenuItem, Menu } from "../menu/menu.js";
 import { RadioButtonGroup, RadioButton } from "../radio/radio.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 /**
  * A component that allows the user to select an option from a list of options.
  *

package/dist/components/placeholders/file-placeholder.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { icons } from "../../icons/icons.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";