mainstack-design-system 1.9.3 → 1.11.0

package/dist/mainstack-design-system580.js

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

package/dist/mainstack-design-system581.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-system436.cjs"),u=require("./mainstack-design-system437.cjs");require("./mainstack-design-system435.cjs");require("./mainstack-design-system357.cjs");const l=require("./mainstack-design-system93.cjs"),d=require("./mainstack-design-system266.cjs");require("./player-DgtZYZny.cjs");const o=i.forwardRef(({searchCountry:n,onChangeSearchCountry:r,...s},t)=>e.jsxs(a.InputRoot,{className:"mds:bg-interactive-secondary",children:[e.jsx(d,{className:"mds:size-24"}),e.jsx(u.InputField,{placeholder:"Search...",value:n,onChange:c=>r(c.target.value),ref:t,...s}),e.jsx(l,{role:"button",className:"mds:size-20 mds:block mds:cursor-pointer mds:peer-placeholder-shown:hidden",variant:"filled",onClick:()=>r("")})]}));o.displayName="FormCountryOptionsSearchField";exports.FormCountryOptionsSearchField=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CAgJYdlN.cjs"),e=t.cva(["mds:w-full mds:flex mds:flex-col mds:md:flex-row mds:items-center mds:justify-between mds:gap-12 mds:md:gap-16 mds:px-16 mds:py-8 mds:rounded-16"],{variants:{variant:{neutral:["mds:bg-surface-neutral-l3","mds:**:data-[slot=banner-header]:text-primary","mds:**:data-[slot=banner-text]:text-secondary","mds:**:data-[slot=banner-icon]:bg-surface-neutral-l4"],info:["mds:bg-surface-info-l1","mds:**:data-[slot=banner-header]:text-on-info-light","mds:**:data-[slot=banner-text]:text-on-info-light","mds:**:data-[slot=banner-icon]:bg-surface-info-l4"],success:["mds:bg-surface-success-l1","mds:**:data-[slot=banner-header]:text-on-success-light","mds:**:data-[slot=banner-text]:text-on-success-light","mds:**:data-[slot=banner-icon]:bg-surface-success-l4"],warning:["mds:bg-surface-warning-l1","mds:**:data-[slot=banner-header]:text-on-warning-light","mds:**:data-[slot=banner-text]:text-on-warning-light","mds:**:data-[slot=banner-icon]:bg-surface-warning-l4"],error:["mds:bg-surface-error-l1","mds:**:data-[slot=banner-header]:text-on-error-light","mds:**:data-[slot=banner-text]:text-on-error-light","mds:**:data-[slot=banner-icon]:bg-surface-error-l4"]}}});exports.bannerVariants=e;

package/dist/mainstack-design-system581.js

@@ -1,41 +1,45 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import { InputRoot as l } from "./mainstack-design-system436.js";
-import { InputField as n } from "./mainstack-design-system437.js";
-import "./mainstack-design-system435.js";
-import "./mainstack-design-system357.js";
-import p from "./mainstack-design-system93.js";
-import c from "./mainstack-design-system266.js";
-import "./player-DTiOvJS-.js";
-const d = a(
-  ({
-    searchCountry: e,
-    onChangeSearchCountry: o,
-    ...m
-  }, t) => /* @__PURE__ */ s(l, { className: "mds:bg-interactive-secondary", children: [
-    /* @__PURE__ */ r(c, { className: "mds:size-24" }),
-    /* @__PURE__ */ r(
-      n,
-      {
-        placeholder: "Search...",
-        value: e,
-        onChange: (i) => o(i.target.value),
-        ref: t,
-        ...m
+import { c as a } from "./index-D29mdTf5.js";
+const s = a(
+  [
+    "mds:w-full mds:flex mds:flex-col mds:md:flex-row mds:items-center mds:justify-between mds:gap-12 mds:md:gap-16 mds:px-16 mds:py-8 mds:rounded-16"
+  ],
+  {
+    variants: {
+      variant: {
+        neutral: [
+          "mds:bg-surface-neutral-l3",
+          "mds:**:data-[slot=banner-header]:text-primary",
+          "mds:**:data-[slot=banner-text]:text-secondary",
+          "mds:**:data-[slot=banner-icon]:bg-surface-neutral-l4"
+        ],
+        info: [
+          "mds:bg-surface-info-l1",
+          "mds:**:data-[slot=banner-header]:text-on-info-light",
+          "mds:**:data-[slot=banner-text]:text-on-info-light",
+          "mds:**:data-[slot=banner-icon]:bg-surface-info-l4"
+        ],
+        success: [
+          "mds:bg-surface-success-l1",
+          "mds:**:data-[slot=banner-header]:text-on-success-light",
+          "mds:**:data-[slot=banner-text]:text-on-success-light",
+          "mds:**:data-[slot=banner-icon]:bg-surface-success-l4"
+        ],
+        warning: [
+          "mds:bg-surface-warning-l1",
+          "mds:**:data-[slot=banner-header]:text-on-warning-light",
+          "mds:**:data-[slot=banner-text]:text-on-warning-light",
+          "mds:**:data-[slot=banner-icon]:bg-surface-warning-l4"
+        ],
+        error: [
+          "mds:bg-surface-error-l1",
+          "mds:**:data-[slot=banner-header]:text-on-error-light",
+          "mds:**:data-[slot=banner-text]:text-on-error-light",
+          "mds:**:data-[slot=banner-icon]:bg-surface-error-l4"
+        ]
       }
-    ),
-    /* @__PURE__ */ r(
-      p,
-      {
-        role: "button",
-        className: "mds:size-20 mds:block mds:cursor-pointer mds:peer-placeholder-shown:hidden",
-        variant: "filled",
-        onClick: () => o("")
-      }
-    )
-  ] })
+    }
+  }
 );
-d.displayName = "FormCountryOptionsSearchField";
 export {
-  d as FormCountryOptionsSearchField
+  s as bannerVariants
 };

package/dist/mainstack-design-system582.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 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-system582.js

@@ -2,15 +2,15 @@ import { createContext as t, useContext as n } from "react";
 const o = t(
   null
 );
-function i() {
+function u() {
   const e = n(o);
   if (!e)
     throw new Error(
-      "usePriceFieldContext must be used within a <PriceFieldContext />."
+      "usePhoneNumberContext must be used within a <PhoneNumberContext />."
     );
   return e;
 }
 export {
-  o as PriceFieldContext,
-  i as usePriceFieldContext
+  o as PhoneNumberContext,
+  u as usePhoneNumberContext
 };

package/dist/mainstack-design-system583.cjs

@@ -1 +1 @@
-"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("useSelectContext must be used within a <SelectContext />.");return e}exports.SelectContext=n;exports.useSelectContext=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react");require("./mainstack-design-system357.cjs");const i=require("./mainstack-design-system197.cjs");require("./player-8drl4TJX.cjs");const l=require("./utils-sX9NhwD-.cjs"),u=require("./mainstack-design-system606.cjs"),s=c.forwardRef(({isOptionOpen:t,activeCountry:r,onOptionOpenChange:o,isError:d,isSuccess:n,...a},m)=>e.jsxs("button",{onClick:()=>o(!0),"data-select-options-opened":t,"data-editable":"false",className:l.cn("form-root-slot-defaults","mds:group mds:flex mds:items-center mds:w-66 mds:h-48 mds:gap-6 mds:py-14 mds:cursor-pointer mds:px-12 mds:rounded-14 mds:disabled:cursor-not-allowed mds:disabled:opacity-50 mds:data-[select-options-opened=true]:ring-2 mds:data-[select-options-opened=true]:ring-border-interactive-neutral-active"),ref:m,...a,children:[e.jsx("div",{"data-error":d,"data-success":n,className:"mds:flex mds:items-center mds:justify-center",children:u.getCountryFlagComp(r)}),e.jsx(i,{"data-select-options-opened":t,className:"mds:size-16 mds:transition-transform mds:transition-1000 mds:group-data-[select-options-opened=true]:rotate-180"})]}));s.displayName=" FormCountrySelect";exports.FormCountrySelect=s;

package/dist/mainstack-design-system583.js

@@ -1,14 +1,52 @@
-import { createContext as e, useContext as n } from "react";
-const o = e(null);
-function c() {
-  const t = n(o);
-  if (!t)
-    throw new Error(
-      "useSelectContext must be used within a <SelectContext />."
-    );
-  return t;
-}
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import "./mainstack-design-system357.js";
+import c from "./mainstack-design-system197.js";
+import "./player-C7Vjl1Lb.js";
+import { c as l } from "./utils-BuJ7DVbu.js";
+import { getCountryFlagComp as p } from "./mainstack-design-system606.js";
+const u = i(
+  ({
+    isOptionOpen: e,
+    activeCountry: o,
+    onOptionOpenChange: s,
+    isError: r,
+    isSuccess: d,
+    ...m
+  }, a) => /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: () => s(!0),
+      "data-select-options-opened": e,
+      "data-editable": "false",
+      className: l(
+        "form-root-slot-defaults",
+        "mds:group mds:flex mds:items-center mds:w-66 mds:h-48 mds:gap-6 mds:py-14 mds:cursor-pointer mds:px-12 mds:rounded-14 mds:disabled:cursor-not-allowed mds:disabled:opacity-50 mds:data-[select-options-opened=true]:ring-2 mds:data-[select-options-opened=true]:ring-border-interactive-neutral-active"
+      ),
+      ref: a,
+      ...m,
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "data-error": r,
+            "data-success": d,
+            className: "mds:flex mds:items-center mds:justify-center",
+            children: p(o)
+          }
+        ),
+        /* @__PURE__ */ t(
+          c,
+          {
+            "data-select-options-opened": e,
+            className: "mds:size-16 mds:transition-transform mds:transition-1000 mds:group-data-[select-options-opened=true]:rotate-180"
+          }
+        )
+      ]
+    }
+  )
+);
+u.displayName = " FormCountrySelect";
 export {
-  o as SelectContext,
-  c as useSelectContext
+  u as FormCountrySelect
 };

package/dist/mainstack-design-system584.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function a(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,o.get?o:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const r=a(c),s=r.createContext(null),u=()=>{const t=r.useContext(s);if(!t)throw new Error("useTabsContext must be used within <TabsRoot>");return t};exports.TabsContext=s;exports.useTabsContext=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),n=require("react"),i=require("./utils-sX9NhwD-.cjs"),e=n.forwardRef(({isOptionOpen:r,className:s,...o},t)=>d.jsx("div",{"data-select-options-opened":r,className:i.cn("mds:flex mds:flex-col mds:gap-8 mds:p-8 mds:rounded-18 mds:bg-surface-neutral-l1 mds:border-border-interactive-neutral mds:border mds:shadow-200",s),ref:t,...o}));e.displayName="FormCountryOptions";exports.FormCountryOptions=e;

package/dist/mainstack-design-system584.js

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

package/dist/mainstack-design-system585.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CAgJYdlN.cjs"),t=e.cva("mds:relative mds:inline-flex mds:items-center mds:gap-6 mds:justify-center mds:cursor-pointer mds:whitespace-nowrap mds:body-extrasmall-book mds:transition-all mds:disabled:pointer-events-none mds:disabled:text-disabled mds:transition-transform mds:ease-out-pressed mds:duration-100 mds:active:scale-[0.96]",{variants:{variant:{underline:["mds:px-8 mds:py-6 mds:text-secondary","mds:hover:bg-surface-neutral-l4 mds:hover:rounded-10","mds:disabled:text-disabled mds:disabled:pointer-events-none","mds:data-[state=active]:text-primary","mds:after:absolute mds:after:left-0 mds:after:right-0 mds:after:-bottom-9 mds:after:h-2 mds:after:bg-transparent","mds:data-[state=active]:after:bg-interactive-primary","mds:data-[state=active]:disabled:text-disabled","mds:data-[state=active]:disabled:after:bg-interactive-primary-disabled"],button:["mds:px-16 mds:py-10 mds:rounded-full mds:bg-transparent mds:text-on-secondary","mds:hover:bg-surface-neutral-l4 mds:hover:rounded-full mds:hover:text-on-secondary","mds:data-[state=active]:bg-interactive-primary mds:data-[state=active]:text-on-primary ","mds:data-[state=active]:hover:bg-interactive-primary-hover","mds:disabled:text-disabled mds:disabled:pointer-events-none mds:data-[state=active]:disabled:bg-interactive-primary-disabled mds:data-[state=active]:disabled:text-on-primary-disabled"]},layout:{horizontal:"mds:flex-row",vertical:"mds:flex-col"}},defaultVariants:{variant:"underline",layout:"vertical"}}),a=e.cva("mds:flex mds:items-center",{variants:{variant:{underline:"mds:justify-between mds:gap-20 mds:border-b-2 mds:border-border-interactive-neutral mds:py-8",button:"mds:gap-4 mds:p-4 mds:bg-surface-neutral-l4 mds:rounded-full"}},defaultVariants:{variant:"underline"}});exports.tabsListVariants=a;exports.tabsTriggerVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),r=require("./utils-sX9NhwD-.cjs"),p=require("./mainstack-design-system606.cjs"),l=require("./index-BgzojN8c.cjs"),n=d.forwardRef(({onOptionOpenChange:a,searchCountry:t,activeCountry:i,countryList:o,onSetActiveCountry:c,getCountryMetaInfo:u,className:x,...b},f)=>{const m=d.useMemo(()=>t?o.filter(s=>r.countriesEnglishNames[s].toLowerCase().includes(t.toLowerCase())):o,[t,o]);return e.jsxs(l.ScrollArea,{style:{"--scrollbar-size":"8px"},className:r.cn("mds:flex mds:flex-col mds:max-h-188",x),"data-slot":"phone-number-options-list",ref:f,...b,children:[e.jsx(l.ScrollAreaViewport,{className:"mds:h-full mds:pr-8 mds:w-full",children:e.jsx("div",{"data-slot":"phone-number-options-list-inner",className:r.cn("mds:flex mds:flex-col mds:gap-8"),children:m.length?m.map(s=>e.jsxs("button",{role:"option","aria-selected":s===i,onClick:()=>{c(s),a(!1)},className:"mds:flex mds:cursor-pointer mds:py-8 mds:px-10 mds:rounded-12 mds:items-center mds:justify-between mds:hover:bg-interactive-secondary-hover",children:[e.jsxs("div",{className:"mds:flex mds:items-center mds:gap-8",children:[e.jsx("div",{className:"mds:flex mds:items-center mds:justify-center",children:p.getCountryFlagComp(s)}),e.jsx("p",{className:r.cn("mds:body-extrasmall-medium","mds:text-primary"),children:r.countriesEnglishNames[s]})]}),e.jsx("p",{className:r.cn("mds:body-extrasmall-regular","mds:text-secondary"),children:u(s)})]},s)):e.jsx("p",{className:r.cn("mds:body-extrasmall-regular","mds:text-tertiary mds:text-center"),children:"No option found"})})}),e.jsx(l.ScrollAreaScrollbar,{orientation:"vertical",className:"mds:flex mds:select-none mds:rounded-(--scrollbar-size) mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1 mds:hover:bg-interactive-secondary mds:hover:w-12",children:e.jsx(l.ScrollAreaThumb,{className:r.cn("mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative","mds:before:content-[''] mds:before:absolute mds:before:top-1/2 mds:before:left-1/2  mds:before:-translate-1/2 mds:before:size-full mds:before:min-w-44 mds:before:min-h-44")})}),e.jsx(l.ScrollAreaCorner,{className:"mds:bg-border-interactive-neutral-inverse-hover"})]})});n.displayName="FormCountryOptionsList";exports.FormCountryOptionsList=n;

package/dist/mainstack-design-system585.js

@@ -1,49 +1,109 @@
-import { c as e } from "./index-D29mdTf5.js";
-const a = e(
-  "mds:relative mds:inline-flex mds:items-center mds:gap-6 mds:justify-center mds:cursor-pointer mds:whitespace-nowrap mds:body-extrasmall-book mds:transition-all mds:disabled:pointer-events-none mds:disabled:text-disabled mds:transition-transform mds:ease-out-pressed mds:duration-100 mds:active:scale-[0.96]",
-  {
-    variants: {
-      variant: {
-        underline: [
-          "mds:px-8 mds:py-6 mds:text-secondary",
-          "mds:hover:bg-surface-neutral-l4 mds:hover:rounded-10",
-          "mds:disabled:text-disabled mds:disabled:pointer-events-none",
-          "mds:data-[state=active]:text-primary",
-          "mds:after:absolute mds:after:left-0 mds:after:right-0 mds:after:-bottom-9 mds:after:h-2 mds:after:bg-transparent",
-          "mds:data-[state=active]:after:bg-interactive-primary",
-          "mds:data-[state=active]:disabled:text-disabled",
-          "mds:data-[state=active]:disabled:after:bg-interactive-primary-disabled"
-        ],
-        button: [
-          "mds:px-16 mds:py-10 mds:rounded-full mds:bg-transparent mds:text-on-secondary",
-          "mds:hover:bg-surface-neutral-l4 mds:hover:rounded-full mds:hover:text-on-secondary",
-          "mds:data-[state=active]:bg-interactive-primary mds:data-[state=active]:text-on-primary ",
-          "mds:data-[state=active]:hover:bg-interactive-primary-hover",
-          "mds:disabled:text-disabled mds:disabled:pointer-events-none mds:data-[state=active]:disabled:bg-interactive-primary-disabled mds:data-[state=active]:disabled:text-on-primary-disabled"
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u, useMemo as h } from "react";
+import { m as a, c as r } from "./utils-BuJ7DVbu.js";
+import { getCountryFlagComp as x } from "./mainstack-design-system606.js";
+import { S as v, a as N, b as g, c as w, d as y } from "./index-CLUgda6x.js";
+const S = u(
+  ({
+    onOptionOpenChange: t,
+    searchCountry: m,
+    activeCountry: i,
+    countryList: l,
+    onSetActiveCountry: n,
+    getCountryMetaInfo: c,
+    className: f,
+    ...p
+  }, b) => {
+    const o = h(() => m ? l.filter(
+      (s) => a[s].toLowerCase().includes(m.toLowerCase())
+    ) : l, [m, l]);
+    return /* @__PURE__ */ d(
+      v,
+      {
+        style: {
+          "--scrollbar-size": "8px"
+        },
+        className: r("mds:flex mds:flex-col mds:max-h-188", f),
+        "data-slot": "phone-number-options-list",
+        ref: b,
+        ...p,
+        children: [
+          /* @__PURE__ */ e(N, { className: "mds:h-full mds:pr-8 mds:w-full", children: /* @__PURE__ */ e(
+            "div",
+            {
+              "data-slot": "phone-number-options-list-inner",
+              className: r("mds:flex mds:flex-col mds:gap-8"),
+              children: o.length ? o.map((s) => /* @__PURE__ */ d(
+                "button",
+                {
+                  role: "option",
+                  "aria-selected": s === i,
+                  onClick: () => {
+                    n(s), t(!1);
+                  },
+                  className: "mds:flex mds:cursor-pointer mds:py-8 mds:px-10 mds:rounded-12 mds:items-center mds:justify-between mds:hover:bg-interactive-secondary-hover",
+                  children: [
+                    /* @__PURE__ */ d("div", { className: "mds:flex mds:items-center mds:gap-8", children: [
+                      /* @__PURE__ */ e("div", { className: "mds:flex mds:items-center mds:justify-center", children: x(s) }),
+                      /* @__PURE__ */ e(
+                        "p",
+                        {
+                          className: r(
+                            "mds:body-extrasmall-medium",
+                            "mds:text-primary"
+                          ),
+                          children: a[s]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ e(
+                      "p",
+                      {
+                        className: r(
+                          "mds:body-extrasmall-regular",
+                          "mds:text-secondary"
+                        ),
+                        children: c(s)
+                      }
+                    )
+                  ]
+                },
+                s
+              )) : /* @__PURE__ */ e(
+                "p",
+                {
+                  className: r(
+                    "mds:body-extrasmall-regular",
+                    "mds:text-tertiary mds:text-center"
+                  ),
+                  children: "No option found"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            g,
+            {
+              orientation: "vertical",
+              className: "mds:flex mds:select-none mds:rounded-(--scrollbar-size) mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1 mds:hover:bg-interactive-secondary mds:hover:w-12",
+              children: /* @__PURE__ */ e(
+                w,
+                {
+                  className: r(
+                    "mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative",
+                    "mds:before:content-[''] mds:before:absolute mds:before:top-1/2 mds:before:left-1/2  mds:before:-translate-1/2 mds:before:size-full mds:before:min-w-44 mds:before:min-h-44"
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(y, { className: "mds:bg-border-interactive-neutral-inverse-hover" })
         ]
-      },
-      layout: {
-        horizontal: "mds:flex-row",
-        vertical: "mds:flex-col"
       }
-    },
-    defaultVariants: {
-      variant: "underline",
-      layout: "vertical"
-    }
+    );
   }
-), d = e("mds:flex mds:items-center", {
-  variants: {
-    variant: {
-      underline: "mds:justify-between mds:gap-20 mds:border-b-2 mds:border-border-interactive-neutral mds:py-8",
-      button: "mds:gap-4 mds:p-4 mds:bg-surface-neutral-l4 mds:rounded-full"
-    }
-  },
-  defaultVariants: {
-    variant: "underline"
-  }
-});
+);
+S.displayName = "FormCountryOptionsList";
 export {
-  d as tabsListVariants,
-  a as tabsTriggerVariants
+  S as FormCountryOptionsList
 };

package/dist/mainstack-design-system586.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),o=e.createContext(null);function n(){const t=e.useContext(o);if(!t)throw new Error("useTextEditorContext must be used within a <TextEditorContext />.");return t}exports.TextEditorContext=o;exports.useTextEditorContext=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("./mainstack-design-system438.cjs"),u=require("./mainstack-design-system439.cjs");require("./mainstack-design-system437.cjs");require("./mainstack-design-system357.cjs");const l=require("./mainstack-design-system93.cjs"),d=require("./mainstack-design-system266.cjs");require("./player-8drl4TJX.cjs");const o=i.forwardRef(({searchCountry:n,onChangeSearchCountry:r,...s},t)=>e.jsxs(a.InputRoot,{className:"mds:bg-interactive-secondary",children:[e.jsx(d,{className:"mds:size-24"}),e.jsx(u.InputField,{placeholder:"Search...",value:n,onChange:c=>r(c.target.value),ref:t,...s}),e.jsx(l,{role:"button",className:"mds:size-20 mds:block mds:cursor-pointer mds:peer-placeholder-shown:hidden",variant:"filled",onClick:()=>r("")})]}));o.displayName="FormCountryOptionsSearchField";exports.FormCountryOptionsSearchField=o;

package/dist/mainstack-design-system586.js

@@ -1,16 +1,41 @@
-import { createContext as e, useContext as o } from "react";
-const n = e(
-  null
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { InputRoot as l } from "./mainstack-design-system438.js";
+import { InputField as n } from "./mainstack-design-system439.js";
+import "./mainstack-design-system437.js";
+import "./mainstack-design-system357.js";
+import p from "./mainstack-design-system93.js";
+import c from "./mainstack-design-system266.js";
+import "./player-C7Vjl1Lb.js";
+const d = a(
+  ({
+    searchCountry: e,
+    onChangeSearchCountry: o,
+    ...m
+  }, t) => /* @__PURE__ */ s(l, { className: "mds:bg-interactive-secondary", children: [
+    /* @__PURE__ */ r(c, { className: "mds:size-24" }),
+    /* @__PURE__ */ r(
+      n,
+      {
+        placeholder: "Search...",
+        value: e,
+        onChange: (i) => o(i.target.value),
+        ref: t,
+        ...m
+      }
+    ),
+    /* @__PURE__ */ r(
+      p,
+      {
+        role: "button",
+        className: "mds:size-20 mds:block mds:cursor-pointer mds:peer-placeholder-shown:hidden",
+        variant: "filled",
+        onClick: () => o("")
+      }
+    )
+  ] })
 );
-function x() {
-  const t = o(n);
-  if (!t)
-    throw new Error(
-      "useTextEditorContext must be used within a <TextEditorContext />."
-    );
-  return t;
-}
+d.displayName = "FormCountryOptionsSearchField";
 export {
-  n as TextEditorContext,
-  x as useTextEditorContext
+  d as FormCountryOptionsSearchField
 };

package/dist/mainstack-design-system587.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CAgJYdlN.cjs"),s=e.cva(["mds:group mds:w-full mds:rounded-18 mds:body-font-family mds:gap-12 mds:select-none mds:relative mds:flex mds:cursor-pointer mds:items-center mds:p-18 mds:border mds:border-border-interactive-neutral mds:bg-surface-neutral-l1","mds:transition-transform mds:ease-out-pressed mds:duration-100 mds:active:scale-[0.96]","mds:has-[>[data-slot=tile-header]]:flex-col mds:has-[>[data-slot=tile-header]]:items-start","mds:focus-visible:ring-2 mds:focus-visible:outline-none mds:focus-visible:ring-border-surface-spread-focus","mds:data-[selected=true]:border-2 mds:data-[selected=true]:border-border-interactive-neutral-active","mds:hover:bg-interactive-secondary"],{variants:{disabled:{true:["mds:pointer-events-none mds:opacity-60","mds:data-[disabled=true]:[&_[data-slot=tile-content]]:text-disabled"]}}});exports.tileVariants=s;
+"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;

package/dist/mainstack-design-system587.js

@@ -1,24 +1,16 @@
-import { c as e } from "./index-D29mdTf5.js";
-const d = e(
-  [
-    "mds:group mds:w-full mds:rounded-18 mds:body-font-family mds:gap-12 mds:select-none mds:relative mds:flex mds:cursor-pointer mds:items-center mds:p-18 mds:border mds:border-border-interactive-neutral mds:bg-surface-neutral-l1",
-    "mds:transition-transform mds:ease-out-pressed mds:duration-100 mds:active:scale-[0.96]",
-    "mds:has-[>[data-slot=tile-header]]:flex-col mds:has-[>[data-slot=tile-header]]:items-start",
-    "mds:focus-visible:ring-2 mds:focus-visible:outline-none mds:focus-visible:ring-border-surface-spread-focus",
-    "mds:data-[selected=true]:border-2 mds:data-[selected=true]:border-border-interactive-neutral-active",
-    "mds:hover:bg-interactive-secondary"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: [
-          "mds:pointer-events-none mds:opacity-60",
-          "mds:data-[disabled=true]:[&_[data-slot=tile-content]]:text-disabled"
-        ]
-      }
-    }
-  }
+import { createContext as t, useContext as n } from "react";
+const o = t(
+  null
 );
+function i() {
+  const e = n(o);
+  if (!e)
+    throw new Error(
+      "usePriceFieldContext must be used within a <PriceFieldContext />."
+    );
+  return e;
+}
 export {
-  d as tileVariants
+  o as PriceFieldContext,
+  i as usePriceFieldContext
 };

package/dist/mainstack-design-system588.cjs

@@ -1 +1 @@
-"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("useDateRangeContext must be used within a <DateRangeContext />.");return e}exports.DateRangeContext=n;exports.useDateRangeContext=o;
+"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("useSelectContext must be used within a <SelectContext />.");return e}exports.SelectContext=n;exports.useSelectContext=o;