@cerberus-design/react 0.8.0-next-79fb5c6 → 0.8.0-next-9aba71d

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

@@ -2,18 +2,18 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-R4V7FTYK.js";
+} from "../chunk-GZY6CH7D.js";
+import "../chunk-VCR5C6Q3.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
 import "../chunk-QU7UV5DB.js";
 import "../chunk-JB7IQ2BM.js";
-import "../chunk-JJP2TFTU.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-HQIRGWY3.js";
-import "../chunk-K3X3OMAA.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
 import "../chunk-CP7OUC2Q.js";
 import "../chunk-C5HLLGME.js";
 export {

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

@@ -2,16 +2,16 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-ETIKSLRO.js";
-import "../chunk-HVICMTKV.js";
+} from "../chunk-VPWBSZAR.js";
+import "../chunk-EJIMJWPB.js";
 import "../chunk-HW76XVA3.js";
 import "../chunk-3C2DJSEE.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-HQIRGWY3.js";
-import "../chunk-K3X3OMAA.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
 import "../chunk-CP7OUC2Q.js";
 export {
   NotificationCenter,

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

@@ -2,21 +2,21 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-66OTWSEH.js";
+} from "../chunk-S6CMAXQF.js";
+import "../chunk-VCR5C6Q3.js";
 import "../chunk-4CAT3FHV.js";
-import "../chunk-C7447UIN.js";
-import "../chunk-RQPDRHRP.js";
+import "../chunk-53QBTZZF.js";
+import "../chunk-2FK7NR7Y.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
 import "../chunk-QU7UV5DB.js";
 import "../chunk-JB7IQ2BM.js";
-import "../chunk-JJP2TFTU.js";
 import "../chunk-6F34A7NZ.js";
-import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
+import "../chunk-ZAU4JVLL.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-HQIRGWY3.js";
-import "../chunk-K3X3OMAA.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
 import "../chunk-CP7OUC2Q.js";
 import "../chunk-C5HLLGME.js";
 export {

package/build/modern/index.js

@@ -1,11 +1,14 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-ETIKSLRO.js";
+} from "./chunk-VPWBSZAR.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-66OTWSEH.js";
+} from "./chunk-S6CMAXQF.js";
+import {
+  Tag
+} from "./chunk-Z6IWNVPN.js";
 import {
   Tbody
 } from "./chunk-PJ3744I6.js";
@@ -23,18 +26,18 @@ import {
 } from "./chunk-N3FUF4TB.js";
 import {
   Toggle
-} from "./chunk-MVV3VTY2.js";
+} from "./chunk-ID3XWGLY.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-R4V7FTYK.js";
+} from "./chunk-GZY6CH7D.js";
 import {
   Radio
 } from "./chunk-PH64POOB.js";
 import {
   Option,
   Select
-} from "./chunk-RHMGQNFD.js";
+} from "./chunk-RHG26FYL.js";
 import {
   Tab
 } from "./chunk-SONHHNYQ.js";
@@ -49,8 +52,8 @@ import {
   Tr
 } from "./chunk-A5WYZVUR.js";
 import {
-  Tag
-} from "./chunk-Z6IWNVPN.js";
+  ModalIcon
+} from "./chunk-VCR5C6Q3.js";
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
@@ -67,7 +70,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Notification
-} from "./chunk-HVICMTKV.js";
+} from "./chunk-EJIMJWPB.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -78,17 +81,14 @@ import {
   Portal
 } from "./chunk-4CAT3FHV.js";
 import {
-  ProgressBar
-} from "./chunk-TYTEREKZ.js";
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
+  FileUploader
+} from "./chunk-TF3HRELU.js";
 import {
   Input
-} from "./chunk-C7447UIN.js";
+} from "./chunk-53QBTZZF.js";
 import {
   Label
-} from "./chunk-RQPDRHRP.js";
+} from "./chunk-2FK7NR7Y.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
@@ -101,9 +101,6 @@ import {
 import {
   ModalHeading
 } from "./chunk-JB7IQ2BM.js";
-import {
-  ModalIcon
-} from "./chunk-JJP2TFTU.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -119,7 +116,7 @@ import {
 } from "./chunk-6F34A7NZ.js";
 import {
   Checkbox
-} from "./chunk-R6DGIPXN.js";
+} from "./chunk-4FD33RTW.js";
 import {
   Droppable
 } from "./chunk-7VJOPJVX.js";
@@ -130,6 +127,19 @@ import {
   FeatureFlags,
   useFeatureFlags
 } from "./chunk-4M3EUP57.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  FileStatus,
+  processStatus
+} from "./chunk-7NX4RGDB.js";
+import {
+  ProgressBar
+} from "./chunk-TYTEREKZ.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -137,12 +147,6 @@ import {
   Field,
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
-import {
-  FileUploader
-} from "./chunk-EKUUJB37.js";
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -161,8 +165,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-HQIRGWY3.js";
-import "./chunk-K3X3OMAA.js";
+} from "./chunk-5WVXIAG2.js";
+import "./chunk-GUECLKHY.js";
 import "./chunk-CP7OUC2Q.js";
 import {
   useModal
@@ -180,6 +184,7 @@ export {
   FeatureFlags,
   Field,
   FieldMessage,
+  FileStatus,
   FileUploader,
   IconButton,
   Input,
@@ -224,6 +229,7 @@ export {
   createNavTriggerProps,
   defineIcons,
   getPosition,
+  processStatus,
   trapFocus,
   useConfirmModal,
   useFeatureFlags,

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/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,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/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.8.0-next-79fb5c6",
+  "version": "0.8.0-next-9aba71d",
   "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.8.0-next-79fb5c6"
+    "@cerberus-design/styled-system": "0.8.0-next-9aba71d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FileStatus.tsx

@@ -0,0 +1,246 @@
+'use client'
+
+import {
+  useCallback,
+  useMemo,
+  type HTMLAttributes,
+  type MouseEvent,
+} from 'react'
+import { ProgressBar } from './ProgressBar'
+import { IconButton } from './IconButton'
+import {
+  fileStatus,
+  type FileStatusVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { css, cx } from '@cerberus/styled-system/css'
+import { circle, hstack, vstack } from '@cerberus/styled-system/patterns'
+import { $cerberusIcons } from '../config/defineIcons'
+import { FieldMessage } from './FieldMessage'
+import { Field } from '../context/field'
+
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+
+export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]
+export type FileStatusActions = 'cancel' | 'retry' | 'delete'
+export interface FileBaseStatusProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  file: string
+  now: number
+  status: processStatus
+  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
+}
+export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps
+
+/**
+ * A helper object to represent the status of a file.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+export const enum processStatus {
+  TODO = 'todo',
+  PROCESSING = 'processing',
+  DONE = 'done',
+  ERROR = 'error',
+}
+
+/**
+ * This component displays the status of a file.
+ * @param props - {
+ *  file: string,
+ *  now: number,
+ *  status: keyof typeof fileStatus,
+ *  action: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
+ * }.
+ * @example
+ * ```tsx
+ * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+ * ```
+ */
+export function FileStatus(props: FileStatusProps) {
+  const { file, now, status, onClick, ...nativeProps } = props
+  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])
+  const palette = useMemo(() => getPalette(status), [status])
+  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])
+  const styles = useMemo(() => {
+    switch (status) {
+      case processStatus.TODO:
+        return fileStatus({ status: 'todo' })
+      case processStatus.PROCESSING:
+        return fileStatus({ status: 'processing' })
+      case processStatus.DONE:
+        return fileStatus({ status: 'done' })
+      case processStatus.ERROR:
+        return fileStatus({ status: 'error' })
+      default:
+        return fileStatus()
+    }
+  }, [status])
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const actionStatus = getStatusActionLabel(
+        status,
+      ).toLocaleLowerCase() as FileStatusActions
+      onClick(actionStatus, e)
+    },
+    [onClick],
+  )
+
+  return (
+    <div
+      {...nativeProps}
+      className={cx(nativeProps.className, styles.root, hstack())}
+    >
+      <div
+        className={cx(
+          styles.icon,
+          circle({
+            size: '2rem',
+          }),
+        )}
+      >
+        <MatchFileStatusIcon status={status} />
+      </div>
+
+      <div
+        className={vstack({
+          alignItems: 'flex-start',
+          gap: '0.12rem',
+          w: 'full',
+        })}
+      >
+        <small
+          className={css({
+            color: 'page.text.initial',
+            textStyle: 'label-sm',
+          })}
+        >
+          {file}
+        </small>
+        <ProgressBar now={now} size="sm" />
+        <Field invalid={modalIconPalette === 'danger'}>
+          <FieldMessage
+            className={css({
+              color: 'page.text.100',
+            })}
+            id={`help:${file}`}
+          >
+            <MatchFileStatusText status={status} now={now} />
+          </FieldMessage>
+        </Field>
+      </div>
+
+      <IconButton
+        ariaLabel={actionLabel}
+        onClick={handleClick}
+        palette={palette}
+        size="sm"
+      >
+        <MatchStatusAction status={status} />
+      </IconButton>
+    </div>
+  )
+}
+
+interface FileStatusElProps {
+  status: FileStatusProps['status']
+  now?: number
+}
+
+function MatchFileStatusIcon(props: FileStatusElProps) {
+  const {
+    fileUploader: FileUploaderIcon,
+    invalidAlt: InvalidIcon,
+    successNotification: DoneIcon,
+  } = $cerberusIcons
+
+  switch (props.status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return <FileUploaderIcon />
+    case processStatus.DONE:
+      return <DoneIcon />
+    case processStatus.ERROR:
+      return <InvalidIcon />
+    default:
+      throw new Error('Unknown status')
+  }
+}
+
+function MatchFileStatusText(props: FileStatusElProps) {
+  switch (props.status) {
+    case processStatus.TODO:
+      return 'Waiting to upload'
+    case processStatus.PROCESSING:
+      return `${props.now}% Complete`
+    case processStatus.DONE:
+      return 'File uploaded successfully'
+    case processStatus.ERROR:
+      return 'There was an error uploading the file'
+    default:
+      throw new Error('Invalid status')
+  }
+}
+
+function MatchStatusAction(props: FileStatusElProps) {
+  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons
+  switch (props.status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return <CloseIcon />
+    case processStatus.ERROR:
+      return <RedoIcon />
+    case processStatus.DONE:
+      return <TrashIcon />
+    default:
+      throw new Error('Invalid status')
+  }
+}
+
+function getStatusActionLabel(status: FileStatusKey) {
+  switch (status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return 'Cancel'
+    case processStatus.ERROR:
+      return 'Retry'
+    case processStatus.DONE:
+      return 'Delete'
+    default:
+      return ''
+  }
+}
+
+function getPalette(status: FileStatusKey) {
+  switch (status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return 'danger'
+    case processStatus.ERROR:
+      return 'action'
+    case processStatus.DONE:
+      return 'danger'
+    default:
+      return 'action'
+  }
+}
+
+function getModalIconPalette(status: FileStatusKey) {
+  switch (status) {
+    case processStatus.TODO:
+    case processStatus.PROCESSING:
+      return 'action'
+    case processStatus.ERROR:
+      return 'danger'
+    case processStatus.DONE:
+      return 'success'
+    default:
+      return 'action'
+  }
+}

package/src/components/FileUploader.tsx

@@ -43,7 +43,7 @@ export function FileUploader(props: FileUploaderProps) {
           <p className={styles.heading}>{props.heading}</p>
         </Show>
         Import {props.accept?.replace(',', ', ')} files
-        <p className={styles.description}>Or click to upload</p>
+        <p className={styles.description}>Click to select files</p>
         <input
           {...props}
           className={cx(props.className, styles.input)}

package/src/components/ModalIcon.tsx

@@ -6,8 +6,8 @@ import {
 } from '@cerberus/styled-system/recipes'
 import type { HTMLAttributes, PropsWithChildren } from 'react'
 
-export type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>
-export type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps
+export type ModalIconProps = HTMLAttributes<HTMLDivElement> &
+  ModalIconVariantProps
 
 export function ModalIcon(props: PropsWithChildren<ModalIconProps>) {
   const { palette, ...nativeProps } = props

package/src/config/cerbIcons.ts

@@ -2,10 +2,14 @@ import {
   Checkmark,
   CheckmarkFilled,
   ChevronDown,
+  CloseFilled,
   CloudUpload,
   ErrorFilled,
   Information,
   InformationFilled,
+  Restart,
+  TrashCan,
+  Warning,
   WarningFilled,
   type CarbonIconType,
 } from '@cerberus/icons'
@@ -16,7 +20,9 @@ export type IconType = CarbonIconType | ElementType
 
 export interface DefinedIcons {
   checkbox?: IconType
+  close?: IconType
   confirmModal?: IconType
+  delete?: IconType
   promptModal?: IconType
   fileUploader?: IconType
   indeterminate?: IconType
@@ -25,13 +31,17 @@ export interface DefinedIcons {
   warningNotification?: IconType
   dangerNotification?: IconType
   invalid: IconType
+  invalidAlt?: IconType
+  redo?: IconType
   selectArrow?: IconType
   toggleChecked?: IconType
 }
 
 export const defaultIcons: DefinedIcons = {
   checkbox: CheckmarkIcon,
+  close: CloseFilled,
   confirmModal: Information,
+  delete: TrashCan,
   promptModal: Information,
   fileUploader: CloudUpload,
   indeterminate: IndeterminateIcon,
@@ -40,6 +50,8 @@ export const defaultIcons: DefinedIcons = {
   warningNotification: WarningFilled,
   dangerNotification: ErrorFilled,
   invalid: WarningFilled,
+  invalidAlt: Warning,
+  redo: Restart,
   selectArrow: ChevronDown,
   toggleChecked: Checkmark,
 }

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './components/Checkbox'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
+export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/IconButton'
 export * from './components/Input'

package/build/legacy/chunk-JJP2TFTU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/ModalIcon.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  modalIcon,\n  type ModalIconVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nexport type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>\nexport type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps\n\nexport function ModalIcon(props: PropsWithChildren<ModalIconProps>) {\n  const { palette, ...nativeProps } = props\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        modalIcon({\n          palette,\n        }),\n        circle(),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AASH;AAHG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/build/legacy/chunk-K3X3OMAA.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\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  checkbox?: IconType\n  confirmModal?: 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  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  checkbox: CheckmarkIcon,\n  confirmModal: Information,\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  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,OAEK;AAqBA,IAAM,eAA6B;AAAA,EACxC,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/ModalIcon.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  modalIcon,\n  type ModalIconVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nexport type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>\nexport type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps\n\nexport function ModalIcon(props: PropsWithChildren<ModalIconProps>) {\n  const { palette, ...nativeProps } = props\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        modalIcon({\n          palette,\n        }),\n        circle(),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AASH;AAHG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\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  checkbox?: IconType\n  confirmModal?: 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  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  checkbox: CheckmarkIcon,\n  confirmModal: Information,\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  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,OAEK;AAqBA,IAAM,eAA6B;AAAA,EACxC,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}