@apipass/design-system 7.4.4 → 7.4.6

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css                 */const s=require("../../layout/Flex/Flex.cjs"),d=require("../../utils/AnchorOrButton.cjs");function o({items:a,className:l}){const u=a.length-1;return e.jsx("nav",{"aria-label":"Breadcrumb",className:t.clsx(l,"sds-breadcrumb"),children:e.jsx(s.Flex,{alignSecondary:"center",gap:"100",children:a.map((r,n)=>{const c=n===u;return e.jsxs(s.Flex,{alignSecondary:"center",gap:"100",children:[c?e.jsx("span",{className:"breadcrumb-current","aria-current":"page",children:r.label}):e.jsx(d.AnchorOrButton,{...r.href?{href:r.href}:{},onPress:r.onPress,className:"breadcrumb-link",children:r.label}),!c&&e.jsx("span",{className:"breadcrumb-separator","aria-hidden":"true",children:"/"})]},`${r.label}-${n}`)})})})}exports.Breadcrumb=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../../vendor/clsx/dist/clsx.cjs");;/* empty css                 */const c=require("../../layout/Flex/Flex.cjs"),d=require("../../utils/AnchorOrButton.cjs");function b({items:a,className:l}){const t=a.length-1;return e.jsx("nav",{"aria-label":"Breadcrumb",className:u.clsx(l,"sds-breadcrumb"),children:e.jsx(c.Flex,{alignSecondary:"center",gap:"100",children:a.map((r,n)=>{const s=n===t;return e.jsxs(c.Flex,{className:"breadcrumb-item",alignSecondary:"center",gap:"100",children:[s?e.jsx("span",{className:"breadcrumb-current","aria-current":"page",title:r.label,children:r.label}):e.jsx(d.AnchorOrButton,{...r.href?{href:r.href}:{},onPress:r.onPress,className:"breadcrumb-link",children:e.jsx("span",{title:r.label,children:r.label})}),!s&&e.jsx("span",{className:"breadcrumb-separator","aria-hidden":"true",children:"/"})]},`${r.label}-${n}`)})})})}exports.Breadcrumb=b;
 //# sourceMappingURL=Breadcrumb.cjs.map

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  const lastIndex = items.length - 1;\n  return (\n    <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n      <Flex alignSecondary=\"center\" gap=\"100\">\n        {items.map((item, index) => {\n          const isCurrentPage = index === lastIndex;\n          return (\n            <Flex\n              key={`${item.label}-${index}`}\n              alignSecondary=\"center\"\n              gap=\"100\"\n            >\n              {isCurrentPage ? (\n                <span className=\"breadcrumb-current\" aria-current=\"page\">\n                  {item.label}\n                </span>\n              ) : (\n                <AnchorOrButton\n                  {...(item.href ? { href: item.href } : {})}\n                  onPress={item.onPress}\n                  className=\"breadcrumb-link\"\n                >\n                  {item.label}\n                </AnchorOrButton>\n              )}\n              {!isCurrentPage && (\n                <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n            </Flex>\n          );\n        })}\n      </Flex>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":"+RAgBO,SAASA,EAAW,CAAE,MAAAC,EAAO,UAAAC,GAA8B,CAChE,MAAMC,EAAYF,EAAM,OAAS,EACjC,aACG,MAAA,CAAI,aAAW,aAAa,UAAWG,EAAAA,KAAKF,EAAW,gBAAgB,EACtE,eAACG,EAAAA,KAAA,CAAK,eAAe,SAAS,IAAI,MAC/B,WAAM,IAAI,CAACC,EAAMC,IAAU,CAC1B,MAAMC,EAAgBD,IAAUJ,EAChC,OACEM,EAAAA,KAACJ,EAAAA,KAAA,CAEC,eAAe,SACf,IAAI,MAEH,SAAA,CAAAG,EACCE,EAAAA,IAAC,QAAK,UAAU,qBAAqB,eAAa,OAC/C,SAAAJ,EAAK,MACR,EAEAI,EAAAA,IAACC,EAAAA,eAAA,CACE,GAAIL,EAAK,KAAO,CAAE,KAAMA,EAAK,IAAA,EAAS,CAAA,EACvC,QAASA,EAAK,QACd,UAAU,kBAET,SAAAA,EAAK,KAAA,CAAA,EAGT,CAACE,GACAE,MAAC,OAAA,CAAK,UAAU,uBAAuB,cAAY,OAAO,SAAA,GAAA,CAE1D,CAAA,CAAA,EApBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK,EAAA,CAwBjC,CAAC,EACH,EACF,CAEJ"}
+{"version":3,"file":"Breadcrumb.cjs","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  const lastIndex = items.length - 1;\n  return (\n    <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n      <Flex alignSecondary=\"center\" gap=\"100\">\n        {items.map((item, index) => {\n          const isCurrentPage = index === lastIndex;\n          return (\n            <Flex\n              key={`${item.label}-${index}`}\n              className=\"breadcrumb-item\"\n              alignSecondary=\"center\"\n              gap=\"100\"\n            >\n              {isCurrentPage ? (\n                <span\n                  className=\"breadcrumb-current\"\n                  aria-current=\"page\"\n                  title={item.label}\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <AnchorOrButton\n                  {...(item.href ? { href: item.href } : {})}\n                  onPress={item.onPress}\n                  className=\"breadcrumb-link\"\n                >\n                  <span title={item.label}>{item.label}</span>\n                </AnchorOrButton>\n              )}\n              {!isCurrentPage && (\n                <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n            </Flex>\n          );\n        })}\n      </Flex>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":"+RAgBO,SAASA,EAAW,CAAE,MAAAC,EAAO,UAAAC,GAA8B,CAChE,MAAMC,EAAYF,EAAM,OAAS,EACjC,aACG,MAAA,CAAI,aAAW,aAAa,UAAWG,EAAAA,KAAKF,EAAW,gBAAgB,EACtE,eAACG,EAAAA,KAAA,CAAK,eAAe,SAAS,IAAI,MAC/B,WAAM,IAAI,CAACC,EAAMC,IAAU,CAC1B,MAAMC,EAAgBD,IAAUJ,EAChC,OACEM,EAAAA,KAACJ,EAAAA,KAAA,CAEC,UAAU,kBACV,eAAe,SACf,IAAI,MAEH,SAAA,CAAAG,EACCE,EAAAA,IAAC,OAAA,CACC,UAAU,qBACV,eAAa,OACb,MAAOJ,EAAK,MAEX,SAAAA,EAAK,KAAA,CAAA,EAGRI,EAAAA,IAACC,EAAAA,eAAA,CACE,GAAIL,EAAK,KAAO,CAAE,KAAMA,EAAK,IAAA,EAAS,CAAA,EACvC,QAASA,EAAK,QACd,UAAU,kBAEV,eAAC,OAAA,CAAK,MAAOA,EAAK,MAAQ,WAAK,KAAA,CAAM,CAAA,CAAA,EAGxC,CAACE,GACAE,MAAC,OAAA,CAAK,UAAU,uBAAuB,cAAY,OAAO,SAAA,GAAA,CAE1D,CAAA,CAAA,EAzBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK,EAAA,CA6BjC,CAAC,EACH,EACF,CAEJ"}

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.js

@@ -1,31 +1,40 @@
 import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import { clsx as t } from "../../../vendor/clsx/dist/clsx.js";
 /* empty css               */
-import { Flex as l } from "../../layout/Flex/Flex.js";
+import { Flex as c } from "../../layout/Flex/Flex.js";
 import { AnchorOrButton as b } from "../../utils/AnchorOrButton.js";
 function f({ items: e, className: s }) {
   const o = e.length - 1;
-  return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: t(s, "sds-breadcrumb"), children: /* @__PURE__ */ a(l, { alignSecondary: "center", gap: "100", children: e.map((r, n) => {
-    const c = n === o;
+  return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: t(s, "sds-breadcrumb"), children: /* @__PURE__ */ a(c, { alignSecondary: "center", gap: "100", children: e.map((r, l) => {
+    const n = l === o;
     return /* @__PURE__ */ d(
-      l,
+      c,
       {
+        className: "breadcrumb-item",
         alignSecondary: "center",
         gap: "100",
         children: [
-          c ? /* @__PURE__ */ a("span", { className: "breadcrumb-current", "aria-current": "page", children: r.label }) : /* @__PURE__ */ a(
+          n ? /* @__PURE__ */ a(
+            "span",
+            {
+              className: "breadcrumb-current",
+              "aria-current": "page",
+              title: r.label,
+              children: r.label
+            }
+          ) : /* @__PURE__ */ a(
             b,
             {
               ...r.href ? { href: r.href } : {},
               onPress: r.onPress,
               className: "breadcrumb-link",
-              children: r.label
+              children: /* @__PURE__ */ a("span", { title: r.label, children: r.label })
             }
           ),
-          !c && /* @__PURE__ */ a("span", { className: "breadcrumb-separator", "aria-hidden": "true", children: "/" })
+          !n && /* @__PURE__ */ a("span", { className: "breadcrumb-separator", "aria-hidden": "true", children: "/" })
         ]
       },
-      `${r.label}-${n}`
+      `${r.label}-${l}`
     );
   }) }) });
 }

package/dist/lib/ui/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  const lastIndex = items.length - 1;\n  return (\n    <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n      <Flex alignSecondary=\"center\" gap=\"100\">\n        {items.map((item, index) => {\n          const isCurrentPage = index === lastIndex;\n          return (\n            <Flex\n              key={`${item.label}-${index}`}\n              alignSecondary=\"center\"\n              gap=\"100\"\n            >\n              {isCurrentPage ? (\n                <span className=\"breadcrumb-current\" aria-current=\"page\">\n                  {item.label}\n                </span>\n              ) : (\n                <AnchorOrButton\n                  {...(item.href ? { href: item.href } : {})}\n                  onPress={item.onPress}\n                  className=\"breadcrumb-link\"\n                >\n                  {item.label}\n                </AnchorOrButton>\n              )}\n              {!isCurrentPage && (\n                <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n            </Flex>\n          );\n        })}\n      </Flex>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":";;;;;AAgBO,SAASA,EAAW,EAAE,OAAAC,GAAO,WAAAC,KAA8B;AAChE,QAAMC,IAAYF,EAAM,SAAS;AACjC,2BACG,OAAA,EAAI,cAAW,cAAa,WAAWG,EAAKF,GAAW,gBAAgB,GACtE,4BAACG,GAAA,EAAK,gBAAe,UAAS,KAAI,OAC/B,YAAM,IAAI,CAACC,GAAMC,MAAU;AAC1B,UAAMC,IAAgBD,MAAUJ;AAChC,WACE,gBAAAM;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,gBAAe;AAAA,QACf,KAAI;AAAA,QAEH,UAAA;AAAA,UAAAG,IACC,gBAAAE,EAAC,UAAK,WAAU,sBAAqB,gBAAa,QAC/C,UAAAJ,EAAK,OACR,IAEA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACE,GAAIL,EAAK,OAAO,EAAE,MAAMA,EAAK,KAAA,IAAS,CAAA;AAAA,cACvC,SAASA,EAAK;AAAA,cACd,WAAU;AAAA,cAET,UAAAA,EAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAGT,CAACE,KACA,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBAAuB,eAAY,QAAO,UAAA,IAAA,CAE1D;AAAA,QAAA;AAAA,MAAA;AAAA,MApBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK;AAAA,IAAA;AAAA,EAwBjC,CAAC,GACH,GACF;AAEJ;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/ui/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Flex } from \"layout\";\nimport { AnchorOrButton } from \"utils\";\nimport \"./breadcrumb.css\";\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n  onPress?: () => void;\n}\n\nexport interface BreadcrumbProps {\n  items: BreadcrumbItem[];\n  className?: string;\n}\n\nexport function Breadcrumb({ items, className }: BreadcrumbProps) {\n  const lastIndex = items.length - 1;\n  return (\n    <nav aria-label=\"Breadcrumb\" className={clsx(className, \"sds-breadcrumb\")}>\n      <Flex alignSecondary=\"center\" gap=\"100\">\n        {items.map((item, index) => {\n          const isCurrentPage = index === lastIndex;\n          return (\n            <Flex\n              key={`${item.label}-${index}`}\n              className=\"breadcrumb-item\"\n              alignSecondary=\"center\"\n              gap=\"100\"\n            >\n              {isCurrentPage ? (\n                <span\n                  className=\"breadcrumb-current\"\n                  aria-current=\"page\"\n                  title={item.label}\n                >\n                  {item.label}\n                </span>\n              ) : (\n                <AnchorOrButton\n                  {...(item.href ? { href: item.href } : {})}\n                  onPress={item.onPress}\n                  className=\"breadcrumb-link\"\n                >\n                  <span title={item.label}>{item.label}</span>\n                </AnchorOrButton>\n              )}\n              {!isCurrentPage && (\n                <span className=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  /\n                </span>\n              )}\n            </Flex>\n          );\n        })}\n      </Flex>\n    </nav>\n  );\n}\n"],"names":["Breadcrumb","items","className","lastIndex","clsx","Flex","item","index","isCurrentPage","jsxs","jsx","AnchorOrButton"],"mappings":";;;;;AAgBO,SAASA,EAAW,EAAE,OAAAC,GAAO,WAAAC,KAA8B;AAChE,QAAMC,IAAYF,EAAM,SAAS;AACjC,2BACG,OAAA,EAAI,cAAW,cAAa,WAAWG,EAAKF,GAAW,gBAAgB,GACtE,4BAACG,GAAA,EAAK,gBAAe,UAAS,KAAI,OAC/B,YAAM,IAAI,CAACC,GAAMC,MAAU;AAC1B,UAAMC,IAAgBD,MAAUJ;AAChC,WACE,gBAAAM;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,gBAAe;AAAA,QACf,KAAI;AAAA,QAEH,UAAA;AAAA,UAAAG,IACC,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,gBAAa;AAAA,cACb,OAAOJ,EAAK;AAAA,cAEX,UAAAA,EAAK;AAAA,YAAA;AAAA,UAAA,IAGR,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACE,GAAIL,EAAK,OAAO,EAAE,MAAMA,EAAK,KAAA,IAAS,CAAA;AAAA,cACvC,SAASA,EAAK;AAAA,cACd,WAAU;AAAA,cAEV,4BAAC,QAAA,EAAK,OAAOA,EAAK,OAAQ,YAAK,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAGxC,CAACE,KACA,gBAAAE,EAAC,QAAA,EAAK,WAAU,wBAAuB,eAAY,QAAO,UAAA,IAAA,CAE1D;AAAA,QAAA;AAAA,MAAA;AAAA,MAzBG,GAAGJ,EAAK,KAAK,IAAIC,CAAK;AAAA,IAAA;AAAA,EA6BjC,CAAC,GACH,GACF;AAEJ;"}

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react");;/* empty css                    */const r=require("../../primitives/Dialog/Dialog.cjs"),C=require("../../primitives/Input/Input.cjs"),x=require("../../layout/Flex/Flex.cjs"),a=require("../../primitives/Button/Button.cjs");function q(i){return i.isOpen?e.jsx(v,{...i}):null}function v({title:i,message:l,confirmValue:t,confirmValueLabel:f,confirmLabel:o="Confirm",cancelLabel:j="Cancel",isDanger:h=!1,isLoading:n=!1,onConfirm:m,onClose:c}){const[u,D]=y.useState(""),s=t?u===t:!0;function d(){s&&m()}function g(){n||c()}return e.jsx(r.DialogModal,{isOpen:!0,onOpenChange:p=>!p&&g(),children:e.jsxs(r.Dialog,{children:[e.jsxs(x.Flex,{direction:"row",alignPrimary:"space-between",alignSecondary:"center",children:[e.jsx(r.DialogTitle,{children:i}),e.jsx(r.DialogClose,{onPress:g})]}),e.jsxs(r.DialogBody,{children:[l&&e.jsx("p",{className:"confirm-dialog-message",dangerouslySetInnerHTML:{__html:l}}),t&&e.jsx(C.InputField,{label:f,value:u,onChange:D,isRequired:!0,validationBehavior:"aria"})]}),e.jsxs(x.Flex,{direction:"row",gap:"200",alignPrimary:"end",className:"confirm-dialog-footer",children:[e.jsx(a.Button,{variant:"neutral",onPress:c,isDisabled:n,children:j}),h?e.jsx(a.ButtonDanger,{variant:"danger-primary",onPress:d,isDisabled:!s||n,children:n?"...":o}):e.jsx(a.Button,{variant:"primary",onPress:d,isDisabled:!s||n,children:n?"...":o})]})]})})}exports.ConfirmDialog=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react");;/* empty css                    */const r=require("../../primitives/Dialog/Dialog.cjs"),C=require("../../primitives/Input/Input.cjs"),x=require("../../layout/Flex/Flex.cjs"),a=require("../../primitives/Button/Button.cjs");function q(i){return i.isOpen?e.jsx(v,{...i}):null}function v({title:i,message:o,confirmValue:t,confirmValueLabel:f,confirmLabel:l="Confirm",cancelLabel:j="Cancel",isDanger:h=!1,isLoading:n=!1,onConfirm:m,onClose:u}){const[c,D]=y.useState(""),s=t?c===t:!0;function d(){s&&m()}function g(){n||u()}return e.jsx(r.DialogModal,{isOpen:!0,onOpenChange:p=>!p&&g(),children:e.jsxs(r.Dialog,{children:[e.jsxs(x.Flex,{direction:"row",alignPrimary:"space-between",alignSecondary:"center",children:[e.jsx(r.DialogTitle,{children:i}),e.jsx(r.DialogClose,{onPress:g})]}),e.jsxs(r.DialogBody,{children:[o&&e.jsx("p",{className:"confirm-dialog-message",dangerouslySetInnerHTML:{__html:o}}),t&&e.jsx(C.InputField,{label:f,value:c,onChange:D,autoFocus:!0,isRequired:!0,validationBehavior:"aria"})]}),e.jsxs(x.Flex,{direction:"row",gap:"200",alignPrimary:"end",className:"confirm-dialog-footer",children:[e.jsx(a.Button,{variant:"neutral",onPress:u,isDisabled:n,children:j}),h?e.jsx(a.ButtonDanger,{variant:"danger-primary",onPress:d,isDisabled:!s||n,children:n?"...":l}):e.jsx(a.Button,{variant:"primary",onPress:d,isDisabled:!s||n,children:n?"...":l})]})]})})}exports.ConfirmDialog=q;
 //# sourceMappingURL=ConfirmDialog.cjs.map

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.cjs","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonDanger,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogModal,\n  DialogTitle,\n  InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n  isOpen: boolean;\n  title: string;\n  message?: string;\n  /** If set, user must type this value to enable the confirm button */\n  confirmValue?: string;\n  confirmValueLabel?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  isDanger?: boolean;\n  isLoading?: boolean;\n  onConfirm: () => void;\n  onClose: () => void;\n}\n\nexport function ConfirmDialog(props: ConfirmDialogProps) {\n  if (!props.isOpen) return null;\n\n  return <OpenConfirmDialog {...props} />;\n}\n\nfunction OpenConfirmDialog({\n  title,\n  message,\n  confirmValue,\n  confirmValueLabel,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  isDanger = false,\n  isLoading = false,\n  onConfirm,\n  onClose,\n}: ConfirmDialogProps) {\n  const [typed, setTyped] = useState(\"\");\n\n  const canConfirm = confirmValue ? typed === confirmValue : true;\n\n  function handleConfirm() {\n    if (!canConfirm) return;\n    onConfirm();\n  }\n\n  function closeUnlessLoading() {\n    if (!isLoading) onClose();\n  }\n\n  return (\n    <DialogModal isOpen onOpenChange={(open) => !open && closeUnlessLoading()}>\n      <Dialog>\n        <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogClose onPress={closeUnlessLoading} />\n        </Flex>\n        <DialogBody>\n          {message && (\n            <p\n              className=\"confirm-dialog-message\"\n              dangerouslySetInnerHTML={{ __html: message }}\n            />\n          )}\n          {confirmValue && (\n            <InputField\n              label={confirmValueLabel}\n              value={typed}\n              onChange={setTyped}\n              isRequired\n              // The confirm button already waits for the exact value; native validation would show\n              // the browser's own message, in the browser's language.\n              validationBehavior=\"aria\"\n            />\n          )}\n        </DialogBody>\n        <Flex\n          direction=\"row\"\n          gap=\"200\"\n          alignPrimary=\"end\"\n          className=\"confirm-dialog-footer\"\n        >\n          <Button variant=\"neutral\" onPress={onClose} isDisabled={isLoading}>\n            {cancelLabel}\n          </Button>\n          {isDanger ? (\n            <ButtonDanger\n              variant=\"danger-primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </ButtonDanger>\n          ) : (\n            <Button\n              variant=\"primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </Button>\n          )}\n        </Flex>\n      </Dialog>\n    </DialogModal>\n  );\n}\n"],"names":["ConfirmDialog","props","jsx","OpenConfirmDialog","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleConfirm","closeUnlessLoading","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":"uWA6BO,SAASA,EAAcC,EAA2B,CACvD,OAAKA,EAAM,OAEJC,MAACC,EAAA,CAAmB,GAAGF,CAAA,CAAO,EAFX,IAG5B,CAEA,SAASE,EAAkB,CACzB,MAAAC,EACA,QAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,aAAAC,EAAe,UACf,YAAAC,EAAc,SACd,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,UAAAC,EACA,QAAAC,CACF,EAAuB,CACrB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAE,EAE/BC,EAAaX,EAAeQ,IAAUR,EAAe,GAE3D,SAASY,GAAgB,CAClBD,GACLL,EAAA,CACF,CAEA,SAASO,GAAqB,CACvBR,GAAWE,EAAA,CAClB,CAEA,OACEX,EAAAA,IAACkB,EAAAA,YAAA,CAAY,OAAM,GAAC,aAAeC,GAAS,CAACA,GAAQF,EAAA,EACnD,SAAAG,EAAAA,KAACC,EAAAA,OAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,MAAK,UAAU,MAAM,aAAa,gBAAgB,eAAe,SAChE,SAAA,CAAAtB,EAAAA,IAACuB,EAAAA,aAAa,SAAArB,CAAA,CAAM,EACpBF,EAAAA,IAACwB,EAAAA,YAAA,CAAY,QAASP,CAAA,CAAoB,CAAA,EAC5C,SACCQ,EAAAA,WAAA,CACE,SAAA,CAAAtB,GACCH,EAAAA,IAAC,IAAA,CACC,UAAU,yBACV,wBAAyB,CAAE,OAAQG,CAAA,CAAQ,CAAA,EAG9CC,GACCJ,EAAAA,IAAC0B,EAAAA,WAAA,CACC,MAAOrB,EACP,MAAOO,EACP,SAAUC,EACV,WAAU,GAGV,mBAAmB,MAAA,CAAA,CACrB,EAEJ,EACAO,EAAAA,KAACE,EAAAA,KAAA,CACC,UAAU,MACV,IAAI,MACJ,aAAa,MACb,UAAU,wBAEV,SAAA,CAAAtB,EAAAA,IAAC2B,EAAAA,QAAO,QAAQ,UAAU,QAAShB,EAAS,WAAYF,EACrD,SAAAF,CAAA,CACH,EACCC,EACCR,EAAAA,IAAC4B,EAAAA,aAAA,CACC,QAAQ,iBACR,QAASZ,EACT,WAAY,CAACD,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,EAGvBN,EAAAA,IAAC2B,EAAAA,OAAA,CACC,QAAQ,UACR,QAASX,EACT,WAAY,CAACD,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,CACvB,CAAA,CAAA,CAEJ,CAAA,CACF,CAAA,CACF,CAEJ"}
+{"version":3,"file":"ConfirmDialog.cjs","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonDanger,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogModal,\n  DialogTitle,\n  InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n  isOpen: boolean;\n  title: string;\n  message?: string;\n  /** If set, user must type this value to enable the confirm button */\n  confirmValue?: string;\n  confirmValueLabel?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  isDanger?: boolean;\n  isLoading?: boolean;\n  onConfirm: () => void;\n  onClose: () => void;\n}\n\nexport function ConfirmDialog(props: ConfirmDialogProps) {\n  if (!props.isOpen) return null;\n\n  return <OpenConfirmDialog {...props} />;\n}\n\nfunction OpenConfirmDialog({\n  title,\n  message,\n  confirmValue,\n  confirmValueLabel,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  isDanger = false,\n  isLoading = false,\n  onConfirm,\n  onClose,\n}: ConfirmDialogProps) {\n  const [typed, setTyped] = useState(\"\");\n\n  const canConfirm = confirmValue ? typed === confirmValue : true;\n\n  function handleConfirm() {\n    if (!canConfirm) return;\n    onConfirm();\n  }\n\n  function closeUnlessLoading() {\n    if (!isLoading) onClose();\n  }\n\n  return (\n    <DialogModal isOpen onOpenChange={(open) => !open && closeUnlessLoading()}>\n      <Dialog>\n        <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogClose onPress={closeUnlessLoading} />\n        </Flex>\n        <DialogBody>\n          {message && (\n            <p\n              className=\"confirm-dialog-message\"\n              dangerouslySetInnerHTML={{ __html: message }}\n            />\n          )}\n          {confirmValue && (\n            <InputField\n              label={confirmValueLabel}\n              value={typed}\n              onChange={setTyped}\n              autoFocus\n              isRequired\n              // The confirm button already waits for the exact value; native validation would show\n              // the browser's own message, in the browser's language.\n              validationBehavior=\"aria\"\n            />\n          )}\n        </DialogBody>\n        <Flex\n          direction=\"row\"\n          gap=\"200\"\n          alignPrimary=\"end\"\n          className=\"confirm-dialog-footer\"\n        >\n          <Button variant=\"neutral\" onPress={onClose} isDisabled={isLoading}>\n            {cancelLabel}\n          </Button>\n          {isDanger ? (\n            <ButtonDanger\n              variant=\"danger-primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </ButtonDanger>\n          ) : (\n            <Button\n              variant=\"primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </Button>\n          )}\n        </Flex>\n      </Dialog>\n    </DialogModal>\n  );\n}\n"],"names":["ConfirmDialog","props","jsx","OpenConfirmDialog","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleConfirm","closeUnlessLoading","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":"uWA6BO,SAASA,EAAcC,EAA2B,CACvD,OAAKA,EAAM,OAEJC,MAACC,EAAA,CAAmB,GAAGF,CAAA,CAAO,EAFX,IAG5B,CAEA,SAASE,EAAkB,CACzB,MAAAC,EACA,QAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,aAAAC,EAAe,UACf,YAAAC,EAAc,SACd,SAAAC,EAAW,GACX,UAAAC,EAAY,GACZ,UAAAC,EACA,QAAAC,CACF,EAAuB,CACrB,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAE,EAE/BC,EAAaX,EAAeQ,IAAUR,EAAe,GAE3D,SAASY,GAAgB,CAClBD,GACLL,EAAA,CACF,CAEA,SAASO,GAAqB,CACvBR,GAAWE,EAAA,CAClB,CAEA,OACEX,EAAAA,IAACkB,EAAAA,YAAA,CAAY,OAAM,GAAC,aAAeC,GAAS,CAACA,GAAQF,EAAA,EACnD,SAAAG,EAAAA,KAACC,EAAAA,OAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,MAAK,UAAU,MAAM,aAAa,gBAAgB,eAAe,SAChE,SAAA,CAAAtB,EAAAA,IAACuB,EAAAA,aAAa,SAAArB,CAAA,CAAM,EACpBF,EAAAA,IAACwB,EAAAA,YAAA,CAAY,QAASP,CAAA,CAAoB,CAAA,EAC5C,SACCQ,EAAAA,WAAA,CACE,SAAA,CAAAtB,GACCH,EAAAA,IAAC,IAAA,CACC,UAAU,yBACV,wBAAyB,CAAE,OAAQG,CAAA,CAAQ,CAAA,EAG9CC,GACCJ,EAAAA,IAAC0B,EAAAA,WAAA,CACC,MAAOrB,EACP,MAAOO,EACP,SAAUC,EACV,UAAS,GACT,WAAU,GAGV,mBAAmB,MAAA,CAAA,CACrB,EAEJ,EACAO,EAAAA,KAACE,EAAAA,KAAA,CACC,UAAU,MACV,IAAI,MACJ,aAAa,MACb,UAAU,wBAEV,SAAA,CAAAtB,EAAAA,IAAC2B,EAAAA,QAAO,QAAQ,UAAU,QAAShB,EAAS,WAAYF,EACrD,SAAAF,CAAA,CACH,EACCC,EACCR,EAAAA,IAAC4B,EAAAA,aAAA,CACC,QAAQ,iBACR,QAASZ,EACT,WAAY,CAACD,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,EAGvBN,EAAAA,IAAC2B,EAAAA,OAAA,CACC,QAAQ,UACR,QAASX,EACT,WAAY,CAACD,GAAcN,EAE1B,WAAY,MAAQH,CAAA,CAAA,CACvB,CAAA,CAAA,CAEJ,CAAA,CACF,CAAA,CACF,CAEJ"}

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js

@@ -3,16 +3,16 @@ import { useState as v } from "react";
 /* empty css                  */
 import { DialogModal as P, Dialog as b, DialogTitle as x, DialogClose as B, DialogBody as O } from "../../primitives/Dialog/Dialog.js";
 import { InputField as w } from "../../primitives/Input/Input.js";
-import { Flex as f } from "../../layout/Flex/Flex.js";
-import { Button as p, ButtonDanger as S } from "../../primitives/Button/Button.js";
+import { Flex as u } from "../../layout/Flex/Flex.js";
+import { Button as f, ButtonDanger as F } from "../../primitives/Button/Button.js";
 function H(n) {
-  return n.isOpen ? /* @__PURE__ */ r(T, { ...n }) : null;
+  return n.isOpen ? /* @__PURE__ */ r(S, { ...n }) : null;
 }
-function T({
+function S({
   title: n,
   message: t,
   confirmValue: o,
-  confirmValueLabel: u,
+  confirmValueLabel: p,
   confirmLabel: l = "Confirm",
   cancelLabel: g = "Cancel",
   isDanger: h = !1,
@@ -28,7 +28,7 @@ function T({
     e || s();
   }
   return /* @__PURE__ */ r(P, { isOpen: !0, onOpenChange: (C) => !C && m(), children: /* @__PURE__ */ i(b, { children: [
-    /* @__PURE__ */ i(f, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
+    /* @__PURE__ */ i(u, { direction: "row", alignPrimary: "space-between", alignSecondary: "center", children: [
       /* @__PURE__ */ r(x, { children: n }),
       /* @__PURE__ */ r(B, { onPress: m })
     ] }),
@@ -43,25 +43,26 @@ function T({
       o && /* @__PURE__ */ r(
         w,
         {
-          label: u,
+          label: p,
           value: c,
           onChange: y,
+          autoFocus: !0,
           isRequired: !0,
           validationBehavior: "aria"
         }
       )
     ] }),
     /* @__PURE__ */ i(
-      f,
+      u,
       {
         direction: "row",
         gap: "200",
         alignPrimary: "end",
         className: "confirm-dialog-footer",
         children: [
-          /* @__PURE__ */ r(p, { variant: "neutral", onPress: s, isDisabled: e, children: g }),
+          /* @__PURE__ */ r(f, { variant: "neutral", onPress: s, isDisabled: e, children: g }),
           h ? /* @__PURE__ */ r(
-            S,
+            F,
             {
               variant: "danger-primary",
               onPress: d,
@@ -69,7 +70,7 @@ function T({
               children: e ? "..." : l
             }
           ) : /* @__PURE__ */ r(
-            p,
+            f,
             {
               variant: "primary",
               onPress: d,

package/dist/lib/ui/components/ConfirmDialog/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonDanger,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogModal,\n  DialogTitle,\n  InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n  isOpen: boolean;\n  title: string;\n  message?: string;\n  /** If set, user must type this value to enable the confirm button */\n  confirmValue?: string;\n  confirmValueLabel?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  isDanger?: boolean;\n  isLoading?: boolean;\n  onConfirm: () => void;\n  onClose: () => void;\n}\n\nexport function ConfirmDialog(props: ConfirmDialogProps) {\n  if (!props.isOpen) return null;\n\n  return <OpenConfirmDialog {...props} />;\n}\n\nfunction OpenConfirmDialog({\n  title,\n  message,\n  confirmValue,\n  confirmValueLabel,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  isDanger = false,\n  isLoading = false,\n  onConfirm,\n  onClose,\n}: ConfirmDialogProps) {\n  const [typed, setTyped] = useState(\"\");\n\n  const canConfirm = confirmValue ? typed === confirmValue : true;\n\n  function handleConfirm() {\n    if (!canConfirm) return;\n    onConfirm();\n  }\n\n  function closeUnlessLoading() {\n    if (!isLoading) onClose();\n  }\n\n  return (\n    <DialogModal isOpen onOpenChange={(open) => !open && closeUnlessLoading()}>\n      <Dialog>\n        <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogClose onPress={closeUnlessLoading} />\n        </Flex>\n        <DialogBody>\n          {message && (\n            <p\n              className=\"confirm-dialog-message\"\n              dangerouslySetInnerHTML={{ __html: message }}\n            />\n          )}\n          {confirmValue && (\n            <InputField\n              label={confirmValueLabel}\n              value={typed}\n              onChange={setTyped}\n              isRequired\n              // The confirm button already waits for the exact value; native validation would show\n              // the browser's own message, in the browser's language.\n              validationBehavior=\"aria\"\n            />\n          )}\n        </DialogBody>\n        <Flex\n          direction=\"row\"\n          gap=\"200\"\n          alignPrimary=\"end\"\n          className=\"confirm-dialog-footer\"\n        >\n          <Button variant=\"neutral\" onPress={onClose} isDisabled={isLoading}>\n            {cancelLabel}\n          </Button>\n          {isDanger ? (\n            <ButtonDanger\n              variant=\"danger-primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </ButtonDanger>\n          ) : (\n            <Button\n              variant=\"primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </Button>\n          )}\n        </Flex>\n      </Dialog>\n    </DialogModal>\n  );\n}\n"],"names":["ConfirmDialog","props","jsx","OpenConfirmDialog","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleConfirm","closeUnlessLoading","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":";;;;;;;AA6BO,SAASA,EAAcC,GAA2B;AACvD,SAAKA,EAAM,SAEJ,gBAAAC,EAACC,GAAA,EAAmB,GAAGF,EAAA,CAAO,IAFX;AAG5B;AAEA,SAASE,EAAkB;AAAA,EACzB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AACF,GAAuB;AACrB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAE/BC,IAAaX,IAAeQ,MAAUR,IAAe;AAE3D,WAASY,IAAgB;AACvB,IAAKD,KACLL,EAAA;AAAA,EACF;AAEA,WAASO,IAAqB;AAC5B,IAAKR,KAAWE,EAAA;AAAA,EAClB;AAEA,SACE,gBAAAX,EAACkB,GAAA,EAAY,QAAM,IAAC,cAAc,CAACC,MAAS,CAACA,KAAQF,EAAA,GACnD,UAAA,gBAAAG,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAK,WAAU,OAAM,cAAa,iBAAgB,gBAAe,UAChE,UAAA;AAAA,MAAA,gBAAAtB,EAACuB,KAAa,UAAArB,EAAA,CAAM;AAAA,MACpB,gBAAAF,EAACwB,GAAA,EAAY,SAASP,EAAA,CAAoB;AAAA,IAAA,GAC5C;AAAA,sBACCQ,GAAA,EACE,UAAA;AAAA,MAAAtB,KACC,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQG,EAAA;AAAA,QAAQ;AAAA,MAAA;AAAA,MAG9CC,KACC,gBAAAJ;AAAA,QAAC0B;AAAA,QAAA;AAAA,UACC,OAAOrB;AAAA,UACP,OAAOO;AAAA,UACP,UAAUC;AAAA,UACV,YAAU;AAAA,UAGV,oBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,GAEJ;AAAA,IACA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,cAAa;AAAA,QACb,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAtB,EAAC2B,KAAO,SAAQ,WAAU,SAAShB,GAAS,YAAYF,GACrD,UAAAF,EAAA,CACH;AAAA,UACCC,IACC,gBAAAR;AAAA,YAAC4B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASZ;AAAA,cACT,YAAY,CAACD,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA,IAGvB,gBAAAN;AAAA,YAAC2B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASX;AAAA,cACT,YAAY,CAACD,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../../../src/ui/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonDanger,\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogModal,\n  DialogTitle,\n  InputField,\n} from \"primitives\";\nimport { Flex } from \"layout\";\nimport { useState } from \"react\";\nimport \"./confirmdialog.css\";\n\nexport interface ConfirmDialogProps {\n  isOpen: boolean;\n  title: string;\n  message?: string;\n  /** If set, user must type this value to enable the confirm button */\n  confirmValue?: string;\n  confirmValueLabel?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  isDanger?: boolean;\n  isLoading?: boolean;\n  onConfirm: () => void;\n  onClose: () => void;\n}\n\nexport function ConfirmDialog(props: ConfirmDialogProps) {\n  if (!props.isOpen) return null;\n\n  return <OpenConfirmDialog {...props} />;\n}\n\nfunction OpenConfirmDialog({\n  title,\n  message,\n  confirmValue,\n  confirmValueLabel,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  isDanger = false,\n  isLoading = false,\n  onConfirm,\n  onClose,\n}: ConfirmDialogProps) {\n  const [typed, setTyped] = useState(\"\");\n\n  const canConfirm = confirmValue ? typed === confirmValue : true;\n\n  function handleConfirm() {\n    if (!canConfirm) return;\n    onConfirm();\n  }\n\n  function closeUnlessLoading() {\n    if (!isLoading) onClose();\n  }\n\n  return (\n    <DialogModal isOpen onOpenChange={(open) => !open && closeUnlessLoading()}>\n      <Dialog>\n        <Flex direction=\"row\" alignPrimary=\"space-between\" alignSecondary=\"center\">\n          <DialogTitle>{title}</DialogTitle>\n          <DialogClose onPress={closeUnlessLoading} />\n        </Flex>\n        <DialogBody>\n          {message && (\n            <p\n              className=\"confirm-dialog-message\"\n              dangerouslySetInnerHTML={{ __html: message }}\n            />\n          )}\n          {confirmValue && (\n            <InputField\n              label={confirmValueLabel}\n              value={typed}\n              onChange={setTyped}\n              autoFocus\n              isRequired\n              // The confirm button already waits for the exact value; native validation would show\n              // the browser's own message, in the browser's language.\n              validationBehavior=\"aria\"\n            />\n          )}\n        </DialogBody>\n        <Flex\n          direction=\"row\"\n          gap=\"200\"\n          alignPrimary=\"end\"\n          className=\"confirm-dialog-footer\"\n        >\n          <Button variant=\"neutral\" onPress={onClose} isDisabled={isLoading}>\n            {cancelLabel}\n          </Button>\n          {isDanger ? (\n            <ButtonDanger\n              variant=\"danger-primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </ButtonDanger>\n          ) : (\n            <Button\n              variant=\"primary\"\n              onPress={handleConfirm}\n              isDisabled={!canConfirm || isLoading}\n            >\n              {isLoading ? \"...\" : confirmLabel}\n            </Button>\n          )}\n        </Flex>\n      </Dialog>\n    </DialogModal>\n  );\n}\n"],"names":["ConfirmDialog","props","jsx","OpenConfirmDialog","title","message","confirmValue","confirmValueLabel","confirmLabel","cancelLabel","isDanger","isLoading","onConfirm","onClose","typed","setTyped","useState","canConfirm","handleConfirm","closeUnlessLoading","DialogModal","open","jsxs","Dialog","Flex","DialogTitle","DialogClose","DialogBody","InputField","Button","ButtonDanger"],"mappings":";;;;;;;AA6BO,SAASA,EAAcC,GAA2B;AACvD,SAAKA,EAAM,SAEJ,gBAAAC,EAACC,GAAA,EAAmB,GAAGF,EAAA,CAAO,IAFX;AAG5B;AAEA,SAASE,EAAkB;AAAA,EACzB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AACF,GAAuB;AACrB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE,GAE/BC,IAAaX,IAAeQ,MAAUR,IAAe;AAE3D,WAASY,IAAgB;AACvB,IAAKD,KACLL,EAAA;AAAA,EACF;AAEA,WAASO,IAAqB;AAC5B,IAAKR,KAAWE,EAAA;AAAA,EAClB;AAEA,SACE,gBAAAX,EAACkB,GAAA,EAAY,QAAM,IAAC,cAAc,CAACC,MAAS,CAACA,KAAQF,EAAA,GACnD,UAAA,gBAAAG,EAACC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAK,WAAU,OAAM,cAAa,iBAAgB,gBAAe,UAChE,UAAA;AAAA,MAAA,gBAAAtB,EAACuB,KAAa,UAAArB,EAAA,CAAM;AAAA,MACpB,gBAAAF,EAACwB,GAAA,EAAY,SAASP,EAAA,CAAoB;AAAA,IAAA,GAC5C;AAAA,sBACCQ,GAAA,EACE,UAAA;AAAA,MAAAtB,KACC,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQG,EAAA;AAAA,QAAQ;AAAA,MAAA;AAAA,MAG9CC,KACC,gBAAAJ;AAAA,QAAC0B;AAAA,QAAA;AAAA,UACC,OAAOrB;AAAA,UACP,OAAOO;AAAA,UACP,UAAUC;AAAA,UACV,WAAS;AAAA,UACT,YAAU;AAAA,UAGV,oBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,GAEJ;AAAA,IACA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,cAAa;AAAA,QACb,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAtB,EAAC2B,KAAO,SAAQ,WAAU,SAAShB,GAAS,YAAYF,GACrD,UAAAF,EAAA,CACH;AAAA,UACCC,IACC,gBAAAR;AAAA,YAAC4B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASZ;AAAA,cACT,YAAY,CAACD,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA,IAGvB,gBAAAN;AAAA,YAAC2B;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAASX;AAAA,cACT,YAAY,CAACD,KAAcN;AAAA,cAE1B,cAAY,QAAQH;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "7.4.4",
+  "version": "7.4.6",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [