@cerberus-design/react 0.17.2 → 0.18.0

package/build/legacy/aria-helpers/nav-menu.aria.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n  controls: string\n  expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n  ['aria-controls']: string\n  ['aria-expanded']: boolean\n}\n\nexport function createNavTriggerProps(\n  values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n  return {\n    ['aria-controls']: values.controls,\n    ['aria-expanded']: values.expanded ?? false,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}
+{"version":3,"sources":["../../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n  controls: string\n  expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n  ['aria-controls']: string\n  ['aria-expanded']: boolean\n}\n\n/**\n * @deprecated will be removed in a future release\n */\nexport function createNavTriggerProps(\n  values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n  return {\n    ['aria-controls']: values.controls,\n    ['aria-expanded']: values.expanded ?? false,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}

package/build/legacy/aria-helpers/trap-focus.aria.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,UACd,UACyC;AAJ3C;AAKE,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,MACtB,cAAS,YAAT,mBAAkB,iBAAiB,uBAAsB,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\n/**\n * @deprecated will be removed in a future release\n */\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement | null>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,SAAS,UACd,UACyC;AAP3C;AAQE,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,MACtB,cAAS,YAAT,mBAAkB,iBAAiB,uBAAsB,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/build/legacy/components/CircularProgress.cjs

@@ -24,29 +24,31 @@ __export(CircularProgress_exports, {
   CircularProgress: () => CircularProgress
 });
 module.exports = __toCommonJS(CircularProgress_exports);
-var import_patterns = require("@cerberus/styled-system/patterns");
-var import_css = require("@cerberus/styled-system/css");
+var import_patterns = require("styled-system/patterns");
+var import_css = require("styled-system/css");
 
 // src/components/Show.tsx
-var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+  }
+  return null;
 }
 
 // src/components/CircularProgress.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function CircularProgress(props) {
   const strokeW = 14;
   const radius = `calc(50% * (1 - ${strokeW}/100))`;
   const status = props.syntax ?? "Done";
   const now = props.now >= 100 ? 100 : props.now;
   const bgStyle = props.bgStyle ?? "filled";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       id: props.id,
@@ -61,7 +63,7 @@ function CircularProgress(props) {
         position: "relative"
       }),
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "svg",
         {
           "data-complete": now === 100,
@@ -76,17 +78,17 @@ function CircularProgress(props) {
           viewBox: "0 0 100 100",
           xmlns: "http://www.w3.org/2000/svg",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: props.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "gradient", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: props.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("desc", { children: `${now}% ${status}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: "gradient", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: "var(--cerberus-colors-data-viz-progress-start)"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "stop",
                 {
                   offset: "100%",
@@ -94,7 +96,7 @@ function CircularProgress(props) {
                 }
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "circle",
               {
                 className: (0, import_css.css)({
@@ -106,7 +108,7 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "circle",
               {
                 className: (0, import_css.css)({
@@ -118,7 +120,7 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "circle",
               {
                 "data-complete": now === 100,
@@ -139,8 +141,8 @@ function CircularProgress(props) {
                 transform: "rotate(-90 50 50)"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                 "text",
                 {
                   className: (0, import_css.css)({
@@ -158,7 +160,7 @@ function CircularProgress(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "text",
                 {
                   className: (0, import_css.css)({

package/build/legacy/components/CircularProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CircularProgress.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from '@cerberus/styled-system/patterns'\nimport { css } from '@cerberus/styled-system/css'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\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  syntax?: string\n  /**\n   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\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.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n  const bgStyle: string = props.bgStyle ?? 'filled'\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\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        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\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        </Show>\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: 'url(#gradient)',\n            transition: 'stroke-dashoffset, stroke 0.5s ease',\n            _isComplete: {\n              stroke: 'success.bg.initial',\n            },\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\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=\"50%\"\n            y=\"47%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n              fontWeight: 600,\n            })}\n            x=\"50%\"\n            y=\"59%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n","'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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAmB;AACnB,iBAAoB;;;ACDpB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ADgDQ;AAnCD,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,UAAkB;AACxB,QAAM,SAAS,mBAAmB,OAAO;AACzC,QAAM,SAAiB,MAAM,UAAU;AACvC,QAAM,MAAc,MAAM,OAAO,MAAM,MAAM,MAAM;AACnD,QAAM,UAAkB,MAAM,WAAW;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,MAAM;AAAA,MACV,cAAY,MAAM;AAAA,MAClB,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,eAAW,oBAAG;AAAA,QACZ,WAAW;AAAA,QACX,MAAM;AAAA,QACN,GAAG;AAAA,QACH,UAAU;AAAA,MACZ,CAAC;AAAA,MACD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,iBAAe,QAAQ;AAAA,UACvB,eAAW,gBAAI;AAAA,YACb,SAAS;AAAA,YACT,SAAS;AAAA,YACT,YAAY;AAAA,UACd,CAAC;AAAA,UACD,MAAK;AAAA,UACL,eAAc;AAAA,UACd,aAAa;AAAA,UACb,SAAQ;AAAA,UACR,OAAM;AAAA,UAEN;AAAA,wDAAC,WAAO,gBAAM,OAAM;AAAA,YACpB,4CAAC,UAAM,aAAG,GAAG,KAAK,MAAM,IAAG;AAAA,YAC3B,4CAAC,UACC,uDAAC,oBAAe,IAAG,YACjB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,eACF,GACF;AAAA,YAEA,4CAAC,QAAK,MAAM,YAAY,UACtB;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW,gBAAI;AAAA,kBACb,MAAM;AAAA,gBACR,CAAC;AAAA,gBACD,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,mBAAmB,OAAO;AAAA,gBAC7B,YAAW;AAAA;AAAA,YACb,GACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW,gBAAI;AAAA,kBACb,QAAQ;AAAA,gBACV,CAAC;AAAA,gBACD,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG;AAAA,gBACH,YAAW;AAAA;AAAA,YACb;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAe,QAAQ;AAAA,gBACvB,eAAW,gBAAI;AAAA,kBACb,QAAQ;AAAA,kBACR,YAAY;AAAA,kBACZ,aAAa;AAAA,oBACX,QAAQ;AAAA,kBACV;AAAA,gBACF,CAAC;AAAA,gBACD,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAG;AAAA,gBACH,YAAW;AAAA,gBACX,iBAAgB;AAAA,gBAChB,kBAAkB,MAAM;AAAA,gBACxB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEA,6CAAC,OACC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW,gBAAI;AAAA,oBACb,MAAM;AAAA,oBACN,YAAY;AAAA,oBACZ,WAAW;AAAA,kBACb,CAAC;AAAA,kBACD,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,oBAAI;AAAA;AAAA;AAAA,cACP;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW,gBAAI;AAAA,oBACb,MAAM;AAAA,oBACN,UAAU;AAAA,oBACV,YAAY;AAAA,kBACd,CAAC;AAAA,kBACD,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,cACH;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/CircularProgress.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from 'styled-system/patterns'\nimport { css } from 'styled-system/css'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\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  syntax?: string\n  /**\n   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\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.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n  const bgStyle: string = props.bgStyle ?? 'filled'\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\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        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\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        </Show>\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: 'url(#gradient)',\n            transition: 'stroke-dashoffset, stroke 0.5s ease',\n            _isComplete: {\n              stroke: 'success.bg.initial',\n            },\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\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=\"50%\"\n            y=\"47%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n              fontWeight: 600,\n            })}\n            x=\"50%\"\n            y=\"59%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}

package/build/legacy/components/FeatureFlag.cjs

@@ -40,21 +40,23 @@ function useFeatureFlags(key) {
 }
 
 // src/components/Show.tsx
-var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react2.useMemo)(() => when ?? false, [when]);
-  return (0, import_react2.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
+  }
+  return null;
 }
 
 // src/components/FeatureFlag.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function FeatureFlag(props) {
   const showContent = useFeatureFlags(props.flag);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: showContent, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: showContent, children: props.children });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/legacy/components/FeatureFlag.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FeatureFlag.tsx","../../../src/context/feature-flags.tsx","../../../src/components/Show.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","'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","'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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAkE;AA2C9D;AAhCJ,IAAM,yBAAqB,4BAAuC,IAAI;AAyC/D,SAAS,gBAAgB,KAAsB;AACpD,QAAM,cAAU,yBAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;;;AC5DA,IAAAA,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFnBS,IAAAC,sBAAA;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,6CAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":["import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/FeatureFlag.tsx","../../../src/context/feature-flags.tsx","../../../src/components/Show.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","'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","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAkE;AA2C9D;AAhCJ,IAAM,yBAAqB,4BAAuC,IAAI;AAyC/D,SAAS,gBAAgB,KAAsB;AACpD,QAAM,cAAU,yBAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;;;AC9BW,IAAAA,sBAAA;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,6EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,6EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;AFrBS,IAAAC,sBAAA;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,6CAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":["import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/FileStatus.cjs

@@ -25,10 +25,10 @@ __export(FileStatus_exports, {
   processStatus: () => processStatus
 });
 module.exports = __toCommonJS(FileStatus_exports);
-var import_react3 = require("react");
-var import_recipes5 = require("@cerberus/styled-system/recipes");
-var import_css5 = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
+var import_react2 = require("react");
+var import_recipes5 = require("styled-system/recipes");
+var import_css5 = require("styled-system/css");
+var import_patterns = require("styled-system/patterns");
 
 // src/context/cerberus.tsx
 var import_react = require("react");
@@ -44,8 +44,8 @@ function useCerberusContext() {
 
 // src/components/ProgressBar.tsx
 var import_factory = require("@ark-ui/react/factory");
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
+var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function ProgressBar(props) {
   const { indeterminate, size, usage, now, label, ...nativeProps } = props;
@@ -79,8 +79,8 @@ function ProgressBar(props) {
 
 // src/components/IconButton.tsx
 var import_factory2 = require("@ark-ui/react/factory");
-var import_css2 = require("@cerberus/styled-system/css");
-var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_css2 = require("styled-system/css");
+var import_recipes2 = require("styled-system/recipes");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
@@ -122,25 +122,27 @@ function splitProps(props, ...keyGroups) {
 }
 
 // src/components/Show.tsx
-var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
-  const condition = (0, import_react2.useMemo)(() => when ?? false, [when]);
-  return (0, import_react2.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fallback });
+  }
+  return null;
 }
 
 // src/components/avatar/primitives.tsx
 var import_avatar = require("@ark-ui/react/avatar");
-var import_recipes3 = require("@cerberus/styled-system/recipes");
-var import_css3 = require("@cerberus/styled-system/css");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_recipes3 = require("styled-system/recipes");
+var import_css3 = require("styled-system/css");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function AvatarRoot(props) {
   const { gradient, shape, size, ...rootProps } = props;
   const styles = (0, import_recipes3.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_avatar.Avatar.Root,
     {
       ...rootProps,
@@ -150,11 +152,11 @@ function AvatarRoot(props) {
 }
 function AvatarImage(props) {
   const styles = (0, import_recipes3.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css3.cx)(styles.image, props.className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css3.cx)(styles.image, props.className) });
 }
 function AvatarFallback(props) {
   const styles = (0, import_recipes3.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_avatar.Avatar.Fallback,
     {
       ...props,
@@ -171,20 +173,20 @@ var AvatarParts = {
 };
 
 // src/components/avatar/avatar.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Avatar2(props) {
   const [imgProps, { fallback, children }, rootProps] = splitProps(
     props,
     ["alt", "src"],
     ["fallback", "children"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Show,
     {
-      when: Boolean(children),
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarParts.Fallback, { children: fallback }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarParts.Image, { ...imgProps })
+      when: children,
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvatarParts.Fallback, { children: fallback }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvatarParts.Image, { ...imgProps })
       ] }),
       children
     }
@@ -193,13 +195,13 @@ function Avatar2(props) {
 
 // src/components/field/primitives.tsx
 var import_field = require("@ark-ui/react/field");
-var import_css4 = require("@cerberus/styled-system/css");
-var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_css4 = require("styled-system/css");
+var import_recipes4 = require("styled-system/recipes");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function FieldRoot(props) {
   const { size, ...fieldProps } = props;
   const styles = (0, import_recipes4.field)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_field.Field.Root,
     {
       ...fieldProps,
@@ -210,15 +212,15 @@ function FieldRoot(props) {
 function FieldLabel(props) {
   const { children, ...nativeProps } = props;
   const styles = (0, import_recipes4.field)();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_field.Field.Label, { ...nativeProps, className: (0, import_css4.cx)(styles.label, props.className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_field.Field.Label, { ...nativeProps, className: (0, import_css4.cx)(styles.label, props.className), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_field.Field.RequiredIndicator, { children: "(required)" })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_field.Field.RequiredIndicator, { children: "(required)" })
   ] });
 }
 function FieldHelperText(props) {
   const styles = (0, import_recipes4.field)();
   if (!props.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_field.Field.HelperText,
     {
       ...props,
@@ -229,7 +231,7 @@ function FieldHelperText(props) {
 function FieldErrorText(props) {
   const styles = (0, import_recipes4.field)();
   if (!props.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_field.Field.ErrorText,
     {
       ...props,
@@ -239,27 +241,27 @@ function FieldErrorText(props) {
 }
 
 // src/components/field/field.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx = require("styled-system/jsx");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Field2(props) {
   const [statusProps, fieldProps, rootProps] = splitProps(
     props,
     ["disabled", "required", "readOnly", "invalid"],
     ["label", "helperText", "secondaryHelperText", "errorText", "children"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FieldRoot, { ...statusProps, ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: Boolean(fieldProps.label), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldLabel, { children: fieldProps.label }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(FieldRoot, { ...statusProps, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Show, { when: fieldProps.label, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldLabel, { children: fieldProps.label }) }),
     fieldProps.children,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: Boolean(fieldProps.helperText && !statusProps.invalid), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx.HStack, { justifyContent: "space-between", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldHelperText, { children: fieldProps.helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: Boolean(fieldProps.secondaryHelperText), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Show, { when: fieldProps.helperText && !statusProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx.HStack, { justifyContent: "space-between", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldHelperText, { children: fieldProps.helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldErrorText, { children: fieldProps.errorText })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FieldErrorText, { children: fieldProps.errorText })
   ] });
 }
 
 // src/components/FileStatus.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -269,10 +271,10 @@ var processStatus = /* @__PURE__ */ ((processStatus2) => {
 })(processStatus || {});
 function FileStatus(props) {
   const { file, now, status, onClick, ...nativeProps } = props;
-  const actionLabel = (0, import_react3.useMemo)(() => getStatusActionLabel(status), [status]);
-  const palette = (0, import_react3.useMemo)(() => getPalette(status), [status]);
-  const modalIconPalette = (0, import_react3.useMemo)(() => getModalIconPalette(status), [status]);
-  const styles = (0, import_react3.useMemo)(() => {
+  const actionLabel = (0, import_react2.useMemo)(() => getStatusActionLabel(status), [status]);
+  const palette = (0, import_react2.useMemo)(() => getPalette(status), [status]);
+  const modalIconPalette = (0, import_react2.useMemo)(() => getModalIconPalette(status), [status]);
+  const styles = (0, import_react2.useMemo)(() => {
     switch (status) {
       case "todo" /* TODO */:
         return (0, import_recipes5.fileStatus)({ status: "todo" });
@@ -286,7 +288,7 @@ function FileStatus(props) {
         return (0, import_recipes5.fileStatus)();
     }
   }, [status]);
-  const handleClick = (0, import_react3.useCallback)(
+  const handleClick = (0, import_react2.useCallback)(
     (e) => {
       const actionStatus = getStatusActionLabel(
         status
@@ -295,20 +297,20 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       ...nativeProps,
       className: (0, import_css5.cx)(nativeProps.className, styles.root, (0, import_patterns.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Avatar2,
           {
             gradient: modalIconPalette,
-            fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchFileStatusIcon, { size: 24, status })
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MatchFileStatusIcon, { size: 24, status })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             className: (0, import_patterns.vstack)({
@@ -317,7 +319,7 @@ function FileStatus(props) {
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "small",
                 {
                   className: (0, import_css5.css)({
@@ -327,7 +329,7 @@ function FileStatus(props) {
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 ProgressBar,
                 {
                   id: props.id,
@@ -336,27 +338,27 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Field2, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Field2, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 FieldHelperText,
                 {
                   className: (0, import_css5.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -373,13 +375,13 @@ function MatchFileStatusIcon(props) {
   } = icons;
   switch (props.status) {
     case "todo" /* TODO */:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TodoIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TodoIcon, { size: props.size });
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileUploaderIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FileUploaderIcon, { size: props.size });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DoneIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DoneIcon, { size: props.size });
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InvalidIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InvalidIcon, { size: props.size });
     default:
       throw new Error("Unknown status");
   }
@@ -404,11 +406,11 @@ function MatchStatusAction(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }