@dmsi/wedgekit-react 0.0.552 → 0.0.554

package/dist/components/MobileDataGrid/index.css

@@ -117,6 +117,7 @@
     --shadow-4: 0px 0px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
     --shadow-16: 0px 0px 16px 0px rgba(0, 0, 0, 0.12), 0px 16px 16px 0px rgba(0, 0, 0, 0.12);
     --shadow-nav-tab: 0px -4px 4px -4px rgba(0, 0, 0, 0.32) inset;
+    --shadow-access-card: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 1px 4px 0 rgba(0, 0, 0, 0.15);
     --color-decoration-underline: transparent;
     --text-display-1-desktop: 32px;
     --text-display-1-mobile: 32px;
@@ -621,6 +622,12 @@
       max-width: 1536px;
     }
   }
+  .-m-0\.75 {
+    margin: calc(var(--spacing) * -0.75);
+  }
+  .-m-\[3px\] {
+    margin: calc(3px * -1);
+  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -669,6 +676,9 @@
   .mr-auto {
     margin-right: auto;
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -678,6 +688,9 @@
   .mb-mobile-container-padding {
     margin-bottom: var(--spacing-mobile-container-padding);
   }
+  .mb-mobile-layout-group-gap {
+    margin-bottom: var(--spacing-mobile-layout-group-gap);
+  }
   .-ml-px {
     margin-left: -1px;
   }
@@ -1958,6 +1971,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-\[4px\] {
+    padding: 4px;
+  }
   .p-\[calc\(var\(--spacing-desktop-component-padding\)_-_1px\)\] {
     padding: calc(var(--spacing-desktop-component-padding) - 1px);
   }
@@ -2069,6 +2085,9 @@
   .pt-mobile-layout-padding {
     padding-top: var(--spacing-mobile-layout-padding);
   }
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
   .pr-mobile-component-padding {
     padding-right: var(--spacing-mobile-component-padding);
   }
@@ -2313,6 +2332,9 @@
   .text-inherit {
     color: inherit;
   }
+  .text-neutral-000 {
+    color: var(--color-neutral-000);
+  }
   .text-neutral-100 {
     color: var(--color-neutral-100);
   }
@@ -2424,6 +2446,9 @@
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-75 {
+    opacity: 75%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -2463,6 +2488,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .shadow-access-card {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.25)), 0 1px 4px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.15));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .shadow-nav-tab {
     --tw-shadow: 0px -4px 4px -4px var(--tw-shadow-color, rgba(0, 0, 0, 0.32)) inset;
     box-shadow:
@@ -3894,6 +3928,11 @@
       margin-top: var(--spacing-desktop-compact-component-gap);
     }
   }
+  .compact\:mb-desktop-compact-layout-group-gap {
+    &:where([data-compact]) {
+      margin-bottom: var(--spacing-desktop-compact-layout-group-gap);
+    }
+  }
   .compact\:grid-cols-1 {
     &:where([data-compact]) {
       grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -4220,6 +4259,11 @@
       margin-bottom: var(--spacing-desktop-container-padding);
     }
   }
+  .desktop\:mb-desktop-layout-group-gap {
+    @container root (width >= 48rem) {
+      margin-bottom: var(--spacing-desktop-layout-group-gap);
+    }
+  }
   .desktop\:block {
     @container root (width >= 48rem) {
       display: block;

package/dist/components/MobileDataGrid/index.js

@@ -1,63 +1,67 @@
 import {
   MobileDataGrid
-} from "../../chunk-WNGFRQ4Y.js";
+} from "../../chunk-TXPN24PW.js";
 import "../../chunk-M7INAUAJ.js";
-import "../../chunk-ZIPJMN2E.js";
-import "../../chunk-FJFZBIRG.js";
-import "../../chunk-SBGGDIE3.js";
+import "../../chunk-GYQA4UIK.js";
+import "../../chunk-7ZCXZDJD.js";
+import "../../chunk-FIVKYEC3.js";
+import "../../chunk-YCDDBSVU.js";
+import "../../chunk-3X3Y4TMS.js";
 import "../../chunk-BQNPOGD5.js";
 import "../../chunk-Y5GD2FJA.js";
 import "../../chunk-MBZ55T2D.js";
 import "../../chunk-2IKT6IHB.js";
-import "../../chunk-YCDDBSVU.js";
-import "../../chunk-3X3Y4TMS.js";
-import "../../chunk-4DXOA7NZ.js";
-import "../../chunk-5BRIDIUA.js";
+import "../../chunk-RZ5EIDX4.js";
+import "../../chunk-AGHBLWDZ.js";
 import "../../chunk-5IFPG6TS.js";
 import "../../chunk-AJ5M6MVX.js";
 import "../../chunk-M4FM3B3R.js";
 import "../../chunk-AT4AWD6B.js";
 import "../../chunk-EWGHVZL5.js";
-import "../../chunk-KJ5OQPPV.js";
+import "../../chunk-I5BV7UPG.js";
+import "../../chunk-63WMDTVQ.js";
 import "../../chunk-L3BXRDLP.js";
 import "../../chunk-34VEVX5H.js";
 import "../../chunk-LB7UT6F3.js";
 import "../../chunk-MDB26F6T.js";
-import "../../chunk-I5BV7UPG.js";
-import "../../chunk-JADOJNBI.js";
+import "../../chunk-ZDXJXDZT.js";
 import "../../chunk-4RJKB7LC.js";
+import "../../chunk-KV7LAH3T.js";
 import "../../chunk-WVVEOCEH.js";
-import "../../chunk-CMMQTIVM.js";
+import "../../chunk-EJOPJIRO.js";
 import "../../chunk-AG43RS4Q.js";
-import "../../chunk-AKJUBFJK.js";
-import "../../chunk-Z2QAJY5I.js";
-import "../../chunk-BWPNXY7T.js";
 import "../../chunk-QVWYTQKL.js";
-import "../../chunk-Y3EFHKAG.js";
+import "../../chunk-UAMI54FE.js";
+import "../../chunk-75USUR3I.js";
+import "../../chunk-BWPNXY7T.js";
+import "../../chunk-DWICBU2V.js";
 import "../../chunk-HGLOO52X.js";
 import "../../chunk-MPYAHORM.js";
-import "../../chunk-EZ4KZYKG.js";
+import "../../chunk-YWQEMS2C.js";
 import "../../chunk-BKBJOF4J.js";
 import "../../chunk-NWTVBVBC.js";
 import "../../chunk-HXGJVYGQ.js";
 import "../../chunk-WVUIIBRR.js";
-import "../../chunk-75USUR3I.js";
-import "../../chunk-PS6UJZVH.js";
 import "../../chunk-M7WHWZ2J.js";
-import "../../chunk-MHXYGKWA.js";
+import "../../chunk-Q3G6Z5DM.js";
 import "../../chunk-YD2JJ2VL.js";
 import "../../chunk-VXWSAIB5.js";
 import "../../chunk-DQRQZE6O.js";
 import "../../chunk-5UH6QUFB.js";
+import "../../chunk-XJF4S3RB.js";
+import "../../chunk-ZCJWOHFN.js";
+import "../../chunk-PS6UJZVH.js";
+import "../../chunk-XR733AKC.js";
 import "../../chunk-BYC6QID5.js";
-import "../../chunk-QYKOR7LE.js";
+import "../../chunk-CQLRGYHM.js";
 import "../../chunk-KBJZUVLM.js";
-import "../../chunk-7SFFUICM.js";
+import "../../chunk-YLC7OHW2.js";
 import "../../chunk-MXSJF6TW.js";
+import "../../chunk-HVYK7COK.js";
+import "../../chunk-SBRRNFOP.js";
+import "../../chunk-MTGNBARV.js";
 import "../../chunk-WMPWWFUJ.js";
-import "../../chunk-AX4M7X4Z.js";
 import "../../chunk-NKUETCDA.js";
-import "../../chunk-45AHDOAU.js";
 import "../../chunk-7KWFEH56.js";
 import "../../chunk-ORMEWXMH.js";
 export {

package/dist/components/Modal.cjs

@@ -263,7 +263,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",
@@ -279,7 +311,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -294,7 +327,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",
@@ -378,7 +412,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,
@@ -392,7 +426,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
       ]
     })
@@ -402,7 +437,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,
@@ -417,7 +452,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,
@@ -437,7 +472,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,
@@ -450,7 +485,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,
@@ -465,9 +500,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,
@@ -477,7 +512,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,
@@ -485,7 +520,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 }) })
           }
         )
       ]
@@ -496,14 +531,14 @@ ModalHeader.displayName = "ModalHeader";
 
 // src/components/ModalContent.tsx
 var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
   id,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       id,
@@ -521,7 +556,7 @@ ModalContent.displayName = "ModalContent";
 
 // src/components/ModalButtons.tsx
 var import_clsx7 = __toESM(require("clsx"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -529,7 +564,7 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       id,
@@ -539,26 +574,26 @@ var ModalButtons = ({
         layoutPaddding,
         layoutGroupGap
       ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
             testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
             className: "max-sm:w-full",
             children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
             testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"
@@ -572,7 +607,7 @@ ModalButtons.displayName = "ModalButtons";
 
 // src/components/ModalScrim.tsx
 var import_clsx8 = __toESM(require("clsx"), 1);
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ModalScrim = ({
   show = false,
   size = "small",
@@ -582,7 +617,7 @@ var ModalScrim = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       id,
@@ -671,7 +706,7 @@ var useMounted = () => {
 };
 
 // src/components/Modal.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var fadeInScale = (element, duration = 300) => element.animate(
   [
     { opacity: 0, transform: "scale(0.95)" },
@@ -844,7 +879,7 @@ var Modal = ({
     return null;
   }
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
@@ -853,7 +888,7 @@ var Modal = ({
         ref: bgRef,
         show: open,
         onClick: backgroundClickHandler,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             id,
@@ -868,7 +903,7 @@ var Modal = ({
             ),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
@@ -882,7 +917,7 @@ var Modal = ({
                   titleAs: TitleComponent
                 }
               ),
-              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              children && (size !== "screen" || noWrapper) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
@@ -891,7 +926,7 @@ var Modal = ({
                   children
                 }
               ) : children,
-              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              showButtons ? customFooter ? customActions : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,

package/dist/components/Modal.js

@@ -1,19 +1,20 @@
 "use client";
 import {
   Modal
-} from "../chunk-JADOJNBI.js";
+} from "../chunk-ZDXJXDZT.js";
 import "../chunk-4RJKB7LC.js";
+import "../chunk-KV7LAH3T.js";
 import "../chunk-WVVEOCEH.js";
-import "../chunk-CMMQTIVM.js";
+import "../chunk-EJOPJIRO.js";
 import "../chunk-AG43RS4Q.js";
-import "../chunk-AKJUBFJK.js";
 import "../chunk-YD2JJ2VL.js";
 import "../chunk-VXWSAIB5.js";
 import "../chunk-DQRQZE6O.js";
 import "../chunk-5UH6QUFB.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/ModalButtons.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/ModalButtons.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ModalButtons = ({
   onClose,
   onContinue,
@@ -389,7 +422,7 @@ var ModalButtons = ({
   id,
   testid
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       id,
@@ -399,26 +432,26 @@ var ModalButtons = ({
         layoutPaddding,
         layoutGroupGap
       ),
-      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: customActions != null ? customActions : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
             testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "close", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
             className: "max-sm:w-full",
             children: "Close"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
             testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "check", size: 24 }),
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
             onClick: onContinue,
             children: "Continue"

package/dist/components/ModalButtons.js

@@ -1,8 +1,9 @@
 import {
   ModalButtons
-} from "../chunk-AKJUBFJK.js";
+} from "../chunk-KV7LAH3T.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 {