@cerberus-design/react 0.9.2 → 0.10.0

package/build/modern/aria-helpers/tabs.aria.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTabsKeyboardNavigation
-} from "../chunk-GKUDLVOV.js";
-import "../chunk-KF24CS4S.js";
+} from "../chunk-ITOIXNJS.js";
+import "../chunk-RIFQSCHT.js";
 export {
   useTabsKeyboardNavigation
 };

package/build/modern/{chunk-DGJPW76I.js → chunk-2RPWSVRX.js}

@@ -1,18 +1,18 @@
 import {
   ProgressBar
-} from "./chunk-TYTEREKZ.js";
+} from "./chunk-ZFK33MVD.js";
+import {
+  FieldMessage
+} from "./chunk-JWIJHSI6.js";
 import {
   IconButton
-} from "./chunk-SLHX5K6I.js";
+} from "./chunk-UBJBMOG7.js";
 import {
   Avatar
-} from "./chunk-UN3OAW56.js";
-import {
-  FieldMessage
-} from "./chunk-VGHVH2T3.js";
+} from "./chunk-477G5ZEL.js";
 import {
   Field
-} from "./chunk-ZAU4JVLL.js";
+} from "./chunk-UZDVOIW5.js";
 import {
   $cerberusIcons
 } from "./chunk-NBG2OSYI.js";
@@ -98,7 +98,7 @@ function FileStatus(props) {
                 }
               ),
               /* @__PURE__ */ jsx(ProgressBar, { now, size: "sm" }),
-              /* @__PURE__ */ jsx(Field, { invalid: modalIconPalette === "red", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsx(
                 FieldMessage,
                 {
                   className: css({
@@ -201,13 +201,13 @@ function getModalIconPalette(status) {
   switch (status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return "light-purple";
+      return "charon-light";
     case "error" /* ERROR */:
-      return "red";
+      return "hades-dark";
     case "done" /* DONE */:
-      return "green";
+      return "thanatos-light";
     default:
-      return "light-purple";
+      return "charon-light";
   }
 }
 
@@ -215,4 +215,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-DGJPW76I.js.map
+//# sourceMappingURL=chunk-2RPWSVRX.js.map

package/build/modern/chunk-2RPWSVRX.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 {\n  fileStatus,\n  type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Field } from '../context/field'\nimport { FieldMessage } from './FieldMessage'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * The name of the file.\n   */\n  file: string\n  /**\n   * The percentage of the file that has been processed.\n   */\n  now: ProgressBarProps['now']\n  /**\n   * The status of the file.\n   */\n  status: processStatus\n  /**\n   * The action to perform on the file when a user clicks the\n   * button located at the end of the status card.\n   * @param status - The status of the file.\n   * @param e - The event object.\n   * @example\n   * ```tsx\n   * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n   * ```\n   * @default () => {}\n   */\n  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n  TODO = 'todo',\n  PROCESSING = 'processing',\n  DONE = 'done',\n  ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n  const { file, now, status, onClick, ...nativeProps } = props\n  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n  const palette = useMemo(() => getPalette(status), [status])\n  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n  const styles = useMemo(() => {\n    switch (status) {\n      case processStatus.TODO:\n        return fileStatus({ status: 'todo' })\n      case processStatus.PROCESSING:\n        return fileStatus({ status: 'processing' })\n      case processStatus.DONE:\n        return fileStatus({ status: 'done' })\n      case processStatus.ERROR:\n        return fileStatus({ status: 'error' })\n      default:\n        return fileStatus()\n    }\n  }, [status])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const actionStatus = getStatusActionLabel(\n        status,\n      ).toLocaleLowerCase() as FileStatusActions\n      onClick(actionStatus, e)\n    },\n    [onClick],\n  )\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(nativeProps.className, styles.root, hstack())}\n    >\n      <Avatar\n        ariaLabel=\"\"\n        gradient={modalIconPalette}\n        icon={<MatchFileStatusIcon size={24} status={status} />}\n        src=\"\"\n      />\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0.12rem',\n          w: 'full',\n        })}\n      >\n        <small\n          className={css({\n            color: 'page.text.initial',\n            textStyle: 'label-sm',\n          })}\n        >\n          {file}\n        </small>\n        <ProgressBar now={now} size=\"sm\" />\n        <Field invalid={modalIconPalette === 'hades-dark'}>\n          <FieldMessage\n            className={css({\n              color: 'page.text.100',\n            })}\n            id={`help:${file}`}\n          >\n            <MatchFileStatusText status={status} now={now} />\n          </FieldMessage>\n        </Field>\n      </div>\n\n      <IconButton\n        ariaLabel={actionLabel}\n        onClick={handleClick}\n        palette={palette}\n        size=\"sm\"\n      >\n        <MatchStatusAction status={status} />\n      </IconButton>\n    </div>\n  )\n}\n\ninterface FileStatusElProps {\n  status: FileStatusProps['status']\n  size?: 16 | 20 | 24 | 32\n  now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n  const {\n    fileUploader: FileUploaderIcon,\n    invalidAlt: InvalidIcon,\n    successNotification: DoneIcon,\n  } = $cerberusIcons\n\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <FileUploaderIcon size={props.size} />\n    case processStatus.DONE:\n      return <DoneIcon size={props.size} />\n    case processStatus.ERROR:\n      return <InvalidIcon size={props.size} />\n    default:\n      throw new Error('Unknown status')\n  }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n  switch (props.status) {\n    case processStatus.TODO:\n      return 'Waiting to upload'\n    case processStatus.PROCESSING:\n      return `${props.now}% Complete`\n    case processStatus.DONE:\n      return 'File uploaded successfully'\n    case processStatus.ERROR:\n      return 'There was an error uploading the file'\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = $cerberusIcons\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <CloseIcon />\n    case processStatus.ERROR:\n      return <RedoIcon />\n    case processStatus.DONE:\n      return <TrashIcon />\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'Cancel'\n    case processStatus.ERROR:\n      return 'Retry'\n    case processStatus.DONE:\n      return 'Delete'\n    default:\n      return ''\n  }\n}\n\nfunction getPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'danger'\n    case processStatus.ERROR:\n      return 'action'\n    case processStatus.DONE:\n      return 'danger'\n    default:\n      return 'action'\n  }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'charon-light'\n    case processStatus.ERROR:\n      return 'hades-dark'\n    case processStatus.DONE:\n      return 'thanatos-light'\n    default:\n      return 'charon-light'\n  }\n}\n"],"mappings":"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","names":["processStatus"]}

package/build/modern/{chunk-JB7IQ2BM.js → chunk-2UXE5PDG.js}

@@ -9,4 +9,4 @@ function ModalHeading(props) {
 export {
   ModalHeading
 };
-//# sourceMappingURL=chunk-JB7IQ2BM.js.map
+//# sourceMappingURL=chunk-2UXE5PDG.js.map

package/build/modern/chunk-2UXE5PDG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalHeading component is a heading element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAqBb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

package/build/modern/{chunk-4CAT3FHV.js → chunk-2VX52EEJ.js}

@@ -8,4 +8,4 @@ function Portal(props) {
 export {
   Portal
 };
-//# sourceMappingURL=chunk-4CAT3FHV.js.map
+//# sourceMappingURL=chunk-2VX52EEJ.js.map

package/build/modern/chunk-2VX52EEJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  /**\n   * The root container to render the children into.\n   * @default document.body\n   */\n  container?: Element | DocumentFragment\n  /**\n   * An optional key to use for the Portal component.\n   */\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAwBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

package/build/modern/chunk-3O6UTN3J.js

@@ -0,0 +1,155 @@
+// src/components/CircularProgress.tsx
+import { cq } from "@cerberus/styled-system/patterns";
+import { css } from "@cerberus/styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CircularProgress(props) {
+  const strokeW = 14;
+  const radius = `calc(50% * (1 - ${strokeW}/100))`;
+  const status = props.label ?? "Done";
+  const now = props.now >= 100 ? 100 : props.now;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": now,
+      className: cq({
+        alignSelf: "stretch",
+        flex: 1,
+        m: "4px",
+        position: "relative"
+      }),
+      role: "progressbar",
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          "data-complete": now === 100,
+          className: css({
+            display: "block",
+            rounded: "full",
+            transition: "all 0.5s ease"
+          }),
+          fill: "none",
+          strokeLinecap: "round",
+          strokeWidth: strokeW,
+          viewBox: "0 0 100 100",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("title", { children: props.title }),
+            /* @__PURE__ */ jsx("desc", { children: `${now}% ${status}` }),
+            /* @__PURE__ */ jsxs("mask", { id: "progMask", children: [
+              /* @__PURE__ */ jsx("rect", { fill: "white", width: "100%", height: "100%" }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: css({
+                    stroke: "page.bg.100"
+                  }),
+                  cx: "50%",
+                  cy: "50%",
+                  r: radius,
+                  pathLength: "100"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: css({
+                    transition: "stroke-dashoffset 0.5s ease"
+                  }),
+                  cx: "50%",
+                  cy: "50%",
+                  r: radius,
+                  pathLength: "100",
+                  stroke: "black",
+                  strokeDasharray: "100",
+                  strokeDashoffset: 100 - now,
+                  transform: "rotate(-90 50 50)"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: css({
+                  fill: "page.surface.initial"
+                }),
+                cx: "50%",
+                cy: "50%",
+                r: `calc(50% * (1 - ${strokeW}/100))`,
+                pathLength: "100"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: css({
+                  stroke: "page.bg.100"
+                }),
+                cx: "50%",
+                cy: "50%",
+                r: radius,
+                pathLength: "100"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                "data-complete": now === 100,
+                className: css({
+                  stroke: "action.bg.initial",
+                  transition: "stroke-dashoffset 0.5s ease",
+                  "&:is([data-complete=true])": {
+                    stroke: "success.bg.initial"
+                  }
+                }),
+                cx: "50%",
+                cy: "50%",
+                r: radius,
+                pathLength: "100",
+                strokeDasharray: "100",
+                strokeDashoffset: 100 - now,
+                transform: "rotate(-90 50 50)"
+              }
+            ),
+            /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsxs(
+                "text",
+                {
+                  className: css({
+                    fill: "page.text.initial",
+                    fontFamily: "mono",
+                    textStyle: "1.25rem"
+                  }),
+                  x: "35%",
+                  y: "50%",
+                  children: [
+                    now,
+                    "%"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: css({
+                    fill: "page.text.100",
+                    fontSize: "0.5rem"
+                  }),
+                  x: "39%",
+                  y: "60%",
+                  children: status
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  CircularProgress
+};
+//# sourceMappingURL=chunk-3O6UTN3J.js.map

package/build/modern/chunk-3O6UTN3J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from '@cerberus/styled-system/patterns'\nimport { css } from '@cerberus/styled-system/css'\nimport type { SVGProps } from 'react'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  label?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.label ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n\n  return (\n    <div\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={cq({\n        alignSelf: 'stretch',\n        flex: 1,\n        m: '4px',\n        position: 'relative',\n      })}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={css({\n          display: 'block',\n          rounded: 'full',\n          transition: 'all 0.5s ease',\n        })}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n        <mask id=\"progMask\">\n          <rect fill=\"white\" width=\"100%\" height=\"100%\" />\n          <circle\n            className={css({\n              stroke: 'page.bg.100',\n            })}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            pathLength=\"100\"\n          />\n          <circle\n            className={css({\n              transition: 'stroke-dashoffset 0.5s ease',\n            })}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={radius}\n            pathLength=\"100\"\n            stroke=\"black\"\n            strokeDasharray=\"100\"\n            strokeDashoffset={100 - now}\n            transform=\"rotate(-90 50 50)\"\n          />\n        </mask>\n\n        {/* <circle\n          fill=\"var(--cerberus-colors-page-surface-initial)\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r={`calc(50% * (1.15 - ${strokeW}/100))`}\n          pathLength=\"100\"\n          mask=\"url(#progMask)\"\n        /> */}\n\n        <circle\n          className={css({\n            fill: 'page.surface.initial',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={`calc(50% * (1 - ${strokeW}/100))`}\n          pathLength=\"100\"\n        />\n        <circle\n          className={css({\n            stroke: 'page.bg.100',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n        <circle\n          data-complete={now === 100}\n          className={css({\n            stroke: 'action.bg.initial',\n            transition: 'stroke-dashoffset 0.5s ease',\n            '&:is([data-complete=true])': {\n              stroke: 'success.bg.initial',\n            },\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n          strokeDasharray=\"100\"\n          strokeDashoffset={100 - now}\n          transform=\"rotate(-90 50 50)\"\n        />\n\n        <g>\n          <text\n            className={css({\n              fill: 'page.text.initial',\n              fontFamily: 'mono',\n              textStyle: '1.25rem',\n            })}\n            x=\"35%\"\n            y=\"50%\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n            })}\n            x=\"39%\"\n            y=\"60%\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/build/modern/{chunk-UN3OAW56.js → chunk-477G5ZEL.js}

@@ -1,6 +1,6 @@
 import {
   Show
-} from "./chunk-4O4QFF4S.js";
+} from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
 } from "./chunk-NBG2OSYI.js";
@@ -101,4 +101,4 @@ var iconSizeMap = {
 export {
   Avatar
 };
-//# sourceMappingURL=chunk-UN3OAW56.js.map
+//# sourceMappingURL=chunk-477G5ZEL.js.map

package/build/modern/chunk-477G5ZEL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n  /**\n   * An optional icon to show when no src or ariaLabel is provided.\n   */\n  icon?: ReactNode\n  /**\n   * The size of the avatar.\n   */\n  width?: number\n  /**\n   * The size of the avatar.\n   */\n  height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n  SharedAvatarProps & {\n    /**\n     * The aria-label for the avatar needed for accessibility.\n     */\n    ariaLabel: string\n    /**\n     * An optional element to replace the image. Recommended for Next.js Image component.\n     */\n    as?: never\n    /**\n     * The source of the image.\n     */\n    src: string\n  }\nexport type AvatarAsProps = SharedAvatarProps & {\n  /**\n   * An optional element to replace the image. Recommended for Next.js Image component.\n   */\n  as: ReactNode\n  /**\n   * The aria-label for the avatar needed for accessibility.\n   */\n  ariaLabel?: never\n  /**\n   * The source of the image.\n   */\n  src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const {\n    ariaLabel,\n    as,\n    gradient,\n    size,\n    src,\n    width,\n    height,\n    icon,\n    ...nativeProps\n  } = props\n  const { avatar: AvatarIcon } = $cerberusIcons\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <Show\n                when={Boolean(icon)}\n                fallback={\n                  <AvatarIcon\n                    size={iconSizeMap[size as keyof typeof iconSizeMap]}\n                  />\n                }\n              >\n                {icon}\n              </Show>\n            }\n          >\n            {initials}\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AA0GW;AArCX,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,QAAQ,WAAW,IAAI;AAC/B,QAAM,YAAY,aAAa,IAC5B,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,MAAM,GAAG,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO,EAAE,UAAU,KAAK,CAAC;AAAA,QACzB,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ,GAAG,KAAK,QAAQ,EAAE;AAAA,UAChC,UACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,QAAQ;AAAA,cACtB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,IAAI;AAAA,kBAClB,UACE;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,YAAY,IAAgC;AAAA;AAAA,kBACpD;AAAA,kBAGD;AAAA;AAAA,cACH;AAAA,cAGD;AAAA;AAAA,UACH;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,EAAE;AAAA,cAChB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK,MAAM;AAAA,kBACX,WAAW,IAAI;AAAA,oBACb,GAAG;AAAA,oBACH,WAAW;AAAA,oBACX,GAAG;AAAA,kBACL,CAAC;AAAA,kBACD,UAAS;AAAA,kBACT,SAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cAGD;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}

package/build/modern/{chunk-PMCYXRAH.js → chunk-5V5MBSM3.js}

@@ -1,9 +1,9 @@
 import {
   useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
+} from "./chunk-O75QAT4Z.js";
 import {
   Show
-} from "./chunk-4O4QFF4S.js";
+} from "./chunk-BUVVRQLZ.js";
 
 // src/components/NavMenuList.tsx
 import { useMemo } from "react";
@@ -83,4 +83,4 @@ export {
   getPosition,
   NavMenuList
 };
-//# sourceMappingURL=chunk-PMCYXRAH.js.map
+//# sourceMappingURL=chunk-5V5MBSM3.js.map

package/build/modern/chunk-5V5MBSM3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n  /**\n   * The left position of the element.\n   */\n  left: string\n  /**\n   * The right position of the element.\n   */\n  right: string\n  /**\n   * The top position of the element.\n   */\n  top: string\n  /**\n   * The bottom position of the element.\n   */\n  bottom: string\n}\n\n/**\n * Returns the position of the NavMenuList based on the position prop.\n * @param position - The position of the NavMenuList.\n * @returns The position of the NavMenuList.\n */\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  /**\n   * The unique identifier for the NavMenuList. Required for accessibility.\n   */\n  id: string\n  /**\n   * The position of the NavMenuList.\n   * @type 'top' | 'right' | 'bottom' | 'left'\n   * @default 'bottom'\n   */\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n *  <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *   <NavMenuLink href=\"/home\">Home</NavMenuLink>\n *   <NavMenuLink href=\"/about\">About</NavMenuLink>\n *  </NavMenuList>\n * </NavMenu>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4HjB;AA1FC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-3GXISGPS.js → chunk-7K6PZBHN.js}

@@ -1,6 +1,6 @@
 import {
   Show
-} from "./chunk-4O4QFF4S.js";
+} from "./chunk-BUVVRQLZ.js";
 
 // src/components/Th.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -44,4 +44,4 @@ function Th(props) {
 export {
   Th
 };
-//# sourceMappingURL=chunk-3GXISGPS.js.map
+//# sourceMappingURL=chunk-7K6PZBHN.js.map

package/build/modern/chunk-7K6PZBHN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  /**\n   * Converts the Th into a actionable button. Called when the user clicks on\n   * the Th.\n   */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n * @example\n * ```tsx\n * <Th onClick={handleClick}>\n *   Names\n *   <SortIcon />\n * </Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AAwChC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-7SYJFI5E.js

@@ -0,0 +1,80 @@
+// src/components/Spinner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Spinner(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-busy": "true",
+      role: "status",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: props.size,
+      width: props.size,
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "path",
+              {
+                strokeDasharray: 16,
+                strokeDashoffset: 16,
+                d: "M12 3c4.97 0 9 4.03 9 9",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "animate",
+                    {
+                      fill: "freeze",
+                      attributeName: "stroke-dashoffset",
+                      dur: "0.15s",
+                      values: "16;0"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      dur: "0.75s",
+                      repeatCount: "indefinite",
+                      type: "rotate",
+                      values: "0 12 12;360 12 12"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeDasharray: 64,
+                strokeDashoffset: 64,
+                strokeOpacity: 0.3,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
+                children: /* @__PURE__ */ jsx(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.6s",
+                    values: "64;0"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  Spinner
+};
+//# sourceMappingURL=chunk-7SYJFI5E.js.map

package/build/modern/chunk-7SYJFI5E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";AA8CQ,SAKE,KALF;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-ZCIJRM2X.js → chunk-AUAPBPGW.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
 import {
   useFieldContext
-} from "./chunk-ZAU4JVLL.js";
+} from "./chunk-UZDVOIW5.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
 } from "./chunk-NBG2OSYI.js";
@@ -53,4 +53,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-ZCIJRM2X.js.map
+//# sourceMappingURL=chunk-AUAPBPGW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  checkbox,\n  type CheckboxVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n    /**\n     * The id of the FieldMessage element describing the Checkbox.\n     */\n    describedBy?: string\n    /**\n     * The unique identifier for the checkbox. Required for accessibility.\n     */\n    id: string\n    /**\n     * Used to display a mixed checked state.\n     * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)\n     */\n    mixed?: boolean\n  }\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n *   <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function Checkbox(props: CheckboxProps) {\n  const { describedBy, size, checked, mixed, ...nativeProps } = props\n  const { invalid, ...fieldStates } = useFieldContext()\n  const styles = checkbox({ size })\n  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } =\n    $cerberusIcons\n\n  return (\n    <div\n      className={cx(\n        styles.root,\n        vstack({\n          gap: '0',\n          justify: 'center',\n        }),\n      )}\n    >\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        {...(mixed && { 'aria-checked': 'mixed' })}\n        className={cx('peer', nativeProps.className, styles.input)}\n        type=\"checkbox\"\n      />\n      <Show when={checked && !mixed}>\n        <span className={styles.icon}>\n          <CheckIcon />\n        </span>\n      </Show>\n      <Show when={mixed}>\n        <span className={styles.icon}>\n          <IndeterminateIcon />\n        </span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,cAAc;AACvB,SAAS,UAAU;AAgDf,SASE,KATF;AARG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG,YAAY,IAAI;AAC9D,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAC5D;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,UACL,KAAK;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACtC,GAAI,SAAS,EAAE,gBAAgB,QAAQ;AAAA,YACxC,WAAW,GAAG,QAAQ,YAAY,WAAW,OAAO,KAAK;AAAA,YACzD,MAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,QAAK,MAAM,WAAW,CAAC,OACtB,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,aAAU,GACb,GACF;AAAA,QACA,oBAAC,QAAK,MAAM,OACV,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,qBAAkB,GACrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-A5WYZVUR.js → chunk-B4CVET74.js}

@@ -25,4 +25,4 @@ export {
   Table,
   Tr
 };
-//# sourceMappingURL=chunk-A5WYZVUR.js.map
+//# sourceMappingURL=chunk-B4CVET74.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Table.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { table } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren, TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the table component.\n * @module\n */\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * An easy to understand description of the table. Required for accessibility.\n   */\n  caption: string\n}\n\n/**\n * An accessible table component.\n * @definition [ARIA Table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/)\n * @see https://cerberus.digitalu.design/react/table.\n * @example\n * ```tsx\n * <Table caption=\"Basic Table\">\n *  {children}\n * </Table>\n * ```\n */\nexport function Table(props: PropsWithChildren<TableProps>) {\n  const { caption, children, ...nativeProps } = props\n  const styles = table()\n\n  return (\n    <div className={styles.container}>\n      <table\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.table)}\n      >\n        <caption className={styles.caption}>{caption}</caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n// We only provide this for consistency with the rest of the components\n\nexport type TrProps = TableHTMLAttributes<HTMLTableRowElement>\n\n/**\n * The Tr component is used to render a table row.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Tr>\n *  {children}\n * </Tr>\n * ```\n */\nexport function Tr(props: PropsWithChildren<TrProps>) {\n  return <tr {...props} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAgChB,SAIE,KAJF;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,MAAM;AAErB,SACE,oBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,4BAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,oBAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}

package/build/modern/{chunk-2UFNQM55.js → chunk-BE4EOU2P.js}

@@ -18,4 +18,4 @@ var Modal = forwardRef(ModalEl);
 export {
   Modal
 };
-//# sourceMappingURL=chunk-2UFNQM55.js.map
+//# sourceMappingURL=chunk-BE4EOU2P.js.map

package/build/modern/{chunk-2UFNQM55.js.map → chunk-BE4EOU2P.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n *  <ModalIcon icon={$cerberusIcons.alert} />\n *  <h2>Modal Heading</h2>\n *  <p>Modal description</p>\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAeO,IAAM,QAAQ,WAAW,OAAO;","names":[]}
+{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n *  <Avatar icon={SomeIcon} />\n *  <ModalHeader>\n *    <ModalHeading>Modal Heading</ModalHeading>\n *    <ModalDescription>Modal description</ModalDescription>\n *  </ModalHeader>\n *\n *  {props.children}\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAoBO,IAAM,QAAQ,WAAW,OAAO;","names":[]}

package/build/modern/{chunk-VULPMZUW.js → chunk-BIDE4IJG.js}

@@ -1,9 +1,9 @@
 import {
   useFeatureFlags
-} from "./chunk-4M3EUP57.js";
+} from "./chunk-CJFW36DZ.js";
 import {
   Show
-} from "./chunk-4O4QFF4S.js";
+} from "./chunk-BUVVRQLZ.js";
 
 // src/components/FeatureFlag.tsx
 import { jsx } from "react/jsx-runtime";
@@ -15,4 +15,4 @@ function FeatureFlag(props) {
 export {
   FeatureFlag
 };
-//# sourceMappingURL=chunk-VULPMZUW.js.map
+//# sourceMappingURL=chunk-BIDE4IJG.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FeatureFlag.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { useFeatureFlags } from '../context/feature-flags'\nimport { Show } from './Show'\n\nexport interface FeatureFlagProps {\n  /**\n   * The name of the feature flag to check.\n   */\n  flag: string\n}\n\n/**\n * A component that allows you to show or hide content based on a feature flag.\n * @see https://cerberus.digitalu.design/react/feature-flags\n */\nexport function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {\n  const showContent = useFeatureFlags(props.flag)\n  return <Show when={showContent}>{props.children}</Show>\n}\n"],"mappings":";;;;;;;;AAmBS;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,oBAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":[]}

package/build/modern/{chunk-4O4QFF4S.js → chunk-BUVVRQLZ.js}

@@ -12,4 +12,4 @@ function Show(props) {
 export {
   Show
 };
-//# sourceMappingURL=chunk-4O4QFF4S.js.map
+//# sourceMappingURL=chunk-BUVVRQLZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";AAEA,SAAS,eAAuD;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,YAAY,QAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,SAAO,QAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}

package/build/modern/{chunk-4M3EUP57.js → chunk-CJFW36DZ.js}

@@ -19,4 +19,4 @@ export {
   FeatureFlags,
   useFeatureFlags
 };
-//# sourceMappingURL=chunk-4M3EUP57.js.map
+//# sourceMappingURL=chunk-CJFW36DZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n  [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n  flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @see https://cerberus.digitalu.design/react/feature-flags\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n *  featureOne: true,\n *  featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlags flags={flags}>\n *    <FeatureFlag flag=\"featureOne\">\n *      This is visible.\n *    </FeatureFlag>\n *   <FeatureFlag flag=\"featureTwo\">\n *     This is hidden.\n *   </FeatureFlag>\n * </FeatureFlags>\n * ```\n */\nexport function FeatureFlags(\n  props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n  return (\n    <FeatureFlagContext.Provider value={props.flags}>\n      {props.children}\n    </FeatureFlagContext.Provider>\n  )\n}\n\n/**\n * Used to retrieve the context of the FeatureFlags provider.\n */\nexport function useFeatureFlags(key: string): boolean {\n  const context = useContext(FeatureFlagContext)\n  if (context === null) {\n    throw new Error(\n      'useFeatureFlag must be used within a FeatureFlags Provider',\n    )\n  }\n  return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAKO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}