@povio/ui 2.3.3 → 3.0.0-rc.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 (351) hide show
  1. package/dist/assets/icons/AlignCenter.js +26 -11
  2. package/dist/assets/icons/AlignLeft.js +26 -11
  3. package/dist/assets/icons/AlignLeftRight.js +26 -11
  4. package/dist/assets/icons/AlignRight.js +26 -11
  5. package/dist/assets/icons/ArrowDropDown.js +26 -11
  6. package/dist/assets/icons/ArrowDropUp.js +26 -11
  7. package/dist/assets/icons/ArrowLeft.js +26 -11
  8. package/dist/assets/icons/ArrowRight.js +26 -11
  9. package/dist/assets/icons/Bold.js +26 -11
  10. package/dist/assets/icons/BulletedList.js +26 -11
  11. package/dist/assets/icons/Calendar.js +28 -13
  12. package/dist/assets/icons/Check.js +28 -13
  13. package/dist/assets/icons/CheckCircle.js +26 -11
  14. package/dist/assets/icons/CheckboxCheckmark.js +29 -14
  15. package/dist/assets/icons/CheckboxIndeterminate.js +29 -14
  16. package/dist/assets/icons/ChevronDown.js +28 -13
  17. package/dist/assets/icons/ChevronLeft.js +28 -13
  18. package/dist/assets/icons/ChevronRight.js +28 -13
  19. package/dist/assets/icons/ChevronUp.js +28 -13
  20. package/dist/assets/icons/ChevronsLeft.js +28 -13
  21. package/dist/assets/icons/ChevronsRight.js +28 -13
  22. package/dist/assets/icons/Clock.js +26 -11
  23. package/dist/assets/icons/Close.js +26 -11
  24. package/dist/assets/icons/DateTime.js +35 -14
  25. package/dist/assets/icons/DragIndicator.js +26 -11
  26. package/dist/assets/icons/File.js +28 -13
  27. package/dist/assets/icons/Highlight.js +26 -11
  28. package/dist/assets/icons/HighlightOn.js +49 -15
  29. package/dist/assets/icons/Home.js +26 -11
  30. package/dist/assets/icons/Info.js +37 -16
  31. package/dist/assets/icons/Italic.js +26 -11
  32. package/dist/assets/icons/Link.js +26 -11
  33. package/dist/assets/icons/Menu.js +26 -11
  34. package/dist/assets/icons/NumberedList.js +26 -11
  35. package/dist/assets/icons/PointerHorizontal.js +26 -11
  36. package/dist/assets/icons/PointerVertical.js +26 -11
  37. package/dist/assets/icons/Search.js +26 -11
  38. package/dist/assets/icons/Send.js +28 -13
  39. package/dist/assets/icons/Strikethrough.js +26 -11
  40. package/dist/assets/icons/TextColor.js +48 -14
  41. package/dist/assets/icons/Today.js +26 -11
  42. package/dist/assets/icons/Underlined.js +28 -13
  43. package/dist/assets/icons/Upload.js +35 -14
  44. package/dist/assets/icons/Visibility.js +26 -11
  45. package/dist/assets/icons/VisibilityOff.js +26 -11
  46. package/dist/assets/icons/WarningFilled.js +28 -13
  47. package/dist/components/Breadcrumbs/Breadcrumbs.js +215 -64
  48. package/dist/components/Breadcrumbs/breadcrumbs.cva.d.ts +40 -14
  49. package/dist/components/Breadcrumbs/breadcrumbs.cva.js +21 -18
  50. package/dist/components/Menu/Menu.js +18 -2
  51. package/dist/components/Menu/MenuDesktop.js +41 -7
  52. package/dist/components/Menu/MenuItem.js +35 -12
  53. package/dist/components/Menu/MenuMobile.js +103 -44
  54. package/dist/components/Menu/MenuPopover.js +110 -34
  55. package/dist/components/Menu/menu.cva.d.ts +35 -13
  56. package/dist/components/Menu/menu.cva.js +30 -24
  57. package/dist/components/buttons/Button/Button.js +7 -7
  58. package/dist/components/buttons/Button/button.cva.d.ts +95 -26
  59. package/dist/components/buttons/Button/button.cva.js +601 -589
  60. package/dist/components/buttons/IconButton/IconButton.js +40 -8
  61. package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts +2 -1
  62. package/dist/components/buttons/InlineIconButton/InlineIconButton.js +34 -9
  63. package/dist/components/buttons/PillButton/PillButton.js +59 -21
  64. package/dist/components/buttons/PillButton/pillButton.cva.d.ts +33 -9
  65. package/dist/components/buttons/PillButton/pillButton.cva.js +247 -239
  66. package/dist/components/buttons/SplitButton/SplitButton.js +103 -18
  67. package/dist/components/buttons/TextButton/TextButton.js +30 -8
  68. package/dist/components/buttons/ToggleButton/ToggleButton.js +28 -8
  69. package/dist/components/buttons/shared/ButtonContent.js +83 -25
  70. package/dist/components/buttons/shared/buttonContent.cva.d.ts +3 -5
  71. package/dist/components/buttons/shared/buttonContent.cva.js +1 -8
  72. package/dist/components/inputs/Checkbox/Checkbox.d.ts +1 -0
  73. package/dist/components/inputs/Checkbox/Checkbox.js +203 -37
  74. package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +28 -14
  75. package/dist/components/inputs/Checkbox/checkbox.cva.d.ts +26 -10
  76. package/dist/components/inputs/Checkbox/checkbox.cva.js +47 -40
  77. package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts +12 -5
  78. package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +371 -75
  79. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +12 -5
  80. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +482 -186
  81. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +13 -5
  82. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +267 -47
  83. package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts +7 -3
  84. package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +611 -121
  85. package/dist/components/inputs/DateTime/shared/Calendar.d.ts +5 -2
  86. package/dist/components/inputs/DateTime/shared/Calendar.js +338 -119
  87. package/dist/components/inputs/DateTime/shared/CalendarCell.d.ts +4 -2
  88. package/dist/components/inputs/DateTime/shared/CalendarCell.js +310 -103
  89. package/dist/components/inputs/DateTime/shared/CalendarGrid.d.ts +4 -2
  90. package/dist/components/inputs/DateTime/shared/CalendarGrid.js +150 -33
  91. package/dist/components/inputs/DateTime/shared/CalendarHeader.js +249 -93
  92. package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +318 -137
  93. package/dist/components/inputs/DateTime/shared/DateField.js +286 -112
  94. package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +13 -3
  95. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +387 -143
  96. package/dist/components/inputs/DateTime/shared/DateSegmentItem.d.ts +15 -0
  97. package/dist/components/inputs/DateTime/shared/DateSegmentItem.js +96 -11
  98. package/dist/components/inputs/DateTime/shared/DateTimeDialog.js +84 -30
  99. package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +59 -10
  100. package/dist/components/inputs/DateTime/shared/MonthPicker.js +103 -58
  101. package/dist/components/inputs/DateTime/shared/RangeCalendar.js +193 -82
  102. package/dist/components/inputs/DateTime/shared/TimeField.js +27 -8
  103. package/dist/components/inputs/DateTime/shared/TimePickerForm.js +279 -110
  104. package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts +4 -1
  105. package/dist/components/inputs/DateTime/shared/TimePickerInput.js +214 -69
  106. package/dist/components/inputs/DateTime/shared/YearPicker.js +119 -68
  107. package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts +5 -0
  108. package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts +27 -0
  109. package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js +15 -0
  110. package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.d.ts +15 -0
  111. package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.js +32 -0
  112. package/dist/components/inputs/DateTime/shared/dateSegment.utils.d.ts +2 -0
  113. package/dist/components/inputs/DateTime/shared/dateSegment.utils.spec.d.ts +1 -0
  114. package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.d.ts +40 -0
  115. package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.js +85 -0
  116. package/dist/components/inputs/DateTime/shared/staticDateTimeSegments.spec.d.ts +1 -0
  117. package/dist/components/inputs/File/FileUpload.js +87 -44
  118. package/dist/components/inputs/File/FileUploadContainer.js +15 -7
  119. package/dist/components/inputs/File/InputUpload.js +317 -79
  120. package/dist/components/inputs/File/shared/FileCard.js +104 -41
  121. package/dist/components/inputs/File/shared/FileCardList.js +47 -12
  122. package/dist/components/inputs/File/shared/FileUploadContent.js +175 -44
  123. package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +149 -46
  124. package/dist/components/inputs/File/shared/FileUploadContentError.js +234 -93
  125. package/dist/components/inputs/File/shared/FileUploadContentFilled.js +230 -97
  126. package/dist/components/inputs/File/shared/FileUploadContentLoading.js +199 -55
  127. package/dist/components/inputs/File/shared/InputUploadContent.js +151 -37
  128. package/dist/components/inputs/File/shared/InputUploadFilled.js +51 -10
  129. package/dist/components/inputs/File/shared/ProgressBar.js +48 -9
  130. package/dist/components/inputs/File/shared/fileUpload.cva.d.ts +26 -9
  131. package/dist/components/inputs/File/shared/fileUpload.cva.js +48 -40
  132. package/dist/components/inputs/File/shared/inputUploadButton.cva.d.ts +23 -6
  133. package/dist/components/inputs/File/shared/inputUploadButton.cva.js +29 -20
  134. package/dist/components/inputs/FormField/FormField.d.ts +3 -3
  135. package/dist/components/inputs/FormField/FormField.js +119 -37
  136. package/dist/components/inputs/FormField/FormFieldError.js +27 -7
  137. package/dist/components/inputs/FormField/FormFieldHeader.d.ts +2 -2
  138. package/dist/components/inputs/FormField/FormFieldHeader.js +81 -22
  139. package/dist/components/inputs/FormField/FormFieldHeaderClose.js +31 -7
  140. package/dist/components/inputs/FormField/FormFieldHelper.js +28 -8
  141. package/dist/components/inputs/FormField/FormFieldLabel.d.ts +2 -2
  142. package/dist/components/inputs/FormField/FormFieldLabel.js +46 -15
  143. package/dist/components/inputs/FormField/formFieldError.cva.d.ts +12 -5
  144. package/dist/components/inputs/FormField/formFieldError.cva.js +11 -8
  145. package/dist/components/inputs/FormField/formFieldHeader.cva.d.ts +22 -0
  146. package/dist/components/inputs/FormField/formFieldHeader.cva.js +13 -0
  147. package/dist/components/inputs/FormField/formFieldHelper.cva.d.ts +12 -5
  148. package/dist/components/inputs/FormField/formFieldHelper.cva.js +11 -8
  149. package/dist/components/inputs/Input/NumberInput/NumberInput.d.ts +5 -2
  150. package/dist/components/inputs/Input/NumberInput/NumberInput.js +450 -100
  151. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeField.d.ts +45 -0
  152. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeField.js +571 -0
  153. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.d.ts +35 -0
  154. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +575 -0
  155. package/dist/components/inputs/Input/PasswordInput/PasswordInput.js +48 -9
  156. package/dist/components/inputs/Input/TextArea/TextArea.cva.d.ts +12 -0
  157. package/dist/components/inputs/Input/TextArea/TextArea.cva.js +4 -0
  158. package/dist/components/inputs/Input/TextArea/TextArea.js +309 -94
  159. package/dist/components/inputs/Input/TextInput/TextInput.d.ts +3 -1
  160. package/dist/components/inputs/Input/TextInput/TextInput.js +422 -93
  161. package/dist/components/inputs/Input/shared/InputContent.js +196 -63
  162. package/dist/components/inputs/Input/shared/numberStatic.utils.d.ts +1 -0
  163. package/dist/components/inputs/Input/shared/numberStatic.utils.js +7 -0
  164. package/dist/components/inputs/Inputs/Form.js +40 -11
  165. package/dist/components/inputs/Inputs/InputItem.d.ts +15 -21
  166. package/dist/components/inputs/Inputs/InputItem.js +69 -14
  167. package/dist/components/inputs/Inputs/Inputs.js +37 -11
  168. package/dist/components/inputs/RadioGroup/RadioGroup.d.ts +3 -1
  169. package/dist/components/inputs/RadioGroup/RadioGroup.js +356 -64
  170. package/dist/components/inputs/RadioGroup/radio.cva.d.ts +101 -6
  171. package/dist/components/inputs/RadioGroup/radio.cva.js +74 -24
  172. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts +6 -2
  173. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +214 -22
  174. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts +3 -18
  175. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +104 -8
  176. package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +36 -0
  177. package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +14 -0
  178. package/dist/components/inputs/Selection/Select/QuerySelect.js +173 -0
  179. package/dist/components/inputs/Selection/Select/Select.d.ts +7 -3
  180. package/dist/components/inputs/Selection/Select/Select.js +225 -18
  181. package/dist/components/inputs/Selection/shared/SelectBase.d.ts +8 -1
  182. package/dist/components/inputs/Selection/shared/SelectBase.js +69 -18
  183. package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts +1 -1
  184. package/dist/components/inputs/Selection/shared/SelectDesktop.js +396 -141
  185. package/dist/components/inputs/Selection/shared/SelectInput.d.ts +2 -2
  186. package/dist/components/inputs/Selection/shared/SelectInput.js +398 -119
  187. package/dist/components/inputs/Selection/shared/SelectInputTags.js +99 -25
  188. package/dist/components/inputs/Selection/shared/SelectListBox.d.ts +2 -2
  189. package/dist/components/inputs/Selection/shared/SelectListBox.js +164 -52
  190. package/dist/components/inputs/Selection/shared/SelectListBoxItem.js +88 -38
  191. package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.js +72 -19
  192. package/dist/components/inputs/Selection/shared/SelectListBoxLoadingItem.js +73 -24
  193. package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.js +58 -9
  194. package/dist/components/inputs/Selection/shared/SelectMobile.d.ts +1 -1
  195. package/dist/components/inputs/Selection/shared/SelectMobile.js +9 -3
  196. package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.d.ts +9 -0
  197. package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.js +47 -0
  198. package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +12 -0
  199. package/dist/components/inputs/Selection/shared/querySelect.utils.js +36 -0
  200. package/dist/components/inputs/Selection/shared/select.context.d.ts +3 -2
  201. package/dist/components/inputs/Selection/shared/select.context.js +67 -36
  202. package/dist/components/inputs/Selection/shared/select.types.d.ts +3 -2
  203. package/dist/components/inputs/Selection/shared/selectDesktop.cva.d.ts +10 -0
  204. package/dist/components/inputs/Selection/shared/selectDesktop.cva.js +4 -0
  205. package/dist/components/inputs/Selection/shared/selectInput.cva.d.ts +5 -0
  206. package/dist/components/inputs/Selection/shared/selectInput.cva.js +5 -0
  207. package/dist/components/inputs/Selection/shared/selectItem.cva.d.ts +16 -6
  208. package/dist/components/inputs/Selection/shared/selectItem.cva.js +21 -18
  209. package/dist/components/inputs/Selection/shared/staticSelect.utils.d.ts +23 -0
  210. package/dist/components/inputs/Selection/shared/staticSelect.utils.js +37 -0
  211. package/dist/components/inputs/Selection/shared/staticSelect.utils.spec.d.ts +1 -0
  212. package/dist/components/inputs/Selection/shared/useSelectItems.js +109 -49
  213. package/dist/components/inputs/Skeleton/InputFrame.d.ts +82 -0
  214. package/dist/components/inputs/Skeleton/InputFrame.js +548 -0
  215. package/dist/components/inputs/Slider/Slider.d.ts +2 -1
  216. package/dist/components/inputs/Slider/Slider.js +265 -76
  217. package/dist/components/inputs/TextEditor/TextEditor.d.ts +1 -0
  218. package/dist/components/inputs/TextEditor/TextEditor.js +450 -101
  219. package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js +37 -11
  220. package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js +105 -33
  221. package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.js +194 -45
  222. package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.js +88 -28
  223. package/dist/components/inputs/TextEditor/Toolbar/TextColorSelect.js +48 -14
  224. package/dist/components/inputs/TextEditor/Toolbar/TextEditorToolbar.js +66 -19
  225. package/dist/components/inputs/TextEditor/Toolbar/TextHighlightSelect.js +49 -15
  226. package/dist/components/inputs/TextEditor/Toolbar/TextListActions.js +92 -32
  227. package/dist/components/inputs/TextEditor/Toolbar/TextMarksActions.js +126 -54
  228. package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js +141 -38
  229. package/dist/components/inputs/Toggle/Toggle.d.ts +1 -0
  230. package/dist/components/inputs/Toggle/Toggle.js +217 -40
  231. package/dist/components/inputs/Toggle/toggle.cva.d.ts +15 -6
  232. package/dist/components/inputs/Toggle/toggle.cva.js +25 -21
  233. package/dist/components/inputs/shared/CheckContent.d.ts +2 -1
  234. package/dist/components/inputs/shared/CheckContent.js +23 -13
  235. package/dist/components/inputs/shared/InputClear.d.ts +2 -1
  236. package/dist/components/inputs/shared/InputClear.js +88 -12
  237. package/dist/components/inputs/shared/TooltipWrapper.js +50 -11
  238. package/dist/components/inputs/shared/input.cva.d.ts +137 -16
  239. package/dist/components/inputs/shared/input.cva.js +317 -273
  240. package/dist/components/inputs/shared/label.cva.d.ts +15 -6
  241. package/dist/components/inputs/shared/label.cva.js +28 -25
  242. package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts +12 -0
  243. package/dist/components/inputs/shared/tooltipWrapper.cva.js +4 -0
  244. package/dist/components/inputs/shared/useStaticInputHandoff.d.ts +14 -0
  245. package/dist/components/inputs/shared/useStaticInputHandoff.js +100 -0
  246. package/dist/components/navigation/Accordion/Accordion.js +71 -24
  247. package/dist/components/navigation/Accordion/AccordionItem.js +97 -52
  248. package/dist/components/navigation/Accordion/accordion.cva.d.ts +109 -44
  249. package/dist/components/navigation/Accordion/accordion.cva.js +114 -84
  250. package/dist/components/navigation/Stepper/Stepper.js +69 -24
  251. package/dist/components/navigation/Stepper/StepperItem.js +112 -39
  252. package/dist/components/navigation/Stepper/StepperSeparator.js +25 -7
  253. package/dist/components/navigation/Stepper/stepper.cva.d.ts +86 -30
  254. package/dist/components/navigation/Stepper/stepper.cva.js +104 -83
  255. package/dist/components/overlays/ActionModal/ActionModal.js +169 -35
  256. package/dist/components/overlays/BottomSheet/BottomSheet.js +96 -23
  257. package/dist/components/overlays/BottomSheet/BottomSheetHeader.js +48 -8
  258. package/dist/components/overlays/Drawer/Drawer.js +62 -20
  259. package/dist/components/overlays/Modal/Modal.js +5 -5
  260. package/dist/components/overlays/Modal/modal.cva.d.ts +34 -9
  261. package/dist/components/overlays/Modal/modal.cva.js +38 -27
  262. package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +86 -30
  263. package/dist/components/overlays/Tooltip/Tooltip.js +143 -34
  264. package/dist/components/overlays/Tooltip/TooltipEllipsis.js +37 -12
  265. package/dist/components/overlays/Tooltip/tooltip.cva.d.ts +45 -17
  266. package/dist/components/overlays/Tooltip/tooltip.cva.js +38 -26
  267. package/dist/components/segment/Segment.js +221 -60
  268. package/dist/components/segment/SegmentItem.js +70 -13
  269. package/dist/components/segment/segment.cva.d.ts +18 -7
  270. package/dist/components/segment/segment.cva.js +24 -21
  271. package/dist/components/shared/pagination/Pagination.js +108 -22
  272. package/dist/components/shared/pagination/PaginationList.js +167 -64
  273. package/dist/components/shared/popover.cva.d.ts +7 -3
  274. package/dist/components/shared/popover.cva.js +3 -3
  275. package/dist/components/status/Alert/Alert.js +103 -36
  276. package/dist/components/status/Alert/alert.cva.d.ts +18 -6
  277. package/dist/components/status/Alert/alert.cva.js +60 -57
  278. package/dist/components/status/Loader/Loader.js +77 -22
  279. package/dist/components/status/Loader/loader.cva.d.ts +23 -4
  280. package/dist/components/status/Loader/loader.cva.js +22 -13
  281. package/dist/components/status/Toast/Toast.js +27 -20
  282. package/dist/components/status/Toast/toast.cva.d.ts +61 -10
  283. package/dist/components/status/Toast/toast.cva.js +129 -64
  284. package/dist/components/status/Toast/useToast.js +62 -57
  285. package/dist/components/status/shared/status.cva.d.ts +30 -8
  286. package/dist/components/status/shared/status.cva.js +56 -50
  287. package/dist/components/table/CellText.js +3 -3
  288. package/dist/components/table/ColumnConfig.js +158 -54
  289. package/dist/components/table/HeaderText.js +3 -3
  290. package/dist/components/table/InfiniteTable.js +67 -16
  291. package/dist/components/table/PaginatedTable.js +84 -18
  292. package/dist/components/table/Table.js +34 -33
  293. package/dist/components/table/table.cva.d.ts +52 -19
  294. package/dist/components/table/table.cva.js +44 -35
  295. package/dist/components/text/Link/Link.js +22 -10
  296. package/dist/components/text/Link/link.cva.d.ts +11 -5
  297. package/dist/components/text/Link/link.cva.js +8 -5
  298. package/dist/components/text/Tag/Tag.js +3 -3
  299. package/dist/components/text/Tag/tag.cva.d.ts +15 -5
  300. package/dist/components/text/Tag/tag.cva.js +51 -48
  301. package/dist/components/text/Typography/Typography.js +25 -10
  302. package/dist/components/text/Typography/typography.cva.d.ts +93 -7
  303. package/dist/components/text/Typography/typography.cva.js +126 -122
  304. package/dist/config/confirmation.context.js +1 -1
  305. package/dist/config/link.context.js +23 -9
  306. package/dist/config/router.context.js +42 -16
  307. package/dist/config/theme.context.js +98 -45
  308. package/dist/config/uiConfig.context.d.ts +20 -6
  309. package/dist/config/uiConfig.context.js +68 -14
  310. package/dist/config/uiOverrides.context.d.ts +192 -0
  311. package/dist/config/uiOverrides.context.js +113 -0
  312. package/dist/helpers/dynamicInputs.d.ts +5 -5
  313. package/dist/helpers/dynamicInputs.js +3 -0
  314. package/dist/hooks/useAutosave.d.ts +2 -1
  315. package/dist/hooks/useAutosave.js +12 -4
  316. package/dist/hooks/useAutosave.spec.d.ts +1 -0
  317. package/dist/hooks/useBreakpoint.js +16 -3
  318. package/dist/hooks/useDebounceCallback.js +51 -17
  319. package/dist/hooks/useFilters.js +125 -64
  320. package/dist/hooks/useForm.js +42 -8
  321. package/dist/hooks/useFormAutosave.d.ts +3 -1
  322. package/dist/hooks/useFormAutosave.js +122 -30
  323. package/dist/hooks/useFormAutosave.spec.d.ts +1 -0
  324. package/dist/hooks/useIntersectionObserver.d.ts +1 -1
  325. package/dist/hooks/useIntersectionObserver.js +91 -24
  326. package/dist/hooks/useKeyInteractions.d.ts +20 -0
  327. package/dist/hooks/useKeyInteractions.js +54 -0
  328. package/dist/hooks/useKeyInteractions.spec.d.ts +1 -0
  329. package/dist/hooks/useLocalStorage.js +43 -10
  330. package/dist/hooks/useLongPressRepeat.js +55 -20
  331. package/dist/hooks/usePagination.js +49 -19
  332. package/dist/hooks/useQueryAutocomplete.d.ts +14 -0
  333. package/dist/hooks/useQueryAutocomplete.js +57 -0
  334. package/dist/hooks/useScrollableListBox.js +37 -16
  335. package/dist/hooks/useSorting.js +69 -28
  336. package/dist/hooks/useStateAndRef.js +21 -7
  337. package/dist/hooks/useTableColumnConfig.js +124 -31
  338. package/dist/hooks/useTranslationMemo.js +25 -5
  339. package/dist/index.d.ts +37 -1
  340. package/dist/index.js +34 -3
  341. package/dist/tw-ui-plugin.js +6 -0
  342. package/dist/utils/date-time.utils.d.ts +38 -10
  343. package/dist/utils/date-time.utils.js +136 -22
  344. package/dist/utils/query.utils.d.ts +4 -0
  345. package/dist/utils/query.utils.js +8 -0
  346. package/dist/utils/style-merge.util.d.ts +43 -0
  347. package/dist/utils/style-merge.util.js +233 -0
  348. package/dist/utils/style-merge.util.spec.d.ts +1 -0
  349. package/package.json +1 -1
  350. package/dist/config/uiStyle.context.d.ts +0 -162
  351. package/dist/config/uiStyle.context.js +0 -30
package/dist/components/buttons/PillButton/pillButton.cva.js CHANGED
@@ -1,256 +1,264 @@
1
+ import { UIOverrides } from "../../../config/uiOverrides.context.js";
1
2
  import { uiOutlineClass } from "../../outline.clsx.js";
2
3
  import { compoundMapper } from "../../../utils/compoundMapper.js";
3
4
  import { clsx } from "clsx";
4
5
  import { cva } from "class-variance-authority";
5
6
  //#region src/components/buttons/PillButton/pillButton.cva.ts
6
- var pillButton = cva([
7
- uiOutlineClass,
8
- "flex items-center justify-center",
9
- "rounded-pill-rounding-default border border-solid px-pill-side-default py-pill-height-s"
10
- ], {
11
- variants: {
12
- color: {
13
- primary: "",
14
- secondary: "",
15
- success: "",
16
- warning: "",
17
- error: ""
18
- },
19
- variant: {
20
- contained: "",
21
- outlined: "",
22
- subtle: ""
23
- }
24
- },
25
- compoundVariants: [
26
- {
27
- variant: "contained",
28
- color: "primary",
29
- className: [
30
- "border-interactive-contained-primary-idle bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
31
- "hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
32
- "pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
33
- "disabled:border-interactive-contained-primary-disabled disabled:bg-interactive-contained-primary-disabled disabled:text-interactive-contained-primary-on-disabled",
34
- "focus-visible:outline-interactive-contained-primary-focus",
35
- "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
36
- "selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
37
- "selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled"
38
- ]
39
- },
40
- {
41
- variant: "outlined",
42
- color: "primary",
43
- className: [
44
- "border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
45
- "hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
46
- "pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
47
- "disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
48
- "focus-visible:outline-interactive-outlined-primary-focus",
49
- "selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
50
- "selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
51
- "selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled"
52
- ]
7
+ var pillButtonDefinition = UIOverrides.defineConfig({
8
+ base: [
9
+ uiOutlineClass,
10
+ "flex items-center justify-center",
11
+ "rounded-pill-rounding-default border border-solid px-pill-side-default py-pill-height-s"
12
+ ],
13
+ config: {
14
+ variants: {
15
+ color: {
16
+ primary: "",
17
+ secondary: "",
18
+ success: "",
19
+ warning: "",
20
+ error: ""
21
+ },
22
+ variant: {
23
+ contained: "",
24
+ outlined: "",
25
+ subtle: ""
26
+ }
53
27
  },
54
- {
55
- variant: "subtle",
28
+ compoundVariants: [
29
+ {
30
+ variant: "contained",
31
+ color: "primary",
32
+ className: [
33
+ "border-interactive-contained-primary-idle bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle",
34
+ "hover:border-interactive-contained-primary-hover hover:bg-interactive-contained-primary-hover hover:text-interactive-contained-primary-on-hover",
35
+ "pressed:border-interactive-contained-primary-pressed pressed:bg-interactive-contained-primary-pressed pressed:text-interactive-contained-primary-on-pressed",
36
+ "disabled:border-interactive-contained-primary-disabled disabled:bg-interactive-contained-primary-disabled disabled:text-interactive-contained-primary-on-disabled",
37
+ "focus-visible:outline-interactive-contained-primary-focus",
38
+ "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
39
+ "selected:hover:border-interactive-contained-primary-toggled-hover selected:hover:bg-interactive-contained-primary-toggled-hover selected:hover:text-interactive-contained-primary-on-toggled-hover",
40
+ "selected:disabled:border-interactive-contained-primary-toggled-disabled selected:disabled:bg-interactive-contained-primary-toggled-disabled selected:disabled:text-interactive-contained-primary-on-toggled-disabled"
41
+ ]
42
+ },
43
+ {
44
+ variant: "outlined",
45
+ color: "primary",
46
+ className: [
47
+ "border-interactive-outlined-primary-outline-idle bg-interactive-outlined-primary-idle text-interactive-outlined-primary-on-idle",
48
+ "hover:border-interactive-outlined-primary-outline-hover hover:bg-interactive-outlined-primary-hover hover:text-interactive-outlined-primary-on-hover",
49
+ "pressed:border-interactive-outlined-primary-outline-pressed pressed:bg-interactive-outlined-primary-pressed pressed:text-interactive-outlined-primary-on-pressed",
50
+ "disabled:border-interactive-outlined-primary-outline-disabled disabled:bg-interactive-outlined-primary-disabled disabled:text-interactive-outlined-primary-on-disabled",
51
+ "focus-visible:outline-interactive-outlined-primary-focus",
52
+ "selected:border-interactive-outlined-primary-toggled-idle selected:bg-interactive-outlined-primary-toggled-idle selected:text-interactive-outlined-primary-on-toggled-idle",
53
+ "selected:hover:border-interactive-outlined-primary-toggled-hover selected:hover:bg-interactive-outlined-primary-toggled-hover selected:hover:text-interactive-outlined-primary-on-toggled-hover",
54
+ "selected:disabled:border-interactive-outlined-primary-toggled-disabled selected:disabled:bg-interactive-outlined-primary-toggled-disabled selected:disabled:text-interactive-outlined-primary-on-toggled-disabled"
55
+ ]
56
+ },
57
+ {
58
+ variant: "subtle",
59
+ color: "primary",
60
+ className: [
61
+ "border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
62
+ "hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
63
+ "pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
64
+ "disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
65
+ "focus-visible:outline-interactive-subtle-primary-focus",
66
+ "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
67
+ "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
68
+ "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
69
+ ]
70
+ },
71
+ {
72
+ variant: "contained",
73
+ color: "secondary",
74
+ className: [
75
+ "border-interactive-contained-secondary-idle bg-interactive-contained-secondary-idle text-interactive-contained-secondary-on-idle",
76
+ "hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
77
+ "pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
78
+ "disabled:border-interactive-contained-secondary-disabled disabled:bg-interactive-contained-secondary-disabled disabled:text-interactive-contained-secondary-on-disabled",
79
+ "focus-visible:outline-interactive-contained-secondary-focus",
80
+ "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
81
+ "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
82
+ "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
83
+ ]
84
+ },
85
+ {
86
+ variant: "outlined",
87
+ color: "secondary",
88
+ className: [
89
+ "border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
90
+ "hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
91
+ "pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
92
+ "disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
93
+ "focus-visible:outline-interactive-outlined-secondary-focus",
94
+ "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
95
+ "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
96
+ "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
97
+ ]
98
+ },
99
+ {
100
+ variant: "subtle",
101
+ color: "secondary",
102
+ className: [
103
+ "border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
104
+ "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
105
+ "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
106
+ "disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
107
+ "focus-visible:outline-interactive-subtle-secondary-focus",
108
+ "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
109
+ "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
110
+ "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
111
+ ]
112
+ },
113
+ {
114
+ variant: "contained",
115
+ color: "success",
116
+ className: [
117
+ "border-interactive-contained-success-idle bg-interactive-contained-success-idle text-interactive-contained-success-on-idle",
118
+ "hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
119
+ "pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
120
+ "disabled:border-interactive-contained-success-disabled disabled:bg-interactive-contained-success-disabled disabled:text-interactive-contained-success-on-disabled",
121
+ "focus-visible:outline-interactive-contained-success-focus",
122
+ "selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
123
+ "selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
124
+ "selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled"
125
+ ]
126
+ },
127
+ {
128
+ variant: "outlined",
129
+ color: "success",
130
+ className: [
131
+ "border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
132
+ "hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
133
+ "pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
134
+ "disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
135
+ "focus-visible:outline-interactive-outlined-success-focus",
136
+ "selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
137
+ "selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
138
+ "selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
139
+ ]
140
+ },
141
+ {
142
+ variant: "subtle",
143
+ color: "success",
144
+ className: [
145
+ "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
146
+ "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
147
+ "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
148
+ "disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
149
+ "focus-visible:outline-interactive-subtle-success-focus",
150
+ "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
151
+ "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
152
+ "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
153
+ ]
154
+ },
155
+ {
156
+ variant: "contained",
157
+ color: "warning",
158
+ className: [
159
+ "border-interactive-contained-warning-idle bg-interactive-contained-warning-idle text-interactive-contained-warning-on-idle",
160
+ "hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
161
+ "pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
162
+ "disabled:border-interactive-contained-warning-disabled disabled:bg-interactive-contained-warning-disabled disabled:text-interactive-contained-warning-on-disabled",
163
+ "focus-visible:outline-interactive-contained-warning-focus",
164
+ "selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
165
+ "selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
166
+ "selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled"
167
+ ]
168
+ },
169
+ {
170
+ variant: "outlined",
171
+ color: "warning",
172
+ className: [
173
+ "border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
174
+ "hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
175
+ "pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
176
+ "disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
177
+ "focus-visible:outline-interactive-outlined-warning-focus",
178
+ "selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
179
+ "selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
180
+ "selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
181
+ ]
182
+ },
183
+ {
184
+ variant: "subtle",
185
+ color: "warning",
186
+ className: [
187
+ "border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
188
+ "hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
189
+ "pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
190
+ "disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
191
+ "focus-visible:outline-interactive-subtle-warning-focus",
192
+ "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
193
+ "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
194
+ "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
195
+ ]
196
+ },
197
+ {
198
+ variant: "contained",
199
+ color: "error",
200
+ className: [
201
+ "border-interactive-contained-error-idle bg-interactive-contained-error-idle text-interactive-contained-error-on-idle",
202
+ "hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
203
+ "pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
204
+ "disabled:border-interactive-contained-error-disabled disabled:bg-interactive-contained-error-disabled disabled:text-interactive-contained-error-on-disabled",
205
+ "focus-visible:outline-interactive-contained-error-focus",
206
+ "selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
207
+ "selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
208
+ "selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled"
209
+ ]
210
+ },
211
+ {
212
+ variant: "outlined",
213
+ color: "error",
214
+ className: [
215
+ "border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
216
+ "hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
217
+ "pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
218
+ "disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
219
+ "focus-visible:outline-interactive-outlined-error-focus",
220
+ "selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
221
+ "selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
222
+ "selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
223
+ ]
224
+ },
225
+ {
226
+ variant: "subtle",
227
+ color: "error",
228
+ className: [
229
+ "border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
230
+ "hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
231
+ "pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
232
+ "disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
233
+ "focus-visible:outline-interactive-subtle-error-focus",
234
+ "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
235
+ "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
236
+ "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
237
+ ]
238
+ }
239
+ ],
240
+ defaultVariants: {
56
241
  color: "primary",
57
- className: [
58
- "border-interactive-subtle-primary-idle bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
59
- "hover:border-interactive-subtle-primary-hover hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
60
- "pressed:border-interactive-subtle-primary-pressed pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
61
- "disabled:border-interactive-subtle-primary-disabled disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
62
- "focus-visible:outline-interactive-subtle-primary-focus",
63
- "selected:border-interactive-contained-primary-toggled-idle selected:bg-interactive-contained-primary-toggled-idle selected:text-interactive-contained-primary-on-toggled-idle",
64
- "selected:hover:border-interactive-subtle-primary-toggled-hover selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
65
- "selected:disabled:border-interactive-subtle-primary-toggled-disabled selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled"
66
- ]
67
- },
68
- {
69
- variant: "contained",
70
- color: "secondary",
71
- className: [
72
- "border-interactive-contained-secondary-idle bg-interactive-contained-secondary-idle text-interactive-contained-secondary-on-idle",
73
- "hover:border-interactive-contained-secondary-hover hover:bg-interactive-contained-secondary-hover hover:text-interactive-contained-secondary-on-hover",
74
- "pressed:border-interactive-contained-secondary-pressed pressed:bg-interactive-contained-secondary-pressed pressed:text-interactive-contained-secondary-on-pressed",
75
- "disabled:border-interactive-contained-secondary-disabled disabled:bg-interactive-contained-secondary-disabled disabled:text-interactive-contained-secondary-on-disabled",
76
- "focus-visible:outline-interactive-contained-secondary-focus",
77
- "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
78
- "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
79
- "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
80
- ]
81
- },
82
- {
83
- variant: "outlined",
84
- color: "secondary",
85
- className: [
86
- "border-interactive-outlined-secondary-outline-idle bg-interactive-outlined-secondary-idle text-interactive-outlined-secondary-on-idle",
87
- "hover:border-interactive-outlined-secondary-outline-hover hover:bg-interactive-outlined-secondary-hover hover:text-interactive-outlined-secondary-on-hover",
88
- "pressed:border-interactive-outlined-secondary-outline-pressed pressed:bg-interactive-outlined-secondary-pressed pressed:text-interactive-outlined-secondary-on-pressed",
89
- "disabled:border-interactive-outlined-secondary-outline-disabled disabled:bg-interactive-outlined-secondary-disabled disabled:text-interactive-outlined-secondary-on-disabled",
90
- "focus-visible:outline-interactive-outlined-secondary-focus",
91
- "selected:border-interactive-contained-secondary-toggled-idle selected:bg-interactive-contained-secondary-toggled-idle selected:text-interactive-contained-secondary-on-toggled-idle",
92
- "selected:hover:border-interactive-contained-secondary-toggled-hover selected:hover:bg-interactive-contained-secondary-toggled-hover selected:hover:text-interactive-contained-secondary-on-toggled-hover",
93
- "selected:disabled:border-interactive-contained-secondary-toggled-disabled selected:disabled:bg-interactive-contained-secondary-toggled-disabled selected:disabled:text-interactive-contained-secondary-on-toggled-disabled"
94
- ]
95
- },
96
- {
97
- variant: "subtle",
98
- color: "secondary",
99
- className: [
100
- "border-interactive-subtle-secondary-idle bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
101
- "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
102
- "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
103
- "disabled:border-interactive-subtle-secondary-disabled disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
104
- "focus-visible:outline-interactive-subtle-secondary-focus",
105
- "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
106
- "selected:hover:border-interactive-subtle-secondary-toggled-hover selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
107
- "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
108
- ]
109
- },
110
- {
111
- variant: "contained",
112
- color: "success",
113
- className: [
114
- "border-interactive-contained-success-idle bg-interactive-contained-success-idle text-interactive-contained-success-on-idle",
115
- "hover:border-interactive-contained-success-hover hover:bg-interactive-contained-success-hover hover:text-interactive-contained-success-on-hover",
116
- "pressed:border-interactive-contained-success-pressed pressed:bg-interactive-contained-success-pressed pressed:text-interactive-contained-success-on-pressed",
117
- "disabled:border-interactive-contained-success-disabled disabled:bg-interactive-contained-success-disabled disabled:text-interactive-contained-success-on-disabled",
118
- "focus-visible:outline-interactive-contained-success-focus",
119
- "selected:border-interactive-contained-success-toggled-idle selected:bg-interactive-contained-success-toggled-idle selected:text-interactive-contained-success-on-toggled-idle",
120
- "selected:hover:border-interactive-contained-success-toggled-hover selected:hover:bg-interactive-contained-success-toggled-hover selected:hover:text-interactive-contained-success-on-toggled-hover",
121
- "selected:disabled:border-interactive-contained-success-toggled-disabled selected:disabled:bg-interactive-contained-success-toggled-disabled selected:disabled:text-interactive-contained-success-on-toggled-disabled"
122
- ]
123
- },
124
- {
125
- variant: "outlined",
126
- color: "success",
127
- className: [
128
- "border-interactive-outlined-success-outline-idle bg-interactive-outlined-success-idle text-interactive-outlined-success-on-idle",
129
- "hover:border-interactive-outlined-success-outline-hover hover:bg-interactive-outlined-success-hover hover:text-interactive-outlined-success-on-hover",
130
- "pressed:border-interactive-outlined-success-outline-pressed pressed:bg-interactive-outlined-success-pressed pressed:text-interactive-outlined-success-on-pressed",
131
- "disabled:border-interactive-outlined-success-outline-disabled disabled:bg-interactive-outlined-success-disabled disabled:text-interactive-outlined-success-on-disabled",
132
- "focus-visible:outline-interactive-outlined-success-focus",
133
- "selected:border-interactive-outlined-success-toggled-idle selected:bg-interactive-outlined-success-toggled-idle selected:text-interactive-outlined-success-on-toggled-idle",
134
- "selected:hover:border-interactive-outlined-success-toggled-hover selected:hover:bg-interactive-outlined-success-toggled-hover selected:hover:text-interactive-outlined-success-on-toggled-hover",
135
- "selected:disabled:border-interactive-outlined-success-toggled-disabled selected:disabled:bg-interactive-outlined-success-toggled-disabled selected:disabled:text-interactive-outlined-success-on-toggled-disabled"
136
- ]
137
- },
138
- {
139
- variant: "subtle",
140
- color: "success",
141
- className: [
142
- "border-interactive-subtle-success-idle bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
143
- "hover:border-interactive-subtle-success-hover hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
144
- "pressed:border-interactive-subtle-success-pressed pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
145
- "disabled:border-interactive-subtle-success-disabled disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
146
- "focus-visible:outline-interactive-subtle-success-focus",
147
- "selected:border-interactive-subtle-success-toggled-idle selected:bg-interactive-subtle-success-toggled-idle selected:text-interactive-subtle-success-on-toggled-idle",
148
- "selected:hover:border-interactive-subtle-success-toggled-hover selected:hover:bg-interactive-subtle-success-toggled-hover selected:hover:text-interactive-subtle-success-on-toggled-hover",
149
- "selected:disabled:border-interactive-subtle-success-toggled-disabled selected:disabled:bg-interactive-subtle-success-toggled-disabled selected:disabled:text-interactive-subtle-success-on-toggled-disabled"
150
- ]
151
- },
152
- {
153
- variant: "contained",
154
- color: "warning",
155
- className: [
156
- "border-interactive-contained-warning-idle bg-interactive-contained-warning-idle text-interactive-contained-warning-on-idle",
157
- "hover:border-interactive-contained-warning-hover hover:bg-interactive-contained-warning-hover hover:text-interactive-contained-warning-on-hover",
158
- "pressed:border-interactive-contained-warning-pressed pressed:bg-interactive-contained-warning-pressed pressed:text-interactive-contained-warning-on-pressed",
159
- "disabled:border-interactive-contained-warning-disabled disabled:bg-interactive-contained-warning-disabled disabled:text-interactive-contained-warning-on-disabled",
160
- "focus-visible:outline-interactive-contained-warning-focus",
161
- "selected:border-interactive-contained-warning-toggled-idle selected:bg-interactive-contained-warning-toggled-idle selected:text-interactive-contained-warning-on-toggled-idle",
162
- "selected:hover:border-interactive-contained-warning-toggled-hover selected:hover:bg-interactive-contained-warning-toggled-hover selected:hover:text-interactive-contained-warning-on-toggled-hover",
163
- "selected:disabled:border-interactive-contained-warning-toggled-disabled selected:disabled:bg-interactive-contained-warning-toggled-disabled selected:disabled:text-interactive-contained-warning-on-toggled-disabled"
164
- ]
165
- },
166
- {
167
- variant: "outlined",
168
- color: "warning",
169
- className: [
170
- "border-interactive-outlined-warning-outline-idle bg-interactive-outlined-warning-idle text-interactive-outlined-warning-on-idle",
171
- "hover:border-interactive-outlined-warning-outline-hover hover:bg-interactive-outlined-warning-hover hover:text-interactive-outlined-warning-on-hover",
172
- "pressed:border-interactive-outlined-warning-outline-pressed pressed:bg-interactive-outlined-warning-pressed pressed:text-interactive-outlined-warning-on-pressed",
173
- "disabled:border-interactive-outlined-warning-outline-disabled disabled:bg-interactive-outlined-warning-disabled disabled:text-interactive-outlined-warning-on-disabled",
174
- "focus-visible:outline-interactive-outlined-warning-focus",
175
- "selected:border-interactive-outlined-warning-toggled-idle selected:bg-interactive-outlined-warning-toggled-idle selected:text-interactive-outlined-warning-on-toggled-idle",
176
- "selected:hover:border-interactive-outlined-warning-toggled-hover selected:hover:bg-interactive-outlined-warning-toggled-hover selected:hover:text-interactive-outlined-warning-on-toggled-hover",
177
- "selected:disabled:border-interactive-outlined-warning-toggled-disabled selected:disabled:bg-interactive-outlined-warning-toggled-disabled selected:disabled:text-interactive-outlined-warning-on-toggled-disabled"
178
- ]
179
- },
180
- {
181
- variant: "subtle",
182
- color: "warning",
183
- className: [
184
- "border-interactive-subtle-warning-idle bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
185
- "hover:border-interactive-subtle-warning-hover hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
186
- "pressed:border-interactive-subtle-warning-pressed pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
187
- "disabled:border-interactive-subtle-warning-disabled disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
188
- "focus-visible:outline-interactive-subtle-warning-focus",
189
- "selected:border-interactive-subtle-warning-toggled-idle selected:bg-interactive-subtle-warning-toggled-idle selected:text-interactive-subtle-warning-on-toggled-idle",
190
- "selected:hover:border-interactive-subtle-warning-toggled-hover selected:hover:bg-interactive-subtle-warning-toggled-hover selected:hover:text-interactive-subtle-warning-on-toggled-hover",
191
- "selected:disabled:border-interactive-subtle-warning-toggled-disabled selected:disabled:bg-interactive-subtle-warning-toggled-disabled selected:disabled:text-interactive-subtle-warning-on-toggled-disabled"
192
- ]
193
- },
194
- {
195
- variant: "contained",
196
- color: "error",
197
- className: [
198
- "border-interactive-contained-error-idle bg-interactive-contained-error-idle text-interactive-contained-error-on-idle",
199
- "hover:border-interactive-contained-error-hover hover:bg-interactive-contained-error-hover hover:text-interactive-contained-error-on-hover",
200
- "pressed:border-interactive-contained-error-pressed pressed:bg-interactive-contained-error-pressed pressed:text-interactive-contained-error-on-pressed",
201
- "disabled:border-interactive-contained-error-disabled disabled:bg-interactive-contained-error-disabled disabled:text-interactive-contained-error-on-disabled",
202
- "focus-visible:outline-interactive-contained-error-focus",
203
- "selected:border-interactive-contained-error-toggled-idle selected:bg-interactive-contained-error-toggled-idle selected:text-interactive-contained-error-on-toggled-idle",
204
- "selected:hover:border-interactive-contained-error-toggled-hover selected:hover:bg-interactive-contained-error-toggled-hover selected:hover:text-interactive-contained-error-on-toggled-hover",
205
- "selected:disabled:border-interactive-contained-error-toggled-disabled selected:disabled:bg-interactive-contained-error-toggled-disabled selected:disabled:text-interactive-contained-error-on-toggled-disabled"
206
- ]
207
- },
208
- {
209
- variant: "outlined",
210
- color: "error",
211
- className: [
212
- "border-interactive-outlined-error-outline-idle bg-interactive-outlined-error-idle text-interactive-outlined-error-on-idle",
213
- "hover:border-interactive-outlined-error-outline-hover hover:bg-interactive-outlined-error-hover hover:text-interactive-outlined-error-on-hover",
214
- "pressed:border-interactive-outlined-error-outline-pressed pressed:bg-interactive-outlined-error-pressed pressed:text-interactive-outlined-error-on-pressed",
215
- "disabled:border-interactive-outlined-error-outline-disabled disabled:bg-interactive-outlined-error-disabled disabled:text-interactive-outlined-error-on-disabled",
216
- "focus-visible:outline-interactive-outlined-error-focus",
217
- "selected:border-interactive-outlined-error-toggled-idle selected:bg-interactive-outlined-error-toggled-idle selected:text-interactive-outlined-error-on-toggled-idle",
218
- "selected:hover:border-interactive-outlined-error-toggled-hover selected:hover:bg-interactive-outlined-error-toggled-hover selected:hover:text-interactive-outlined-error-on-toggled-hover",
219
- "selected:disabled:border-interactive-outlined-error-toggled-disabled selected:disabled:bg-interactive-outlined-error-toggled-disabled selected:disabled:text-interactive-outlined-error-on-toggled-disabled"
220
- ]
221
- },
222
- {
223
- variant: "subtle",
224
- color: "error",
225
- className: [
226
- "border-interactive-subtle-error-idle bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
227
- "hover:border-interactive-subtle-error-hover hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
228
- "pressed:border-interactive-subtle-error-pressed pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
229
- "disabled:border-interactive-subtle-error-disabled disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
230
- "focus-visible:outline-interactive-subtle-error-focus",
231
- "selected:border-interactive-subtle-error-toggled-idle selected:bg-interactive-subtle-error-toggled-idle selected:text-interactive-subtle-error-on-toggled-idle",
232
- "selected:hover:border-interactive-subtle-error-toggled-hover selected:hover:bg-interactive-subtle-error-toggled-hover selected:hover:text-interactive-subtle-error-on-toggled-hover",
233
- "selected:disabled:border-interactive-subtle-error-toggled-disabled selected:disabled:bg-interactive-subtle-error-toggled-disabled selected:disabled:text-interactive-subtle-error-on-toggled-disabled"
234
- ]
242
+ variant: "contained"
235
243
  }
236
- ],
237
- defaultVariants: {
238
- color: "primary",
239
- variant: "contained"
240
244
  }
241
245
  });
242
- var pillButtonContent = cva("", {
243
- variants: { iconPosition: {
244
- left: "gap-button-gap-icon-to-label",
245
- right: "gap-button-gap-icon-to-label",
246
- none: "gap-button-gap-icon-to-label"
247
- } },
248
- defaultVariants: { iconPosition: "left" }
246
+ var pillButtonContentDefinition = UIOverrides.defineConfig({
247
+ base: [""],
248
+ config: {
249
+ variants: { iconPosition: {
250
+ left: "gap-button-gap-icon-to-label",
251
+ right: "gap-button-gap-icon-to-label",
252
+ none: "gap-button-gap-icon-to-label"
253
+ } },
254
+ defaultVariants: { iconPosition: "left" }
255
+ }
249
256
  });
257
+ var pillButtonContent = cva(pillButtonContentDefinition.base, pillButtonContentDefinition.config);
250
258
  var pillButtonIconSize = clsx("h-6 w-6");
251
259
  var pillButtonTypography = compoundMapper({ default: {
252
260
  size: "label-2",
253
261
  variant: "prominent-1"
254
262
  } });
255
263
  //#endregion
256
- export { pillButton, pillButtonContent, pillButtonIconSize, pillButtonTypography };
264
+ export { pillButtonContent, pillButtonContentDefinition, pillButtonDefinition, pillButtonIconSize, pillButtonTypography };