se-design 1.0.77 → 1.0.78

package/dist/index12.js

@@ -1,28 +1,29 @@
 import e from "react";
 import { Button as d } from "./index4.js";
-import { Icon as w } from "./index6.js";
+import { Icon as N } from "./index6.js";
 import "./index72.js";
-import { useModalA11y as C } from "./index201.js";
-function n() {
-  return n = Object.assign ? Object.assign.bind() : function(l) {
+import { useModalA11y as w } from "./index201.js";
+/* empty css         */
+function o() {
+  return o = Object.assign ? Object.assign.bind() : function(l) {
     for (var t = 1; t < arguments.length; t++) {
       var a = arguments[t];
-      for (var o in a) ({}).hasOwnProperty.call(a, o) && (l[o] = a[o]);
+      for (var n in a) ({}).hasOwnProperty.call(a, n) && (l[n] = a[n]);
     }
     return l;
-  }, n.apply(null, arguments);
+  }, o.apply(null, arguments);
 }
-const L = (l) => {
+const O = (l) => {
   const {
     title: t,
     ariaLabel: a,
-    ariaLabelledBy: o,
-    content: r = "",
-    showCloseIcon: p = !1,
+    ariaLabelledBy: n,
+    content: s = "",
+    showCloseIcon: u = !1,
     successButtonProps: c,
     cancelButtonProps: m,
-    cancelAction: s,
-    successAction: u,
+    cancelAction: r,
+    successAction: p,
     isOpen: i,
     width: f = "500px",
     height: g = "auto",
@@ -32,44 +33,45 @@ const L = (l) => {
     containerRef: x,
     titleId: h,
     dialogProps: y
-  } = C({
+  } = w({
     isOpen: i,
-    onDismiss: s,
+    onDismiss: r,
     ariaLabel: a ?? t,
-    ariaLabelledBy: o
-  }), E = typeof r == "string";
+    ariaLabelledBy: n
+  }), E = typeof s == "string";
   return /* @__PURE__ */ e.createElement("div", {
     className: `${v} se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${i ? "visible" : "invisible pointer-events-none"}`,
     "aria-hidden": i ? void 0 : !0
-  }, /* @__PURE__ */ e.createElement("div", n({
+  }, /* @__PURE__ */ e.createElement("div", o({
     ref: x
   }, y, {
-    className: "modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded-xl shadow-lg p-7 mt-[48px] relative",
+    className: "modal-content relative flex flex-col gap-3 bg-[var(--color-white)] rounded-xl shadow-lg p-7",
     style: {
       width: f,
-      height: g,
-      maxWidth: "100vw"
+      height: g
     },
     "data-automation-id": b
-  }), t && /* @__PURE__ */ e.createElement("h2", {
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: "flex items-start justify-between gap-3"
+  }, t && /* @__PURE__ */ e.createElement("h2", {
     id: h,
     className: "text-lg font-semibold text-[var(--color-gray-900)]"
-  }, t), E ? /* @__PURE__ */ e.createElement("p", {
-    className: "leading-normal text-[var(--color-gray-700)]"
-  }, r) : r, /* @__PURE__ */ e.createElement("div", {
-    className: "flex flex-wrap items-center justify-end gap-4 pt-3"
-  }, m?.label && /* @__PURE__ */ e.createElement(d, n({}, m, {
-    onClick: s
-  })), c?.label && /* @__PURE__ */ e.createElement(d, n({}, c, {
-    onClick: u
-  }))), p && /* @__PURE__ */ e.createElement(w, {
+  }, t), u && /* @__PURE__ */ e.createElement(N, {
     name: "close",
-    onClick: s,
+    onClick: r,
     ariaLabel: "Close dialog",
-    className: "absolute top-8 right-8 cursor-pointer"
-  })));
+    className: "cursor-pointer shrink-0 ml-auto"
+  })), E ? /* @__PURE__ */ e.createElement("p", {
+    className: "leading-normal text-[var(--color-gray-700)]"
+  }, s) : s, /* @__PURE__ */ e.createElement("div", {
+    className: "flex flex-wrap items-center justify-end gap-4 pt-3"
+  }, m?.label && /* @__PURE__ */ e.createElement(d, o({}, m, {
+    onClick: r
+  })), c?.label && /* @__PURE__ */ e.createElement(d, o({}, c, {
+    onClick: p
+  })))));
 };
 export {
-  L as Modal
+  O as Modal
 };
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../src/components/Modal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Button } from 'src/components/Button';\nimport { ButtonProps } from 'src/components/Button';\nimport { Icon } from '../Icon';\nimport { useModalA11y } from 'src/utils/a11y';\n\nexport interface ModalProps {\n  title?: string;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  content: string | React.ReactNode;\n  successButtonProps?: ButtonProps;\n  cancelButtonProps?: ButtonProps;\n  cancelAction?: () => void;\n  successAction?: () => void;\n  showCloseIcon?: boolean;\n  isOpen: boolean;\n  width?: string;\n  height?: string;\n  automationId?: string;\n  customModalClassName?: string;\n}\n\nexport const Modal: FC<ModalProps> = (props) => {\n  const {\n    title,\n    ariaLabel,\n    ariaLabelledBy,\n    content = '',\n    showCloseIcon = false,\n    successButtonProps,\n    cancelButtonProps,\n    cancelAction,\n    successAction,\n    isOpen,\n    width = '500px',\n    height = 'auto',\n    automationId = '',\n    customModalClassName = ''\n  } = props;\n\n  const { containerRef, titleId, dialogProps } = useModalA11y({\n    isOpen,\n    onDismiss: cancelAction,\n    ariaLabel: ariaLabel ?? title,\n    ariaLabelledBy,\n  });\n\n  const isContentString = typeof content === 'string';\n\n  return (\n    <div\n      className={`${customModalClassName} se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${isOpen ? 'visible' : 'invisible pointer-events-none'\n        }`}\n      aria-hidden={isOpen ? undefined : true}\n    >\n      <div\n        ref={containerRef}\n        {...dialogProps}\n        className=\"modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded-xl shadow-lg p-7 mt-[48px] relative\"\n        style={{ width, height, maxWidth: '100vw' }}\n        data-automation-id={automationId}\n      >\n        {title && <h2 id={titleId} className=\"text-lg font-semibold text-[var(--color-gray-900)]\">{title}</h2>}\n        {isContentString ? <p className=\"leading-normal text-[var(--color-gray-700)]\">{content}</p> : content}\n        <div className=\"flex flex-wrap items-center justify-end gap-4 pt-3\">\n          {cancelButtonProps?.label && <Button {...cancelButtonProps} onClick={cancelAction} />}\n          {successButtonProps?.label && <Button {...successButtonProps} onClick={successAction} />}\n        </div>\n        {showCloseIcon && (\n          <Icon name=\"close\" onClick={cancelAction} ariaLabel=\"Close dialog\" className=\"absolute top-8 right-8 cursor-pointer\" />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["Modal","props","title","ariaLabel","ariaLabelledBy","content","showCloseIcon","successButtonProps","cancelButtonProps","cancelAction","successAction","isOpen","width","height","automationId","customModalClassName","containerRef","titleId","dialogProps","useModalA11y","onDismiss","isContentString","React","createElement","className","undefined","_extends","ref","style","maxWidth","id","label","Button","onClick","Icon","name"],"mappings":";;;;;;;;;;;;;;AAuBO,MAAMA,IAAyBC,CAAAA,MAAU;AAC9C,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,SAAAA,IAAU;AAAA,IACVC,eAAAA,IAAgB;AAAA,IAChBC,oBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,OAAAA,IAAQ;AAAA,IACRC,QAAAA,IAAS;AAAA,IACTC,cAAAA,IAAe;AAAA,IACfC,sBAAAA,IAAuB;AAAA,EAAA,IACrBd,GAEE;AAAA,IAAEe,cAAAA;AAAAA,IAAcC,SAAAA;AAAAA,IAASC,aAAAA;AAAAA,EAAAA,IAAgBC,EAAa;AAAA,IAC1DR,QAAAA;AAAAA,IACAS,WAAWX;AAAAA,IACXN,WAAWA,KAAaD;AAAAA,IACxBE,gBAAAA;AAAAA,EAAAA,CACD,GAEKiB,IAAkB,OAAOhB,KAAY;AAE3C,SACEiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAGT,CAAoB,mHAAmHJ,IAAS,YAAY,+BAA+B;AAAA,IAEzM,eAAaA,IAASc,SAAY;AAAA,EAAA,GAElCH,gBAAAA,EAAAC,cAAA,OAAAG,EAAA;AAAA,IACEC,KAAKX;AAAAA,EAAAA,GACDE,GAAW;AAAA,IACfM,WAAU;AAAA,IACVI,OAAO;AAAA,MAAEhB,OAAAA;AAAAA,MAAOC,QAAAA;AAAAA,MAAQgB,UAAU;AAAA,IAAA;AAAA,IAClC,sBAAoBf;AAAAA,EAAAA,CAAa,GAEhCZ,KAASoB,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIO,IAAIb;AAAAA,IAASO,WAAU;AAAA,EAAA,GAAsDtB,CAAU,GACpGmB,IAAkBC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGC,WAAU;AAAA,EAAA,GAA+CnB,CAAW,IAAIA,GAC9FiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZhB,GAAmBuB,SAAST,gBAAAA,EAAAC,cAACS,GAAMN,EAAA,CAAA,GAAKlB,GAAiB;AAAA,IAAEyB,SAASxB;AAAAA,EAAAA,CAAa,CAAE,GACnFF,GAAoBwB,SAAST,gBAAAA,EAAAC,cAACS,GAAMN,MAAKnB,GAAkB;AAAA,IAAE0B,SAASvB;AAAAA,EAAAA,CAAc,CAAE,CACpF,GACJJ,KACCgB,gBAAAA,EAAAC,cAACW,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQF,SAASxB;AAAAA,IAAcN,WAAU;AAAA,IAAeqB,WAAU;AAAA,EAAA,CAAyC,CAErH,CACF;AAET;"}
+{"version":3,"file":"index12.js","sources":["../src/components/Modal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Button } from 'src/components/Button';\nimport { ButtonProps } from 'src/components/Button';\nimport { Icon } from '../Icon';\nimport { useModalA11y } from 'src/utils/a11y';\nimport './style.scss';\n\nexport interface ModalProps {\n  title?: string;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  content: string | React.ReactNode;\n  successButtonProps?: ButtonProps;\n  cancelButtonProps?: ButtonProps;\n  cancelAction?: () => void;\n  successAction?: () => void;\n  showCloseIcon?: boolean;\n  isOpen: boolean;\n  width?: string;\n  height?: string;\n  automationId?: string;\n  customModalClassName?: string;\n}\n\nexport const Modal: FC<ModalProps> = (props) => {\n  const {\n    title,\n    ariaLabel,\n    ariaLabelledBy,\n    content = '',\n    showCloseIcon = false,\n    successButtonProps,\n    cancelButtonProps,\n    cancelAction,\n    successAction,\n    isOpen,\n    width = '500px',\n    height = 'auto',\n    automationId = '',\n    customModalClassName = ''\n  } = props;\n\n  const { containerRef, titleId, dialogProps } = useModalA11y({\n    isOpen,\n    onDismiss: cancelAction,\n    ariaLabel: ariaLabel ?? title,\n    ariaLabelledBy,\n  });\n\n  const isContentString = typeof content === 'string';\n\n  return (\n    <div\n      className={`${customModalClassName} se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${isOpen ? 'visible' : 'invisible pointer-events-none'\n        }`}\n      aria-hidden={isOpen ? undefined : true}\n    >\n      <div\n        ref={containerRef}\n        {...dialogProps}\n        className=\"modal-content relative flex flex-col gap-3 bg-[var(--color-white)] rounded-xl shadow-lg p-7\"\n        style={{ width, height }}\n        data-automation-id={automationId}\n      >\n        <div className=\"flex items-start justify-between gap-3\">\n          {title && <h2 id={titleId} className=\"text-lg font-semibold text-[var(--color-gray-900)]\">{title}</h2>}\n          {showCloseIcon && (\n            <Icon name=\"close\" onClick={cancelAction} ariaLabel=\"Close dialog\" className=\"cursor-pointer shrink-0 ml-auto\" />\n          )}\n        </div>\n        {isContentString ? <p className=\"leading-normal text-[var(--color-gray-700)]\">{content}</p> : content}\n        <div className=\"flex flex-wrap items-center justify-end gap-4 pt-3\">\n          {cancelButtonProps?.label && <Button {...cancelButtonProps} onClick={cancelAction} />}\n          {successButtonProps?.label && <Button {...successButtonProps} onClick={successAction} />}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Modal","props","title","ariaLabel","ariaLabelledBy","content","showCloseIcon","successButtonProps","cancelButtonProps","cancelAction","successAction","isOpen","width","height","automationId","customModalClassName","containerRef","titleId","dialogProps","useModalA11y","onDismiss","isContentString","React","createElement","className","undefined","_extends","ref","style","id","Icon","name","onClick","label","Button"],"mappings":";;;;;;;;;;;;;;;AAwBO,MAAMA,IAAyBC,CAAAA,MAAU;AAC9C,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,SAAAA,IAAU;AAAA,IACVC,eAAAA,IAAgB;AAAA,IAChBC,oBAAAA;AAAAA,IACAC,mBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,OAAAA,IAAQ;AAAA,IACRC,QAAAA,IAAS;AAAA,IACTC,cAAAA,IAAe;AAAA,IACfC,sBAAAA,IAAuB;AAAA,EAAA,IACrBd,GAEE;AAAA,IAAEe,cAAAA;AAAAA,IAAcC,SAAAA;AAAAA,IAASC,aAAAA;AAAAA,EAAAA,IAAgBC,EAAa;AAAA,IAC1DR,QAAAA;AAAAA,IACAS,WAAWX;AAAAA,IACXN,WAAWA,KAAaD;AAAAA,IACxBE,gBAAAA;AAAAA,EAAAA,CACD,GAEKiB,IAAkB,OAAOhB,KAAY;AAE3C,SACEiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAGT,CAAoB,mHAAmHJ,IAAS,YAAY,+BAA+B;AAAA,IAEzM,eAAaA,IAASc,SAAY;AAAA,EAAA,GAElCH,gBAAAA,EAAAC,cAAA,OAAAG,EAAA;AAAA,IACEC,KAAKX;AAAAA,EAAAA,GACDE,GAAW;AAAA,IACfM,WAAU;AAAA,IACVI,OAAO;AAAA,MAAEhB,OAAAA;AAAAA,MAAOC,QAAAA;AAAAA,IAAAA;AAAAA,IAChB,sBAAoBC;AAAAA,EAAAA,CAAa,GAEjCQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZtB,KAASoB,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIM,IAAIZ;AAAAA,IAASO,WAAU;AAAA,EAAA,GAAsDtB,CAAU,GACpGI,KACCgB,gBAAAA,EAAAC,cAACO,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQC,SAASvB;AAAAA,IAAcN,WAAU;AAAA,IAAeqB,WAAU;AAAA,EAAA,CAAmC,CAE/G,GACJH,IAAkBC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGC,WAAU;AAAA,EAAA,GAA+CnB,CAAW,IAAIA,GAC9FiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZhB,GAAmByB,SAASX,gBAAAA,EAAAC,cAACW,GAAMR,EAAA,CAAA,GAAKlB,GAAiB;AAAA,IAAEwB,SAASvB;AAAAA,EAAAA,CAAa,CAAE,GACnFF,GAAoB0B,SAASX,gBAAAA,EAAAC,cAACW,GAAMR,MAAKnB,GAAkB;AAAA,IAAEyB,SAAStB;AAAAA,EAAAA,CAAc,CAAE,CACpF,CACF,CACF;AAET;"}

package/dist/index13.js

@@ -1,6 +1,7 @@
-import s from "react";
+import r from "react";
 import "./index72.js";
 import { useModalA11y as b } from "./index201.js";
+/* empty css         */
 function o() {
   return o = Object.assign ? Object.assign.bind() : function(n) {
     for (var a = 1; a < arguments.length; a++) {
@@ -10,13 +11,13 @@ function o() {
     return n;
   }, o.apply(null, arguments);
 }
-const h = (n) => {
+const y = (n) => {
   const {
     renderModalContent: a,
     isOpen: e,
     width: t = "500px",
-    className: i = "",
-    contentClassName: r = "",
+    className: s = "",
+    contentClassName: i = "",
     automationId: l = "",
     onModalClick: d = () => {
     },
@@ -32,22 +33,21 @@ const h = (n) => {
     ariaLabel: m,
     ariaLabelledBy: u
   });
-  return /* @__PURE__ */ s.createElement("div", {
-    className: `se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${e ? "visible" : "invisible pointer-events-none"} ${i}`,
+  return /* @__PURE__ */ r.createElement("div", {
+    className: `se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${e ? "visible" : "invisible pointer-events-none"} ${s}`,
     "data-automation-id": l,
     onClick: d,
     "aria-hidden": e ? void 0 : !0
-  }, /* @__PURE__ */ s.createElement("div", o({
+  }, /* @__PURE__ */ r.createElement("div", o({
     ref: p
   }, f, {
-    className: `modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-[48px] ${r}`,
+    className: `modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 ${i}`,
     style: {
-      width: t,
-      maxWidth: "100vw"
+      width: t
     }
   }), a()));
 };
 export {
-  h as CustomModal
+  y as CustomModal
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../src/components/CustomModal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { useModalA11y } from 'src/utils/a11y';\n\nexport interface CustomModalProps {\n  onSubmit?: () => void;\n  onClose?: () => void;\n  onModalClick?: () => void;\n  renderModalContent: () => React.ReactNode;\n  isOpen: boolean;\n  width?: string;\n  className?: string;\n  contentClassName?: string;\n  automationId?: string;\n  /**\n   * ID of a visible heading element rendered inside `renderModalContent`.\n   * Add `id={ariaLabelledBy}` to that element to complete the association.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * aria-label for modals without a visible title heading.\n   * Ignored when `ariaLabelledBy` is provided.\n   */\n  ariaLabel?: string;\n}\n\n/**\n * Modal container with built-in focus trap, Escape dismissal, and dialog semantics.\n *\n * Labelling (pick one):\n * - `ariaLabelledBy` — ID of a heading rendered inside `renderModalContent`\n * - `ariaLabel` — for modals with no visible title\n *\n * Escape dismissal requires `onClose` to be passed.\n */\nexport const CustomModal: FC<CustomModalProps> = (props) => {\n  const {\n    renderModalContent,\n    isOpen,\n    width = '500px',\n    className = '',\n    contentClassName = '',\n    automationId = '',\n    onModalClick = () => {},\n    onClose,\n    ariaLabel,\n    ariaLabelledBy,\n  } = props;\n\n  const { containerRef, dialogProps } = useModalA11y({\n    isOpen,\n    onDismiss: onClose,\n    ariaLabel,\n    ariaLabelledBy,\n  });\n\n  return (\n    <div\n      className={`se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${\n        isOpen ? 'visible' : 'invisible pointer-events-none'\n      } ${className}`}\n      data-automation-id={automationId}\n      onClick={onModalClick}\n      aria-hidden={isOpen ? undefined : true}\n    >\n      <div\n        ref={containerRef}\n        {...dialogProps}\n        className={`modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-[48px] ${contentClassName}`}\n        style={{ width, maxWidth: '100vw' }}\n      >\n        {renderModalContent()}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomModal","props","renderModalContent","isOpen","width","className","contentClassName","automationId","onModalClick","onClose","ariaLabel","ariaLabelledBy","containerRef","dialogProps","useModalA11y","onDismiss","React","createElement","onClick","undefined","_extends","ref","style","maxWidth"],"mappings":";;;;;;;;;;;;AAkCO,MAAMA,IAAqCC,CAAAA,MAAU;AAC1D,QAAM;AAAA,IACJC,oBAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,OAAAA,IAAQ;AAAA,IACRC,WAAAA,IAAY;AAAA,IACZC,kBAAAA,IAAmB;AAAA,IACnBC,cAAAA,IAAe;AAAA,IACfC,cAAAA,IAAeA,MAAM;AAAA,IAAC;AAAA,IACtBC,SAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,IACEV,GAEE;AAAA,IAAEW,cAAAA;AAAAA,IAAcC,aAAAA;AAAAA,EAAAA,IAAgBC,EAAa;AAAA,IACjDX,QAAAA;AAAAA,IACAY,WAAWN;AAAAA,IACXC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,CACD;AAED,SACEK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEZ,WAAW,kHACTF,IAAS,YAAY,+BAA+B,IAClDE,CAAS;AAAA,IACb,sBAAoBE;AAAAA,IACpBW,SAASV;AAAAA,IACT,eAAaL,IAASgB,SAAY;AAAA,EAAA,GAElCH,gBAAAA,EAAAC,cAAA,OAAAG,EAAA;AAAA,IACEC,KAAKT;AAAAA,EAAAA,GACDC,GAAW;AAAA,IACfR,WAAW,6FAA6FC,CAAgB;AAAA,IACxHgB,OAAO;AAAA,MAAElB,OAAAA;AAAAA,MAAOmB,UAAU;AAAA,IAAA;AAAA,EAAQ,CAAE,GAEnCrB,EAAAA,CACE,CACF;AAET;"}
+{"version":3,"file":"index13.js","sources":["../src/components/CustomModal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { useModalA11y } from 'src/utils/a11y';\nimport './style.scss';\n\nexport interface CustomModalProps {\n  onSubmit?: () => void;\n  onClose?: () => void;\n  onModalClick?: () => void;\n  renderModalContent: () => React.ReactNode;\n  isOpen: boolean;\n  width?: string;\n  className?: string;\n  contentClassName?: string;\n  automationId?: string;\n  /**\n   * ID of a visible heading element rendered inside `renderModalContent`.\n   * Add `id={ariaLabelledBy}` to that element to complete the association.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * aria-label for modals without a visible title heading.\n   * Ignored when `ariaLabelledBy` is provided.\n   */\n  ariaLabel?: string;\n}\n\n/**\n * Modal container with built-in focus trap, Escape dismissal, and dialog semantics.\n *\n * Labelling (pick one):\n * - `ariaLabelledBy` — ID of a heading rendered inside `renderModalContent`\n * - `ariaLabel` — for modals with no visible title\n *\n * Escape dismissal requires `onClose` to be passed.\n *\n * ---\n * ## Header + close button pattern (zoom-safe)\n *\n * If your modal has a title and a close button, use a flex row — NOT absolute positioning.\n * Absolute positioning causes the close icon to overlap the title at 200%/400% zoom.\n *\n * ✅ Correct:\n * ```tsx\n * renderModalContent={() => (\n *   <>\n *     <div className=\"modal-header\">   // display:flex; align-items:flex-start; justify-content:space-between; gap:12px\n *       <h2 className=\"modal-title\">Title</h2>   // flex:1 so it wraps without touching the icon\n *       <Icon name=\"close\" onClick={onClose} ariaLabel=\"Close\" className=\"shrink-0\" />\n *     </div>\n *     <div className=\"modal-body\">...content...</div>\n *   </>\n * )}\n * ```\n *\n * ❌ Avoid:\n * ```tsx\n * renderModalContent={() => (\n *   <div style={{ position: 'relative' }}>\n *     <h2>Title</h2>\n *     <Icon name=\"close\" style={{ position: 'absolute', top: 8, right: 8 }} />\n *   </div>\n * )}\n * ```\n */\nexport const CustomModal: FC<CustomModalProps> = (props) => {\n  const {\n    renderModalContent,\n    isOpen,\n    width = '500px',\n    className = '',\n    contentClassName = '',\n    automationId = '',\n    onModalClick = () => {},\n    onClose,\n    ariaLabel,\n    ariaLabelledBy,\n  } = props;\n\n  const { containerRef, dialogProps } = useModalA11y({\n    isOpen,\n    onDismiss: onClose,\n    ariaLabel,\n    ariaLabelledBy,\n  });\n\n  return (\n    <div\n      className={`se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${\n        isOpen ? 'visible' : 'invisible pointer-events-none'\n      } ${className}`}\n      data-automation-id={automationId}\n      onClick={onModalClick}\n      aria-hidden={isOpen ? undefined : true}\n    >\n      <div\n        ref={containerRef}\n        {...dialogProps}\n        className={`modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 ${contentClassName}`}\n        style={{ width }}\n      >\n        {renderModalContent()}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomModal","props","renderModalContent","isOpen","width","className","contentClassName","automationId","onModalClick","onClose","ariaLabel","ariaLabelledBy","containerRef","dialogProps","useModalA11y","onDismiss","React","createElement","onClick","undefined","_extends","ref","style"],"mappings":";;;;;;;;;;;;;AAgEO,MAAMA,IAAqCC,CAAAA,MAAU;AAC1D,QAAM;AAAA,IACJC,oBAAAA;AAAAA,IACAC,QAAAA;AAAAA,IACAC,OAAAA,IAAQ;AAAA,IACRC,WAAAA,IAAY;AAAA,IACZC,kBAAAA,IAAmB;AAAA,IACnBC,cAAAA,IAAe;AAAA,IACfC,cAAAA,IAAeA,MAAM;AAAA,IAAC;AAAA,IACtBC,SAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,IACEV,GAEE;AAAA,IAAEW,cAAAA;AAAAA,IAAcC,aAAAA;AAAAA,EAAAA,IAAgBC,EAAa;AAAA,IACjDX,QAAAA;AAAAA,IACAY,WAAWN;AAAAA,IACXC,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,EAAAA,CACD;AAED,SACEK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEZ,WAAW,kHACTF,IAAS,YAAY,+BAA+B,IAClDE,CAAS;AAAA,IACb,sBAAoBE;AAAAA,IACpBW,SAASV;AAAAA,IACT,eAAaL,IAASgB,SAAY;AAAA,EAAA,GAElCH,gBAAAA,EAAAC,cAAA,OAAAG,EAAA;AAAA,IACEC,KAAKT;AAAAA,EAAAA,GACDC,GAAW;AAAA,IACfR,WAAW,mFAAmFC,CAAgB;AAAA,IAC9GgB,OAAO;AAAA,MAAElB,OAAAA;AAAAA,IAAAA;AAAAA,EAAM,CAAE,GAEhBF,EAAAA,CACE,CACF;AAET;"}