@eightshift/ui-components 5.3.1 → 5.3.3

package/dist/components/button/button.js

@@ -10,7 +10,7 @@ import { c as cva } from "../../index-Dq3gT5pW.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-LF707GK8.js";
+import "../../react-jsx-parser.min-VUl-CuCv.js";
 function $2680b1829e803644$export$fa142eb1681c520(props, ref) {
   const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, orientation = "horizontal" } = props;
   let [isInToolbar, setInToolbar] = useState(false);
@@ -89,6 +89,11 @@ const $13c3c67164f4d5be$export$4c260019440d418f = /* @__PURE__ */ forwardRef(fun
     "data-orientation": props.orientation || "horizontal"
   }, renderProps.children);
 });
+/**
+ * @typedef {import('../tooltip/tooltip').TooltipProps} TooltipProps
+ *
+ * @preserve
+ * */
 /**
  * @typedef {Object} ButtonProps
  * @property {JSX.Element} [props.icon] - Icon to display within the button.
@@ -328,8 +333,8 @@ const Button = (props) => {
       isPending: pending,
       className: componentClasses({
         disabled: !pending && disabled,
-        hasIcon: pending || Boolean(icon),
-        iconOnly: pending || Boolean(icon && !children),
+        hasIcon: Boolean(icon),
+        iconOnly: Boolean(icon && !children),
         size,
         type
       }),
@@ -341,7 +346,11 @@ const Button = (props) => {
           icon,
           children
         ] }),
-        isPending && /* @__PURE__ */ jsxs(Fragment, { children: [
+        isPending && /* @__PURE__ */ jsxs("div", { className: "es:relative", children: [
+          /* @__PURE__ */ jsxs("div", { className: "es:invisible", children: [
+            icon,
+            children
+          ] }),
           /* @__PURE__ */ jsx(
             $0393f8ab869a0f1a$export$c17561cb55d4db30,
             {
@@ -350,7 +359,7 @@ const Button = (props) => {
               isIndeterminate: true
             }
           ),
-          cloneElement(icons.loader, { className: "es:motion-preset-spin es:motion-duration-1750" })
+          cloneElement(icons.loader, { className: "es:motion-preset-spin es:motion-duration-2000 es:absolute es:inset-0 es:m-auto" })
         ] })
       ] })
     }

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

@@ -4,7 +4,7 @@ import "../../default-i18n-CN_q3KUs.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-LF707GK8.js";
+import "../../react-jsx-parser.min-VUl-CuCv.js";
 /**
  * A Draggable item handle.
  *

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

@@ -4,7 +4,7 @@ import "../../default-i18n-CN_q3KUs.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { cloneElement } from "react";
-import "../../react-jsx-parser.min-LF707GK8.js";
+import "../../react-jsx-parser.min-VUl-CuCv.js";
 /**
  * A DraggableList item.
  *

package/dist/components/menu/menu.js

@@ -8,6 +8,12 @@ import { Popover } from "../popover/popover.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { cloneElement } from "react";
 import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
+/**
+ * @typedef {import('../button/button').ButtonProps} ButtonProps
+ * @typedef {import('../popover/popover').PopoverProps} PopoverProps
+ *
+ * @preserve
+ * */
 /**
  * A simple menu component.
  *
@@ -210,6 +216,7 @@ const MenuItem = (props) => {
     disabled,
     endIcon,
     onClick,
+    onClickNative = (event) => event?.stopPropagation(),
     shortcut,
     danger,
     primary,
@@ -246,6 +253,7 @@ const MenuItem = (props) => {
         className
       ),
       onAction: onClick,
+      onClick: onClickNative,
       children: [
         /* @__PURE__ */ jsx(
           RichLabel,
@@ -294,7 +302,7 @@ const SubMenuItem = (props) => {
   }
   return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
     cloneElement(trigger, {
-      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400 es:contrast-more:text-current", children: icons.caretRightFill })
+      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-500 es:contrast-more:text-current es:icon:size-3! es:icon:stroke-2!", children: icons.chevronRight })
     }),
     /* @__PURE__ */ jsx(
       Popover,

package/dist/components/modal/modal.js

@@ -9,7 +9,7 @@ import { Button } from "../button/button.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";
+import "../../react-jsx-parser.min-VUl-CuCv.js";
 import { HStack } from "../layout/hstack.js";
 let $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 function $5df64b3807dc15ee$export$d699905dd57c73ca() {
@@ -210,6 +210,11 @@ function $f3f84453ead64de5$var$ModalContent(props) {
     onDismiss: state.close
   }), renderProps.children);
 }
+/**
+ * @typedef {import('../button/button').ButtonProps} ButtonProps
+ *
+ * @preserve
+ * */
 /**
  * Modal dialog.
  *

package/dist/components/popover/popover.js

@@ -133,6 +133,11 @@ const Popover = (props) => {
     }
   );
 };
+/**
+ * @typedef {import('../button/button').ButtonProps} ButtonProps
+ *
+ * @preserve
+ * */
 /**
  * A simple version of the Popover component that includes a trigger button.
  * The control of the popover is handled internally. A custom trigger can be provided.

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

@@ -11,7 +11,7 @@ import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-Ax
 import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6 } from "../../../useDragAndDrop-DVLrIdEn.js";
 import { useRef, useEffect, cloneElement } from "react";
 import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-LF707GK8.js";
+import "../../../react-jsx-parser.min-VUl-CuCv.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";
 import { c as clsx } from "../../../utils-cvK1vxO7.js";

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

@@ -10,7 +10,7 @@ import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-
 import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-ciHB1pub.js";
 import { useRef, useEffect, cloneElement, useContext } from "react";
 import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-LF707GK8.js";
+import "../../../react-jsx-parser.min-VUl-CuCv.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";
 import { unescapeHTML } from "../../../utilities/text-helpers.js";

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

@@ -11,7 +11,7 @@ import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-Ax
 import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6 } from "../../../useDragAndDrop-DVLrIdEn.js";
 import { useRef, cloneElement } from "react";
 import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-LF707GK8.js";
+import "../../../react-jsx-parser.min-VUl-CuCv.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";
 import { c as clsx } from "../../../utils-cvK1vxO7.js";

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

@@ -3,7 +3,7 @@ import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-
 import { c as clsx } from "../../../utils-cvK1vxO7.js";
 import { icons } from "../../../icons/icons.js";
 import "react";
-import "../../../react-jsx-parser.min-LF707GK8.js";
+import "../../../react-jsx-parser.min-VUl-CuCv.js";
 import { AnimatedVisibility } from "../../animated-visibility/animated-visibility.js";
 const OptionItemBase = (props) => /* @__PURE__ */ jsx(
   $eed445e0843c11d0$export$a11e76429ed99b4,

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

@@ -10,7 +10,7 @@ import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-
 import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-ciHB1pub.js";
 import { useRef, cloneElement, useContext } from "react";
 import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-LF707GK8.js";
+import "../../../react-jsx-parser.min-VUl-CuCv.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";
 import { c as clsx } from "../../../utils-cvK1vxO7.js";

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

@@ -102,6 +102,11 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
     "data-focus-visible": isFocusVisible || void 0
   });
 });
+/**
+ * @typedef {import('../tooltip/tooltip').TooltipProps} TooltipProps
+ *
+ * @preserve
+ * */
 /**
  * A simple toggle button component.
  *
@@ -173,8 +178,10 @@ const ToggleButton2 = (props) => {
       "es:btn-group-mid:rounded-none",
       "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
       "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
-      "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm",
-      "es:cursor-pointer",
+      "es:enabled:not-pending:cursor-pointer",
+      "es:shrink-0",
+      "es:pending:shadow-none! es:pending:cursor-wait",
+      "es:bg-radial-[at_50%_125%]",
       icon && children ? "es:justify-start" : "es:justify-center",
       className
     ],
@@ -184,10 +191,6 @@ const ToggleButton2 = (props) => {
           small: "es:icon:size-5 es:rounded-7",
           default: "es:icon:size-5 es:rounded-10",
           large: "es:icon:size-6 es:rounded-xl"
-        },
-        type: {
-          default: ["es:bg-radial-[at_50%_125%]", "es:inset-ring es:inset-shadow-xs"],
-          ghost: ["es:border-transparent es:text-secondary-700", "es:hover:bg-secondary-100", "es:disabled:border-transparent!"]
         }
       },
       compoundVariants: [
@@ -197,22 +200,22 @@ const ToggleButton2 = (props) => {
           selected: false,
           class: [
             "es:text-black",
-            "es:from-secondary-50 es:to-white",
+            "es:from-white es:to-secondary-50",
             "es:border-secondary-300",
-            "es:inset-ring-secondary-100",
-            "es:inset-shadow-secondary-100/50",
+            "es:inset-ring es:inset-ring-secondary-100",
+            "es:inset-shadow-xs es:inset-shadow-secondary-100/50",
             "es:shadow-sm",
-            "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+            "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
             "es:hover:text-accent-950",
             "es:focus-visible:text-accent-950"
           ]
         },
         {
-          type: "default",
+          type: ["default", "ghost"],
           disabled: false,
           selected: true,
           class: [
-            "es:text-white es:accent-text-shadow",
+            "es:text-white",
             "es:from-accent-500 es:to-accent-600",
             "es:border-accent-700",
             "es:inset-ring es:inset-ring-accent-600",
@@ -220,18 +223,25 @@ const ToggleButton2 = (props) => {
             "es:focus-visible:border-accent-700",
             "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
             "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
-            "es:shadow-sm es:shadow-accent-600/30"
+            "es:shadow es:shadow-accent-600/30 es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm"
           ]
         },
-        {
-          disabled: true,
-          class: "es:disabled:border-secondary-300 es:disabled:text-secondary-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
-        },
         {
           type: "ghost",
           disabled: false,
-          selected: true,
-          class: ["es:bg-accent-600 es:text-white es:border-accent-600 es:shadow-sm es:shadow-accent-500/25", "es:hover:shadow-accent-600/50"]
+          selected: false,
+          class: [
+            "es:border-accent-500/0 es:text-secondary-700",
+            "es:hover:bg-accent-500/10 es:hover:text-accent-700",
+            "es:active:bg-accent-50 es:pressed:bg-accent-50 es:active:text-accent-950 es:pressed:text-accent-950",
+            "es:focus-visible:text-accent-700",
+            "es:inset-ring es:inset-ring-accent-600/0",
+            "es:inset-shadow-xs es:inset-shadow-accent-400/0"
+          ]
+        },
+        {
+          disabled: true,
+          class: "es:disabled:border-zinc-300 es:disabled:text-zinc-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
         },
         // Sizes.
         {

package/dist/icons/icons.js

@@ -3349,6 +3349,33 @@ const icons = {
     /* @__PURE__ */ jsx("path", { opacity: "0.6", d: "M3.439 17.562a.562.562 0 0 0 .793-.794.561.561 0 0 0-.794.793v.001Z", fill: "currentColor" }),
     /* @__PURE__ */ jsx("path", { d: "M5.077 18.657a.561.561 0 1 0-.002 0h.002Z", fill: "currentColor" }),
     /* @__PURE__ */ jsx("path", { d: "M6.5 12v2.25c0 .138.112.25.25.25H8.5", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  folderSolid: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 21 20", width: "21", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M17.5 5a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-14a2 2 0 0 1-1.99-1.796L1.5 15V8h5.8a.501.501 0 0 0 .298-.099l2.7-2-.008-.01L11.484 5H17.5ZM6.805 3a2 2 0 0 1 1.19.393l1.993 1.476L7.135 7H1.5V5a2 2 0 0 1 2-2h3.305Z", fill: "currentColor" }) }),
+  folderOpenSolid: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 21 20", width: "21", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M19.27 8c.256.44.348.979.2 1.522l-1.623 6A2 2 0 0 1 15.916 17H3.5c-.207 0-.407-.033-.595-.092l.076-.277 2.196-7.899A1 1 0 0 1 6.14 8h13.13ZM6.4 3c.513 0 1.008.197 1.38.55l1.234 1.175c.186.176.433.275.69.275H15.5a2 2 0 0 1 2 2H6.14a2 2 0 0 0-1.927 1.465l-2.194 7.901.004-.021A1.99 1.99 0 0 1 1.5 15V5a2 2 0 0 1 2-2h2.9Z", fill: "currentColor" }) }),
+  plusSquare: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1.5", y: "1.5", width: "17", height: "17", rx: "2", stroke: "currentColor", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.5 10H10m0 0h4.5M10 10V5.5m0 4.5v4.5", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  plusSquareFill: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M16.5 19a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 16.5 1h-13A2.5 2.5 0 0 0 1 3.5v13A2.5 2.5 0 0 0 3.5 19h13ZM10 15a.5.5 0 0 1-.5-.5v-4h-4a.5.5 0 0 1 0-1h4v-4a.5.5 0 0 1 1 0v4h4a.5.5 0 0 1 0 1h-4v4a.5.5 0 0 1-.5.5Z", fill: "currentColor" }) }),
+  plusSquareFillTransparent: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: "2.5", fill: "currentColor", fillOpacity: "0.12" }),
+    /* @__PURE__ */ jsx("path", { d: "M5.5 10H10m0 0h4.5M10 10V5.5m0 4.5v4.5", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  sortGeneric: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "m1 14 4.5 4.52m0 0L10 14m-4.5 4.52V3", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 3.5h10m-10 3h8m-8 3h6", stroke: "currentColor", strokeLinecap: "round", fill: "none" })
+  ] }),
+  musicNote: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "5", cy: "17", rx: "2.5", ry: "2", fill: "currentColor", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "16", cy: "14", rx: "2.5", ry: "2", fill: "currentColor", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.5 2.698V4l-11 2V4.335a1 1 0 0 1 .821-.984l9-1.637a1 1 0 0 1 1.179.984Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.5 14V2.698a1 1 0 0 0-1.179-.984l-9 1.637a1 1 0 0 0-.821.984V17.25M18.5 4l-11 2", stroke: "currentColor", fill: "none" })
+  ] }),
+  wordpress: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M17.1 6.118A8.052 8.052 0 0 1 18.091 10a8.087 8.087 0 0 1-4.023 6.994l2.472-7.146c.461-1.154.615-2.077.615-2.898 0-.298-.02-.575-.055-.832Zm-5.985.088c.487-.026.926-.077.926-.077.436-.052.385-.692-.051-.667 0 0-1.311.103-2.157.103-.795 0-2.131-.103-2.131-.103-.437-.025-.488.641-.052.667 0 0 .413.051.85.077L9.76 9.66l-1.771 5.31-2.947-8.764c.488-.026.926-.077.926-.077.436-.052.385-.692-.051-.667 0 0-1.31.103-2.157.103-.152 0-.33-.004-.52-.01A8.082 8.082 0 0 1 10 1.908c2.106 0 4.024.806 5.464 2.125-.035-.003-.069-.007-.105-.007-.794 0-1.358.692-1.358 1.436 0 .667.384 1.231.794 1.898.308.539.668 1.231.668 2.232 0 .692-.267 1.496-.616 2.615l-.808 2.697-2.924-8.698ZM10 18.092a8.09 8.09 0 0 1-2.286-.33l2.428-7.055 2.487 6.815a.76.76 0 0 0 .058.111 8.074 8.074 0 0 1-2.687.459ZM1.908 10a8.06 8.06 0 0 1 .701-3.293l3.86 10.575A8.092 8.092 0 0 1 1.909 10ZM10 1c-4.963 0-9 4.037-9 9 0 4.962 4.037 9 9 9s9-4.038 9-9c0-4.963-4.037-9-9-9Z", fill: "currentColor" }) }),
+  filePdf: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "m9.5.5 5 5H10a.5.5 0 0 1-.5-.5V.5Z", fill: "currentColor", fillOpacity: "0.3" }),
+    /* @__PURE__ */ jsx("path", { d: "m14.5 5.5-5-5m5 5H10a.5.5 0 0 1-.5-.5V.5m5 5v2m-5-7H2A1.5 1.5 0 0 0 .5 2v16A1.5 1.5 0 0 0 2 19.5h11a1.5 1.5 0 0 0 1.5-1.5v-.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M11.236 15.5H9.499v-6h1.737s2.316 0 2.316 2.842v.316c0 2.842-2.316 2.842-2.316 2.842Zm4.263 0v-3m3.184-3H15.5v3m0 0h3.04m-15.04 3v-3m0 0v-3h1.882c.434 0 2.119 0 2.118 1.5-.001 1.5-1.566 1.5-2 1.5h-2Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
   ] })
 };
 const blockIcons = {

package/dist/icons/jsx-svg.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as svgToJsxString, a as source_default } from "../react-jsx-parser.min-LF707GK8.js";
+import { s as svgToJsxString, a as source_default } from "../react-jsx-parser.min-VUl-CuCv.js";
 /**
  * Renders SVG string as JSX SVGs.
  *