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

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

@@ -54,6 +54,7 @@ import { DroppableContainers } from '@dnd-kit/core';
 import { DroppableMeasuring } from '@dnd-kit/core';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
+import { FileStatusVariantProps } from '@cerberus/styled-system/recipes';
 import { ForwardRefExoticComponent } from 'react';
 import { getClientRect } from '@dnd-kit/core';
 import { getFirstCollision } from '@dnd-kit/core';
@@ -319,7 +320,9 @@ export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
     checkbox?: IconType;
+    close?: IconType;
     confirmModal?: IconType;
+    delete?: IconType;
     promptModal?: IconType;
     fileUploader?: IconType;
     indeterminate?: IconType;
@@ -328,6 +331,8 @@ export declare interface DefinedIcons {
     warningNotification?: IconType;
     dangerNotification?: IconType;
     invalid: IconType;
+    invalidAlt?: IconType;
+    redo?: IconType;
     selectArrow?: IconType;
     toggleChecked?: IconType;
 }
@@ -497,6 +502,48 @@ declare type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>;
 export { FieldMessageRecipe }
 export { FieldMessageRecipe as FieldMessageRecipe_alias_1 }
 
+declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    file: string;
+    now: number;
+    status: processStatus;
+    onClick: (status: FileStatusActions, e: MouseEvent_2<HTMLButtonElement>) => void;
+}
+export { FileBaseStatusProps }
+export { FileBaseStatusProps as FileBaseStatusProps_alias_1 }
+
+/**
+ * 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)} />
+ * ```
+ */
+declare function FileStatus(props: FileStatusProps): JSX_2.Element;
+export { FileStatus }
+export { FileStatus as FileStatus_alias_1 }
+
+declare type FileStatusActions = 'cancel' | 'retry' | 'delete';
+export { FileStatusActions }
+export { FileStatusActions as FileStatusActions_alias_1 }
+
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+declare type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
+export { FileStatusKey }
+export { FileStatusKey as FileStatusKey_alias_1 }
+
+declare type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
+export { FileStatusProps }
+export { FileStatusProps as FileStatusProps_alias_1 }
+
 declare function FileUploader(props: FileUploaderProps): JSX_2.Element;
 export { FileUploader }
 export { FileUploader as FileUploader_alias_1 }
@@ -728,11 +775,7 @@ declare function ModalIcon(props: PropsWithChildren<ModalIconProps>): JSX_2.Elem
 export { ModalIcon }
 export { ModalIcon as ModalIcon_alias_1 }
 
-declare type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>;
-export { ModalIconBaseProps }
-export { ModalIconBaseProps as ModalIconBaseProps_alias_1 }
-
-declare type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps;
+declare type ModalIconProps = HTMLAttributes<HTMLDivElement> & ModalIconVariantProps;
 export { ModalIconProps }
 export { ModalIconProps as ModalIconProps_alias_1 }
 
@@ -1009,6 +1052,23 @@ declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+/**
+ * A helper object to represent the status of a file.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+declare const enum processStatus {
+    TODO = "todo",
+    PROCESSING = "processing",
+    DONE = "done",
+    ERROR = "error"
+}
+export { processStatus }
+export { processStatus as processStatus_alias_1 }
+
 /**
  * The ProgressBar component is used to display the progress of a task.
  * @param props - HTML div element attributes

package/build/legacy/{chunk-VQMP3PBJ.js → chunk-23UPROCG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -40,7 +40,7 @@ function FileUploader(props) {
               "Import ",
               (_a = props.accept) == null ? void 0 : _a.replace(",", ", "),
               " files",
-              /* @__PURE__ */ jsx("p", { className: styles.description, children: "Or click to upload" }),
+              /* @__PURE__ */ jsx("p", { className: styles.description, children: "Click to select files" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -60,4 +60,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-VQMP3PBJ.js.map
+//# sourceMappingURL=chunk-23UPROCG.js.map

package/build/legacy/{chunk-VQMP3PBJ.js.map → chunk-23UPROCG.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/FileUploader.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { circle, vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader, modalIcon } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\nexport interface FileUploaderProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  heading?: string\n  name: string\n}\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      <span className={cx(styles.icon, modalIcon(), circle())}>\n        <Icon />\n      </span>\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}>Or click to upload</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,QAAQ,cAAc;AAG/B,SAAS,cAAc,iBAAiB;AAuBhC,cAGF,YAHE;AAdD,SAAS,aAAa,OAA0B;AAfvD;AAgBE,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,UAAK,WAAW,GAAG,OAAO,MAAM,UAAU,GAAG,OAAO,CAAC,GACpD,8BAAC,QAAK,GACR;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,eACC,WAAM,WAAN,mBAAc,QAAQ,KAAK;AAAA,cAAM;AAAA,cACzC,oBAAC,OAAE,WAAW,OAAO,aAAa,gCAAkB;AAAA,cACpD;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":[]}
+{"version":3,"sources":["../../src/components/FileUploader.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { circle, vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader, modalIcon } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\nexport interface FileUploaderProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  heading?: string\n  name: string\n}\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      <span className={cx(styles.icon, modalIcon(), circle())}>\n        <Icon />\n      </span>\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,QAAQ,cAAc;AAG/B,SAAS,cAAc,iBAAiB;AAuBhC,cAGF,YAHE;AAdD,SAAS,aAAa,OAA0B;AAfvD;AAgBE,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,UAAK,WAAW,GAAG,OAAO,MAAM,UAAU,GAAG,OAAO,CAAC,GACpD,8BAAC,QAAK,GACR;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,eACC,WAAM,WAAN,mBAAc,QAAQ,KAAK;AAAA,cAAM;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/legacy/{chunk-RQPDRHRP.js → chunk-2FK7NR7Y.js}

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

package/build/legacy/{chunk-6PN23MAZ.js → chunk-3RRNMPFC.js}

@@ -1,6 +1,6 @@
 import {
   Notification
-} from "./chunk-BI6UZBJB.js";
+} from "./chunk-JHAI4ZHG.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -119,4 +119,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-6PN23MAZ.js.map
+//# sourceMappingURL=chunk-3RRNMPFC.js.map

package/build/{modern/chunk-R6DGIPXN.js → legacy/chunk-4FD33RTW.js}

@@ -1,12 +1,12 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/Checkbox.tsx
 import {
@@ -53,4 +53,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-R6DGIPXN.js.map
+//# sourceMappingURL=chunk-4FD33RTW.js.map

package/build/legacy/{chunk-C7447UIN.js → chunk-53QBTZZF.js}

@@ -1,12 +1,12 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-C7447UIN.js.map
+//# sourceMappingURL=chunk-53QBTZZF.js.map

package/build/legacy/{chunk-HQIRGWY3.js → chunk-5WVXIAG2.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-K3X3OMAA.js";
+} from "./chunk-GUECLKHY.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-HQIRGWY3.js.map
+//# sourceMappingURL=chunk-5WVXIAG2.js.map

package/build/legacy/chunk-7NX4RGDB.js

@@ -0,0 +1,218 @@
+import {
+  ProgressBar
+} from "./chunk-TYTEREKZ.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
+import {
+  FieldMessage
+} from "./chunk-VGHVH2T3.js";
+import {
+  Field
+} from "./chunk-ZAU4JVLL.js";
+import {
+  $cerberusIcons
+} from "./chunk-5WVXIAG2.js";
+
+// src/components/FileStatus.tsx
+import {
+  useCallback,
+  useMemo
+} from "react";
+import {
+  fileStatus
+} from "@cerberus/styled-system/recipes";
+import { css, cx } from "@cerberus/styled-system/css";
+import { circle, hstack, vstack } from "@cerberus/styled-system/patterns";
+import { jsx, jsxs } from "react/jsx-runtime";
+var processStatus = /* @__PURE__ */ ((processStatus2) => {
+  processStatus2["TODO"] = "todo";
+  processStatus2["PROCESSING"] = "processing";
+  processStatus2["DONE"] = "done";
+  processStatus2["ERROR"] = "error";
+  return processStatus2;
+})(processStatus || {});
+function FileStatus(props) {
+  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 "todo" /* TODO */:
+        return fileStatus({ status: "todo" });
+      case "processing" /* PROCESSING */:
+        return fileStatus({ status: "processing" });
+      case "done" /* DONE */:
+        return fileStatus({ status: "done" });
+      case "error" /* ERROR */:
+        return fileStatus({ status: "error" });
+      default:
+        return fileStatus();
+    }
+  }, [status]);
+  const handleClick = useCallback(
+    (e) => {
+      const actionStatus = getStatusActionLabel(
+        status
+      ).toLocaleLowerCase();
+      onClick(actionStatus, e);
+    },
+    [onClick]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...nativeProps,
+      className: cx(nativeProps.className, styles.root, hstack()),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              styles.icon,
+              circle({
+                size: "2rem"
+              })
+            ),
+            children: /* @__PURE__ */ jsx(MatchFileStatusIcon, { status })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: vstack({
+              alignItems: "flex-start",
+              gap: "0.12rem",
+              w: "full"
+            }),
+            children: [
+              /* @__PURE__ */ jsx(
+                "small",
+                {
+                  className: css({
+                    color: "page.text.initial",
+                    textStyle: "label-sm"
+                  }),
+                  children: file
+                }
+              ),
+              /* @__PURE__ */ jsx(ProgressBar, { now, size: "sm" }),
+              /* @__PURE__ */ jsx(Field, { invalid: modalIconPalette === "danger", children: /* @__PURE__ */ jsx(
+                FieldMessage,
+                {
+                  className: css({
+                    color: "page.text.100"
+                  }),
+                  id: `help:${file}`,
+                  children: /* @__PURE__ */ jsx(MatchFileStatusText, { status, now })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ariaLabel: actionLabel,
+            onClick: handleClick,
+            palette,
+            size: "sm",
+            children: /* @__PURE__ */ jsx(MatchStatusAction, { status })
+          }
+        )
+      ]
+    }
+  );
+}
+function MatchFileStatusIcon(props) {
+  const {
+    fileUploader: FileUploaderIcon,
+    invalidAlt: InvalidIcon,
+    successNotification: DoneIcon
+  } = $cerberusIcons;
+  switch (props.status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return /* @__PURE__ */ jsx(FileUploaderIcon, {});
+    case "done" /* DONE */:
+      return /* @__PURE__ */ jsx(DoneIcon, {});
+    case "error" /* ERROR */:
+      return /* @__PURE__ */ jsx(InvalidIcon, {});
+    default:
+      throw new Error("Unknown status");
+  }
+}
+function MatchFileStatusText(props) {
+  switch (props.status) {
+    case "todo" /* TODO */:
+      return "Waiting to upload";
+    case "processing" /* PROCESSING */:
+      return `${props.now}% Complete`;
+    case "done" /* DONE */:
+      return "File uploaded successfully";
+    case "error" /* ERROR */:
+      return "There was an error uploading the file";
+    default:
+      throw new Error("Invalid status");
+  }
+}
+function MatchStatusAction(props) {
+  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons;
+  switch (props.status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return /* @__PURE__ */ jsx(CloseIcon, {});
+    case "error" /* ERROR */:
+      return /* @__PURE__ */ jsx(RedoIcon, {});
+    case "done" /* DONE */:
+      return /* @__PURE__ */ jsx(TrashIcon, {});
+    default:
+      throw new Error("Invalid status");
+  }
+}
+function getStatusActionLabel(status) {
+  switch (status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return "Cancel";
+    case "error" /* ERROR */:
+      return "Retry";
+    case "done" /* DONE */:
+      return "Delete";
+    default:
+      return "";
+  }
+}
+function getPalette(status) {
+  switch (status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return "danger";
+    case "error" /* ERROR */:
+      return "action";
+    case "done" /* DONE */:
+      return "danger";
+    default:
+      return "action";
+  }
+}
+function getModalIconPalette(status) {
+  switch (status) {
+    case "todo" /* TODO */:
+    case "processing" /* PROCESSING */:
+      return "action";
+    case "error" /* ERROR */:
+      return "danger";
+    case "done" /* DONE */:
+      return "success";
+    default:
+      return "action";
+  }
+}
+
+export {
+  processStatus,
+  FileStatus
+};
+//# sourceMappingURL=chunk-7NX4RGDB.js.map

package/build/legacy/chunk-7NX4RGDB.js.map

@@ -0,0 +1 @@
+{"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 { ProgressBar } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport {\n  fileStatus,\n  type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { circle, hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { FieldMessage } from './FieldMessage'\nimport { Field } from '../context/field'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  file: string\n  now: number\n  status: processStatus\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 * This component displays the status of a file.\n * @param props - {\n *  file: string,\n *  now: number,\n *  status: keyof typeof fileStatus,\n *  action: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n * }.\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      <div\n        className={cx(\n          styles.icon,\n          circle({\n            size: '2rem',\n          }),\n        )}\n      >\n        <MatchFileStatusIcon status={status} />\n      </div>\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 now={now} size=\"sm\" />\n        <Field invalid={modalIconPalette === 'danger'}>\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  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 />\n    case processStatus.DONE:\n      return <DoneIcon />\n    case processStatus.ERROR:\n      return <InvalidIcon />\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 'action'\n    case processStatus.ERROR:\n      return 'danger'\n    case processStatus.DONE:\n      return 'success'\n    default:\n      return 'action'\n  }\n}\n"],"mappings":"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","names":["processStatus"]}

package/build/{modern/chunk-K3X3OMAA.js → legacy/chunk-GUECLKHY.js}

@@ -8,15 +8,21 @@ import {
   Checkmark,
   CheckmarkFilled,
   ChevronDown,
+  CloseFilled,
   CloudUpload,
   ErrorFilled,
   Information,
   InformationFilled,
+  Restart,
+  TrashCan,
+  Warning,
   WarningFilled
 } from "@cerberus/icons";
 var defaultIcons = {
   checkbox: CheckmarkIcon,
+  close: CloseFilled,
   confirmModal: Information,
+  delete: TrashCan,
   promptModal: Information,
   fileUploader: CloudUpload,
   indeterminate: IndeterminateIcon,
@@ -25,6 +31,8 @@ var defaultIcons = {
   warningNotification: WarningFilled,
   dangerNotification: ErrorFilled,
   invalid: WarningFilled,
+  invalidAlt: Warning,
+  redo: Restart,
   selectArrow: ChevronDown,
   toggleChecked: Checkmark
 };
@@ -32,4 +40,4 @@ var defaultIcons = {
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-K3X3OMAA.js.map
+//# sourceMappingURL=chunk-GUECLKHY.js.map

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

@@ -0,0 +1 @@
+{"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  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  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  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,OAEK;AAyBA,IAAM,eAA6B;AAAA,EACxC,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-MVV3VTY2.js → legacy/chunk-ID3XWGLY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-MVV3VTY2.js.map
+//# sourceMappingURL=chunk-ID3XWGLY.js.map

package/build/legacy/{chunk-BI6UZBJB.js → chunk-JHAI4ZHG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/Notification.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -73,4 +73,4 @@ function Notification(props) {
 export {
   Notification
 };
-//# sourceMappingURL=chunk-BI6UZBJB.js.map
+//# sourceMappingURL=chunk-JHAI4ZHG.js.map

package/build/legacy/{chunk-7EDCTSAP.js → chunk-KUQZECNS.js}

@@ -1,3 +1,6 @@
+import {
+  ModalIcon
+} from "./chunk-VCR5C6Q3.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
@@ -13,9 +16,6 @@ import {
 import {
   ModalHeading
 } from "./chunk-JB7IQ2BM.js";
-import {
-  ModalIcon
-} from "./chunk-JJP2TFTU.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 import {
   useModal
 } from "./chunk-TZNYJ3G7.js";
@@ -152,4 +152,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-7EDCTSAP.js.map
+//# sourceMappingURL=chunk-KUQZECNS.js.map

package/build/legacy/{chunk-RHMGQNFD.js → chunk-RHG26FYL.js}

@@ -1,12 +1,12 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/Select.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -65,4 +65,4 @@ export {
   Select,
   Option
 };
-//# sourceMappingURL=chunk-RHMGQNFD.js.map
+//# sourceMappingURL=chunk-RHG26FYL.js.map

package/build/legacy/{chunk-XKID4ZMW.js → chunk-TJI2SJCZ.js}

@@ -1,12 +1,15 @@
+import {
+  ModalIcon
+} from "./chunk-VCR5C6Q3.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.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";
@@ -19,24 +22,21 @@ import {
 import {
   ModalHeading
 } from "./chunk-JB7IQ2BM.js";
-import {
-  ModalIcon
-} from "./chunk-JJP2TFTU.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
-import {
-  Field
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  Field
+} from "./chunk-ZAU4JVLL.js";
 import {
   trapFocus
 } from "./chunk-KESKDLX6.js";
 import {
   $cerberusIcons
-} from "./chunk-HQIRGWY3.js";
+} from "./chunk-5WVXIAG2.js";
 import {
   useModal
 } from "./chunk-TZNYJ3G7.js";
@@ -205,4 +205,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-XKID4ZMW.js.map
+//# sourceMappingURL=chunk-TJI2SJCZ.js.map

package/build/{modern/chunk-JJP2TFTU.js → legacy/chunk-VCR5C6Q3.js}

@@ -26,4 +26,4 @@ function ModalIcon(props) {
 export {
   ModalIcon
 };
-//# sourceMappingURL=chunk-JJP2TFTU.js.map
+//# sourceMappingURL=chunk-VCR5C6Q3.js.map