@cerberus-design/react 0.10.4 → 0.11.0

package/build/legacy/components/Fieldset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Fieldset.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport type { FieldsetHTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>\n\n/**\n * A component to group related elements in a form for accessibility.\n * @memberof Field\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <Label htmlFor=\"yes\">Yes</Label>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <Label htmlFor=\"no\">No</Label>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n */\nexport function Fieldset(props: FieldsetProps) {\n  const { invalid, ...formState } = useFieldContext()\n\n  return (\n    <fieldset\n      {...props}\n      {...formState}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        css({\n          border: 'none',\n          pt: 2,\n          margin: 0,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAwB;;;ACAxB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ADpBI,IAAAA,sBAAA;AAJG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI,gBAAgB;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,eAAW;AAAA,QACT,MAAM;AAAA,YACN,gBAAI;AAAA,UACF,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/FieldsetLabel.cjs

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/FieldsetLabel.tsx
+var FieldsetLabel_exports = {};
+__export(FieldsetLabel_exports, {
+  FieldsetLabel: () => FieldsetLabel
+});
+module.exports = __toCommonJS(FieldsetLabel_exports);
+var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FieldsetLabel(props) {
+  const { size, usage, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "label",
+    {
+      ...nativeProps,
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.label)({
+          size,
+          usage
+        })
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FieldsetLabel
+});
+//# sourceMappingURL=FieldsetLabel.cjs.map

package/build/legacy/components/FieldsetLabel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FieldsetLabel.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport type { LabelProps } from './Label'\n\n/**\n * This module contains the FieldsetLabel component.\n * @module FieldsetLabel\n */\n\nexport type FieldsetLabelProps = LabelProps & LabelVariantProps\n\n/**\n * Used for labeling inputs that are children of a Fieldset group.\n * @memberof Fieldset\n * @see https://cerberus.digitalu.design/react/fieldset\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <FieldsetLabel htmlFor=\"yes\">Yes</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <FieldsetLabel htmlFor=\"no\">No</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n * ```\n */\nexport function FieldsetLabel(props: FieldsetLabelProps) {\n  const { size, usage, ...nativeProps } = props\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({\n          size,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAA8C;AA8C1C;AAHG,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,OAAO,GAAG,YAAY,IAAI;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,sBAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/FileStatus.cjs

@@ -70,6 +70,102 @@ function IndeterminateIcon(props) {
   );
 }
 
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/config/cerbIcons.ts
 var defaultIcons = {
   avatar: import_icons.UserFilled,
@@ -78,12 +174,13 @@ var defaultIcons = {
   confirmModal: import_icons.Information,
   delete: import_icons.TrashCan,
   promptModal: import_icons.Information,
-  fileUploader: import_icons.CloudUpload,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
-  infoNotification: import_icons.InformationFilled,
-  successNotification: import_icons.CheckmarkFilled,
-  warningNotification: import_icons.WarningFilled,
-  dangerNotification: import_icons.ErrorFilled,
+  infoNotification: import_icons.Information,
+  successNotification: import_icons.CheckmarkOutline,
+  warningNotification: import_icons.WarningAlt,
+  dangerNotification: import_icons.WarningFilled,
   invalid: import_icons.WarningFilled,
   invalidAlt: import_icons.Warning,
   redo: import_icons.Restart,
@@ -96,7 +193,7 @@ var $cerberusIcons = defaultIcons;
 
 // src/context/field.tsx
 var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var FieldContext = (0, import_react.createContext)(null);
 function Field(props) {
   const value = (0, import_react.useMemo)(
@@ -108,7 +205,7 @@ function Field(props) {
     }),
     [props.disabled, props.readOnly, props.required, props.invalid]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldContext.Provider, { value, children: props.children });
 }
 function useFieldContext() {
   const context = (0, import_react.useContext)(FieldContext);
@@ -121,10 +218,10 @@ function useFieldContext() {
 // src/components/FieldMessage.tsx
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function FieldMessage(props) {
   const { invalid } = useFieldContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "small",
     {
       ...props,
@@ -137,7 +234,7 @@ function FieldMessage(props) {
 // src/components/ProgressBar.tsx
 var import_css2 = require("@cerberus/styled-system/css");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ProgressBar(props) {
   const { indeterminate, size, usage, now, label, ...nativeProps } = props;
   const styles = (0, import_recipes2.progressBar)({ size, usage });
@@ -145,7 +242,7 @@ function ProgressBar(props) {
   const width = {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ...nativeProps,
@@ -155,7 +252,7 @@ function ProgressBar(props) {
       "aria-valuenow": indeterminate ? 0 : nowClamped,
       className: (0, import_css2.cx)(nativeProps.className, styles.root),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
           ...indeterminate && { "data-indeterminate": true },
@@ -171,10 +268,10 @@ function ProgressBar(props) {
 // src/components/IconButton.tsx
 var import_css3 = require("@cerberus/styled-system/css");
 var import_recipes3 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
     {
       ...nativeProps,
@@ -208,7 +305,7 @@ function Show(props) {
 }
 
 // src/components/Avatar.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
     ariaLabel,
@@ -223,7 +320,7 @@ function Avatar(props) {
   } = props;
   const { avatar: AvatarIcon } = $cerberusIcons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       ...nativeProps,
@@ -232,19 +329,19 @@ function Avatar(props) {
         (0, import_recipes4.avatar)({ gradient, size }),
         (0, import_patterns.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -256,11 +353,11 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
@@ -296,7 +393,7 @@ var iconSizeMap = {
 };
 
 // src/components/FileStatus.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -332,22 +429,22 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       ...nativeProps,
       className: (0, import_css5.cx)(nativeProps.className, styles.root, (0, import_patterns2.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Avatar,
           {
             ariaLabel: "",
             gradient: modalIconPalette,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MatchFileStatusIcon, { size: 24, status }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchFileStatusIcon, { size: 24, status }),
             src: ""
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: (0, import_patterns2.vstack)({
@@ -356,7 +453,7 @@ function FileStatus(props) {
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "small",
                 {
                   className: (0, import_css5.css)({
@@ -366,7 +463,7 @@ function FileStatus(props) {
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ProgressBar,
                 {
                   id: props.id,
@@ -375,27 +472,27 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 FieldMessage,
                 {
                   className: (0, import_css5.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -404,18 +501,20 @@ function FileStatus(props) {
 }
 function MatchFileStatusIcon(props) {
   const {
+    waitingFileUploader: TodoIcon,
     fileUploader: FileUploaderIcon,
     invalidAlt: InvalidIcon,
     successNotification: DoneIcon
   } = $cerberusIcons;
   switch (props.status) {
     case "todo" /* TODO */:
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TodoIcon, { size: props.size });
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileUploaderIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileUploaderIcon, { size: props.size });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DoneIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DoneIcon, { size: props.size });
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InvalidIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InvalidIcon, { size: props.size });
     default:
       throw new Error("Unknown status");
   }
@@ -439,11 +538,11 @@ function MatchStatusAction(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }

package/build/legacy/components/FileStatus.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FileStatus.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx","../../../src/components/FieldMessage.tsx","../../../src/components/ProgressBar.tsx","../../../src/components/IconButton.tsx","../../../src/components/Avatar.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useMemo,\n  type HTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport {\n  fileStatus,\n  type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Field } from '../context/field'\nimport { FieldMessage } from './FieldMessage'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * A unique identifier for the file status. Required for accessibility.\n   */\n  id: string\n  /**\n   * The name of the file.\n   */\n  file: string\n  /**\n   * The percentage of the file that has been processed.\n   */\n  now: ProgressBarProps['now']\n  /**\n   * The status of the file.\n   */\n  status: processStatus\n  /**\n   * The action to perform on the file when a user clicks the\n   * button located at the end of the status card.\n   * @param status - The status of the file.\n   * @param e - The event object.\n   * @example\n   * ```tsx\n   * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n   * ```\n   * @default () => {}\n   */\n  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n  TODO = 'todo',\n  PROCESSING = 'processing',\n  DONE = 'done',\n  ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n  const { file, now, status, onClick, ...nativeProps } = props\n  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n  const palette = useMemo(() => getPalette(status), [status])\n  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n  const styles = useMemo(() => {\n    switch (status) {\n      case processStatus.TODO:\n        return fileStatus({ status: 'todo' })\n      case processStatus.PROCESSING:\n        return fileStatus({ status: 'processing' })\n      case processStatus.DONE:\n        return fileStatus({ status: 'done' })\n      case processStatus.ERROR:\n        return fileStatus({ status: 'error' })\n      default:\n        return fileStatus()\n    }\n  }, [status])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const actionStatus = getStatusActionLabel(\n        status,\n      ).toLocaleLowerCase() as FileStatusActions\n      onClick(actionStatus, e)\n    },\n    [onClick],\n  )\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(nativeProps.className, styles.root, hstack())}\n    >\n      <Avatar\n        ariaLabel=\"\"\n        gradient={modalIconPalette}\n        icon={<MatchFileStatusIcon size={24} status={status} />}\n        src=\"\"\n      />\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0.12rem',\n          w: 'full',\n        })}\n      >\n        <small\n          className={css({\n            color: 'page.text.initial',\n            textStyle: 'label-sm',\n          })}\n        >\n          {file}\n        </small>\n        <ProgressBar\n          id={props.id}\n          label=\"File upload status\"\n          now={now}\n          size=\"sm\"\n        />\n        <Field invalid={modalIconPalette === 'hades-dark'}>\n          <FieldMessage\n            className={css({\n              color: 'page.text.100',\n            })}\n            id={`help:${file}`}\n          >\n            <MatchFileStatusText status={status} now={now} />\n          </FieldMessage>\n        </Field>\n      </div>\n\n      <IconButton\n        ariaLabel={actionLabel}\n        onClick={handleClick}\n        palette={palette}\n        size=\"sm\"\n      >\n        <MatchStatusAction status={status} />\n      </IconButton>\n    </div>\n  )\n}\n\ninterface FileStatusElProps {\n  status: FileStatusProps['status']\n  size?: 16 | 20 | 24 | 32\n  now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n  const {\n    fileUploader: FileUploaderIcon,\n    invalidAlt: InvalidIcon,\n    successNotification: DoneIcon,\n  } = $cerberusIcons\n\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <FileUploaderIcon size={props.size} />\n    case processStatus.DONE:\n      return <DoneIcon size={props.size} />\n    case processStatus.ERROR:\n      return <InvalidIcon size={props.size} />\n    default:\n      throw new Error('Unknown status')\n  }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n  switch (props.status) {\n    case processStatus.TODO:\n      return 'Waiting to upload'\n    case processStatus.PROCESSING:\n      return `${props.now}% Complete`\n    case processStatus.DONE:\n      return 'File uploaded successfully'\n    case processStatus.ERROR:\n      return 'There was an error uploading the file'\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <CloseIcon />\n    case processStatus.ERROR:\n      return <RedoIcon />\n    case processStatus.DONE:\n      return <TrashIcon />\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'Cancel'\n    case processStatus.ERROR:\n      return 'Retry'\n    case processStatus.DONE:\n      return 'Delete'\n    default:\n      return ''\n  }\n}\n\nfunction getPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'danger'\n    case processStatus.ERROR:\n      return 'action'\n    case processStatus.DONE:\n      return 'danger'\n    default:\n      return 'action'\n  }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'charon-light'\n    case processStatus.ERROR:\n      return 'hades-dark'\n    case processStatus.DONE:\n      return 'thanatos-light'\n    default:\n      return 'charon-light'\n  }\n}\n","import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  fieldMessage,\n  type FieldMessageVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\nexport interface FieldMessageBaseProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.\n   *\n   * @example For help messages: `help:field_id`\n   * @example For error messages: `error:field_id`\n   */\n  id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps\n\n/**\n * A component that provides feedback about the field.\n * @see https://cerberus.digitalu.design/react/field-message\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n","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  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: never\n  /**\n   * The current value of the progress bar.\n   */\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: true\n  /**\n   * The current value of the progress bar.\n   */\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 * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, label, ...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-label={label}\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","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n","import { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { avatar: AvatarIcon } = $cerberusIcons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":"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","names":["import_react","import_recipes","import_css","import_patterns","import_jsx_runtime","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","processStatus"]}
+{"version":3,"sources":["../../../src/components/FileStatus.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx","../../../src/components/FieldMessage.tsx","../../../src/components/ProgressBar.tsx","../../../src/components/IconButton.tsx","../../../src/components/Avatar.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useMemo,\n  type HTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport {\n  fileStatus,\n  type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Field } from '../context/field'\nimport { FieldMessage } from './FieldMessage'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * A unique identifier for the file status. Required for accessibility.\n   */\n  id: string\n  /**\n   * The name of the file.\n   */\n  file: string\n  /**\n   * The percentage of the file that has been processed.\n   */\n  now: ProgressBarProps['now']\n  /**\n   * The status of the file.\n   */\n  status: processStatus\n  /**\n   * The action to perform on the file when a user clicks the\n   * button located at the end of the status card.\n   * @param status - The status of the file.\n   * @param e - The event object.\n   * @example\n   * ```tsx\n   * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n   * ```\n   * @default () => {}\n   */\n  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n  TODO = 'todo',\n  PROCESSING = 'processing',\n  DONE = 'done',\n  ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n  const { file, now, status, onClick, ...nativeProps } = props\n  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n  const palette = useMemo(() => getPalette(status), [status])\n  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n  const styles = useMemo(() => {\n    switch (status) {\n      case processStatus.TODO:\n        return fileStatus({ status: 'todo' })\n      case processStatus.PROCESSING:\n        return fileStatus({ status: 'processing' })\n      case processStatus.DONE:\n        return fileStatus({ status: 'done' })\n      case processStatus.ERROR:\n        return fileStatus({ status: 'error' })\n      default:\n        return fileStatus()\n    }\n  }, [status])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const actionStatus = getStatusActionLabel(\n        status,\n      ).toLocaleLowerCase() as FileStatusActions\n      onClick(actionStatus, e)\n    },\n    [onClick],\n  )\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(nativeProps.className, styles.root, hstack())}\n    >\n      <Avatar\n        ariaLabel=\"\"\n        gradient={modalIconPalette}\n        icon={<MatchFileStatusIcon size={24} status={status} />}\n        src=\"\"\n      />\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0.12rem',\n          w: 'full',\n        })}\n      >\n        <small\n          className={css({\n            color: 'page.text.initial',\n            textStyle: 'label-sm',\n          })}\n        >\n          {file}\n        </small>\n        <ProgressBar\n          id={props.id}\n          label=\"File upload status\"\n          now={now}\n          size=\"sm\"\n        />\n        <Field invalid={modalIconPalette === 'hades-dark'}>\n          <FieldMessage\n            className={css({\n              color: 'page.text.100',\n            })}\n            id={`help:${file}`}\n          >\n            <MatchFileStatusText status={status} now={now} />\n          </FieldMessage>\n        </Field>\n      </div>\n\n      <IconButton\n        ariaLabel={actionLabel}\n        onClick={handleClick}\n        palette={palette}\n        size=\"sm\"\n      >\n        <MatchStatusAction status={status} />\n      </IconButton>\n    </div>\n  )\n}\n\ninterface FileStatusElProps {\n  status: FileStatusProps['status']\n  size?: 16 | 20 | 24 | 32\n  now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n  const {\n    waitingFileUploader: TodoIcon,\n    fileUploader: FileUploaderIcon,\n    invalidAlt: InvalidIcon,\n    successNotification: DoneIcon,\n  } = $cerberusIcons\n\n  switch (props.status) {\n    case processStatus.TODO:\n      return <TodoIcon size={props.size} />\n    case processStatus.PROCESSING:\n      return <FileUploaderIcon size={props.size} />\n    case processStatus.DONE:\n      return <DoneIcon size={props.size} />\n    case processStatus.ERROR:\n      return <InvalidIcon size={props.size} />\n    default:\n      throw new Error('Unknown status')\n  }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n  switch (props.status) {\n    case processStatus.TODO:\n      return 'Waiting to upload'\n    case processStatus.PROCESSING:\n      return `${props.now}% Complete`\n    case processStatus.DONE:\n      return 'File uploaded successfully'\n    case processStatus.ERROR:\n      return 'There was an error uploading the file'\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <CloseIcon />\n    case processStatus.ERROR:\n      return <RedoIcon />\n    case processStatus.DONE:\n      return <TrashIcon />\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'Cancel'\n    case processStatus.ERROR:\n      return 'Retry'\n    case processStatus.DONE:\n      return 'Delete'\n    default:\n      return ''\n  }\n}\n\nfunction getPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'danger'\n    case processStatus.ERROR:\n      return 'action'\n    case processStatus.DONE:\n      return 'danger'\n    default:\n      return 'action'\n  }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'charon-light'\n    case processStatus.ERROR:\n      return 'hades-dark'\n    case processStatus.DONE:\n      return 'thanatos-light'\n    default:\n      return 'charon-light'\n  }\n}\n","import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  fieldMessage,\n  type FieldMessageVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\nexport interface FieldMessageBaseProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.\n   *\n   * @example For help messages: `help:field_id`\n   * @example For error messages: `error:field_id`\n   */\n  id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps\n\n/**\n * A component that provides feedback about the field.\n * @see https://cerberus.digitalu.design/react/field-message\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n","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  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: never\n  /**\n   * The current value of the progress bar.\n   */\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: true\n  /**\n   * The current value of the progress bar.\n   */\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 * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, label, ...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-label={label}\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","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n","import { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { avatar: AvatarIcon } = $cerberusIcons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":"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","names":["import_react","import_recipes","import_css","import_patterns","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_jsx_runtime","import_jsx_runtime","processStatus"]}