mainstack-design-system 1.3.5 → 1.3.8

package/dist/mainstack-design-system565.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),a=require("./mainstack-design-system588.cjs"),e=i.forwardRef(({isOptionOpen:r,className:o,...t},n)=>s.jsx("div",{"data-select-options-opened":r,className:a.cn("flex flex-col gap-8 p-8 rounded-18 bg-surface-neutral-l1 border-border-interactive-neutral border shadow-200",o),ref:n,...t}));e.displayName="FormCountryOptions";exports.FormCountryOptions=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CAgJYdlN.cjs"),e=t.cva(["w-full flex flex-col md:flex-row items-center justify-between gap-12 md:gap-16 px-16 py-8 rounded-16"],{variants:{variant:{neutral:["bg-surface-neutral-l3","**:data-[slot=banner-header]:text-primary","**:data-[slot=banner-text]:text-secondary","**:data-[slot=banner-icon]:bg-surface-neutral-l4"],info:["bg-surface-info-l1","**:data-[slot=banner-header]:text-on-info-light","**:data-[slot=banner-text]:text-on-info-light","**:data-[slot=banner-icon]:bg-surface-info-l4"],success:["bg-surface-success-l1","**:data-[slot=banner-header]:text-on-success-light","**:data-[slot=banner-text]:text-on-success-light","**:data-[slot=banner-icon]:bg-surface-success-l4"],warning:["bg-surface-warning-l1","**:data-[slot=banner-header]:text-on-warning-light","**:data-[slot=banner-text]:text-on-warning-light","**:data-[slot=banner-icon]:bg-surface-warning-l4"],error:["bg-surface-error-l1","**:data-[slot=banner-header]:text-on-error-light","**:data-[slot=banner-text]:text-on-error-light","**:data-[slot=banner-icon]:bg-surface-error-l4"]}}});exports.bannerVariants=e;

package/dist/mainstack-design-system565.js

@@ -1,21 +1,45 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { cn as d } from "./mainstack-design-system588.js";
-const p = n(
-  ({ isOptionOpen: r, className: o, ...e }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      "data-select-options-opened": r,
-      className: d(
-        "flex flex-col gap-8 p-8 rounded-18 bg-surface-neutral-l1 border-border-interactive-neutral border shadow-200",
-        o
-      ),
-      ref: t,
-      ...e
+import { c as a } from "./index-D29mdTf5.js";
+const e = a(
+  [
+    "w-full flex flex-col md:flex-row items-center justify-between gap-12 md:gap-16 px-16 py-8 rounded-16"
+  ],
+  {
+    variants: {
+      variant: {
+        neutral: [
+          "bg-surface-neutral-l3",
+          "**:data-[slot=banner-header]:text-primary",
+          "**:data-[slot=banner-text]:text-secondary",
+          "**:data-[slot=banner-icon]:bg-surface-neutral-l4"
+        ],
+        info: [
+          "bg-surface-info-l1",
+          "**:data-[slot=banner-header]:text-on-info-light",
+          "**:data-[slot=banner-text]:text-on-info-light",
+          "**:data-[slot=banner-icon]:bg-surface-info-l4"
+        ],
+        success: [
+          "bg-surface-success-l1",
+          "**:data-[slot=banner-header]:text-on-success-light",
+          "**:data-[slot=banner-text]:text-on-success-light",
+          "**:data-[slot=banner-icon]:bg-surface-success-l4"
+        ],
+        warning: [
+          "bg-surface-warning-l1",
+          "**:data-[slot=banner-header]:text-on-warning-light",
+          "**:data-[slot=banner-text]:text-on-warning-light",
+          "**:data-[slot=banner-icon]:bg-surface-warning-l4"
+        ],
+        error: [
+          "bg-surface-error-l1",
+          "**:data-[slot=banner-header]:text-on-error-light",
+          "**:data-[slot=banner-text]:text-on-error-light",
+          "**:data-[slot=banner-icon]:bg-surface-error-l4"
+        ]
+      }
     }
-  )
+  }
 );
-p.displayName = "FormCountryOptions";
 export {
-  p as FormCountryOptions
+  e as bannerVariants
 };

package/dist/mainstack-design-system566.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),h=require("./index-D6rpLeOg.cjs"),i=require("./en.json-C_LsdSZ9.cjs"),s=require("./mainstack-design-system588.cjs"),g=require("./mainstack-design-system591.cjs"),t=require("./index-BgzojN8c.cjs"),a=n.forwardRef(({onOptionOpenChange:c,searchCountry:l,activeCountry:u,setActiveCountry:m,getCountryMetaInfo:d,className:x,...b},f)=>{const o=n.useMemo(()=>{const r=h.getCountries();return l?r.filter(p=>i.countriesEnglishNames[p].toLowerCase().includes(l.toLowerCase())):r},[l]);return e.jsxs(t.ScrollArea,{style:{"--scrollbar-size":"8px"},className:s.cn("flex flex-col max-h-188",x),"data-slot":"phone-number-options-list",ref:f,...b,children:[e.jsx(t.ScrollAreaViewport,{className:"h-full pr-8 w-full",children:e.jsx("div",{"data-slot":"phone-number-options-list-inner",className:s.cn("flex flex-col gap-8"),children:o.length?o.map(r=>e.jsxs("button",{role:"option","aria-selected":r===u,onClick:()=>{m(r),c(!1)},className:"flex cursor-pointer py-8 px-10 rounded-12 items-center justify-between hover:bg-interactive-secondary-hover",children:[e.jsxs("div",{className:"flex items-center gap-8",children:[e.jsx("div",{className:"flex items-center justify-center",children:g.getCountryFlagComp(r)}),e.jsx("p",{className:s.cn("body-extrasmall-medium","text-primary"),children:i.countriesEnglishNames[r]})]}),e.jsx("p",{className:s.cn("body-extrasmall-regular","text-secondary"),children:d(r)})]},r)):e.jsx("p",{className:s.cn("body-extrasmall-regular","text-tertiary text-center"),children:"No option found"})})}),e.jsx(t.ScrollAreaScrollbar,{orientation:"vertical",className:"flex select-none rounded-(--scrollbar-size) touch-none p-2 w-(--scrollbar-size) flex-col transition-all duration-200 ease-out bg-surface-neutral-l1 hover:bg-interactive-secondary hover:w-12",children:e.jsx(t.ScrollAreaThumb,{className:s.cn("rounded-(--scrollbar-size) bg-border-interactive-neutral-inverse-hover relative","before:content-[''] before:absolute before:top-1/2 before:left-1/2  before:-translate-1/2 before:size-full before:min-w-44 before:min-h-44")})}),e.jsx(t.ScrollAreaCorner,{className:"bg-border-interactive-neutral-inverse-hover"})]})});a.displayName="FormCountryOptionsList";exports.FormCountryOptionsList=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),n=t.createContext(null);function o(){const e=t.useContext(n);if(!e)throw new Error("usePhoneNumberContext must be used within a <PhoneNumberContext />.");return e}exports.PhoneNumberContext=n;exports.usePhoneNumberContext=o;

package/dist/mainstack-design-system566.js

@@ -1,101 +1,16 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as h } from "react";
-import { a as x } from "./index-BaLp3DZq.js";
-import { c as s } from "./en.json-x2mHjhnP.js";
-import { cn as l } from "./mainstack-design-system588.js";
-import { getCountryFlagComp as v } from "./mainstack-design-system591.js";
-import { S as N, a as g, b as y, c as w, d as C } from "./index-CLUgda6x.js";
-const S = u(
-  ({
-    onOptionOpenChange: i,
-    searchCountry: o,
-    activeCountry: n,
-    setActiveCountry: c,
-    getCountryMetaInfo: m,
-    className: d,
-    ...f
-  }, p) => {
-    const a = h(() => {
-      const e = x();
-      return o ? e.filter(
-        (b) => s[b].toLowerCase().includes(o.toLowerCase())
-      ) : e;
-    }, [o]);
-    return /* @__PURE__ */ t(
-      N,
-      {
-        style: {
-          "--scrollbar-size": "8px"
-        },
-        className: l("flex flex-col max-h-188", d),
-        "data-slot": "phone-number-options-list",
-        ref: p,
-        ...f,
-        children: [
-          /* @__PURE__ */ r(g, { className: "h-full pr-8 w-full", children: /* @__PURE__ */ r(
-            "div",
-            {
-              "data-slot": "phone-number-options-list-inner",
-              className: l("flex flex-col gap-8"),
-              children: a.length ? a.map((e) => /* @__PURE__ */ t(
-                "button",
-                {
-                  role: "option",
-                  "aria-selected": e === n,
-                  onClick: () => {
-                    c(e), i(!1);
-                  },
-                  className: "flex cursor-pointer py-8 px-10 rounded-12 items-center justify-between hover:bg-interactive-secondary-hover",
-                  children: [
-                    /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
-                      /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: v(e) }),
-                      /* @__PURE__ */ r("p", { className: l("body-extrasmall-medium", "text-primary"), children: s[e] })
-                    ] }),
-                    /* @__PURE__ */ r(
-                      "p",
-                      {
-                        className: l("body-extrasmall-regular", "text-secondary"),
-                        children: m(e)
-                      }
-                    )
-                  ]
-                },
-                e
-              )) : /* @__PURE__ */ r(
-                "p",
-                {
-                  className: l(
-                    "body-extrasmall-regular",
-                    "text-tertiary text-center"
-                  ),
-                  children: "No option found"
-                }
-              )
-            }
-          ) }),
-          /* @__PURE__ */ r(
-            y,
-            {
-              orientation: "vertical",
-              className: "flex select-none rounded-(--scrollbar-size) touch-none p-2 w-(--scrollbar-size) flex-col transition-all duration-200 ease-out bg-surface-neutral-l1 hover:bg-interactive-secondary hover:w-12",
-              children: /* @__PURE__ */ r(
-                w,
-                {
-                  className: l(
-                    "rounded-(--scrollbar-size) bg-border-interactive-neutral-inverse-hover relative",
-                    "before:content-[''] before:absolute before:top-1/2 before:left-1/2  before:-translate-1/2 before:size-full before:min-w-44 before:min-h-44"
-                  )
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ r(C, { className: "bg-border-interactive-neutral-inverse-hover" })
-        ]
-      }
-    );
-  }
+import { createContext as t, useContext as n } from "react";
+const o = t(
+  null
 );
-S.displayName = "FormCountryOptionsList";
+function u() {
+  const e = n(o);
+  if (!e)
+    throw new Error(
+      "usePhoneNumberContext must be used within a <PhoneNumberContext />."
+    );
+  return e;
+}
 export {
-  S as FormCountryOptionsList
+  o as PhoneNumberContext,
+  u as usePhoneNumberContext
 };

package/dist/mainstack-design-system567.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("./mainstack-design-system430.cjs"),l=require("./mainstack-design-system431.cjs");require("./mainstack-design-system429.cjs");require("./mainstack-design-system355.cjs");const u=require("./mainstack-design-system91.cjs"),p=require("./mainstack-design-system264.cjs"),r=i.forwardRef(({searchCountry:n,onChangeSearchCountry:o,...t},s)=>e.jsxs(a.InputRoot,{className:"bg-interactive-secondary",children:[e.jsx(p,{className:"size-24"}),e.jsx(l.InputField,{placeholder:"Search...",value:n,onChange:c=>o(c.target.value),ref:s,...t}),e.jsx(u,{role:"button",className:"size-20 block cursor-pointer  peer-placeholder-shown:hidden",variant:"filled",onClick:()=>o("")})]}));r.displayName="FormCountryOptionsSearchField";exports.FormCountryOptionsSearchField=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react");require("./mainstack-design-system355.cjs");const u=require("./mainstack-design-system195.cjs"),d=require("./utils-DRUMSl4z.cjs"),p=require("./mainstack-design-system591.cjs"),o=l.forwardRef(({isOptionOpen:t,activeCountry:r,onOptionOpenChange:n,isError:s,isSuccess:a,...c},i)=>e.jsxs("button",{onClick:()=>n(!0),"data-select-options-opened":t,"data-editable":"false",className:d.cn("form-root-slot-defaults","group flex items-center w-66 h-48 gap-6 py-14 cursor-pointer px-12 rounded-14 disabled:cursor-not-allowed disabled:opacity-50 data-[select-options-opened=true]:ring-2 data-[select-options-opened=true]:ring-border-interactive-neutral-active"),ref:i,...c,children:[e.jsx("div",{"data-error":s,"data-success":a,className:"flex items-center justify-center",children:p.getCountryFlagComp(r)}),e.jsx(u,{"data-select-options-opened":t,className:"size-16 transition-transform transition-1000 group-data-[select-options-opened=true]:rotate-180"})]}));o.displayName=" FormCountrySelect";exports.FormCountrySelect=o;

package/dist/mainstack-design-system567.js

@@ -1,40 +1,51 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { InputRoot as n } from "./mainstack-design-system430.js";
-import { InputField as c } from "./mainstack-design-system431.js";
-import "./mainstack-design-system429.js";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
 import "./mainstack-design-system355.js";
-import p from "./mainstack-design-system91.js";
-import s from "./mainstack-design-system264.js";
-const d = m(
+import l from "./mainstack-design-system195.js";
+import { c as p } from "./utils-CFdAYIby.js";
+import { getCountryFlagComp as m } from "./mainstack-design-system591.js";
+const u = c(
   ({
-    searchCountry: e,
-    onChangeSearchCountry: o,
-    ...t
-  }, i) => /* @__PURE__ */ l(n, { className: "bg-interactive-secondary", children: [
-    /* @__PURE__ */ r(s, { className: "size-24" }),
-    /* @__PURE__ */ r(
-      c,
-      {
-        placeholder: "Search...",
-        value: e,
-        onChange: (a) => o(a.target.value),
-        ref: i,
-        ...t
-      }
-    ),
-    /* @__PURE__ */ r(
-      p,
-      {
-        role: "button",
-        className: "size-20 block cursor-pointer  peer-placeholder-shown:hidden",
-        variant: "filled",
-        onClick: () => o("")
-      }
-    )
-  ] })
+    isOptionOpen: e,
+    activeCountry: o,
+    onOptionOpenChange: r,
+    isError: a,
+    isSuccess: s,
+    ...n
+  }, i) => /* @__PURE__ */ d(
+    "button",
+    {
+      onClick: () => r(!0),
+      "data-select-options-opened": e,
+      "data-editable": "false",
+      className: p(
+        "form-root-slot-defaults",
+        "group flex items-center w-66 h-48 gap-6 py-14 cursor-pointer px-12 rounded-14 disabled:cursor-not-allowed disabled:opacity-50 data-[select-options-opened=true]:ring-2 data-[select-options-opened=true]:ring-border-interactive-neutral-active"
+      ),
+      ref: i,
+      ...n,
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "data-error": a,
+            "data-success": s,
+            className: "flex items-center justify-center",
+            children: m(o)
+          }
+        ),
+        /* @__PURE__ */ t(
+          l,
+          {
+            "data-select-options-opened": e,
+            className: "size-16 transition-transform transition-1000 group-data-[select-options-opened=true]:rotate-180"
+          }
+        )
+      ]
+    }
+  )
 );
-d.displayName = "FormCountryOptionsSearchField";
+u.displayName = " FormCountrySelect";
 export {
-  d as FormCountryOptionsSearchField
+  u as FormCountrySelect
 };

package/dist/mainstack-design-system568.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),i=t.createContext(null);function n(){const e=t.useContext(i);if(!e)throw new Error("usePriceFieldContext must be used within a <PriceFieldContext />.");return e}exports.PriceFieldContext=i;exports.usePriceFieldContext=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),a=require("./utils-DRUMSl4z.cjs"),e=i.forwardRef(({isOptionOpen:r,className:o,...t},n)=>s.jsx("div",{"data-select-options-opened":r,className:a.cn("flex flex-col gap-8 p-8 rounded-18 bg-surface-neutral-l1 border-border-interactive-neutral border shadow-200",o),ref:n,...t}));e.displayName="FormCountryOptions";exports.FormCountryOptions=e;

package/dist/mainstack-design-system568.js

@@ -1,16 +1,21 @@
-import { createContext as t, useContext as n } from "react";
-const o = t(
-  null
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { c as s } from "./utils-CFdAYIby.js";
+const d = n(
+  ({ isOptionOpen: r, className: o, ...e }, t) => /* @__PURE__ */ a(
+    "div",
+    {
+      "data-select-options-opened": r,
+      className: s(
+        "flex flex-col gap-8 p-8 rounded-18 bg-surface-neutral-l1 border-border-interactive-neutral border shadow-200",
+        o
+      ),
+      ref: t,
+      ...e
+    }
+  )
 );
-function i() {
-  const e = n(o);
-  if (!e)
-    throw new Error(
-      "usePriceFieldContext must be used within a <PriceFieldContext />."
-    );
-  return e;
-}
+d.displayName = "FormCountryOptions";
 export {
-  o as PriceFieldContext,
-  i as usePriceFieldContext
+  d as FormCountryOptions
 };

package/dist/mainstack-design-system569.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D={DZ:"DZD",AO:"AOA",BJ:"XOF",BW:"BWP",BF:"XOF",BI:"BIF",CM:"XAF",CV:"CVE",CF:"XAF",TD:"XAF",KM:"KMF",CG:"XAF",CD:"CDF",CI:"XOF",DJ:"DJF",EG:"EGP",GQ:"XAF",ER:"ERN",ET:"ETB",GA:"XAF",GM:"GMD",GH:"GHS",GN:"GNF",GW:"XOF",KE:"KES",LS:"LSL",LR:"LRD",LY:"LYD",MG:"MGA",MW:"MWK",ML:"XOF",MR:"MRO",MU:"MUR",MA:"MAD",MZ:"MZN",NA:"NAD",NE:"XOF",NG:"NGN",RW:"RWF",SN:"XOF",SC:"SCR",SL:"SLL",SO:"SOS",ZA:"ZAR",SD:"SDG",SZ:"SZL",TZ:"TZS",TG:"XOF",TN:"TND",UG:"UGX",EH:"MAD",ZM:"ZMK",ZW:"ZWL",AM:"AMD",BD:"BDT",BT:"BTN",BN:"BND",KH:"KHR",CN:"CNY",HK:"HKD",IN:"INR",ID:"IDR",JP:"JPY",KP:"KPW",KR:"KRW",LA:"LAK",MO:"MOP",MY:"MYR",MV:"MVR",MN:"MNT",MM:"MMK",NP:"NPR",PH:"PHP",RU:"RUB",SG:"SGD",LK:"LKR",TW:"TWD",TH:"THB",TL:"USD",VN:"VND",AU:"AUD",CX:"AUD",CC:"AUD",CK:"NZD",HM:"AUD",KI:"AUD",MH:"USD",NR:"AUD",NC:"XPF",NZ:"NZD",NU:"NZD",NF:"AUD",PG:"PGK",PN:"NZD",SB:"SBD",TK:"NZD",TO:"TOP",TV:"AUD",VU:"VUV",WF:"XPF",AI:"XCD",AG:"XCD",AW:"AWG",BS:"BSD",BB:"BBD",BM:"BMD",KY:"KYD",CU:"CUP",DM:"XCD",DO:"DOP",GD:"XCD",HT:"HTG",JM:"JMD",MS:"XCD",PR:"USD",KN:"XCD",LC:"XCD",VC:"XCD",TT:"TTD",TC:"USD",VG:"USD",VI:"USD",AC:"SHP",AX:"EUR",AL:"ALL",AD:"EUR",AT:"EUR",BY:"BYR",BE:"EUR",BA:"BAM",BV:"NOK",BG:"BGN",HR:"HRK",CY:"EUR",CZ:"CZK",DK:"DKK",EE:"EUR",FK:"FKP",FO:"DKK",FI:"EUR",FR:"EUR",GF:"EUR",TF:"EUR",GE:"GEL",DE:"EUR",GI:"GIP",GR:"EUR",GL:"DKK",GP:"EUR",GG:"GBP",VA:"EUR",HU:"HUF",IS:"ISK",IE:"EUR",IM:"GBP",IT:"EUR",JE:"GBP",LV:"EUR",LI:"CHF",LT:"LTL",LU:"EUR",MK:"MKD",MT:"EUR",MQ:"EUR",MD:"MDL",MC:"EUR",ME:"EUR",NL:"EUR",AN:"ANG",NO:"NOK",PL:"PLN",PT:"EUR",RE:"EUR",RO:"RON",PM:"EUR",SM:"EUR",RS:"RSD",ES:"EUR",SK:"EUR",SI:"EUR",SJ:"NOK",SE:"SEK",CH:"CHF",UA:"UAH",GB:"GBP",AS:"USD",IO:"USD",FJ:"FJD",PF:"XPF",GU:"USD",FM:"USD",MP:"USD",PW:"USD",SH:"SHP",WS:"WST",ST:"STD",GS:"GBP",AF:"AFN",AZ:"AZN",BH:"BHD",IR:"IRR",IQ:"IQD",IL:"ILS",JO:"JOD",KZ:"KZT",KW:"KWD",KG:"KGS",LB:"LBP",OM:"OMR",PK:"PKR",PS:"ILS",QA:"QAR",SA:"SAR",SY:"SYP",TJ:"TJS",TR:"TRY",TM:"TMT",AE:"AED",UZ:"UZS",YE:"YER",TA:"GBP",SX:"ANG",SS:"SSP",MF:"EUR",XK:"EUR",YT:"EUR",CW:"XCG",BQ:"USD",BL:"EUR",BZ:"BZD",CA:"CAD",CR:"CRC",SV:"USD",GT:"GTQ",HN:"HNL",MX:"MXN",NI:"NIO",PA:"PAB",US:"USD",UM:"USD",AR:"ARS",BO:"BOB",BR:"BRL",CL:"CLP",CO:"COP",EC:"USD",GY:"GYD",PY:"PYG",PE:"PEN",SR:"SRD",UY:"UYU",VE:"VEF"};exports.COUNTRIES_ISO2_CODE_TO_CURRENCY_CODE_MAP=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),o=require("./index-C7rXc8w3.cjs"),t=require("./utils-DRUMSl4z.cjs"),h=require("./mainstack-design-system591.cjs"),s=require("./index-BgzojN8c.cjs"),a=i.forwardRef(({onOptionOpenChange:c,searchCountry:l,activeCountry:u,onSetActiveCountry:m,getCountryMetaInfo:d,className:x,...b},f)=>{const n=i.useMemo(()=>{const r=o.getCountries();return l?r.filter(p=>o.countriesEnglishNames[p].toLowerCase().includes(l.toLowerCase())):r},[l]);return e.jsxs(s.ScrollArea,{style:{"--scrollbar-size":"8px"},className:t.cn("flex flex-col max-h-188",x),"data-slot":"phone-number-options-list",ref:f,...b,children:[e.jsx(s.ScrollAreaViewport,{className:"h-full pr-8 w-full",children:e.jsx("div",{"data-slot":"phone-number-options-list-inner",className:t.cn("flex flex-col gap-8"),children:n.length?n.map(r=>e.jsxs("button",{role:"option","aria-selected":r===u,onClick:()=>{m(r),c(!1)},className:"flex cursor-pointer py-8 px-10 rounded-12 items-center justify-between hover:bg-interactive-secondary-hover",children:[e.jsxs("div",{className:"flex items-center gap-8",children:[e.jsx("div",{className:"flex items-center justify-center",children:h.getCountryFlagComp(r)}),e.jsx("p",{className:t.cn("body-extrasmall-medium","text-primary"),children:o.countriesEnglishNames[r]})]}),e.jsx("p",{className:t.cn("body-extrasmall-regular","text-secondary"),children:d(r)})]},r)):e.jsx("p",{className:t.cn("body-extrasmall-regular","text-tertiary text-center"),children:"No option found"})})}),e.jsx(s.ScrollAreaScrollbar,{orientation:"vertical",className:"flex select-none rounded-(--scrollbar-size) touch-none p-2 w-(--scrollbar-size) flex-col transition-all duration-200 ease-out bg-surface-neutral-l1 hover:bg-interactive-secondary hover:w-12",children:e.jsx(s.ScrollAreaThumb,{className:t.cn("rounded-(--scrollbar-size) bg-border-interactive-neutral-inverse-hover relative","before:content-[''] before:absolute before:top-1/2 before:left-1/2  before:-translate-1/2 before:size-full before:min-w-44 before:min-h-44")})}),e.jsx(s.ScrollAreaCorner,{className:"bg-border-interactive-neutral-inverse-hover"})]})});a.displayName="FormCountryOptionsList";exports.FormCountryOptionsList=a;