mainstack-design-system 1.1.3 → 1.3.0

package/dist/mainstack-design-system557.js

@@ -1,24 +1,7 @@
-import { c as e } from "./index-D29mdTf5.js";
-const r = e(
-  [
-    "group w-full rounded-18 body-font-family gap-12 select-none relative flex cursor-pointer items-center p-18 border border-border-interactive-neutral bg-surface-neutral-l1",
-    "transition-transform ease-out-pressed duration-100 active:scale-[0.96]",
-    "has-[>[data-slot=tile-header]]:flex-col has-[>[data-slot=tile-header]]:items-start",
-    "focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-border-surface-spread-focus",
-    "data-[selected=true]:border-2 data-[selected=true]:border-border-interactive-neutral-active",
-    "hover:bg-interactive-secondary"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: [
-          "pointer-events-none opacity-60",
-          "data-[disabled=true]:[&_[data-slot=tile-content]]:text-disabled"
-        ]
-      }
-    }
-  }
+import * as t from "react";
+const o = t.createContext(
+  null
 );
 export {
-  r as tileVariants
+  o as TooltipContext
 };

package/dist/mainstack-design-system558.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");function c(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const a=c(r),l=a.createContext(null);exports.TooltipContext=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("./index-Deb8apmU.cjs");function o({className:e}){return r.jsx(t.Arrow2,{asChild:!0,children:r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"28",height:"8",viewBox:"0 0 28 8",fill:"none",className:e,children:r.jsx("path",{d:"M12.5858 6.58579L9.74904 3.74903C8.36542 2.36542 7.67361 1.67361 6.86628 1.17888C6.1505 0.740249 5.37015 0.417015 4.55386 0.221041C3.63316 0 2.65479 0 0.698068 0H27.3019C25.3452 0 24.3668 0 23.4461 0.221041C22.6299 0.417015 21.8495 0.740249 21.1337 1.17888C20.3264 1.67361 19.6346 2.36542 18.251 3.74903L15.4142 6.58579C14.6332 7.36684 13.3668 7.36683 12.5858 6.58579Z",fill:"currentColor"})})})}exports.TooltipArrow=o;

package/dist/mainstack-design-system558.js

@@ -1,7 +1,25 @@
-import * as t from "react";
-const o = t.createContext(
-  null
-);
+import { jsx as r } from "react/jsx-runtime";
+import { A as t } from "./index-CNheQ-9E.js";
+function e({ className: o }) {
+  return /* @__PURE__ */ r(t, { asChild: !0, children: /* @__PURE__ */ r(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "28",
+      height: "8",
+      viewBox: "0 0 28 8",
+      fill: "none",
+      className: o,
+      children: /* @__PURE__ */ r(
+        "path",
+        {
+          d: "M12.5858 6.58579L9.74904 3.74903C8.36542 2.36542 7.67361 1.67361 6.86628 1.17888C6.1505 0.740249 5.37015 0.417015 4.55386 0.221041C3.63316 0 2.65479 0 0.698068 0H27.3019C25.3452 0 24.3668 0 23.4461 0.221041C22.6299 0.417015 21.8495 0.740249 21.1337 1.17888C20.3264 1.67361 19.6346 2.36542 18.251 3.74903L15.4142 6.58579C14.6332 7.36684 13.3668 7.36683 12.5858 6.58579Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  ) });
+}
 export {
-  o as TooltipContext
+  e as TooltipArrow
 };

package/dist/mainstack-design-system559.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("./index-Deb8apmU.cjs");function o({className:e}){return r.jsx(t.Arrow2,{asChild:!0,children:r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"28",height:"8",viewBox:"0 0 28 8",fill:"none",className:e,children:r.jsx("path",{d:"M12.5858 6.58579L9.74904 3.74903C8.36542 2.36542 7.67361 1.67361 6.86628 1.17888C6.1505 0.740249 5.37015 0.417015 4.55386 0.221041C3.63316 0 2.65479 0 0.698068 0H27.3019C25.3452 0 24.3668 0 23.4461 0.221041C22.6299 0.417015 21.8495 0.740249 21.1337 1.17888C20.3264 1.67361 19.6346 2.36542 18.251 3.74903L15.4142 6.58579C14.6332 7.36684 13.3668 7.36683 12.5858 6.58579Z",fill:"currentColor"})})})}exports.TooltipArrow=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),e=require("./mainstack-design-system557.cjs"),n=()=>{const t=o.useContext(e.TooltipContext);if(!t)throw new Error("useTooltipContext must be used within a TooltipRoot");return t};exports.useTooltipContext=n;

package/dist/mainstack-design-system559.js

@@ -1,25 +1,11 @@
-import { jsx as r } from "react/jsx-runtime";
-import { A as t } from "./index-CNheQ-9E.js";
-function e({ className: o }) {
-  return /* @__PURE__ */ r(t, { asChild: !0, children: /* @__PURE__ */ r(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "28",
-      height: "8",
-      viewBox: "0 0 28 8",
-      fill: "none",
-      className: o,
-      children: /* @__PURE__ */ r(
-        "path",
-        {
-          d: "M12.5858 6.58579L9.74904 3.74903C8.36542 2.36542 7.67361 1.67361 6.86628 1.17888C6.1505 0.740249 5.37015 0.417015 4.55386 0.221041C3.63316 0 2.65479 0 0.698068 0H27.3019C25.3452 0 24.3668 0 23.4461 0.221041C22.6299 0.417015 21.8495 0.740249 21.1337 1.17888C20.3264 1.67361 19.6346 2.36542 18.251 3.74903L15.4142 6.58579C14.6332 7.36684 13.3668 7.36683 12.5858 6.58579Z",
-          fill: "currentColor"
-        }
-      )
-    }
-  ) });
-}
+import { useContext as t } from "react";
+import { TooltipContext as e } from "./mainstack-design-system557.js";
+const i = () => {
+  const o = t(e);
+  if (!o)
+    throw new Error("useTooltipContext must be used within a TooltipRoot");
+  return o;
+};
 export {
-  e as TooltipArrow
+  i as useTooltipContext
 };

package/dist/mainstack-design-system560.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),e=require("./mainstack-design-system558.cjs"),n=()=>{const t=o.useContext(e.TooltipContext);if(!t)throw new Error("useTooltipContext must be used within a TooltipRoot");return t};exports.useTooltipContext=n;
+"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-system560.js

@@ -1,11 +1,45 @@
-import { useContext as t } from "react";
-import { TooltipContext as e } from "./mainstack-design-system558.js";
-const i = () => {
-  const o = t(e);
-  if (!o)
-    throw new Error("useTooltipContext must be used within a TooltipRoot");
-  return o;
-};
+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"
+        ]
+      }
+    }
+  }
+);
 export {
-  i as useTooltipContext
+  e as bannerVariants
 };

package/dist/mainstack-design-system562.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react");require("./mainstack-design-system356.cjs");const u=require("./mainstack-design-system196.cjs"),d=require("./mainstack-design-system586.cjs"),p=require("./mainstack-design-system588.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react");require("./mainstack-design-system356.cjs");const u=require("./mainstack-design-system196.cjs"),d=require("./mainstack-design-system587.cjs"),p=require("./mainstack-design-system590.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-system562.js

@@ -2,8 +2,8 @@ import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
 import "./mainstack-design-system356.js";
 import l from "./mainstack-design-system196.js";
-import { cn as p } from "./mainstack-design-system586.js";
-import { getCountryFlagComp as m } from "./mainstack-design-system588.js";
+import { cn as p } from "./mainstack-design-system587.js";
+import { getCountryFlagComp as m } from "./mainstack-design-system590.js";
 const u = c(
   ({
     isOptionOpen: e,

package/dist/mainstack-design-system563.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("react"),a=require("./mainstack-design-system586.cjs"),e=s.forwardRef(({isOptionOpen:r,className:o,...t},n)=>i.jsx("div",{"data-select-options-opened":r,className:a.cn("flex flex-col w-(--radix-popover-trigger-width) 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 s=require("react/jsx-runtime"),i=require("react"),a=require("./mainstack-design-system587.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-system563.js

@@ -1,13 +1,13 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { cn as i } from "./mainstack-design-system586.js";
-const n = d(
+import { forwardRef as n } from "react";
+import { cn as d } from "./mainstack-design-system587.js";
+const p = n(
   ({ isOptionOpen: r, className: o, ...e }, t) => /* @__PURE__ */ a(
     "div",
     {
       "data-select-options-opened": r,
-      className: i(
-        "flex flex-col w-(--radix-popover-trigger-width) gap-8 p-8 rounded-18 bg-surface-neutral-l1 border-border-interactive-neutral border shadow-200",
+      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,
@@ -15,7 +15,7 @@ const n = d(
     }
   )
 );
-n.displayName = "FormCountryOptions";
+p.displayName = "FormCountryOptions";
 export {
-  n as FormCountryOptions
+  p as FormCountryOptions
 };

package/dist/mainstack-design-system564.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),g=require("./index-D6rpLeOg.cjs"),i=require("./en.json-C_LsdSZ9.cjs"),r=require("./mainstack-design-system586.cjs"),y=require("./mainstack-design-system588.cjs"),l=n.forwardRef(({onOptionOpenChange:a,searchCountry:s,activeCountry:c,setActiveCountry:m,getCountryMetaInfo:u,className:d,...x},p)=>{const o=n.useMemo(()=>{const e=g.getCountries();return s?e.filter(f=>i.countriesEnglishNames[f].toLowerCase().includes(s.toLowerCase())):e},[s]);return t.jsx("div",{className:r.cn("flex flex-col gap-8 overflow-auto max-h-188",d),ref:p,...x,children:o.length?o.map(e=>t.jsxs("button",{role:"option","aria-selected":e===c,onClick:()=>{m(e),a(!1)},className:"flex cursor-pointer py-8 px-10 rounded-12 items-center justify-between hover:bg-interactive-secondary-hover",children:[t.jsxs("div",{className:"flex items-center gap-8",children:[t.jsx("div",{className:"flex items-center justify-center",children:y.getCountryFlagComp(e)}),t.jsx("p",{className:r.cn("body-extrasmall-medium","text-primary"),children:i.countriesEnglishNames[e]})]}),t.jsx("p",{className:r.cn("body-extrasmall-regular","text-secondary"),children:u(e)})]},e)):t.jsx("p",{className:r.cn("body-extrasmall-regular","text-tertiary text-center"),children:"No option found"})})});l.displayName="FormCountryOptionsList";exports.FormCountryOptionsList=l;
+"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-system587.cjs"),g=require("./mainstack-design-system590.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;

package/dist/mainstack-design-system564.js

@@ -1,64 +1,101 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as g } from "react";
-import { a as h } from "./index-BaLp3DZq.js";
-import { c as a } from "./en.json-x2mHjhnP.js";
-import { cn as t } from "./mainstack-design-system586.js";
-import { getCountryFlagComp as N } from "./mainstack-design-system588.js";
-const y = u(
+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-system587.js";
+import { getCountryFlagComp as v } from "./mainstack-design-system590.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: l,
+    onOptionOpenChange: i,
     searchCountry: o,
-    activeCountry: m,
-    setActiveCountry: n,
-    getCountryMetaInfo: c,
+    activeCountry: n,
+    setActiveCountry: c,
+    getCountryMetaInfo: m,
     className: d,
-    ...p
-  }, f) => {
-    const s = g(() => {
-      const e = h();
+    ...f
+  }, p) => {
+    const a = h(() => {
+      const e = x();
       return o ? e.filter(
-        (x) => a[x].toLowerCase().includes(o.toLowerCase())
+        (b) => s[b].toLowerCase().includes(o.toLowerCase())
       ) : e;
     }, [o]);
-    return /* @__PURE__ */ r(
-      "div",
+    return /* @__PURE__ */ t(
+      N,
       {
-        className: t("flex flex-col gap-8 overflow-auto max-h-188", d),
-        ref: f,
-        ...p,
-        children: s.length ? s.map((e) => /* @__PURE__ */ i(
-          "button",
-          {
-            role: "option",
-            "aria-selected": e === m,
-            onClick: () => {
-              n(e), l(!1);
-            },
-            className: "flex cursor-pointer py-8 px-10 rounded-12 items-center justify-between hover:bg-interactive-secondary-hover",
-            children: [
-              /* @__PURE__ */ i("div", { className: "flex items-center gap-8", children: [
-                /* @__PURE__ */ r("div", { className: "flex items-center justify-center", children: N(e) }),
-                /* @__PURE__ */ r("p", { className: t("body-extrasmall-medium", "text-primary"), children: a[e] })
-              ] }),
-              /* @__PURE__ */ r("p", { className: t("body-extrasmall-regular", "text-secondary"), children: c(e) })
-            ]
-          },
-          e
-        )) : /* @__PURE__ */ r(
-          "p",
-          {
-            className: t(
-              "body-extrasmall-regular",
-              "text-tertiary text-center"
-            ),
-            children: "No option found"
-          }
-        )
+        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" })
+        ]
       }
     );
   }
 );
-y.displayName = "FormCountryOptionsList";
+S.displayName = "FormCountryOptionsList";
 export {
-  y as FormCountryOptionsList
+  S as FormCountryOptionsList
 };

package/dist/mainstack-design-system565.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-system437.cjs"),l=require("./mainstack-design-system438.cjs");require("./mainstack-design-system436.cjs");require("./mainstack-design-system356.cjs");const u=require("./mainstack-design-system92.cjs"),p=require("./mainstack-design-system265.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"),i=require("react"),a=require("./mainstack-design-system429.cjs"),l=require("./mainstack-design-system430.cjs");require("./mainstack-design-system428.cjs");require("./mainstack-design-system356.cjs");const u=require("./mainstack-design-system92.cjs"),p=require("./mainstack-design-system265.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;

package/dist/mainstack-design-system565.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { InputRoot as n } from "./mainstack-design-system437.js";
-import { InputField as c } from "./mainstack-design-system438.js";
-import "./mainstack-design-system436.js";
+import { InputRoot as n } from "./mainstack-design-system429.js";
+import { InputField as c } from "./mainstack-design-system430.js";
+import "./mainstack-design-system428.js";
 import "./mainstack-design-system356.js";
 import p from "./mainstack-design-system92.js";
 import s from "./mainstack-design-system265.js";

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

package/dist/mainstack-design-system572.js

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

package/dist/mainstack-design-system573.cjs

@@ -1 +1 @@
-"use strict";const n=require("react"),u=c=>{const[a,t]=n.useState(!1),e=n.useRef(null);return n.useLayoutEffect(()=>{e.current=window.matchMedia(c);const s=e.current.matches;return t(!!s),e.current.onchange=r=>{r.matches?t(!0):t(!1)},()=>{e.current&&(e.current.onchange=null)}},[c]),[a]};module.exports=u;
+"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;

package/dist/mainstack-design-system573.js

@@ -1,16 +1,16 @@
-import { useState as s, useRef as u, useLayoutEffect as l } from "react";
-const f = (a) => {
-  const [n, t] = s(!1), e = u(null);
-  return l(() => {
-    e.current = window.matchMedia(a);
-    const c = e.current.matches;
-    return t(!!c), e.current.onchange = (r) => {
-      r.matches ? t(!0) : t(!1);
-    }, () => {
-      e.current && (e.current.onchange = null);
-    };
-  }, [a]), [n];
-};
+import { createContext as e, useContext as n } from "react";
+const o = e(
+  null
+);
+function r() {
+  const t = n(o);
+  if (!t)
+    throw new Error(
+      "useDateRangeContext must be used within a <DateRangeContext />."
+    );
+  return t;
+}
 export {
-  f as default
+  o as DateRangeContext,
+  r as useDateRangeContext
 };

package/dist/mainstack-design-system574.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function m({el:a,query:t}){const i=n.useRef(a),[h,r]=n.useState(!1);return n.useLayoutEffect(()=>{if(!i.current)return;const c=i.current,o=()=>{const e=c.getBoundingClientRect(),d=(t.minWidth===void 0||e.width>=t.minWidth)&&(t.maxWidth===void 0||e.width<=t.maxWidth)&&(t.minHeight===void 0||e.height>=t.minHeight)&&(t.maxHeight===void 0||e.height<=t.maxHeight);r(d)},s=new ResizeObserver(()=>o());return s.observe(c),o(),()=>s.disconnect()},[t]),{ref:i,matches:h}}exports.useContainerMatchMedia=m;
+"use strict";const n=require("react"),u=c=>{const[a,t]=n.useState(!1),e=n.useRef(null);return n.useLayoutEffect(()=>{e.current=window.matchMedia(c);const s=e.current.matches;return t(!!s),e.current.onchange=r=>{r.matches?t(!0):t(!1)},()=>{e.current&&(e.current.onchange=null)}},[c]),[a]};module.exports=u;

package/dist/mainstack-design-system574.js

@@ -1,18 +1,16 @@
-import { useRef as d, useState as m, useLayoutEffect as f } from "react";
-function v({
-  el: c,
-  query: t
-}) {
-  const i = d(c), [h, a] = m(!1);
-  return f(() => {
-    if (!i.current) return;
-    const n = i.current, o = () => {
-      const e = n.getBoundingClientRect(), r = (t.minWidth === void 0 || e.width >= t.minWidth) && (t.maxWidth === void 0 || e.width <= t.maxWidth) && (t.minHeight === void 0 || e.height >= t.minHeight) && (t.maxHeight === void 0 || e.height <= t.maxHeight);
-      a(r);
-    }, s = new ResizeObserver(() => o());
-    return s.observe(n), o(), () => s.disconnect();
-  }, [t]), { ref: i, matches: h };
-}
+import { useState as s, useRef as u, useLayoutEffect as l } from "react";
+const f = (a) => {
+  const [n, t] = s(!1), e = u(null);
+  return l(() => {
+    e.current = window.matchMedia(a);
+    const c = e.current.matches;
+    return t(!!c), e.current.onchange = (r) => {
+      r.matches ? t(!0) : t(!1);
+    }, () => {
+      e.current && (e.current.onchange = null);
+    };
+  }, [a]), [n];
+};
 export {
-  v as useContainerMatchMedia
+  f as default
 };

package/dist/mainstack-design-system575.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),t=o.createContext(null);function r(){const e=o.useContext(t);if(!e)throw new Error("useResponsivePopoverDrawerContext must be used within a <ResponsivePopoverDrawerContext />.");return e}exports.ResponsivePopoverDrawerContext=t;exports.useResponsivePopoverDrawerContext=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react");function m({el:a,query:t}){const i=n.useRef(a),[h,r]=n.useState(!1);return n.useLayoutEffect(()=>{if(!i.current)return;const c=i.current,o=()=>{const e=c.getBoundingClientRect(),d=(t.minWidth===void 0||e.width>=t.minWidth)&&(t.maxWidth===void 0||e.width<=t.maxWidth)&&(t.minHeight===void 0||e.height>=t.minHeight)&&(t.maxHeight===void 0||e.height<=t.maxHeight);r(d)},s=new ResizeObserver(()=>o());return s.observe(c),o(),()=>s.disconnect()},[t]),{ref:i,matches:h}}exports.useContainerMatchMedia=m;

package/dist/mainstack-design-system575.js

@@ -1,14 +1,18 @@
-import { createContext as o, useContext as t } from "react";
-const r = o(null);
-function s() {
-  const e = t(r);
-  if (!e)
-    throw new Error(
-      "useResponsivePopoverDrawerContext must be used within a <ResponsivePopoverDrawerContext />."
-    );
-  return e;
+import { useRef as d, useState as m, useLayoutEffect as f } from "react";
+function v({
+  el: c,
+  query: t
+}) {
+  const i = d(c), [h, a] = m(!1);
+  return f(() => {
+    if (!i.current) return;
+    const n = i.current, o = () => {
+      const e = n.getBoundingClientRect(), r = (t.minWidth === void 0 || e.width >= t.minWidth) && (t.maxWidth === void 0 || e.width <= t.maxWidth) && (t.minHeight === void 0 || e.height >= t.minHeight) && (t.maxHeight === void 0 || e.height <= t.maxHeight);
+      a(r);
+    }, s = new ResizeObserver(() => o());
+    return s.observe(n), o(), () => s.disconnect();
+  }, [t]), { ref: i, matches: h };
 }
 export {
-  r as ResponsivePopoverDrawerContext,
-  s as useResponsivePopoverDrawerContext
+  v as useContainerMatchMedia
 };

package/dist/mainstack-design-system576.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("useDatePickerContext must be used within a <DatePickerContext />.");return e}exports.DatePickerContext=n;exports.useDatePickerContext=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),t=o.createContext(null);function r(){const e=o.useContext(t);if(!e)throw new Error("useResponsivePopoverDrawerContext must be used within a <ResponsivePopoverDrawerContext />.");return e}exports.ResponsivePopoverDrawerContext=t;exports.useResponsivePopoverDrawerContext=r;

package/dist/mainstack-design-system576.js

@@ -1,16 +1,14 @@
-import { createContext as e, useContext as n } from "react";
-const o = e(
-  null
-);
-function c() {
-  const t = n(o);
-  if (!t)
+import { createContext as o, useContext as t } from "react";
+const r = o(null);
+function s() {
+  const e = t(r);
+  if (!e)
     throw new Error(
-      "useDatePickerContext must be used within a <DatePickerContext />."
+      "useResponsivePopoverDrawerContext must be used within a <ResponsivePopoverDrawerContext />."
     );
-  return t;
+  return e;
 }
 export {
-  o as DatePickerContext,
-  c as useDatePickerContext
+  r as ResponsivePopoverDrawerContext,
+  s as useResponsivePopoverDrawerContext
 };

package/dist/mainstack-design-system577.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("useTimePickerContext must be used within a <TimePickerContext />.");return e}exports.TimePickerContext=i;exports.useTimePickerContext=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("useDatePickerContext must be used within a <DatePickerContext />.");return e}exports.DatePickerContext=n;exports.useDatePickerContext=o;