@cerberus-design/react 0.10.4-next-10ee67c → 0.10.4-next-5e1525e

package/build/modern/components/Toggle.js

@@ -1,11 +1,12 @@
 "use client";
 import {
   Toggle
-} from "../chunk-GMG3B34U.js";
+} from "../chunk-SRGQQYBQ.js";
 import "../chunk-UZDVOIW5.js";
-import "../chunk-NBG2OSYI.js";
-import "../chunk-BDCFYW34.js";
+import "../chunk-5NELG2TB.js";
+import "../chunk-V7YG7JUJ.js";
 import "../chunk-CP7OUC2Q.js";
+import "../chunk-HVKM54BA.js";
 export {
   Toggle
 };

package/build/modern/config/cerbIcons.js

@@ -1,7 +1,8 @@
 import {
   defaultIcons
-} from "../chunk-BDCFYW34.js";
+} from "../chunk-V7YG7JUJ.js";
 import "../chunk-CP7OUC2Q.js";
+import "../chunk-HVKM54BA.js";
 export {
   defaultIcons
 };

package/build/modern/config/defineIcons.js

@@ -1,9 +1,10 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-NBG2OSYI.js";
-import "../chunk-BDCFYW34.js";
+} from "../chunk-5NELG2TB.js";
+import "../chunk-V7YG7JUJ.js";
 import "../chunk-CP7OUC2Q.js";
+import "../chunk-HVKM54BA.js";
 export {
   $cerberusIcons,
   defineIcons

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

@@ -2,19 +2,20 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-BDNY6R3H.js";
+} from "../chunk-K2QH37AW.js";
 import "../chunk-GLY7GU5S.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
 import "../chunk-WLEX22KS.js";
 import "../chunk-2UXE5PDG.js";
-import "../chunk-477G5ZEL.js";
+import "../chunk-XWQEINEL.js";
 import "../chunk-EXGKZGML.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-NBG2OSYI.js";
-import "../chunk-BDCFYW34.js";
+import "../chunk-5NELG2TB.js";
+import "../chunk-V7YG7JUJ.js";
 import "../chunk-CP7OUC2Q.js";
+import "../chunk-HVKM54BA.js";
 import "../chunk-7T3JIGM7.js";
 export {
   ConfirmModal,

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

@@ -2,17 +2,18 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-SP6O64KQ.js";
-import "../chunk-CMUFJU4S.js";
+} from "../chunk-ZUQ2MHMQ.js";
+import "../chunk-A42MQEHJ.js";
 import "../chunk-XEW6TJJ4.js";
 import "../chunk-SXIXDXG3.js";
 import "../chunk-GLY7GU5S.js";
 import "../chunk-EXGKZGML.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-NBG2OSYI.js";
-import "../chunk-BDCFYW34.js";
+import "../chunk-5NELG2TB.js";
+import "../chunk-V7YG7JUJ.js";
 import "../chunk-CP7OUC2Q.js";
+import "../chunk-HVKM54BA.js";
 export {
   NotificationCenter,
   useNotificationCenter

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

@@ -2,22 +2,23 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-ZBRG3FQV.js";
+} from "../chunk-U56OV7EK.js";
 import "../chunk-GLY7GU5S.js";
+import "../chunk-NMF2HYWO.js";
 import "../chunk-BE4EOU2P.js";
 import "../chunk-Q7BRMIBR.js";
 import "../chunk-WLEX22KS.js";
 import "../chunk-2UXE5PDG.js";
-import "../chunk-WZOYPFUU.js";
-import "../chunk-NMF2HYWO.js";
-import "../chunk-477G5ZEL.js";
+import "../chunk-WSGQZZVU.js";
+import "../chunk-XWQEINEL.js";
 import "../chunk-EXGKZGML.js";
 import "../chunk-UZDVOIW5.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-NBG2OSYI.js";
-import "../chunk-BDCFYW34.js";
+import "../chunk-5NELG2TB.js";
+import "../chunk-V7YG7JUJ.js";
 import "../chunk-CP7OUC2Q.js";
+import "../chunk-HVKM54BA.js";
 import "../chunk-7T3JIGM7.js";
 export {
   PromptModal,

package/build/modern/index.js

@@ -1,15 +1,18 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-SP6O64KQ.js";
+} from "./chunk-ZUQ2MHMQ.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-ZBRG3FQV.js";
+} from "./chunk-U56OV7EK.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
+import {
+  Td
+} from "./chunk-HPM2XRWT.js";
 import {
   Textarea
 } from "./chunk-JIJM6JFJ.js";
@@ -21,11 +24,11 @@ import {
 } from "./chunk-PKY46RRA.js";
 import {
   Toggle
-} from "./chunk-GMG3B34U.js";
+} from "./chunk-SRGQQYBQ.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-BDNY6R3H.js";
+} from "./chunk-K2QH37AW.js";
 import {
   Spinner
 } from "./chunk-7SYJFI5E.js";
@@ -44,16 +47,16 @@ import {
 } from "./chunk-B4CVET74.js";
 import {
   Tag
-} from "./chunk-S7XGIQY6.js";
+} from "./chunk-QHVJAPSD.js";
 import {
   Tbody
 } from "./chunk-PKQTTFWA.js";
 import {
-  Td
-} from "./chunk-HPM2XRWT.js";
+  NavMenuTrigger
+} from "./chunk-OWKN5IV7.js";
 import {
   Notification
-} from "./chunk-CMUFJU4S.js";
+} from "./chunk-A42MQEHJ.js";
 import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
@@ -69,7 +72,10 @@ import {
 import {
   Option,
   Select
-} from "./chunk-O6JYYVO7.js";
+} from "./chunk-3XZRRGFQ.js";
+import {
+  Label
+} from "./chunk-NMF2HYWO.js";
 import {
   Legend
 } from "./chunk-6TTN2JMY.js";
@@ -92,13 +98,17 @@ import {
   NavMenuList,
   getPosition
 } from "./chunk-5V5MBSM3.js";
-import {
-  NavMenuTrigger
-} from "./chunk-OWKN5IV7.js";
 import {
   NavMenu,
   useNavMenuContext
 } from "./chunk-O75QAT4Z.js";
+import {
+  FeatureFlag
+} from "./chunk-BIDE4IJG.js";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "./chunk-CJFW36DZ.js";
 import {
   Fieldset
 } from "./chunk-3ZDFQO25.js";
@@ -108,7 +118,7 @@ import {
 import {
   FileStatus,
   processStatus
-} from "./chunk-UXHAFEBA.js";
+} from "./chunk-XREDYSAP.js";
 import {
   ProgressBar
 } from "./chunk-KCANMM64.js";
@@ -117,16 +127,13 @@ import {
 } from "./chunk-JWIJHSI6.js";
 import {
   FileUploader
-} from "./chunk-JCGWTIR4.js";
+} from "./chunk-4HDONKKB.js";
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
 import {
   Input
-} from "./chunk-WZOYPFUU.js";
-import {
-  Label
-} from "./chunk-NMF2HYWO.js";
+} from "./chunk-WSGQZZVU.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -137,33 +144,26 @@ import {
 } from "./chunk-REO5GUNC.js";
 import {
   Avatar
-} from "./chunk-477G5ZEL.js";
+} from "./chunk-XWQEINEL.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
 import {
   Checkbox
-} from "./chunk-AUAPBPGW.js";
+} from "./chunk-DH57GIIW.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-UZDVOIW5.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
 import {
   CircularProgress
 } from "./chunk-YLPSE5Z2.js";
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";
-import {
-  FeatureFlag
-} from "./chunk-BIDE4IJG.js";
-import {
-  FeatureFlags,
-  useFeatureFlags
-} from "./chunk-CJFW36DZ.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -182,9 +182,10 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-NBG2OSYI.js";
-import "./chunk-BDCFYW34.js";
+} from "./chunk-5NELG2TB.js";
+import "./chunk-V7YG7JUJ.js";
 import "./chunk-CP7OUC2Q.js";
+import "./chunk-HVKM54BA.js";
 import {
   useModal
 } from "./chunk-7T3JIGM7.js";

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.10.4-next-10ee67c",
+  "version": "0.10.4-next-5e1525e",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.10.4-next-10ee67c"
+    "@cerberus-design/styled-system": "0.10.4-next-5e1525e"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AnimatingUploadIcon.tsx

@@ -0,0 +1,83 @@
+import { type CarbonIconProps } from '@cerberus/icons'
+
+/**
+ * This module contains an animating icon to use for the FileStatus component.
+ * @module
+ */
+
+export type AnimatingUploadIconProps = CarbonIconProps
+
+export function AnimatingUploadIcon(props: AnimatingUploadIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size ?? '1em'}
+      height={props.size ?? '1em'}
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <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"
+        >
+          <animate
+            attributeName="stroke-dashoffset"
+            dur="0.45s"
+            repeatCount="indefinite"
+            values="6;0"
+          ></animate>
+        </path>
+
+        <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"
+        >
+          <animate
+            fill="freeze"
+            attributeName="stroke-dashoffset"
+            begin="0.075s"
+            dur="0.3s"
+            values="32;0"
+          ></animate>
+        </path>
+
+        <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"
+        >
+          <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 "
+          >
+            <animate
+              fill="freeze"
+              attributeName="opacity"
+              values="1;0;1"
+              dur="2s"
+              repeatCount="indefinite"
+            ></animate>
+          </polygon>
+        </svg>
+      </g>
+    </svg>
+  )
+}

package/src/components/FileStatus.tsx

@@ -189,6 +189,7 @@ interface FileStatusElProps {
 
 function MatchFileStatusIcon(props: FileStatusElProps) {
   const {
+    waitingFileUploader: TodoIcon,
     fileUploader: FileUploaderIcon,
     invalidAlt: InvalidIcon,
     successNotification: DoneIcon,
@@ -196,6 +197,7 @@ function MatchFileStatusIcon(props: FileStatusElProps) {
 
   switch (props.status) {
     case processStatus.TODO:
+      return <TodoIcon size={props.size} />
     case processStatus.PROCESSING:
       return <FileUploaderIcon size={props.size} />
     case processStatus.DONE:

package/src/components/FileUploader.tsx

@@ -26,7 +26,7 @@ export interface FileUploaderProps
  */
 export function FileUploader(props: FileUploaderProps) {
   const styles = fileUploader()
-  const Icon = $cerberusIcons.fileUploader
+  const { waitingFileUploader: Icon } = $cerberusIcons
 
   return (
     <div

package/src/config/cerbIcons.ts

@@ -16,6 +16,7 @@ import {
 } from '@cerberus/icons'
 import type { ElementType } from 'react'
 import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'
+import { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'
 
 export type IconType = CarbonIconType | ElementType
 
@@ -26,6 +27,7 @@ export interface DefinedIcons {
   confirmModal?: IconType
   delete?: IconType
   promptModal?: IconType
+  waitingFileUploader?: IconType
   fileUploader?: IconType
   indeterminate?: IconType
   infoNotification?: IconType
@@ -46,7 +48,8 @@ export const defaultIcons: DefinedIcons = {
   confirmModal: Information,
   delete: TrashCan,
   promptModal: Information,
-  fileUploader: CloudUpload,
+  waitingFileUploader: CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
   infoNotification: InformationFilled,
   successNotification: CheckmarkFilled,

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["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"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA0BA,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FileUploader.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Avatar } from './Avatar'\n\nexport interface FileUploaderProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * The optional heading to display in the FileUploader component.\n   */\n  heading?: string\n  /**\n   * The name of the file input element.\n   */\n  name: string\n}\n\n/**\n * A component that allows the user to upload files.\n * @see https://cerberus.digitalu.design/react/file-uploader\n */\nexport function FileUploader(props: FileUploaderProps) {\n  const styles = fileUploader()\n  const Icon = $cerberusIcons.fileUploader\n\n  return (\n    <div\n      className={cx(\n        vstack({\n          justify: 'center',\n        }),\n        styles.container,\n      )}\n    >\n      <div className={styles.icon}>\n        <Avatar\n          gradient=\"charon-light\"\n          ariaLabel=\"\"\n          icon={<Icon />}\n          size=\"md\"\n          src=\"\"\n        />\n      </div>\n\n      <label\n        className={cx(\n          vstack({\n            justify: 'center',\n          }),\n          styles.label,\n        )}\n        htmlFor={props.name}\n      >\n        <Show when={Boolean(props.heading)}>\n          <p className={styles.heading}>{props.heading}</p>\n        </Show>\n        Import {props.accept?.replace(',', ', ')} files\n        <p className={styles.description}>Click to select files</p>\n        <input\n          {...props}\n          className={cx(props.className, styles.input)}\n          type=\"file\"\n        />\n      </label>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AAGvB,SAAS,oBAAoB;AAqCb,cAMV,YANU;AAjBT,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,aAAa;AAC5B,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,OAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,WAAU;AAAA,YACV,MAAM,oBAAC,QAAK;AAAA,YACZ,MAAK;AAAA,YACL,KAAI;AAAA;AAAA,QACN,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,cACD,OAAO;AAAA,YACT;AAAA,YACA,SAAS,MAAM;AAAA,YAEf;AAAA,kCAAC,QAAK,MAAM,QAAQ,MAAM,OAAO,GAC/B,8BAAC,OAAE,WAAW,OAAO,SAAU,gBAAM,SAAQ,GAC/C;AAAA,cAAO;AAAA,cACC,MAAM,QAAQ,QAAQ,KAAK,IAAI;AAAA,cAAE;AAAA,cACzC,oBAAC,OAAE,WAAW,OAAO,aAAa,mCAAqB;AAAA,cACvD;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,WAAW,GAAG,MAAM,WAAW,OAAO,KAAK;AAAA,kBAC3C,MAAK;AAAA;AAAA,cACP;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FileStatus.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"],"mappings":"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","names":["processStatus"]}