@dmsi/wedgekit-react 0.0.552 → 0.0.554

package/dist/components/ModalHeader.cjs

@@ -260,7 +260,39 @@ Heading3.displayName = "Heading3";
 
 // src/components/Button.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
+
+// src/components/Spinner.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Button.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -276,7 +308,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -291,7 +324,8 @@ var Button = (_a) => {
     "colorClassName",
     "href",
     "id",
-    "testid"
+    "testid",
+    "isLoading"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx3.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -375,7 +409,7 @@ var Button = (_a) => {
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -389,7 +423,8 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "small" }),
+        !iconOnly && !isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -399,7 +434,7 @@ Button.displayName = "Button";
 
 // src/components/Icon.tsx
 var import_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Icon(_a) {
   var _b = _a, {
     name,
@@ -414,7 +449,7 @@ function Icon(_a) {
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       "data-testid": testid,
@@ -434,7 +469,7 @@ function Icon(_a) {
 
 // src/components/ModalHeader.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ModalHeader = ({
   title,
   hideCloseIcon,
@@ -447,7 +482,7 @@ var ModalHeader = ({
   titleAs: TitleComponent
 }) => {
   const Title = TitleComponent || Heading2;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       id,
@@ -462,9 +497,9 @@ var ModalHeader = ({
         headerClassname
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center flex-1", layoutGroupGap), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center flex-1", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Title,
             {
               id: id ? `${id}-title` : void 0,
@@ -474,7 +509,7 @@ var ModalHeader = ({
             }
           )
         ] }),
-        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
@@ -482,7 +517,7 @@ var ModalHeader = ({
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }) })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "close", size: 24 }) })
           }
         )
       ]

package/dist/components/ModalHeader.js

@@ -1,9 +1,10 @@
 import {
   ModalHeader
-} from "../chunk-CMMQTIVM.js";
+} from "../chunk-EJOPJIRO.js";
 import "../chunk-MXSJF6TW.js";
+import "../chunk-HVYK7COK.js";
+import "../chunk-SBRRNFOP.js";
 import "../chunk-NKUETCDA.js";
-import "../chunk-45AHDOAU.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/NavigationTab.cjs

@@ -207,8 +207,38 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
   "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
 );
 
-// src/components/Button.tsx
+// src/components/Spinner.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -224,7 +254,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -239,7 +270,8 @@ var Button = (_a) => {
     "colorClassName",
     "href",
     "id",
-    "testid"
+    "testid",
+    "isLoading"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -323,7 +355,7 @@ var Button = (_a) => {
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -337,7 +369,8 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "small" }),
+        !iconOnly && !isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -347,7 +380,7 @@ Button.displayName = "Button";
 
 // src/components/Icon.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Icon(_a) {
   var _b = _a, {
     name,
@@ -362,7 +395,7 @@ function Icon(_a) {
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       "data-testid": testid,
@@ -381,7 +414,7 @@ function Icon(_a) {
 }
 
 // src/components/NavigationTab.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var NavigationTab = (_a) => {
   var _b = _a, {
     id,
@@ -434,7 +467,7 @@ var NavigationTab = (_a) => {
     "--color-text-on-action-primary-hover": "var(--color-brand-500)",
     "--color-text-on-action-primary-active": "var(--color-brand-300)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Button,
     __spreadProps(__spreadValues({
       id,
@@ -451,7 +484,7 @@ var NavigationTab = (_a) => {
       ),
       style: tokenOverrides,
       classNameLabel: "px-1",
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "close", size: 16 }),
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 16 }),
       onClick,
       disabled
     }, props), {

package/dist/components/NavigationTab.js

@@ -1,8 +1,9 @@
 import {
   NavigationTab
-} from "../chunk-QMMPHXVE.js";
+} from "../chunk-GVIXW2QS.js";
+import "../chunk-HVYK7COK.js";
+import "../chunk-SBRRNFOP.js";
 import "../chunk-NKUETCDA.js";
-import "../chunk-45AHDOAU.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/NavigationTabs.cjs

@@ -212,8 +212,38 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
   "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
 );
 
-// src/components/Button.tsx
+// src/components/Spinner.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -229,7 +259,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -244,7 +275,8 @@ var Button = (_a) => {
     "colorClassName",
     "href",
     "id",
-    "testid"
+    "testid",
+    "isLoading"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -328,7 +360,7 @@ var Button = (_a) => {
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -342,7 +374,8 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "small" }),
+        !iconOnly && !isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -352,7 +385,7 @@ Button.displayName = "Button";
 
 // src/components/Icon.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Icon(_a) {
   var _b = _a, {
     name,
@@ -367,7 +400,7 @@ function Icon(_a) {
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       "data-testid": testid,
@@ -386,7 +419,7 @@ function Icon(_a) {
 }
 
 // src/components/NavigationTab.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var NavigationTab = (_a) => {
   var _b = _a, {
     id,
@@ -439,7 +472,7 @@ var NavigationTab = (_a) => {
     "--color-text-on-action-primary-hover": "var(--color-brand-500)",
     "--color-text-on-action-primary-active": "var(--color-brand-300)"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Button,
     __spreadProps(__spreadValues({
       id,
@@ -456,7 +489,7 @@ var NavigationTab = (_a) => {
       ),
       style: tokenOverrides,
       classNameLabel: "px-1",
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "close", size: 16 }),
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 16 }),
       onClick,
       disabled
     }, props), {
@@ -469,7 +502,7 @@ var NavigationTab = (_a) => {
 NavigationTab.displayName = "NavigationTab";
 
 // src/components/NavigationTabs.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var NavigationTabs = ({
   id,
   testid,
@@ -485,15 +518,15 @@ var NavigationTabs = ({
   };
   const selectedContent = (_c = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _c.content;
   const selectedTabHasHref = (_d = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _d.href;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id, "data-testid": testid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { id, "data-testid": testid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         className: (0, import_clsx5.default)(
           "flex items-center relative overflow-x-auto overflow-y-hidden",
           componentGap
         ),
-        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           NavigationTab,
           {
             id: id ? `${id}-tab-${tab.id}` : void 0,
@@ -508,7 +541,7 @@ var NavigationTabs = ({
         ))
       }
     ) }),
-    selectedContent && !selectedTabHasHref && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-2", children: selectedContent })
+    selectedContent && !selectedTabHasHref && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-2", children: selectedContent })
   ] });
 };
 NavigationTabs.displayName = "NavigationTabs";

package/dist/components/NavigationTabs.js

@@ -1,9 +1,10 @@
 "use client";
 import {
   NavigationTab
-} from "../chunk-QMMPHXVE.js";
+} from "../chunk-GVIXW2QS.js";
+import "../chunk-HVYK7COK.js";
+import "../chunk-SBRRNFOP.js";
 import "../chunk-NKUETCDA.js";
-import "../chunk-45AHDOAU.js";
 import {
   componentGap
 } from "../chunk-7KWFEH56.js";

package/dist/components/NestedMenu.cjs

@@ -711,7 +711,39 @@ function highlightMatch(text, searchValue) {
 
 // src/components/Button.tsx
 var import_clsx7 = __toESM(require("clsx"), 1);
+
+// src/components/Spinner.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -727,7 +759,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -742,7 +775,8 @@ var Button = (_a) => {
     "colorClassName",
     "href",
     "id",
-    "testid"
+    "testid",
+    "isLoading"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -826,7 +860,7 @@ var Button = (_a) => {
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -840,7 +874,8 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "small" }),
+        !iconOnly && !isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -849,7 +884,7 @@ var Button = (_a) => {
 Button.displayName = "Button";
 
 // src/components/NestedMenu.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function NestedMenu(props) {
   var _a;
   const { onMenuClick, currentMenu, testid } = props;
@@ -895,13 +930,13 @@ function NestedMenu(props) {
       item && __spreadValues(__spreadValues({}, item), !isPrevious && { previousMenu: currentMenu })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MenuOption,
       {
         testid: testid ? `${testid}-back` : void 0,
         variant: "normal",
-        before: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        before: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Icon,
           {
             name: "chevron_left",
@@ -914,10 +949,10 @@ function NestedMenu(props) {
           return handleMenuClick((_a2 = currentMenu.previousMenu) != null ? _a2 : null, true);
         },
         selected: selectedIndex === -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label, { color: "text-action-normal", children: currentMenu.previousMenu ? currentMenu.previousMenu.label : "Main Menu" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MenuOption,
       {
         variant: "action",
@@ -927,13 +962,13 @@ function NestedMenu(props) {
     ),
     (currentMenu.subEntries || []).map((item, idx) => {
       var _a2;
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         MenuOption,
         {
           testid: testid ? `${testid}-${item.label}` : void 0,
           variant: "normal",
           onClick: () => handleMenuClick(item),
-          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          after: ((_a2 = item.subEntries) == null ? void 0 : _a2.length) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Button,
             {
               iconOnly: true,
@@ -944,7 +979,7 @@ function NestedMenu(props) {
                 onMenuClick(item, "subEntry");
               },
               className: "!p-0 w-full justify-end",
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 })
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "chevron_right", className: "icon", size: 24 })
             }
           ),
           selected: selectedIndex === idx,

package/dist/components/NestedMenu.js

@@ -1,24 +1,25 @@
 "use client";
 import {
   MenuOption
-} from "../chunk-EZ4KZYKG.js";
+} from "../chunk-YWQEMS2C.js";
 import {
   Label
 } from "../chunk-HXGJVYGQ.js";
-import "../chunk-PS6UJZVH.js";
 import {
   useKeydown
 } from "../chunk-YD2JJ2VL.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-DQRQZE6O.js";
 import "../chunk-5UH6QUFB.js";
+import "../chunk-PS6UJZVH.js";
+import {
+  Button
+} from "../chunk-HVYK7COK.js";
+import "../chunk-SBRRNFOP.js";
 import "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import "../chunk-7KWFEH56.js";
 import {
   __spreadValues