@cerberus-design/react 0.8.0 → 0.8.1

package/build/modern/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/modern/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-CP7OUC2Q.js

@@ -0,0 +1,42 @@
+// src/config/icons/checkbox.icons.tsx
+import { jsx } from "react/jsx-runtime";
+function CheckmarkIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      role: "img",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
+        }
+      )
+    }
+  );
+}
+function IndeterminateIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+    }
+  );
+}
+
+export {
+  CheckmarkIcon,
+  IndeterminateIcon
+};
+//# sourceMappingURL=chunk-CP7OUC2Q.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/icons/checkbox.icons.tsx"],"sourcesContent":["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"],"mappings":";AAsBM;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,8BAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;","names":[]}

package/build/modern/{chunk-4N2L357B.js → chunk-EJIMJWPB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-BEYPMC73.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-4N2L357B.js.map
+//# sourceMappingURL=chunk-EJIMJWPB.js.map

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

@@ -1,26 +1,43 @@
+import {
+  CheckmarkIcon,
+  IndeterminateIcon
+} from "./chunk-CP7OUC2Q.js";
+
 // src/config/cerbIcons.ts
 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,
   infoNotification: InformationFilled,
   successNotification: CheckmarkFilled,
   warningNotification: WarningFilled,
   dangerNotification: ErrorFilled,
   invalid: WarningFilled,
+  invalidAlt: Warning,
+  redo: Restart,
+  selectArrow: ChevronDown,
   toggleChecked: Checkmark
 };
 
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-GVNPFXKL.js.map
+//# sourceMappingURL=chunk-GUECLKHY.js.map

package/build/modern/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-Y5IY7O23.js → chunk-GZY6CH7D.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-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-BEYPMC73.js";
+} from "./chunk-5WVXIAG2.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -151,4 +151,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-Y5IY7O23.js.map
+//# sourceMappingURL=chunk-GZY6CH7D.js.map

package/build/{legacy/chunk-IL5ELPTT.js → modern/chunk-ID3XWGLY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-BEYPMC73.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-IL5ELPTT.js.map
+//# sourceMappingURL=chunk-ID3XWGLY.js.map

package/build/modern/chunk-RHG26FYL.js

@@ -0,0 +1,68 @@
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+import {
+  $cerberusIcons
+} from "./chunk-5WVXIAG2.js";
+
+// src/components/Select.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { hstack } from "@cerberus/styled-system/patterns";
+import {
+  select
+} from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Select(props) {
+  const { describedBy, size, ...nativeProps } = props;
+  const { invalid, ...fieldStates } = useFieldContext();
+  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons;
+  const styles = select({
+    size
+  });
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ...nativeProps,
+        ...fieldStates,
+        ...describedBy && { "aria-describedby": describedBy },
+        ...invalid && { "aria-invalid": true },
+        className: styles.input
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cx(
+          styles.iconStack,
+          hstack({
+            gap: "2"
+          })
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...invalid && { "data-invalid": true },
+              className: styles.stateIcon,
+              children: /* @__PURE__ */ jsx(InvalidIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: styles.arrowIcon, children: /* @__PURE__ */ jsx(SelectArrow, {}) })
+        ]
+      }
+    )
+  ] });
+}
+function Option(props) {
+  return /* @__PURE__ */ jsx("option", { ...props });
+}
+
+export {
+  Select,
+  Option
+};
+//# sourceMappingURL=chunk-RHG26FYL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the select components.\n * @module\n */\n\nexport type SelectProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  'size'\n> &\n  SelectVariantProps & {\n    id: string\n    describedBy?: string\n  }\n\n/**\n * Select component\n * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }\n * @example\n * ```tsx\n * <Select describedby=\"help:fruit\" id=\"fruit\">\n *  <Option value=\"\">Choose option</Option>\n *  <Option value=\"one\">Option 1</Option>\n *  <Option value=\"two\">Option 2</Option>\n *  <Option value=\"three\">Option 3</Option>\n * </Select>\n * ```\n */\nexport function Select(props: SelectProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const { invalid, ...fieldStates } = useFieldContext()\n  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons\n  const styles = select({\n    size,\n  })\n\n  return (\n    <div className={styles.root}>\n      <select\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={styles.input}\n      />\n      <span\n        className={cx(\n          styles.iconStack,\n          hstack({\n            gap: '2',\n          }),\n        )}\n      >\n        <Show when={invalid}>\n          <span\n            {...(invalid && { 'data-invalid': true })}\n            className={styles.stateIcon}\n          >\n            <InvalidIcon />\n          </span>\n        </Show>\n        <span className={styles.arrowIcon}>\n          <SelectArrow />\n        </span>\n      </span>\n    </div>\n  )\n}\n\n// We only export this component for consistency with the other components\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>\n\n/**\n * Option component\n * props: OptionHTMLAttributes<HTMLOptionElement>\n * @example\n * ```tsx\n * <Option value=\"one\">Option 1</Option>\n * ```\n */\nexport function Option(props: OptionProps) {\n  return <option {...props} />\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AA2CD,cAOA,YAPA;AAVC,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,EAAE,SAAS,aAAa,aAAa,YAAY,IAAI;AAC3D,QAAM,SAAS,OAAO;AAAA,IACpB;AAAA,EACF,CAAC;AAED,SACE,qBAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,OAAO;AAAA;AAAA,IACpB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT,OAAO;AAAA,UACP,OAAO;AAAA,YACL,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,8BAAC,QAAK,MAAM,SACV;AAAA,YAAC;AAAA;AAAA,cACE,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,cACvC,WAAW,OAAO;AAAA,cAElB,8BAAC,eAAY;AAAA;AAAA,UACf,GACF;AAAA,UACA,oBAAC,UAAK,WAAW,OAAO,WACtB,8BAAC,eAAY,GACf;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAcO,SAAS,OAAO,OAAoB;AACzC,SAAO,oBAAC,YAAQ,GAAG,OAAO;AAC5B;","names":[]}

package/build/modern/{chunk-LTDNZRUY.js → chunk-S6CMAXQF.js}

@@ -1,12 +1,15 @@
+import {
+  ModalIcon
+} from "./chunk-VCR5C6Q3.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
 import {
   Input
-} from "./chunk-XB4ZRAH4.js";
+} from "./chunk-53QBTZZF.js";
 import {
   Label
-} from "./chunk-JJGZRBIR.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-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-BEYPMC73.js";
+} from "./chunk-5WVXIAG2.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -204,4 +204,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-LTDNZRUY.js.map
+//# sourceMappingURL=chunk-S6CMAXQF.js.map

package/build/modern/{chunk-IOG6XIR5.js → chunk-TF3HRELU.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-BEYPMC73.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -39,7 +39,7 @@ function FileUploader(props) {
               "Import ",
               props.accept?.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",
                 {
@@ -59,4 +59,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-IOG6XIR5.js.map
+//# sourceMappingURL=chunk-TF3HRELU.js.map

package/build/modern/{chunk-IOG6XIR5.js.map → chunk-TF3HRELU.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;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,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,cACC,MAAM,QAAQ,QAAQ,KAAK,IAAI;AAAA,cAAE;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;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,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,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-TYTEREKZ.js

@@ -0,0 +1,39 @@
+// src/components/ProgressBar.tsx
+import { cx } from "@cerberus/styled-system/css";
+import {
+  progressBar
+} from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function ProgressBar(props) {
+  const { indeterminate, size, usage, now, ...nativeProps } = props;
+  const styles = progressBar({ size, usage });
+  const nowClamped = Math.min(100, Math.max(0, now || 0));
+  const width = {
+    width: indeterminate ? "50%" : `${nowClamped}%`
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": indeterminate ? 0 : nowClamped,
+      className: cx(nativeProps.className, styles.root),
+      role: "meter",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...indeterminate && { "data-indeterminate": true },
+          "data-complete": nowClamped === 100,
+          className: styles.bar,
+          style: width
+        }
+      )
+    }
+  );
+}
+
+export {
+  ProgressBar
+};
+//# sourceMappingURL=chunk-TYTEREKZ.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"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 ModalIconProps = HTMLAttributes<HTMLDivElement> &\n  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-QO2UXGW4.js → chunk-VPWBSZAR.js}

@@ -1,6 +1,6 @@
 import {
   Notification
-} from "./chunk-4N2L357B.js";
+} from "./chunk-EJIMJWPB.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -119,4 +119,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-QO2UXGW4.js.map
+//# sourceMappingURL=chunk-VPWBSZAR.js.map

package/build/modern/components/Checkbox.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  Checkbox
+} from "../chunk-4FD33RTW.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map