@salt-ds/core 1.72.0 → 1.73.0

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 (289) hide show
  1. package/CHANGELOG.md +122 -0
  2. package/css/salt-core.css +265 -120
  3. package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
  4. package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
  5. package/dist-cjs/breadcrumbs/Breadcrumb.js +5 -6
  6. package/dist-cjs/breadcrumbs/Breadcrumb.js.map +1 -1
  7. package/dist-cjs/button/Button.css.js +1 -1
  8. package/dist-cjs/card/CardContent.css.js +1 -1
  9. package/dist-cjs/card/hasCardSection.js +11 -3
  10. package/dist-cjs/card/hasCardSection.js.map +1 -1
  11. package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
  12. package/dist-cjs/collapsible/CollapsiblePanel.css.js +1 -1
  13. package/dist-cjs/collapsible/CollapsiblePanel.js +15 -15
  14. package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -1
  15. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  16. package/dist-cjs/dialog/DialogHeader.js +2 -0
  17. package/dist-cjs/dialog/DialogHeader.js.map +1 -1
  18. package/dist-cjs/drawer/DrawerHeader.js +2 -0
  19. package/dist-cjs/drawer/DrawerHeader.js.map +1 -1
  20. package/dist-cjs/dropdown/Dropdown.css.js +1 -1
  21. package/dist-cjs/dropdown/Dropdown.js +1 -1
  22. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  23. package/dist-cjs/form-field/FormField.js +2 -2
  24. package/dist-cjs/form-field/FormField.js.map +1 -1
  25. package/dist-cjs/form-field/FormFieldHelperText.js +2 -0
  26. package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
  27. package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
  28. package/dist-cjs/form-field/FormFieldLabel.js +2 -0
  29. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  30. package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
  31. package/dist-cjs/index.js +11 -0
  32. package/dist-cjs/index.js.map +1 -1
  33. package/dist-cjs/input/Input.css.js +1 -1
  34. package/dist-cjs/link/Link.js +2 -0
  35. package/dist-cjs/link/Link.js.map +1 -1
  36. package/dist-cjs/link/LinkAction.js +3 -2
  37. package/dist-cjs/link/LinkAction.js.map +1 -1
  38. package/dist-cjs/link-button/LinkButton.js +3 -2
  39. package/dist-cjs/link-button/LinkButton.js.map +1 -1
  40. package/dist-cjs/list-box/ListBox.js +1 -1
  41. package/dist-cjs/list-box/ListBox.js.map +1 -1
  42. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  43. package/dist-cjs/list-control/ListControlOptionContext.js.map +1 -1
  44. package/dist-cjs/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  45. package/dist-cjs/mega-menu/MegaMenuListItem.css.js +1 -1
  46. package/dist-cjs/menu/MenuGroup.css.js +1 -1
  47. package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
  48. package/dist-cjs/navigation-item/NavigationItem.css.js +1 -1
  49. package/dist-cjs/number-input/NumberInput.css.js +1 -1
  50. package/dist-cjs/on-solid-button/OnSolidButton.css.js +6 -0
  51. package/dist-cjs/on-solid-button/OnSolidButton.css.js.map +1 -0
  52. package/dist-cjs/on-solid-button/OnSolidButton.js +68 -0
  53. package/dist-cjs/on-solid-button/OnSolidButton.js.map +1 -0
  54. package/dist-cjs/option/Option.css.js +1 -1
  55. package/dist-cjs/option/Option.js +7 -1
  56. package/dist-cjs/option/Option.js.map +1 -1
  57. package/dist-cjs/option/OptionGroup.css.js +1 -1
  58. package/dist-cjs/overlay/OverlayHeader.js +2 -0
  59. package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
  60. package/dist-cjs/overlay/OverlayPanelCloseButton.js +1 -1
  61. package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
  62. package/dist-cjs/pagination/CompactPaginator.js +2 -0
  63. package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
  64. package/dist-cjs/pagination/GoToInput.js +2 -0
  65. package/dist-cjs/pagination/GoToInput.js.map +1 -1
  66. package/dist-cjs/pill/PillCheckIcon.js.map +1 -1
  67. package/dist-cjs/pill-input/PillInput.css.js +1 -1
  68. package/dist-cjs/progress/CircularProgress/CircularProgress.js +2 -0
  69. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
  70. package/dist-cjs/progress/LinearProgress/LinearProgress.js +2 -0
  71. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
  72. package/dist-cjs/salt-provider/ThemeApplicator.js +10 -6
  73. package/dist-cjs/salt-provider/ThemeApplicator.js.map +1 -1
  74. package/dist-cjs/side-panel/SidePanelTitle.js +2 -0
  75. package/dist-cjs/side-panel/SidePanelTitle.js.map +1 -1
  76. package/dist-cjs/side-panel/SidePanelTrigger.js.map +1 -1
  77. package/dist-cjs/side-panel/internal/useIsScrollable.js.map +1 -1
  78. package/dist-cjs/side-panel/useSidePanel.js +4 -9
  79. package/dist-cjs/side-panel/useSidePanel.js.map +1 -1
  80. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +2 -2
  81. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  82. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
  83. package/dist-cjs/slider/internal/SliderTooltip.js +2 -0
  84. package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -1
  85. package/dist-cjs/slider/internal/SliderTrack.js +2 -0
  86. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
  87. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
  88. package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
  89. package/dist-cjs/slider/internal/utils.js.map +1 -1
  90. package/dist-cjs/stepper/Stepper.js +1 -1
  91. package/dist-cjs/stepper/Stepper.js.map +1 -1
  92. package/dist-cjs/stepper/internal/StepText.css.js +1 -1
  93. package/dist-cjs/stepper/internal/StepText.js +2 -0
  94. package/dist-cjs/stepper/internal/StepText.js.map +1 -1
  95. package/dist-cjs/table/Table.css.js +1 -1
  96. package/dist-cjs/tabs/Tabs.js +1 -1
  97. package/dist-cjs/tabs/Tabs.js.map +1 -1
  98. package/dist-cjs/tabs/internal/overflow/useOverflow.js.map +1 -1
  99. package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
  100. package/dist-cjs/text/Code.js +1 -1
  101. package/dist-cjs/text/Code.js.map +1 -1
  102. package/dist-cjs/text/Editorial.js +32 -0
  103. package/dist-cjs/text/Editorial.js.map +1 -0
  104. package/dist-cjs/text/Eyebrow.js +12 -0
  105. package/dist-cjs/text/Eyebrow.js.map +1 -0
  106. package/dist-cjs/text/Text.css.js +1 -1
  107. package/dist-cjs/text/Text.js +6 -2
  108. package/dist-cjs/text/Text.js.map +1 -1
  109. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  110. package/dist-cjs/toolbar/ToolbarOverflow.js +8 -4
  111. package/dist-cjs/toolbar/ToolbarOverflow.js.map +1 -1
  112. package/dist-cjs/toolbar/toolbarUtils.js.map +1 -1
  113. package/dist-cjs/tooltip/useAriaAnnounce.js +4 -2
  114. package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
  115. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  116. package/dist-cjs/tree/TreeContext.js.map +1 -1
  117. package/dist-cjs/utils/forkRef.js +34 -0
  118. package/dist-cjs/utils/forkRef.js.map +1 -0
  119. package/dist-cjs/utils/getRefFromChildren.js.map +1 -1
  120. package/dist-cjs/utils/marginMiddleware.js.map +1 -1
  121. package/dist-cjs/utils/setRef.js.map +1 -1
  122. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  123. package/dist-cjs/utils/useForkRef.js +3 -6
  124. package/dist-cjs/utils/useForkRef.js.map +1 -1
  125. package/dist-cjs/utils/useResizeObserver.js.map +1 -1
  126. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  127. package/dist-es/accordion/AccordionHeader.css.js +1 -1
  128. package/dist-es/border-layout/BorderLayout.js.map +1 -1
  129. package/dist-es/breadcrumbs/Breadcrumb.js +5 -6
  130. package/dist-es/breadcrumbs/Breadcrumb.js.map +1 -1
  131. package/dist-es/button/Button.css.js +1 -1
  132. package/dist-es/card/CardContent.css.js +1 -1
  133. package/dist-es/card/hasCardSection.js +11 -3
  134. package/dist-es/card/hasCardSection.js.map +1 -1
  135. package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
  136. package/dist-es/collapsible/CollapsiblePanel.css.js +1 -1
  137. package/dist-es/collapsible/CollapsiblePanel.js +16 -16
  138. package/dist-es/collapsible/CollapsiblePanel.js.map +1 -1
  139. package/dist-es/combo-box/ComboBox.js.map +1 -1
  140. package/dist-es/dialog/DialogHeader.js +2 -0
  141. package/dist-es/dialog/DialogHeader.js.map +1 -1
  142. package/dist-es/drawer/DrawerHeader.js +2 -0
  143. package/dist-es/drawer/DrawerHeader.js.map +1 -1
  144. package/dist-es/dropdown/Dropdown.css.js +1 -1
  145. package/dist-es/dropdown/Dropdown.js +1 -1
  146. package/dist-es/dropdown/Dropdown.js.map +1 -1
  147. package/dist-es/form-field/FormField.js +2 -2
  148. package/dist-es/form-field/FormField.js.map +1 -1
  149. package/dist-es/form-field/FormFieldHelperText.js +2 -0
  150. package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
  151. package/dist-es/form-field/FormFieldLabel.css.js +1 -1
  152. package/dist-es/form-field/FormFieldLabel.js +2 -0
  153. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  154. package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
  155. package/dist-es/index.js +3 -0
  156. package/dist-es/index.js.map +1 -1
  157. package/dist-es/input/Input.css.js +1 -1
  158. package/dist-es/link/Link.js +2 -0
  159. package/dist-es/link/Link.js.map +1 -1
  160. package/dist-es/link/LinkAction.js +3 -2
  161. package/dist-es/link/LinkAction.js.map +1 -1
  162. package/dist-es/link-button/LinkButton.js +3 -2
  163. package/dist-es/link-button/LinkButton.js.map +1 -1
  164. package/dist-es/list-box/ListBox.js +1 -1
  165. package/dist-es/list-box/ListBox.js.map +1 -1
  166. package/dist-es/list-control/ListControlContext.js.map +1 -1
  167. package/dist-es/list-control/ListControlOptionContext.js.map +1 -1
  168. package/dist-es/mega-menu/MegaMenuGroupHeading.css.js +1 -1
  169. package/dist-es/mega-menu/MegaMenuListItem.css.js +1 -1
  170. package/dist-es/menu/MenuGroup.css.js +1 -1
  171. package/dist-es/multiline-input/MultilineInput.css.js +1 -1
  172. package/dist-es/navigation-item/NavigationItem.css.js +1 -1
  173. package/dist-es/number-input/NumberInput.css.js +1 -1
  174. package/dist-es/on-solid-button/OnSolidButton.css.js +4 -0
  175. package/dist-es/on-solid-button/OnSolidButton.css.js.map +1 -0
  176. package/dist-es/on-solid-button/OnSolidButton.js +66 -0
  177. package/dist-es/on-solid-button/OnSolidButton.js.map +1 -0
  178. package/dist-es/option/Option.css.js +1 -1
  179. package/dist-es/option/Option.js +7 -1
  180. package/dist-es/option/Option.js.map +1 -1
  181. package/dist-es/option/OptionGroup.css.js +1 -1
  182. package/dist-es/overlay/OverlayHeader.js +2 -0
  183. package/dist-es/overlay/OverlayHeader.js.map +1 -1
  184. package/dist-es/overlay/OverlayPanelCloseButton.js +1 -1
  185. package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
  186. package/dist-es/pagination/CompactPaginator.js +2 -0
  187. package/dist-es/pagination/CompactPaginator.js.map +1 -1
  188. package/dist-es/pagination/GoToInput.js +2 -0
  189. package/dist-es/pagination/GoToInput.js.map +1 -1
  190. package/dist-es/pill/PillCheckIcon.js.map +1 -1
  191. package/dist-es/pill-input/PillInput.css.js +1 -1
  192. package/dist-es/progress/CircularProgress/CircularProgress.js +2 -0
  193. package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
  194. package/dist-es/progress/LinearProgress/LinearProgress.js +2 -0
  195. package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
  196. package/dist-es/salt-provider/ThemeApplicator.js +10 -6
  197. package/dist-es/salt-provider/ThemeApplicator.js.map +1 -1
  198. package/dist-es/side-panel/SidePanelTitle.js +2 -0
  199. package/dist-es/side-panel/SidePanelTitle.js.map +1 -1
  200. package/dist-es/side-panel/SidePanelTrigger.js.map +1 -1
  201. package/dist-es/side-panel/internal/useIsScrollable.js.map +1 -1
  202. package/dist-es/side-panel/useSidePanel.js +4 -9
  203. package/dist-es/side-panel/useSidePanel.js.map +1 -1
  204. package/dist-es/skip-link/internal/useManageFocusOnTarget.js +2 -2
  205. package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  206. package/dist-es/slider/internal/SliderThumb.js.map +1 -1
  207. package/dist-es/slider/internal/SliderTooltip.js +2 -0
  208. package/dist-es/slider/internal/SliderTooltip.js.map +1 -1
  209. package/dist-es/slider/internal/SliderTrack.js +2 -0
  210. package/dist-es/slider/internal/SliderTrack.js.map +1 -1
  211. package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
  212. package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
  213. package/dist-es/slider/internal/utils.js.map +1 -1
  214. package/dist-es/stepper/Stepper.js +1 -1
  215. package/dist-es/stepper/Stepper.js.map +1 -1
  216. package/dist-es/stepper/internal/StepText.css.js +1 -1
  217. package/dist-es/stepper/internal/StepText.js +2 -0
  218. package/dist-es/stepper/internal/StepText.js.map +1 -1
  219. package/dist-es/table/Table.css.js +1 -1
  220. package/dist-es/tabs/Tabs.js +1 -1
  221. package/dist-es/tabs/Tabs.js.map +1 -1
  222. package/dist-es/tabs/internal/overflow/useOverflow.js.map +1 -1
  223. package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -1
  224. package/dist-es/text/Code.js +1 -1
  225. package/dist-es/text/Code.js.map +1 -1
  226. package/dist-es/text/Editorial.js +25 -0
  227. package/dist-es/text/Editorial.js.map +1 -0
  228. package/dist-es/text/Eyebrow.js +10 -0
  229. package/dist-es/text/Eyebrow.js.map +1 -0
  230. package/dist-es/text/Text.css.js +1 -1
  231. package/dist-es/text/Text.js +6 -2
  232. package/dist-es/text/Text.js.map +1 -1
  233. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  234. package/dist-es/toolbar/ToolbarOverflow.js +8 -4
  235. package/dist-es/toolbar/ToolbarOverflow.js.map +1 -1
  236. package/dist-es/toolbar/toolbarUtils.js.map +1 -1
  237. package/dist-es/tooltip/useAriaAnnounce.js +4 -2
  238. package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
  239. package/dist-es/tooltip/useTooltip.js.map +1 -1
  240. package/dist-es/tree/TreeContext.js.map +1 -1
  241. package/dist-es/utils/forkRef.js +32 -0
  242. package/dist-es/utils/forkRef.js.map +1 -0
  243. package/dist-es/utils/getRefFromChildren.js.map +1 -1
  244. package/dist-es/utils/marginMiddleware.js.map +1 -1
  245. package/dist-es/utils/setRef.js.map +1 -1
  246. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  247. package/dist-es/utils/useForkRef.js +3 -6
  248. package/dist-es/utils/useForkRef.js.map +1 -1
  249. package/dist-es/utils/useResizeObserver.js.map +1 -1
  250. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +1 -1
  251. package/dist-types/checkbox/CheckboxIcon.d.ts +2 -1
  252. package/dist-types/collapsible/CollapsiblePanel.d.ts +8 -1
  253. package/dist-types/combo-box/ComboBox.d.ts +2 -2
  254. package/dist-types/dropdown/Dropdown.d.ts +2 -2
  255. package/dist-types/form-field/FormFieldHelperText.d.ts +1 -1
  256. package/dist-types/form-field/FormFieldLabel.d.ts +1 -1
  257. package/dist-types/form-field-context/FormFieldContext.d.ts +1 -1
  258. package/dist-types/index.d.ts +1 -0
  259. package/dist-types/list-box/ListBox.d.ts +2 -2
  260. package/dist-types/list-control/ListControlContext.d.ts +1 -1
  261. package/dist-types/list-control/ListControlOptionContext.d.ts +1 -1
  262. package/dist-types/on-solid-button/OnSolidButton.d.ts +12 -0
  263. package/dist-types/on-solid-button/index.d.ts +1 -0
  264. package/dist-types/pill/PillCheckIcon.d.ts +2 -1
  265. package/dist-types/registerClassNameInjection.d.ts +0 -2
  266. package/dist-types/salt-provider/SaltProvider.d.ts +1 -1
  267. package/dist-types/side-panel/internal/useIsScrollable.d.ts +1 -1
  268. package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +1 -1
  269. package/dist-types/slider/internal/SliderThumb.d.ts +2 -2
  270. package/dist-types/slider/internal/SliderTrack.d.ts +2 -2
  271. package/dist-types/slider/internal/useRangeSliderThumb.d.ts +1 -1
  272. package/dist-types/slider/internal/useSliderThumb.d.ts +1 -1
  273. package/dist-types/slider/internal/utils.d.ts +1 -1
  274. package/dist-types/tabs/internal/overflow/useOverflow.d.ts +2 -2
  275. package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts +1 -1
  276. package/dist-types/text/Editorial.d.ts +7 -0
  277. package/dist-types/text/Eyebrow.d.ts +2 -0
  278. package/dist-types/text/Text.d.ts +9 -2
  279. package/dist-types/text/index.d.ts +2 -0
  280. package/dist-types/toggle-button/ToggleButton.d.ts +1 -1
  281. package/dist-types/tooltip/useTooltip.d.ts +12 -26
  282. package/dist-types/tree/TreeContext.d.ts +1 -1
  283. package/dist-types/utils/forkRef.d.ts +11 -0
  284. package/dist-types/utils/inferElementType.d.ts +1 -2
  285. package/dist-types/utils/marginMiddleware.d.ts +1 -1
  286. package/dist-types/utils/setRef.d.ts +4 -0
  287. package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +1 -5
  288. package/dist-types/utils/useResizeObserver.d.ts +1 -1
  289. package/package.json +4 -4
@@ -1 +1 @@
1
- {"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport {\n getListControlNavigationTarget,\n isListControlNavigationKey,\n isModifiedListControlNavigationKey,\n type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n setListRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>();\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n const newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n if (isModifiedListControlNavigationKey(event)) {\n return;\n }\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n const isNavigationKey = isListControlNavigationKey(event.key);\n if (isNavigationKey) {\n event.preventDefault();\n }\n\n const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n ? getListControlNavigationTarget(event.key, activeOption, {\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n })\n : undefined;\n\n switch (event.key) {\n case \"Enter\":\n case \" \":\n if (\n activeState?.disabled ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getOptionAtIndex>;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(setListRef, ref);\n\n return (\n <ListControlProvider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlProvider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","isModifiedListControlNavigationKey","isListControlNavigationKey","getListControlNavigationTarget","useForkRef","jsx","ListControlProvider","clsx"],"mappings":"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"}
1
+ {"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type ForwardedRef,\n forwardRef,\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport {\n getListControlNavigationTarget,\n isListControlNavigationKey,\n isModifiedListControlNavigationKey,\n type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n defaultValueToString,\n type ListControlProps,\n useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n /**\n * If `true`, the list box will be disabled.\n */\n disabled?: boolean;\n /**\n * If `false`, the list box will have not a border.\n */\n bordered?: boolean;\n /**\n * The options to display in the list box.\n */\n children?: ReactNode;\n /**\n * If `true`, the list box will be multiselect.\n */\n multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n props: ListBoxProps<Item>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const {\n bordered,\n className,\n children,\n defaultSelected,\n disabled,\n selected,\n onSelectionChange,\n multiselect,\n valueToString = defaultValueToString,\n onKeyDown,\n onFocus,\n onBlur,\n ...rest\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-list-box\",\n css: listBoxCss,\n window: targetWindow,\n });\n\n const listControl = useListControl<Item>({\n multiselect,\n defaultSelected,\n selected,\n onSelectionChange,\n valueToString,\n disabled,\n });\n\n const {\n activeState,\n setActive,\n getOptionAtIndex,\n getIndexOfOption,\n getOptionsMatching,\n getOptionFromSearch,\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n selectedState,\n select,\n setFocusVisibleState,\n setFocusedState,\n setListRef,\n } = listControl;\n\n const typeaheadString = useRef(\"\");\n const typeaheadTimeout = useRef<number | undefined>(undefined);\n\n const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n if (typeaheadTimeout.current) {\n clearTimeout(typeaheadTimeout.current);\n }\n typeaheadString.current += event.key;\n typeaheadTimeout.current = window.setTimeout(() => {\n typeaheadString.current = \"\";\n }, 500);\n\n const newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n if (newOption) {\n setActive(newOption);\n setFocusVisibleState(true);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n\n if (isModifiedListControlNavigationKey(event)) {\n return;\n }\n\n if (\n event.key.length === 1 &&\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey\n ) {\n event.preventDefault();\n event.stopPropagation();\n handleTypeahead(event);\n }\n\n const activeOption = activeState ?? getFirstOption()?.data;\n\n if (activeOption === undefined) {\n return;\n }\n\n const isNavigationKey = isListControlNavigationKey(event.key);\n if (isNavigationKey) {\n event.preventDefault();\n }\n\n const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n ? getListControlNavigationTarget(event.key, activeOption, {\n getFirstOption,\n getLastOption,\n getOptionAfter,\n getOptionBefore,\n getOptionPageAbove,\n getOptionPageBelow,\n })\n : undefined;\n\n switch (event.key) {\n case \"Enter\":\n case \" \":\n if (\n activeState?.disabled ||\n (typeaheadString.current.trim().length > 0 && event.key === \" \")\n ) {\n event.preventDefault();\n return;\n }\n\n if (!activeState) {\n return;\n }\n\n event.preventDefault();\n select(event, activeState);\n\n break;\n }\n\n if (newActive && newActive.data.id !== activeState?.id) {\n setActive(newActive.data);\n setFocusVisibleState(true);\n }\n };\n\n const wasMouseDown = useRef(false);\n\n const handleMouseDown = () => {\n wasMouseDown.current = true;\n };\n\n const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n if (wasMouseDown.current) {\n wasMouseDown.current = false;\n return;\n }\n\n setFocusVisibleState(true);\n wasMouseDown.current = false;\n\n // We check the active index because the active item may have been removed\n const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n let newActive: ReturnType<typeof getOptionAtIndex>;\n\n // If the active item is still in the list, we don't need to do anything\n if (activeIndex > 0) {\n return;\n }\n\n // If we have selected an item, we should make that the active item\n if (selectedState.length > 0) {\n newActive = getOptionsMatching(\n (option) => option.value === selectedState[0],\n ).pop();\n }\n\n // If we still don't have an active item, we should just select the first item\n if (!newActive) {\n newActive = getOptionAtIndex(0);\n }\n\n setActive(newActive?.data);\n setFocusedState(true);\n onFocus?.(event);\n };\n\n const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n setFocusedState(false);\n setActive(undefined);\n onBlur?.(event);\n };\n\n const handleListMouseOver = () => {\n setFocusVisibleState(false);\n setActive(undefined);\n };\n\n const handleRef = useForkRef(setListRef, ref);\n\n return (\n <ListControlProvider value={listControl}>\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"bordered\")]: bordered },\n className,\n )}\n role=\"listbox\"\n aria-activedescendant={activeState?.id}\n aria-disabled={disabled || undefined}\n aria-multiselectable={multiselect}\n tabIndex={disabled ? -1 : 0}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onMouseOver={handleListMouseOver}\n onMouseDown={handleMouseDown}\n ref={handleRef}\n {...rest}\n >\n {children}\n </div>\n </ListControlProvider>\n );\n}) as <Item = string>(\n props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["makePrefixer","forwardRef","ListBox","defaultValueToString","useWindow","useComponentCssInjection","listBoxCss","useListControl","useRef","isModifiedListControlNavigationKey","isListControlNavigationKey","getListControlNavigationTarget","useForkRef","jsx","ListControlProvider","clsx"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n valueToString: (item: Item) => string;\n disabled?: boolean;\n listRef?: RefObject<HTMLDivElement>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n valueToString: defaultValueToString,\n disabled: false,\n listRef: undefined,\n },\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA+BO,MAAM,kBAAA,GAAqBA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,GAAU;AACR,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,GAAW;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,IACf,CAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAA,GAAS;AACP,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,MAAA;AAAA,IACb,SAAA,GAAY;AACV,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,KAAA;AAAA,IACb,iBAAA,EAAmB,KAAA;AAAA,IACnB,aAAA,EAAeC,qCAAA;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;AAEO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}
1
+ {"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n id: string;\n disabled: boolean;\n value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n openState: boolean;\n setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n selectedState: unknown[];\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n activeState?: OptionValue<Item>;\n setActive: (option: OptionValue<Item>) => void;\n multiselect: boolean;\n focusVisibleState: boolean;\n valueToString: (item: Item) => string;\n disabled?: boolean;\n listRef?: RefObject<HTMLDivElement | null>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n \"ListControlContext\",\n {\n openState: false,\n setOpen() {\n return undefined;\n },\n register() {\n return () => undefined;\n },\n selectedState: [],\n select() {\n return undefined;\n },\n activeState: undefined,\n setActive() {\n return undefined;\n },\n multiselect: false,\n focusVisibleState: false,\n valueToString: defaultValueToString,\n disabled: false,\n listRef: undefined,\n },\n);\n\nexport function useListControlContext<Item>() {\n return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":["createContext","defaultValueToString","useContext"],"mappings":";;;;;;;;;;;;AA+BO,MAAM,kBAAA,GAAqBA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,GAAU;AACR,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,GAAW;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,IACf,CAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAA,GAAS;AACP,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,MAAA;AAAA,IACb,SAAA,GAAY;AACV,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,KAAA;AAAA,IACb,iBAAA,EAAmB,KAAA;AAAA,IACnB,aAAA,EAAeC,qCAAA;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;AAEO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"ListControlOptionContext.js","sources":["../src/list-control/ListControlOptionContext.tsx"],"sourcesContent":["import {\n type ReactNode,\n type RefObject,\n type SyntheticEvent,\n useContext,\n} from \"react\";\nimport { createContext } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\nimport { ListControlOptionStore } from \"./ListControlOptionStore\";\n\nexport interface ListControlOptionContextValue<Item> {\n disabled?: boolean;\n listRef?: RefObject<HTMLDivElement>;\n multiselect: boolean;\n optionStateStore: ListControlOptionStore<Item>;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n setActive: (option: OptionValue<Item>) => void;\n valueToString: (item: Item) => string;\n}\n\nconst fallbackOptionStateStore = new ListControlOptionStore<unknown>();\n\nconst defaultListControlOptionContext: ListControlOptionContextValue<unknown> =\n {\n disabled: false,\n listRef: undefined,\n multiselect: false,\n optionStateStore: fallbackOptionStateStore,\n register: () => () => undefined,\n select: () => undefined,\n setActive: () => undefined,\n valueToString: (item) => String(item),\n };\n\nconst ListControlOptionContext = createContext(\n \"ListControlOptionContext\",\n defaultListControlOptionContext,\n);\n\nexport function ListControlOptionContextProvider<Item>({\n children,\n value,\n}: {\n children: ReactNode;\n value: ListControlOptionContextValue<Item>;\n}) {\n return (\n <ListControlOptionContext.Provider\n value={value as unknown as ListControlOptionContextValue<unknown>}\n >\n {children}\n </ListControlOptionContext.Provider>\n );\n}\n\nexport function useListControlOptionContext<Item>() {\n const context = useContext(ListControlOptionContext);\n return context as unknown as ListControlOptionContextValue<Item>;\n}\n"],"names":["ListControlOptionStore","createContext","jsx","useContext"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,wBAAA,GAA2B,IAAIA,6CAAA,EAAgC;AAErE,MAAM,+BAAA,GACJ;AAAA,EACE,QAAA,EAAU,KAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,WAAA,EAAa,KAAA;AAAA,EACb,gBAAA,EAAkB,wBAAA;AAAA,EAClB,QAAA,EAAU,MAAM,MAAM,MAAA;AAAA,EACtB,QAAQ,MAAM,MAAA;AAAA,EACd,WAAW,MAAM,MAAA;AAAA,EACjB,aAAA,EAAe,CAAC,IAAA,KAAS,MAAA,CAAO,IAAI;AACtC,CAAA;AAEF,MAAM,wBAAA,GAA2BC,2BAAA;AAAA,EAC/B,0BAAA;AAAA,EACA;AACF,CAAA;AAEO,SAAS,gCAAA,CAAuC;AAAA,EACrD,QAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,uBACEC,cAAA;AAAA,IAAC,wBAAA,CAAyB,QAAA;AAAA,IAAzB;AAAA,MACC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,2BAAA,GAAoC;AAClD,EAAA,MAAM,OAAA,GAAUC,iBAAW,wBAAwB,CAAA;AACnD,EAAA,OAAO,OAAA;AACT;;;;;"}
1
+ {"version":3,"file":"ListControlOptionContext.js","sources":["../src/list-control/ListControlOptionContext.tsx"],"sourcesContent":["import {\n type ReactNode,\n type RefObject,\n type SyntheticEvent,\n useContext,\n} from \"react\";\nimport { createContext } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\nimport { ListControlOptionStore } from \"./ListControlOptionStore\";\n\nexport interface ListControlOptionContextValue<Item> {\n disabled?: boolean;\n listRef?: RefObject<HTMLDivElement | null>;\n multiselect: boolean;\n optionStateStore: ListControlOptionStore<Item>;\n register: (\n optionValue: OptionValue<Item>,\n element: HTMLElement,\n ) => () => void;\n select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n setActive: (option: OptionValue<Item>) => void;\n valueToString: (item: Item) => string;\n}\n\nconst fallbackOptionStateStore = new ListControlOptionStore<unknown>();\n\nconst defaultListControlOptionContext: ListControlOptionContextValue<unknown> =\n {\n disabled: false,\n listRef: undefined,\n multiselect: false,\n optionStateStore: fallbackOptionStateStore,\n register: () => () => undefined,\n select: () => undefined,\n setActive: () => undefined,\n valueToString: (item) => String(item),\n };\n\nconst ListControlOptionContext = createContext(\n \"ListControlOptionContext\",\n defaultListControlOptionContext,\n);\n\nexport function ListControlOptionContextProvider<Item>({\n children,\n value,\n}: {\n children: ReactNode;\n value: ListControlOptionContextValue<Item>;\n}) {\n return (\n <ListControlOptionContext.Provider\n value={value as unknown as ListControlOptionContextValue<unknown>}\n >\n {children}\n </ListControlOptionContext.Provider>\n );\n}\n\nexport function useListControlOptionContext<Item>() {\n const context = useContext(ListControlOptionContext);\n return context as unknown as ListControlOptionContextValue<Item>;\n}\n"],"names":["ListControlOptionStore","createContext","jsx","useContext"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,wBAAA,GAA2B,IAAIA,6CAAA,EAAgC;AAErE,MAAM,+BAAA,GACJ;AAAA,EACE,QAAA,EAAU,KAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,WAAA,EAAa,KAAA;AAAA,EACb,gBAAA,EAAkB,wBAAA;AAAA,EAClB,QAAA,EAAU,MAAM,MAAM,MAAA;AAAA,EACtB,QAAQ,MAAM,MAAA;AAAA,EACd,WAAW,MAAM,MAAA;AAAA,EACjB,aAAA,EAAe,CAAC,IAAA,KAAS,MAAA,CAAO,IAAI;AACtC,CAAA;AAEF,MAAM,wBAAA,GAA2BC,2BAAA;AAAA,EAC/B,0BAAA;AAAA,EACA;AACF,CAAA;AAEO,SAAS,gCAAA,CAAuC;AAAA,EACrD,QAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,uBACEC,cAAA;AAAA,IAAC,wBAAA,CAAyB,QAAA;AAAA,IAAzB;AAAA,MACC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,2BAAA,GAAoC;AAClD,EAAA,MAAM,OAAA,GAAUC,iBAAW,wBAAwB,CAAA;AACnD,EAAA,OAAO,OAAA;AACT;;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltMegaMenuGroupHeading {\n display: flex;\n align-items: center;\n margin: 0 0 var(--salt-spacing-50);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n min-height: var(--salt-size-base);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n color: var(--salt-content-secondary-foreground);\n}\n";
3
+ var css_248z = ".saltMegaMenuGroupHeading {\n display: flex;\n align-items: center;\n margin: 0 0 var(--salt-spacing-50);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n min-height: var(--salt-size-base);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-bolder);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n color: var(--salt-content-secondary-foreground);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=MegaMenuGroupHeading.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltMegaMenuListItem {\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n.saltMegaMenuListItem-wrapper {\n display: flex;\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: flex-start;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n box-sizing: border-box;\n gap: var(--salt-spacing-100);\n position: relative;\n border-radius: var(--salt-palette-corner-weak, 0);\n text-decoration: none;\n border: none;\n font: inherit;\n text-align: start;\n}\n\n.saltMegaMenuListItem-wrapper > .saltIcon {\n display: flex;\n height: var(--salt-size-base);\n align-items: center;\n}\n\n.saltMegaMenuListItem-content {\n flex: 1 0;\n margin: var(--salt-spacing-75) 0;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltMegaMenuListItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {\n outline: none;\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltMegaMenuListItem-wrapper:active {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuListItem-wrapper:active::before {\n content: \"\";\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border-radius: inherit;\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n pointer-events: none;\n}\n";
3
+ var css_248z = ".saltMegaMenuListItem {\n list-style: none;\n display: flex;\n flex-direction: column;\n}\n\n.saltMegaMenuListItem-wrapper {\n display: flex;\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: flex-start;\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n cursor: var(--salt-cursor-hover);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n box-sizing: border-box;\n gap: var(--salt-spacing-100);\n position: relative;\n border-radius: var(--salt-palette-corner-weak, 0);\n text-decoration: none;\n border: none;\n font: inherit;\n text-align: start;\n}\n\n.saltMegaMenuListItem-wrapper > .saltIcon {\n display: flex;\n height: var(--salt-size-base);\n align-items: center;\n}\n\n.saltMegaMenuListItem-content {\n flex: 1 0;\n margin: var(--salt-spacing-75) 0;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltMegaMenuListItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuListItem-wrapper:hover:not(:focus-visible, :active) {\n outline: none;\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltMegaMenuListItem-wrapper:active {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuListItem-wrapper:active::before {\n content: \"\";\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border-radius: inherit;\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n pointer-events: none;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=MegaMenuListItem.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltMenuGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n box-sizing: border-box;\n}\n\n.saltMenuGroup {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n border-top: 0;\n}\n";
3
+ var css_248z = ".saltMenuGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-bolder);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n box-sizing: border-box;\n}\n\n.saltMenuGroup {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n border-top: 0;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=MenuGroup.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n display: inline-grid;\n grid-template-areas: \"start-adornment textarea end-adornment\";\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: 1fr;\n background: var(--multilineInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: var(--salt-size-base);\n min-width: 4em;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n padding: 0 var(--salt-spacing-100);\n}\n\n.saltMultilineInput-wrapper {\n grid-area: textarea;\n overflow: hidden;\n margin: var(--salt-spacing-75) 0;\n display: flex;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--multilineInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-focused,\n.saltMultilineInput-bordered.saltMultilineInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--multilineInput-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-disabled,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput:hover .saltMultilineInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--multilineInput-borderColor-hover);\n}\n\n.saltMultilineInput-focused .saltMultilineInput-activationIndicator,\n.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--multilineInput-borderColor-active);\n}\n\n.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-activationIndicator,\n.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltMultilineInput-bordered .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n --multilineInput-background: var(--salt-editable-primary-background);\n --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n --multilineInput-background: var(--salt-editable-secondary-background);\n --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltMultilineInput-tertiary {\n --multilineInput-background: var(--salt-editable-tertiary-background);\n --multilineInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error {\n --multilineInput-background: var(--salt-status-error-background);\n --multilineInput-background-readonly: var(--salt-status-error-background);\n --multilineInput-borderColor: var(--salt-status-error-borderColor);\n --multilineInput-borderColor-active: var(--salt-status-error-borderColor);\n --multilineInput-borderColor-hover: var(--salt-status-error-borderColor);\n --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning {\n --multilineInput-background: var(--salt-status-warning-background);\n --multilineInput-background-readonly: var(--salt-status-warning-background);\n --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);\n --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor);\n --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success {\n --multilineInput-background: var(--salt-status-success-background);\n --multilineInput-background-readonly: var(--salt-status-success-background);\n --multilineInput-borderColor: var(--salt-status-success-borderColor);\n --multilineInput-borderColor-active: var(--salt-status-success-borderColor);\n --multilineInput-borderColor-hover: var(--salt-status-success-borderColor);\n --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused,\n.saltMultilineInput-focused:hover {\n cursor: var(--salt-cursor-text);\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput.saltMultilineInput-readOnly {\n background: var(--multilineInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltMultilineInput.saltMultilineInput-disabled,\n.saltMultilineInput.saltMultilineInput-disabled:hover {\n background: var(--input-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-textarea {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n grid-template-areas: \"start-adornment textarea\" \"end-adornment end-adornment\";\n grid-template-columns: min-content 1fr;\n grid-template-rows: 1fr auto;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n min-height: var(--salt-size-base);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n align-self: self-start;\n padding-right: var(--salt-spacing-100);\n grid-area: start-adornment;\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n align-self: self-end;\n grid-area: end-adornment;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n display: inline-flex;\n flex-basis: 100%;\n justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n align-self: self-end;\n display: inline-flex;\n min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n appearance: none;\n background: none;\n border: 0;\n color: inherit;\n font: inherit;\n resize: vertical;\n width: 100%;\n padding: 0;\n box-sizing: border-box;\n min-height: 0;\n min-width: 0;\n max-height: 100%;\n overflow: auto;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the class */\n.saltMultilineInput-textarea:focus {\n outline: none;\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n background: none;\n}\n";
3
+ var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n display: inline-grid;\n grid-template-areas: \"start-adornment textarea end-adornment\";\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: 1fr;\n background: var(--multilineInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n color: var(--salt-content-primary-foreground);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: var(--salt-size-base);\n min-width: 4em;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n padding: 0 var(--salt-spacing-100);\n}\n\n.saltMultilineInput-wrapper {\n grid-area: textarea;\n overflow: hidden;\n margin: var(--salt-spacing-75) 0;\n display: flex;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--multilineInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-focused,\n.saltMultilineInput-bordered.saltMultilineInput-focused:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--multilineInput-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-disabled,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n border-style: var(--salt-borderStyle-solid);\n border-color: var(--salt-editable-borderColor-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput:hover .saltMultilineInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--multilineInput-borderColor-hover);\n}\n\n.saltMultilineInput-focused .saltMultilineInput-activationIndicator,\n.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--multilineInput-borderColor-active);\n}\n\n.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-activationIndicator,\n.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n border-bottom-style: var(--salt-borderStyle-solid);\n border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltMultilineInput-bordered .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator {\n /* Activation indicator width minus the border from the input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n --multilineInput-background: var(--salt-editable-primary-background);\n --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n --multilineInput-background: var(--salt-editable-secondary-background);\n --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltMultilineInput-tertiary {\n --multilineInput-background: var(--salt-editable-tertiary-background);\n --multilineInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n --multilineInput-borderColor: var(--salt-editable-borderColor);\n --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error {\n --multilineInput-background: var(--salt-status-error-background);\n --multilineInput-background-readonly: var(--salt-status-error-background);\n --multilineInput-borderColor: var(--salt-status-error-borderColor);\n --multilineInput-borderColor-active: var(--salt-status-error-borderColor);\n --multilineInput-borderColor-hover: var(--salt-status-error-borderColor);\n --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning {\n --multilineInput-background: var(--salt-status-warning-background);\n --multilineInput-background-readonly: var(--salt-status-warning-background);\n --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);\n --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor);\n --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success {\n --multilineInput-background: var(--salt-status-success-background);\n --multilineInput-background-readonly: var(--salt-status-success-background);\n --multilineInput-borderColor: var(--salt-status-success-borderColor);\n --multilineInput-borderColor-active: var(--salt-status-success-borderColor);\n --multilineInput-borderColor-hover: var(--salt-status-success-borderColor);\n --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused,\n.saltMultilineInput-focused:hover {\n cursor: var(--salt-cursor-text);\n outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput.saltMultilineInput-readOnly {\n background: var(--multilineInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltMultilineInput.saltMultilineInput-disabled,\n.saltMultilineInput.saltMultilineInput-disabled:hover {\n background: var(--input-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-textarea {\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n grid-template-areas: \"start-adornment textarea\" \"end-adornment end-adornment\";\n grid-template-columns: min-content 1fr;\n grid-template-rows: 1fr auto;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n min-height: var(--salt-size-base);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n align-self: self-start;\n padding-right: var(--salt-spacing-100);\n grid-area: start-adornment;\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n align-self: self-end;\n grid-area: end-adornment;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n display: inline-flex;\n flex-basis: 100%;\n justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n align-self: self-end;\n display: inline-flex;\n min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n appearance: none;\n background: none;\n border: 0;\n color: inherit;\n font: inherit;\n resize: vertical;\n width: 100%;\n padding: 0;\n box-sizing: border-box;\n min-height: 0;\n min-width: 0;\n max-height: 100%;\n overflow: auto;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Reset in the class */\n.saltMultilineInput-textarea:focus {\n outline: none;\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n background: none;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=MultilineInput.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltNavigationItem {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n position: relative;\n background: none;\n border: none;\n font: inherit;\n color: inherit;\n text-decoration: none;\n cursor: var(--salt-cursor-hover);\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-top: 0;\n padding-bottom: 0;\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n --saltButton-margin: var(--salt-spacing-50) 0;\n\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-25);\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--salt-size-indicator);\n left: var(--salt-spacing-25);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n background: var(--salt-navigable-accent-indicator-active);\n /* Hover on animation */\n transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n";
3
+ var css_248z = ".saltNavigationItem {\n color: var(--salt-content-primary-foreground);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n position: relative;\n background: none;\n border: none;\n font: inherit;\n color: inherit;\n text-decoration: none;\n cursor: var(--salt-cursor-hover);\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n font-weight: var(--salt-text-fontWeight-bolder);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-top: 0;\n padding-bottom: 0;\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n padding: 0 var(--salt-spacing-100);\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n --saltButton-margin: var(--salt-spacing-50) 0;\n\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n padding-right: var(--salt-spacing-100);\n padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-25);\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--salt-size-indicator);\n left: var(--salt-spacing-25);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n background: var(--salt-navigable-accent-indicator-active);\n /* Hover on animation */\n transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=NavigationItem.css.js.map
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n --numberInput-outline: none;\n\n align-items: center;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n min-width: 4em;\n overflow: hidden;\n outline: var(--numberInput-outline);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n position: relative;\n width: 100%;\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n --numberInput-background: var(--salt-editable-tertiary-background);\n --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n min-width: 0;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n\n border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n display: none;\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n /* Activation indicator width minus the border from the number input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
3
+ var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderColor: var(--salt-editable-borderColor);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-outlineColor: var(--salt-focused-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n --numberInput-outline: none;\n\n align-items: center;\n background: var(--numberInput-background);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--salt-content-primary-foreground);\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n min-height: var(--salt-size-base);\n min-width: 4em;\n overflow: hidden;\n outline: var(--numberInput-outline);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-50);\n padding-top: var(--salt-spacing-50);\n padding-bottom: var(--salt-spacing-50);\n position: relative;\n width: 100%;\n}\n\n.saltNumberInput:hover {\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n --numberInput-background: var(--salt-editable-primary-background);\n --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n --numberInput-background: var(--salt-editable-secondary-background);\n --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n --numberInput-background: var(--salt-editable-tertiary-background);\n --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n --numberInput-background: var(--salt-status-error-background);\n --numberInput-borderColor: var(--salt-status-error-borderColor);\n --numberInput-outlineColor: var(--salt-status-error-borderColor);\n --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n --numberInput-background: var(--salt-status-warning-background);\n --numberInput-borderColor: var(--salt-status-warning-borderColor);\n --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n --numberInput-background: var(--salt-status-success-background);\n --numberInput-borderColor: var(--salt-status-success-borderColor);\n --numberInput-outlineColor: var(--salt-status-success-borderColor);\n --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n min-width: 0;\n padding: 0;\n text-align: var(--numberInput-textAlign);\n width: 100%;\n}\n\n.saltNumberInput-input:focus {\n outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n --numberInput-borderColor: var(--numberInput-outlineColor);\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n --numberInput-borderWidth: 0;\n\n border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-readonly);\n cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n --numberInput-borderStyle: var(--salt-borderStyle-solid);\n --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n background: var(--numberInput-background-disabled);\n cursor: var(--salt-cursor-disabled);\n color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltNumberInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltNumberInput-inputTextAlignLeft {\n --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n display: flex;\n flex-direction: column;\n gap: var(--numberInput-buttonGap);\n justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n display: none;\n}\n\n.saltNumberInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n /* Activation indicator width minus the border from the number input. */\n border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=NumberInput.css.js.map
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltOnSolidButton {\n --onSolidButton-borderWidth: var(--salt-size-fixed-100);\n align-items: center;\n appearance: none;\n -webkit-appearance: none;\n background: var(--salt-actionable-onSolid-subtle-background);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n border-radius: var(--salt-palette-corner-weak, 0);\n border-style: solid;\n border-width: var(--onSolidButton-borderWidth);\n color: var(--salt-actionable-onSolid-subtle-foreground);\n display: inline-flex;\n font-family: var(--salt-text-action-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n margin: 0;\n padding: 0 calc(var(--salt-spacing-100) - var(--onSolidButton-borderWidth));\n position: relative;\n -webkit-tap-highlight-color: transparent;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n text-transform: var(--salt-text-action-textTransform);\n transition: none;\n}\n\n.saltOnSolidButton:focus-visible {\n background: var(--salt-actionable-onSolid-subtle-background-hover);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n outline-color: var(--salt-focused-onSolid-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n}\n\n@media (hover: hover) {\n .saltOnSolidButton:hover {\n background: var(--salt-actionable-onSolid-subtle-background-hover);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n cursor: var(--salt-cursor-hover);\n }\n}\n\n.saltOnSolidButton.saltOnSolidButton-active:focus-visible,\n.saltOnSolidButton:focus-visible:active,\n.saltOnSolidButton:active,\n.saltOnSolidButton.saltOnSolidButton-active {\n background: var(--salt-actionable-onSolid-subtle-background-active);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor-active);\n color: var(--salt-actionable-onSolid-subtle-foreground-active);\n cursor: var(--salt-cursor-active);\n}\n\n.saltOnSolidButton:disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:hover {\n background: var(--salt-actionable-onSolid-subtle-background);\n border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n color: var(--salt-actionable-onSolid-subtle-foreground);\n cursor: var(--salt-cursor-disabled);\n opacity: 0.4;\n}\n\n/* Lets a nested Text with styleAs=\"inherit\" use the action weights */\n.saltOnSolidButton {\n --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltOnSolidButton strong,\n.saltOnSolidButton b {\n font-weight: var(--salt-text-action-fontWeight-bolder);\n}\n\n/* Deprecated, use a nested Text with styleAs=\"inherit\" and fontWeight=\"lighter\" instead */\n.saltOnSolidButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-lighter);\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=OnSolidButton.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OnSolidButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,68 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var styles = require('@salt-ds/styles');
5
+ var window = require('@salt-ds/window');
6
+ var clsx = require('clsx');
7
+ var React = require('react');
8
+ require('../button/Button.js');
9
+ var useButton = require('../button/useButton.js');
10
+ var makePrefixer = require('../utils/makePrefixer.js');
11
+ require('../utils/useFloatingUI/useFloatingUI.js');
12
+ require('../utils/useId.js');
13
+ require('../salt-provider/SaltProvider.js');
14
+ require('../viewport/ViewportProvider.js');
15
+ var OnSolidButton$1 = require('./OnSolidButton.css.js');
16
+
17
+ const withBaseName = makePrefixer.makePrefixer("saltOnSolidButton");
18
+ const OnSolidButton = React.forwardRef(
19
+ function OnSolidButton2({
20
+ children,
21
+ className,
22
+ disabled,
23
+ focusableWhenDisabled,
24
+ onBlur,
25
+ onClick,
26
+ onKeyDown,
27
+ onKeyUp,
28
+ type = "button",
29
+ ...rest
30
+ }, ref) {
31
+ const targetWindow = window.useWindow();
32
+ styles.useComponentCssInjection({
33
+ testId: "salt-on-solid-button",
34
+ css: OnSolidButton$1,
35
+ window: targetWindow
36
+ });
37
+ const { active, buttonProps } = useButton.useButton({
38
+ disabled,
39
+ focusableWhenDisabled,
40
+ onBlur,
41
+ onClick,
42
+ onKeyDown,
43
+ onKeyUp
44
+ });
45
+ const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;
46
+ return /* @__PURE__ */ jsxRuntime.jsx(
47
+ "button",
48
+ {
49
+ ...restButtonProps,
50
+ className: clsx.clsx(
51
+ withBaseName(),
52
+ {
53
+ [withBaseName("active")]: active,
54
+ [withBaseName("disabled")]: disabled
55
+ },
56
+ className
57
+ ),
58
+ ...rest,
59
+ ref,
60
+ type,
61
+ children
62
+ }
63
+ );
64
+ }
65
+ );
66
+
67
+ exports.OnSolidButton = OnSolidButton;
68
+ //# sourceMappingURL=OnSolidButton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"OnSolidButton.js","sources":["../src/on-solid-button/OnSolidButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\n\nimport onSolidButtonCss from \"./OnSolidButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOnSolidButton\");\n\nexport interface OnSolidButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * If `true`, the button will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the button will be focusable when disabled.\n */\n focusableWhenDisabled?: boolean;\n}\n\nexport const OnSolidButton = forwardRef<HTMLButtonElement, OnSolidButtonProps>(\n function OnSolidButton(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n type = \"button\",\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-on-solid-button\",\n css: onSolidButtonCss,\n window: targetWindow,\n });\n\n const { active, buttonProps } = useButton<HTMLButtonElement>({\n disabled,\n focusableWhenDisabled,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n });\n\n const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;\n\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n {...rest}\n ref={ref}\n type={type}\n >\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","OnSolidButton","useWindow","useComponentCssInjection","onSolidButtonCss","useButton","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAa9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAIC,mBAAA,CAA6B;AAAA,MAC3D,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,iBAAgB,GAAI,WAAA;AAEpD,IAAA,uBACEC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,WAC9B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltOption {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltOption-active {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltOption:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n opacity: 0.4;\n\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow:\n calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n min-height: var(--salt-text-lineHeight);\n}\n";
3
+ var css_248z = ".saltOption {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n.saltOption-active {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltOption:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n color: var(--salt-content-primary-foreground);\n background: var(--salt-selectable-background);\n opacity: 0.4;\n\n cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n z-index: var(--salt-zIndex-default);\n background: var(--salt-selectable-background-selected);\n box-shadow:\n calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* Align the checkbox with the first line of text */\n.saltOption-checkbox {\n margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n min-height: var(--salt-text-lineHeight);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Option.css.js.map
@@ -117,7 +117,13 @@ const OptionComponent = React.forwardRef(
117
117
  tabIndex: -1,
118
118
  ...rest,
119
119
  children: [
120
- multiselect && /* @__PURE__ */ jsxRuntime.jsx(CheckboxIcon.CheckboxIcon, { checked: selected }),
120
+ multiselect && /* @__PURE__ */ jsxRuntime.jsx(
121
+ CheckboxIcon.CheckboxIcon,
122
+ {
123
+ checked: selected,
124
+ className: withBaseName("checkbox")
125
+ }
126
+ ),
121
127
  children ?? valueToString(value)
122
128
  ]
123
129
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n memo,\n type ReactNode,\n useMemo,\n useRef,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport type { OptionValue } from \"../list-control/ListControlContext\";\nimport { useListControlOptionContext } from \"../list-control/ListControlOptionContext\";\nimport {\n hasOptionState,\n OPTION_STATE_ACTIVE,\n OPTION_STATE_FOCUS_VISIBLE,\n OPTION_STATE_SELECTED,\n} from \"../list-control/ListControlOptionStore\";\nimport {\n makePrefixer,\n useForkRef,\n useId,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nconst OptionComponent = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n multiselect,\n select,\n register,\n optionStateStore,\n valueToString,\n disabled: listDisabled,\n listRef,\n } = useListControlOptionContext();\n\n const disabled = disabledProp || listDisabled;\n\n const optionId = String(id);\n const { getSnapshot, optionValue, subscribe } = useMemo(() => {\n const nextOptionValue: OptionValue<unknown> = {\n id: optionId,\n disabled: Boolean(disabled),\n value,\n };\n return {\n getSnapshot: () =>\n optionStateStore.getSnapshot(optionId, nextOptionValue),\n optionValue: nextOptionValue,\n subscribe: (listener: () => void) =>\n optionStateStore.subscribe(optionId, listener),\n };\n }, [optionId, disabled, value, optionStateStore]);\n const optionState = useSyncExternalStore(\n subscribe,\n getSnapshot,\n getSnapshot,\n );\n const selected = hasOptionState(optionState, OPTION_STATE_SELECTED);\n const active = hasOptionState(optionState, OPTION_STATE_ACTIVE);\n const focusVisible = hasOptionState(\n optionState,\n OPTION_STATE_FOCUS_VISIBLE,\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n listRef?.current?.focus({ preventScroll: true });\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n // biome-ignore lint/a11y/useKeyWithClickEvents: The click event is handled by the parent list control, which manages keyboard interactions.\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisible,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n tabIndex={-1}\n {...rest}\n >\n {multiselect && <CheckboxIcon checked={selected} />}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n\n// Context isolation makes this bailout effective for unchanged option props.\nexport const Option = memo(OptionComponent) as typeof OptionComponent;\n"],"names":["makePrefixer","forwardRef","Option","useWindow","useComponentCssInjection","optionCss","useRef","useId","useListControlOptionContext","useMemo","useSyncExternalStore","hasOptionState","OPTION_STATE_SELECTED","OPTION_STATE_ACTIVE","OPTION_STATE_FOCUS_VISIBLE","useIsomorphicLayoutEffect","useForkRef","jsxs","clsx","jsx","CheckboxIcon","memo"],"mappings":"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"}
1
+ {"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEvent,\n memo,\n type ReactNode,\n useMemo,\n useRef,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport type { OptionValue } from \"../list-control/ListControlContext\";\nimport { useListControlOptionContext } from \"../list-control/ListControlOptionContext\";\nimport {\n hasOptionState,\n OPTION_STATE_ACTIVE,\n OPTION_STATE_FOCUS_VISIBLE,\n OPTION_STATE_SELECTED,\n} from \"../list-control/ListControlOptionStore\";\nimport {\n makePrefixer,\n useForkRef,\n useId,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If `true`, the option will be disabled.\n */\n disabled?: boolean;\n /**\n * The value of the option.\n */\n value: unknown;\n /**\n * The content of the option.\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\n// biome-ignore lint/plugin/named-component-functions: exported as memo(OptionComponent) under the name Option.\nconst OptionComponent = forwardRef<HTMLDivElement, OptionProps>(\n function Option(props, ref) {\n const {\n className,\n children,\n disabled: disabledProp,\n onClick,\n id: idProp,\n value,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-option\",\n css: optionCss,\n window: targetWindow,\n });\n\n const optionRef = useRef(null);\n const id = useId(idProp);\n\n const {\n setActive,\n multiselect,\n select,\n register,\n optionStateStore,\n valueToString,\n disabled: listDisabled,\n listRef,\n } = useListControlOptionContext();\n\n const disabled = disabledProp || listDisabled;\n\n const optionId = String(id);\n const { getSnapshot, optionValue, subscribe } = useMemo(() => {\n const nextOptionValue: OptionValue<unknown> = {\n id: optionId,\n disabled: Boolean(disabled),\n value,\n };\n return {\n getSnapshot: () =>\n optionStateStore.getSnapshot(optionId, nextOptionValue),\n optionValue: nextOptionValue,\n subscribe: (listener: () => void) =>\n optionStateStore.subscribe(optionId, listener),\n };\n }, [optionId, disabled, value, optionStateStore]);\n const optionState = useSyncExternalStore(\n subscribe,\n getSnapshot,\n getSnapshot,\n );\n const selected = hasOptionState(optionState, OPTION_STATE_SELECTED);\n const active = hasOptionState(optionState, OPTION_STATE_ACTIVE);\n const focusVisible = hasOptionState(\n optionState,\n OPTION_STATE_FOCUS_VISIBLE,\n );\n\n const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n if (disabled || id === undefined) {\n return;\n }\n\n listRef?.current?.focus({ preventScroll: true });\n // set active descendent\n setActive(optionValue);\n\n // handle selection\n select(event, optionValue);\n\n onClick?.(event);\n };\n\n const handleMouseOver = () => {\n setActive(optionValue);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (id && optionRef.current) {\n return register(optionValue, optionRef.current);\n }\n }, [optionValue, id, register]);\n\n const handleRef = useForkRef(optionRef, ref);\n\n return (\n // biome-ignore lint/a11y/useKeyWithClickEvents: The click event is handled by the parent list control, which manages keyboard interactions.\n <div\n aria-disabled={disabled ? \"true\" : undefined}\n aria-selected={selected}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"active\")]: active,\n [withBaseName(\"focusVisible\")]: focusVisible,\n },\n className,\n )}\n ref={handleRef}\n role=\"option\"\n id={id}\n onClick={handleClick}\n onMouseOver={handleMouseOver}\n tabIndex={-1}\n {...rest}\n >\n {multiselect && (\n <CheckboxIcon\n checked={selected}\n className={withBaseName(\"checkbox\")}\n />\n )}\n {children ?? valueToString(value)}\n </div>\n );\n },\n);\n\n// Context isolation makes this bailout effective for unchanged option props.\nexport const Option = memo(OptionComponent) as typeof OptionComponent;\n"],"names":["makePrefixer","forwardRef","Option","useWindow","useComponentCssInjection","optionCss","useRef","useId","useListControlOptionContext","useMemo","useSyncExternalStore","hasOptionState","OPTION_STATE_SELECTED","OPTION_STATE_ACTIVE","OPTION_STATE_FOCUS_VISIBLE","useIsomorphicLayoutEffect","useForkRef","jsxs","clsx","jsx","CheckboxIcon","memo"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltOptionGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-strong);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n box-sizing: border-box;\n}\n\n.saltOptionGroup {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltOptionGroup:first-of-type {\n border-top: 0;\n}\n";
3
+ var css_248z = ".saltOptionGroup-label {\n background: var(--salt-container-primary-background);\n color: var(--salt-content-secondary-foreground);\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-label-fontWeight-bolder);\n font-family: var(--salt-text-fontFamily);\n line-height: var(--salt-text-label-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n display: flex;\n box-sizing: border-box;\n}\n\n.saltOptionGroup {\n border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltOptionGroup:first-of-type {\n border-top: 0;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=OptionGroup.css.js.map
@@ -7,6 +7,8 @@ var clsx = require('clsx');
7
7
  var React = require('react');
8
8
  require('../text/Code.js');
9
9
  require('../text/Display.js');
10
+ require('../text/Editorial.js');
11
+ require('../text/Eyebrow.js');
10
12
  var Headings = require('../text/Headings.js');
11
13
  require('../text/Label.js');
12
14
  var Text = require('../text/Text.js');
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n /**\n * Header text\n */\n header?: ReactNode;\n /**\n * Preheader text is displayed just above the header\n **/\n preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n function OverlayHeader(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overlay-header\",\n css: overlayHeaderCss,\n window: targetWindow,\n });\n\n const { className, description, header, actions, preheader, ...rest } =\n props;\n\n const { setHeaderId, setDescriptionId } = useOverlayContext();\n\n const headingId = useId();\n const descriptionId = useId();\n const hasHeading = Boolean(header || preheader);\n const hasDescription = Boolean(description);\n const hasActions = Boolean(actions);\n\n useIsomorphicLayoutEffect(() => {\n setHeaderId?.(hasHeading ? headingId : undefined);\n\n return () => {\n setHeaderId?.(undefined);\n };\n }, [hasHeading, headingId, setHeaderId]);\n\n useIsomorphicLayoutEffect(() => {\n setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n return () => {\n setDescriptionId?.(undefined);\n };\n }, [hasDescription, descriptionId, setDescriptionId]);\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withActions\")]: hasActions },\n className,\n )}\n {...rest}\n ref={ref}\n >\n <div className={withBaseName(\"container\")}>\n {hasHeading && (\n <H2 id={headingId} styleAs=\"h4\" className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n )}\n {description && (\n <Text\n id={descriptionId}\n color=\"secondary\"\n className={withBaseName(\"description\")}\n >\n {description}\n </Text>\n )}\n </div>\n {hasActions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","OverlayHeader","useWindow","useComponentCssInjection","overlayHeaderCss","useOverlayContext","useId","useIsomorphicLayoutEffect","jsxs","clsx","H2","jsx","Text"],"mappings":"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"}
1
+ {"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Description text is displayed just below the header\n **/\n description?: ReactNode;\n /**\n * Actions to be displayed in header\n */\n actions?: ReactNode;\n /**\n * Header text\n */\n header?: ReactNode;\n /**\n * Preheader text is displayed just above the header\n **/\n preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n function OverlayHeader(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overlay-header\",\n css: overlayHeaderCss,\n window: targetWindow,\n });\n\n const { className, description, header, actions, preheader, ...rest } =\n props;\n\n const { setHeaderId, setDescriptionId } = useOverlayContext();\n\n const headingId = useId();\n const descriptionId = useId();\n const hasHeading = Boolean(header || preheader);\n const hasDescription = Boolean(description);\n const hasActions = Boolean(actions);\n\n useIsomorphicLayoutEffect(() => {\n setHeaderId?.(hasHeading ? headingId : undefined);\n\n return () => {\n setHeaderId?.(undefined);\n };\n }, [hasHeading, headingId, setHeaderId]);\n\n useIsomorphicLayoutEffect(() => {\n setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n return () => {\n setDescriptionId?.(undefined);\n };\n }, [hasDescription, descriptionId, setDescriptionId]);\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withActions\")]: hasActions },\n className,\n )}\n {...rest}\n ref={ref}\n >\n <div className={withBaseName(\"container\")}>\n {hasHeading && (\n <H2 id={headingId} styleAs=\"h4\" className={withBaseName(\"header\")}>\n {preheader && <Text color=\"primary\">{preheader}</Text>}\n {header}\n </H2>\n )}\n {description && (\n <Text\n id={descriptionId}\n color=\"secondary\"\n className={withBaseName(\"description\")}\n >\n {description}\n </Text>\n )}\n </div>\n {hasActions && (\n <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","OverlayHeader","useWindow","useComponentCssInjection","overlayHeaderCss","useOverlayContext","useId","useIsomorphicLayoutEffect","jsxs","clsx","H2","jsx","Text"],"mappings":"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"}
@@ -15,7 +15,7 @@ require('../viewport/ViewportProvider.js');
15
15
  var OverlayPanelCloseButton$1 = require('./OverlayPanelCloseButton.css.js');
16
16
 
17
17
  const withBaseName = makePrefixer.makePrefixer("saltOverlayPanelCloseButton");
18
- const OverlayPanelCloseButton = React.forwardRef(function OverlayPanelButton({ className, ...rest }, ref) {
18
+ const OverlayPanelCloseButton = React.forwardRef(function OverlayPanelCloseButton2({ className, ...rest }, ref) {
19
19
  const targetWindow = window.useWindow();
20
20
  styles.useComponentCssInjection({
21
21
  testId: "salt-overlay-panel-close-button",
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>(function OverlayPanelButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overlay-panel-close-button\",\n css: overlayPanelCloseButtonCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n\n return (\n <div className={clsx(withBaseName(), className)}>\n <Button\n ref={ref}\n aria-label=\"Close overlay\"\n appearance=\"transparent\"\n className={withBaseName(\"button\")}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","overlayPanelCloseButtonCss","useIcon","clsx","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,6BAA6B,CAAA;AAExD,MAAM,uBAAA,GAA0BC,iBAGrC,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACzD,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iCAAA;AAAA,IACR,GAAA,EAAKC,yBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,UAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAA,EAAW,eAAA;AAAA,MACX,UAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACzB,EACF,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>(function OverlayPanelCloseButton({ className, ...rest }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-overlay-panel-close-button\",\n css: overlayPanelCloseButtonCss,\n window: targetWindow,\n });\n const { CloseIcon } = useIcon();\n\n return (\n <div className={clsx(withBaseName(), className)}>\n <Button\n ref={ref}\n aria-label=\"Close overlay\"\n appearance=\"transparent\"\n className={withBaseName(\"button\")}\n {...rest}\n >\n <CloseIcon aria-hidden />\n </Button>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","OverlayPanelCloseButton","useWindow","useComponentCssInjection","overlayPanelCloseButtonCss","useIcon","clsx","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,6BAA6B,CAAA;AAExD,MAAM,uBAAA,GAA0BC,iBAGrC,SAASC,wBAAAA,CAAwB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC9D,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iCAAA;AAAA,IACR,GAAA,EAAKC,yBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWC,UAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAA,EAAW,eAAA;AAAA,MACX,UAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACzB,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -9,6 +9,8 @@ var Button = require('../button/Button.js');
9
9
  var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
10
10
  require('../text/Code.js');
11
11
  require('../text/Display.js');
12
+ require('../text/Editorial.js');
13
+ require('../text/Eyebrow.js');
12
14
  require('../text/Headings.js');
13
15
  require('../text/Label.js');
14
16
  var Text = require('../text/Text.js');
@@ -1 +1 @@
1
- {"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEventHandler,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport compactPaginatorCss from \"./CompactPaginator.css\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-paginator\",\n css: compactPaginatorCss,\n window: targetWindow,\n });\n\n const { NextIcon, PreviousIcon } = useIcon();\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.max(1, page - 1));\n };\n\n const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.min(page + 1, count));\n };\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n <Button\n appearance=\"transparent\"\n aria-label=\"Previous Page\"\n onClick={onPreviousPage}\n disabled={isOnFirstPage}\n className={withBaseName(\"arrowButton\")}\n >\n <PreviousIcon aria-hidden />\n </Button>\n {children ? children : <PageButton page={page} disabled />}\n <Text as=\"span\" variant=\"secondary\">\n of\n </Text>\n <PageButton page={count} disabled={isOnLastPage} />\n <Button\n appearance=\"transparent\"\n aria-label=\"Next Page\"\n onClick={onNextPage}\n disabled={isOnLastPage}\n className={withBaseName(\"arrowButton\")}\n >\n <NextIcon aria-hidden />\n </Button>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","CompactPaginator","useWindow","useComponentCssInjection","compactPaginatorCss","useIcon","usePaginationContext","jsxs","clsx","jsx","Button","PageButton","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AACtE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAE3C,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,YAAA,KAAiBC,yCAAA,EAAqB;AAE3D,EAAA,MAAM,cAAA,GAAuD,CAAC,KAAA,KAAU;AACtE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAA,KAAS,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAA,KAAS,KAAA;AAE9B,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC9D,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,eAAA;AAAA,QACX,OAAA,EAAS,cAAA;AAAA,QACT,QAAA,EAAU,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,IACC,WAAW,QAAA,mBAAWA,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAY,UAAQ,IAAA,EAAC,CAAA;AAAA,mCACvDC,SAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,aAAY,QAAA,EAAA,IAAA,EAEpC,CAAA;AAAA,oBACAH,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAM,KAAA,EAAO,UAAU,YAAA,EAAc,CAAA;AAAA,oBACjDF,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,WAAA;AAAA,QACX,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AACxB,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type MouseEventHandler,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport compactPaginatorCss from \"./CompactPaginator.css\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-paginator\",\n css: compactPaginatorCss,\n window: targetWindow,\n });\n\n const { NextIcon, PreviousIcon } = useIcon();\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.max(1, page - 1));\n };\n\n const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.min(page + 1, count));\n };\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n <Button\n appearance=\"transparent\"\n aria-label=\"Previous Page\"\n onClick={onPreviousPage}\n disabled={isOnFirstPage}\n className={withBaseName(\"arrowButton\")}\n >\n <PreviousIcon aria-hidden />\n </Button>\n {children ? children : <PageButton page={page} disabled />}\n <Text as=\"span\" variant=\"secondary\">\n of\n </Text>\n <PageButton page={count} disabled={isOnLastPage} />\n <Button\n appearance=\"transparent\"\n aria-label=\"Next Page\"\n onClick={onNextPage}\n disabled={isOnLastPage}\n className={withBaseName(\"arrowButton\")}\n >\n <NextIcon aria-hidden />\n </Button>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","CompactPaginator","useWindow","useComponentCssInjection","compactPaginatorCss","useIcon","usePaginationContext","jsxs","clsx","jsx","Button","PageButton","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AACtE,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAa,GAAIC,4BAAA,EAAQ;AAE3C,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,YAAA,KAAiBC,yCAAA,EAAqB;AAE3D,EAAA,MAAM,cAAA,GAAuD,CAAC,KAAA,KAAU;AACtE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAA,KAAS,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAA,KAAS,KAAA;AAE9B,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC9D,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,eAAA;AAAA,QACX,OAAA,EAAS,cAAA;AAAA,QACT,QAAA,EAAU,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,IACC,WAAW,QAAA,mBAAWA,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAY,UAAQ,IAAA,EAAC,CAAA;AAAA,mCACvDC,SAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,aAAY,QAAA,EAAA,IAAA,EAEpC,CAAA;AAAA,oBACAH,cAAA,CAACE,qBAAA,EAAA,EAAW,IAAA,EAAM,KAAA,EAAO,UAAU,YAAA,EAAc,CAAA;AAAA,oBACjDF,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,WAAA;AAAA,QACX,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAAD,cAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AACxB,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -10,6 +10,8 @@ require('../form-field-context/FormFieldContext.js');
10
10
  require('../status-indicator/StatusIndicator.js');
11
11
  require('../text/Code.js');
12
12
  require('../text/Display.js');
13
+ require('../text/Editorial.js');
14
+ require('../text/Eyebrow.js');
13
15
  require('../text/Headings.js');
14
16
  require('../text/Label.js');
15
17
  require('../text/Text.js');