@pismo/marola 1.0.0-beta.9 → 1.0.1

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 (162) 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/Dialog.module-W7UCXlf3.js +29 -0
  4. package/dist/Group-DspH8hyO.js +30 -0
  5. package/dist/Popover.module-B4boCutS.js +10 -0
  6. package/dist/{Popup-lLWZt2wk.js → Popup-Ck3XlWMq.js} +3 -3
  7. package/dist/{Portal-B_Es6eUL.js → Portal-oY3enyAm.js} +2 -2
  8. package/dist/SelectButton-B38avP9u.js +75 -0
  9. package/dist/{Tabs.module-jkH1Qjn7.js → Tabs.module-BGGTkDc5.js} +7 -7
  10. package/dist/Toggle-MfR7l8Wn.js +190 -0
  11. package/dist/assets/Alert.css +1 -0
  12. package/dist/assets/Autocomplete.css +1 -1
  13. package/dist/assets/Avatar.css +1 -0
  14. package/dist/assets/Description.css +1 -0
  15. package/dist/assets/Dialog.css +1 -1
  16. package/dist/assets/EllipsisTooltip.css +1 -1
  17. package/dist/assets/Group.css +1 -1
  18. package/dist/assets/Input.css +1 -1
  19. package/dist/assets/PageHeader.css +1 -1
  20. package/dist/assets/Popover.css +1 -0
  21. package/dist/assets/RadioButton.css +1 -0
  22. package/dist/assets/ResultWithChips.css +1 -0
  23. package/dist/assets/SelectButton.css +1 -1
  24. package/dist/assets/Skeleton.css +1 -1
  25. package/dist/assets/Snackbar.css +1 -1
  26. package/dist/assets/StepperNavigator.css +1 -0
  27. package/dist/assets/Table.css +1 -1
  28. package/dist/assets/Tabs.css +1 -1
  29. package/dist/assets/Tag.css +1 -0
  30. package/dist/assets/Toggle2.css +1 -1
  31. package/dist/{combineHooksSlotProps-BtBYUV_B.js → combineHooksSlotProps-C-zYvfnF.js} +1 -1
  32. package/dist/components/Adornment/Adornment.d.ts +11 -2
  33. package/dist/components/Adornment/Adornment.js +6 -6
  34. package/dist/components/Adornment/Adornment.stories.d.ts +14 -0
  35. package/dist/components/Adornment/adornment.test.d.ts +1 -0
  36. package/dist/components/Advice/Advice.d.ts +2 -2
  37. package/dist/components/Alert/Alert.d.ts +11 -0
  38. package/dist/components/Alert/Alert.js +46 -0
  39. package/dist/components/Alert/Alert.stories.d.ts +24 -0
  40. package/dist/components/Alert/Alert.test.d.ts +1 -0
  41. package/dist/components/Autocomplete/Autocomplete.d.ts +12 -42
  42. package/dist/components/Autocomplete/Autocomplete.js +422 -432
  43. package/dist/components/Autocomplete/Autocomplete.stories.d.ts +3 -25
  44. package/dist/components/Avatar/Avatar.d.ts +15 -0
  45. package/dist/components/Avatar/Avatar.js +51 -0
  46. package/dist/components/Avatar/Avatar.stories.d.ts +25 -0
  47. package/dist/components/Button/Button.d.ts +2 -0
  48. package/dist/components/Button/Button.js +23 -21
  49. package/dist/components/Chip/Chip.d.ts +6 -4
  50. package/dist/components/Chip/Chip.js +10 -6
  51. package/dist/components/Chip/Chip.stories.d.ts +5 -14
  52. package/dist/components/ConfirmationDialog/ConfirmationDialog.d.ts +14 -0
  53. package/dist/components/ConfirmationDialog/ConfirmationDialog.js +37 -0
  54. package/dist/components/ConfirmationDialog/ConfirmationDialog.stories.d.ts +23 -0
  55. package/dist/components/ConfirmationDialog/ConfirmationModal.test.d.ts +1 -0
  56. package/dist/components/Description/Description.d.ts +21 -0
  57. package/dist/components/Description/Description.js +66 -0
  58. package/dist/components/Description/Description.stories.d.ts +22 -0
  59. package/dist/components/Description/Description.test.d.ts +1 -0
  60. package/dist/components/Dialog/Actions.js +1 -1
  61. package/dist/components/Dialog/Backdrop.d.ts +3 -3
  62. package/dist/components/Dialog/Backdrop.js +8 -7
  63. package/dist/components/Dialog/CloseIconButton.d.ts +1 -2
  64. package/dist/components/Dialog/CloseIconButton.js +15 -18
  65. package/dist/components/Dialog/Dialog.d.ts +16 -10
  66. package/dist/components/Dialog/Dialog.js +167 -167
  67. package/dist/components/Dialog/Dialog.stories.d.ts +73 -67
  68. package/dist/components/Dialog/DialogTitle.d.ts +5 -2
  69. package/dist/components/Dialog/DialogTitle.js +22 -16
  70. package/dist/components/EllipsisTooltip/EllipsisTooltip.js +30 -17
  71. package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +1 -0
  72. package/dist/components/Icon/Icon.js +337 -51
  73. package/dist/components/Icon/types.d.ts +1 -1
  74. package/dist/components/IconButton/IconButton.js +1 -1
  75. package/dist/components/Input/Input.d.ts +26 -5
  76. package/dist/components/Input/Input.js +514 -102
  77. package/dist/components/Input/Input.stories.d.ts +2 -21
  78. package/dist/components/InputSearch/InputSearch.d.ts +37 -7
  79. package/dist/components/InputSearch/InputSearch.js +27 -29
  80. package/dist/components/InputSearch/InputSearch.stories.d.ts +15 -3
  81. package/dist/components/PageHeader/PageHeader.d.ts +6 -2
  82. package/dist/components/PageHeader/PageHeader.js +77 -70
  83. package/dist/components/PageHeader/PageHeader.stories.d.ts +3 -1
  84. package/dist/components/PageHeader/PageHeader.test.d.ts +1 -0
  85. package/dist/components/Pagination/Pagination.d.ts +5 -1
  86. package/dist/components/Pagination/Pagination.js +45 -46
  87. package/dist/components/Pagination/Pagination.stories.d.ts +1 -1
  88. package/dist/components/Popover/Popover.d.ts +32 -0
  89. package/dist/components/Popover/Popover.js +24 -0
  90. package/dist/components/Popover/Popover.stories.d.ts +34 -0
  91. package/dist/components/Popover/PopoverBody.d.ts +6 -0
  92. package/dist/components/Popover/PopoverBody.js +6 -0
  93. package/dist/components/Popover/PopoverFooter.d.ts +6 -0
  94. package/dist/components/Popover/PopoverFooter.js +6 -0
  95. package/dist/components/Popover/PopoverHeader.d.ts +6 -0
  96. package/dist/components/Popover/PopoverHeader.js +6 -0
  97. package/dist/components/RadioButton/RadioButton.d.ts +19 -0
  98. package/dist/components/RadioButton/RadioButton.js +37 -0
  99. package/dist/components/RadioButton/RadioButton.stories.d.ts +24 -0
  100. package/dist/components/RadioButton/RadioButton.test.d.ts +1 -0
  101. package/dist/components/ResultWithChips/ResultWithChips.d.ts +12 -0
  102. package/dist/components/ResultWithChips/ResultWithChips.js +33 -0
  103. package/dist/components/RowItem/RowItem.d.ts +2 -2
  104. package/dist/components/RowItem/RowItem.js +9 -5
  105. package/dist/components/RowItem/RowItem.stories.d.ts +17 -0
  106. package/dist/components/RowItem/rowItem.test.d.ts +1 -0
  107. package/dist/components/Select/Select.d.ts +22 -0
  108. package/dist/components/Select/Select.js +476 -414
  109. package/dist/components/Select/SelectButton.d.ts +2 -0
  110. package/dist/components/Select/SelectButton.js +3 -2
  111. package/dist/components/Skeleton/Skeleton.d.ts +3 -1
  112. package/dist/components/Skeleton/Skeleton.js +20 -14
  113. package/dist/components/Skeleton/SkeletonTable.stories.d.ts +1 -1
  114. package/dist/components/Snackbar/Snackbar.js +119 -134
  115. package/dist/components/StepperNavigator/StepperNavigator.d.ts +58 -0
  116. package/dist/components/StepperNavigator/StepperNavigator.js +115 -0
  117. package/dist/components/StepperNavigator/StepperNavigator.stories.d.ts +18 -0
  118. package/dist/components/StepperNavigator/StepperNavigator.test.d.ts +1 -0
  119. package/dist/components/Table/Table.d.ts +3 -1
  120. package/dist/components/Table/Table.js +89 -101
  121. package/dist/components/Table/Table.stories.d.ts +1 -1
  122. package/dist/components/Tabs/Tab.d.ts +5 -3
  123. package/dist/components/Tabs/Tab.js +36 -35
  124. package/dist/components/Tabs/TabPanel.d.ts +4 -2
  125. package/dist/components/Tabs/TabPanel.js +48 -38
  126. package/dist/components/Tabs/Tabs.d.ts +6 -4
  127. package/dist/components/Tabs/Tabs.js +115 -112
  128. package/dist/components/Tag/Tag.d.ts +14 -0
  129. package/dist/components/Tag/Tag.js +73 -0
  130. package/dist/components/Tag/Tag.stories.d.ts +29 -0
  131. package/dist/components/Tag/Tag.test.d.ts +1 -0
  132. package/dist/components/TextDisplay/TextDisplay.d.ts +7 -3
  133. package/dist/components/TextDisplay/TextDisplay.js +44 -37
  134. package/dist/components/TextDisplay/TextDisplay.stories.d.ts +2 -1
  135. package/dist/components/Toggle/Toggle.js +1 -1
  136. package/dist/components/ToggleGroup/Group.d.ts +2 -0
  137. package/dist/components/ToggleGroup/Group.js +4 -2
  138. package/dist/components/ToggleGroup/Toggle.d.ts +2 -0
  139. package/dist/components/ToggleGroup/Toggle.js +8 -4
  140. package/dist/components/ToggleGroup/ToggleGroup.js +2 -2
  141. package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +2 -0
  142. package/dist/components/Tooltip/Tooltip.d.ts +3 -1
  143. package/dist/components/Tooltip/Tooltip.js +4 -4
  144. package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -0
  145. package/dist/contexts/SnackbarProvider/SnackbarProvider.d.ts +2 -2
  146. package/dist/contexts/SnackbarProvider/SnackbarProvider.js +35 -30
  147. package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts +1 -1
  148. package/dist/{index-D3Wj0eid.js → index-bQFToy-I.js} +1 -1
  149. package/dist/main.d.ts +9 -0
  150. package/dist/main.js +97 -79
  151. package/dist/marola.css +1 -1
  152. package/dist/{ownerDocument-B61GUaFs.js → ownerDocument-YGhwAnr1.js} +1 -1
  153. package/dist/test-utils/assertStyles.d.ts +1 -1
  154. package/dist/{useButton-Bn3MNH8I.js → useButton-DcihopJG.js} +1 -1
  155. package/dist/{useList-BpJT77u3.js → useList-B9C55YB7.js} +2 -2
  156. package/dist/{useSlotProps-kRhf7Gil.js → useSlotProps-C_I1kEHr.js} +73 -72
  157. package/package.json +22 -13
  158. package/dist/Dialog.module-DFcZsVAd.js +0 -30
  159. package/dist/Group-B3p31ftp.js +0 -26
  160. package/dist/Input.module-ZTRZRcNt.js +0 -405
  161. package/dist/SelectButton-CoOT2txy.js +0 -61
  162. package/dist/Toggle-f5brSwAI.js +0 -175
@@ -1 +1 @@
1
- ._tabs_18ymz_1{gap:8px;width:100%}._tabs__tab_18ymz_5{min-width:94px;height:48px;padding:0 8px 0 0;color:var(--gray-75);cursor:pointer;background-color:var(--white-100);border:none}._tabs__tab_18ymz_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_18ymz_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_18ymz_22{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_18ymz_22:focus,._tabs__tab--disabled_18ymz_22:active,._tabs__tab--disabled_18ymz_22:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_18ymz_31{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab-panel_18ymz_35{width:100%;margin-top:16px}
1
+ ._tabs_1xfbu_1{gap:8px;width:100%}._tabs__tab_1xfbu_5{min-width:94px;height:48px;padding:0 8px 0 0;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent}._tabs__tab_1xfbu_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_1xfbu_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_1xfbu_23{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_1xfbu_23:focus,._tabs__tab--disabled_1xfbu_23:active,._tabs__tab--disabled_1xfbu_23:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_1xfbu_32{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab-panel_1xfbu_36{width:100%;margin-top:16px}
@@ -0,0 +1 @@
1
+ ._container_b8jbs_1{border-radius:4px;padding:1px 8px;display:inline-flex;align-items:center;justify-content:center;width:fit-content}._container--content_b8jbs_9{display:flex;align-items:center;column-gap:4px}._container--content__icon_b8jbs_14{display:flex;align-items:center}._container--default_b8jbs_18{background-color:#00000005;color:var(--gray-95)}._container--default__outlined_b8jbs_22{border:1px solid var(--border)}._container--default__icon_b8jbs_25{color:var(--gray-95);opacity:.88}._container--success_b8jbs_29{background-color:var(--green-1);color:var(--success-text)}._container--success__outlined_b8jbs_33{border:1px solid var(--green-3)}._container--error_b8jbs_36{background-color:var(--error-background);color:var(--error-text)}._container--error__outlined_b8jbs_40{border:1px solid var(--error-border)}._container--processing_b8jbs_43{background-color:var(--blue-1);color:var(--info-text)}._container--processing__outlined_b8jbs_47{border:1px solid var(--blue-3)}._container--warning_b8jbs_50{background-color:var(--gold-1);color:var(--warning-text)}._container--warning__outlined_b8jbs_54{border:1px solid var(--gold-3)}._container--warning__icon_b8jbs_57{color:var(--warning)}._container--magenta_b8jbs_60{background-color:var(--magenta-1);color:var(--magenta-6)}._container--magenta__outlined_b8jbs_64{border:1px solid var(--magenta-3)}._container--blue_b8jbs_67{background-color:var(--blue-1);color:var(--blue-6)}._container--blue__outlined_b8jbs_71{border:1px solid var(--blue-3)}._container--cyan_b8jbs_74{background-color:var(--cyan-1);color:var(--cyan-6)}._container--cyan__outlined_b8jbs_78{border:1px solid var(--cyan-3)}._container--geek-blue_b8jbs_81{background-color:var(--geek-blue-1);color:var(--geek-blue-6)}._container--geek-blue__outlined_b8jbs_85{border:1px solid var(--geek-blue-3)}._container--gold_b8jbs_88{background-color:var(--gold-1);color:var(--gold-6)}._container--gold__outlined_b8jbs_92{border:1px solid var(--gold-3)}._container--green_b8jbs_95{background-color:var(--green-1);color:var(--green-6)}._container--green__outlined_b8jbs_99{border:1px solid var(--green-3)}._container--lime_b8jbs_102{background-color:var(--lime-1);color:var(--lime-6)}._container--lime__outlined_b8jbs_106{border:1px solid var(--lime-3)}._container--orange_b8jbs_109{background-color:var(--orange-1);color:var(--orange-6)}._container--orange__outlined_b8jbs_113{border:1px solid var(--orange-3)}._container--purple_b8jbs_116{background-color:var(--purple-1);color:var(--purple-6)}._container--purple__outlined_b8jbs_120{border:1px solid var(--purple-3)}._container--red_b8jbs_123{background-color:var(--red-1);color:var(--red-6)}._container--red__outlined_b8jbs_127{border:1px solid var(--red-3)}._container--volcano_b8jbs_130{background-color:var(--volcano-1);color:var(--volcano-6)}._container--volcano__outlined_b8jbs_134{border:1px solid var(--volcano-3)}
@@ -1 +1 @@
1
- ._u-typography-h1_1qd8i_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_1qd8i_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_1qd8i_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_1qd8i_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_1qd8i_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_1qd8i_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_1qd8i_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1qd8i_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1qd8i_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1qd8i_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1qd8i_61,._chip_1qd8i_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1qd8i_65,._chip_1qd8i_61{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1qd8i_68{text-decoration:line-through}._u-typography-base--underlined_1qd8i_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1qd8i_74{text-decoration:underline line-through}._chip_1qd8i_61{display:flex;align-items:center;width:fit-content;padding:.375rem .5rem;background-color:var(--cream);border-width:1px;border-radius:calc(var(--border-radius-soft) * 4)}._chip_1qd8i_61:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1qd8i_90{cursor:pointer;border-color:transparent}._chip--button_1qd8i_90:disabled{cursor:initial}._chip--button_1qd8i_90:focus-visible{outline:none}._chip--button_1qd8i_90:focus{outline:2px solid var(--black-100)}._chip--outlined_1qd8i_103{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1qd8i_109{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1qd8i_115{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1qd8i_120{display:flex;margin-left:.5rem}._chip__remove_1qd8i_120:focus-visible{outline:none}._chip__remove_1qd8i_120:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1qd8i_131{cursor:default}._chip-loading_1qd8i_135{display:inline-flex;width:6rem;height:2rem;border-radius:4rem}._row-item_ag6tb_1{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border:1px solid var(--gray-10);border-radius:6px}._row-item_ag6tb_1:focus-visible{outline:none}._row-item_ag6tb_1:focus{outline:2px solid var(--black-100)}._row-item--clickable_ag6tb_15{cursor:pointer}._row-item__content_ag6tb_18{display:flex;flex-grow:1;align-items:center;justify-content:space-between;padding-right:1rem;padding-left:1rem;margin:0;text-align:center}._row-item__content_ag6tb_18:focus-visible{outline:none}._row-item__content_ag6tb_18:focus{outline:2px solid var(--black-100)}
1
+ ._u-typography-h1_1wvod_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_1wvod_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_1wvod_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_1wvod_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_1wvod_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_1wvod_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_1wvod_43{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_1wvod_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_1wvod_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_1wvod_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_1wvod_61,._chip_1wvod_61{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_1wvod_65,._chip_1wvod_61{font-weight:var(--base-bold)}._u-typography-base--strikethrough_1wvod_68{text-decoration:line-through}._u-typography-base--underlined_1wvod_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_1wvod_74{text-decoration:underline line-through}._chip_1wvod_61{display:flex;align-items:center;width:fit-content;padding:.375rem .5rem;background-color:var(--cream);border-width:1px;border-radius:calc(var(--border-radius-soft) * 4)}._chip_1wvod_61:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1wvod_90{cursor:pointer;border-color:transparent}._chip--button_1wvod_90:disabled{pointer-events:none;cursor:initial}._chip--button_1wvod_90:focus-visible{outline:none}._chip--button_1wvod_90:focus{outline:2px solid var(--black-100)}._chip--outlined_1wvod_104{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1wvod_110{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1wvod_116{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1wvod_121{display:flex;margin-left:.5rem;cursor:pointer}._chip__remove_1wvod_121:focus-visible{outline:none}._chip__remove_1wvod_121:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1wvod_133{cursor:default}._chip-loading_1wvod_137{display:inline-flex;min-width:6rem;height:2rem;border-radius:4rem}._row-item_8z1a0_1{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border:1px solid var(--gray-10);border-radius:6px;outline:none}._row-item_8z1a0_1:focus-visible{outline:none}._row-item--clickable_8z1a0_13{cursor:pointer}._row-item--clickable_8z1a0_13:focus{outline:2px solid var(--black-100)}._row-item--disabled_8z1a0_19{cursor:not-allowed}._row-item__content_8z1a0_22{display:flex;flex-grow:1;align-items:center;justify-content:space-between;padding-right:1rem;padding-left:1rem;margin:0;text-align:center}._row-item__content_8z1a0_22:focus-visible{outline:none}._row-item__content_8z1a0_22:focus{outline:2px solid var(--black-100)}
@@ -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,11 +1,20 @@
1
1
  import { IconProps } from '../Icon/Icon.tsx';
2
+ import { Either } from '../../types/helpers';
3
+ import { ReactNode } from 'react';
2
4
 
3
- export type AdornmentSlotProps = IconProps & {
5
+ export type AdornmentSlotProps = {
4
6
  /** Any additional classes to apply to the adornment */
5
7
  className?: string;
6
8
  /** Dataset test id only used for tests to reach in and grab the rendered DOM node of the adornment */
7
9
  'data-testid'?: string;
10
+ };
11
+ export type MarolaIconAdornment = AdornmentSlotProps & Partial<IconProps> & {
8
12
  /** Whether to render in a disabled state */
9
13
  disabled?: boolean;
10
14
  };
11
- export declare const Adornment: (props: AdornmentSlotProps) => import("react/jsx-runtime").JSX.Element;
15
+ export type CustomIconAdornment = AdornmentSlotProps & {
16
+ /** Render a complete custom icon outside of Marola icon system */
17
+ customIcon: ReactNode;
18
+ };
19
+ export type AdornmentProps = Either<CustomIconAdornment, MarolaIconAdornment>;
20
+ export declare const Adornment: (props: AdornmentProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,12 @@
1
1
  import '../../assets/Adornment.css';
2
- import { jsx as r } from "react/jsx-runtime";
3
- import { c as t } from "../../clsx-DB4S2d7J.js";
4
- import { Icon as m } from "../Icon/Icon.js";
2
+ import { jsx as n } from "react/jsx-runtime";
3
+ import { c } from "../../clsx-DB4S2d7J.js";
4
+ import { Icon as d } from "../Icon/Icon.js";
5
5
  const l = "_adornment_1bwrg_1", i = {
6
6
  adornment: l
7
- }, g = (o) => {
8
- const { color: s, disabled: n = !1, className: a, ...e } = o, c = t(a), d = n ? "rgb(var(--gray-95-rgb), 0.4)" : s;
9
- return /* @__PURE__ */ r("span", { className: t(i.adornment, c), "data-testid": o["data-testid"], children: /* @__PURE__ */ r(m, { color: d, ...e }) });
7
+ }, g = (t) => {
8
+ const e = c(t.className), { disabled: a, icon: m } = t, o = a ? "rgb(var(--gray-95-rgb), 0.4)" : t == null ? void 0 : t.color;
9
+ return /* @__PURE__ */ n("span", { className: c(i.adornment, e), "data-testid": t["data-testid"], children: t != null && t.customIcon ? t == null ? void 0 : t.customIcon : /* @__PURE__ */ n(d, { color: o, icon: m, size: t.size }) });
10
10
  };
11
11
  export {
12
12
  g as Adornment
@@ -0,0 +1,14 @@
1
+ import { StoryObj } from '@storybook/react';
2
+
3
+ declare const meta: {
4
+ title: string;
5
+ component: (props: import('./Adornment').AdornmentProps) => 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 WithMarolaIcon: Story;
14
+ export declare const WithCustomIcon: Story;
@@ -0,0 +1 @@
1
+ export {};
@@ -5,11 +5,11 @@ import { ReactNode } from 'react';
5
5
  export type AdviceType = 'without-results' | 'no-permission' | 'no-items' | 'error-page';
6
6
  type AdviceCommonProps = {
7
7
  /** Advice title message */
8
- title?: string;
8
+ title?: ReactNode;
9
9
  /** Advice title message props */
10
10
  titleProps?: Omit<TypographyProps, 'children'>;
11
11
  /** Advice description message */
12
- description?: string;
12
+ description?: ReactNode;
13
13
  /** Advice description message props */
14
14
  descriptionProps?: Omit<TypographyProps, 'children'>;
15
15
  /** Advice content message */
@@ -0,0 +1,11 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ type AlertType = 'success' | 'error' | 'info' | 'warning' | 'default';
4
+ type AlertProps = {
5
+ type?: AlertType;
6
+ children: ReactNode;
7
+ 'data-testid'?: string;
8
+ onClose?: () => void;
9
+ };
10
+ export declare const Alert: ({ type, children, "data-testid": dataTestId, onClose }: AlertProps) => import("react/jsx-runtime").JSX.Element;
11
+ export {};
@@ -0,0 +1,46 @@
1
+ import '../../assets/Alert.css';
2
+ import { jsxs as _, jsx as a } from "react/jsx-runtime";
3
+ import { c as y } from "../../clsx-DB4S2d7J.js";
4
+ import { Icon as s } from "../Icon/Icon.js";
5
+ const h = "_container_9p2mz_78", t = {
6
+ "u-typography-h1": "_u-typography-h1_9p2mz_1",
7
+ "u-typography-h2": "_u-typography-h2_9p2mz_8",
8
+ "u-typography-h3": "_u-typography-h3_9p2mz_15",
9
+ "u-typography-h4": "_u-typography-h4_9p2mz_22",
10
+ "u-typography-h5": "_u-typography-h5_9p2mz_29",
11
+ "u-typography-h6": "_u-typography-h6_9p2mz_36",
12
+ "u-typography-base": "_u-typography-base_9p2mz_43",
13
+ "u-typography-base--xxl": "_u-typography-base--xxl_9p2mz_49",
14
+ "u-typography-base--xl": "_u-typography-base--xl_9p2mz_53",
15
+ "u-typography-base--lg": "_u-typography-base--lg_9p2mz_57",
16
+ "u-typography-base--sm": "_u-typography-base--sm_9p2mz_61",
17
+ "u-typography-base--bold": "_u-typography-base--bold_9p2mz_65",
18
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_9p2mz_68",
19
+ "u-typography-base--underlined": "_u-typography-base--underlined_9p2mz_71",
20
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_9p2mz_74",
21
+ container: h,
22
+ "container--success": "_container--success_9p2mz_84",
23
+ "container--warning": "_container--warning_9p2mz_88",
24
+ "container--error": "_container--error_9p2mz_92",
25
+ "container--info": "_container--info_9p2mz_96",
26
+ "container--default": "_container--default_9p2mz_100",
27
+ "container--close-icon": "_container--close-icon_9p2mz_104",
28
+ "container--content": "_container--content_9p2mz_109"
29
+ }, g = ({ type: r = "default", children: e, "data-testid": p, onClose: o }) => {
30
+ const n = y(t.container, t[`container--${r}`]);
31
+ return /* @__PURE__ */ _("div", { "data-testid": p, className: n, children: [
32
+ /* @__PURE__ */ a("div", { className: t["container--content"], children: e }),
33
+ !!o && /* @__PURE__ */ a(
34
+ "div",
35
+ {
36
+ "data-testid": `${p}-close-button`,
37
+ onClick: () => o(),
38
+ className: t["container--close-icon"],
39
+ children: /* @__PURE__ */ a(s, { icon: "xmark" })
40
+ }
41
+ )
42
+ ] });
43
+ };
44
+ export {
45
+ g as Alert
46
+ };
@@ -0,0 +1,24 @@
1
+ import { StoryObj } from '@storybook/react';
2
+
3
+ declare const meta: {
4
+ title: string;
5
+ component: ({ type, children, "data-testid": dataTestId, onClose }: {
6
+ type?: ("default" | "error" | "success" | "info" | "warning") | undefined;
7
+ children: import('react').ReactNode;
8
+ 'data-testid'?: string | undefined;
9
+ onClose?: (() => void) | undefined;
10
+ }) => import("react/jsx-runtime").JSX.Element;
11
+ tags: string[];
12
+ parameters: {
13
+ layout: string;
14
+ };
15
+ };
16
+ export default meta;
17
+ type Story = StoryObj<typeof meta>;
18
+ export declare const General: Story;
19
+ export declare const Success: Story;
20
+ export declare const Error: Story;
21
+ export declare const Warning: Story;
22
+ export declare const Info: Story;
23
+ export declare const WithCloseButton: Story;
24
+ export declare const WithCustomAction: Story;
@@ -0,0 +1 @@
1
+ export {};
@@ -1,50 +1,20 @@
1
- import { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';
1
+ import { InputProps } from '../Input/Input.tsx';
2
+ import { SyntheticEvent } from 'react';
2
3
 
3
- type AutocompleteProps<T> = InputHTMLAttributes<HTMLInputElement> & {
4
- /** Label text */
5
- label?: string;
4
+ export type AutocompleteProps<T> = Omit<InputProps, 'onChange' | 'value'> & {
5
+ /** Object key to be used as label when options are an array of object */
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;
6
11
  /** Options array */
7
12
  options?: Array<T>;
8
13
  /** callback for new option selected */
9
14
  onChange?: (event: SyntheticEvent<Element, Event>, newValue: T) => void;
10
- /** Info message text */
11
- infoMessage?: string;
12
- /** Error message text */
13
- errorMessage?: string;
14
- /** Left icon element */
15
- leftIcon?: ReactNode;
16
- /** Right icon element */
17
- rightIcon?: ReactNode;
18
- /** Input type. Default: text */
19
- type?: 'text' | 'password' | 'search';
20
- /** Hide the chars counter */
21
- hideCharsCounter?: boolean;
22
- /** CSS classes to be applied on the container element */
23
- classNameWrapper?: string;
24
- /** CSS classes to be applied on the label element */
25
- classNameLabel?: string;
26
- /** CSS classes to be applied on the input element */
27
- classNameInput?: string;
28
- /** CSS classes to be applied on the info message element */
29
- classNameInfoMessage?: string;
30
- /** CSS classes to be applied on the error message element */
31
- classNameErrorMessage?: string;
32
- /** CSS classes to be applied on the chars counter element */
33
- classNameCharsCounter?: string;
15
+ /** callback when characters are entered into the input box */
16
+ onInputChange?: (event: SyntheticEvent<Element, Event>, newValue: string) => void;
34
17
  /** Id to be applied as `data-testid` on the container element */
35
18
  'data-testid-wrapper'?: string;
36
- /** Id to be applied as `data-testid` on the label element */
37
- 'data-testid-label'?: string;
38
- /** Id to be applied as `data-testid` on the input element */
39
- 'data-testid-input'?: string;
40
- /** Id to be applied as `data-testid` on the info message element */
41
- 'data-testid-infoMessage'?: string;
42
- /** Id to be applied as `data-testid` on the error message element */
43
- 'data-testid-errorMessage'?: string;
44
- /** Id to be applied as `data-testid` on the chars counter element */
45
- 'data-testid-charsCounter'?: string;
46
19
  };
47
- export declare const Autocomplete: <T extends string | (object & {
48
- label: string;
49
- })>({ label, type, options, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, maxLength, onChange, 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;
50
- export {};
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;