se-design 1.0.73-dev2 → 1.0.73-dev6

package/dist/components/CustomModal/index.d.ts

@@ -10,4 +10,20 @@ export interface CustomModalProps {
     contentClassName?: string;
     automationId?: string;
 }
+/**
+ * A11y note: CustomModal handles focus trap and Escape dismissal automatically.
+ * Consumers are responsible for adding dialog semantics to the content rendered
+ * via `renderModalContent`:
+ *
+ *   <div
+ *     role="dialog"
+ *     aria-modal="true"
+ *     aria-labelledby={titleId}   // or aria-label if no visible heading
+ *   >
+ *     <h2 id={titleId}>...</h2>
+ *     ...
+ *   </div>
+ *
+ * See Paywall/index.tsx for a reference implementation.
+ */
 export declare const CustomModal: FC<CustomModalProps>;

package/dist/components/MenuList/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { default as React } from 'react';
 import { MenuItemProps } from '../MenuItem';
 export type MenuListProps = {
     items: MenuItemProps[];
@@ -7,5 +7,6 @@ export type MenuListProps = {
     searchPlaceholder?: string;
     searchBy?: string;
     searchResultEmptyMessage?: string;
+    className?: string;
 };
-export declare const MenuList: FC<MenuListProps>;
+export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/index.d.ts

@@ -2,6 +2,7 @@ import { default as React, FC } from 'react';
 import { ButtonProps } from '../Button';
 export interface ModalProps {
     title?: string;
+    ariaLabel?: string;
     content: string | React.ReactNode;
     successButtonProps?: ButtonProps;
     cancelButtonProps?: ButtonProps;

package/dist/components/Popover/index.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ReactNode } from 'react';
 export interface PopoverHandle {
-    togglePopover: (focusFirst?: boolean) => void;
+    togglePopover: (focusFirst?: boolean | 'last') => void;
 }
 export interface PopoverProps {
     className?: string;
@@ -11,7 +11,7 @@ export interface PopoverProps {
     }) => ReactNode;
     renderPopoverSrcElement: (props: {
         displayPopover: boolean;
-        togglePopover: (focusFirst?: boolean) => void;
+        togglePopover: (focusFirst?: boolean | 'last') => void;
     }) => ReactNode;
     position?: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
     onPopoverToggle?: (displayPopover: boolean) => void;

package/dist/index11.js

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

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.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';\n\nexport interface ModalProps {\n  title?: 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    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 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    >\n      <div\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 && <div className=\"text-lg font-semibold color-[var(--color-gray-900)]\">{title}</div>}\n        {isContentString ? <p className=\"leading-normal color-[var(--color-gray-700)]\">{content}</p> : content}\n        <div className=\"flex 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} className=\"absolute top-8 right-8 cursor-pointer\" />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["Modal","props","title","content","showCloseIcon","successButtonProps","cancelButtonProps","cancelAction","successAction","isOpen","width","height","automationId","customModalClassName","isContentString","React","createElement","className","style","maxWidth","label","Button","_extends","onClick","Icon","name"],"mappings":";;;;;;;;;;;;AAoBO,MAAMA,IAAyBC,CAAAA,MAAU;AAC9C,QAAM;AAAA,IACJC,OAAAA;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,IACrBZ,GAEEa,IAAkB,OAAOX,KAAY;AAE3C,SACEY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAGJ,CAAoB,mHAAmHJ,IAAS,YAAY,+BAA+B;AAAA,EAAA,GAGzMM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAU;AAAA,IACVC,OAAO;AAAA,MAAER,OAAAA;AAAAA,MAAOC,QAAAA;AAAAA,MAAQQ,UAAU;AAAA,IAAA;AAAA,IAClC,sBAAoBP;AAAAA,EAAAA,GAEnBV,KAASa,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAuDf,CAAW,GAC1FY,IAAkBC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGC,WAAU;AAAA,EAAA,GAAgDd,CAAW,IAAIA,GAC/FY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZX,GAAmBc,SAASL,gBAAAA,EAAAC,cAACK,GAAMC,EAAA,CAAA,GAAKhB,GAAiB;AAAA,IAAEiB,SAAShB;AAAAA,EAAAA,CAAa,CAAE,GACnFF,GAAoBe,SAASL,gBAAAA,EAAAC,cAACK,GAAMC,MAAKjB,GAAkB;AAAA,IAAEkB,SAASf;AAAAA,EAAAA,CAAc,CAAE,CACpF,GACJJ,KACCW,gBAAAA,EAAAC,cAACQ,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQF,SAAShB;AAAAA,IAAcU,WAAU;AAAA,EAAA,CAAyC,CAE5F,CACF;AAET;"}
+{"version":3,"file":"index11.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  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    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    title,\n    ariaLabel,\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    >\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 color-[var(--color-gray-900)]\">{title}</h2>}\n        {isContentString ? <p className=\"leading-normal color-[var(--color-gray-700)]\">{content}</p> : content}\n        <div className=\"flex 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","content","showCloseIcon","successButtonProps","cancelButtonProps","cancelAction","successAction","isOpen","width","height","automationId","customModalClassName","containerRef","titleId","dialogProps","useModalA11y","onDismiss","isContentString","React","createElement","className","_extends","ref","style","maxWidth","id","label","Button","onClick","Icon","name"],"mappings":";;;;;;;;;;;;;AAsBO,MAAMA,IAAyBC,CAAAA,MAAU;AAC9C,QAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,WAAAA;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,IACrBb,GAEE;AAAA,IAAEc,cAAAA;AAAAA,IAAcC,SAAAA;AAAAA,IAASC,aAAAA;AAAAA,EAAAA,IAAgBC,EAAa;AAAA,IAC1DR,QAAAA;AAAAA,IACAS,WAAWX;AAAAA,IACXN,OAAAA;AAAAA,IACAC,WAAAA;AAAAA,EAAAA,CACD,GAEKiB,IAAkB,OAAOhB,KAAY;AAE3C,SACEiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAGT,CAAoB,mHAAmHJ,IAAS,YAAY,+BAA+B;AAAA,EAAA,GAGzMW,gBAAAA,EAAAC,cAAA,OAAAE,EAAA;AAAA,IACEC,KAAKV;AAAAA,EAAAA,GACDE,GAAW;AAAA,IACfM,WAAU;AAAA,IACVG,OAAO;AAAA,MAAEf,OAAAA;AAAAA,MAAOC,QAAAA;AAAAA,MAAQe,UAAU;AAAA,IAAA;AAAA,IAClC,sBAAoBd;AAAAA,EAAAA,CAAa,GAEhCX,KAASmB,gBAAAA,EAAAC,cAAA,MAAA;AAAA,IAAIM,IAAIZ;AAAAA,IAASO,WAAU;AAAA,EAAA,GAAuDrB,CAAU,GACrGkB,IAAkBC,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IAAGC,WAAU;AAAA,EAAA,GAAgDnB,CAAW,IAAIA,GAC/FiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACZhB,GAAmBsB,SAASR,gBAAAA,EAAAC,cAACQ,GAAMN,EAAA,CAAA,GAAKjB,GAAiB;AAAA,IAAEwB,SAASvB;AAAAA,EAAAA,CAAa,CAAE,GACnFF,GAAoBuB,SAASR,gBAAAA,EAAAC,cAACQ,GAAMN,MAAKlB,GAAkB;AAAA,IAAEyB,SAAStB;AAAAA,EAAAA,CAAc,CAAE,CACpF,GACJJ,KACCgB,gBAAAA,EAAAC,cAACU,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQF,SAASvB;AAAAA,IAAcL,WAAU;AAAA,IAAeoB,WAAU;AAAA,EAAA,CAAyC,CAErH,CACF;AAET;"}

package/dist/index12.js

@@ -1,28 +1,40 @@
-import e from "react";
-const c = (t) => {
+import o, { useRef as c } from "react";
+import { useFocusTrap as u } from "./index193.js";
+import { useDismissOnEscape as f } from "./index194.js";
+const v = (s) => {
   const {
-    renderModalContent: a,
-    isOpen: o,
-    width: n = "500px",
-    className: s = "",
-    contentClassName: i = "",
-    automationId: l = "",
+    renderModalContent: n,
+    isOpen: e,
+    width: a = "500px",
+    className: i = "",
+    contentClassName: l = "",
+    automationId: r = "",
     onModalClick: d = () => {
-    }
-  } = t;
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-modal fixed inset-0 flex items-start justify-center z-[2001] backdrop-brightness-50 backdrop-blur-sm ${o ? "visible" : "invisible pointer-events-none"} ${s}`,
-    "data-automation-id": l,
+    },
+    onClose: m
+  } = s, t = c(null);
+  return u({
+    enabled: e,
+    containerRef: t,
+    restoreFocus: !0
+  }), f({
+    enabled: e,
+    containerRef: t,
+    onDismiss: m
+  }), /* @__PURE__ */ o.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": r,
     onClick: d
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: `modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-[48px] ${i}`,
+  }, /* @__PURE__ */ o.createElement("div", {
+    ref: t,
+    className: `modal-content flex flex-col gap-3 bg-[var(--color-white)] rounded shadow-lg p-8 mt-[48px] ${l}`,
     style: {
-      width: n,
+      width: a,
       maxWidth: "100vw"
     }
-  }, a()));
+  }, n()));
 };
 export {
-  c as CustomModal
+  v as CustomModal
 };
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../src/components/CustomModal/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\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\nexport const CustomModal: FC<CustomModalProps> = (props) => {\n  const {\n    renderModalContent,\n    isOpen,\n    width = '500px',\n    className = '',\n    contentClassName = '',\n    automationId = '',\n    onModalClick = () => {}\n  } = props;\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    >\n      <div\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":["React__default","CustomModal","props","renderModalContent","isOpen","width","className","contentClassName","automationId","onModalClick","React","createElement","onClick","style","maxWidth"],"mappings":"AAcO,OAAAA,OAAA;AAAA,MAAMC,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,EAAA,IACpBP;AAEJ,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEL,WAAW,kHACTF,IAAS,YAAY,+BAA+B,IAClDE,CAAS;AAAA,IACb,sBAAoBE;AAAAA,IACpBI,SAASH;AAAAA,EAAAA,GAETC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEL,WAAW,6FAA6FC,CAAgB;AAAA,IACxHM,OAAO;AAAA,MAAER,OAAAA;AAAAA,MAAOS,UAAU;AAAA,IAAA;AAAA,EAAQ,GAEjCX,EAAAA,CACE,CACF;AAET;"}
+{"version":3,"file":"index12.js","sources":["../src/components/CustomModal/index.tsx"],"sourcesContent":["import React, { FC, useRef } from 'react';\nimport { useFocusTrap, useDismissOnEscape } 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\n/**\n * A11y note: CustomModal handles focus trap and Escape dismissal automatically.\n * Consumers are responsible for adding dialog semantics to the content rendered\n * via `renderModalContent`:\n *\n *   <div\n *     role=\"dialog\"\n *     aria-modal=\"true\"\n *     aria-labelledby={titleId}   // or aria-label if no visible heading\n *   >\n *     <h2 id={titleId}>...</h2>\n *     ...\n *   </div>\n *\n * See Paywall/index.tsx for a reference implementation.\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  } = props;\n\n  const modalContentRef = useRef<HTMLDivElement>(null);\n\n  useFocusTrap({\n    enabled: isOpen,\n    containerRef: modalContentRef,\n    restoreFocus: true,\n  });\n\n  useDismissOnEscape({\n    enabled: isOpen,\n    containerRef: modalContentRef,\n    onDismiss: onClose,\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    >\n      <div\n        ref={modalContentRef}\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":["React__default","useRef","useFocusTrap","useDismissOnEscape","CustomModal","props","renderModalContent","isOpen","width","className","contentClassName","automationId","onModalClick","onClose","modalContentRef","enabled","containerRef","restoreFocus","onDismiss","React","createElement","onClick","ref","style","maxWidth"],"mappings":"AA+BO,OAAAA,KAAA,UAAAC,SAAA;AAAA,SAAA,gBAAAC,SAAA;AAAA,SAAA,sBAAAC,SAAA;AAAA,MAAMC,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,EAAAA,IACER,GAEES,IAAkBb,EAAuB,IAAI;AAEnDC,SAAAA,EAAa;AAAA,IACXa,SAASR;AAAAA,IACTS,cAAcF;AAAAA,IACdG,cAAc;AAAA,EAAA,CACf,GAEDd,EAAmB;AAAA,IACjBY,SAASR;AAAAA,IACTS,cAAcF;AAAAA,IACdI,WAAWL;AAAAA,EAAAA,CACZ,GAGCM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEX,WAAW,kHACTF,IAAS,YAAY,+BAA+B,IAClDE,CAAS;AAAA,IACb,sBAAoBE;AAAAA,IACpBU,SAAST;AAAAA,EAAAA,GAETO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEE,KAAKR;AAAAA,IACLL,WAAW,6FAA6FC,CAAgB;AAAA,IACxHa,OAAO;AAAA,MAAEf,OAAAA;AAAAA,MAAOgB,UAAU;AAAA,IAAA;AAAA,EAAQ,GAEjClB,EAAAA,CACE,CACF;AAET;"}

package/dist/index15.js

@@ -1,7 +1,7 @@
 import m, { useState as N, useRef as $, useEffect as P } from "react";
 import V, { flushSync as Z } from "react-dom";
 import { useStableId as O } from "./index190.js";
-import { useDismissOnFocusOut as ee } from "./index194.js";
+import { useDismissOnFocusOut as ee } from "./index197.js";
 function I() {
   return I = Object.assign ? Object.assign.bind() : function(g) {
     for (var h = 1; h < arguments.length; h++) {

package/dist/index17.js

@@ -1,7 +1,7 @@
-import t, { useState as $, useMemo as y } from "react";
-import { MenuItem as k } from "./index16.js";
-import { InputWithIcon as F } from "./index51.js";
-import { useRovingFocus as R } from "./index68.js";
+import t, { forwardRef as k, useState as F, useMemo as g } from "react";
+import { MenuItem as L } from "./index16.js";
+import { InputWithIcon as S } from "./index51.js";
+import { useRovingFocus as C } from "./index68.js";
 function m() {
   return m = Object.assign ? Object.assign.bind() : function(a) {
     for (var o = 1; o < arguments.length; o++) {
@@ -11,17 +11,18 @@ function m() {
     return a;
   }, m.apply(null, arguments);
 }
-const P = ({
+const O = /* @__PURE__ */ k(({
   items: a,
   maxHeight: o,
   shouldShowSearch: n = !1,
   searchPlaceholder: l = "Search...",
-  searchBy: g = "label",
-  searchResultEmptyMessage: v = "No results found"
-}) => {
-  const [i, b] = $(""), I = () => i.trim() ? a.filter((e) => (e[g]?.toString().toLowerCase() || "").includes(i.toLowerCase())) : a, h = () => /* @__PURE__ */ t.createElement("div", {
+  searchBy: v = "label",
+  searchResultEmptyMessage: b = "No results found",
+  className: p = ""
+}, I) => {
+  const [i, h] = F(""), x = () => i.trim() ? a.filter((e) => (e[v]?.toString().toLowerCase() || "").includes(i.toLowerCase())) : a, w = () => /* @__PURE__ */ t.createElement("div", {
     className: "w-full relative flex items-center border-b border-[var(--color-gray-300)] px-1"
-  }, /* @__PURE__ */ t.createElement(F, {
+  }, /* @__PURE__ */ t.createElement(S, {
     leftIcon: {
       name: "search",
       position: "left",
@@ -30,7 +31,7 @@ const P = ({
       }
     },
     value: i,
-    onChange: (e) => b(e),
+    onChange: (e) => h(e),
     placeholder: l,
     style: {
       margin: 0,
@@ -42,31 +43,32 @@ const P = ({
       outline: "none"
     },
     automationId: "se-design-menu-list-search"
-  })), c = I(), x = o ? {
+  })), c = x(), E = o ? {
     maxHeight: o,
     overflowY: "auto"
-  } : {}, d = y(() => {
+  } : {}, d = g(() => {
     const e = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new Set();
-    return a.forEach((s, p) => {
-      const f = s.id || s.automationId || `menu-item-${p}`;
-      let u = f;
-      r.has(u) && (u = `${f}-${p}`), r.add(u), e.set(s, u);
+    return a.forEach((s, f) => {
+      const y = s.id || s.automationId || `menu-item-${f}`;
+      let u = y;
+      r.has(u) && (u = `${y}-${f}`), r.add(u), e.set(s, u);
     }), e;
-  }, [a]), w = y(() => c.filter((e) => e.type !== "header" && e.type !== "separator").map((e) => d.get(e)), [c, d]), {
-    getRovingItemProps: E,
-    handleKeyDown: N,
-    setFocusedId: M
-  } = R({
-    itemIds: w,
+  }, [a]), N = g(() => c.filter((e) => e.type !== "header" && e.type !== "separator").map((e) => d.get(e)), [c, d]), {
+    getRovingItemProps: $,
+    handleKeyDown: M,
+    setFocusedId: R
+  } = C({
+    itemIds: N,
     orientation: "vertical",
     loop: !0
   });
   return /* @__PURE__ */ t.createElement("div", {
-    className: `se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md ${n ? "" : "py-2"}`,
+    ref: I,
+    className: `se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md ${n ? "" : "py-2"}${p ? ` ${p}` : ""}`,
     role: "menu",
     "aria-label": "Menu"
-  }, n && h(), /* @__PURE__ */ t.createElement("div", {
-    style: x,
+  }, n && w(), /* @__PURE__ */ t.createElement("div", {
+    style: E,
     className: `overflow-y-auto ${n ? "py-2" : ""}`
   }, c.length > 0 ? c.map((e) => {
     const r = d.get(e);
@@ -81,21 +83,22 @@ const P = ({
         className: "se-design-menu-header cursor-default px-2 mx-1 text-sm pt-2 text-[var(--color-gray-650)]",
         role: "presentation"
       }, e.label);
-    const s = E(r);
-    return /* @__PURE__ */ t.createElement(k, m({}, e, {
+    const s = $(r);
+    return /* @__PURE__ */ t.createElement(L, m({}, e, {
       key: r,
       ref: s.ref,
       tabIndex: s.tabIndex,
-      onKeyDown: N,
-      onFocus: () => M(r)
+      onKeyDown: M,
+      onFocus: () => R(r)
     }));
   }) : /* @__PURE__ */ t.createElement("div", {
     className: "px-3 py-4 text-center text-[var(--color-gray-700)] text-sm",
     role: "status",
     "aria-live": "polite"
-  }, v)));
-};
+  }, b)));
+});
+O.displayName = "MenuList";
 export {
-  P as MenuList
+  O as MenuList
 };
 //# sourceMappingURL=index17.js.map

package/dist/index17.js.map

@@ -1 +1 @@
-{"version":3,"file":"index17.js","sources":["../src/components/MenuList/index.tsx"],"sourcesContent":["import React, { FC, useState, useMemo } from 'react';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\nimport { InputWithIcon } from '../InputWithIcon';\nimport { useRovingFocus } from 'src/utils/a11y/useRovingFocus';\n\nexport type MenuListProps = {\n  items: MenuItemProps[];\n  maxHeight?: string;\n  shouldShowSearch?: boolean;\n  searchPlaceholder?: string;\n  searchBy?: string;\n  searchResultEmptyMessage?: string;\n};\n\nexport const MenuList: FC<MenuListProps> = ({\n  items,\n  maxHeight,\n  shouldShowSearch = false,\n  searchPlaceholder = 'Search...',\n  searchBy = 'label',\n  searchResultEmptyMessage = 'No results found'\n}) => {\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const getFilteredItems = () => {\n    if (!searchQuery.trim()) {\n      return items;\n    }\n    return items.filter((item) => {\n      const searchValue = item[searchBy as keyof MenuItemProps]?.toString().toLowerCase() || '';\n      return searchValue.includes(searchQuery.toLowerCase());\n    });\n  };\n\n  const renderSearchBar = () => {\n    return (\n      <div className=\"w-full relative flex items-center border-b border-[var(--color-gray-300)] px-1\">\n        <InputWithIcon\n          leftIcon={{ name: 'search', position: 'left', style: { color: 'var(--color-gray-500)' } }}\n          value={searchQuery}\n          onChange={(value) => setSearchQuery(value)}\n          placeholder={searchPlaceholder}\n          style={{ margin: 0, gap: 0 }}\n          inputStyle={{ width: '100%', border: 'none', outline: 'none' }}\n          automationId=\"se-design-menu-list-search\"\n        />\n      </div>\n    );\n  };\n\n  const filteredItems = getFilteredItems();\n  const containerStyle = maxHeight\n    ? {\n        maxHeight,\n        overflowY: 'auto' as const\n      }\n    : {};\n\n  \n  const itemIdByRef = useMemo(() => {\n    const map = new WeakMap<MenuItemProps, string>();\n    const seen = new Set<string>();\n\n    items.forEach((item, index) => {\n      const baseId = item.id || item.automationId || `menu-item-${index}`;\n      let uniqueId = baseId;\n\n      if (seen.has(uniqueId)) {\n        uniqueId = `${baseId}-${index}`;\n      }\n\n      seen.add(uniqueId);\n      map.set(item, uniqueId);\n    });\n\n    return map;\n  }, [items]);\n\n  const itemIds = useMemo(() => {\n    return filteredItems\n      .filter((item) => item.type !== 'header' && item.type !== 'separator')\n      .map((item) => itemIdByRef.get(item) as string);\n  }, [filteredItems, itemIdByRef]);\n\n  // Use roving focus for arrow key navigation\n  const { getRovingItemProps, handleKeyDown, setFocusedId } = useRovingFocus({\n    itemIds,\n    orientation: 'vertical',\n    loop: true\n  });\n\n  return (\n    <div\n      className={`se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md ${\n        shouldShowSearch ? '' : 'py-2'\n      }`}\n      role=\"menu\"\n      aria-label=\"Menu\"\n    >\n      {shouldShowSearch && renderSearchBar()}\n      <div style={containerStyle} className={`overflow-y-auto ${shouldShowSearch ? 'py-2' : ''}`}>\n        {filteredItems.length > 0 ? (\n          filteredItems.map((item) => {\n            const stableId = itemIdByRef.get(item) as string;\n\n            if (item.type === 'separator') {\n              return (\n                <hr key={stableId} className=\"se-design-menu-separator cursor-default border-[var(--color-gray-200)]\" />\n              );\n            }\n\n            if (item.type === 'header') {\n              return (\n                <div\n                  key={stableId}\n                  className=\"se-design-menu-header cursor-default px-2 mx-1 text-sm pt-2 text-[var(--color-gray-650)]\"\n                  role=\"presentation\"\n                >\n                  {item.label}\n                </div>\n              );\n            }\n\n            const rovingProps = getRovingItemProps(stableId);\n            return (\n              <MenuItem\n                {...item}\n                key={stableId}\n                ref={rovingProps.ref}\n                tabIndex={rovingProps.tabIndex}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocusedId(stableId)}\n              />\n            );\n          })\n        ) : (\n          <div className=\"px-3 py-4 text-center text-[var(--color-gray-700)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["MenuList","items","maxHeight","shouldShowSearch","searchPlaceholder","searchBy","searchResultEmptyMessage","searchQuery","setSearchQuery","useState","getFilteredItems","trim","filter","item","toString","toLowerCase","includes","renderSearchBar","React","createElement","className","InputWithIcon","leftIcon","name","position","style","color","value","onChange","placeholder","margin","gap","inputStyle","width","border","outline","automationId","filteredItems","containerStyle","overflowY","itemIdByRef","useMemo","map","WeakMap","seen","Set","forEach","index","baseId","id","uniqueId","has","add","set","itemIds","type","get","getRovingItemProps","handleKeyDown","setFocusedId","useRovingFocus","orientation","loop","role","length","stableId","key","label","rovingProps","MenuItem","_extends","ref","tabIndex","onKeyDown","onFocus"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,IAA8BA,CAAC;AAAA,EAC1CC,OAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,kBAAAA,IAAmB;AAAA,EACnBC,mBAAAA,IAAoB;AAAA,EACpBC,UAAAA,IAAW;AAAA,EACXC,0BAAAA,IAA2B;AAC7B,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAE,GAE3CC,IAAmBA,MAClBH,EAAYI,SAGVV,EAAMW,OAAQC,CAAAA,OACCA,EAAKR,CAA+B,GAAGS,SAAAA,EAAWC,iBAAiB,IACpEC,SAAST,EAAYQ,YAAAA,CAAa,CACtD,IALQd,GAQLgB,IAAkBA,MAEpBC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbF,gBAAAA,EAAAC,cAACE,GAAa;AAAA,IACZC,UAAU;AAAA,MAAEC,MAAM;AAAA,MAAUC,UAAU;AAAA,MAAQC,OAAO;AAAA,QAAEC,OAAO;AAAA,MAAA;AAAA,IAAwB;AAAA,IACtFC,OAAOpB;AAAAA,IACPqB,UAAWD,CAAAA,MAAUnB,EAAemB,CAAK;AAAA,IACzCE,aAAazB;AAAAA,IACbqB,OAAO;AAAA,MAAEK,QAAQ;AAAA,MAAGC,KAAK;AAAA,IAAA;AAAA,IACzBC,YAAY;AAAA,MAAEC,OAAO;AAAA,MAAQC,QAAQ;AAAA,MAAQC,SAAS;AAAA,IAAA;AAAA,IACtDC,cAAa;AAAA,EAAA,CACd,CACE,GAIHC,IAAgB3B,EAAAA,GAChB4B,IAAiBpC,IACnB;AAAA,IACEA,WAAAA;AAAAA,IACAqC,WAAW;AAAA,EAAA,IAEb,CAAA,GAGEC,IAAcC,EAAQ,MAAM;AAChC,UAAMC,wBAAUC,QAAAA,GACVC,wBAAWC,IAAAA;AAEjB5C,WAAAA,EAAM6C,QAAQ,CAACjC,GAAMkC,MAAU;AAC7B,YAAMC,IAASnC,EAAKoC,MAAMpC,EAAKuB,gBAAgB,aAAaW,CAAK;AACjE,UAAIG,IAAWF;AAEf,MAAIJ,EAAKO,IAAID,CAAQ,MACnBA,IAAW,GAAGF,CAAM,IAAID,CAAK,KAG/BH,EAAKQ,IAAIF,CAAQ,GACjBR,EAAIW,IAAIxC,GAAMqC,CAAQ;AAAA,IACxB,CAAC,GAEMR;AAAAA,EACT,GAAG,CAACzC,CAAK,CAAC,GAEJqD,IAAUb,EAAQ,MACfJ,EACJzB,OAAQC,CAAAA,MAASA,EAAK0C,SAAS,YAAY1C,EAAK0C,SAAS,WAAW,EACpEb,IAAK7B,CAAAA,MAAS2B,EAAYgB,IAAI3C,CAAI,CAAW,GAC/C,CAACwB,GAAeG,CAAW,CAAC,GAGzB;AAAA,IAAEiB,oBAAAA;AAAAA,IAAoBC,eAAAA;AAAAA,IAAeC,cAAAA;AAAAA,EAAAA,IAAiBC,EAAe;AAAA,IACzEN,SAAAA;AAAAA,IACAO,aAAa;AAAA,IACbC,MAAM;AAAA,EAAA,CACP;AAED,SACE5C,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,+EACTjB,IAAmB,KAAK,MAAM;AAAA,IAEhC4D,MAAK;AAAA,IACL,cAAW;AAAA,EAAA,GAEV5D,KAAoBc,EAAAA,GACrBC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,OAAOa;AAAAA,IAAgBlB,WAAW,mBAAmBjB,IAAmB,SAAS,EAAE;AAAA,EAAA,GACrFkC,EAAc2B,SAAS,IACtB3B,EAAcK,IAAK7B,CAAAA,MAAS;AAC1B,UAAMoD,IAAWzB,EAAYgB,IAAI3C,CAAI;AAErC,QAAIA,EAAK0C,SAAS;AAChB,aACErC,gBAAAA,EAAAC,cAAA,MAAA;AAAA,QAAI+C,KAAKD;AAAAA,QAAU7C,WAAU;AAAA,MAAA,CAA0E;AAI3G,QAAIP,EAAK0C,SAAS;AAChB,aACErC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,QACE+C,KAAKD;AAAAA,QACL7C,WAAU;AAAA,QACV2C,MAAK;AAAA,MAAA,GAEJlD,EAAKsD,KACH;AAIT,UAAMC,IAAcX,EAAmBQ,CAAQ;AAC/C,6BACE9C,cAACkD,GAAQC,MACHzD,GAAI;AAAA,MACRqD,KAAKD;AAAAA,MACLM,KAAKH,EAAYG;AAAAA,MACjBC,UAAUJ,EAAYI;AAAAA,MACtBC,WAAWf;AAAAA,MACXgB,SAASA,MAAMf,EAAaM,CAAQ;AAAA,IAAA,CAAE,CACvC;AAAA,EAEL,CAAC,IAED/C,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA6D2C,MAAK;AAAA,IAAS,aAAU;AAAA,EAAA,GAAUzD,CAA8B,CAE3I,CACF;AAET;"}
+{"version":3,"file":"index17.js","sources":["../src/components/MenuList/index.tsx"],"sourcesContent":["import React, { forwardRef, useState, useMemo } from 'react';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\nimport { InputWithIcon } from '../InputWithIcon';\nimport { useRovingFocus } from 'src/utils/a11y/useRovingFocus';\n\nexport type MenuListProps = {\n  items: MenuItemProps[];\n  maxHeight?: string;\n  shouldShowSearch?: boolean;\n  searchPlaceholder?: string;\n  searchBy?: string;\n  searchResultEmptyMessage?: string;\n  className?: string;\n};\n\nexport const MenuList = forwardRef<HTMLDivElement, MenuListProps>(({\n  items,\n  maxHeight,\n  shouldShowSearch = false,\n  searchPlaceholder = 'Search...',\n  searchBy = 'label',\n  searchResultEmptyMessage = 'No results found',\n  className = ''\n}, ref) => {\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const getFilteredItems = () => {\n    if (!searchQuery.trim()) {\n      return items;\n    }\n    return items.filter((item) => {\n      const searchValue = item[searchBy as keyof MenuItemProps]?.toString().toLowerCase() || '';\n      return searchValue.includes(searchQuery.toLowerCase());\n    });\n  };\n\n  const renderSearchBar = () => {\n    return (\n      <div className=\"w-full relative flex items-center border-b border-[var(--color-gray-300)] px-1\">\n        <InputWithIcon\n          leftIcon={{ name: 'search', position: 'left', style: { color: 'var(--color-gray-500)' } }}\n          value={searchQuery}\n          onChange={(value) => setSearchQuery(value)}\n          placeholder={searchPlaceholder}\n          style={{ margin: 0, gap: 0 }}\n          inputStyle={{ width: '100%', border: 'none', outline: 'none' }}\n          automationId=\"se-design-menu-list-search\"\n        />\n      </div>\n    );\n  };\n\n  const filteredItems = getFilteredItems();\n  const containerStyle = maxHeight\n    ? {\n        maxHeight,\n        overflowY: 'auto' as const\n      }\n    : {};\n\n  \n  const itemIdByRef = useMemo(() => {\n    const map = new WeakMap<MenuItemProps, string>();\n    const seen = new Set<string>();\n\n    items.forEach((item, index) => {\n      const baseId = item.id || item.automationId || `menu-item-${index}`;\n      let uniqueId = baseId;\n\n      if (seen.has(uniqueId)) {\n        uniqueId = `${baseId}-${index}`;\n      }\n\n      seen.add(uniqueId);\n      map.set(item, uniqueId);\n    });\n\n    return map;\n  }, [items]);\n\n  const itemIds = useMemo(() => {\n    return filteredItems\n      .filter((item) => item.type !== 'header' && item.type !== 'separator')\n      .map((item) => itemIdByRef.get(item) as string);\n  }, [filteredItems, itemIdByRef]);\n\n  // Use roving focus for arrow key navigation\n  const { getRovingItemProps, handleKeyDown, setFocusedId } = useRovingFocus({\n    itemIds,\n    orientation: 'vertical',\n    loop: true\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={`se-design-menu-list border border-[var(--color-gray-200)] rounded shadow-md ${\n        shouldShowSearch ? '' : 'py-2'\n      }${className ? ` ${className}` : ''}`}\n      role=\"menu\"\n      aria-label=\"Menu\"\n    >\n      {shouldShowSearch && renderSearchBar()}\n      <div style={containerStyle} className={`overflow-y-auto ${shouldShowSearch ? 'py-2' : ''}`}>\n        {filteredItems.length > 0 ? (\n          filteredItems.map((item) => {\n            const stableId = itemIdByRef.get(item) as string;\n\n            if (item.type === 'separator') {\n              return (\n                <hr key={stableId} className=\"se-design-menu-separator cursor-default border-[var(--color-gray-200)]\" />\n              );\n            }\n\n            if (item.type === 'header') {\n              return (\n                <div\n                  key={stableId}\n                  className=\"se-design-menu-header cursor-default px-2 mx-1 text-sm pt-2 text-[var(--color-gray-650)]\"\n                  role=\"presentation\"\n                >\n                  {item.label}\n                </div>\n              );\n            }\n\n            const rovingProps = getRovingItemProps(stableId);\n            return (\n              <MenuItem\n                {...item}\n                key={stableId}\n                ref={rovingProps.ref}\n                tabIndex={rovingProps.tabIndex}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocusedId(stableId)}\n              />\n            );\n          })\n        ) : (\n          <div className=\"px-3 py-4 text-center text-[var(--color-gray-700)] text-sm\" role=\"status\" aria-live=\"polite\">{searchResultEmptyMessage}</div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nMenuList.displayName = 'MenuList';\n"],"names":["MenuList","items","maxHeight","shouldShowSearch","searchPlaceholder","searchBy","searchResultEmptyMessage","className","ref","searchQuery","setSearchQuery","useState","getFilteredItems","trim","filter","item","toString","toLowerCase","includes","renderSearchBar","React","createElement","InputWithIcon","leftIcon","name","position","style","color","value","onChange","placeholder","margin","gap","inputStyle","width","border","outline","automationId","filteredItems","containerStyle","overflowY","itemIdByRef","useMemo","map","WeakMap","seen","Set","forEach","index","baseId","id","uniqueId","has","add","set","itemIds","type","get","getRovingItemProps","handleKeyDown","setFocusedId","useRovingFocus","orientation","loop","role","length","stableId","key","label","rovingProps","MenuItem","_extends","tabIndex","onKeyDown","onFocus","displayName"],"mappings":"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"}