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

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 (120) hide show
  1. package/dist/{Button-2b1peDFT.js → Button-DiLqcAJG.js} +2 -2
  2. package/dist/{ClickAwayListener-BSW-Nd-y.js → ClickAwayListener-BaJ-OV_7.js} +4 -3
  3. package/dist/Dialog.module-D9e4RsKo.js +30 -0
  4. package/dist/Input.module-ZTRZRcNt.js +405 -0
  5. package/dist/{Popup-B6ZSGIEI.js → Popup-lLWZt2wk.js} +3 -3
  6. package/dist/{Portal-DIeBsWdL.js → Portal-B_Es6eUL.js} +2 -2
  7. package/dist/SelectButton-CoOT2txy.js +61 -0
  8. package/dist/Toggle-CRfZgFJp.js +181 -0
  9. package/dist/assets/Adornment.css +1 -0
  10. package/dist/assets/Advice.css +1 -1
  11. package/dist/assets/Autocomplete.css +1 -0
  12. package/dist/assets/Button.css +1 -1
  13. package/dist/assets/Checkbox.css +1 -1
  14. package/dist/assets/Dialog.css +1 -1
  15. package/dist/assets/IconButton.css +1 -1
  16. package/dist/assets/Input.css +1 -1
  17. package/dist/assets/PageHeader.css +1 -1
  18. package/dist/assets/Pagination.css +1 -1
  19. package/dist/assets/ResultWithChips.css +1 -0
  20. package/dist/assets/SelectButton.css +1 -1
  21. package/dist/assets/Snackbar.css +1 -1
  22. package/dist/assets/SortTooltip.css +1 -1
  23. package/dist/assets/Stepper.css +1 -1
  24. package/dist/assets/StepperNavigator.css +1 -0
  25. package/dist/assets/Table.css +1 -1
  26. package/dist/assets/TextDisplay.css +1 -1
  27. package/dist/assets/Toggle.css +1 -1
  28. package/dist/assets/Toggle2.css +1 -1
  29. package/dist/assets/Typography.css +1 -1
  30. package/dist/{combineHooksSlotProps-DVjg9PRh.js → combineHooksSlotProps-BtBYUV_B.js} +1 -1
  31. package/dist/components/Adornment/Adornment.d.ts +20 -0
  32. package/dist/components/Adornment/Adornment.js +13 -0
  33. package/dist/components/Adornment/Adornment.stories.d.ts +14 -0
  34. package/dist/components/Adornment/adornment.test.d.ts +1 -0
  35. package/dist/components/Advice/Advice.d.ts +32 -17
  36. package/dist/components/Advice/Advice.js +39 -40
  37. package/dist/components/Advice/Advice.stories.d.ts +4 -3
  38. package/dist/components/Autocomplete/Autocomplete.d.ts +51 -0
  39. package/dist/components/Autocomplete/Autocomplete.js +691 -0
  40. package/dist/components/Autocomplete/Autocomplete.stories.d.ts +22 -0
  41. package/dist/components/Button/Button.d.ts +2 -0
  42. package/dist/components/Button/Button.js +51 -49
  43. package/dist/components/Checkbox/Checkbox.js +52 -52
  44. package/dist/components/Chip/Chip.d.ts +6 -12
  45. package/dist/components/Chip/Chip.js +6 -5
  46. package/dist/components/Chip/Chip.stories.d.ts +5 -14
  47. package/dist/components/Dialog/Actions.js +1 -1
  48. package/dist/components/Dialog/Backdrop.d.ts +3 -3
  49. package/dist/components/Dialog/Backdrop.js +8 -7
  50. package/dist/components/Dialog/CloseIconButton.d.ts +1 -2
  51. package/dist/components/Dialog/CloseIconButton.js +15 -18
  52. package/dist/components/Dialog/Dialog.d.ts +9 -6
  53. package/dist/components/Dialog/Dialog.js +139 -139
  54. package/dist/components/Dialog/Dialog.stories.d.ts +50 -46
  55. package/dist/components/Dialog/DialogTitle.js +1 -1
  56. package/dist/components/EllipsisTooltip/EllipsisTooltip.js +30 -17
  57. package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +2 -1
  58. package/dist/components/Icon/Icon.js +62 -34
  59. package/dist/components/Icon/types.d.ts +1 -1
  60. package/dist/components/IconButton/IconButton.js +42 -42
  61. package/dist/components/Input/Input.d.ts +4 -2
  62. package/dist/components/Input/Input.js +74 -471
  63. package/dist/components/Input/Input.stories.d.ts +1 -1
  64. package/dist/components/InputSearch/InputSearch.stories.d.ts +1 -1
  65. package/dist/components/PageHeader/PageHeader.js +57 -57
  66. package/dist/components/Pagination/Pagination.d.ts +7 -1
  67. package/dist/components/Pagination/Pagination.js +104 -182
  68. package/dist/components/Pagination/usePagination.d.ts +90 -0
  69. package/dist/components/Pagination/usePagination.js +79 -0
  70. package/dist/components/ResultWithChips/ResultWithChips.d.ts +12 -0
  71. package/dist/components/ResultWithChips/ResultWithChips.js +33 -0
  72. package/dist/components/RowItem/RowItem.d.ts +25 -0
  73. package/dist/components/RowItem/RowItem.js +19 -0
  74. package/dist/components/RowItem/RowItem.stories.d.ts +17 -0
  75. package/dist/components/RowItem/rowItem.test.d.ts +1 -0
  76. package/dist/components/Select/Select.js +9 -8
  77. package/dist/components/Select/SelectButton.js +1 -1
  78. package/dist/components/Skeleton/Skeleton.d.ts +3 -1
  79. package/dist/components/Skeleton/Skeleton.js +18 -12
  80. package/dist/components/Skeleton/SkeletonTable.stories.d.ts +1 -1
  81. package/dist/components/Snackbar/Snackbar.js +94 -94
  82. package/dist/components/Snackbar/Snackbar.stories.d.ts +3 -3
  83. package/dist/components/SortTooltip/SortTooltip.js +46 -46
  84. package/dist/components/Stepper/Stepper.js +35 -35
  85. package/dist/components/StepperNavigator/StepperNavigator.d.ts +43 -0
  86. package/dist/components/StepperNavigator/StepperNavigator.js +56 -0
  87. package/dist/components/StepperNavigator/StepperNavigator.stories.d.ts +16 -0
  88. package/dist/components/StepperNavigator/StepperNavigator.test.d.ts +1 -0
  89. package/dist/components/Table/Table.d.ts +3 -1
  90. package/dist/components/Table/Table.js +88 -85
  91. package/dist/components/Table/Table.stories.d.ts +1 -1
  92. package/dist/components/Tabs/Tab.js +18 -17
  93. package/dist/components/Tabs/TabPanel.js +27 -26
  94. package/dist/components/Tabs/Tabs.js +25 -25
  95. package/dist/components/TextDisplay/TextDisplay.d.ts +3 -1
  96. package/dist/components/TextDisplay/TextDisplay.js +42 -28
  97. package/dist/components/TextDisplay/TextDisplay.stories.d.ts +2 -1
  98. package/dist/components/Toggle/Toggle.js +56 -56
  99. package/dist/components/ToggleGroup/Toggle.js +3 -3
  100. package/dist/components/ToggleGroup/ToggleGroup.js +1 -1
  101. package/dist/components/Tooltip/Tooltip.d.ts +3 -1
  102. package/dist/components/Tooltip/Tooltip.js +4 -4
  103. package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -0
  104. package/dist/components/Typography/Typography.js +47 -47
  105. package/dist/{index-CjW42-M-.js → index-D3Wj0eid.js} +1 -1
  106. package/dist/main.d.ts +5 -0
  107. package/dist/main.js +85 -76
  108. package/dist/ownerDocument-B61GUaFs.js +33 -0
  109. package/dist/{useButton-DNk3wrQp.js → useButton-Bn3MNH8I.js} +1 -1
  110. package/dist/useCompoundItem-B7Eo_qZk.js +68 -0
  111. package/dist/useEventCallback-BAQJJ3ye.js +14 -0
  112. package/dist/useId-BW-oWmul.js +19 -0
  113. package/dist/{useList-B0hog_3-.js → useList-BpJT77u3.js} +2 -2
  114. package/dist/{index-CH45lKw7.js → useSlotProps-kRhf7Gil.js} +93 -94
  115. package/package.json +8 -3
  116. package/dist/Dialog.module-DFEmFdYT.js +0 -30
  117. package/dist/SelectButton-C8JQKaf4.js +0 -61
  118. package/dist/Toggle-BCgIItCc.js +0 -142
  119. package/dist/useCompoundItem-D1iRfg8D.js +0 -84
  120. package/dist/useEventCallback-xTG9piMa.js +0 -45
@@ -0,0 +1,22 @@
1
+ import { StoryObj } from '@storybook/react';
2
+
3
+ declare const meta: {
4
+ title: string;
5
+ component: <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 }: import('./Autocomplete.tsx').AutocompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
6
+ tags: string[];
7
+ parameters: {
8
+ layout: string;
9
+ };
10
+ };
11
+ export default meta;
12
+ type Story = StoryObj<typeof meta>;
13
+ export declare const Simple: Story;
14
+ export declare const WithObjectsOptions: Story;
15
+ export declare const WithLabel: Story;
16
+ export declare const WithSearch: Story;
17
+ export declare const WithPlaceholder: Story;
18
+ export declare const Disabled: Story;
19
+ export declare const WithLeftIcon: Story;
20
+ export declare const WithBothIcons: Story;
21
+ export declare const WithInfoMessage: Story;
22
+ export declare const WithErrorMessage: Story;
@@ -16,6 +16,8 @@ type ButtonCoreProps = {
16
16
  variant?: Variant;
17
17
  /** mui base button props */
18
18
  muiButtonBaseProps?: MUIButtonBaseProps;
19
+ /** Id to be applied as `data-testid` on the container element */
20
+ 'data-testid'?: string;
19
21
  };
20
22
  interface ButtonPropsWithLink extends ButtonCoreProps {
21
23
  /** link for component to navigate to, if provide component will be an anchor */
@@ -1,65 +1,67 @@
1
1
  import '../../assets/Button.css';
2
- import { jsx as n, jsxs as l } from "react/jsx-runtime";
3
- import { forwardRef as f, useMemo as d } from "react";
4
- import { c } from "../../clsx-DB4S2d7J.js";
2
+ import { jsx as p, jsxs as l } from "react/jsx-runtime";
3
+ import { forwardRef as x, useMemo as c } from "react";
4
+ import { c as v } from "../../clsx-DB4S2d7J.js";
5
5
  import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
6
- import { B as x } from "../../Button-2b1peDFT.js";
7
- const k = "_button_1ynf4_56", o = {
8
- "u-typography-h1": "_u-typography-h1_1ynf4_1",
9
- "u-typography-h2": "_u-typography-h2_1ynf4_8",
10
- "u-typography-h3": "_u-typography-h3_1ynf4_15",
11
- "u-typography-h4": "_u-typography-h4_1ynf4_22",
12
- "u-typography-h5": "_u-typography-h5_1ynf4_29",
13
- "u-typography-h6": "_u-typography-h6_1ynf4_36",
14
- "u-typography-base": "_u-typography-base_1ynf4_43",
15
- "u-typography-base--xxl": "_u-typography-base--xxl_1ynf4_48",
16
- "u-typography-base--xl": "_u-typography-base--xl_1ynf4_52",
17
- "u-typography-base--lg": "_u-typography-base--lg_1ynf4_56",
6
+ import { B as f } from "../../Button-DiLqcAJG.js";
7
+ const k = "_button_dxo5v_57", t = {
8
+ "u-typography-h1": "_u-typography-h1_dxo5v_1",
9
+ "u-typography-h2": "_u-typography-h2_dxo5v_8",
10
+ "u-typography-h3": "_u-typography-h3_dxo5v_15",
11
+ "u-typography-h4": "_u-typography-h4_dxo5v_22",
12
+ "u-typography-h5": "_u-typography-h5_dxo5v_29",
13
+ "u-typography-h6": "_u-typography-h6_dxo5v_36",
14
+ "u-typography-base": "_u-typography-base_dxo5v_43",
15
+ "u-typography-base--xxl": "_u-typography-base--xxl_dxo5v_49",
16
+ "u-typography-base--xl": "_u-typography-base--xl_dxo5v_53",
17
+ "u-typography-base--lg": "_u-typography-base--lg_dxo5v_57",
18
18
  button: k,
19
- "u-typography-base--sm": "_u-typography-base--sm_1ynf4_60",
20
- "u-typography-base--bold": "_u-typography-base--bold_1ynf4_64",
21
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_1ynf4_67",
22
- "u-typography-base--underlined": "_u-typography-base--underlined_1ynf4_70",
23
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_1ynf4_73",
24
- "button--primary": "_button--primary_1ynf4_85",
25
- "button--secondary": "_button--secondary_1ynf4_100",
26
- "button--quick": "_button--quick_1ynf4_117",
27
- "button__loading-container": "_button__loading-container_1ynf4_137"
28
- }, P = f((r, p) => {
19
+ "u-typography-base--sm": "_u-typography-base--sm_dxo5v_61",
20
+ "u-typography-base--bold": "_u-typography-base--bold_dxo5v_65",
21
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_dxo5v_68",
22
+ "u-typography-base--underlined": "_u-typography-base--underlined_dxo5v_71",
23
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_dxo5v_74",
24
+ "button--primary": "_button--primary_dxo5v_86",
25
+ "button--secondary": "_button--secondary_dxo5v_101",
26
+ "button--quick": "_button--quick_dxo5v_118",
27
+ "button__loading-container": "_button__loading-container_dxo5v_138"
28
+ }, S = x((y, _) => {
29
29
  const {
30
- onClick: _,
31
- link: u,
32
- loading: e,
33
- children: y,
30
+ onClick: u,
31
+ link: e,
32
+ loading: n,
33
+ children: a,
34
34
  type: s = "button",
35
35
  disabled: h,
36
- className: a,
37
- variant: t = "primary",
38
- muiButtonBaseProps: g
39
- } = r, i = {
40
- invert: t === "secondary" || t === "quick"
41
- }, b = d(
42
- () => c([o.button, o[`button--${t}`], a]),
43
- [a, t]
36
+ className: r,
37
+ variant: o = "primary",
38
+ muiButtonBaseProps: d,
39
+ "data-testid": g
40
+ } = y, i = {
41
+ invert: o === "secondary" || o === "quick"
42
+ }, b = c(
43
+ () => v([t.button, t[`button--${o}`], r]),
44
+ [r, o]
44
45
  );
45
- return /* @__PURE__ */ n(
46
- x,
46
+ return /* @__PURE__ */ p(
47
+ f,
47
48
  {
48
49
  type: s,
49
- href: u,
50
- onClick: _,
50
+ href: e,
51
+ onClick: u,
51
52
  disabled: h,
52
53
  className: b,
53
- ref: p,
54
- ...g ?? {},
55
- children: e ? /* @__PURE__ */ l("div", { className: o["button__loading-container"], children: [
56
- /* @__PURE__ */ n(m, { ...i }),
57
- y
58
- ] }) : y
54
+ ref: _,
55
+ "data-testid": g,
56
+ ...d ?? {},
57
+ children: n ? /* @__PURE__ */ l("div", { className: t["button__loading-container"], children: [
58
+ /* @__PURE__ */ p(m, { ...i }),
59
+ a
60
+ ] }) : a
59
61
  }
60
62
  );
61
63
  });
62
64
  export {
63
- P as Button,
64
- P as default
65
+ S as Button,
66
+ S as default
65
67
  };
@@ -1,71 +1,71 @@
1
1
  import '../../assets/Checkbox.css';
2
- import { jsxs as v, jsx as c } from "react/jsx-runtime";
3
- import * as o from "react";
2
+ import { jsxs as w, jsx as c } from "react/jsx-runtime";
3
+ import * as l from "react";
4
4
  import { useState as k, useEffect as i } from "react";
5
- import { c as s } from "../../clsx-DB4S2d7J.js";
6
- const N = (a) => /* @__PURE__ */ o.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), z = "_label_18hen_64", E = "_checkmark_18hen_93", e = {
7
- "u-typography-h1": "_u-typography-h1_18hen_1",
8
- "u-typography-h2": "_u-typography-h2_18hen_8",
9
- "u-typography-h3": "_u-typography-h3_18hen_15",
10
- "u-typography-h4": "_u-typography-h4_18hen_22",
11
- "u-typography-h5": "_u-typography-h5_18hen_29",
12
- "u-typography-h6": "_u-typography-h6_18hen_36",
13
- "u-typography-base": "_u-typography-base_18hen_43",
14
- "u-typography-base--xxl": "_u-typography-base--xxl_18hen_48",
15
- "u-typography-base--xl": "_u-typography-base--xl_18hen_52",
16
- "u-typography-base--lg": "_u-typography-base--lg_18hen_56",
17
- "u-typography-base--sm": "_u-typography-base--sm_18hen_60",
18
- "u-typography-base--bold": "_u-typography-base--bold_18hen_64",
19
- "checkbox-wrapper": "_checkbox-wrapper_18hen_64",
20
- "label--highlighted": "_label--highlighted_18hen_64",
21
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_18hen_67",
22
- "u-typography-base--underlined": "_u-typography-base--underlined_18hen_70",
23
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_18hen_73",
24
- label: z,
25
- "label--highlighted-checked": "_label--highlighted-checked_18hen_90",
26
- checkmark: E,
27
- "checkmark--checked": "_checkmark--checked_18hen_105",
28
- "checkmark--light-theme": "_checkmark--light-theme_18hen_108",
29
- "checkmark--accent-theme": "_checkmark--accent-theme_18hen_115",
30
- "checkmark--small-size": "_checkmark--small-size_18hen_122",
31
- "checkmark--normal-size": "_checkmark--normal-size_18hen_129"
32
- }, F = (a) => /* @__PURE__ */ o.createElement("svg", { width: 10, height: 3, viewBox: "0 0 10 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("rect", { y: 0.5, width: 10, height: 2, rx: 1, fill: "#1897F3" })), M = ({
5
+ import { c as _ } from "../../clsx-DB4S2d7J.js";
6
+ const v = (a) => /* @__PURE__ */ l.createElement("svg", { width: 14, height: 10, viewBox: "0 0 14 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ l.createElement("path", { d: "M13.7063 0.293438C14.0969 0.684062 14.0969 1.31531 13.7063 1.70594L5.70625 9.70594C5.31563 10.0966 4.68437 10.0966 4.29375 9.70594L0.292875 5.70594C-0.097625 5.31531 -0.097625 4.68406 0.292875 4.29344C0.683437 3.90281 1.31656 3.90281 1.70719 4.29344L4.97188 7.58406L12.2937 0.293438C12.6844 -0.0978125 13.3156 -0.0978125 13.7063 0.293438Z", fill: "#F7F7FC" })), N = "_label_xqg5n_65", z = "_checkmark_xqg5n_94", e = {
7
+ "u-typography-h1": "_u-typography-h1_xqg5n_1",
8
+ "u-typography-h2": "_u-typography-h2_xqg5n_8",
9
+ "u-typography-h3": "_u-typography-h3_xqg5n_15",
10
+ "u-typography-h4": "_u-typography-h4_xqg5n_22",
11
+ "u-typography-h5": "_u-typography-h5_xqg5n_29",
12
+ "u-typography-h6": "_u-typography-h6_xqg5n_36",
13
+ "u-typography-base": "_u-typography-base_xqg5n_43",
14
+ "u-typography-base--xxl": "_u-typography-base--xxl_xqg5n_49",
15
+ "u-typography-base--xl": "_u-typography-base--xl_xqg5n_53",
16
+ "u-typography-base--lg": "_u-typography-base--lg_xqg5n_57",
17
+ "u-typography-base--sm": "_u-typography-base--sm_xqg5n_61",
18
+ "u-typography-base--bold": "_u-typography-base--bold_xqg5n_65",
19
+ "checkbox-wrapper": "_checkbox-wrapper_xqg5n_65",
20
+ "label--highlighted": "_label--highlighted_xqg5n_65",
21
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_xqg5n_68",
22
+ "u-typography-base--underlined": "_u-typography-base--underlined_xqg5n_71",
23
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_xqg5n_74",
24
+ label: N,
25
+ "label--highlighted-checked": "_label--highlighted-checked_xqg5n_91",
26
+ checkmark: z,
27
+ "checkmark--checked": "_checkmark--checked_xqg5n_106",
28
+ "checkmark--light-theme": "_checkmark--light-theme_xqg5n_109",
29
+ "checkmark--accent-theme": "_checkmark--accent-theme_xqg5n_116",
30
+ "checkmark--small-size": "_checkmark--small-size_xqg5n_123",
31
+ "checkmark--normal-size": "_checkmark--normal-size_xqg5n_130"
32
+ }, E = (a) => /* @__PURE__ */ l.createElement("svg", { width: 10, height: 3, viewBox: "0 0 10 3", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ l.createElement("rect", { y: 0.5, width: 10, height: 2, rx: 1, fill: "#1897F3" })), B = ({
33
33
  className: a,
34
- label: n,
34
+ label: s,
35
35
  name: m,
36
- theme: u = "accent",
37
- size: b = "normal",
36
+ theme: x = "accent",
37
+ size: u = "normal",
38
38
  checked: r,
39
- onChange: d,
40
- isIndeterminate: l,
41
- highlightLabel: x = !1,
42
- ...p
39
+ onChange: b,
40
+ isIndeterminate: g,
41
+ highlightLabel: d = !1,
42
+ ...o
43
43
  }) => {
44
- const [h, g] = k(r), [t, y] = k(l);
44
+ const [h, n] = k(r), [t, y] = k(g);
45
45
  i(() => {
46
- r !== h && g(r);
46
+ r !== h && n(r);
47
47
  }, [r]), i(() => {
48
- typeof l == "boolean" && y(l);
49
- }, [l]);
50
- const C = s(e["checkbox-wrapper"], a), f = s(
48
+ typeof g == "boolean" && y(g);
49
+ }, [g]);
50
+ const q = _(e["checkbox-wrapper"], a), C = _(
51
51
  e.checkmark,
52
- e[`checkmark--${u}-theme`],
53
- e[`checkmark--${b}-size`],
52
+ e[`checkmark--${x}-theme`],
53
+ e[`checkmark--${u}-size`],
54
54
  (h || t) && e["checkmark--checked"]
55
- ), w = x && (p.children || n) ? s(
55
+ ), f = d && (o.children || s) ? _(
56
56
  e.label,
57
57
  e["label--highlighted"],
58
58
  (h || t) && e["label--highlighted-checked"]
59
59
  ) : e.label;
60
- return /* @__PURE__ */ v("div", { className: C, onClick: () => {
61
- let _ = !h;
62
- t && (y(!1), _ = !0), d(_), g(_);
63
- }, ...p, children: [
60
+ return /* @__PURE__ */ w("div", { className: q, onClick: () => {
61
+ let p = !h;
62
+ t && (y(!1), p = !0), b(p), n(p);
63
+ }, ...o, children: [
64
64
  /* @__PURE__ */ c("input", { name: m, type: "checkbox", checked: !t && h, readOnly: !0 }),
65
- /* @__PURE__ */ c("span", { className: f, children: t ? /* @__PURE__ */ c(F, {}) : h && /* @__PURE__ */ c(N, {}) }),
66
- /* @__PURE__ */ c("label", { className: w, children: p.children || n })
65
+ /* @__PURE__ */ c("span", { className: C, children: t ? /* @__PURE__ */ c(E, {}) : h && /* @__PURE__ */ c(v, {}) }),
66
+ /* @__PURE__ */ c("label", { className: f, children: o.children || s })
67
67
  ] });
68
68
  };
69
69
  export {
70
- M as Checkbox
70
+ B as Checkbox
71
71
  };
@@ -1,14 +1,14 @@
1
- import { IconProps } from '../../main';
2
- import { ReactElement, ReactNode } from 'react';
1
+ import { AdornmentProps } from '../../main';
2
+ import { ReactNode } from 'react';
3
3
 
4
4
  export type Variant = 'default' | 'contained' | 'outlined';
5
- type ChipProps = {
5
+ export type ChipProps = {
6
6
  /** Main content to display, typically just some text */
7
7
  label: ReactNode;
8
8
  /** Whether to show loading state (skeleton) */
9
9
  loading?: boolean;
10
10
  /** Left icon to display */
11
- leftAdornment?: ChipAdornmentSlotProps;
11
+ leftAdornment?: AdornmentProps;
12
12
  /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the chip wrapper */
13
13
  'data-testid'?: string;
14
14
  /** Functionality to perform when the main body of the chip is clicked */
@@ -27,13 +27,7 @@ type ChipProps = {
27
27
  /** Dataset test id only used for tests, used to hook onto the loading skeleton component for this chip */
28
28
  'data-testid-skeleton'?: string;
29
29
  };
30
- export type ChipAdornmentSlotProps = {
31
- /** The Marola Icon to display */
32
- icon: ReactElement<IconProps>;
33
- /** Any additional classes to apply to icon */
34
- className?: string;
35
- /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the icon */
36
- 'data-testid'?: string;
30
+ export type ChipWrapperProps = Pick<ChipProps, 'data-testid' | 'onClickContent' | 'disabled' | 'className' | 'variant'> & {
31
+ children?: ReactNode;
37
32
  };
38
33
  export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<unknown>>;
39
- export {};
@@ -1,11 +1,12 @@
1
1
  import "react/jsx-runtime";
2
2
  import "react";
3
3
  import "../../clsx-DB4S2d7J.js";
4
+ import "../Adornment/Adornment.js";
4
5
  import "../Icon/Icon.js";
5
- import "../Button/Button.js";
6
- import { C as j } from "../../Toggle-BCgIItCc.js";
7
- import "../Dialog/Backdrop.js";
8
6
  import "../Typography/Typography.js";
7
+ import "../Button/Button.js";
8
+ import { C as k } from "../../Toggle-CRfZgFJp.js";
9
+ import "../Dialog/Dialog.js";
9
10
  import "../IconButton/IconButton.js";
10
11
  import "../Select/Select.js";
11
12
  import "../Skeleton/Skeleton.js";
@@ -13,7 +14,7 @@ import "../Table/Table.js";
13
14
  import "../Tabs/Tabs.js";
14
15
  import "../../Group-B3p31ftp.js";
15
16
  import "../../contexts/SnackbarProvider/SnackbarProvider.js";
16
- import "../../Button-2b1peDFT.js";
17
+ import "../../Button-DiLqcAJG.js";
17
18
  export {
18
- j as Chip
19
+ k as Chip
19
20
  };
@@ -2,24 +2,12 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: import('react').ForwardRefExoticComponent<{
6
- label: import('react').ReactNode;
7
- loading?: boolean | undefined;
8
- leftAdornment?: import('./Chip').ChipAdornmentSlotProps | undefined;
9
- 'data-testid'?: string | undefined;
10
- onClickContent?: (() => void) | undefined;
11
- onClickRemove?: (() => void) | undefined;
12
- disabled?: boolean | undefined;
13
- className?: string | undefined;
14
- 'className-skeleton'?: string | undefined;
15
- variant?: import('./Chip').Variant | undefined;
16
- 'data-testid-skeleton'?: string | undefined;
17
- } & import('react').RefAttributes<unknown>>;
5
+ component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
18
6
  tags: string[];
19
7
  decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
20
8
  label: import('react').ReactNode;
21
9
  loading?: boolean | undefined;
22
- leftAdornment?: import('./Chip').ChipAdornmentSlotProps | undefined;
10
+ leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;
23
11
  'data-testid'?: string | undefined;
24
12
  onClickContent?: (() => void) | undefined;
25
13
  onClickRemove?: (() => void) | undefined;
@@ -36,7 +24,10 @@ export default meta;
36
24
  type Story = StoryObj<typeof meta>;
37
25
  export declare const Simple: Story;
38
26
  export declare const Clickable: Story;
27
+ export declare const Disabled: Story;
39
28
  export declare const ClickableWithRemove: Story;
29
+ export declare const ClickableOnlyRemove: Story;
40
30
  export declare const FullDefault: Story;
41
31
  export declare const FullOutlined: Story;
42
32
  export declare const FullContained: Story;
33
+ export declare const FullContainedCustomIcon: Story;
@@ -1,5 +1,5 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
- import { s as t } from "../../Dialog.module-DFEmFdYT.js";
2
+ import { s as t } from "../../Dialog.module-D9e4RsKo.js";
3
3
  const i = ({ children: s }) => /* @__PURE__ */ o("div", { className: t.dialog__actions, children: s });
4
4
  export {
5
5
  i as default
@@ -1,6 +1,6 @@
1
- /// <reference types="react" />
2
- declare const Backdrop: import('react').ForwardRefExoticComponent<{
3
- open?: boolean | undefined;
1
+ import { ModalBackdropSlotProps } from '@mui/base';
2
+
3
+ declare const Backdrop: import('react').ForwardRefExoticComponent<ModalBackdropSlotProps & {
4
4
  className: string;
5
5
  } & import('react').RefAttributes<HTMLDivElement>>;
6
6
  export default Backdrop;
@@ -1,10 +1,11 @@
1
1
  import { jsx as a } from "react/jsx-runtime";
2
- import { forwardRef as t } from "react";
3
- import { s as e } from "../../Dialog.module-DFEmFdYT.js";
4
- const i = t((o, r) => {
5
- const { open: m, className: p, ...s } = o;
6
- return /* @__PURE__ */ a("div", { className: e.dialog__backdrop, ref: r, ...s });
7
- });
2
+ import { forwardRef as s } from "react";
3
+ import { c as t } from "../../clsx-DB4S2d7J.js";
4
+ import { s as m } from "../../Dialog.module-D9e4RsKo.js";
5
+ const l = s(
6
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
7
+ ({ ownerState: e, ...r }, o) => /* @__PURE__ */ a("div", { ...r, className: t(m.dialog__backdrop, r.className), ref: o })
8
+ );
8
9
  export {
9
- i as default
10
+ l as default
10
11
  };
@@ -1,6 +1,5 @@
1
1
  export interface CloseIconButtonProps {
2
2
  handleOnClose: () => void;
3
- className: string;
4
3
  }
5
- declare const CloseIconButton: ({ handleOnClose, className }: CloseIconButtonProps) => import("react/jsx-runtime").JSX.Element;
4
+ declare const CloseIconButton: ({ handleOnClose }: CloseIconButtonProps) => import("react/jsx-runtime").JSX.Element;
6
5
  export default CloseIconButton;
@@ -1,20 +1,17 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { Icon as r } from "../Icon/Icon.js";
3
- import { s as t } from "../../Dialog.module-DFEmFdYT.js";
4
- import { B as a } from "../../Button-2b1peDFT.js";
5
- const d = ({ handleOnClose: i, className: o }) => {
6
- const l = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
7
- return /* @__PURE__ */ s(
8
- a,
9
- {
10
- className: l,
11
- "aria-description": "Close dialog",
12
- onClick: i,
13
- "data-testid": "dialog-close-button",
14
- children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
15
- }
16
- );
17
- };
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import { Icon as t } from "../Icon/Icon.js";
3
+ import { s as i } from "../../Dialog.module-D9e4RsKo.js";
4
+ import { B as s } from "../../Button-DiLqcAJG.js";
5
+ const n = ({ handleOnClose: r }) => /* @__PURE__ */ o(
6
+ s,
7
+ {
8
+ className: i["dialog__close-icon"],
9
+ "aria-description": "Close dialog",
10
+ onClick: r,
11
+ "data-testid": "dialog-close-button",
12
+ children: /* @__PURE__ */ o(t, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
13
+ }
14
+ );
18
15
  export {
19
- d as default
16
+ n as default
20
17
  };
@@ -1,6 +1,6 @@
1
- import { default as DialogTitle } from './DialogTitle';
2
- import { default as Content } from './Content';
3
- import { default as Actions } from './Actions';
1
+ import { default as DialogTitle, DialogTitleProps } from './DialogTitle';
2
+ import { default as Content, DialogContentProps } from './Content';
3
+ import { default as Actions, DialogActionProps } from './Actions';
4
4
  import { ModalProps } from '@mui/base';
5
5
  import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
6
6
 
@@ -12,11 +12,14 @@ export interface DialogProps extends ModalProps {
12
12
  dialogTitle: ReactNode;
13
13
  /** display subtitle */
14
14
  dialogSubtitle?: ReactNode;
15
- /** if true, show skeleton */
16
- isLoading?: boolean;
17
15
  /** callback for when close is clicked */
18
16
  onClose?: () => void;
19
17
  }
20
- declare const Dialog: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
18
+ declare const Dialog: {
19
+ ({ children, dialogTitle, dialogSubtitle, onClose, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
20
+ Title: import('react').FunctionComponent<DialogTitleProps>;
21
+ Content: import('react').FunctionComponent<DialogContentProps>;
22
+ Actions: import('react').FunctionComponent<DialogActionProps>;
23
+ };
21
24
  export { Dialog, DialogTitle, Content, Actions };
22
25
  export default Dialog;