@pismo/marola 1.0.0-beta.21 → 1.0.0-beta.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/{Button-DiLqcAJG.js → Button-BAljjMv3.js} +2 -2
  2. package/dist/{ClickAwayListener-BaJ-OV_7.js → ClickAwayListener-DbEYZpyh.js} +3 -3
  3. package/dist/{Popup-lLWZt2wk.js → Popup-Ck3XlWMq.js} +3 -3
  4. package/dist/{Portal-B_Es6eUL.js → Portal-oY3enyAm.js} +2 -2
  5. package/dist/SelectButton-oWzluvmj.js +63 -0
  6. package/dist/{Toggle-CRfZgFJp.js → Toggle-Buew6bzm.js} +8 -7
  7. package/dist/assets/Autocomplete.css +1 -1
  8. package/dist/assets/SelectButton.css +1 -1
  9. package/dist/{combineHooksSlotProps-BtBYUV_B.js → combineHooksSlotProps-C-zYvfnF.js} +1 -1
  10. package/dist/components/Autocomplete/Autocomplete.d.ts +8 -39
  11. package/dist/components/Autocomplete/Autocomplete.js +369 -400
  12. package/dist/components/Autocomplete/Autocomplete.stories.d.ts +2 -1
  13. package/dist/components/Button/Button.js +1 -1
  14. package/dist/components/Chip/Chip.js +4 -3
  15. package/dist/components/Dialog/CloseIconButton.js +1 -1
  16. package/dist/components/Dialog/Dialog.js +4 -4
  17. package/dist/components/Dialog/Dialog.stories.d.ts +1 -1
  18. package/dist/components/IconButton/IconButton.js +1 -1
  19. package/dist/components/Input/Input.d.ts +41 -2
  20. package/dist/components/Input/Input.js +500 -100
  21. package/dist/components/Input/Input.stories.d.ts +3 -3
  22. package/dist/components/InputSearch/InputSearch.stories.d.ts +2 -2
  23. package/dist/components/ResultWithChips/ResultWithChips.js +1 -1
  24. package/dist/components/RowItem/RowItem.js +4 -3
  25. package/dist/components/Select/Select.d.ts +6 -0
  26. package/dist/components/Select/Select.js +391 -358
  27. package/dist/components/Select/SelectButton.js +1 -1
  28. package/dist/components/Snackbar/Snackbar.js +3 -3
  29. package/dist/components/Tabs/Tab.js +3 -3
  30. package/dist/components/Tabs/TabPanel.js +1 -1
  31. package/dist/components/Tabs/Tabs.js +3 -3
  32. package/dist/components/Toggle/Toggle.js +1 -1
  33. package/dist/components/ToggleGroup/Toggle.js +3 -2
  34. package/dist/components/ToggleGroup/ToggleGroup.js +1 -1
  35. package/dist/components/Tooltip/Tooltip.js +3 -3
  36. package/dist/{index-D3Wj0eid.js → index-bQFToy-I.js} +1 -1
  37. package/dist/main.js +1 -1
  38. package/dist/{ownerDocument-B61GUaFs.js → ownerDocument-YGhwAnr1.js} +1 -1
  39. package/dist/{useButton-Bn3MNH8I.js → useButton-DcihopJG.js} +1 -1
  40. package/dist/{useList-BpJT77u3.js → useList-B9C55YB7.js} +2 -2
  41. package/dist/{useSlotProps-kRhf7Gil.js → useSlotProps-C_I1kEHr.js} +73 -72
  42. package/package.json +1 -1
  43. package/dist/Input.module-ZTRZRcNt.js +0 -405
  44. package/dist/SelectButton-CoOT2txy.js +0 -61
@@ -1,7 +1,7 @@
1
- import { g as T, a as _, _ as x, b as i, c as B, P as e, d as O, e as D } from "./useSlotProps-kRhf7Gil.js";
1
+ import { g as T, a as _, _ as x, b as i, c as B, P as e, d as O, e as D } from "./useSlotProps-C_I1kEHr.js";
2
2
  import * as c from "react";
3
3
  import { jsx as F } from "react/jsx-runtime";
4
- import { u as S } from "./useButton-Bn3MNH8I.js";
4
+ import { u as S } from "./useButton-DcihopJG.js";
5
5
  const m = "Button";
6
6
  function U(s) {
7
7
  return T(m, s);
@@ -1,9 +1,9 @@
1
1
  import * as t from "react";
2
- import { u as C, P as f } from "./useSlotProps-kRhf7Gil.js";
2
+ import { u as C, P as f } from "./useSlotProps-C_I1kEHr.js";
3
3
  import { jsx as w } from "react/jsx-runtime";
4
4
  import { u as L } from "./useEventCallback-BAQJJ3ye.js";
5
- import { o as h, e as b } from "./ownerDocument-B61GUaFs.js";
6
- import { e as g } from "./index-D3Wj0eid.js";
5
+ import { o as h, e as b } from "./ownerDocument-YGhwAnr1.js";
6
+ import { e as g } from "./index-bQFToy-I.js";
7
7
  function T(c) {
8
8
  return c.substring(2).toLowerCase();
9
9
  }
@@ -1,10 +1,10 @@
1
- import { g as jt, a as zt, _ as It, u as Ut, b as ut, c as Xt, P as x, d as Yt, e as Kt } from "./useSlotProps-kRhf7Gil.js";
1
+ import { g as jt, a as zt, _ as It, u as Ut, b as ut, c as Xt, P as x, d as Yt, e as Kt } from "./useSlotProps-C_I1kEHr.js";
2
2
  import * as b from "react";
3
3
  import { useLayoutEffect as Gt, useEffect as Jt } from "react";
4
- import { r as Qt } from "./index-D3Wj0eid.js";
4
+ import { r as Qt } from "./index-bQFToy-I.js";
5
5
  import { jsx as Z } from "react/jsx-runtime";
6
6
  import { u as Zt } from "./useEnhancedEffect-CJGo-L3B.js";
7
- import { P as qt, H as gt } from "./Portal-B_Es6eUL.js";
7
+ import { P as qt, H as gt } from "./Portal-oY3enyAm.js";
8
8
  const et = Math.min, z = Math.max, nt = Math.round, q = Math.floor, H = (t) => ({
9
9
  x: t,
10
10
  y: t
@@ -1,6 +1,6 @@
1
1
  import * as o from "react";
2
- import { r as P, e as y } from "./index-D3Wj0eid.js";
3
- import { u as T, s as a, P as i } from "./useSlotProps-kRhf7Gil.js";
2
+ import { r as P, e as y } from "./index-bQFToy-I.js";
3
+ import { u as T, s as a, P as i } from "./useSlotProps-C_I1kEHr.js";
4
4
  import { jsx as c } from "react/jsx-runtime";
5
5
  import { u as f } from "./useEnhancedEffect-CJGo-L3B.js";
6
6
  function N(t, l, s, n, u) {
@@ -0,0 +1,63 @@
1
+ import './assets/SelectButton.css';
2
+ import { jsxs as l, jsx as _ } from "react/jsx-runtime";
3
+ import * as o from "react";
4
+ import { forwardRef as y } from "react";
5
+ import { c as u } from "./clsx-DB4S2d7J.js";
6
+ import { Typography as p } from "./components/Typography/Typography.js";
7
+ const b = "_select__listbox__option__text_1d5mc_65", m = "_select__wrapper_1d5mc_78", g = "_select__label_1d5mc_78", x = "_select_1d5mc_65", w = "_select__popup_1d5mc_87", C = "_select__listbox_1d5mc_65", f = "_select__listbox__option_1d5mc_65", v = "_select__listbox__option__icon_1d5mc_108", L = "_select__list__option__icon_1d5mc_129", e = {
8
+ "u-typography-h1": "_u-typography-h1_1d5mc_1",
9
+ "u-typography-h2": "_u-typography-h2_1d5mc_8",
10
+ "u-typography-h3": "_u-typography-h3_1d5mc_15",
11
+ "u-typography-h4": "_u-typography-h4_1d5mc_22",
12
+ "u-typography-h5": "_u-typography-h5_1d5mc_29",
13
+ "u-typography-h6": "_u-typography-h6_1d5mc_36",
14
+ "u-typography-base": "_u-typography-base_1d5mc_43",
15
+ "u-typography-base--xxl": "_u-typography-base--xxl_1d5mc_49",
16
+ "u-typography-base--xl": "_u-typography-base--xl_1d5mc_53",
17
+ "u-typography-base--lg": "_u-typography-base--lg_1d5mc_57",
18
+ "u-typography-base--sm": "_u-typography-base--sm_1d5mc_61",
19
+ "u-typography-base--bold": "_u-typography-base--bold_1d5mc_65",
20
+ select__listbox__option__text: b,
21
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1d5mc_68",
22
+ "u-typography-base--underlined": "_u-typography-base--underlined_1d5mc_71",
23
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1d5mc_74",
24
+ select__wrapper: m,
25
+ select__label: g,
26
+ select: x,
27
+ select__popup: w,
28
+ select__listbox: C,
29
+ select__listbox__option: f,
30
+ select__listbox__option__icon: v,
31
+ "select__listbox__option--disabled": "_select__listbox__option--disabled_1d5mc_112",
32
+ "select__listbox__option--selected": "_select__listbox__option--selected_1d5mc_121",
33
+ select__list__option__icon: L,
34
+ "select-button": "_select-button_1d5mc_134",
35
+ "base-Select-popup": "_base-Select-popup_1d5mc_152",
36
+ "select-button__text": "_select-button__text_1d5mc_155",
37
+ "select-button__icon": "_select-button__icon_1d5mc_164",
38
+ "select-button--active": "_select-button--active_1d5mc_170"
39
+ }, S = (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" })), k = (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 })), A = y((t, a) => {
40
+ const { children: i, disabled: r, className: n, "data-testid": d, prefix: s, onClick: h } = t, c = t["aria-expanded"];
41
+ return /* @__PURE__ */ l(
42
+ "button",
43
+ {
44
+ className: u(n, c ? e["select-button--active"] : "", e["select-button"]),
45
+ type: "button",
46
+ onClick: h,
47
+ disabled: r,
48
+ "data-testid": d,
49
+ ref: a,
50
+ children: [
51
+ /* @__PURE__ */ l("span", { className: e["select-button__text"], children: [
52
+ s && /* @__PURE__ */ _(p, { children: s }),
53
+ /* @__PURE__ */ _(p, { children: i })
54
+ ] }),
55
+ /* @__PURE__ */ _("span", { className: e["select-button__icon"], children: c ? /* @__PURE__ */ _(k, {}) : /* @__PURE__ */ _(S, {}) })
56
+ ]
57
+ }
58
+ );
59
+ });
60
+ export {
61
+ A as S,
62
+ e as s
63
+ };
@@ -4,6 +4,7 @@ import { forwardRef as y } from "react";
4
4
  import { c as s } from "./clsx-DB4S2d7J.js";
5
5
  import { Icon as C } from "./components/Icon/Icon.js";
6
6
  import { Typography as N } from "./components/Typography/Typography.js";
7
+ import "./components/Input/Input.js";
7
8
  import "./components/Button/Button.js";
8
9
  import { Adornment as v } from "./components/Adornment/Adornment.js";
9
10
  import "./components/Dialog/Dialog.js";
@@ -14,7 +15,7 @@ import "./components/Tabs/Tabs.js";
14
15
  import { s as w } from "./Group-B3p31ftp.js";
15
16
  import "./contexts/SnackbarProvider/SnackbarProvider.js";
16
17
  import { Skeleton as f } from "./components/Skeleton/Skeleton.js";
17
- import { B as x } from "./Button-DiLqcAJG.js";
18
+ import { B as x } from "./Button-BAljjMv3.js";
18
19
  const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove_1wvod_121", p = {
19
20
  "u-typography-h1": "_u-typography-h1_1wvod_1",
20
21
  "u-typography-h2": "_u-typography-h2_1wvod_8",
@@ -58,7 +59,7 @@ const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove
58
59
  children: _
59
60
  }
60
61
  )) : /* @__PURE__ */ i("span", { "data-testid": t["data-testid"], ref: c, className: e, children: _ });
61
- }), M = y((t, c) => {
62
+ }), O = y((t, c) => {
62
63
  const {
63
64
  label: _,
64
65
  className: o,
@@ -112,7 +113,7 @@ const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove
112
113
  "row-item--clickable": "_row-item--clickable_8z1a0_13",
113
114
  "row-item--disabled": "_row-item--disabled_8z1a0_19",
114
115
  "row-item__content": "_row-item__content_8z1a0_22"
115
- }, O = y((t, c) => {
116
+ }, Q = y((t, c) => {
116
117
  const { children: _, leftAdornment: o, disabled: r, onClick: a, buttons: n, ariaLabel: e, className: u } = t, m = s(o == null ? void 0 : o.className, h["row-item__adornment"]), b = {
117
118
  onClick: (l) => {
118
119
  r || a && a(l);
@@ -148,7 +149,7 @@ const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove
148
149
  ]
149
150
  }
150
151
  );
151
- }), Q = y((t, c) => {
152
+ }), V = y((t, c) => {
152
153
  const { text: _, isSelected: o = !1, value: r, onChange: a } = t;
153
154
  return /* @__PURE__ */ k(
154
155
  "label",
@@ -175,7 +176,7 @@ const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove
175
176
  );
176
177
  });
177
178
  export {
178
- M as C,
179
- O as R,
180
- Q as T
179
+ O as C,
180
+ Q as R,
181
+ V as T
181
182
  };
@@ -1 +1 @@
1
- ._autocomplete_19kw3_1{margin-bottom:16px}._autocomplete__dropdown-list_19kw3_4{padding:0;margin-top:.1rem;border:solid .0625rem var(--gray-25);border-radius:.375rem}._autocomplete__dropdown-item_19kw3_10{padding:.375rem 1rem;list-style-type:none;cursor:pointer}._autocomplete__dropdown-item_19kw3_10:hover{color:var(--accent)}
1
+ ._autocomplete_pfc9v_1{position:relative;margin-bottom:16px}._autocomplete__dropdown-list_pfc9v_5{position:absolute;z-index:1;width:100%;max-height:25rem;padding:0;margin-top:.25rem;overflow-y:auto;background-color:#fff;border:solid .0625rem var(--gray-25);border-radius:.375rem}._autocomplete__dropdown-item_pfc9v_17{padding:.375rem 1rem;list-style-type:none;cursor:pointer}._autocomplete__dropdown-item_pfc9v_17:hover,._option-focused_pfc9v_26{color:var(--accent)}
@@ -1 +1 @@
1
- ._u-typography-h1_jbvcl_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_jbvcl_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_jbvcl_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_jbvcl_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_jbvcl_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_jbvcl_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_jbvcl_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_jbvcl_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_jbvcl_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_jbvcl_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_jbvcl_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_jbvcl_65,._select__listbox__option__text_jbvcl_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_jbvcl_68{text-decoration:line-through}._u-typography-base--underlined_jbvcl_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_jbvcl_74{text-decoration:underline line-through}._select_jbvcl_65{background-color:red}._select__popup_jbvcl_81{z-index:9999}._select__listbox_jbvcl_65{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_jbvcl_65{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_jbvcl_102{display:flex;margin-right:.5rem}._select__listbox__option_jbvcl_65:hover:not(._select__listbox__option--disabled_jbvcl_106){padding:.625rem;color:var(--accent);background-color:rgba(var(--black-100-rgb),4%);border-radius:var(--border-radius-soft)}._select__listbox__option_jbvcl_65:active:not(._select__listbox__option--disabled_jbvcl_106){color:var(--accent-dark)}._select__listbox__option--selected_jbvcl_115{background-color:var(--accent-lighter)}._select__listbox__option--disabled_jbvcl_106{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:transparent}._select__listbox__option--disabled_jbvcl_106 ._select__list__option__icon_jbvcl_123{color:rgba(var(--gray-95-rgb),25%);fill:rgba(var(--gray-95-rgb),25%)}._select-button_jbvcl_128{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_jbvcl_128+input[aria-hidden=true]{position:fixed!important}._select-button_jbvcl_128 ._base-Select-popup_jbvcl_146{z-index:1}._select-button__text_jbvcl_149{display:flex;gap:.5rem;width:100%;overflow:hidden;text-align:start;text-overflow:ellipsis;text-wrap:nowrap}._select-button__icon_jbvcl_158{display:flex}._select-button__icon_jbvcl_158 svg{color:rgba(var(--gray-95-rgb),88%)}._select-button--active_jbvcl_164{border:1px solid var(--accent)}._select-button_jbvcl_128:disabled{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:1px solid var(--gray-10)}._select-button_jbvcl_128:disabled ._select-button__icon_jbvcl_158 svg{color:rgba(var(--gray-95-rgb),25%)}._select-button_jbvcl_128:hover:not(._select-button_jbvcl_128:disabled){border:1px solid var(--gray-25)}._select-button_jbvcl_128:focus:not(._select-button_jbvcl_128:disabled),._select-button_jbvcl_128:active:not(._select-button_jbvcl_128:disabled){border:1px solid var(--accent)}
1
+ ._u-typography-h1_1d5mc_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_1d5mc_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_1d5mc_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_1d5mc_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_1d5mc_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_1d5mc_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_1d5mc_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1d5mc_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1d5mc_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1d5mc_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1d5mc_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1d5mc_65,._select__listbox__option__text_1d5mc_65{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1d5mc_68{text-decoration:line-through}._u-typography-base--underlined_1d5mc_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1d5mc_74{text-decoration:underline line-through}._select__wrapper_1d5mc_78 ._select__label_1d5mc_78{display:block;margin-bottom:.3125rem;color:var(--gray-75)}._select_1d5mc_65{background-color:red}._select__popup_1d5mc_87{z-index:9999}._select__listbox_1d5mc_65{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_1d5mc_65{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_1d5mc_108{display:flex;margin-right:.5rem}._select__listbox__option_1d5mc_65:hover:not(._select__listbox__option--disabled_1d5mc_112){padding:.625rem;color:var(--accent);background-color:rgba(var(--black-100-rgb),4%);border-radius:var(--border-radius-soft)}._select__listbox__option_1d5mc_65:active:not(._select__listbox__option--disabled_1d5mc_112){color:var(--accent-dark)}._select__listbox__option--selected_1d5mc_121{background-color:var(--accent-lighter)}._select__listbox__option--disabled_1d5mc_112{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:transparent}._select__listbox__option--disabled_1d5mc_112 ._select__list__option__icon_1d5mc_129{color:rgba(var(--gray-95-rgb),25%);fill:rgba(var(--gray-95-rgb),25%)}._select-button_1d5mc_134{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_1d5mc_134+input[aria-hidden=true]{position:fixed!important}._select-button_1d5mc_134 ._base-Select-popup_1d5mc_152{z-index:1}._select-button__text_1d5mc_155{display:flex;gap:.5rem;width:100%;overflow:hidden;text-align:start;text-overflow:ellipsis;text-wrap:nowrap}._select-button__icon_1d5mc_164{display:flex}._select-button__icon_1d5mc_164 svg{color:rgba(var(--gray-95-rgb),88%)}._select-button--active_1d5mc_170{border:1px solid var(--accent)}._select-button_1d5mc_134:disabled{color:rgba(var(--gray-95-rgb),25%);cursor:default;border:1px solid var(--gray-10)}._select-button_1d5mc_134:disabled ._select-button__icon_1d5mc_164 svg{color:rgba(var(--gray-95-rgb),25%)}._select-button_1d5mc_134:hover:not(._select-button_1d5mc_134:disabled){border:1px solid var(--gray-25)}._select-button_1d5mc_134:focus:not(._select-button_1d5mc_134:disabled),._select-button_1d5mc_134:active:not(._select-button_1d5mc_134:disabled){border:1px solid var(--accent)}
@@ -1,4 +1,4 @@
1
- import { f as E, b as a } from "./useSlotProps-kRhf7Gil.js";
1
+ import { f as E, b as a } from "./useSlotProps-C_I1kEHr.js";
2
2
  import * as r from "react";
3
3
  const f = {
4
4
  blur: "list:blur",
@@ -1,51 +1,20 @@
1
- import { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
1
+ import { InputProps } from '../Input/Input.tsx';
2
+ import { SyntheticEvent } from 'react';
2
3
 
3
- export type AutocompleteProps<T> = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
4
- /** Label text */
5
- label?: string;
4
+ export type AutocompleteProps<T> = Omit<InputProps, 'onChange' | 'value'> & {
6
5
  /** Object key to be used as label when options are an array of object */
7
6
  labelKey?: T extends object ? keyof T : never;
7
+ /** Object key to be used as value when options are an array of object */
8
+ valueKey?: T extends object ? keyof T : never;
9
+ /** Value */
10
+ value?: T;
8
11
  /** Options array */
9
12
  options?: Array<T>;
10
13
  /** callback for new option selected */
11
14
  onChange?: (event: SyntheticEvent<Element, Event>, newValue: T) => void;
12
15
  /** callback when characters are entered into the input box */
13
16
  onInputChange?: (event: SyntheticEvent<Element, Event>, newValue: string) => void;
14
- /** Info message text */
15
- infoMessage?: string;
16
- /** Error message text */
17
- errorMessage?: string;
18
- /** Left icon element */
19
- leftIcon?: ReactNode;
20
- /** Right icon element */
21
- rightIcon?: ReactNode;
22
- /** Input type. Default: text */
23
- type?: 'text' | 'password' | 'search';
24
- /** Hide the chars counter */
25
- hideCharsCounter?: boolean;
26
- /** CSS classes to be applied on the container element */
27
- classNameWrapper?: string;
28
- /** CSS classes to be applied on the label element */
29
- classNameLabel?: string;
30
- /** CSS classes to be applied on the input element */
31
- classNameInput?: string;
32
- /** CSS classes to be applied on the info message element */
33
- classNameInfoMessage?: string;
34
- /** CSS classes to be applied on the error message element */
35
- classNameErrorMessage?: string;
36
- /** CSS classes to be applied on the chars counter element */
37
- classNameCharsCounter?: string;
38
17
  /** Id to be applied as `data-testid` on the container element */
39
18
  'data-testid-wrapper'?: string;
40
- /** Id to be applied as `data-testid` on the label element */
41
- 'data-testid-label'?: string;
42
- /** Id to be applied as `data-testid` on the input element */
43
- 'data-testid-input'?: string;
44
- /** Id to be applied as `data-testid` on the info message element */
45
- 'data-testid-infoMessage'?: string;
46
- /** Id to be applied as `data-testid` on the error message element */
47
- 'data-testid-errorMessage'?: string;
48
- /** Id to be applied as `data-testid` on the chars counter element */
49
- 'data-testid-charsCounter'?: string;
50
19
  };
51
- export declare const Autocomplete: <T extends string | object>({ label, type, labelKey, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, onInputChange, classNameLabel, classNameInput, classNameErrorMessage, classNameInfoMessage, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, ...rest }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
20
+ export declare const Autocomplete: <T extends string | object>({ labelKey, valueKey, options, type, value, onChange, onInputChange, "data-testid-wrapper": dataTestId, ...props }: AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;