mainstack-design-system 1.14.3 → 1.15.1

package/dist/mainstack-design-system473.js

@@ -1,84 +1,20 @@
-'use client';
-import { jsx as i, Fragment as f } from "react/jsx-runtime";
-import { useCallback as u, useMemo as y, createElement as A } from "react";
-import "./mainstack-design-system357.js";
-import h from "./mainstack-design-system93.js";
-import "./player-Cs7wtvrg.js";
-import { c as v } from "./utils-D85wpvmd.js";
-import { useSelectContext as C } from "./mainstack-design-system597.js";
-import { A as g } from "./index-CY9H_w64.js";
-import { ChipSlot as w } from "./mainstack-design-system427.js";
-import { ChipAvatar as S } from "./mainstack-design-system428.js";
-import { ChipLabel as O } from "./mainstack-design-system426.js";
-import { ChipRoot as b } from "./mainstack-design-system425.js";
-import "./mainstack-design-system429.js";
-const N = ({
-  children: s,
-  ...p
-}) => {
-  const {
-    selectedOption: e,
-    isMultiSelect: a,
-    options: t,
-    setSelectedOption: m,
-    onOptionOpenChange: n
-  } = C(), l = u(
-    (r) => {
-      if (!a || !Array.isArray(e))
-        return e;
-      let o = e;
-      Array.isArray(e) && (o = e.filter(
-        (d) => d !== r?.value
-      )), m(o), n(!0);
-    },
-    [a, n, e, m]
-  ), c = y(() => !a || !Array.isArray(e) ? [] : t.array.filter(
-    (r) => e.includes(r.value)
-  ), [a, t.array, e]);
-  return !a || !Array.isArray(e) ? null : s ? s({
-    selectedOptions: c,
-    onCancelSelectedOption: l
-  }) : /* @__PURE__ */ i(f, { children: e.map((r) => /* @__PURE__ */ A(
-    b,
-    {
-      ...p,
-      key: r,
-      "data-slot": "select-option-input-preview",
-      size: "tiny",
-      className: "mds:w-fit",
-      onClick: () => {
-        const o = t.map.get(r);
-        o && l(o);
-      }
-    },
-    t.map.get(r)?.imgSrc && /* @__PURE__ */ i(
-      S,
-      {
-        size: 24,
-        className: "mds:min-w-24 mds:size-24 mds:min-h-24 mds:*:size-24",
-        children: /* @__PURE__ */ i(
-          g,
-          {
-            alt: "avatar",
-            src: t.map.get(r)?.imgSrc || ""
-          }
-        )
-      }
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { c as m } from "./utils-BWBRqOem.js";
+const d = s, l = d(({ as: t, className: e, ...a }, o) => /* @__PURE__ */ r(
+  t || "span",
+  {
+    "data-slot": "radio-item-label-subtext",
+    className: m(
+      "mds:body-extrasmall-regular",
+      "mds:text-secondary mds:group-has-disabled:text-disabled",
+      e
     ),
-    /* @__PURE__ */ i(
-      O,
-      {
-        className: v(
-          "mds:body-extrasmall-medium",
-          "mds:w-50 mds:truncate mds:block"
-        ),
-        children: t.map.get(r)?.label
-      }
-    ),
-    /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(h, { className: "mds:h-20 mds:w-20", variant: "filled" }) })
-  )) });
-};
-N.displayName = "SelectOptionInputPreview";
+    ref: o,
+    ...a
+  }
+));
+l.displayName = "RadioItemSubtext";
 export {
-  N as SelectOptionInputPreview
+  l as RadioItemSubText
 };

package/dist/mainstack-design-system474.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),v=require("./index-DCgbL-w8.cjs"),C=require("./mainstack-design-system599.cjs"),R=({variant:u="underline",layout:i="horizontal",children:c,value:e,defaultValue:l,onValueChange:d,maxVisibleTabs:b=6,...t})=>{const g=r.useId(),h=t.id??g,[x,T]=r.useState(l??""),n=e!==void 0?e:x,o=a=>{T(a),d?.(a)};return s.jsx(C.TabsContext.Provider,{value:{variant:u,layout:i,activeValue:n,onValueChange:o,tabsId:h,maxVisibleTabs:b},children:s.jsx(v.Root2,{value:n,onValueChange:o,...t,children:c})})};exports.TabsRoot=R;
+'use client';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("react"),j=require("./mainstack-design-system476.cjs"),q=require("./mainstack-design-system477.cjs"),f=require("./mainstack-design-system478.cjs"),r=_.forwardRef(({isError:t,defaultValue:n,isDisabled:c,children:s,isSuccess:l,inputReadOnly:o,options:S,value:i,placeholder:u,id:a,onValueChange:d,...m},p)=>e.jsxs(j.SelectRoot,{...m,options:S,defaultValue:n,value:i,isError:t,isDisabled:c,isSuccess:l,isMultiSelect:!1,onValueChange:d,inputReadOnly:o,ref:p,children:[e.jsx(q.SelectInputField,{isError:t,isSuccess:l,disabled:c,readOnly:o,placeholder:u,id:a}),e.jsx(f.SelectPortal,{children:s})]}));r.displayName="Select";exports.Select=r;

package/dist/mainstack-design-system474.js

@@ -1,43 +1,55 @@
-import { jsx as r } from "react/jsx-runtime";
-import g, { useState as v } from "react";
-import { R as C } from "./index-D8zjPZm-.js";
-import { TabsContext as I } from "./mainstack-design-system599.js";
-const T = ({
-  variant: l = "underline",
-  layout: s = "horizontal",
-  children: i,
-  value: e,
-  defaultValue: d,
-  onValueChange: u,
-  maxVisibleTabs: c = 6,
-  ...t
-}) => {
-  const m = g.useId(), h = t.id ?? m, [f, V] = v(d ?? ""), o = e !== void 0 ? e : f, a = (n) => {
-    V(n), u?.(n);
-  };
-  return /* @__PURE__ */ r(
-    I.Provider,
+'use client';
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { forwardRef as j } from "react";
+import { SelectRoot as s } from "./mainstack-design-system476.js";
+import { SelectInputField as h } from "./mainstack-design-system477.js";
+import { SelectPortal as u } from "./mainstack-design-system478.js";
+const w = j(
+  ({
+    isError: e,
+    defaultValue: m,
+    isDisabled: t,
+    children: f,
+    isSuccess: o,
+    inputReadOnly: r,
+    options: p,
+    value: c,
+    placeholder: i,
+    id: a,
+    onValueChange: d,
+    ...S
+  }, n) => /* @__PURE__ */ x(
+    s,
     {
-      value: {
-        variant: l,
-        layout: s,
-        activeValue: o,
-        onValueChange: a,
-        tabsId: h,
-        maxVisibleTabs: c
-      },
-      children: /* @__PURE__ */ r(
-        C,
-        {
-          value: o,
-          onValueChange: a,
-          ...t,
-          children: i
-        }
-      )
+      ...S,
+      options: p,
+      defaultValue: m,
+      value: c,
+      isError: e,
+      isDisabled: t,
+      isSuccess: o,
+      isMultiSelect: !1,
+      onValueChange: d,
+      inputReadOnly: r,
+      ref: n,
+      children: [
+        /* @__PURE__ */ l(
+          h,
+          {
+            isError: e,
+            isSuccess: o,
+            disabled: t,
+            readOnly: r,
+            placeholder: i,
+            id: a
+          }
+        ),
+        /* @__PURE__ */ l(u, { children: f })
+      ]
     }
-  );
-};
+  )
+);
+w.displayName = "Select";
 export {
-  T as TabsRoot
+  w as Select
 };

package/dist/mainstack-design-system475.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("./index-DCgbL-w8.cjs"),a=require("./utils-Bdd5vx6a.cjs"),t=({className:e,...n})=>s.jsx(o.Content,{"data-slot":"tabs-content",className:a.cn("mds:flex-1 mds:outline-none",e),...n});t.displayName="TabsContent";exports.TabsContent=t;
+'use client';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),j=require("./mainstack-design-system476.cjs"),q=require("./mainstack-design-system477.cjs"),x=require("./mainstack-design-system478.cjs"),M=require("./mainstack-design-system482.cjs"),n=m.forwardRef(({isError:t,defaultValue:r,isDisabled:c,children:i,isSuccess:l,inputReadOnly:o,options:u,value:S,onValueChange:s,placeholder:p,id:d,...a},_)=>e.jsxs(j.SelectRoot,{...a,options:u,value:S,defaultValue:r,isError:t,isDisabled:c,isSuccess:l,isMultiSelect:!0,onValueChange:s,inputReadOnly:o,ref:_,children:[e.jsx(q.SelectInputField,{isError:t,isSuccess:l,disabled:c,readOnly:o,placeholder:p,id:d,children:e.jsx(M.SelectOptionInputPreview,{})}),e.jsx(x.SelectPortal,{children:i})]}));n.displayName="MultiSelect";exports.MultiSelect=n;

package/dist/mainstack-design-system475.js

@@ -1,15 +1,57 @@
-import { jsx as n } from "react/jsx-runtime";
-import { C as s } from "./index-D8zjPZm-.js";
-import { c as a } from "./utils-D85wpvmd.js";
-const e = ({ className: t, ...o }) => /* @__PURE__ */ n(
-  s,
-  {
-    "data-slot": "tabs-content",
-    className: a("mds:flex-1 mds:outline-none", t),
-    ...o
-  }
+'use client';
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { SelectRoot as M } from "./mainstack-design-system476.js";
+import { SelectInputField as h } from "./mainstack-design-system477.js";
+import { SelectPortal as j } from "./mainstack-design-system478.js";
+import { SelectOptionInputPreview as w } from "./mainstack-design-system482.js";
+const I = x(
+  ({
+    isError: e,
+    defaultValue: m,
+    isDisabled: r,
+    children: i,
+    isSuccess: o,
+    inputReadOnly: l,
+    options: p,
+    value: c,
+    onValueChange: f,
+    placeholder: d,
+    id: n,
+    ...S
+  }, u) => /* @__PURE__ */ a(
+    M,
+    {
+      ...S,
+      options: p,
+      value: c,
+      defaultValue: m,
+      isError: e,
+      isDisabled: r,
+      isSuccess: o,
+      isMultiSelect: !0,
+      onValueChange: f,
+      inputReadOnly: l,
+      ref: u,
+      children: [
+        /* @__PURE__ */ t(
+          h,
+          {
+            isError: e,
+            isSuccess: o,
+            disabled: r,
+            readOnly: l,
+            placeholder: d,
+            id: n,
+            children: /* @__PURE__ */ t(w, {})
+          }
+        ),
+        /* @__PURE__ */ t(j, { children: i })
+      ]
+    }
+  )
 );
-e.displayName = "TabsContent";
+I.displayName = "MultiSelect";
 export {
-  e as TabsContent
+  I as MultiSelect
 };

package/dist/mainstack-design-system476.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("react"),u=require("./index-DCgbL-w8.cjs"),T=require("./utils-Bdd5vx6a.cjs"),p=require("./mainstack-design-system600.cjs"),q=require("./mainstack-design-system599.cjs"),L=require("./mainstack-design-system477.cjs"),v=e=>{if(!d.isValidElement(e))return null;const s=e;return{value:s.props.value,children:s.props.children}},m=({className:e,children:s,...i})=>{const{variant:n,activeValue:c,onValueChange:f,maxVisibleTabs:r}=q.useTabsContext(),a=d.Children.toArray(s);if(a.length<=r)return o.jsx(u.List,{className:T.cn(p.tabsListVariants({variant:n}),e),...i,children:s});const x=a.slice(0,r),l=a.slice(r),w=l.map(v).filter(t=>t!==null),b=l.find(t=>v(t)?.value===c);return o.jsxs(u.List,{className:T.cn(p.tabsListVariants({variant:n}),e),...i,children:[x,b,o.jsx(L.TabsOverflowDropdown,{tabs:w,activeValue:c,variant:n,onSelect:t=>f?.(t),hasActiveTabInDropdown:!!b})]})};m.displayName="TabsList";exports.TabsList=m;
+'use client';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),m=require("./index-C8aODXfJ.cjs"),D=require("./index-4R9KShCu.cjs"),n=require("react"),I=require("./mainstack-design-system606.cjs"),y=require("./mainstack-design-system607.cjs"),b=n.forwardRef(({isDisabled:x,isError:C,isMultiSelect:s=!1,isSuccess:d,children:h,value:e,defaultValue:i,inputReadOnly:j,isCreatableSelect:q,options:a=[],isOptionOpen:A,onOptionOpenChange:P,onValueChange:u,onOptionSelect:R},r)=>{const f=n.useRef(null),[t,_]=n.useState(y.parseSelectOptions(a)),[p,v]=m.useControllableState({prop:e,defaultProp:y.mapDefaultValuesToSelectedOption({isMultiSelect:s,defaultValue:i,options:a}),onChange:u}),[E,c]=n.useState(()=>typeof e=="string"?t.map.get(e)?.label||"":typeof i=="string"&&t.map.get(i)?.label||""),[O,S]=m.useControllableState({prop:A,defaultProp:!1,onChange:P}),[T,g]=n.useState("idle");return n.useEffect(()=>{s||Array.isArray(e)||c(t.map.get(e)?.label||"")},[s,t.map,e]),l.jsx(I.SelectContext.Provider,{value:{defaultValue:i,options:t,selectedOption:p,isOptionOpen:O,isDisabled:x,isError:C,isMultiSelect:s,isSuccess:d,inputValue:E,inputReadOnly:j,previousAction:T,isCreatableSelect:q,rootElementRef:f,setOptions:_,setPreviousAction:g,setInputValue:c,setSelectedOption:v,onOptionOpenChange:S,onValueChange:u,onOptionSelect:R},children:l.jsx(D.Popover,{open:O,onOpenChange:o=>{S(o),p&&!Array.isArray(p)&&!o&&(c(t.map.get(p)?.label||""),g("selection"))},children:l.jsx("div",{ref:o=>{f.current=o,typeof r=="function"?r(o):typeof r=="object"&&r?.current&&(r.current=o)},"data-slot":"select-root",children:h})})})});b.displayName="SelectRoot";exports.SelectRoot=b;

package/dist/mainstack-design-system476.js

@@ -1,52 +1,93 @@
-import { jsx as m, jsxs as w } from "react/jsx-runtime";
-import v from "react";
-import { L as p } from "./index-D8zjPZm-.js";
-import { c as f } from "./utils-D85wpvmd.js";
-import { tabsListVariants as b } from "./mainstack-design-system600.js";
-import { useTabsContext as x } from "./mainstack-design-system599.js";
-import { TabsOverflowDropdown as L } from "./mainstack-design-system477.js";
-const u = (r) => {
-  if (!v.isValidElement(r)) return null;
-  const t = r;
-  return {
-    value: t.props.value,
-    children: t.props.children
-  };
-}, V = ({ className: r, children: t, ...n }) => {
-  const { variant: o, activeValue: i, onValueChange: T, maxVisibleTabs: s } = x(), a = v.Children.toArray(t);
-  if (a.length <= s)
-    return /* @__PURE__ */ m(
-      p,
+'use client';
+import { jsx as a } from "react/jsx-runtime";
+import { u as y } from "./index-437EL2iq.js";
+import { P as I } from "./index-RoCFhqzC.js";
+import { forwardRef as N, useRef as T, useState as c, useEffect as k } from "react";
+import { SelectContext as q } from "./mainstack-design-system606.js";
+import { parseSelectOptions as z, mapDefaultValuesToSelectedOption as B } from "./mainstack-design-system607.js";
+const F = N(
+  ({
+    isDisabled: b,
+    isError: h,
+    isMultiSelect: r = !1,
+    isSuccess: A,
+    children: C,
+    value: t,
+    defaultValue: p,
+    inputReadOnly: P,
+    isCreatableSelect: S,
+    options: l = [],
+    isOptionOpen: x,
+    onOptionOpenChange: d,
+    onValueChange: m,
+    onOptionSelect: j
+  }, n) => {
+    const f = T(null), [o, E] = c(
+      z(l)
+    ), [i, R] = y({
+      prop: t,
+      defaultProp: B({
+        isMultiSelect: r,
+        defaultValue: p,
+        options: l
+      }),
+      onChange: m
+    }), [v, s] = c(() => typeof t == "string" ? o.map.get(t)?.label || "" : typeof p == "string" && o.map.get(p)?.label || ""), [O, u] = y({
+      prop: x,
+      defaultProp: !1,
+      onChange: d
+    }), [D, g] = c("idle");
+    return k(() => {
+      r || Array.isArray(t) || s(o.map.get(t)?.label || "");
+    }, [r, o.map, t]), /* @__PURE__ */ a(
+      q.Provider,
       {
-        className: f(b({ variant: o }), r),
-        ...n,
-        children: t
-      }
-    );
-  const d = a.slice(0, s), l = a.slice(s), h = l.map(u).filter((e) => e !== null), c = l.find((e) => u(e)?.value === i);
-  return /* @__PURE__ */ w(
-    p,
-    {
-      className: f(b({ variant: o }), r),
-      ...n,
-      children: [
-        d,
-        c,
-        /* @__PURE__ */ m(
-          L,
+        value: {
+          defaultValue: p,
+          options: o,
+          selectedOption: i,
+          isOptionOpen: O,
+          isDisabled: b,
+          isError: h,
+          isMultiSelect: r,
+          isSuccess: A,
+          inputValue: v,
+          inputReadOnly: P,
+          previousAction: D,
+          isCreatableSelect: S,
+          rootElementRef: f,
+          setOptions: E,
+          setPreviousAction: g,
+          setInputValue: s,
+          setSelectedOption: R,
+          onOptionOpenChange: u,
+          onValueChange: m,
+          onOptionSelect: j
+        },
+        children: /* @__PURE__ */ a(
+          I,
           {
-            tabs: h,
-            activeValue: i,
-            variant: o,
-            onSelect: (e) => T?.(e),
-            hasActiveTabInDropdown: !!c
+            open: O,
+            onOpenChange: (e) => {
+              u(e), i && !Array.isArray(i) && !e && (s(o.map.get(i)?.label || ""), g("selection"));
+            },
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                ref: (e) => {
+                  f.current = e, typeof n == "function" ? n(e) : typeof n == "object" && n?.current && (n.current = e);
+                },
+                "data-slot": "select-root",
+                children: C
+              }
+            )
           }
         )
-      ]
-    }
-  );
-};
-V.displayName = "TabsList";
+      }
+    );
+  }
+);
+F.displayName = "SelectRoot";
 export {
-  V as TabsList
+  F as SelectRoot
 };

package/dist/mainstack-design-system477.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-B43IDo7j.cjs"),n=require("./utils-Bdd5vx6a.cjs");require("./mainstack-design-system357.cjs");const l=require("./mainstack-design-system196.cjs");require("react");require("./player-BBiZ5mNK.cjs");const i=({tabs:d,activeValue:o,onSelect:t,hasActiveTabInDropdown:m})=>e.jsxs(s.DropdownMenu,{children:[e.jsx(s.DropdownMenuTrigger,{asChild:!0,children:e.jsxs("div",{className:n.cn("mds:flex mds:items-center mds:gap-4 mds:p-10 mds:text-secondary mds:body-extrasmall-book"),"data-state":m?"active":"inactive",children:[e.jsx("p",{children:"More"}),e.jsx(l,{className:n.cn("mds:size-16 mds:transition-transform mds:duration-200","group-data-[state=open]:rotate-180")})]})}),e.jsx(s.DropdownMenuPortal,{children:e.jsx(s.DropdownMenuContent,{align:"end",sideOffset:5,className:"mds:z-100 mds:min-w-188 mds:flex mds:flex-col mds:gap-8 mds:bg-surface-neutral-l1 mds:shadow-200 mds:p-8 mds:rounded-12",children:d.map(r=>{const a=r.value===o;return e.jsx(s.DropdownMenuItem,{onSelect:()=>t(r.value),className:n.cn("mds:relative mds:flex mds:cursor-pointer mds:select-none mds:items-center mds:rounded-8 mds:p-8 mds:body-extrasmall-medium mds:outline-none mds:transition-colors mds:hover:bg-surface-neutral-l4 mds:focus:bg-surface-neutral-l4",a&&"mds:bg-surface-neutral-l4 mds:text-primary"),children:r.children},r.value)})})})]});exports.TabsOverflowDropdown=i;
+'use client';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),j=require("./mainstack-design-system449.cjs"),O=require("./mainstack-design-system450.cjs");require("./mainstack-design-system448.cjs");require("./mainstack-design-system366.cjs");const v=require("./mainstack-design-system93.cjs"),N=require("./mainstack-design-system196.cjs");require("./player-BoD_1Mo-.cjs");const o=require("./utils-Dp-J9Ksy.cjs"),R=require("./mainstack-design-system606.cjs"),w=require("./index-4R9KShCu.cjs"),d=g.forwardRef(({onClick:r,children:u,className:p,onChange:i,...a},m)=>{const{isOptionOpen:s,inputValue:x,inputReadOnly:c,isDisabled:f,isError:I,isSuccess:h,selectedOption:l,isMultiSelect:n,setSelectedOption:q,setPreviousAction:_,setInputValue:b,onOptionOpenChange:y}=R.useSelectContext();return e.jsx(w.PopoverAnchor,{role:"combobox","aria-haspopup":"listbox","aria-expanded":s,"aria-controls":"select-portal","aria-owns":"select-portal",children:e.jsxs(j.InputRoot,{className:o.cn(n&&"mds:h-auto mds:py-10 ",p),children:[e.jsxs("div",{className:o.cn("mds:flex mds:flex-1 mds:h-auto mds:min-h-auto mds:items-center mds:flex-wrap mds:gap-6"),children:[u,e.jsx(O.InputField,{...a,readOnly:c,"data-slot":"select-input-field","data-select-options-opened":s,tabIndex:3,value:x,isError:I,isSuccess:h,disabled:f,className:o.cn(n&&"mds:h-auto mds:min-h-auto"),onChange:t=>{i&&i(t),_("typing"),b(t.currentTarget.value)},onClick:t=>{r&&r(t);const S=t.currentTarget;y(!0),c||S.focus()},ref:m,...a})]}),e.jsxs("div",{className:"mds:flex mds:items-center mds:gap-6",children:[n&&Array.isArray(l)&&l.length>0&&e.jsx(v,{role:"button",variant:"filled",className:"mds:size-20 mds:cursor-pointer mds:text-secondary",onClick:()=>{q([])}}),e.jsx(N,{"data-select-options-opened":s,className:"mds:size-16 mds:transition-transform mds:transition-1000 mds:data-[select-options-opened=true]:rotate-180"})]})]})})});d.displayName="SelectInputField";exports.SelectInputField=d;

package/dist/mainstack-design-system477.js

@@ -1,61 +1,109 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { D as l, a as i, b as c, c as u, d as p } from "./index-BgRpW4T4.js";
-import { c as r } from "./utils-D85wpvmd.js";
-import "./mainstack-design-system357.js";
-import f from "./mainstack-design-system196.js";
-import "react";
-import "./player-Cs7wtvrg.js";
-const M = ({
-  tabs: o,
-  activeValue: m,
-  onSelect: n,
-  hasActiveTabInDropdown: a
-}) => /* @__PURE__ */ d(l, { children: [
-  /* @__PURE__ */ e(i, { asChild: !0, children: /* @__PURE__ */ d(
-    "div",
-    {
-      className: r(
-        "mds:flex mds:items-center mds:gap-4 mds:p-10 mds:text-secondary mds:body-extrasmall-book"
-      ),
-      "data-state": a ? "active" : "inactive",
-      children: [
-        /* @__PURE__ */ e("p", { children: "More" }),
-        /* @__PURE__ */ e(
-          f,
+'use client';
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { InputRoot as S } from "./mainstack-design-system449.js";
+import { InputField as w } from "./mainstack-design-system450.js";
+import "./mainstack-design-system448.js";
+import "./mainstack-design-system366.js";
+import A from "./mainstack-design-system93.js";
+import C from "./mainstack-design-system196.js";
+import "./player-DtDfxekb.js";
+import { c as i } from "./utils-BWBRqOem.js";
+import { useSelectContext as F } from "./mainstack-design-system606.js";
+import { d as R } from "./index-RoCFhqzC.js";
+const j = N(
+  ({ onClick: a, children: p, className: c, onChange: n, ...d }, u) => {
+    const {
+      isOptionOpen: o,
+      inputValue: f,
+      inputReadOnly: m,
+      isDisabled: h,
+      isError: x,
+      isSuccess: y,
+      selectedOption: l,
+      isMultiSelect: s,
+      setSelectedOption: b,
+      setPreviousAction: I,
+      setInputValue: O,
+      onOptionOpenChange: g
+    } = F();
+    return /* @__PURE__ */ t(
+      R,
+      {
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": o,
+        "aria-controls": "select-portal",
+        "aria-owns": "select-portal",
+        children: /* @__PURE__ */ r(
+          S,
           {
-            className: r(
-              "mds:size-16 mds:transition-transform mds:duration-200",
-              "group-data-[state=open]:rotate-180"
-            )
+            className: i(s && "mds:h-auto mds:py-10 ", c),
+            children: [
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: i(
+                    "mds:flex mds:flex-1 mds:h-auto mds:min-h-auto mds:items-center mds:flex-wrap mds:gap-6"
+                  ),
+                  children: [
+                    p,
+                    /* @__PURE__ */ t(
+                      w,
+                      {
+                        ...d,
+                        readOnly: m,
+                        "data-slot": "select-input-field",
+                        "data-select-options-opened": o,
+                        tabIndex: 3,
+                        value: f,
+                        isError: x,
+                        isSuccess: y,
+                        disabled: h,
+                        className: i(s && "mds:h-auto mds:min-h-auto"),
+                        onChange: (e) => {
+                          n && n(e), I("typing"), O(e.currentTarget.value);
+                        },
+                        onClick: (e) => {
+                          a && a(e);
+                          const v = e.currentTarget;
+                          g(!0), m || v.focus();
+                        },
+                        ref: u,
+                        ...d
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r("div", { className: "mds:flex mds:items-center mds:gap-6", children: [
+                s && Array.isArray(l) && l.length > 0 && /* @__PURE__ */ t(
+                  A,
+                  {
+                    role: "button",
+                    variant: "filled",
+                    className: "mds:size-20 mds:cursor-pointer mds:text-secondary",
+                    onClick: () => {
+                      b([]);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  C,
+                  {
+                    "data-select-options-opened": o,
+                    className: "mds:size-16 mds:transition-transform mds:transition-1000 mds:data-[select-options-opened=true]:rotate-180"
+                  }
+                )
+              ] })
+            ]
           }
         )
-      ]
-    }
-  ) }),
-  /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-    u,
-    {
-      align: "end",
-      sideOffset: 5,
-      className: "mds:z-100 mds:min-w-188 mds:flex mds:flex-col mds:gap-8 mds:bg-surface-neutral-l1 mds:shadow-200 mds:p-8 mds:rounded-12",
-      children: o.map((s) => {
-        const t = s.value === m;
-        return /* @__PURE__ */ e(
-          p,
-          {
-            onSelect: () => n(s.value),
-            className: r(
-              "mds:relative mds:flex mds:cursor-pointer mds:select-none mds:items-center mds:rounded-8 mds:p-8 mds:body-extrasmall-medium mds:outline-none mds:transition-colors mds:hover:bg-surface-neutral-l4 mds:focus:bg-surface-neutral-l4",
-              t && "mds:bg-surface-neutral-l4 mds:text-primary"
-            ),
-            children: s.children
-          },
-          s.value
-        );
-      })
-    }
-  ) })
-] });
+      }
+    );
+  }
+);
+j.displayName = "SelectInputField";
 export {
-  M as TabsOverflowDropdown
+  j as SelectInputField
 };

package/dist/mainstack-design-system478.cjs

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),l=require("./index-CpE6WAgy.cjs"),u=require("./utils-Bdd5vx6a.cjs");function d(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const f=d(i),c=f.forwardRef(({className:e,asChild:n=!1,children:t,...r},o)=>{const s=n?l.Slot:"span";return a.jsx(s,{ref:o,"data-slot":"tag-icon",className:u.cn("mds:inline-flex mds:items-center mds:justify-center mds:shrink-0",e),...r,children:t})});c.displayName="TagIcon";exports.TagIcon=c;
+'use client';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("./index-4R9KShCu.cjs"),p=require("react"),m=require("./utils-Dp-J9Ksy.cjs"),u=require("./mainstack-design-system606.cjs"),a=p.forwardRef(({children:i,onWheel:t,onTouchMove:o,className:c,...l},d)=>{const{isOptionOpen:n}=u.useSelectContext();return s.jsx(r.PopoverPortal,{forceMount:!0,children:s.jsx(r.PopoverContent,{"data-slot":"select-portal",role:"listbox",sideOffset:6,"data-select-options-opened":n,className:m.cn(" mds:hidden  mds:will-change-transform mds:z-100  mds:data-[state=open]:animate-content-fade-in mds:animate-content-fade-out mds:w-(--radix-popover-trigger-width) ",n&&"mds:block",c),ref:d,onWheel:e=>{e.stopPropagation(),t&&t(e)},onTouchMove:e=>{e.stopPropagation(),o&&o(e)},...l,children:i})})});a.displayName="SelectPortal";exports.SelectPortal=a;