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

package/build/legacy/config/defineIcons.cjs

@@ -123,8 +123,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/config/defineIcons.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/config/defineIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\nimport type { DefinedIcons, IconType } from './types'\n\nconst defaultIcons: Pick<\n  DefinedIcons,\n  'checkbox' | 'fileUploader' | 'indeterminate'\n> = {\n  checkbox: CheckmarkIcon,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n}\n\n/**\n * Defines the icons that will be used in Cerberus React components via the\n * CerberusProvider.\n * @param icons The icons that will be used in Cerberus React components.\n * @returns Icons object compatible with the CerberusProvider SystemConfig.\n * @example\n * ```tsx\n * const icons = defineIcons({\n *  accordionIndicator: MyAccordionIndicatorIcon,\n *  ...\n * })\n * ```\n */\nexport function defineIcons<T extends IconType>(\n  icons: DefinedIcons,\n): Required<DefinedIcons<T>> {\n  return {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons<T>>\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","/**\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;;;ACsBM;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;AC9BM,IAAAA,sBAAA;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;;;AF9EA,IAAM,eAGF;AAAA,EACF,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AACjB;AAeO,SAAS,YACd,OAC2B;AAC3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/config/defineIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\nimport type { DefinedIcons, IconType } from './types'\n\nconst defaultIcons: Pick<\n  DefinedIcons,\n  'checkbox' | 'fileUploader' | 'indeterminate'\n> = {\n  checkbox: CheckmarkIcon,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n}\n\n/**\n * Defines the icons that will be used in Cerberus React components via the\n * CerberusProvider.\n * @param icons The icons that will be used in Cerberus React components.\n * @returns Icons object compatible with the CerberusProvider SystemConfig.\n * @example\n * ```tsx\n * const icons = defineIcons({\n *  accordionIndicator: MyAccordionIndicatorIcon,\n *  ...\n * })\n * ```\n */\nexport function defineIcons<T extends IconType>(\n  icons: DefinedIcons,\n): Required<DefinedIcons<T>> {\n  return {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons<T>>\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","/**\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;;;ACsBM;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;AC9BM,IAAAA,sBAAA;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;;;AF9EA,IAAM,eAGF;AAAA,EACF,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AACjB;AAeO,SAAS,YACd,OAC2B;AAC3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;","names":["import_jsx_runtime"]}

package/build/legacy/config/defineIcons.d.cts

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

package/build/legacy/config/icons/checkbox.icons.d.cts

@@ -0,0 +1,4 @@
+export { CheckmarkIcon } from '../../_tsup-dts-rollup.cjs';
+export { IndeterminateIcon } from '../../_tsup-dts-rollup.cjs';
+export { CheckboxIconProps } from '../../_tsup-dts-rollup.cjs';
+export { IndeterminateIconProps } from '../../_tsup-dts-rollup.cjs';

package/build/legacy/config/index.cjs

@@ -124,8 +124,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/config/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/config/index.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"sourcesContent":["import type { SystemConfig } from './types'\n\n/**\n * Create a system configuration object to be used on the CerberusProvider.\n * @param options The system configuration options you want to customize.\n * @returns A CerberusProvider-compatible system configuration object.\n * @example\n * ```tsx\n * const icons = defineIcons({\n *  accordionIndicator: MyAccordionIndicatorIcon,\n *  ...\n * })\n * const config = makeSystemConfig({\n *   icons,\n * })\n *\n * // In your app\n * <CerberusProvider config={config}>\n *  <App />\n * </CerberusProvider>\n * ```\n */\nexport function makeSystemConfig(options: SystemConfig): SystemConfig {\n  return options\n}\n\nexport * from './defineIcons'\nexport * from './types'\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","/**\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","import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\nimport type { DefinedIcons, IconType } from './types'\n\nconst defaultIcons: Pick<\n  DefinedIcons,\n  'checkbox' | 'fileUploader' | 'indeterminate'\n> = {\n  checkbox: CheckmarkIcon,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n}\n\n/**\n * Defines the icons that will be used in Cerberus React components via the\n * CerberusProvider.\n * @param icons The icons that will be used in Cerberus React components.\n * @returns Icons object compatible with the CerberusProvider SystemConfig.\n * @example\n * ```tsx\n * const icons = defineIcons({\n *  accordionIndicator: MyAccordionIndicatorIcon,\n *  ...\n * })\n * ```\n */\nexport function defineIcons<T extends IconType>(\n  icons: DefinedIcons,\n): Required<DefinedIcons<T>> {\n  return {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons<T>>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACsBM;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;AC9BM,IAAAA,sBAAA;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;;;AC9EA,IAAM,eAGF;AAAA,EACF,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AACjB;AAeO,SAAS,YACd,OAC2B;AAC3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;;;AHXO,SAAS,iBAAiB,SAAqC;AACpE,SAAO;AACT;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/config/index.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"sourcesContent":["import type { SystemConfig } from './types'\n\n/**\n * Create a system configuration object to be used on the CerberusProvider.\n * @param options The system configuration options you want to customize.\n * @returns A CerberusProvider-compatible system configuration object.\n * @example\n * ```tsx\n * const icons = defineIcons({\n *  accordionIndicator: MyAccordionIndicatorIcon,\n *  ...\n * })\n * const config = makeSystemConfig({\n *   icons,\n * })\n *\n * // In your app\n * <CerberusProvider config={config}>\n *  <App />\n * </CerberusProvider>\n * ```\n */\nexport function makeSystemConfig(options: SystemConfig): SystemConfig {\n  return options\n}\n\nexport * from './defineIcons'\nexport * from './types'\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","/**\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","import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\nimport type { DefinedIcons, IconType } from './types'\n\nconst defaultIcons: Pick<\n  DefinedIcons,\n  'checkbox' | 'fileUploader' | 'indeterminate'\n> = {\n  checkbox: CheckmarkIcon,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n}\n\n/**\n * Defines the icons that will be used in Cerberus React components via the\n * CerberusProvider.\n * @param icons The icons that will be used in Cerberus React components.\n * @returns Icons object compatible with the CerberusProvider SystemConfig.\n * @example\n * ```tsx\n * const icons = defineIcons({\n *  accordionIndicator: MyAccordionIndicatorIcon,\n *  ...\n * })\n * ```\n */\nexport function defineIcons<T extends IconType>(\n  icons: DefinedIcons,\n): Required<DefinedIcons<T>> {\n  return {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons<T>>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACsBM;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;AC9BM,IAAAA,sBAAA;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;;;AC9EA,IAAM,eAGF;AAAA,EACF,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AACjB;AAeO,SAAS,YACd,OAC2B;AAC3B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF;;;AHXO,SAAS,iBAAiB,SAAqC;AACpE,SAAO;AACT;","names":["import_jsx_runtime"]}

package/build/legacy/config/index.d.cts

@@ -0,0 +1,5 @@
+export { makeSystemConfig_alias_1 as makeSystemConfig } from '../_tsup-dts-rollup.cjs';
+export { defineIcons_alias_2 as defineIcons } from '../_tsup-dts-rollup.cjs';
+export { SystemConfig_alias_1 as SystemConfig } from '../_tsup-dts-rollup.cjs';
+export { DefinedIcons_alias_1 as DefinedIcons } from '../_tsup-dts-rollup.cjs';
+export { IconType_alias_1 as IconType } from '../_tsup-dts-rollup.cjs';

package/build/legacy/config/types.d.cts

@@ -0,0 +1,3 @@
+export { SystemConfig_alias_2 as SystemConfig } from '../_tsup-dts-rollup.cjs';
+export { DefinedIcons_alias_2 as DefinedIcons } from '../_tsup-dts-rollup.cjs';
+export { IconType_alias_2 as IconType } from '../_tsup-dts-rollup.cjs';

package/build/legacy/context/cerberus.d.cts

@@ -0,0 +1,2 @@
+export { CerberusProvider_alias_1 as CerberusProvider } from '../_tsup-dts-rollup.cjs';
+export { useCerberusContext_alias_1 as useCerberusContext } from '../_tsup-dts-rollup.cjs';

package/build/legacy/context/confirm-modal.cjs

@@ -25,9 +25,10 @@ __export(confirm_modal_exports, {
   useConfirmModal: () => useConfirmModal
 });
 module.exports = __toCommonJS(confirm_modal_exports);
-var import_react6 = require("react");
+var import_react5 = require("react");
 
 // src/components/button/button.tsx
+var import_factory = require("@ark-ui/react/factory");
 var import_react2 = require("react");
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
@@ -53,7 +54,7 @@ function Button(props) {
   const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
   const value = (0, import_react2.useMemo)(() => ({ pending }), [pending]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+    import_factory.ark.button,
     {
       ...nativeProps,
       disabled: pending || nativeProps.disabled,
@@ -73,14 +74,91 @@ function Button(props) {
 // src/context/confirm-modal.tsx
 var import_css4 = require("@cerberus/styled-system/css");
 
-// src/components/Avatar.tsx
-var import_css2 = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
+// 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/avatar/primitives.tsx
+var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_css2 = require("@cerberus/styled-system/css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AvatarRoot(props) {
+  const { gradient, shape, size, ...rootProps } = props;
+  const styles = (0, import_recipes2.avatar)({ gradient, shape, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_avatar.Avatar.Root,
+    {
+      ...rootProps,
+      className: (0, import_css2.cx)(styles.root, rootProps.className)
+    }
+  );
+}
+function AvatarImage(props) {
+  const styles = (0, import_recipes2.avatar)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css2.cx)(styles.image, props.className) });
+}
+function AvatarFallback(props) {
+  const styles = (0, import_recipes2.avatar)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_avatar.Avatar.Fallback,
+    {
+      ...props,
+      className: (0, import_css2.cx)(styles.fallback, props.className)
+    }
+  );
+}
+
+// src/components/avatar/parts.ts
+var AvatarParts = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+};
+
+// src/components/avatar/avatar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Avatar2(props) {
+  const [imgProps, { fallback, children }, rootProps] = splitProps(
+    props,
+    ["alt", "src"],
+    ["fallback", "children"]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Show,
+    {
+      when: Boolean(children),
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarParts.Fallback, { children: fallback }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AvatarParts.Image, { ...imgProps })
+      ] }),
+      children
+    }
+  ) });
+}
+
+// src/context/confirm-modal.tsx
+var import_jsx2 = require("@cerberus/styled-system/jsx");
 
 // src/context/cerberus.tsx
 var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CerberusContext = (0, import_react3.createContext)(null);
 function useCerberusContext() {
   const context = (0, import_react3.useContext)(CerberusContext);
@@ -90,155 +168,92 @@ function useCerberusContext() {
   return context;
 }
 
-// src/components/Avatar.tsx
-var import_jsx_runtime3 = 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);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
+// src/components/dialog/primitives.tsx
+var import_dialog = require("@ark-ui/react/dialog");
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function DialogRoot(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog.Dialog.Root, { ...props });
+}
+function DialogBackdrop(props) {
+  const styles = (0, import_recipes3.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_dialog.Dialog.Backdrop,
     {
-      ...nativeProps,
-      className: (0, import_css2.cx)(
-        nativeProps.className,
-        (0, import_recipes2.avatar)({ gradient, size }),
-        (0, import_patterns.circle)()
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        Show,
-        {
-          when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Show,
-            {
-              when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                Show,
-                {
-                  when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    AvatarIcon,
-                    {
-                      size: iconSizeMap[size]
-                    }
-                  ),
-                  children: icon
-                }
-              ),
-              children: initials
-            }
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Show,
-            {
-              when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "img",
-                {
-                  alt: props.ariaLabel,
-                  className: (0, import_css2.css)({
-                    h: "full",
-                    objectFit: "cover",
-                    w: "full"
-                  }),
-                  decoding: "async",
-                  loading: "lazy",
-                  src,
-                  height,
-                  width
-                }
-              ),
-              children: as
-            }
-          )
-        }
-      )
+      ...props,
+      className: (0, import_css3.cx)(styles.backdrop, props.className)
     }
   );
 }
-var iconSizeMap = {
-  xs: 16,
-  sm: 16,
-  md: 20,
-  lg: 34,
-  xl: 32,
-  "2xl": 32,
-  "3xl": 32,
-  "4xl": 32
-};
-
-// src/context/confirm-modal.tsx
-var import_jsx2 = require("@cerberus/styled-system/jsx");
-
-// src/components/Dialog.tsx
-var import_react5 = require("@ark-ui/react");
-var import_recipes3 = require("@cerberus/styled-system/recipes");
-
-// src/components/Portal.tsx
-var import_react4 = require("@ark-ui/react");
-var Portal = import_react4.Portal;
-
-// src/components/Dialog.tsx
-var import_css3 = require("@cerberus/styled-system/css");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Dialog.Root, { ...props });
+function DialogPositioner(props) {
+  const styles = (0, import_recipes3.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_dialog.Dialog.Positioner,
+    {
+      ...props,
+      className: (0, import_css3.cx)(styles.positioner, props.className)
+    }
+  );
 }
-function Dialog(props) {
+function DialogContent(props) {
   const { size, ...contentProps } = props;
   const styles = (0, import_recipes3.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogBackdrop, { className: styles.backdrop }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_dialog.Dialog.Content,
+    {
+      ...contentProps,
+      className: (0, import_css3.cx)(styles.content, contentProps.className)
+    }
+  );
 }
 function DialogHeading(props) {
   const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Dialog.Title, { ...props, className: (0, import_css3.cx)(props.className, styles.title) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css3.cx)(styles.title, props.className) });
 }
 function DialogDescription(props) {
   const styles = (0, import_recipes3.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_react5.Dialog.Description,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_dialog.Dialog.Description,
     {
       ...props,
-      className: (0, import_css3.cx)(props.className, styles.description)
+      className: (0, import_css3.cx)(styles.description, props.className)
     }
   );
 }
-var DialogTrigger = import_react5.Dialog.Trigger;
-var DialogCloseTrigger = import_react5.Dialog.CloseTrigger;
-var DialogBackdrop = import_react5.Dialog.Backdrop;
-var DialogPositioner = import_react5.Dialog.Positioner;
-var DialogContent = import_react5.Dialog.Content;
+function DialogCloseTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_dialog.Dialog.CloseTrigger, { ...props });
+}
+var DialogProvider = DialogRoot;
+
+// src/components/Portal.tsx
+var import_react4 = require("@ark-ui/react");
+var Portal = import_react4.Portal;
+
+// src/components/dialog/dialog.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Dialog2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogContent, { ...props }) })
+  ] });
+}
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ConfirmModalContext = (0, import_react6.createContext)(null);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ConfirmModalContext = (0, import_react5.createContext)(null);
 function ConfirmModal(props) {
-  const [open, setOpen] = (0, import_react6.useState)(false);
-  const [content, setContent] = (0, import_react6.useState)(null);
-  const resolveRef = (0, import_react6.useRef)(null);
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [content, setContent] = (0, import_react5.useState)(null);
+  const resolveRef = (0, import_react5.useRef)(null);
   const kind = (content == null ? void 0 : content.kind) ?? "non-destructive";
   const { icons } = useCerberusContext();
   const { confirmModal: ConfirmIcon } = icons;
-  const palette = (0, import_react6.useMemo)(
+  const palette = (0, import_react5.useMemo)(
     () => kind === "destructive" ? "danger" : "action",
     [kind]
   );
-  const handleChoice = (0, import_react6.useCallback)(
+  const handleChoice = (0, import_react5.useCallback)(
     (e) => {
       var _a, _b;
       const target = e.currentTarget;
@@ -250,7 +265,7 @@ function ConfirmModal(props) {
     },
     [setOpen]
   );
-  const handleShow = (0, import_react6.useCallback)(
+  const handleShow = (0, import_react5.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options });
@@ -260,54 +275,50 @@ function ConfirmModal(props) {
     },
     [setOpen, setContent]
   );
-  const value = (0, import_react6.useMemo)(
+  const value = (0, import_react5.useMemo)(
     () => ({
       show: handleShow
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_jsx2.HStack,
           {
             alignSelf: "center",
             justify: "center",
             paddingBlockEnd: "md",
             w: "full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  Avatar,
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  Avatar2,
                   {
-                    ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ConfirmIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmIcon, { size: 24 })
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  Avatar,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  Avatar2,
                   {
-                    ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ConfirmIcon, { size: 24 }),
-                    src: ""
+                    fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ConfirmIcon, { size: 24 })
                   }
                 )
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx2.HStack, { gap: "4", w: "full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             autoFocus: true,
@@ -321,7 +332,7 @@ function ConfirmModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           Button,
           {
             className: (0, import_css4.css)({
@@ -339,7 +350,7 @@ function ConfirmModal(props) {
   ] });
 }
 function useConfirmModal() {
-  const context = (0, import_react6.useContext)(ConfirmModalContext);
+  const context = (0, import_react5.useContext)(ConfirmModalContext);
   if (context === null) {
     throw new Error(
       "useConfirmModal must be used within a ConfirmModal Provider"