se-design 1.0.76-dev1 → 1.0.76-dev2

package/dist/index13.js

@@ -1,6 +1,6 @@
-import i from "react";
+import s from "react";
 import "./index72.js";
-import { useModalA11y as g } from "./index201.js";
+import { useModalA11y as b } from "./index201.js";
 function o() {
   return o = Object.assign ? Object.assign.bind() : function(n) {
     for (var a = 1; a < arguments.length; a++) {
@@ -10,13 +10,13 @@ function o() {
     return n;
   }, o.apply(null, arguments);
 }
-const x = (n) => {
+const h = (n) => {
   const {
     renderModalContent: a,
     isOpen: e,
     width: t = "500px",
-    className: r = "",
-    contentClassName: s = "",
+    className: i = "",
+    contentClassName: r = "",
     automationId: l = "",
     onModalClick: d = () => {
     },
@@ -26,30 +26,28 @@ const x = (n) => {
   } = n, {
     containerRef: p,
     dialogProps: f
-  } = g({
+  } = b({
     isOpen: e,
     onDismiss: c,
     ariaLabel: m,
     ariaLabelledBy: u
   });
-  return /* @__PURE__ */ i.createElement("div", {
-    className: `se-design-modal fixed inset-0 flex items-center justify-center p-4 z-[2001] backdrop-brightness-50 backdrop-blur-sm ${e ? "visible" : "invisible pointer-events-none"} ${r}`,
+  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}`,
     "data-automation-id": l,
     onClick: d,
     "aria-hidden": e ? void 0 : !0
-  }, /* @__PURE__ */ i.createElement("div", o({
+  }, /* @__PURE__ */ s.createElement("div", o({
     ref: p
   }, f, {
-    className: `modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 ${s}`,
+    className: `modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-[48px] ${r}`,
     style: {
       width: t,
-      maxWidth: "100%",
-      maxHeight: "90vh",
-      overflowY: "auto"
+      maxWidth: "100vw"
     }
   }), a()));
 };
 export {
-  x as CustomModal
+  h 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-center justify-center p-4 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, maxWidth: '100%', maxHeight: '90vh', overflowY: 'auto' }}\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","maxHeight","overflowY"],"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,uHACTF,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,MAAOmB,UAAU;AAAA,MAAQC,WAAW;AAAA,MAAQC,WAAW;AAAA,IAAA;AAAA,EAAO,CAAE,GAExEvB,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';\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;"}

package/dist/index19.js

@@ -1,32 +1,32 @@
-import A, { forwardRef as le, useState as F, useRef as J, useEffect as H, useImperativeHandle as fe } from "react";
-import ue from "react-dom";
-import { getA11yNameAttributes as pe } from "./index78.js";
-import { useDismissOnFocusOut as de } from "./index77.js";
-import { getFirstFocusableElement as O, getLastFocusableElement as me, getFocusableElements as ve, FOCUSABLE_WITH_ROLES_SELECTOR as we } from "./index71.js";
+import B, { forwardRef as lt, useState as O, useRef as G, useEffect as I, useImperativeHandle as ft } from "react";
+import ut from "react-dom";
+import { getA11yNameAttributes as pt } from "./index78.js";
+import { useDismissOnFocusOut as dt } from "./index77.js";
+import { getFirstFocusableElement as A, getLastFocusableElement as mt, getFocusableElements as vt, FOCUSABLE_WITH_ROLES_SELECTOR as wt } from "./index71.js";
 import "./index72.js";
-function B() {
-  return B = Object.assign ? Object.assign.bind() : function(y) {
+function N() {
+  return N = Object.assign ? Object.assign.bind() : function(y) {
     for (var E = 1; E < arguments.length; E++) {
       var d = arguments[E];
       for (var b in d) ({}).hasOwnProperty.call(d, b) && (y[b] = d[b]);
     }
     return y;
-  }, B.apply(null, arguments);
+  }, N.apply(null, arguments);
 }
-const Pe = /* @__PURE__ */ le(({
+const Pt = /* @__PURE__ */ lt(({
   className: y = "",
   automationId: E = "",
   position: d = "bottom-center",
   popoverContentAutomationId: b = "",
-  contentWidth: I = "max",
-  renderPopoverContents: N,
-  renderPopoverSrcElement: Q,
-  onPopoverToggle: T,
-  isPopoverOpen: C,
+  contentWidth: H = "max",
+  renderPopoverContents: T,
+  renderPopoverSrcElement: J,
+  onPopoverToggle: C,
+  isPopoverOpen: z,
   disabled: k = !1,
   isWithPortal: f = !1,
-  ariaLabel: Y,
-  ariaLabelledBy: Z,
+  ariaLabel: Q,
+  ariaLabelledBy: Y,
   sourceRole: K = "button",
   popoverContentStyleProperty: _ = {
     zIndex: 1e3,
@@ -35,184 +35,187 @@ const Pe = /* @__PURE__ */ le(({
     backgroundColor: "var(--color-white)"
   },
   disableClickToggle: w = !1,
-  noBorder: W = !1,
+  noBorder: Z = !1,
   disableAutoClose: m = !1,
-  focusFirstOnOpen: ee = !1,
-  ...te
-}, oe) => {
-  const [i, u] = F(!1), [h, z] = F(d), [ne, U] = F(!1), l = J(null), a = J(null), re = pe({
-    ariaLabel: Y,
-    ariaLabelledBy: Z,
+  focusFirstOnOpen: tt = !1,
+  ...et
+}, ot) => {
+  const [i, u] = O(!1), [h, $] = O(d), [nt, U] = O(!1), l = G(null), a = G(null), rt = pt({
+    ariaLabel: Q,
+    ariaLabelledBy: Y,
     ariaDescribedBy: void 0
     // Popover doesn't support describedBy yet
   }), {
-    onBlurCapture: se
-  } = de({
+    onBlurCapture: st
+  } = dt({
     disabled: !i || m || f,
     onFocusOut: () => u(!1),
     closeOnEscape: !1
-  }), [$, P] = F({
+  }), [x, P] = O({
     top: 0,
-    left: 0
-  }), D = (e = "bottom-center") => {
+    left: 0,
+    srcWidth: 0
+  }), D = (t = "bottom-center") => {
     if (!l.current) return {
       top: 0,
-      left: 0
+      left: 0,
+      srcWidth: 0
     };
-    let o = e;
-    const t = l.current.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight;
+    let o = t;
+    const e = l.current.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight;
     let n = 0, r = 0;
     switch (o) {
       case "bottom-left":
-        n = t.bottom, r = t.left;
+        n = e.bottom, r = e.left;
         break;
       case "bottom-right":
-        n = t.bottom, r = t.right - t.width * 0.5;
+        n = e.bottom, r = e.right - e.width * 0.5;
         break;
       case "bottom-center":
-        n = t.bottom, r = t.left + t.width / 2;
+        n = e.bottom, r = e.left + e.width / 2;
         break;
       case "top-left":
-        n = t.top - t.height * 1.9, r = t.left;
+        n = e.top - e.height * 1.9, r = e.left;
         break;
       case "top-right":
-        n = t.top - t.height * 1.9, r = t.right - t.width * 0.5;
+        n = e.top - e.height * 1.9, r = e.right - e.width * 0.5;
         break;
       case "top-center":
-        n = t.top - t.height * 1.9, r = t.left + t.width / 2;
+        n = e.top - e.height * 1.9, r = e.left + e.width / 2;
         break;
       default:
-        n = t.bottom, r = t.left;
+        n = e.bottom, r = e.left;
         break;
     }
     const p = a.current?.getBoundingClientRect(), g = p?.width || 0, v = p?.height || 0;
     if ((o === "bottom-center" || o === "top-center") && (r = r - g / 2), r + g > s && (r = Math.max(0, s - g)), r < 0 && (r = 0), n + v > c) {
-      const R = t.top, ae = c - t.bottom;
-      R >= v || R > ae ? (n = t.top - v, n < 0 && (n = 0)) : n = Math.max(0, c - v);
+      const R = e.top, at = c - e.bottom;
+      R >= v || R > at ? (n = e.top - v, n < 0 && (n = 0)) : n = Math.max(0, c - v);
     }
-    return n < 0 && (n = t.bottom, n + v > c && (n = Math.max(0, c - v))), {
+    return n < 0 && (n = e.bottom, n + v > c && (n = Math.max(0, c - v))), {
       top: n,
-      left: r
+      left: r,
+      srcWidth: e.width
     };
   };
-  H(() => {
-    if (T && T(i), i && !f)
-      return m || document.body.addEventListener("click", M, !0), ie(), () => {
+  I(() => {
+    if (C && C(i), i && !f)
+      return m || document.body.addEventListener("click", M, !0), it(), () => {
         m || document.body.removeEventListener("click", M, !0);
       };
     if (i && f) {
-      m ? window.addEventListener("scroll", X) : (document.body.addEventListener("click", L, !0), window.addEventListener("scroll", L)), window.addEventListener("resize", V);
-      const e = setTimeout(() => {
-        const t = D(h);
-        x(), t && P(t);
+      m ? window.addEventListener("scroll", X) : (document.body.addEventListener("click", S, !0), window.addEventListener("scroll", S)), window.addEventListener("resize", V);
+      const t = setTimeout(() => {
+        const e = D(h);
+        L(), e && P(e);
       }, 0), o = setTimeout(() => {
-        const t = D(h);
-        t && P(t);
+        const e = D(h);
+        e && P(e);
       }, 10);
       return () => {
-        m ? window.removeEventListener("scroll", X) : (document.body.removeEventListener("click", L, !0), window.removeEventListener("scroll", L)), window.removeEventListener("resize", V), clearTimeout(e), clearTimeout(o);
+        m ? window.removeEventListener("scroll", X) : (document.body.removeEventListener("click", S, !0), window.removeEventListener("scroll", S)), window.removeEventListener("resize", V), clearTimeout(t), clearTimeout(o);
       };
     }
   }, [i, f, m]);
-  const x = () => {
+  const L = () => {
     if (!l.current) {
       U(!1);
       return;
     }
-    const e = l.current.getBoundingClientRect(), o = window.innerHeight, t = window.innerWidth, s = e.top < o && e.bottom > 0 && e.left < t && e.right > 0;
+    const t = l.current.getBoundingClientRect(), o = window.innerHeight, e = window.innerWidth, s = t.top < o && t.bottom > 0 && t.left < e && t.right > 0;
     U(s);
   };
-  H(() => {
-    u(C ?? !1);
-  }, [C]), H(() => {
+  I(() => {
+    u(z ?? !1);
+  }, [z]), I(() => {
     i && setTimeout(() => {
-      const e = O({
+      const t = A({
         container: a.current,
         includeRoles: !0
       });
-      e && (ee || document.activeElement === l.current) && e.focus();
+      t && (tt || document.activeElement === l.current) && t.focus();
     }, f ? 60 : 0);
   }, [i]);
-  const ie = () => {
+  const it = () => {
     if (!a.current) return;
-    const e = a.current.getBoundingClientRect(), o = window.innerHeight;
-    e?.bottom > o ? z(d.includes("left") ? "top-left" : d.includes("right") ? "top-right" : "top-center") : e?.top < 0 && z(d.includes("left") ? "bottom-left" : d.includes("right") ? "bottom-right" : "bottom-center");
-  }, M = (e) => {
+    const t = a.current.getBoundingClientRect(), o = window.innerHeight;
+    t?.bottom > o ? $(d.includes("left") ? "top-left" : d.includes("right") ? "top-right" : "top-center") : t?.top < 0 && $(d.includes("left") ? "bottom-left" : d.includes("right") ? "bottom-right" : "bottom-center");
+  }, M = (t) => {
     const o = l.current;
     if (!o) return;
-    const t = e.target, s = o.contains(t), c = a.current?.contains(t), r = t.closest?.(".se-design-popover-wrapper"), p = r && r !== o, g = a.current?.contains(r);
+    const e = t.target, s = o.contains(e), c = a.current?.contains(e), r = e.closest?.(".se-design-popover-wrapper"), p = r && r !== o, g = a.current?.contains(r);
     m || (!s && !c || p && !g) && u(!1);
-  }, L = (e) => {
-    const o = l.current, t = a.current;
+  }, S = (t) => {
+    const o = l.current, e = a.current;
     if (!o) return;
-    if (x(), e.type === "scroll" && i) {
+    if (L(), t.type === "scroll" && i) {
       const R = D(h);
       R && P(R);
     }
-    const s = e.target, c = o.contains(s), n = t?.contains(s), p = s.closest?.(".se-design-popover-wrapper"), g = p && p !== o, v = a.current?.contains(p);
+    const s = t.target, c = o.contains(s), n = e?.contains(s), p = s.closest?.(".se-design-popover-wrapper"), g = p && p !== o, v = a.current?.contains(p);
     m || (!c && !n || g && !v) && u(!1);
   }, V = () => {
     if (i && f && l.current) {
-      x();
-      const e = D(h);
-      e && P(e);
+      L();
+      const t = D(h);
+      t && P(t);
     }
   }, X = () => {
     if (i && f && l.current) {
-      x();
-      const e = D(h);
-      e && P(e);
+      L();
+      const t = D(h);
+      t && P(t);
     }
-  }, S = (e = !1) => {
+  }, F = (t = !1) => {
     const o = i;
-    u((t) => !t), !o && e && setTimeout(() => {
-      if (e === "last") {
-        const t = me({
+    u((e) => !e), !o && t && setTimeout(() => {
+      if (t === "last") {
+        const e = mt({
           container: a.current,
           includeRoles: !0
         });
-        t && t.focus();
+        e && e.focus();
       } else {
-        const t = O({
+        const e = A({
           container: a.current,
           includeRoles: !0
         });
-        t && t.focus();
+        e && e.focus();
       }
     }, 50);
-  }, j = (e, o) => {
+  }, j = (t, o) => {
     if (!o) return;
-    const t = document.activeElement;
-    if (t?.tagName === "INPUT" || t?.tagName === "TEXTAREA" || t?.tagName === "SELECT")
+    const e = document.activeElement;
+    if (e?.tagName === "INPUT" || e?.tagName === "TEXTAREA" || e?.tagName === "SELECT")
       return;
-    const s = Array.from(o.querySelectorAll(we)).filter((r) => {
+    const s = Array.from(o.querySelectorAll(wt)).filter((r) => {
       const p = window.getComputedStyle(r);
       return !r.hasAttribute("disabled") && r.getAttribute("aria-disabled") !== "true" && p.display !== "none" && p.visibility !== "hidden" && (r.tabIndex >= 0 || r.hasAttribute("role"));
     });
     if (s.length === 0) return;
     const c = s.findIndex((r) => r === document.activeElement);
     let n = -1;
-    e.key === "ArrowDown" ? (e.preventDefault(), e.stopPropagation(), n = c < s.length - 1 ? c + 1 : 0) : e.key === "ArrowUp" ? (e.preventDefault(), e.stopPropagation(), n = c > 0 ? c - 1 : s.length - 1) : e.key === "Home" ? (e.preventDefault(), e.stopPropagation(), n = 0) : e.key === "End" && (e.preventDefault(), e.stopPropagation(), n = s.length - 1), n >= 0 && s[n] ? s[n].focus() : c === -1 && s.length > 0 && s[0].focus();
-  }, q = (e) => {
-    if (e.key === "Escape")
-      e.preventDefault(), e.stopPropagation(), u(!1), l.current?.focus();
-    else if (e.key === "Tab") {
-      if (u(!1), e.shiftKey)
-        e.preventDefault(), l.current?.focus();
+    t.key === "ArrowDown" ? (t.preventDefault(), t.stopPropagation(), n = c < s.length - 1 ? c + 1 : 0) : t.key === "ArrowUp" ? (t.preventDefault(), t.stopPropagation(), n = c > 0 ? c - 1 : s.length - 1) : t.key === "Home" ? (t.preventDefault(), t.stopPropagation(), n = 0) : t.key === "End" && (t.preventDefault(), t.stopPropagation(), n = s.length - 1), n >= 0 && s[n] ? s[n].focus() : c === -1 && s.length > 0 && s[0].focus();
+  }, W = (t) => {
+    if (t.key === "Escape")
+      t.preventDefault(), t.stopPropagation(), u(!1), l.current?.focus();
+    else if (t.key === "Tab") {
+      if (u(!1), t.shiftKey)
+        t.preventDefault(), l.current?.focus();
       else if (f) {
-        e.preventDefault();
-        const o = l.current, t = ve({
+        t.preventDefault();
+        const o = l.current, e = vt({
           container: document.body,
           filterHidden: !0
-        }), s = o ? t.indexOf(o) : -1, c = t[s + 1];
+        }), s = o ? e.indexOf(o) : -1, c = e[s + 1];
         c ? c.focus() : o?.focus();
       }
-    } else e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" ? j(e, a.current) : (e.key === "Enter" || e.key === " ") && e.stopPropagation();
+    } else t.key === "ArrowDown" || t.key === "ArrowUp" || t.key === "Home" || t.key === "End" ? j(t, a.current) : (t.key === "Enter" || t.key === " ") && t.stopPropagation();
   };
-  fe(oe, () => ({
-    togglePopover: S
+  ft(ot, () => ({
+    togglePopover: F
   }), []);
-  const ce = {
+  const ct = {
     "bottom-left": {
       left: "0",
       top: "100%"
@@ -239,83 +242,86 @@ const Pe = /* @__PURE__ */ le(({
       transform: "translateX(-50%)",
       bottom: "100%"
     }
-  }, G = W ? "" : "shadow-md border rounded-md";
-  return /* @__PURE__ */ A.createElement("div", B({
+  }, q = Z ? "" : "shadow-md border rounded-md";
+  return /* @__PURE__ */ B.createElement("div", N({
     className: "se-design-popover-wrapper cursor-pointer relative focus-outline rounded-md" + (y.length > 0 ? ` ${y}` : "") + (i ? " open" : "") + (k ? " opacity-50 cursor-not-allowed pointer-events-none" : ""),
     ref: l,
-    onClick: (e) => {
-      k || w || (e.stopPropagation(), S());
+    onClick: (t) => {
+      k || w || (t.stopPropagation(), F());
     },
-    onKeyDown: (e) => {
+    onKeyDown: (t) => {
       if (!(k || w))
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault(), e.stopPropagation();
+        if (t.key === "Enter" || t.key === " ") {
+          t.preventDefault(), t.stopPropagation();
           const o = i;
-          S(), o || setTimeout(() => {
-            const t = O({
+          F(), o || setTimeout(() => {
+            const e = A({
               container: a.current,
               includeRoles: !0
             });
-            t && t.focus();
+            e && e.focus();
           }, f ? 60 : 0);
-        } else if (e.key === "Escape" && i)
-          e.preventDefault(), e.stopPropagation(), u(!1);
-        else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && i) {
+        } else if (t.key === "Escape" && i)
+          t.preventDefault(), t.stopPropagation(), u(!1);
+        else if ((t.key === "ArrowDown" || t.key === "ArrowUp") && i) {
           const o = a.current;
-          o && j(e, o);
-        } else e.key === "ArrowDown" && !i && (e.preventDefault(), e.stopPropagation(), u(!0), setTimeout(() => {
-          const o = O({
+          o && j(t, o);
+        } else t.key === "ArrowDown" && !i && (t.preventDefault(), t.stopPropagation(), u(!0), setTimeout(() => {
+          const o = A({
             container: a.current,
             includeRoles: !0
           });
           o && o.focus();
         }, 0));
     },
-    onBlurCapture: se,
-    onBlur: (e) => {
+    onBlurCapture: st,
+    onBlur: (t) => {
       if (!i || m || !f) return;
-      const o = e.relatedTarget, t = !!(o && l.current?.contains(o)), s = !!(o && a.current?.contains(o));
-      !t && !s && u(!1);
+      const o = t.relatedTarget, e = !!(o && l.current?.contains(o)), s = !!(o && a.current?.contains(o));
+      !e && !s && u(!1);
     },
     role: w ? "none" : K,
     "aria-expanded": w ? void 0 : i ? "true" : "false",
     "aria-haspopup": w ? void 0 : K === "combobox" ? "listbox" : "true",
     tabIndex: k || w ? -1 : 0,
     "aria-disabled": w ? void 0 : k ? "true" : "false"
-  }, re, {
+  }, rt, {
     "data-automation-id": E
-  }, te), Q({
+  }, et), J({
     displayPopover: i,
-    togglePopover: S
-  }), i && !f && /* @__PURE__ */ A.createElement("div", {
-    className: `popover-content absolute ${G} z-[1000] ${I == "full" ? "w-full" : "w-max"}`,
+    togglePopover: F
+  }), i && !f && /* @__PURE__ */ B.createElement("div", {
+    className: `popover-content absolute ${q} z-[1000] ${H == "full" ? "w-full" : "w-max"}`,
     style: {
       ..._,
-      ...ce[h]
+      ...ct[h]
     },
-    onClick: (e) => e.stopPropagation(),
-    onKeyDown: q,
+    onClick: (t) => t.stopPropagation(),
+    onKeyDown: W,
     ref: a,
     "data-automation-id": b
-  }, N({
+  }, T({
     closePopoverCb: () => u(!1)
-  })), f && i && ne && /* @__PURE__ */ ue.createPortal(/* @__PURE__ */ A.createElement("div", {
-    className: `popover-content-with-portal ${G} ${I == "full" ? "w-full" : "w-max"}`,
+  })), f && i && nt && /* @__PURE__ */ ut.createPortal(/* @__PURE__ */ B.createElement("div", {
+    className: `popover-content-with-portal z-[2002] ${q} ${H == "full" ? "" : "w-max"}`,
     style: {
       position: "fixed",
-      top: $.top,
-      left: $.left,
+      top: x.top,
+      left: x.left,
+      ...H === "full" && x.srcWidth ? {
+        width: `${x.srcWidth}px`
+      } : {},
       ..._
     },
-    onClick: (e) => e.stopPropagation(),
-    onKeyDown: q,
+    onClick: (t) => t.stopPropagation(),
+    onKeyDown: W,
     ref: a,
     "data-automation-id": b
-  }, N({
+  }, T({
     closePopoverCb: () => u(!1)
   })), document.body));
 });
 export {
-  Pe as Popover
+  Pt as Popover
 };
 //# sourceMappingURL=index19.js.map