@dmsi/wedgekit-react 0.0.552 → 0.0.554

package/dist/components/Button.cjs

@@ -204,8 +204,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",
@@ -221,7 +251,8 @@ var Button = (_a) => {
     colorClassName,
     href,
     id,
-    testid
+    testid,
+    isLoading
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -236,7 +267,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",
@@ -320,7 +352,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,
@@ -334,7 +366,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
       ]
     })

package/dist/components/Button.js

@@ -1,6 +1,7 @@
 import {
   Button
-} from "../chunk-45AHDOAU.js";
+} from "../chunk-HVYK7COK.js";
+import "../chunk-SBRRNFOP.js";
 import "../chunk-7KWFEH56.js";
 import "../chunk-ORMEWXMH.js";
 export {