@dmsi/wedgekit-react 0.0.552 → 0.0.554

package/dist/components/Notification.cjs

@@ -209,8 +209,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",
@@ -226,7 +256,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -241,7 +272,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",
@@ -325,7 +357,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,
@@ -339,7 +371,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
       ]
     })
@@ -349,7 +382,7 @@ Button.displayName = "Button";
 
 // src/components/Paragraph.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 Paragraph = (_a) => {
   var _b = _a, {
     className,
@@ -375,7 +408,7 @@ var Paragraph = (_a) => {
     "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -402,7 +435,7 @@ Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
 var import_clsx4 = __toESM(require("clsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Heading = (_a) => {
   var _b = _a, {
     className,
@@ -425,7 +458,7 @@ var Heading = (_a) => {
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
@@ -446,16 +479,16 @@ var Heading = (_a) => {
   );
 };
 Heading.displayName = "Heading";
-var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
-var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
-var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
+var Heading1 = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading1" }));
+var Heading2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading2" }));
+var Heading3 = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading, __spreadProps(__spreadValues({}, props), { variant: "heading3" }));
 Heading1.displayName = "Heading1";
 Heading2.displayName = "Heading2";
 Heading3.displayName = "Heading3";
 
 // src/components/Icon.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Icon(_a) {
   var _b = _a, {
     name,
@@ -470,7 +503,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_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       "data-testid": testid,
@@ -490,7 +523,7 @@ function Icon(_a) {
 
 // src/components/Stack.tsx
 var import_clsx6 = __toESM(require("clsx"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
   "flex",
   items === "start" && "items-start",
@@ -563,7 +596,8 @@ var Stack = (_a) => {
     bottom,
     zIndex,
     flexWrap,
-    className
+    className,
+    unclipEdges
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -612,12 +646,13 @@ var Stack = (_a) => {
     "bottom",
     "zIndex",
     "flexWrap",
-    "className"
+    "className",
+    "unclipEdges"
   ]);
   var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -704,6 +739,7 @@ var Stack = (_a) => {
         elevation === 4 && "shadow-4",
         elevation === 16 && "shadow-16",
         rounded && "rounded",
+        unclipEdges && "-m-0.75 p-1",
         className
       ),
       children
@@ -712,23 +748,23 @@ var Stack = (_a) => {
 };
 
 // src/components/Notification.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var variants = {
   success: {
     className: "border-success-400",
-    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 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "check_circle", size: 24 }) })
   },
   warning: {
     className: "border-warning-400",
-    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 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "warning", size: 24 }) })
   },
   error: {
     className: "border-critical-400",
-    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 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "error", size: 24 }) })
   },
   info: {
     className: "border-action-400",
-    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 }) })
+    icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "info", size: 24 }) })
   }
 };
 var Notification = (_a) => {
@@ -761,7 +797,7 @@ var Notification = (_a) => {
   const [visible, setVisible] = (0, import_react.useState)(true);
   const { className, icon: iconElement } = (_a2 = variants[variant]) != null ? _a2 : variants.success;
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     __spreadProps(__spreadValues({
       id,
@@ -773,7 +809,7 @@ var Notification = (_a) => {
       )
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           Stack,
           {
             horizontal: true,
@@ -783,16 +819,16 @@ var Notification = (_a) => {
             sizing: "layout",
             children: [
               iconElement,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Stack, { elevation: 0, items: "start", justify: "start", sizing: "component", children: [
-                title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Heading3, { as: "h3", children: title }),
-                message && enableMessage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { as: "p", children: message }),
-                description && enableDescription && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { as: "p", children: description }),
-                disclaimer && enableDisclaimer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Paragraph, { as: "p", children: disclaimer })
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Stack, { elevation: 0, items: "start", justify: "start", sizing: "component", children: [
+                title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Heading3, { as: "h3", children: title }),
+                message && enableMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { as: "p", children: message }),
+                description && enableDescription && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { as: "p", children: description }),
+                disclaimer && enableDisclaimer && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { as: "p", children: disclaimer })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
@@ -800,7 +836,7 @@ var Notification = (_a) => {
             iconOnly: true,
             variant: "tertiary",
             onClick: () => setVisible(false),
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "close", size: 24 })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "close", size: 24 })
           }
         )
       ]

package/dist/components/Notification.js

@@ -3,17 +3,18 @@ import {
   Heading3
 } from "../chunk-MXSJF6TW.js";
 import {
-  Paragraph
-} from "../chunk-WMPWWFUJ.js";
+  Button
+} from "../chunk-HVYK7COK.js";
+import "../chunk-SBRRNFOP.js";
 import {
   Stack
-} from "../chunk-AX4M7X4Z.js";
+} from "../chunk-MTGNBARV.js";
+import {
+  Paragraph
+} from "../chunk-WMPWWFUJ.js";
 import {
   Icon
 } from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-45AHDOAU.js";
 import "../chunk-7KWFEH56.js";
 import {
   __objRest,

package/dist/components/OptionPill.cjs

@@ -206,7 +206,39 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 
 // src/components/Button.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
+
+// 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",
@@ -222,7 +254,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -237,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",
@@ -321,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,
@@ -335,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
       ]
     })
@@ -345,7 +380,7 @@ Button.displayName = "Button";
 
 // 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",
@@ -365,7 +400,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,
@@ -389,7 +424,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,
@@ -404,7 +439,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,
@@ -423,7 +458,7 @@ function Icon(_a) {
 }
 
 // src/components/OptionPill.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var OptionPill = (_a) => {
   var _b = _a, {
     id,
@@ -474,7 +509,7 @@ var OptionPill = (_a) => {
     disabled && !selected && "text-text-primary-disabled",
     disabled && selected && "text-text-on-action-primary-disabled"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     __spreadProps(__spreadValues(__spreadValues({
       id,
@@ -492,7 +527,7 @@ var OptionPill = (_a) => {
         textColor
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Label,
           {
             id: id ? `${id}-label` : void 0,
@@ -502,7 +537,7 @@ var OptionPill = (_a) => {
             children
           }
         ),
-        removable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        removable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Button,
           {
             id: id ? `${id}-remove-button` : void 0,
@@ -515,7 +550,7 @@ var OptionPill = (_a) => {
             ),
             iconOnly: true,
             variant: "tertiary",
-            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "close", size: 16 })
+            leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "close", size: 16 })
           }
         )
       ]

package/dist/components/OptionPill.js

@@ -1,9 +1,10 @@
 import {
   OptionPill
-} from "../chunk-FWCVZWE6.js";
+} from "../chunk-7ZL4GBAD.js";
 import "../chunk-HXGJVYGQ.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/PDFViewer/DownloadIcon.cjs

@@ -206,8 +206,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",
@@ -223,7 +253,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -238,7 +269,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",
@@ -322,7 +354,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,
@@ -336,7 +368,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
       ]
     })
@@ -346,7 +379,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,
@@ -361,7 +394,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,
@@ -383,7 +416,7 @@ function Icon(_a) {
 var import_clsx4 = __toESM(require("clsx"), 1);
 var import_react = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Tooltip = ({
   id,
   testid,
@@ -450,7 +483,7 @@ var Tooltip = ({
       return () => window.removeEventListener("resize", updatePosition);
     }
   }, [isVisible]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       id,
@@ -462,7 +495,7 @@ var Tooltip = ({
       children: [
         children,
         !keepHidden && isVisible && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               id: id ? `${id}-message` : void 0,
@@ -502,19 +535,19 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/PDFViewer/DownloadIcon.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function DownloadIcon({
   onClick,
   isDownloading,
   testid
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { message: "Download", position: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tooltip, { message: "Download", position: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Button,
     {
       testid,
       iconOnly: true,
       variant: "tertiary",
-      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
+      leftIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
       onClick
     }
   ) });

package/dist/components/PDFViewer/DownloadIcon.js

@@ -1,9 +1,10 @@
 import {
   DownloadIcon
-} from "../../chunk-7COWXCPA.js";
+} from "../../chunk-45SH6WHE.js";
 import "../../chunk-MDB26F6T.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/PDFViewer/PDFElement.cjs

@@ -312,7 +312,8 @@ var Stack = (_a) => {
     bottom,
     zIndex,
     flexWrap,
-    className
+    className,
+    unclipEdges
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -361,7 +362,8 @@ var Stack = (_a) => {
     "bottom",
     "zIndex",
     "flexWrap",
-    "className"
+    "className",
+    "unclipEdges"
   ]);
   var _a2, _b2, _c, _d, _e, _f, _g;
   const flexClassNames = getFlexClassNames({ items, justify, grow });
@@ -453,6 +455,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/PDFViewer/PDFElement.js

@@ -1,9 +1,9 @@
 import {
   PDFElement
-} from "../../chunk-K4SIZGMK.js";
+} from "../../chunk-EQ2RAI53.js";
 import "../../chunk-VJVY6NPF.js";
 import "../../chunk-SBRRNFOP.js";
-import "../../chunk-AX4M7X4Z.js";
+import "../../chunk-MTGNBARV.js";
 import "../../chunk-7KWFEH56.js";
 import "../../chunk-ORMEWXMH.js";
 export {