@cerberus-design/react 0.9.2-next-f877bc3 → 0.9.2-next-5604236

package/build/modern/_tsup-dts-rollup.d.ts

@@ -260,6 +260,43 @@ export { CheckboxProps as CheckboxProps_alias_1 }
  */
 export declare function CheckmarkIcon(props: CheckboxIconProps): JSX_2.Element;
 
+/**
+ * The CircularProgress component is used to display a loading indicator.
+ * @param props - SVG element attributes
+ * @param props.now - The current value of the CircularProgress
+ * @param props.title - The title of the CircularProgress for a11y
+ * @param props.label - What is shown below the now value (default: 'Done')
+ * @description [CircularProgress Docs](https://cerberus.digitalu.design/react/progress/)
+ * @example
+ * ```tsx
+ * <CircularProgress now={24} title="Course completion" label="done" />
+ * ```
+ */
+declare function CircularProgress(props: CircularProgressProps): JSX_2.Element;
+export { CircularProgress }
+export { CircularProgress as CircularProgress_alias_1 }
+
+/**
+ * This module contains the CircularProgress component.
+ * @module
+ */
+declare interface CircularProgressProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The current value of the CircularProgress
+     */
+    now: number;
+    /**
+     * The title of the CircularProgress for a11y
+     */
+    title: string;
+    /**
+     * What is shown below the now value (default: 'Done')
+     */
+    label?: string;
+}
+export { CircularProgressProps }
+export { CircularProgressProps as CircularProgressProps_alias_1 }
+
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
     gradient?: never;
     palette?: never;
@@ -1303,10 +1340,24 @@ declare type ShowResult = ((value: boolean | PromiseLike<boolean>) => void) | nu
 export { ShowResult }
 export { ShowResult as ShowResult_alias_1 }
 
+/**
+ * The Spinner component is used to display a loading indicator.
+ * @param props - SVG element attributes
+ * @param props.size - The size of the spinner
+ * @description [Spinner Docs](https://cerberus.digitalu.design/react/loading-states/)
+ * @example
+ * ```tsx
+ * <Spinner size={24} />
+ * ```
+ */
 declare function Spinner(props: SpinnerProps): JSX_2.Element;
 export { Spinner }
 export { Spinner as Spinner_alias_1 }
 
+/**
+ * This module contains the Spinner component.
+ * @module
+ */
 declare type SpinnerProps = SVGProps<SVGSVGElement> & {
     size?: number | string;
 };

package/build/modern/chunk-A6CLBPFE.js

@@ -0,0 +1,155 @@
+// src/components/CircularProgress.tsx
+import { cq } from "@cerberus/styled-system/patterns";
+import { css } from "@cerberus/styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CircularProgress(props) {
+  const strokeW = 14;
+  const radius = `calc(50% * (1 - ${strokeW}/100))`;
+  const status = props.label ?? "Done";
+  const now = props.now >= 100 ? 100 : props.now;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": now,
+      className: cq({
+        alignSelf: "stretch",
+        flex: 1,
+        m: "4px",
+        position: "relative"
+      }),
+      role: "progressbar",
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "data-complete": now === 100,
+          className: css({
+            display: "block",
+            rounded: "full",
+            transition: "all 0.5s ease"
+          }),
+          fill: "none",
+          strokeLinecap: "round",
+          strokeWidth: strokeW,
+          viewBox: "0 0 100 100",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("title", { children: props.title }),
+            /* @__PURE__ */ jsx("desc", { children: `${now}% ${status}` }),
+            /* @__PURE__ */ jsxs("mask", { id: "progMask", children: [
+              /* @__PURE__ */ jsx("rect", { fill: "white", width: "100%", height: "100%" }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: css({
+                    stroke: "page.bg.100"
+                  }),
+                  cx: "50%",
+                  cy: "50%",
+                  r: radius,
+                  pathLength: "100"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: css({
+                    transition: "stroke-dashoffset 0.5s ease"
+                  }),
+                  cx: "50%",
+                  cy: "50%",
+                  r: radius,
+                  pathLength: "100",
+                  stroke: "black",
+                  strokeDasharray: "100",
+                  strokeDashoffset: 100 - now,
+                  transform: "rotate(-90 50 50)"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: css({
+                  fill: "page.surface.initial"
+                }),
+                cx: "50%",
+                cy: "50%",
+                r: `calc(50% * (1 - ${strokeW}/100))`,
+                pathLength: "100"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: css({
+                  stroke: "page.bg.100"
+                }),
+                cx: "50%",
+                cy: "50%",
+                r: radius,
+                pathLength: "100"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                "data-complete": now === 100,
+                className: css({
+                  stroke: "action.bg.initial",
+                  transition: "stroke-dashoffset 0.5s ease",
+                  "&:is([data-complete=true])": {
+                    stroke: "success.bg.initial"
+                  }
+                }),
+                cx: "50%",
+                cy: "50%",
+                r: radius,
+                pathLength: "100",
+                strokeDasharray: "100",
+                strokeDashoffset: 100 - now,
+                transform: "rotate(-90 50 50)"
+              }
+            ),
+            /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsxs(
+                "text",
+                {
+                  className: css({
+                    fill: "page.text.initial",
+                    fontFamily: "mono",
+                    textStyle: "1.25rem"
+                  }),
+                  x: "35%",
+                  y: "50%",
+                  children: [
+                    now,
+                    "%"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: css({
+                    fill: "page.text.100",
+                    fontSize: "0.5rem"
+                  }),
+                  x: "39%",
+                  y: "60%",
+                  children: status
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  CircularProgress
+};
+//# sourceMappingURL=chunk-A6CLBPFE.js.map

package/build/modern/chunk-A6CLBPFE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from '@cerberus/styled-system/patterns'\nimport { css } from '@cerberus/styled-system/css'\nimport type { SVGProps } from 'react'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  label?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @description [CircularProgress Docs](https://cerberus.digitalu.design/react/progress/)\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.label ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n\n  return (\n    <div\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={cq({\n        alignSelf: 'stretch',\n        flex: 1,\n        m: '4px',\n        position: 'relative',\n      })}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={css({\n          display: 'block',\n          rounded: 'full',\n          transition: 'all 0.5s ease',\n        })}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n        <mask id=\"progMask\">\n          <rect fill=\"white\" width=\"100%\" height=\"100%\" />\n          <circle\n            className={css({\n              stroke: 'page.bg.100',\n            })}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            pathLength=\"100\"\n          />\n          <circle\n            className={css({\n              transition: 'stroke-dashoffset 0.5s ease',\n            })}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            pathLength=\"100\"\n            stroke=\"black\"\n            strokeDasharray=\"100\"\n            strokeDashoffset={100 - now}\n            transform=\"rotate(-90 50 50)\"\n          />\n        </mask>\n\n        {/* <circle\n          fill=\"var(--cerberus-colors-page-surface-initial)\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r={`calc(50% * (1.15 - ${strokeW}/100))`}\n          pathLength=\"100\"\n          mask=\"url(#progMask)\"\n        /> */}\n\n        <circle\n          className={css({\n            fill: 'page.surface.initial',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={`calc(50% * (1 - ${strokeW}/100))`}\n          pathLength=\"100\"\n        />\n        <circle\n          className={css({\n            stroke: 'page.bg.100',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n        <circle\n          data-complete={now === 100}\n          className={css({\n            stroke: 'action.bg.initial',\n            transition: 'stroke-dashoffset 0.5s ease',\n            '&:is([data-complete=true])': {\n              stroke: 'success.bg.initial',\n            },\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n          strokeDasharray=\"100\"\n          strokeDashoffset={100 - now}\n          transform=\"rotate(-90 50 50)\"\n        />\n\n        <g>\n          <text\n            className={css({\n              fill: 'page.text.initial',\n              fontFamily: 'mono',\n              textStyle: '1.25rem',\n            })}\n            x=\"35%\"\n            y=\"50%\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n            })}\n            x=\"39%\"\n            y=\"60%\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/build/modern/{chunk-WFHZDHJB.js → chunk-AEDGCR25.js}

@@ -1,3 +1,6 @@
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Notification
 } from "./chunk-QZ6NS6VN.js";
@@ -7,9 +10,6 @@ import {
 import {
   NotificationHeading
 } from "./chunk-3C2DJSEE.js";
-import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-WFHZDHJB.js.map
+//# sourceMappingURL=chunk-AEDGCR25.js.map

package/build/modern/{chunk-RSFFVJSM.js → chunk-CMKBUSGN.js}

@@ -1,18 +1,18 @@
-import {
-  ModalHeading
-} from "./chunk-JB7IQ2BM.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  ModalHeader
+} from "./chunk-QU7UV5DB.js";
+import {
+  ModalHeading
+} from "./chunk-JB7IQ2BM.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
 import {
   ModalDescription
 } from "./chunk-4M4LCQ43.js";
-import {
-  ModalHeader
-} from "./chunk-QU7UV5DB.js";
 import {
   Avatar
 } from "./chunk-UN3OAW56.js";
@@ -176,4 +176,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-RSFFVJSM.js.map
+//# sourceMappingURL=chunk-CMKBUSGN.js.map

package/build/modern/{chunk-TYTEREKZ.js → chunk-G6O7KRQ6.js}

@@ -19,7 +19,7 @@ function ProgressBar(props) {
       "aria-valuemax": 100,
       "aria-valuenow": indeterminate ? 0 : nowClamped,
       className: cx(nativeProps.className, styles.root),
-      role: "meter",
+      role: "progressbar",
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -36,4 +36,4 @@ function ProgressBar(props) {
 export {
   ProgressBar
 };
-//# sourceMappingURL=chunk-TYTEREKZ.js.map
+//# sourceMappingURL=chunk-G6O7KRQ6.js.map

package/build/modern/{chunk-TYTEREKZ.js.map → chunk-G6O7KRQ6.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  progressBar,\n  type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n  indeterminate?: never\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  indeterminate: true\n  now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n  ProgressBarVariantProps &\n  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @param props - HTML div element attributes\n * @param props.now - The current value of the progress bar\n * @param props.indeterminate - Whether the progress bar is indeterminate\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, ...nativeProps } = props\n  const styles = progressBar({ size, usage })\n  const nowClamped = Math.min(100, Math.max(0, now || 0))\n  const width = {\n    width: indeterminate ? '50%' : `${nowClamped}%`,\n  }\n\n  return (\n    <div\n      {...nativeProps}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? 0 : nowClamped}\n      className={cx(nativeProps.className, styles.root)}\n      role=\"meter\"\n    >\n      <div\n        {...(indeterminate && { 'data-indeterminate': true })}\n        data-complete={nowClamped === 100}\n        className={styles.bar}\n        style={width}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgDD;AAjBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,GAAG,YAAY,IAAI;AAC5D,QAAM,SAAS,YAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,WAAW,GAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  progressBar,\n  type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n  indeterminate?: never\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  indeterminate: true\n  now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n  ProgressBarVariantProps &\n  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @param props - HTML div element attributes\n * @param props.now - The current value of the progress bar\n * @param props.indeterminate - Whether the progress bar is indeterminate\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, ...nativeProps } = props\n  const styles = progressBar({ size, usage })\n  const nowClamped = Math.min(100, Math.max(0, now || 0))\n  const width = {\n    width: indeterminate ? '50%' : `${nowClamped}%`,\n  }\n\n  return (\n    <div\n      {...nativeProps}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? 0 : nowClamped}\n      className={cx(nativeProps.className, styles.root)}\n      role=\"progressbar\"\n    >\n      <div\n        {...(indeterminate && { 'data-indeterminate': true })}\n        data-complete={nowClamped === 100}\n        className={styles.bar}\n        style={width}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgDD;AAjBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,GAAG,YAAY,IAAI;AAC5D,QAAM,SAAS,YAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,WAAW,GAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-ZCIJRM2X.js → chunk-GABTVDSB.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
 } from "./chunk-NBG2OSYI.js";
@@ -53,4 +53,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-ZCIJRM2X.js.map
+//# sourceMappingURL=chunk-GABTVDSB.js.map

package/build/modern/{chunk-RN6HSKIG.js → chunk-IXOJLCNO.js}

@@ -77,4 +77,4 @@ function Spinner(props) {
 export {
   Spinner
 };
-//# sourceMappingURL=chunk-RN6HSKIG.js.map
+//# sourceMappingURL=chunk-IXOJLCNO.js.map

package/build/modern/{chunk-RN6HSKIG.js.map → chunk-IXOJLCNO.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  size?: number | string\n}\n\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";AAwBQ,SAKE,KALF;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.size - The size of the spinner\n * @description [Spinner Docs](https://cerberus.digitalu.design/react/loading-states/)\n * @example\n * ```tsx\n * <Spinner size={24} />\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";AAuCQ,SAKE,KALF;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-XGIACYC3.js → chunk-LAOQSNMN.js}

@@ -1,15 +1,15 @@
 import {
   ProgressBar
-} from "./chunk-TYTEREKZ.js";
+} from "./chunk-G6O7KRQ6.js";
+import {
+  FieldMessage
+} from "./chunk-VGHVH2T3.js";
 import {
   IconButton
 } from "./chunk-SLHX5K6I.js";
 import {
   Avatar
 } from "./chunk-UN3OAW56.js";
-import {
-  FieldMessage
-} from "./chunk-VGHVH2T3.js";
 import {
   Field
 } from "./chunk-ZAU4JVLL.js";
@@ -215,4 +215,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-XGIACYC3.js.map
+//# sourceMappingURL=chunk-LAOQSNMN.js.map

package/build/modern/{chunk-2FK7NR7Y.js → chunk-RQPDRHRP.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -47,4 +47,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-2FK7NR7Y.js.map
+//# sourceMappingURL=chunk-RQPDRHRP.js.map

package/build/modern/{chunk-FMFKM2AB.js → chunk-SSY3KX3F.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
 } from "./chunk-NBG2OSYI.js";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-FMFKM2AB.js.map
+//# sourceMappingURL=chunk-SSY3KX3F.js.map

package/build/modern/{chunk-VRPAW76S.js → chunk-XPVDT4VF.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
 } from "./chunk-NBG2OSYI.js";
@@ -65,4 +65,4 @@ export {
   Select,
   Option
 };
-//# sourceMappingURL=chunk-VRPAW76S.js.map
+//# sourceMappingURL=chunk-XPVDT4VF.js.map

package/build/modern/{chunk-V4Y7DU4B.js → chunk-ZBEHDXFT.js}

@@ -1,36 +1,36 @@
-import {
-  ModalHeading
-} from "./chunk-JB7IQ2BM.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  ModalHeader
+} from "./chunk-QU7UV5DB.js";
+import {
+  ModalHeading
+} from "./chunk-JB7IQ2BM.js";
 import {
   Input
-} from "./chunk-FMFKM2AB.js";
+} from "./chunk-SSY3KX3F.js";
 import {
   Label
-} from "./chunk-2FK7NR7Y.js";
+} from "./chunk-RQPDRHRP.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
 import {
   ModalDescription
 } from "./chunk-4M4LCQ43.js";
-import {
-  ModalHeader
-} from "./chunk-QU7UV5DB.js";
 import {
   Avatar
 } from "./chunk-UN3OAW56.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   Field
 } from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
@@ -229,4 +229,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-V4Y7DU4B.js.map
+//# sourceMappingURL=chunk-ZBEHDXFT.js.map

package/build/modern/components/Checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Checkbox
-} from "../chunk-ZCIJRM2X.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-GABTVDSB.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";

package/build/modern/components/CircularProgress.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  CircularProgress
+} from "../chunk-A6CLBPFE.js";
+export {
+  CircularProgress
+};
+//# sourceMappingURL=CircularProgress.js.map

package/build/modern/components/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/FileStatus.js

@@ -2,13 +2,13 @@
 import {
   FileStatus,
   processStatus
-} from "../chunk-XGIACYC3.js";
-import "../chunk-TYTEREKZ.js";
+} from "../chunk-LAOQSNMN.js";
+import "../chunk-G6O7KRQ6.js";
+import "../chunk-VGHVH2T3.js";
 import "../chunk-SLHX5K6I.js";
 import "../chunk-UN3OAW56.js";
-import "../chunk-4O4QFF4S.js";
-import "../chunk-VGHVH2T3.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";

package/build/modern/components/Input.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Input
-} from "../chunk-FMFKM2AB.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-SSY3KX3F.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";

package/build/modern/components/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-2FK7NR7Y.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-RQPDRHRP.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Label
 };

package/build/modern/components/ProgressBar.js

@@ -1,6 +1,6 @@
 import {
   ProgressBar
-} from "../chunk-TYTEREKZ.js";
+} from "../chunk-G6O7KRQ6.js";
 export {
   ProgressBar
 };

package/build/modern/components/Select.js

@@ -2,9 +2,9 @@
 import {
   Option,
   Select
-} from "../chunk-VRPAW76S.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-XPVDT4VF.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-NBG2OSYI.js";
 import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";

package/build/modern/components/Spinner.js

@@ -1,6 +1,6 @@
 import {
   Spinner
-} from "../chunk-RN6HSKIG.js";
+} from "../chunk-IXOJLCNO.js";
 export {
   Spinner
 };

package/build/modern/context/confirm-modal.js

@@ -2,12 +2,12 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-RSFFVJSM.js";
-import "../chunk-JB7IQ2BM.js";
+} from "../chunk-CMKBUSGN.js";
 import "../chunk-4CAT3FHV.js";
+import "../chunk-QU7UV5DB.js";
+import "../chunk-JB7IQ2BM.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
-import "../chunk-QU7UV5DB.js";
 import "../chunk-UN3OAW56.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";

package/build/modern/context/notification-center.js

@@ -2,11 +2,11 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-WFHZDHJB.js";
+} from "../chunk-AEDGCR25.js";
+import "../chunk-4CAT3FHV.js";
 import "../chunk-QZ6NS6VN.js";
 import "../chunk-HW76XVA3.js";
 import "../chunk-3C2DJSEE.js";
-import "../chunk-4CAT3FHV.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";