@cerberus-design/react 0.16.0 → 0.17.0-next-e7f9956

package/build/legacy/aria-helpers/nav-menu.aria.d.cts

@@ -0,0 +1,2 @@
+export { createNavTriggerProps_alias_1 as createNavTriggerProps } from '../_tsup-dts-rollup.cjs';
+export { NavTriggerAriaValues_alias_1 as NavTriggerAriaValues } from '../_tsup-dts-rollup.cjs';

package/build/legacy/aria-helpers/trap-focus.aria.d.cts

@@ -0,0 +1 @@
+export { trapFocus_alias_1 as trapFocus } from '../_tsup-dts-rollup.cjs';

package/build/legacy/components/AnimatingUploadIcon.cjs

@@ -84,8 +84,8 @@ function AnimatingUploadIcon(props) {
               {
                 "aria-hidden": "true",
                 xmlns: "http://www.w3.org/2000/svg",
-                width: "0.8em",
-                height: "0.8em",
+                width: "1.1em",
+                height: "1.1em",
                 x: "27%",
                 y: "27%",
                 viewBox: "0 0 24 24",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport interface AnimatingUploadIconProps {\n  size?: 16 | 20 | 24 | 32\n}\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AATC,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAQ;AAAA,MAER;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,aAAU;AAAA,gBACV,iBAAgB;AAAA,gBAChB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,aAAY;AAAA,oBACZ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,OAAM;AAAA,oBACN,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,GAAE;AAAA,gBACF,GAAE;AAAA,gBACF,SAAQ;AAAA,gBAER;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAa;AAAA,oBACb,SAAQ;AAAA,oBACR,QAAO;AAAA,oBAEP;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAK;AAAA,wBACL,eAAc;AAAA,wBACd,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,aAAY;AAAA;AAAA,oBACb;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport interface AnimatingUploadIconProps {\n  size?: 16 | 20 | 24 | 32\n}\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"1.1em\"\n          height=\"1.1em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AATC,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAQ;AAAA,MAER;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,aAAU;AAAA,gBACV,iBAAgB;AAAA,gBAChB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,aAAY;AAAA,oBACZ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,OAAM;AAAA,oBACN,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,GAAE;AAAA,gBACF,GAAE;AAAA,gBACF,SAAQ;AAAA,gBAER;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAa;AAAA,oBACb,SAAQ;AAAA,oBACR,QAAO;AAAA,oBAEP;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAK;AAAA,wBACL,eAAc;AAAA,wBACd,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,aAAY;AAAA;AAAA,oBACb;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/AnimatingUploadIcon.d.cts

@@ -0,0 +1,2 @@
+export { AnimatingUploadIcon } from '../_tsup-dts-rollup.cjs';
+export { AnimatingUploadIconProps } from '../_tsup-dts-rollup.cjs';

package/build/legacy/components/CircularProgress.d.cts

@@ -0,0 +1,2 @@
+export { CircularProgress_alias_1 as CircularProgress } from '../_tsup-dts-rollup.cjs';
+export { CircularProgressProps_alias_1 as CircularProgressProps } from '../_tsup-dts-rollup.cjs';

package/build/legacy/components/Droppable.d.cts

@@ -0,0 +1,2 @@
+export { Droppable_alias_1 as Droppable } from '../_tsup-dts-rollup.cjs';
+export { DroppableProps_alias_1 as DroppableProps } from '../_tsup-dts-rollup.cjs';

package/build/legacy/components/FeatureFlag.d.cts

@@ -0,0 +1,2 @@
+export { FeatureFlag_alias_1 as FeatureFlag } from '../_tsup-dts-rollup.cjs';
+export { FeatureFlagProps_alias_1 as FeatureFlagProps } from '../_tsup-dts-rollup.cjs';

package/build/legacy/components/FileStatus.cjs

@@ -28,7 +28,7 @@ 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_patterns2 = require("@cerberus/styled-system/patterns");
+var import_patterns = require("@cerberus/styled-system/patterns");
 
 // src/context/cerberus.tsx
 var import_react = require("react");
@@ -43,6 +43,7 @@ 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_jsx_runtime2 = require("react/jsx-runtime");
@@ -54,7 +55,7 @@ function ProgressBar(props) {
     width: indeterminate ? "50%" : `${nowClamped}%`
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
+    import_factory.ark.div,
     {
       ...nativeProps,
       "aria-label": label,
@@ -64,7 +65,7 @@ function ProgressBar(props) {
       className: (0, import_css.cx)(nativeProps.className, styles.root),
       role: "progressbar",
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "div",
+        import_factory.ark.div,
         {
           ...indeterminate && { "data-indeterminate": true },
           "data-complete": nowClamped === 100,
@@ -77,13 +78,14 @@ 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_jsx_runtime3 = require("react/jsx-runtime");
 function IconButton(props) {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "button",
+    import_factory2.ark.button,
     {
       ...nativeProps,
       "aria-label": ariaLabel ?? "Icon Button",
@@ -99,10 +101,25 @@ function IconButton(props) {
   );
 }
 
-// src/components/Avatar.tsx
-var import_css3 = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
-var import_recipes3 = require("@cerberus/styled-system/recipes");
+// src/utils/index.ts
+function splitProps(props, ...keyGroups) {
+  const result = keyGroups.map(() => ({}));
+  const rest = {};
+  for (const key in props) {
+    let assigned = false;
+    for (let i = 0; i < keyGroups.length; i++) {
+      if (keyGroups[i].includes(key)) {
+        result[i][key] = props[key];
+        assigned = true;
+        break;
+      }
+    }
+    if (!assigned) {
+      rest[key] = props[key];
+    }
+  }
+  return [...result, rest];
+}
 
 // src/components/Show.tsx
 var import_react2 = require("react");
@@ -115,124 +132,74 @@ function Show(props) {
   }, [condition, children, fallback]);
 }
 
-// src/components/Avatar.tsx
+// 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");
-function Avatar(props) {
-  const {
-    ariaLabel,
-    as,
-    gradient,
-    size,
-    src,
-    width,
-    height,
-    icon,
-    ...nativeProps
-  } = props;
-  const { icons } = useCerberusContext();
-  const { avatar: AvatarIcon } = icons;
-  const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
+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)(
-    "div",
+    import_avatar.Avatar.Root,
     {
-      ...nativeProps,
-      className: (0, import_css3.cx)(
-        nativeProps.className,
-        (0, import_recipes3.avatar)({ gradient, size }),
-        (0, import_patterns.circle)()
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        Show,
-        {
-          when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Show,
-            {
-              when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                Show,
-                {
-                  when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    AvatarIcon,
-                    {
-                      size: iconSizeMap[size]
-                    }
-                  ),
-                  children: icon
-                }
-              ),
-              children: initials
-            }
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Show,
-            {
-              when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "img",
-                {
-                  alt: props.ariaLabel,
-                  className: (0, import_css3.css)({
-                    h: "full",
-                    objectFit: "cover",
-                    w: "full"
-                  }),
-                  decoding: "async",
-                  loading: "lazy",
-                  src,
-                  height,
-                  width
-                }
-              ),
-              children: as
-            }
-          )
-        }
-      )
+      ...rootProps,
+      className: (0, import_css3.cx)(styles.root, rootProps.className)
+    }
+  );
+}
+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) });
+}
+function AvatarFallback(props) {
+  const styles = (0, import_recipes3.avatar)();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_avatar.Avatar.Fallback,
+    {
+      ...props,
+      className: (0, import_css3.cx)(styles.fallback, props.className)
     }
   );
 }
-var iconSizeMap = {
-  xs: 16,
-  sm: 16,
-  md: 20,
-  lg: 34,
-  xl: 32,
-  "2xl": 32,
-  "3xl": 32,
-  "4xl": 32
+
+// src/components/avatar/parts.ts
+var AvatarParts = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
 };
 
-// src/utils/index.ts
-function splitProps(props, ...keyGroups) {
-  const result = keyGroups.map(() => ({}));
-  const rest = {};
-  for (const key in props) {
-    let assigned = false;
-    for (let i = 0; i < keyGroups.length; i++) {
-      if (keyGroups[i].includes(key)) {
-        result[i][key] = props[key];
-        assigned = true;
-        break;
-      }
-    }
-    if (!assigned) {
-      rest[key] = props[key];
+// src/components/avatar/avatar.tsx
+var import_jsx_runtime5 = 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)(
+    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 })
+      ] }),
+      children
     }
-  }
-  return [...result, rest];
+  ) });
 }
 
 // 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_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function FieldRoot(props) {
   const { size, ...fieldProps } = props;
   const styles = (0, import_recipes4.field)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_field.Field.Root,
     {
       ...fieldProps,
@@ -243,15 +210,15 @@ function FieldRoot(props) {
 function FieldLabel(props) {
   const { children, ...nativeProps } = props;
   const styles = (0, import_recipes4.field)();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_field.Field.Label, { ...nativeProps, className: (0, import_css4.cx)(styles.label, props.className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_field.Field.Label, { ...nativeProps, className: (0, import_css4.cx)(styles.label, props.className), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_field.Field.RequiredIndicator, { children: "(required)" })
+    /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_field.Field.HelperText,
     {
       ...props,
@@ -262,7 +229,7 @@ function FieldHelperText(props) {
 function FieldErrorText(props) {
   const styles = (0, import_recipes4.field)();
   if (!props.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_field.Field.ErrorText,
     {
       ...props,
@@ -273,26 +240,26 @@ function FieldErrorText(props) {
 
 // src/components/field/field.tsx
 var import_jsx = require("@cerberus/styled-system/jsx");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = 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_runtime6.jsxs)(FieldRoot, { ...statusProps, ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: Boolean(fieldProps.label), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldLabel, { children: fieldProps.label }) }),
+  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 }) }),
     fieldProps.children,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: Boolean(fieldProps.helperText && !statusProps.invalid), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx.HStack, { justifyContent: "space-between", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldHelperText, { children: fieldProps.helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: Boolean(fieldProps.secondaryHelperText), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
+    /* @__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_runtime6.jsx)(FieldErrorText, { children: fieldProps.errorText })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldErrorText, { children: fieldProps.errorText })
   ] });
 }
 
 // src/components/FileStatus.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
   processStatus2["TODO"] = "todo";
   processStatus2["PROCESSING"] = "processing";
@@ -328,31 +295,29 @@ function FileStatus(props) {
     },
     [onClick]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       ...nativeProps,
-      className: (0, import_css5.cx)(nativeProps.className, styles.root, (0, import_patterns2.hstack)()),
+      className: (0, import_css5.cx)(nativeProps.className, styles.root, (0, import_patterns.hstack)()),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Avatar,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Avatar2,
           {
-            ariaLabel: "",
             gradient: modalIconPalette,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MatchFileStatusIcon, { size: 24, status }),
-            src: ""
+            fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchFileStatusIcon, { size: 24, status })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
-            className: (0, import_patterns2.vstack)({
+            className: (0, import_patterns.vstack)({
               alignItems: "flex-start",
               gap: "0.12rem",
               w: "full"
             }),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "small",
                 {
                   className: (0, import_css5.css)({
@@ -362,7 +327,7 @@ function FileStatus(props) {
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 ProgressBar,
                 {
                   id: props.id,
@@ -371,27 +336,27 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field2, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Field2, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 FieldHelperText,
                 {
                   className: (0, import_css5.css)({
                     color: "page.text.100"
                   }),
                   id: `help:${file}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MatchFileStatusText, { status, now })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchFileStatusText, { status, now })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           IconButton,
           {
             ariaLabel: actionLabel,
             onClick: handleClick,
             palette,
             size: "sm",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MatchStatusAction, { status })
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MatchStatusAction, { status })
           }
         )
       ]
@@ -408,13 +373,13 @@ function MatchFileStatusIcon(props) {
   } = icons;
   switch (props.status) {
     case "todo" /* TODO */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TodoIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TodoIcon, { size: props.size });
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileUploaderIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileUploaderIcon, { size: props.size });
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DoneIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DoneIcon, { size: props.size });
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InvalidIcon, { size: props.size });
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InvalidIcon, { size: props.size });
     default:
       throw new Error("Unknown status");
   }
@@ -439,11 +404,11 @@ function MatchStatusAction(props) {
   switch (props.status) {
     case "todo" /* TODO */:
     case "processing" /* PROCESSING */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {});
     case "error" /* ERROR */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RedoIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RedoIcon, {});
     case "done" /* DONE */:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrashIcon, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TrashIcon, {});
     default:
       throw new Error("Invalid status");
   }