@eightshift/ui-components 0.0.1 → 0.0.2

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

@@ -1,25 +1,26 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$24d547caef80ccd1, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, c as $13c3c67164f4d5be$export$4c260019440d418f, B as Button } from "../../button-BkkdyHfJ.js";
-import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DyqpTRPe.js";
-import { b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-jsbb4ugq.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
-import { n as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-BsiH7-5Y.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-wtMA4667.js";
+import { $ as $d2b4bc8c273e7be6$export$24d547caef80ccd1, a as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-eebLs4cp.js";
+import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-Dkdm2-E7.js";
+import { b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BJA4rmIo.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
+import { n as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DIBzm1e4.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ILxgMZy5.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
-import React__default, { useReducer, useRef, useEffect, forwardRef, createContext, useMemo, useState, useCallback } from "react";
-import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-C3K8zAKj.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-Prmz0h0A.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import React__default, { useReducer, useRef, useEffect, forwardRef, createContext, useMemo, useState } from "react";
+import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-B0hyd-S4.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-WsEL47qR.js";
+import { $ as $13c3c67164f4d5be$export$4c260019440d418f, B as Button } from "../../button-idVI4jmd.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 import { icons } from "../../icons/icons.js";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { Spacer } from "../spacer/spacer.js";
-import { T as Tooltip } from "../../tooltip-CkCndvTI.js";
+import { T as Tooltip } from "../../tooltip-T6H9uF-Z.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 { P as Popover } from "../../popover-Dx3vKXUX.js";
+import { P as Popover } from "../../popover-o2Q28Ljn.js";
 import { a as $0d86e9c8f07f9a7b$export$79c0c687a5963b0a } from "../../useListData-BelKu4kx.js";
 var $03c9a1a10de12f06$exports = {};
 $03c9a1a10de12f06$exports = {
@@ -670,6 +671,7 @@ function c(e, u, c2) {
  * @param {string} [props.className] - Classes to pass to the input field.
  * @param {number} [props.inputDebounceDelay=500] - The delay in milliseconds before the input value is considered final.
  * @param {Function} [props.suggestionTypeIconOverride] - Allows overriding the default icon for the suggestion type, e.g. when using CPTs. Should be in the format: `(type) => icon or React component`.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The LinkInput component.
  *
@@ -697,7 +699,8 @@ const LinkInput = (props) => {
     suggestionTypeIconOverride,
     fetchSuggestions,
     className,
-    inputDebounceDelay = 500
+    inputDebounceDelay = 500,
+    hidden
   } = props;
   const [inputValue, setInputValue] = useState(url ?? "");
   const [suggestionsVisible, setSuggestionsVisible] = useState(false);
@@ -720,21 +723,21 @@ const LinkInput = (props) => {
     return ((_a2 = url2 == null ? void 0 : url2.trim()) == null ? void 0 : _a2.length) < 3 || (url2 == null ? void 0 : url2.startsWith("#")) || (url2 == null ? void 0 : url2.startsWith(":")) || (url2 == null ? void 0 : url2.startsWith("mailto:")) || (url2 == null ? void 0 : url2.startsWith("tel:")) || (url2 == null ? void 0 : url2.startsWith("http://")) || (url2 == null ? void 0 : url2.startsWith("https://"));
   };
   const debounced = c(
-    useCallback(
-      (value) => {
-        onChange({ url: value, isAnchor: value == null ? void 0 : value.includes("#") });
-        if (shouldNotShowSuggestions(value)) {
-          setSuggestionsVisible(false);
-        } else {
-          suggestionList.setFilterText(value);
-          setSuggestionsVisible((value == null ? void 0 : value.length) > 3);
-        }
-      },
-      [onChange, suggestionList]
-    ),
+    (value) => {
+      onChange({ url: value, isAnchor: value == null ? void 0 : value.includes("#") });
+      if (shouldNotShowSuggestions(value)) {
+        setSuggestionsVisible(false);
+      } else {
+        suggestionList.setFilterText(value);
+        setSuggestionsVisible((value == null ? void 0 : value.length) > 3);
+      }
+    },
     inputDebounceDelay,
     { maxWait: 2e3 }
   );
+  if (hidden) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       $440f4836bcb56932$export$b94867ecbd698f21,
@@ -768,7 +771,7 @@ const LinkInput = (props) => {
                     {
                       placeholder,
                       ref: inputRef,
-                      className: classnames(
+                      className: clsx(
                         "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-py-2 es-uic-pl-2 es-uic-pr-1 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
                         "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
                         (inputValue == null ? void 0 : inputValue.length) > 0 && "es-uic-pr-8",
@@ -791,7 +794,7 @@ const LinkInput = (props) => {
                       children: /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { children: /* @__PURE__ */ jsx(Tooltip, { text: __("Clear", "eightshift-ui-components"), children: /* @__PURE__ */ jsx(
                         "div",
                         {
-                          className: classnames(
+                          className: clsx(
                             "es-uic-flex es-uic-size-8 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-white/85 es-uic-text-gray-600 es-uic-backdrop-blur es-uic-transition",
                             "hover:es-uic-bg-red-50 hover:es-uic-text-red-500",
                             "[&>svg]:es-uic-size-6"
@@ -852,8 +855,9 @@ const LinkInput = (props) => {
                 const {
                   label: title,
                   value: url2,
-                  metadata: { subtype }
+                  metadata: { subtype: rawSubtype }
                 } = item;
+                const subtype = rawSubtype ?? "page";
                 let typeIcon = icons.file;
                 if (subtype.toLowerCase() === "url") {
                   typeIcon = icons.externalLink;
@@ -878,7 +882,7 @@ const LinkInput = (props) => {
                     textValue: label,
                     size: "large",
                     type: "ghost",
-                    className: classnames(
+                    className: clsx(
                       "es-uic-w-full es-uic-text-start",
                       "es-uic-grid es-uic-grid-cols-[auto,_minmax(0,_1fr)] es-uic-grid-rows-2 es-uic-items-center es-uic-justify-items-start es-uic-gap-x-2 es-uic-gap-y-0",
                       "[&>svg]:es-uic-row-span-2 [&>svg]:es-uic-shrink-0",

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

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-w9gDaJkV.js";
-import { classnames } from "../../utilities/classnames.js";
+import { b as $eed445e0843c11d0$export$41f133550aa26f48, c as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-D3Vr4vvC.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * A component that allows selecting a single or multiple options from a list.
@@ -28,6 +28,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @param {boolean} [props.canDeselect=false] - If `true`, the selected value can be deselected (`null` is set in that case).
  * @param {ListBoxOrientation} [props.orientation='horizontal'] - The orientation of the list. If all options have only an icon set, the orientation is forced to be horizontal.
  * @param {string} [props.className] - Classes to pass to the list.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ListBox component.
  *
@@ -63,8 +64,12 @@ const ListBox = (props) => {
     canDeselect = false,
     orientation: setOrientation = "horizontal",
     className,
+    hidden,
     ...rest
   } = props;
+  if (hidden) {
+    return null;
+  }
   const mappedOptions = options.map((option) => ({
     ...option,
     id: option.id ?? option.value
@@ -90,7 +95,7 @@ const ListBox = (props) => {
         $eed445e0843c11d0$export$41f133550aa26f48,
         {
           selectionMode,
-          className: classnames(
+          className: clsx(
             "es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-p-1 es-uic-text-sm es-uic-shadow-sm es-uic-transition",
             "focus:es-uic-outline-none",
             orientation === "horizontal" && "es-uic-flex es-uic-w-fit es-uic-max-w-full es-uic-gap-0.5",
@@ -115,7 +120,7 @@ const ListBox = (props) => {
                 textValue: label2 ?? tooltip,
                 isDisabled: disabled,
                 className: ({ isDisabled, isSelected }) => {
-                  return classnames(
+                  return clsx(
                     "es-uic-flex es-uic-min-h-9 es-uic-select-none es-uic-rounded-md es-uic-border es-uic-transition",
                     "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
                     isSelected && !disabled && "es-uic-bg-teal-600 es-uic-text-white es-uic-border-teal-600 after:es-uic-opacity-45 es-uic-border es-uic-shadow-md es-uic-shadow-teal-500/25",
@@ -135,7 +140,7 @@ const ListBox = (props) => {
                     icon: icon2,
                     label: label2,
                     subtitle: subtitle2,
-                    className: classnames(orientation === "horizontal" && "leading-none"),
+                    className: clsx(orientation === "horizontal" && "leading-none"),
                     contentsOnly: orientation === "horizontal-tiles"
                   }
                 )

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

@@ -1,12 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
-import { P as Popover } from "../../popover-Dx3vKXUX.js";
-import { B as Button } from "../../button-BkkdyHfJ.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { P as Popover } from "../../popover-o2Q28Ljn.js";
+import { B as Button } from "../../button-idVI4jmd.js";
 import { icons } from "../../icons/icons.js";
 import { upperFirst, camelCase } from "../../utilities/text-helpers.js";
-import { classnames } from "../../utilities/classnames.js";
-import { T as Tooltip } from "../../tooltip-CkCndvTI.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { T as Tooltip } from "../../tooltip-T6H9uF-Z.js";
 import { BaseControl } from "../base-control/base-control.js";
 /**
  * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.
@@ -22,6 +22,7 @@ import { BaseControl } from "../base-control/base-control.js";
  * @param {JSX.Element} [props.icon] - Icon to display within the button.
  * @param {string} [props.subtitle] - Subtitle to display.
  * @param {string} [props.popoverPosition='bottom'] - The position of the popover.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The MatrixAlign component.
  *
@@ -47,13 +48,17 @@ const MatrixAlign = (props) => {
     icon,
     subtitle,
     "aria-label": ariaLabel,
-    popoverPosition
+    popoverPosition,
+    hidden
   } = props;
   const [currentValue, setCurrentValue] = useState(value);
   const [tooltipText, setTooltipText] = useState(null);
   const [popoverOpen, setPopoverOpen] = useState(false);
   const ref = useRef(null);
   const innerRef = useRef(null);
+  if (hidden) {
+    return null;
+  }
   const allSizeOptions = [
     {
       value: "top left",
@@ -150,7 +155,7 @@ const MatrixAlign = (props) => {
               "div",
               {
                 ref: innerRef,
-                className: classnames(
+                className: clsx(
                   "es-uic-grid",
                   size === "3x3" && "es-uic-grid-cols-3 es-uic-grid-rows-3",
                   size === "2x2" && "es-uic-grid-cols-2 es-uic-grid-rows-2"

package/dist/components/menu/menu.js

@@ -1,23 +1,23 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $982254629710d113$export$b95089534ab7c1fd, b as $453cc9f0df89c0a5$export$77d5aafae4e095b2, c as $431f98aba6844401$export$1ff3c3f08ae963c0, d as $431f98aba6844401$export$6615d83f6de245ce, e as $72a5793c14baf454$export$8b251419efc915eb } from "../../Separator-DHn0CwdK.js";
-import { p as $8a26561d2877236e$export$c24ed0104d07eab9, f as $880e95eb8b93ba9a$export$ecf600387e221c37, $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852, j as $7135fc7d473fd974$export$e7c29ae2353b16ea, n as $7135fc7d473fd974$export$6cd28814d92fa9c9, o as $7135fc7d473fd974$export$727c8fc270210f13, q as $7135fc7d473fd974$export$6e2c8f0811a474ce } from "../../SelectionManager-mefd0ThJ.js";
-import { e as $bdb11010cef70236$export$f680877a34711e37, d as $3ef42575df84b30b$export$9d1611c77c2fe928, k as $bdb11010cef70236$export$b4cc09c592e8fdb8, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, j as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, m as $5dc95899b306f630$export$c9058316764c140e, l as $df56164dff5785e2$export$4338b53315abf666, c as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-BsiH7-5Y.js";
+import { $ as $982254629710d113$export$b95089534ab7c1fd, b as $453cc9f0df89c0a5$export$77d5aafae4e095b2, c as $431f98aba6844401$export$1ff3c3f08ae963c0, d as $431f98aba6844401$export$6615d83f6de245ce, e as $72a5793c14baf454$export$8b251419efc915eb } from "../../Separator-B6rnDabE.js";
+import { p as $8a26561d2877236e$export$c24ed0104d07eab9, f as $880e95eb8b93ba9a$export$ecf600387e221c37, $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852, j as $7135fc7d473fd974$export$e7c29ae2353b16ea, n as $7135fc7d473fd974$export$6cd28814d92fa9c9, o as $7135fc7d473fd974$export$727c8fc270210f13, q as $7135fc7d473fd974$export$6e2c8f0811a474ce } from "../../SelectionManager-sedvcM-1.js";
+import { e as $bdb11010cef70236$export$f680877a34711e37, d as $3ef42575df84b30b$export$9d1611c77c2fe928, k as $bdb11010cef70236$export$b4cc09c592e8fdb8, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, g as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, j as $64fa3d84918910a7$export$2881499e37b75b9a, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, m as $5dc95899b306f630$export$c9058316764c140e, l as $df56164dff5785e2$export$4338b53315abf666, c as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-DIBzm1e4.js";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, forwardRef, useContext, cloneElement } from "react";
-import { $ as $628037886ba31236$export$f9d5c8beee7d008d, a as $de32f1b87079253c$export$d2f961adcb0afbe, b as $07b14b47974efb58$export$9b9a0cd73afb7ca4, c as $f1ab8c75478c6f73$export$3351871ee4b288b8, d as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98, P as Popover } from "../../popover-Dx3vKXUX.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
+import { $ as $628037886ba31236$export$f9d5c8beee7d008d, a as $de32f1b87079253c$export$d2f961adcb0afbe, b as $07b14b47974efb58$export$9b9a0cd73afb7ca4, c as $f1ab8c75478c6f73$export$3351871ee4b288b8, d as $e0b6e0b68ec7f50f$export$872b660ac5a1ff98, P as Popover } from "../../popover-o2Q28Ljn.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
-import { $ as $9daab02d461809db$export$683480f191c0e3ea, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../tooltip-CkCndvTI.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456, a as $507fabe10e71c6fb$export$b9b3dfddab17db27, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, w as $507fabe10e71c6fb$export$98e20ec92f614cfe, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-C3K8zAKj.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-Prmz0h0A.js";
-import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572, $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-BQgVor4T.js";
-import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-5q1Gek1J.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-jMy6xdVq.js";
-import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope-1u9yyfIN.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cc-4eouh.js";
+import { $ as $9daab02d461809db$export$683480f191c0e3ea, a as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../tooltip-T6H9uF-Z.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456, a as $507fabe10e71c6fb$export$b9b3dfddab17db27, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, w as $507fabe10e71c6fb$export$98e20ec92f614cfe, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../focusSafely-B0hyd-S4.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-WsEL47qR.js";
+import { b as $ea8dcbcb9ea1b556$export$9a302a45f65d0572, $ as $f6c31cce2adf654f$export$45712eceda6fad21, a as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18 } from "../../usePress-B42RawCH.js";
+import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-CHfpEdlE.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BAcFg5GO.js";
+import { $ as $9bf71ea28793e738$export$20e40289641fbbb6 } from "../../FocusScope-B9b0VMib.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CRx_hYC4.js";
 import { icons } from "../../icons/icons.js";
-import { B as Button } from "../../button-BkkdyHfJ.js";
-import { classnames } from "../../utilities/classnames.js";
-import { _ as __ } from "../../default-i18n-BhE-OUmt.js";
+import { B as Button } from "../../button-idVI4jmd.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
 var $c0398ad35c3639b7$exports = {};
 $c0398ad35c3639b7$exports = {
   "longPressMessage": `اضغط مطولاً أو اضغط على Alt + السهم لأسفل لفتح القائمة`
@@ -1346,6 +1346,7 @@ function $3674c52c6b3c5bce$var$MenuItemTriggerInner({ item, popover, parentMenuR
  * @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 {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Menu component.
  *
@@ -1396,8 +1397,12 @@ const Menu = (props) => {
     tooltip,
     keepOpen = false,
     "aria-label": ariaLabel = triggerLabel ?? __("Menu", "eightshift-ui-components"),
-    openOnLongPress = false
+    openOnLongPress = false,
+    hidden
   } = props;
+  if (hidden) {
+    return null;
+  }
   let additionalProps = {};
   if (keepOpen) {
     additionalProps = {
@@ -1436,7 +1441,7 @@ const Menu = (props) => {
           {
             className: "!es-uic-p-0 focus:es-uic-outline-none",
             "aria-label": ariaLabel,
-            wrapperClassName: classnames(!hasSubmenuItems && "es-uic-overflow-y-auto"),
+            wrapperClassName: clsx(!hasSubmenuItems && "es-uic-overflow-y-auto"),
             ...popoverProps,
             children: /* @__PURE__ */ jsx(
               $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
@@ -1474,7 +1479,7 @@ const MenuSection = (props) => {
   return /* @__PURE__ */ jsxs(
     $7135fc7d473fd974$export$6e2c8f0811a474ce,
     {
-      className: classnames(
+      className: clsx(
         "es-uic-space-y-1 es-uic-border-b es-uic-pb-1 last:es-uic-border-b-0",
         label && "es-uic-pt-2 first:es-uic-pt-1.5",
         !label && "last:es-uic-pb-1"
@@ -1537,7 +1542,7 @@ const MenuItem = (props) => {
       ...props,
       "aria-label": ariaLabel,
       isDisabled: disabled,
-      className: classnames(
+      className: clsx(
         "es-uic-mx-1 es-uic-mb-1 es-uic-flex es-uic-min-w-40 es-uic-items-center es-uic-gap-1.5",
         "first:es-uic-mt-1 [&>svg]:es-uic-size-5 [&>svg]:es-uic-text-gray-500",
         "es-uic-select-none es-uic-rounded es-uic-border es-uic-border-transparent es-uic-px-1 es-uic-py-1.5 es-uic-text-sm es-uic-transition",
@@ -1554,7 +1559,7 @@ const MenuItem = (props) => {
         icon,
         children,
         shortcut && /* @__PURE__ */ jsx("div", { className: "es-uic-ml-auto es-uic-text-[0.6875rem] es-uic-tracking-tight es-uic-text-gray-400", children: shortcut }),
-        endIcon && /* @__PURE__ */ jsx("div", { className: classnames(!shortcut && "es-uic-ml-auto"), children: endIcon })
+        endIcon && /* @__PURE__ */ jsx("div", { className: clsx(!shortcut && "es-uic-ml-auto"), children: endIcon })
       ]
     }
   );

package/dist/components/notice/notice.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { icons } from "../../icons/icons.js";
 /**
  * A simple notice component.
@@ -12,6 +12,7 @@ import { icons } from "../../icons/icons.js";
  * @param {string} [props.className] - Classes to pass to the notice.
  * @param {NoticeType} [props.type='default'] - The type of the notice.
  * @param {boolean} [props.alignIconToTitle=false] - If `true`, the icon will be aligned to the first row of title, instead of vertically centered.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Notice component.
  *
@@ -23,7 +24,10 @@ import { icons } from "../../icons/icons.js";
  * @preserve
  */
 const Notice = (props) => {
-  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false } = props;
+  const { icon, label, subtitle, className, type = "default", alignIconToTitle = false, hidden } = props;
+  if (hidden) {
+    return null;
+  }
   const styles = {
     info: {
       icon: icons.infoCircle,
@@ -70,17 +74,17 @@ const Notice = (props) => {
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classnames(
+      className: clsx(
         "es-uic-grid es-uic-grid-cols-[auto,_1fr] es-uic-grid-rows-[auto,_auto] es-uic-rounded-md es-uic-border es-uic-bg-gradient-to-tr es-uic-shadow-sm",
         styles[type].className,
-        icon || styles[type].icon ? "es-uic-gap-x-1.5 es-uic-p-1.5" : "es-uic-py-1.5 es-uic-px-2",
+        icon || styles[type].icon ? "es-uic-gap-x-1.5 es-uic-p-1.5" : "es-uic-px-2 es-uic-py-1.5",
         className
       ),
       children: [
         (icon || styles[type].icon) && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classnames(
+            className: clsx(
               "es-uic-col-span-1 es-uic-col-start-1 es-uic-row-span-2 es-uic-row-start-1 es-uic-shrink-0 es-uic-self-center [&>svg]:es-uic-size-7",
               alignIconToTitle ? "es-uic-self-baseline" : "es-uic-self-center",
               styles[type].iconColor
@@ -91,7 +95,7 @@ const Notice = (props) => {
         label && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classnames(
+            className: clsx(
               "es-uic-col-span-2 es-uic-col-start-2 es-uic-text-balance es-uic-text-sm es-uic-leading-tight",
               subtitle ? "es-uic-self-end" : "es-uic-row-span-2 es-uic-self-center",
               styles[type].textColor
@@ -102,7 +106,7 @@ const Notice = (props) => {
         subtitle && /* @__PURE__ */ jsx(
           "span",
           {
-            className: classnames(
+            className: clsx(
               "es-uic-col-span-2 es-uic-col-start-2 es-uic-text-balance es-uic-text-xs es-uic-leading-tight",
               styles[type].subtitleColor,
               label ? "es-uic-self-start" : "es-uic-row-span-2 es-uic-self-center"

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

@@ -1,18 +1,19 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { forwardRef, useRef, createContext, useState, cloneElement } from "react";
-import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DyqpTRPe.js";
-import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-jsbb4ugq.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BPzS-sR7.js";
-import { $ as $d2b4bc8c273e7be6$export$24d547caef80ccd1, B as Button } from "../../button-BkkdyHfJ.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-BsiH7-5Y.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-wtMA4667.js";
+import { $ as $a049562f99e7db0e$export$f9c6924e160136d1, a as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-Dkdm2-E7.js";
+import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BJA4rmIo.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
+import { $ as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-eebLs4cp.js";
+import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, c as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DIBzm1e4.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ILxgMZy5.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BM136LvS.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-jMy6xdVq.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-BLU3uhSR.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BAcFg5GO.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberFieldState-ZH2Qyyxh.js";
+import { B as Button } from "../../button-idVI4jmd.js";
 import { icons } from "../../icons/icons.js";
-import { classnames } from "../../utilities/classnames.js";
+import { c as clsx } from "../../lite-pbIeT7tm.js";
 import { BaseControl } from "../base-control/base-control.js";
 const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
 const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
@@ -129,6 +130,7 @@ const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef($b9
  * @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
  * @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
  * @param {NumberPickerSize} [props.size='default'] - Determines the input field size.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The NumberPicker component.
  *
@@ -162,10 +164,14 @@ const NumberPicker = ({
   inline,
   noScrollToChange = false,
   size = "default",
+  hidden,
   ...props
 }) => {
   var _a, _b, _c, _d;
   const [isInputFocused, setIsInputFocused] = useState(false);
+  if (hidden) {
+    return null;
+  }
   const sizes = {
     compact: {
       field: "es-uic-min-h-5",
@@ -205,7 +211,7 @@ const NumberPicker = ({
           children: /* @__PURE__ */ jsxs(
             $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
             {
-              className: classnames(
+              className: clsx(
                 "es-uic-flex es-uic-w-fit es-uic-items-center es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-pl-1 es-uic-pr-0.5 es-uic-shadow-sm es-uic-transition",
                 isInputFocused && "es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
                 !prefix && (((_a = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _a.noPrefixPadding) ?? sizes.default.noPrefixPadding),
@@ -216,7 +222,7 @@ const NumberPicker = ({
                   "span",
                   {
                     slot: "prefix",
-                    className: "es-uic-col-start-1 es-uic-row-span-2 es-uic-mr-0.5 es-uic-select-none es-uic-self-center es-uic-text-gray-500",
+                    className: "es-uic-col-start-1 es-uic-row-span-2 es-uic-mr-0.5 es-uic-select-none es-uic-self-center es-uic-text-gray-500 es-uic-text-xs",
                     children: prefix
                   }
                 ),
@@ -236,7 +242,7 @@ const NumberPicker = ({
                   "span",
                   {
                     slot: "suffix",
-                    className: "es-uic-col-start-3 es-uic-row-span-2 es-uic-select-none es-uic-self-center es-uic-text-gray-500",
+                    className: "es-uic-col-start-3 es-uic-row-span-2 es-uic-select-none es-uic-self-center es-uic-text-gray-500 es-uic-text-xs",
                     children: suffix
                   }
                 ),