@cerberus-design/react 0.10.4 → 0.11.0

package/build/legacy/config/cerbIcons.cjs

@@ -62,6 +62,102 @@ function IndeterminateIcon(props) {
   );
 }
 
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    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 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/config/cerbIcons.ts
 var defaultIcons = {
   avatar: import_icons.UserFilled,
@@ -70,12 +166,13 @@ var defaultIcons = {
   confirmModal: import_icons.Information,
   delete: import_icons.TrashCan,
   promptModal: import_icons.Information,
-  fileUploader: import_icons.CloudUpload,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
-  infoNotification: import_icons.InformationFilled,
-  successNotification: import_icons.CheckmarkFilled,
-  warningNotification: import_icons.WarningFilled,
-  dangerNotification: import_icons.ErrorFilled,
+  infoNotification: import_icons.Information,
+  successNotification: import_icons.CheckmarkOutline,
+  warningNotification: import_icons.WarningAlt,
+  dangerNotification: import_icons.WarningFilled,
   invalid: import_icons.WarningFilled,
   invalidAlt: import_icons.Warning,
   redo: import_icons.Restart,

package/build/legacy/config/cerbIcons.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAeO;;;ACOD;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;;;ADPO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}
+{"version":3,"sources":["../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\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;AAAA,mBAcO;;;ACQD;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;;;AFxCO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":["import_jsx_runtime"]}

package/build/legacy/config/defineIcons.cjs

@@ -65,6 +65,102 @@ function IndeterminateIcon(props) {
   );
 }
 
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    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 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/config/cerbIcons.ts
 var defaultIcons = {
   avatar: import_icons.UserFilled,
@@ -73,12 +169,13 @@ var defaultIcons = {
   confirmModal: import_icons.Information,
   delete: import_icons.TrashCan,
   promptModal: import_icons.Information,
-  fileUploader: import_icons.CloudUpload,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
-  infoNotification: import_icons.InformationFilled,
-  successNotification: import_icons.CheckmarkFilled,
-  warningNotification: import_icons.WarningFilled,
-  dangerNotification: import_icons.ErrorFilled,
+  infoNotification: import_icons.Information,
+  successNotification: import_icons.CheckmarkOutline,
+  warningNotification: import_icons.WarningAlt,
+  dangerNotification: import_icons.WarningFilled,
   invalid: import_icons.WarningFilled,
   invalidAlt: import_icons.Warning,
   redo: import_icons.Restart,

package/build/legacy/config/defineIcons.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/config/defineIcons.ts","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAeO;;;ACOD;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;;;ADPO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;;;ADzDA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAA6C;AACvE,2BAAyB,KAAK;AAC9B,mBAAiB;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,SAAO;AACT;AAIO,IAAI,iBAAiB;","names":[]}
+{"version":3,"sources":["../../../src/config/defineIcons.ts","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\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":"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","names":["import_jsx_runtime"]}

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

@@ -103,6 +103,102 @@ function IndeterminateIcon(props) {
   );
 }
 
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    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 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
 // src/config/cerbIcons.ts
 var defaultIcons = {
   avatar: import_icons.UserFilled,
@@ -111,12 +207,13 @@ var defaultIcons = {
   confirmModal: import_icons.Information,
   delete: import_icons.TrashCan,
   promptModal: import_icons.Information,
-  fileUploader: import_icons.CloudUpload,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
   indeterminate: IndeterminateIcon,
-  infoNotification: import_icons.InformationFilled,
-  successNotification: import_icons.CheckmarkFilled,
-  warningNotification: import_icons.WarningFilled,
-  dangerNotification: import_icons.ErrorFilled,
+  infoNotification: import_icons.Information,
+  successNotification: import_icons.CheckmarkOutline,
+  warningNotification: import_icons.WarningAlt,
+  dangerNotification: import_icons.WarningFilled,
   invalid: import_icons.WarningFilled,
   invalidAlt: import_icons.Warning,
   redo: import_icons.Restart,
@@ -168,9 +265,9 @@ function Show(props) {
 var import_css2 = require("@cerberus/styled-system/css");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
 var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ModalEl(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "dialog",
     {
       ...props,
@@ -185,29 +282,33 @@ var Modal = (0, import_react2.forwardRef)(ModalEl);
 var import_react3 = require("react");
 function useModal() {
   const modalRef = (0, import_react3.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
   const show = (0, import_react3.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.showModal();
+    setIsOpen(true);
   }, []);
   const close = (0, import_react3.useCallback)(() => {
     var _a;
     (_a = modalRef.current) == null ? void 0 : _a.close();
+    setIsOpen(false);
   }, []);
   return (0, import_react3.useMemo)(() => {
     return {
       modalRef,
       show,
-      close
+      close,
+      isOpen
     };
-  }, [modalRef, show, close]);
+  }, [modalRef, show, close, isOpen]);
 }
 
 // src/components/ModalHeader.tsx
 var import_css3 = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ModalHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ...props,
@@ -215,8 +316,8 @@ function ModalHeader(props) {
         props.className,
         (0, import_patterns.vstack)({
           alignItems: "flex-start",
-          gap: "4",
-          mb: "8"
+          gap: "md",
+          mb: "md"
         })
       )
     }
@@ -226,24 +327,24 @@ function ModalHeader(props) {
 // src/components/ModalHeading.tsx
 var import_css4 = require("@cerberus/styled-system/css");
 var import_recipes3 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ModalHeading(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...props, className: (0, import_css4.cx)(props.className, (0, import_recipes3.modal)().heading) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ...props, className: (0, import_css4.cx)(props.className, (0, import_recipes3.modal)().heading) });
 }
 
 // src/components/ModalDescription.tsx
 var import_css5 = require("@cerberus/styled-system/css");
 var import_recipes4 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ModalDescription(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ...props, className: (0, import_css5.cx)(props.className, (0, import_recipes4.modal)().description) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { ...props, className: (0, import_css5.cx)(props.className, (0, import_recipes4.modal)().description) });
 }
 
 // src/components/Avatar.tsx
 var import_css6 = require("@cerberus/styled-system/css");
 var import_patterns2 = require("@cerberus/styled-system/patterns");
 var import_recipes5 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
     ariaLabel,
@@ -258,7 +359,7 @@ function Avatar(props) {
   } = props;
   const { avatar: AvatarIcon } = $cerberusIcons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       ...nativeProps,
@@ -267,19 +368,19 @@ function Avatar(props) {
         (0, import_recipes5.avatar)({ gradient, size }),
         (0, import_patterns2.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Show,
                 {
                   when: Boolean(icon),
-                  fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     AvatarIcon,
                     {
                       size: iconSizeMap[size]
@@ -291,11 +392,11 @@ function Avatar(props) {
               children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
@@ -331,7 +432,7 @@ var iconSizeMap = {
 };
 
 // src/context/confirm-modal.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ConfirmModalContext = (0, import_react4.createContext)(null);
 function ConfirmModal(props) {
   const { modalRef, show, close } = useModal();
@@ -371,36 +472,36 @@ function ConfirmModal(props) {
     }),
     [handleShow]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ConfirmModalContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ModalHeader, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: (0, import_patterns3.hstack)({
               justify: "center",
               w: "full"
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Show,
               {
                 when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "charon-light",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   Avatar,
                   {
                     ariaLabel: "",
                     gradient: "hades-dark",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ConfirmIcon, { size: 24 }),
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ConfirmIcon, { size: 24 }),
                     src: ""
                   }
                 )
@@ -408,17 +509,17 @@ function ConfirmModal(props) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalHeading, { children: content == null ? void 0 : content.heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalDescription, { children: content == null ? void 0 : content.description })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "div",
         {
           className: (0, import_patterns3.hstack)({
             gap: "4"
           }),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Button,
               {
                 autoFocus: true,
@@ -432,7 +533,7 @@ function ConfirmModal(props) {
                 children: content == null ? void 0 : content.actionText
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               Button,
               {
                 className: (0, import_css7.css)({