@dmsi/wedgekit-react 0.0.552 → 0.0.554

package/dist/components/Stepper.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
       ]
     })
@@ -351,7 +384,7 @@ var import_clsx6 = __toESM(require("clsx"), 1);
 
 // src/components/Label.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Label = (_a) => {
   var _b = _a, {
     as = "span",
@@ -371,7 +404,7 @@ var Label = (_a) => {
     "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -395,7 +428,7 @@ Label.displayName = "Label";
 
 // 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,
@@ -410,7 +443,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,
@@ -463,7 +496,7 @@ function formatCurrencyDisplay(value) {
 
 // src/components/Paragraph.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 Paragraph = (_a) => {
   var _b = _a, {
     className,
@@ -489,7 +522,7 @@ var Paragraph = (_a) => {
     "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -515,7 +548,7 @@ var Paragraph = (_a) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Input.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
@@ -610,7 +643,7 @@ var InputBase = (_a) => {
   const inputInvalidClass = (0, import_clsx6.default)(
     "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "label",
     {
       id,
@@ -625,8 +658,8 @@ var InputBase = (_a) => {
       ),
       style: __spreadValues({}, props.style),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", componentGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", componentGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Label,
             {
               id: id ? `${id}-label` : void 0,
@@ -637,7 +670,7 @@ var InputBase = (_a) => {
               children: label
             }
           ),
-          required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          required && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "span",
             {
               className: (0, import_clsx6.default)(typography.label, "text-text-critical-normal"),
@@ -645,7 +678,7 @@ var InputBase = (_a) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "div",
           {
             className: (0, import_clsx6.default)(
@@ -663,7 +696,7 @@ var InputBase = (_a) => {
             },
             children: [
               before,
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "input",
                 __spreadProps(__spreadValues(__spreadValues({
                   ref: (el) => {
@@ -688,12 +721,12 @@ var InputBase = (_a) => {
                   style: __spreadProps(__spreadValues({}, props.style), { width })
                 })
               ),
-              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
+              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after,
               rightAdornment
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             id: id ? `${id}-caption` : void 0,
@@ -788,9 +821,9 @@ var Input = (_a) => {
     if (props.before) return props.before;
     switch (variant) {
       case "search":
-        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "search" }) }) : null;
+        return !removeSearchIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" }) }) : null;
       case "currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "attach_money" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "attach_money" }) });
       default:
         return null;
     }
@@ -800,7 +833,7 @@ var Input = (_a) => {
     switch (variant) {
       case "search": {
         const hasValue = displayValue.length > 0;
-        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        return hasValue && !props.readOnly ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
@@ -812,11 +845,11 @@ var Input = (_a) => {
         ) : null;
       }
       case "finder":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "search" });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { color: "text-secondary-normal", children: uom.toUpperCase() }) : null;
       case "percentage":
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "percent" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "percent" }) });
       default:
         return null;
     }
@@ -936,7 +969,7 @@ var Input = (_a) => {
     onBlur == null ? void 0 : onBlur(e);
   };
   const inputProps = getInputProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     InputBase,
     __spreadProps(__spreadValues({}, inputProps), {
       before: getBeforeElement(),
@@ -949,15 +982,15 @@ var Input = (_a) => {
   );
 };
 Input.displayName = "Input";
-var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
-var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
+var Finder = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "finder" }));
+var UOM = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "uom" }));
 var Currency = (props) => {
   var _a;
   const handleCurrencyChange = (e) => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Input,
     __spreadProps(__spreadValues({}, props), {
       variant: "currency",
@@ -966,7 +999,7 @@ var Currency = (props) => {
     })
   );
 };
-var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
+var Percentage = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Input, __spreadProps(__spreadValues({}, props), { variant: "percentage" }));
 Finder.displayName = "Finder";
 UOM.displayName = "UOM";
 Currency.displayName = "Currency";
@@ -974,7 +1007,7 @@ Percentage.displayName = "Percentage";
 
 // src/components/Stepper.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 Stepper = (_a) => {
   var _b = _a, {
     error,
@@ -1013,21 +1046,21 @@ var Stepper = (_a) => {
     setValue((prevVal) => prevVal - 1);
     onDecrease == null ? void 0 : onDecrease();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       id,
       "data-testid": testid,
       className: (0, import_clsx7.default)("flex items-center", componentGap),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             id: id ? `${id}-decrease-button` : void 0,
             testid: testid ? `${testid}-decrease-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "span",
               {
                 className: (0, import_clsx7.default)(
@@ -1035,14 +1068,14 @@ var Stepper = (_a) => {
                   disabled || value === 0 && "text-icon-action-primary-disabled",
                   "contents"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "remove" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "remove" })
               }
             ),
             onClick: handleDecrease,
             disabled: disabled || value <= 0 || min != null && value <= min
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           InputBase,
           __spreadProps(__spreadValues({}, props), {
             id: id ? `${id}-input` : void 0,
@@ -1064,14 +1097,14 @@ var Stepper = (_a) => {
             className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
           })
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             id: id ? `${id}-increase-button` : void 0,
             testid: testid ? `${testid}-increase-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "span",
               {
                 className: (0, import_clsx7.default)(
@@ -1079,7 +1112,7 @@ var Stepper = (_a) => {
                   disabled && "text-icon-action-primary-disabled",
                   "contents"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "add" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "add" })
               }
             ),
             onClick: handleIncrease,

package/dist/components/Stepper.js

@@ -4,13 +4,14 @@ import {
 } from "../chunk-NWTVBVBC.js";
 import "../chunk-HXGJVYGQ.js";
 import "../chunk-5UH6QUFB.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 {
   componentGap
 } from "../chunk-7KWFEH56.js";

package/dist/components/Swatch.cjs

@@ -332,7 +332,8 @@ var Stack = (_a) => {
     bottom,
     zIndex,
     flexWrap,
-    className
+    className,
+    unclipEdges
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -381,7 +382,8 @@ var Stack = (_a) => {
     "bottom",
     "zIndex",
     "flexWrap",
-    "className"
+    "className",
+    "unclipEdges"
   ]);
   var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
@@ -473,6 +475,7 @@ var Stack = (_a) => {
         elevation === 4 && "shadow-4",
         elevation === 16 && "shadow-16",
         rounded && "rounded",
+        unclipEdges && "-m-0.75 p-1",
         className
       ),
       children

package/dist/components/Swatch.js

@@ -5,12 +5,12 @@ import {
   Heading2,
   Heading3
 } from "../chunk-MXSJF6TW.js";
+import {
+  Stack
+} from "../chunk-MTGNBARV.js";
 import {
   Paragraph
 } from "../chunk-WMPWWFUJ.js";
-import {
-  Stack
-} from "../chunk-AX4M7X4Z.js";
 import {
   typography
 } from "../chunk-7KWFEH56.js";

package/dist/components/Time.cjs

@@ -933,7 +933,8 @@ var Stack = (_a) => {
     bottom,
     zIndex,
     flexWrap,
-    className
+    className,
+    unclipEdges
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -982,7 +983,8 @@ var Stack = (_a) => {
     "bottom",
     "zIndex",
     "flexWrap",
-    "className"
+    "className",
+    "unclipEdges"
   ]);
   var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
@@ -1074,6 +1076,7 @@ var Stack = (_a) => {
         elevation === 4 && "shadow-4",
         elevation === 16 && "shadow-16",
         rounded && "rounded",
+        unclipEdges && "-m-0.75 p-1",
         className
       ),
       children

package/dist/components/Time.js

@@ -7,10 +7,10 @@ import {
 } from "../chunk-VXWSAIB5.js";
 import "../chunk-DQRQZE6O.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-WMPWWFUJ.js";
 import {
   Stack
-} from "../chunk-AX4M7X4Z.js";
+} from "../chunk-MTGNBARV.js";
+import "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";

package/dist/components/Toast.cjs

@@ -352,7 +352,39 @@ function Icon(_a) {
 
 // src/components/Button.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
+
+// src/components/Spinner.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Button = (_a) => {
   var _b = _a, {
     variant = "primary",
@@ -368,7 +400,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -383,7 +416,8 @@ var Button = (_a) => {
     "colorClassName",
     "href",
     "id",
-    "testid"
+    "testid",
+    "isLoading"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx5.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -467,7 +501,7 @@ var Button = (_a) => {
     typography.buttonLabel
   );
   const Element = href && !as ? "a" : as;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -481,7 +515,8 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { size: "small" }),
+        !iconOnly && !isLoading && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -491,23 +526,23 @@ Button.displayName = "Button";
 
 // src/components/Toast.tsx
 var import_client = require("react-dom/client");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var variants = {
   success: {
     className: "border-success-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "check_circle", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "check_circle", size: 24 }) })
   },
   warning: {
     className: "border-warning-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "warning", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "warning", size: 24 }) })
   },
   error: {
     className: "border-critical-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "error", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "error", size: 24 }) })
   },
   info: {
     className: "border-action-400",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "info", size: 24 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "info", size: 24 }) })
   }
 };
 var slideInFromBottomAnimation = (element, displayDuration = 8e3, inDuration = 50, outDuration = 50) => {
@@ -636,7 +671,7 @@ var Toast = (_a) => {
   };
   const { className, icon: iconElement } = (_a2 = variants[variant]) != null ? _a2 : variants.success;
   if (!show) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -654,12 +689,12 @@ var Toast = (_a) => {
       style: props.style,
       children: [
         iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", layoutGroupGap), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx6.default)("flex flex-col w-68", componentGap), children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { testid: testid ? `${testid}-title` : void 0, id: id ? `${id}-title` : void 0, children: title }),
-            message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { testid: testid ? `${testid}-message` : void 0, id: id ? `${id}-message` : void 0, children: message })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.default)("flex items-center", layoutGroupGap), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.default)("flex flex-col w-68", componentGap), children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Heading3, { testid: testid ? `${testid}-title` : void 0, id: id ? `${id}-title` : void 0, children: title }),
+            message && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { testid: testid ? `${testid}-message` : void 0, id: id ? `${id}-message` : void 0, children: message })
           ] }),
-          showViewButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          showViewButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Button,
             {
               id: id ? `${id}-view-button` : void 0,
@@ -685,7 +720,7 @@ function createToast(config) {
     toastContainer.remove();
   };
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Toast,
       {
         id: config.id,

package/dist/components/Toast.js

@@ -2,15 +2,16 @@
 import {
   Heading3
 } from "../chunk-MXSJF6TW.js";
+import {
+  Button
+} from "../chunk-HVYK7COK.js";
+import "../chunk-SBRRNFOP.js";
 import {
   Paragraph
 } from "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import {
   componentGap,
   componentPadding,