@dmsi/wedgekit-react 0.0.105 → 0.0.107

package/dist/{chunk-X62XGQY7.js → chunk-2XOQII4G.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-L364HTYC.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-6UI5GABI.js → chunk-3JRVV6QY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-J6LETUNM.js";
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/{chunk-QNQ5K7NW.js → chunk-3NWBR3V3.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-S5K22XTH.js";
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/chunk-4F6VQXKY.js

@@ -0,0 +1,112 @@
+// src/components/Spinner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Spinner = ({ size = "small" }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: size === "large" ? "animate-spin" : "",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+export {
+  Spinner
+};

package/dist/{chunk-CG2NIXZE.js → chunk-6CS5ZBXO.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/{chunk-P242H6OU.js → chunk-IMN6I5NV.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";

package/dist/{chunk-VPEVXTBJ.js → chunk-KYMBBPEW.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk-VG4EPHJA.js";
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-L364HTYC.js";
 import {
   Icon
 } from "./chunk-IGQVA7SC.js";
@@ -81,7 +81,13 @@ function SelectPaymentMethod(props) {
       {
         isOpen: selectedMethod === "CCPayment",
         title: "Pay by Credit/Debit Card",
-        before: /* @__PURE__ */ jsx(Radio, { checked: selectedMethod === "CCPayment", readOnly: true }),
+        before: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            checked: selectedMethod === "CCPayment",
+            onClick: (e) => e.preventDefault()
+          }
+        ),
         onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
         children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
       }
@@ -125,8 +131,7 @@ function ACHSelector(props) {
       before: /* @__PURE__ */ jsx(
         Radio,
         {
-          checked: !!selectedBankGuid && selectedMethod === "ACHPayment",
-          readOnly: true
+          checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
         }
       ),
       onClick: () => setIsOpen((prev) => !prev),

package/dist/{chunk-H6LXXGX6.js → chunk-L364HTYC.js}

@@ -95,11 +95,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -137,7 +140,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ jsx("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/{chunk-WVLT6XM7.js → chunk-OX3HKFIH.js}

@@ -1,9 +1,9 @@
 import {
   SelectPaymentMethod
-} from "./chunk-VPEVXTBJ.js";
+} from "./chunk-KYMBBPEW.js";
 import {
   Modal
-} from "./chunk-D2YP2BTN.js";
+} from "./chunk-QIHDPSOM.js";
 import {
   Input
 } from "./chunk-R5TLUWDD.js";

package/dist/{chunk-D2YP2BTN.js → chunk-QIHDPSOM.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-4RJKB7LC.js";
 import {
   ModalButtons
-} from "./chunk-CG2NIXZE.js";
+} from "./chunk-6CS5ZBXO.js";
 import {
   ModalContent
 } from "./chunk-FWPJ73IK.js";
 import {
   ModalHeader
-} from "./chunk-6UI5GABI.js";
+} from "./chunk-3JRVV6QY.js";
 import {
   ModalScrim
 } from "./chunk-4JLU7TAC.js";

package/dist/{chunk-E5VEDZYV.js → chunk-ZEGVZ5NW.js}

@@ -122,9 +122,10 @@ var DataGridCell = memo(
       lockedHeaderBgStyles,
       iconComponentStyles,
       className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-action-primary-normal",
+      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
       "focus-within:!z-10",
       "overflow-x-hidden",
+      "overflow-y-hidden",
       component === "input" && "border",
       component === "input" && !error && !warning && "border-border-primary-normal",
       component === "input" && error && "border-border-primary-error",
@@ -142,7 +143,6 @@ var DataGridCell = memo(
         className: clsx("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
-        "data-theme": type === "header" ? "brand" : void 0,
         children: /* @__PURE__ */ jsx(
           "div",
           {

package/dist/components/Button.cjs

@@ -272,11 +272,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -314,7 +317,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "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, className: labelClasses, children }),

package/dist/components/Button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-L364HTYC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/ContentTab.cjs

@@ -277,11 +277,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -319,7 +322,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "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, className: labelClasses, children }),

package/dist/components/ContentTab.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   ContentTab
-} from "../chunk-X62XGQY7.js";
-import "../chunk-H6LXXGX6.js";
+} from "../chunk-2XOQII4G.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/ContentTabs.cjs

@@ -281,11 +281,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx2.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -323,7 +326,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "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, className: labelClasses, children }),

package/dist/components/ContentTabs.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   ContentTab
-} from "../chunk-X62XGQY7.js";
-import "../chunk-H6LXXGX6.js";
+} from "../chunk-2XOQII4G.js";
+import "../chunk-L364HTYC.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 

package/dist/components/DataGridCell.cjs

@@ -1739,9 +1739,10 @@ var DataGridCell = (0, import_react10.memo)(
       lockedHeaderBgStyles,
       iconComponentStyles,
       className,
-      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-action-primary-normal",
+      "flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
       "focus-within:!z-10",
       "overflow-x-hidden",
+      "overflow-y-hidden",
       component === "input" && "border",
       component === "input" && !error && !warning && "border-border-primary-normal",
       component === "input" && error && "border-border-primary-error",
@@ -1759,7 +1760,6 @@ var DataGridCell = (0, import_react10.memo)(
         className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
-        "data-theme": type === "header" ? "brand" : void 0,
         children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {

package/dist/components/DataGridCell.js

@@ -4,7 +4,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-E5VEDZYV.js";
+} from "../chunk-ZEGVZ5NW.js";
 import "../chunk-37TJJQL3.js";
 import "../chunk-5GUW4DUY.js";
 import "../chunk-VH3EJNVE.js";

package/dist/components/FilterGroup.cjs

@@ -524,11 +524,14 @@ var Button = (_a) => {
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
   );
   const navigationVarianStyles = variant === "navigation" && (0, import_clsx6.default)(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
+    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:text-text-action-primary-active",
+    "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
+    // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
+    "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
+    // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
+    "active:bg-background-on-action-secondary-active active:text-brand-text-action-primary-active",
+    // "active:bg-background-action-secondary-active active:text-text-action-primary-active", // Will use this once colors are finalized
     "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
     "flex-col",
     paddingUsingComponentGap
@@ -566,7 +569,6 @@ var Button = (_a) => {
       onClick: props.onClick,
       disabled,
       href,
-      "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
         !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),

package/dist/components/FilterGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   OptionPill
-} from "../chunk-QNQ5K7NW.js";
+} from "../chunk-3NWBR3V3.js";
 import {
   Checkbox
 } from "../chunk-WT5XXW6G.js";
@@ -17,7 +17,7 @@ import "../chunk-VG4EPHJA.js";
 import {
   Link
 } from "../chunk-AOELEEUS.js";
-import "../chunk-H6LXXGX6.js";
+import "../chunk-L364HTYC.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";

package/dist/components/LoadingScrim.cjs

@@ -0,0 +1,168 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/LoadingScrim.tsx
+var LoadingScrim_exports = {};
+__export(LoadingScrim_exports, {
+  LoadingScrim: () => LoadingScrim
+});
+module.exports = __toCommonJS(LoadingScrim_exports);
+var import_clsx = __toESM(require("clsx"), 1);
+
+// src/components/Spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Spinner = ({ size = "small" }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: size === "large" ? "animate-spin" : "",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/LoadingScrim.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function LoadingScrim({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        "fixed inset-0 z-50 flex items-center justify-center bg-neutral-600/30",
+        className
+      ),
+      "aria-modal": "true",
+      role: "dialog",
+      tabIndex: -1,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "large" }) })
+    }
+  );
+}
+LoadingScrim.displayName = "LoadingScrim";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoadingScrim
+});