@pismo/marola 0.0.1-alpha.15 → 0.0.1-alpha.16

package/dist/SelectButton-DWZ2BRaX.js

@@ -0,0 +1,44 @@
+import './assets/SelectButton.css';
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import * as o from "react";
+import { forwardRef as d } from "react";
+import { c as m } from "./clsx-DB4S2d7J.js";
+import { Typography as i } from "./components/Typography/Typography.js";
+const u = "_select_193rj_1", h = "_select__listbox_193rj_4", w = "_select__listbox__option_193rj_14", C = "_select__listbox__option__icon_193rj_22", j = "_select__listbox__option__text_193rj_26", v = "_select__list__option__icon_193rj_46", _ = {
+  select: u,
+  select__listbox: h,
+  select__listbox__option: w,
+  select__listbox__option__icon: C,
+  select__listbox__option__text: j,
+  "select__listbox__option--disabled": "_select__listbox__option--disabled_193rj_29",
+  "select__listbox__option--selected": "_select__listbox__option--selected_193rj_38",
+  select__list__option__icon: v,
+  "select-button": "_select-button_193rj_51",
+  "select-button__text": "_select-button__text_193rj_66",
+  "select-button__icon": "_select-button__icon_193rj_75",
+  "select-button--active": "_select-button--active_193rj_81"
+}, f = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M2.11104 4.9999C2.36691 4.9999 2.62291 5.09756 2.81791 5.29287L8.11104 10.5843L13.4048 5.29053C13.7954 4.8999 14.4282 4.8999 14.8188 5.29053C15.2095 5.68115 15.2095 6.31396 14.8188 6.70459L8.81885 12.7046C8.42822 13.0952 7.79541 13.0952 7.40479 12.7046L1.40479 6.70459C1.01416 6.31396 1.01416 5.68115 1.40479 5.29053C1.59854 5.09678 1.85479 4.9999 2.11104 4.9999Z", fill: "currentColor" })), g = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M13.8889 11C13.633 11 13.377 10.9023 13.182 10.707L7.8889 5.41563L2.59515 10.7094C2.20453 11.1 1.57172 11.1 1.18109 10.7094C0.790466 10.3188 0.790466 9.68594 1.18109 9.29532L7.18109 3.29532C7.57172 2.90469 8.20453 2.90469 8.59515 3.29532L14.5952 9.29532C14.9858 9.68594 14.9858 10.3188 14.5952 10.7094C14.4014 10.9031 14.1452 11 13.8889 11Z", fill: "#3F3D4B", fillOpacity: 0.88 })), N = d((t, n) => {
+  const { children: r, disabled: a, className: b, "data-testid": p, prefix: s, onClick: x } = t, l = t["aria-expanded"];
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      className: m(b, l ? _["select-button--active"] : "", _["select-button"]),
+      type: "button",
+      onClick: x,
+      disabled: a,
+      "data-testid": p,
+      ref: n,
+      children: [
+        /* @__PURE__ */ c("span", { className: _["select-button__text"], children: [
+          s && /* @__PURE__ */ e(i, { element: "span", variant: "body-small", children: s }),
+          /* @__PURE__ */ e(i, { element: "span", variant: "body-small", children: r })
+        ] }),
+        /* @__PURE__ */ e("span", { className: _["select-button__icon"], children: l ? /* @__PURE__ */ e(g, {}) : /* @__PURE__ */ e(f, {}) })
+      ]
+    }
+  );
+});
+export {
+  N as S,
+  _ as s
+};

package/dist/assets/InputSearch.css

@@ -1 +1 @@
-._inputSearch_lmxu2_1 input[type=search]::-webkit-search-cancel-button{width:1rem;height:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_3694_1860)'%3e%3cpath%20d='M7.97207%206.94064L9.46895%205.46876C9.7627%205.17814%2010.2377%205.17814%2010.5033%205.46876C10.8221%205.76251%2010.8221%206.23751%2010.5033%206.50314L9.05957%207.97189L10.5033%209.46876C10.8221%209.76251%2010.8221%2010.2375%2010.5033%2010.5031C10.2377%2010.8219%209.7627%2010.8219%209.46895%2010.5031L7.97207%209.05939L6.50332%2010.5031C6.2377%2010.8219%205.7627%2010.8219%205.46895%2010.5031C5.17832%2010.2375%205.17832%209.76251%205.46895%209.46876L6.94082%207.97189L5.46895%206.50314C5.17832%206.23751%205.17832%205.76251%205.46895%205.46876C5.7627%205.17814%206.2377%205.17814%206.50332%205.46876L7.97207%206.94064Z'%20fill='%23838192'/%3e%3cpath%20opacity='0.4'%20d='M0%208C0%203.58125%203.58125%200%208%200C12.4187%200%2016%203.58125%2016%208C16%2012.4187%2012.4187%2016%208%2016C3.58125%2016%200%2012.4187%200%208ZM5.46875%206.50313L6.94063%207.97188L5.46875%209.46875C5.17812%209.7625%205.17812%2010.2375%205.46875%2010.5031C5.7625%2010.8219%206.2375%2010.8219%206.50313%2010.5031L7.97188%209.05937L9.46875%2010.5031C9.7625%2010.8219%2010.2375%2010.8219%2010.5031%2010.5031C10.8219%2010.2375%2010.8219%209.7625%2010.5031%209.46875L9.05937%207.97188L10.5031%206.50313C10.8219%206.2375%2010.8219%205.7625%2010.5031%205.46875C10.2375%205.17812%209.7625%205.17812%209.46875%205.46875L7.97188%206.94063L6.50313%205.46875C6.2375%205.17812%205.7625%205.17812%205.46875%205.46875C5.17812%205.7625%205.17812%206.2375%205.46875%206.50313Z'%20fill='%23838192'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3694_1860'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat 50% 50%;background-size:contain;border-radius:50%;opacity:0}._inputSearch_lmxu2_1 input[type=search]:focus::-webkit-search-cancel-button{pointer-events:all;cursor:pointer;opacity:1}
+._inputSearch_114e1_1 input[type=search]::-webkit-search-cancel-button{width:1rem;height:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_3694_1860)'%3e%3cpath%20d='M7.97207%206.94064L9.46895%205.46876C9.7627%205.17814%2010.2377%205.17814%2010.5033%205.46876C10.8221%205.76251%2010.8221%206.23751%2010.5033%206.50314L9.05957%207.97189L10.5033%209.46876C10.8221%209.76251%2010.8221%2010.2375%2010.5033%2010.5031C10.2377%2010.8219%209.7627%2010.8219%209.46895%2010.5031L7.97207%209.05939L6.50332%2010.5031C6.2377%2010.8219%205.7627%2010.8219%205.46895%2010.5031C5.17832%2010.2375%205.17832%209.76251%205.46895%209.46876L6.94082%207.97189L5.46895%206.50314C5.17832%206.23751%205.17832%205.76251%205.46895%205.46876C5.7627%205.17814%206.2377%205.17814%206.50332%205.46876L7.97207%206.94064Z'%20fill='%23838192'/%3e%3cpath%20opacity='0.4'%20d='M0%208C0%203.58125%203.58125%200%208%200C12.4187%200%2016%203.58125%2016%208C16%2012.4187%2012.4187%2016%208%2016C3.58125%2016%200%2012.4187%200%208ZM5.46875%206.50313L6.94063%207.97188L5.46875%209.46875C5.17812%209.7625%205.17812%2010.2375%205.46875%2010.5031C5.7625%2010.8219%206.2375%2010.8219%206.50313%2010.5031L7.97188%209.05937L9.46875%2010.5031C9.7625%2010.8219%2010.2375%2010.8219%2010.5031%2010.5031C10.8219%2010.2375%2010.8219%209.7625%2010.5031%209.46875L9.05937%207.97188L10.5031%206.50313C10.8219%206.2375%2010.8219%205.7625%2010.5031%205.46875C10.2375%205.17812%209.7625%205.17812%209.46875%205.46875L7.97188%206.94063L6.50313%205.46875C6.2375%205.17812%205.7625%205.17812%205.46875%205.46875C5.17812%205.7625%205.17812%206.2375%205.46875%206.50313Z'%20fill='%23838192'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3694_1860'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat 50% 50%;background-size:contain;border-radius:50%;opacity:0}._inputSearch_114e1_1 input[type=search]:focus::-webkit-search-cancel-button{margin-left:1rem;pointer-events:all;cursor:pointer;opacity:1}

package/dist/assets/SelectButton.css

@@ -1 +1 @@
-._select_yw431_1{background-color:red}._select__listbox_yw431_4{min-width:10.75rem;padding:.5rem;margin-top:.25rem;background-color:#fff;border-radius:var(--border-radius);box-shadow:0 6px 12px rgba(var(--black-100-rgb),20%)}._select__listbox__option_yw431_12{display:flex;padding:.625rem;color:rgba(var(--gray-95-rgb),88%);list-style:none;cursor:pointer;border-radius:var(--border-radius-soft)}._select__listbox__option__icon_yw431_20{display:flex;margin-right:.5rem}._select__listbox__option__text_yw431_24{font-weight:700}._select__listbox__option_yw431_12:hover:not(._select__listbox__option--disabled_yw431_27){padding:.625rem;color:var(--accent);background-color:rgba(var(--black-100-rgb),4%);border-radius:var(--border-radius-soft)}._select__listbox__option_yw431_12:active:not(._select__listbox__option--disabled_yw431_27){color:var(--accent-dark)}._select__listbox__option--selected_yw431_36{background-color:var(--accent-lighter)}._select__listbox__option--disabled_yw431_27{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:transparent}._select__listbox__option--disabled_yw431_27 ._select__list__option__icon_yw431_44{color:rgba(var(--gray-95-rgb),25%);fill:rgba(var(--gray-95-rgb),25%)}._select-button_yw431_49{display:flex;align-items:center;justify-content:space-between;width:11.875rem;padding:.625rem 1rem;color:rgba(var(--gray-95-rgb),88%);cursor:pointer;background-color:var(--white-100);border:1px solid rgba(var(--black-100-rgb),6%);border-radius:var(--border-radius);outline:none}._select-button__text_yw431_62{width:100%;overflow:hidden;text-align:start;text-overflow:ellipsis;text-wrap:nowrap}._select-button__text__prefix_yw431_69{margin-right:.625rem}._select-button__icon_yw431_72{display:flex}._select-button__icon_yw431_72 svg{color:rgba(var(--gray-95-rgb),88%)}._select-button--active_yw431_78{border:1px solid var(--accent)}._select-button_yw431_49:disabled{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:1px solid var(--gray-10)}._select-button_yw431_49:disabled ._select-button__icon_yw431_72 svg{color:rgba(var(--gray-95-rgb),25%)}._select-button_yw431_49:hover:not(._select-button_yw431_49:disabled){border:1px solid var(--gray-25)}._select-button_yw431_49:focus:not(._select-button_yw431_49:disabled),._select-button_yw431_49:active:not(._select-button_yw431_49:disabled){border:1px solid var(--accent)}
+._select_193rj_1{background-color:red}._select__listbox_193rj_4{min-width:10.75rem;max-height:400px;padding:.5rem;margin-top:.25rem;overflow-y:auto;background-color:#fff;border-radius:var(--border-radius);box-shadow:0 6px 12px rgba(var(--black-100-rgb),20%)}._select__listbox__option_193rj_14{display:flex;padding:.625rem;color:rgba(var(--gray-95-rgb),88%);list-style:none;cursor:pointer;border-radius:var(--border-radius-soft)}._select__listbox__option__icon_193rj_22{display:flex;margin-right:.5rem}._select__listbox__option__text_193rj_26{font-weight:700}._select__listbox__option_193rj_14:hover:not(._select__listbox__option--disabled_193rj_29){padding:.625rem;color:var(--accent);background-color:rgba(var(--black-100-rgb),4%);border-radius:var(--border-radius-soft)}._select__listbox__option_193rj_14:active:not(._select__listbox__option--disabled_193rj_29){color:var(--accent-dark)}._select__listbox__option--selected_193rj_38{background-color:var(--accent-lighter)}._select__listbox__option--disabled_193rj_29{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:transparent}._select__listbox__option--disabled_193rj_29 ._select__list__option__icon_193rj_46{color:rgba(var(--gray-95-rgb),25%);fill:rgba(var(--gray-95-rgb),25%)}._select-button_193rj_51{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:11.875rem;min-width:fit-content;padding:.625rem 1rem;color:rgba(var(--gray-95-rgb),88%);cursor:pointer;background-color:var(--white-100);border:1px solid rgba(var(--black-100-rgb),6%);border-radius:var(--border-radius);outline:none}._select-button__text_193rj_66{display:flex;gap:.5rem;width:100%;overflow:hidden;text-align:start;text-overflow:ellipsis;text-wrap:nowrap}._select-button__icon_193rj_75{display:flex}._select-button__icon_193rj_75 svg{color:rgba(var(--gray-95-rgb),88%)}._select-button--active_193rj_81{border:1px solid var(--accent)}._select-button_193rj_51:disabled{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:1px solid var(--gray-10)}._select-button_193rj_51:disabled ._select-button__icon_193rj_75 svg{color:rgba(var(--gray-95-rgb),25%)}._select-button_193rj_51:hover:not(._select-button_193rj_51:disabled){border:1px solid var(--gray-25)}._select-button_193rj_51:focus:not(._select-button_193rj_51:disabled),._select-button_193rj_51:active:not(._select-button_193rj_51:disabled){border:1px solid var(--accent)}

package/dist/components/InputSearch/InputSearch.js

@@ -1,13 +1,13 @@
 import '../../assets/InputSearch.css';
 import { jsx as e } from "react/jsx-runtime";
 import { c as m } from "../../clsx-DB4S2d7J.js";
-import { Icon as u } from "../Icon/Icon.js";
-import { Input as p } from "../Input/Input.js";
-const l = "_inputSearch_lmxu2_1", h = {
+import { Icon as p } from "../Icon/Icon.js";
+import { Input as u } from "../Input/Input.js";
+const l = "_inputSearch_114e1_1", h = {
   inputSearch: l
 };
 let n;
-const x = ({
+const d = ({
   classNameWrapper: r,
   triggerDelay: o = 500,
   value: c,
@@ -19,16 +19,16 @@ const x = ({
     n && clearTimeout(n), n = setTimeout(() => i(t), o);
   };
   return /* @__PURE__ */ e("div", { className: m(h.inputSearch, r), children: /* @__PURE__ */ e(
-    p,
+    u,
     {
       type: "search",
       ...a,
-      leftIcon: /* @__PURE__ */ e(u, { icon: "magnifying-glass" }),
+      leftIcon: /* @__PURE__ */ e(p, { icon: "magnifying-glass" }),
       defaultValue: c,
       onChange: (t) => s(t)
     }
   ) });
 };
 export {
-  x as InputSearch
+  d as InputSearch
 };

package/dist/components/Select/Select.d.ts

@@ -1,23 +1,24 @@
 import { ReactNode } from 'react';
 
-type SelectOptionProps = {
+export type SelectOptionProps = {
     disabled?: boolean;
-    value: string | number;
+    value: string;
     children: ReactNode;
     icon?: ReactNode;
     className?: string;
     'data-testid'?: string;
 };
-type SelectProps = {
-    children: ReactNode;
+export declare const SelectOption: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export type SelectProps = {
+    children?: ReactNode;
     disabled?: boolean;
-    placeholder?: string | number;
-    ariaLabelledby?: string;
-    onChange?: (value: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
+    placeholder?: string;
+    prefix?: string;
     className?: string;
+    value?: string;
     'data-testid'?: string;
+    onChange?: (value: string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
 };
-export declare const Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
 declare const Select: {
     (props: SelectProps): import("react/jsx-runtime").JSX.Element;
     Option: (props: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.js

@@ -1,8 +1,8 @@
 import { jsx as h, jsxs as Oe } from "react/jsx-runtime";
-import { c as Se } from "../../clsx-DB4S2d7J.js";
+import { c as Ve } from "../../clsx-DB4S2d7J.js";
 import { Typography as Ke } from "../Typography/Typography.js";
-import { s as I, B as ze } from "../../SelectButton-DWtqAiwt.js";
-import { a as g, _ as Ve } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
+import { s as H, S as ze } from "../../SelectButton-DWZ2BRaX.js";
+import { a as g, _ as _e } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
 import * as s from "react";
 import { g as we, a as ke, u as X, e as ne, P as l, b as le, c as Ie, d as Me } from "../../index-CqjC7P5Y.js";
 import { u as Je, c as se, a as ye, L as Q } from "../../combineHooksSlotProps-BHqhiBfc.js";
@@ -29,7 +29,7 @@ ke(Ae, ["root", "disabled", "selected", "highlighted"]);
 function lt(n) {
   const {
     value: o,
-    label: i,
+    label: u,
     disabled: a,
     rootRef: r,
     id: c
@@ -41,27 +41,27 @@ function lt(n) {
     item: o
   }), {
     getRootProps: v,
-    rootRef: M
+    rootRef: I
   } = Ne({
     disabled: a,
     focusableWhenDisabled: !0
   }), x = Te(c), y = s.useRef(null), R = s.useMemo(() => ({
     disabled: a,
-    label: i,
+    label: u,
     value: o,
     ref: y,
     id: x
-  }), [a, i, o, x]), {
-    index: N
-  } = We(o, R), O = X(r, y, M), T = (b) => (C) => {
+  }), [a, u, o, x]), {
+    index: M
+  } = We(o, R), O = X(r, y, I), N = (b) => (C) => {
     var P;
     (P = b.onKeyDown) == null || P.call(b, C), !C.defaultMuiPrevented && [" ", "Enter"].includes(C.key) && (C.defaultMuiPrevented = !0);
-  }, B = (b = {}) => ({
-    onKeyDown: T(b)
+  }, L = (b = {}) => ({
+    onKeyDown: N(b)
   });
   return {
     getRootProps: (b = {}) => {
-      const C = ne(b), P = se(p, se(v, B));
+      const C = ne(b), P = se(p, se(v, L));
       return g({}, b, C, P(C), {
         id: x,
         ref: O,
@@ -70,7 +70,7 @@ function lt(n) {
       });
     },
     highlighted: f,
-    index: N,
+    index: M,
     selected: d,
     rootRef: O
   };
@@ -80,13 +80,13 @@ function st(n) {
   if (!o)
     throw new Error("Option: ListContext was not found.");
   const {
-    getItemState: i,
+    getItemState: u,
     dispatch: a
   } = o, {
     highlighted: r,
     selected: c,
     focusable: p
-  } = i(n), f = s.useCallback((v) => {
+  } = u(n), f = s.useCallback((v) => {
     if (v !== n)
       throw new Error(["Base UI Option: Tried to access the state of another Option.", "This is unsupported when the Option uses the OptionContextStabilizer as a performance optimization."].join("/n"));
     return {
@@ -106,14 +106,14 @@ const rt = ["children", "disabled", "label", "slotProps", "slots", "value"];
 function it(n) {
   const {
     disabled: o,
-    highlighted: i,
+    highlighted: u,
     selected: a
   } = n;
   return Ie({
-    root: ["root", o && "disabled", i && "highlighted", a && "selected"]
+    root: ["root", o && "disabled", u && "highlighted", a && "selected"]
   }, Me(nt));
 }
-const ut = /* @__PURE__ */ s.memo(/* @__PURE__ */ s.forwardRef(function(o, i) {
+const ut = /* @__PURE__ */ s.memo(/* @__PURE__ */ s.forwardRef(function(o, u) {
   var a, r;
   const {
     children: c,
@@ -121,34 +121,34 @@ const ut = /* @__PURE__ */ s.memo(/* @__PURE__ */ s.forwardRef(function(o, i) {
     label: f,
     slotProps: d = {},
     slots: v = {},
-    value: M
-  } = o, x = Ve(o, rt), y = (a = v.root) != null ? a : "li", R = s.useRef(null), N = X(R, i), O = f ?? (typeof c == "string" ? c : (r = R.current) == null || (r = r.textContent) == null ? void 0 : r.trim()), {
-    getRootProps: T,
-    selected: B,
+    value: I
+  } = o, x = _e(o, rt), y = (a = v.root) != null ? a : "li", R = s.useRef(null), M = X(R, u), O = f ?? (typeof c == "string" ? c : (r = R.current) == null || (r = r.textContent) == null ? void 0 : r.trim()), {
+    getRootProps: N,
+    selected: L,
     highlighted: b,
     index: C
   } = lt({
     disabled: p,
     label: O,
-    rootRef: N,
-    value: M
+    rootRef: M,
+    value: I
   }), P = g({}, o, {
     disabled: p,
     highlighted: b,
     index: C,
-    selected: B
-  }), j = it(P), S = le({
-    getSlotProps: T,
+    selected: L
+  }), j = it(P), V = le({
+    getSlotProps: N,
     elementType: y,
     externalSlotProps: d.root,
     externalForwardedProps: x,
     className: j.root,
     ownerState: P
   });
-  return /* @__PURE__ */ h(y, g({}, S, {
+  return /* @__PURE__ */ h(y, g({}, V, {
     children: c
   }));
-})), Le = /* @__PURE__ */ s.forwardRef(function(o, i) {
+})), Le = /* @__PURE__ */ s.forwardRef(function(o, u) {
   const {
     value: a
   } = o, {
@@ -157,7 +157,7 @@ const ut = /* @__PURE__ */ s.memo(/* @__PURE__ */ s.forwardRef(function(o, i) {
   return /* @__PURE__ */ h(ye.Provider, {
     value: r,
     children: /* @__PURE__ */ h(ut, g({}, o, {
-      ref: i
+      ref: u
     }))
   });
 });
@@ -210,13 +210,13 @@ const re = {
 }, Be = (n) => {
   const {
     label: o,
-    value: i
+    value: u
   } = n;
-  return typeof o == "string" ? o : typeof i == "string" ? i : String(n);
+  return typeof o == "string" ? o : typeof u == "string" ? u : String(n);
 };
 function at(n, o) {
   const {
-    open: i
+    open: u
   } = n, {
     context: {
       selectionMode: a
@@ -226,8 +226,8 @@ function at(n, o) {
     var r;
     const d = (r = n.selectedValues[0]) != null ? r : ve(null, "start", o.context);
     return g({}, n, {
-      open: !i,
-      highlightedValue: i ? null : d
+      open: !u,
+      highlightedValue: u ? null : d
     });
   }
   if (o.type === re.browserAutoFill)
@@ -278,7 +278,7 @@ function ct(n) {
 function dt(n) {
   const {
     areOptionsEqual: o,
-    buttonRef: i,
+    buttonRef: u,
     defaultOpen: a = !1,
     defaultValue: r,
     disabled: c = !1,
@@ -286,32 +286,32 @@ function dt(n) {
     listboxRef: f,
     multiple: d = !1,
     name: v,
-    required: M,
+    required: I,
     onChange: x,
     onHighlightChange: y,
     onOpenChange: R,
-    open: N,
+    open: M,
     options: O,
-    getOptionAsString: T = Be,
-    getSerializedValue: B = ct,
+    getOptionAsString: N = Be,
+    getSerializedValue: L = ct,
     value: b,
     componentName: C = "useSelect"
-  } = n, P = s.useRef(null), j = X(i, P), S = s.useRef(null), $ = Te(p);
-  let E;
-  b === void 0 && r === void 0 ? E = [] : r !== void 0 && (d ? E = r : E = r == null ? [] : [r]);
+  } = n, P = s.useRef(null), j = X(u, P), V = s.useRef(null), $ = Te(p);
+  let B;
+  b === void 0 && r === void 0 ? B = [] : r !== void 0 && (d ? B = r : B = r == null ? [] : [r]);
   const Y = s.useMemo(() => {
     if (b !== void 0)
       return d ? b : b == null ? [] : [b];
   }, [b, d]), {
-    subitems: A,
+    subitems: T,
     contextValue: F
-  } = Ge(), V = s.useMemo(() => O != null ? new Map(O.map((e, t) => [e.value, {
+  } = Ge(), _ = s.useMemo(() => O != null ? new Map(O.map((e, t) => [e.value, {
     value: e.value,
     label: e.label,
     disabled: e.disabled,
     ref: /* @__PURE__ */ s.createRef(),
     id: `${$}_${t}`
-  }])) : A, [O, A, $]), ie = X(f, S), {
+  }])) : T, [O, T, $]), ie = X(f, V), {
     getRootProps: Z,
     active: ue,
     focusVisible: ae,
@@ -319,48 +319,48 @@ function dt(n) {
   } = Ne({
     disabled: c,
     rootRef: j
-  }), q = s.useMemo(() => Array.from(V.keys()), [V]), _ = s.useCallback((e) => {
+  }), q = s.useMemo(() => Array.from(_.keys()), [_]), S = s.useCallback((e) => {
     if (o !== void 0) {
-      const t = q.find((u) => o(u, e));
-      return V.get(t);
+      const t = q.find((i) => o(i, e));
+      return _.get(t);
     }
-    return V.get(e);
-  }, [V, o, q]), ee = s.useCallback((e) => {
+    return _.get(e);
+  }, [_, o, q]), ee = s.useCallback((e) => {
     var t;
-    const u = _(e);
-    return (t = u == null ? void 0 : u.disabled) != null ? t : !1;
-  }, [_]), te = s.useCallback((e) => {
-    const t = _(e);
-    return t ? T(t) : "";
-  }, [_, T]), ce = s.useMemo(() => ({
+    const i = S(e);
+    return (t = i == null ? void 0 : i.disabled) != null ? t : !1;
+  }, [S]), te = s.useCallback((e) => {
+    const t = S(e);
+    return t ? N(t) : "";
+  }, [S, N]), ce = s.useMemo(() => ({
     selectedValues: Y,
-    open: N
-  }), [Y, N]), de = s.useCallback((e) => {
+    open: M
+  }), [Y, M]), de = s.useCallback((e) => {
     var t;
-    return (t = V.get(e)) == null ? void 0 : t.id;
-  }, [V]), pe = s.useCallback((e, t) => {
+    return (t = _.get(e)) == null ? void 0 : t.id;
+  }, [_]), pe = s.useCallback((e, t) => {
     if (d)
       x == null || x(e, t);
     else {
-      var u;
-      x == null || x(e, (u = t[0]) != null ? u : null);
+      var i;
+      x == null || x(e, (i = t[0]) != null ? i : null);
     }
   }, [d, x]), fe = s.useCallback((e, t) => {
     y == null || y(e, t ?? null);
-  }, [y]), be = s.useCallback((e, t, u) => {
-    if (t === "open" && (R == null || R(u), u === !1 && (e == null ? void 0 : e.type) !== "blur")) {
+  }, [y]), be = s.useCallback((e, t, i) => {
+    if (t === "open" && (R == null || R(i), i === !1 && (e == null ? void 0 : e.type) !== "blur")) {
       var m;
       (m = P.current) == null || m.focus();
     }
   }, [R]), ge = s.useCallback((e) => {
-    var t, u;
-    return e == null ? null : (t = (u = A.get(e)) == null ? void 0 : u.ref.current) != null ? t : null;
-  }, [A]), me = {
+    var t, i;
+    return e == null ? null : (t = (i = T.get(e)) == null ? void 0 : i.ref.current) != null ? t : null;
+  }, [T]), me = {
     getInitialState: () => {
       var e;
       return {
         highlightedValue: null,
-        selectedValues: (e = E) != null ? e : [],
+        selectedValues: (e = B) != null ? e : [],
         open: a
       };
     },
@@ -383,41 +383,41 @@ function dt(n) {
     stateReducer: at,
     componentName: C
   }, {
-    dispatch: D,
+    dispatch: E,
     getRootProps: he,
     contextValue: K,
     state: {
       open: w,
-      highlightedValue: L,
+      highlightedValue: A,
       selectedValues: k
     },
     rootRef: z
   } = et(me), xe = s.useRef(w);
   tt(() => {
-    if (w && L !== null) {
+    if (w && A !== null) {
       var e;
-      const t = (e = _(L)) == null ? void 0 : e.ref;
-      if (!S.current || !(t != null && t.current))
+      const t = (e = S(A)) == null ? void 0 : e.ref;
+      if (!V.current || !(t != null && t.current))
         return;
       xe.current || t.current.focus({
         preventScroll: !0
       });
-      const u = S.current.getBoundingClientRect(), m = t.current.getBoundingClientRect();
-      m.top < u.top ? S.current.scrollTop -= u.top - m.top : m.bottom > u.bottom && (S.current.scrollTop += m.bottom - u.bottom);
+      const i = V.current.getBoundingClientRect(), m = t.current.getBoundingClientRect();
+      m.top < i.top ? V.current.scrollTop -= i.top - m.top : m.bottom > i.bottom && (V.current.scrollTop += m.bottom - i.bottom);
     }
-  }, [w, L, _]);
-  const J = s.useCallback((e) => _(e), [_]), Ce = (e) => (t) => {
-    var u;
-    if (e == null || (u = e.onClick) == null || u.call(e, t), !t.defaultMuiPrevented) {
+  }, [w, A, S]);
+  const J = s.useCallback((e) => S(e), [S]), Ce = (e) => (t) => {
+    var i;
+    if (e == null || (i = e.onClick) == null || i.call(e, t), !t.defaultMuiPrevented) {
       const m = {
         type: re.buttonClick,
         event: t
       };
-      D(m);
+      E(m);
     }
   }, W = (e) => (t) => {
-    var u;
-    (u = e.onKeyDown) == null || u.call(e, t), !t.defaultMuiPrevented && (t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), D({
+    var i;
+    (i = e.onKeyDown) == null || i.call(e, t), !t.defaultMuiPrevented && (t.key === "ArrowDown" || t.key === "ArrowUp") && (t.preventDefault(), E({
       type: Q.keyDown,
       key: t.key,
       event: t
@@ -425,29 +425,29 @@ function dt(n) {
   }, oe = (e = {}) => ({
     onClick: Ce(e),
     onKeyDown: W(e)
-  }), H = (e = {}) => g({}, e, oe(e), {
+  }), D = (e = {}) => g({}, e, oe(e), {
     role: "combobox",
     "aria-expanded": w,
     "aria-controls": $
   }), He = (e = {}) => {
-    const t = ne(e), u = se(H, Z);
-    return g({}, e, u(t));
+    const t = ne(e), i = se(D, Z);
+    return g({}, e, i(t));
   }, $e = (e) => (t) => {
-    var u, m;
-    (u = e.onBlur) == null || u.call(e, t), !t.defaultMuiPrevented && ((m = S.current) != null && m.contains(t.relatedTarget) || t.relatedTarget === P.current) && (t.defaultMuiPrevented = !0);
+    var i, m;
+    (i = e.onBlur) == null || i.call(e, t), !t.defaultMuiPrevented && ((m = V.current) != null && m.contains(t.relatedTarget) || t.relatedTarget === P.current) && (t.defaultMuiPrevented = !0);
   }, Fe = (e = {}) => ({
     onBlur: $e(e)
   }), qe = (e = {}) => {
-    const t = ne(e), u = se(Fe, he);
+    const t = ne(e), i = se(Fe, he);
     return g({
       id: $,
       role: "listbox",
       "aria-multiselectable": d ? "true" : void 0
-    }, e, u(t));
+    }, e, i(t));
   };
   s.useDebugValue({
     selectedOptions: k,
-    highlightedOption: L,
+    highlightedOption: A,
     open: w
   });
   const je = s.useMemo(() => g({}, K, F), [K, F]);
@@ -461,13 +461,13 @@ function dt(n) {
     Pe = (Re = J(G)) != null ? Re : null;
   }
   const Ue = (e) => (t) => {
-    var u;
-    if (e == null || (u = e.onChange) == null || u.call(e, t), t.defaultMuiPrevented)
+    var i;
+    if (e == null || (i = e.onChange) == null || i.call(e, t), t.defaultMuiPrevented)
       return;
-    const m = V.get(t.target.value);
-    t.target.value === "" ? D({
+    const m = _.get(t.target.value);
+    t.target.value === "" ? E({
       type: Q.clearSelection
-    }) : m !== void 0 && D({
+    }) : m !== void 0 && E({
       type: re.browserAutoFill,
       item: m.value,
       event: t
@@ -479,7 +479,7 @@ function dt(n) {
     buttonRef: U,
     contextValue: je,
     disabled: c,
-    dispatch: D,
+    dispatch: E,
     getButtonProps: He,
     getHiddenInputProps: (e = {}) => {
       const t = ne(e);
@@ -487,8 +487,8 @@ function dt(n) {
         name: v,
         tabIndex: -1,
         "aria-hidden": !0,
-        required: M ? !0 : void 0,
-        value: B(Pe),
+        required: I ? !0 : void 0,
+        value: L(Pe),
         style: ot
       }, e, {
         onChange: Ue(t)
@@ -500,13 +500,13 @@ function dt(n) {
     open: w,
     options: q,
     value: G,
-    highlightedOption: L
+    highlightedOption: A
   };
 }
 function pt(n) {
   const {
     value: o,
-    children: i
+    children: u
   } = n, {
     dispatch: a,
     getItemIndex: r,
@@ -526,7 +526,7 @@ function pt(n) {
     value: v,
     children: /* @__PURE__ */ h(ye.Provider, {
       value: d,
-      children: i
+      children: u
     })
   });
 }
@@ -535,68 +535,68 @@ function ft(n) {
   return we(Ee, n);
 }
 ke(Ee, ["root", "button", "listbox", "popup", "active", "expanded", "disabled", "focusVisible"]);
-var _e;
+var Se;
 const bt = ["areOptionsEqual", "autoComplete", "autoFocus", "children", "defaultValue", "defaultListboxOpen", "disabled", "getSerializedValue", "listboxId", "listboxOpen", "multiple", "name", "required", "onChange", "onListboxOpenChange", "getOptionAsString", "renderValue", "placeholder", "slotProps", "slots", "value"];
 function gt(n) {
   var o;
   return Array.isArray(n) ? /* @__PURE__ */ h(s.Fragment, {
-    children: n.map((i) => i.label).join(", ")
+    children: n.map((u) => u.label).join(", ")
   }) : (o = n == null ? void 0 : n.label) != null ? o : null;
 }
 function mt(n) {
   const {
     active: o,
-    disabled: i,
+    disabled: u,
     open: a,
     focusVisible: r
   } = n;
   return Ie({
-    root: ["root", i && "disabled", r && "focusVisible", o && "active", a && "expanded"],
-    listbox: ["listbox", i && "disabled"],
+    root: ["root", u && "disabled", r && "focusVisible", o && "active", a && "expanded"],
+    listbox: ["listbox", u && "disabled"],
     popup: ["popup"]
   }, Me(ft));
 }
-const De = /* @__PURE__ */ s.forwardRef(function(o, i) {
+const De = /* @__PURE__ */ s.forwardRef(function(o, u) {
   var a, r, c, p, f;
   const {
     areOptionsEqual: d,
     autoComplete: v,
-    autoFocus: M,
+    autoFocus: I,
     children: x,
     defaultValue: y,
     defaultListboxOpen: R = !1,
-    disabled: N,
+    disabled: M,
     getSerializedValue: O,
-    listboxId: T,
-    listboxOpen: B,
+    listboxId: N,
+    listboxOpen: L,
     multiple: b = !1,
     name: C,
     required: P = !1,
     onChange: j,
-    onListboxOpenChange: S,
+    onListboxOpenChange: V,
     getOptionAsString: $ = Be,
-    renderValue: E,
+    renderValue: B,
     placeholder: Y,
-    slotProps: A = {},
+    slotProps: T = {},
     slots: F = {},
-    value: V
-  } = o, ie = Ve(o, bt), Z = E ?? gt, [ue, ae] = s.useState(!1), U = s.useRef(null), q = s.useRef(null), _ = (a = F.root) != null ? a : "button", ee = (r = F.listbox) != null ? r : "ul", te = (c = F.popup) != null ? c : "div", ce = s.useCallback((H) => {
-    ae(H != null);
-  }, []), de = X(i, U, ce);
+    value: _
+  } = o, ie = _e(o, bt), Z = B ?? gt, [ue, ae] = s.useState(!1), U = s.useRef(null), q = s.useRef(null), S = (a = F.root) != null ? a : "button", ee = (r = F.listbox) != null ? r : "ul", te = (c = F.popup) != null ? c : "div", ce = s.useCallback((D) => {
+    ae(D != null);
+  }, []), de = X(u, U, ce);
   s.useEffect(() => {
-    M && U.current.focus();
-  }, [M]);
+    I && U.current.focus();
+  }, [I]);
   const {
     buttonActive: pe,
     buttonFocusVisible: fe,
     contextValue: be,
     disabled: ge,
     getButtonProps: me,
-    getListboxProps: D,
+    getListboxProps: E,
     getHiddenInputProps: he,
     getOptionMetadata: K,
     value: w,
-    open: L
+    open: A
   } = dt({
     name: C,
     required: P,
@@ -605,35 +605,35 @@ const De = /* @__PURE__ */ s.forwardRef(function(o, i) {
     buttonRef: de,
     defaultOpen: R,
     defaultValue: y,
-    disabled: N,
-    listboxId: T,
+    disabled: M,
+    listboxId: N,
     multiple: b,
-    open: B,
+    open: L,
     onChange: j,
-    onOpenChange: S,
+    onOpenChange: V,
     getOptionAsString: $,
-    value: V,
+    value: _,
     componentName: "Select"
   }), k = g({}, o, {
     active: pe,
     defaultListboxOpen: R,
     disabled: ge,
     focusVisible: fe,
-    open: L,
+    open: A,
     multiple: b,
     renderValue: Z,
     value: w
   }), z = mt(k), xe = le({
-    elementType: _,
+    elementType: S,
     getSlotProps: me,
-    externalSlotProps: A.root,
+    externalSlotProps: T.root,
     externalForwardedProps: ie,
     ownerState: k,
     className: z.root
   }), J = le({
     elementType: ee,
-    getSlotProps: D,
-    externalSlotProps: A.listbox,
+    getSlotProps: E,
+    externalSlotProps: T.listbox,
     additionalProps: {
       ref: q
     },
@@ -641,11 +641,11 @@ const De = /* @__PURE__ */ s.forwardRef(function(o, i) {
     className: z.listbox
   }), Ce = le({
     elementType: te,
-    externalSlotProps: A.popup,
+    externalSlotProps: T.popup,
     additionalProps: {
       anchor: U.current,
       keepMounted: !0,
-      open: L,
+      open: A,
       placement: "bottom-start",
       role: void 0
     },
@@ -654,17 +654,17 @@ const De = /* @__PURE__ */ s.forwardRef(function(o, i) {
   });
   let W;
   if (b)
-    W = w.map((H) => K(H)).filter((H) => H !== void 0);
+    W = w.map((D) => K(D)).filter((D) => D !== void 0);
   else {
     var oe;
     W = (oe = K(w)) != null ? oe : null;
   }
   return /* @__PURE__ */ Oe(s.Fragment, {
-    children: [/* @__PURE__ */ h(_, g({}, xe, {
+    children: [/* @__PURE__ */ h(S, g({}, xe, {
       children: (p = (f = Z(W)) != null ? f : Y) != null ? p : (
         // fall back to a zero-width space to prevent layout shift
         // from https://github.com/mui/material-ui/pull/24563
-        _e || (_e = /* @__PURE__ */ h("span", {
+        Se || (Se = /* @__PURE__ */ h("span", {
           className: "notranslate",
           children: "​"
         }))
@@ -813,48 +813,46 @@ process.env.NODE_ENV !== "production" && (De.propTypes = {
   value: l.any
 });
 const ht = (n) => {
-  const { children: o, icon: i, ...a } = n;
+  const { children: o, icon: u, className: a, ...r } = n;
   return /* @__PURE__ */ Oe(
     Le,
     {
-      ...a,
+      ...r,
       slotProps: {
-        root: (r) => ({
-          className: Se(I.select__listbox__option, {
-            [I["select__listbox__option--disabled"]]: r.disabled,
-            [I["select__listbox__option--selected"]]: r.selected,
-            [I["select__listbox__option--highlighted"]]: r.highlighted
+        root: (c) => ({
+          className: Ve(H.select__listbox__option, a, {
+            [H["select__listbox__option--disabled"]]: c.disabled,
+            [H["select__listbox__option--selected"]]: c.selected
           })
         })
       },
       children: [
-        i ? /* @__PURE__ */ h("span", { className: I.select__listbox__option__icon, children: i }) : "",
-        /* @__PURE__ */ h(Ke, { element: "span", variant: "body-small", className: I.select__listbox__option__text, children: o })
+        u ? /* @__PURE__ */ h("span", { className: H.select__listbox__option__icon, children: u }) : "",
+        /* @__PURE__ */ h(Ke, { element: "span", variant: "body-small", className: H.select__listbox__option__text, children: o })
       ]
     }
   );
 }, xt = (n) => {
-  const { children: o, onChange: i, ariaLabelledby: a, ...r } = n;
+  const { children: o, className: u, onChange: a, ...r } = n;
   return /* @__PURE__ */ h(
     De,
     {
       ...r,
       onChange: (p, f) => {
-        i == null || i(f, p);
+        a == null || a(f, p);
       },
-      className: Se(I.select),
+      className: Ve(H.select, u),
       slots: { root: ze },
       slotProps: {
-        listbox: { className: I.select__listbox },
-        popup: { className: I.select__popup }
+        listbox: { className: H.select__listbox },
+        popup: { disablePortal: !0 }
       },
-      "aria-labelledby": a,
       children: o
     }
   );
 };
 xt.Option = ht;
 export {
-  ht as Option,
-  xt as Select
+  xt as Select,
+  ht as SelectOption
 };

package/dist/components/Select/Select.stories.d.ts

@@ -1,31 +1,22 @@
+import { SelectProps } from './Select';
 import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
     component: {
-        (props: {
-            children: import('react').ReactNode;
-            disabled?: boolean | undefined;
-            placeholder?: string | number | undefined;
-            ariaLabelledby?: string | undefined;
-            onChange?: ((value: string | number | null, event?: import('react').SyntheticEvent<Element, Event> | null | undefined) => void) | undefined;
-            className?: string | undefined;
-            'data-testid'?: string | undefined;
-        }): import("react/jsx-runtime").JSX.Element;
-        Option: (props: {
-            disabled?: boolean | undefined;
-            value: string | number;
-            children: import('react').ReactNode;
-            icon?: import('react').ReactNode;
-            className?: string | undefined;
-            'data-testid'?: string | undefined;
-        }) => import("react/jsx-runtime").JSX.Element;
+        (props: SelectProps): import("react/jsx-runtime").JSX.Element;
+        Option: (props: import('./Select').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
     };
     tags: string[];
+    parameters: {
+        layout: string;
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Simple: Story;
-export declare const Disabled: Story;
+export declare const WithAllOptionsDisabled: Story;
+export declare const WithSomeOptionsDisabled: Story;
 export declare const WithPrefix: Story;
-export declare const WithIcon: Story;
+export declare const WithIcons: Story;
+export declare const WithManyOptions: Story;

package/dist/components/Select/Select.stories.js

@@ -1,65 +1,89 @@
-import { jsxs as l, Fragment as t, jsx as e } from "react/jsx-runtime";
-import "../Chip/Chip.js";
-import "../Button/Button.js";
-import * as n from "react";
-import "../Dialog/Backdrop.js";
-import "../Typography/Typography.js";
-import "../IconButton/IconButton.js";
-import { Select as i } from "./Select.js";
-import "../Table/Table.js";
-import "../Tabs/Tabs.js";
-const r = (o) => /* @__PURE__ */ n.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...o }, /* @__PURE__ */ n.createElement("path", { d: "M0.512792 11.6594C0.139667 11.2516 0.167167 10.6184 0.574323 10.2447C0.766229 10.0688 1.00839 9.98175 1.24964 9.98175C1.52063 9.98175 1.79026 10.0912 1.98745 10.3064L2.99998 11.4406V2.00094C2.99998 1.44781 3.44779 1 3.99998 1C4.55217 1 4.99998 1.44781 4.99998 2.00094V11.4384L6.01248 10.3325C6.38748 9.92812 7.01873 9.89687 7.42498 10.2719C7.83216 10.6453 7.85935 11.2787 7.48651 11.6866L4.76463 14.6894C4.38588 15.1037 3.66901 15.1037 3.28995 14.6894L0.512792 11.6594Z", fill: "#1897F3" }), /* @__PURE__ */ n.createElement("path", { opacity: 0.4, d: "M9.99998 3H11.5859L9.29279 5.29313C9.00666 5.57925 8.92123 6.00906 9.07598 6.38313C9.23073 6.75719 9.59566 7 9.99973 7H13.9716C14.5531 6.97188 15 6.55313 15 6C15 5.44688 14.5522 5 14 5H12.414L14.7072 2.70688C14.9933 2.42075 15.0787 1.99094 14.924 1.61688C14.7692 1.24281 14.4031 1 13.9719 1H9.99998C9.44685 1 8.99998 1.44719 8.99998 2C8.99998 2.55281 9.44685 3 9.99998 3ZM15.3937 13.5406L12.894 8.5375C12.5553 7.85594 11.444 7.85594 11.1053 8.5375L8.6056 13.5406C8.35854 14.0378 8.55873 14.6419 9.05279 14.8903C9.54873 15.1379 10.1478 14.9365 10.3944 14.4403L10.6179 13.9906H13.3814L13.6049 14.4403C13.7979 14.8288 14.354 15.1863 14.9465 14.8903C15.4406 14.6438 15.6406 14.0375 15.3937 13.5406ZM11.4937 12.2313L12 11.2094L12.5069 12.2291H11.4937V12.2313Z", fill: "#1897F3" })), v = {
+import { jsx as e, Fragment as r, jsxs as a } from "react/jsx-runtime";
+import * as d from "react";
+import { useState as h } from "react";
+import { Select as n } from "./Select.js";
+const o = (t) => /* @__PURE__ */ d.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ d.createElement("path", { d: "M0.512792 11.6594C0.139667 11.2516 0.167167 10.6184 0.574323 10.2447C0.766229 10.0688 1.00839 9.98175 1.24964 9.98175C1.52063 9.98175 1.79026 10.0912 1.98745 10.3064L2.99998 11.4406V2.00094C2.99998 1.44781 3.44779 1 3.99998 1C4.55217 1 4.99998 1.44781 4.99998 2.00094V11.4384L6.01248 10.3325C6.38748 9.92812 7.01873 9.89687 7.42498 10.2719C7.83216 10.6453 7.85935 11.2787 7.48651 11.6866L4.76463 14.6894C4.38588 15.1037 3.66901 15.1037 3.28995 14.6894L0.512792 11.6594Z", fill: "#1897F3" }), /* @__PURE__ */ d.createElement("path", { opacity: 0.4, d: "M9.99998 3H11.5859L9.29279 5.29313C9.00666 5.57925 8.92123 6.00906 9.07598 6.38313C9.23073 6.75719 9.59566 7 9.99973 7H13.9716C14.5531 6.97188 15 6.55313 15 6C15 5.44688 14.5522 5 14 5H12.414L14.7072 2.70688C14.9933 2.42075 15.0787 1.99094 14.924 1.61688C14.7692 1.24281 14.4031 1 13.9719 1H9.99998C9.44685 1 8.99998 1.44719 8.99998 2C8.99998 2.55281 9.44685 3 9.99998 3ZM15.3937 13.5406L12.894 8.5375C12.5553 7.85594 11.444 7.85594 11.1053 8.5375L8.6056 13.5406C8.35854 14.0378 8.55873 14.6419 9.05279 14.8903C9.54873 15.1379 10.1478 14.9365 10.3944 14.4403L10.6179 13.9906H13.3814L13.6049 14.4403C13.7979 14.8288 14.354 15.1863 14.9465 14.8903C15.4406 14.6438 15.6406 14.0375 15.3937 13.5406ZM11.4937 12.2313L12 11.2094L12.5069 12.2291H11.4937V12.2313Z", fill: "#1897F3" })), g = {
   title: "Components/Select",
-  component: i,
-  tags: ["autodocs"]
-}, O = {
+  component: n,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+};
+function c(t) {
+  const [l, s] = h(""), p = [
+    { id: "1", name: "Frodo" },
+    { id: "2", name: "Sam" },
+    { id: "3", name: "Merry" },
+    { id: "4", name: "Pippin" }
+  ];
+  return /* @__PURE__ */ a(r, { children: [
+    /* @__PURE__ */ e(n, { ...t, value: l, onChange: (i) => s(i), children: p.map((i) => /* @__PURE__ */ e(n.Option, { value: i.id, children: i.name }, i.id)) }),
+    l && /* @__PURE__ */ a("pre", { style: { borderRadius: 4, background: "#fafafa", padding: 16, color: "#777777" }, children: [
+      "// selected character",
+      /* @__PURE__ */ e("br", {}),
+      JSON.stringify(
+        p.find((i) => i.id === l),
+        null,
+        4
+      )
+    ] })
+  ] });
+}
+const f = {
+  args: {
+    placeholder: "Select an option"
+  },
+  render: c
+}, S = {
+  name: "With all options disabled",
+  args: {
+    placeholder: "Select an option",
+    disabled: !0
+  },
+  render: c
+}, v = {
+  name: "With some options disabled",
   args: {
     placeholder: "Select an option",
-    children: /* @__PURE__ */ l(t, { children: [
-      /* @__PURE__ */ e(i.Option, { value: "1", children: "Frodo" }),
-      /* @__PURE__ */ e(i.Option, { value: "2", children: "Sam" }),
-      /* @__PURE__ */ e(i.Option, { value: "3", children: "Mery" }),
-      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
+    children: /* @__PURE__ */ a(r, { children: [
+      /* @__PURE__ */ e(n.Option, { value: "1", disabled: !0, children: "Frodo" }),
+      /* @__PURE__ */ e(n.Option, { value: "2", children: "Sam" }),
+      /* @__PURE__ */ e(n.Option, { value: "3", disabled: !0, children: "Merry" }),
+      /* @__PURE__ */ e(n.Option, { value: "4", children: "Pippin" })
     ] })
   }
-}, L = {
+}, O = {
+  name: "With prefix",
   args: {
     placeholder: "Select an option",
-    children: /* @__PURE__ */ l(t, { children: [
-      /* @__PURE__ */ e(i.Option, { value: "1", children: "Frodo" }),
-      /* @__PURE__ */ e(i.Option, { value: "2", children: "Sam" }),
-      /* @__PURE__ */ e(i.Option, { value: "3", children: "Mery" }),
-      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
-    ] }),
-    disabled: !0
-  }
-}, S = {
+    prefix: "Filter by:"
+  },
+  render: c
+}, y = {
+  name: "With icons",
   args: {
     placeholder: "Select an option",
-    ariaLabelledby: "Filter by",
-    children: /* @__PURE__ */ l(t, { children: [
-      /* @__PURE__ */ e(i.Option, { value: "1", children: "Frodo" }),
-      /* @__PURE__ */ e(i.Option, { value: "2", children: "Sam" }),
-      /* @__PURE__ */ e(i.Option, { value: "3", children: "Mery" }),
-      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
+    children: /* @__PURE__ */ a(r, { children: [
+      /* @__PURE__ */ e(n.Option, { value: "1", icon: /* @__PURE__ */ e(o, {}), children: "Frodo" }),
+      /* @__PURE__ */ e(n.Option, { value: "2", icon: /* @__PURE__ */ e(o, {}), children: "Sam" }),
+      /* @__PURE__ */ e(n.Option, { value: "3", icon: /* @__PURE__ */ e(o, {}), children: "Merry" }),
+      /* @__PURE__ */ e(n.Option, { value: "4", icon: /* @__PURE__ */ e(o, {}), children: "Pippin" })
     ] })
   }
-}, g = {
+}, L = {
+  name: "With many options",
   args: {
     placeholder: "Select an option",
-    ariaLabelledby: "Filter by",
-    children: /* @__PURE__ */ l(t, { children: [
-      /* @__PURE__ */ e(i.Option, { value: "1", disabled: !0, children: "Frodo" }),
-      /* @__PURE__ */ e(i.Option, { value: "2", icon: /* @__PURE__ */ e(r, {}), children: "Sam" }),
-      /* @__PURE__ */ e(i.Option, { value: "3", disabled: !0, children: "Mery" }),
-      /* @__PURE__ */ e(i.Option, { value: "4", children: "Pippin" })
-    ] })
+    children: /* @__PURE__ */ e(r, { children: [...Array(20).keys()].map((t) => /* @__PURE__ */ e(n.Option, { value: String(t + 1), children: `Item #${t + 1}` })) })
   }
 };
 export {
-  L as Disabled,
-  O as Simple,
-  g as WithIcon,
-  S as WithPrefix,
-  v as default
+  f as Simple,
+  S as WithAllOptionsDisabled,
+  y as WithIcons,
+  L as WithManyOptions,
+  O as WithPrefix,
+  v as WithSomeOptionsDisabled,
+  g as default
 };

package/dist/components/Select/SelectButton.d.ts

@@ -5,9 +5,8 @@ export interface SelectButtonProps {
     children: ReactNode;
     disabled: boolean;
     'aria-expanded': boolean;
-    'aria-labelledby': string | number;
-    type?: HTMLButtonElement['type'];
-    onClick: () => void;
+    prefix?: string;
     'data-testid'?: string;
+    onClick: () => void;
 }
-export declare const Button: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Select/SelectButton.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../clsx-DB4S2d7J.js";
 import "../Typography/Typography.js";
-import { B } from "../../SelectButton-DWtqAiwt.js";
+import { S as e } from "../../SelectButton-DWZ2BRaX.js";
 export {
-  B as Button
+  e as SelectButton
 };

package/dist/main.js

@@ -1,16 +1,16 @@
-import { Chip as t } from "./components/Chip/Chip.js";
+import { Chip as e } from "./components/Chip/Chip.js";
 import { Advice as p } from "./components/Advice/Advice.js";
 import { Button as f } from "./components/Button/Button.js";
 import { Checkbox as n } from "./components/Checkbox/Checkbox.js";
 import { Dialog as l } from "./components/Dialog/Dialog.js";
-import { FamilyAndIcons as T, Icon as s } from "./components/Icon/Icon.js";
-import { IconButton as g } from "./components/IconButton/IconButton.js";
-import { Input as S } from "./components/Input/Input.js";
+import { FamilyAndIcons as T, Icon as c } from "./components/Icon/Icon.js";
+import { IconButton as S } from "./components/IconButton/IconButton.js";
+import { Input as u } from "./components/Input/Input.js";
 import { InputSearch as d } from "./components/InputSearch/InputSearch.js";
 import { LoadingSpinner as I } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { PageHeader as C } from "./components/PageHeader/PageHeader.js";
 import { Pagination as y, paginationDefaultTranslations as A } from "./components/Pagination/Pagination.js";
-import { Option as B, Select as v } from "./components/Select/Select.js";
+import { Select as B, SelectOption as v } from "./components/Select/Select.js";
 import { Skeleton as H, SkeletonCircle as L, SkeletonTable as O } from "./components/Skeleton/Skeleton.js";
 import { Snackbar as q } from "./components/Snackbar/Snackbar.js";
 import { SortTooltip as z, sortTooltipDefaultTranslations as E } from "./components/SortTooltip/SortTooltip.js";
@@ -22,28 +22,28 @@ import { Tooltip as W } from "./components/Tooltip/Tooltip.js";
 import { Typography as Y } from "./components/Typography/Typography.js";
 import { default as _ } from "./components/Dialog/Title.js";
 import { default as oo } from "./components/Dialog/Content.js";
-import { default as to } from "./components/Dialog/Actions.js";
+import { default as eo } from "./components/Dialog/Actions.js";
 import { Tab as po } from "./components/Tabs/Tab.js";
 import { TabPanel as fo } from "./components/Tabs/TabPanel.js";
 export {
-  to as Actions,
+  eo as Actions,
   p as Advice,
   f as Button,
   n as Checkbox,
-  t as Chip,
+  e as Chip,
   oo as Content,
   l as Dialog,
   _ as DialogTitle,
   T as FamilyAndIcons,
-  s as Icon,
-  g as IconButton,
-  S as Input,
+  c as Icon,
+  S as IconButton,
+  u as Input,
   d as InputSearch,
   I as LoadingSpinner,
-  B as Option,
   C as PageHeader,
   y as Pagination,
-  v as Select,
+  B as Select,
+  v as SelectOption,
   H as Skeleton,
   L as SkeletonCircle,
   O as SkeletonTable,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "0.0.1-alpha.15",
+  "version": "0.0.1-alpha.16",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/SelectButton-DWtqAiwt.js

@@ -1,45 +0,0 @@
-import './assets/SelectButton.css';
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as o from "react";
-import { forwardRef as x } from "react";
-import { c as p } from "./clsx-DB4S2d7J.js";
-import { Typography as w } from "./components/Typography/Typography.js";
-const d = "_select_yw431_1", m = "_select__listbox_yw431_4", u = "_select__listbox__option_yw431_12", y = "_select__listbox__option__icon_yw431_20", h = "_select__listbox__option__text_yw431_24", C = "_select__list__option__icon_yw431_44", _ = {
-  select: d,
-  select__listbox: m,
-  select__listbox__option: u,
-  select__listbox__option__icon: y,
-  select__listbox__option__text: h,
-  "select__listbox__option--disabled": "_select__listbox__option--disabled_yw431_27",
-  "select__listbox__option--selected": "_select__listbox__option--selected_yw431_36",
-  select__list__option__icon: C,
-  "select-button": "_select-button_yw431_49",
-  "select-button__text": "_select-button__text_yw431_62",
-  "select-button__text__prefix": "_select-button__text__prefix_yw431_69",
-  "select-button__icon": "_select-button__icon_yw431_72",
-  "select-button--active": "_select-button--active_yw431_78"
-}, f = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M2.11104 4.9999C2.36691 4.9999 2.62291 5.09756 2.81791 5.29287L8.11104 10.5843L13.4048 5.29053C13.7954 4.8999 14.4282 4.8999 14.8188 5.29053C15.2095 5.68115 15.2095 6.31396 14.8188 6.70459L8.81885 12.7046C8.42822 13.0952 7.79541 13.0952 7.40479 12.7046L1.40479 6.70459C1.01416 6.31396 1.01416 5.68115 1.40479 5.29053C1.59854 5.09678 1.85479 4.9999 2.11104 4.9999Z", fill: "currentColor" })), v = (t) => /* @__PURE__ */ o.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ o.createElement("path", { d: "M13.8889 11C13.633 11 13.377 10.9023 13.182 10.707L7.8889 5.41563L2.59515 10.7094C2.20453 11.1 1.57172 11.1 1.18109 10.7094C0.790466 10.3188 0.790466 9.68594 1.18109 9.29532L7.18109 3.29532C7.57172 2.90469 8.20453 2.90469 8.59515 3.29532L14.5952 9.29532C14.9858 9.68594 14.9858 10.3188 14.5952 10.7094C14.4014 10.9031 14.1452 11 13.8889 11Z", fill: "#3F3D4B", fillOpacity: 0.88 })), E = x((t, c) => {
-  const { children: n, type: i = "button", disabled: a, className: b, "data-testid": r } = t, s = t["aria-expanded"];
-  return /* @__PURE__ */ l(
-    "button",
-    {
-      className: p(b, s ? _["select-button--active"] : "", _["select-button"]),
-      type: i,
-      onClick: t.onClick,
-      disabled: a,
-      "data-testid": r,
-      ref: c,
-      children: [
-        /* @__PURE__ */ l("span", { className: _["select-button__text"], children: [
-          /* @__PURE__ */ e("span", { className: _["select-button__text__prefix"], children: t["aria-labelledby"] }),
-          /* @__PURE__ */ e(w, { element: "span", variant: "body-small", className: _["select-button__text__content"], children: n })
-        ] }),
-        /* @__PURE__ */ e("span", { className: _["select-button__icon"], children: s ? /* @__PURE__ */ e(v, {}) : /* @__PURE__ */ e(f, {}) })
-      ]
-    }
-  );
-});
-export {
-  E as B,
-  _ as s
-};