@salt-ds/core 1.47.5 → 1.49.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 (510) hide show
  1. package/CHANGELOG.md +59 -0
  2. package/css/salt-core.css +178 -4
  3. package/dist-cjs/accordion/Accordion.js.map +1 -1
  4. package/dist-cjs/accordion/AccordionContext.js.map +1 -1
  5. package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
  6. package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
  7. package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
  8. package/dist-cjs/aria-announcer/AriaAnnounce.js.map +1 -1
  9. package/dist-cjs/aria-announcer/AriaAnnouncerContext.js.map +1 -1
  10. package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
  11. package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
  12. package/dist-cjs/avatar/Avatar.js.map +1 -1
  13. package/dist-cjs/avatar/useAvatarImage.js +46 -18
  14. package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
  15. package/dist-cjs/avatar/useIsHydrated.js +18 -0
  16. package/dist-cjs/avatar/useIsHydrated.js.map +1 -0
  17. package/dist-cjs/badge/Badge.js.map +1 -1
  18. package/dist-cjs/banner/Banner.css.js +1 -1
  19. package/dist-cjs/banner/Banner.js.map +1 -1
  20. package/dist-cjs/banner/BannerActions.js.map +1 -1
  21. package/dist-cjs/banner/BannerContent.js.map +1 -1
  22. package/dist-cjs/border-item/BorderItem.js.map +1 -1
  23. package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
  24. package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -1
  25. package/dist-cjs/breakpoints/Breakpoints.js.map +1 -1
  26. package/dist-cjs/button/Button.js.map +1 -1
  27. package/dist-cjs/button/useButton.js.map +1 -1
  28. package/dist-cjs/card/Card.js.map +1 -1
  29. package/dist-cjs/checkbox/Checkbox.css.js +1 -1
  30. package/dist-cjs/checkbox/Checkbox.js.map +1 -1
  31. package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
  32. package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
  33. package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  34. package/dist-cjs/checkbox/internal/useCheckboxGroup.js.map +1 -1
  35. package/dist-cjs/collapsible/Collapsible.js +52 -0
  36. package/dist-cjs/collapsible/Collapsible.js.map +1 -0
  37. package/dist-cjs/collapsible/CollapsibleContext.js +29 -0
  38. package/dist-cjs/collapsible/CollapsibleContext.js.map +1 -0
  39. package/dist-cjs/collapsible/CollapsiblePanel.css.js +6 -0
  40. package/dist-cjs/collapsible/CollapsiblePanel.css.js.map +1 -0
  41. package/dist-cjs/collapsible/CollapsiblePanel.js +47 -0
  42. package/dist-cjs/collapsible/CollapsiblePanel.js.map +1 -0
  43. package/dist-cjs/collapsible/CollapsibleTrigger.js +40 -0
  44. package/dist-cjs/collapsible/CollapsibleTrigger.js.map +1 -0
  45. package/dist-cjs/combo-box/ComboBox.js.map +1 -1
  46. package/dist-cjs/combo-box/useComboBox.js.map +1 -1
  47. package/dist-cjs/dialog/Dialog.js.map +1 -1
  48. package/dist-cjs/dialog/DialogActions.js.map +1 -1
  49. package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
  50. package/dist-cjs/dialog/DialogContent.css.js +1 -1
  51. package/dist-cjs/dialog/DialogContent.js.map +1 -1
  52. package/dist-cjs/dialog/DialogContext.js.map +1 -1
  53. package/dist-cjs/dialog/DialogHeader.js.map +1 -1
  54. package/dist-cjs/divider/Divider.js.map +1 -1
  55. package/dist-cjs/drawer/Drawer.js.map +1 -1
  56. package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
  57. package/dist-cjs/dropdown/Dropdown.js.map +1 -1
  58. package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
  59. package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
  60. package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -1
  61. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +1 -1
  62. package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  63. package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -1
  64. package/dist-cjs/flex-item/FlexItem.js.map +1 -1
  65. package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
  66. package/dist-cjs/flex-layout/parseSpacing.js.map +1 -1
  67. package/dist-cjs/flow-layout/FlowLayout.js.map +1 -1
  68. package/dist-cjs/form-field/FormField.js.map +1 -1
  69. package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
  70. package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
  71. package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
  72. package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
  73. package/dist-cjs/form-field-context/useFormFieldProps.js.map +1 -1
  74. package/dist-cjs/grid-item/GridItem.js.map +1 -1
  75. package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
  76. package/dist-cjs/index.js +21 -0
  77. package/dist-cjs/index.js.map +1 -1
  78. package/dist-cjs/input/Input.js.map +1 -1
  79. package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
  80. package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
  81. package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
  82. package/dist-cjs/interactable-card/useInteractableCard.js.map +1 -1
  83. package/dist-cjs/link/Link.js.map +1 -1
  84. package/dist-cjs/link/LinkAction.js.map +1 -1
  85. package/dist-cjs/link-card/LinkCard.js.map +1 -1
  86. package/dist-cjs/list-box/ListBox.js.map +1 -1
  87. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  88. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  89. package/dist-cjs/menu/Menu.js.map +1 -1
  90. package/dist-cjs/menu/MenuBase.js.map +1 -1
  91. package/dist-cjs/menu/MenuContext.js.map +1 -1
  92. package/dist-cjs/menu/MenuGroup.js.map +1 -1
  93. package/dist-cjs/menu/MenuItem.js.map +1 -1
  94. package/dist-cjs/menu/MenuPanel.js.map +1 -1
  95. package/dist-cjs/menu/MenuPanelBase.js.map +1 -1
  96. package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
  97. package/dist-cjs/menu/MenuTrigger.js.map +1 -1
  98. package/dist-cjs/menu/MenuTriggerContext.js.map +1 -1
  99. package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
  100. package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
  101. package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
  102. package/dist-cjs/navigation-item/NavigationItemAction.js.map +1 -1
  103. package/dist-cjs/option/Option.js.map +1 -1
  104. package/dist-cjs/option/OptionGroup.js.map +1 -1
  105. package/dist-cjs/option/OptionList.js.map +1 -1
  106. package/dist-cjs/option/OptionListBase.js.map +1 -1
  107. package/dist-cjs/overlay/Overlay.js.map +1 -1
  108. package/dist-cjs/overlay/OverlayContext.js.map +1 -1
  109. package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
  110. package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
  111. package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
  112. package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
  113. package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
  114. package/dist-cjs/pagination/CompactInput.js.map +1 -1
  115. package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
  116. package/dist-cjs/pagination/GoToInput.js.map +1 -1
  117. package/dist-cjs/pagination/PageButton.js.map +1 -1
  118. package/dist-cjs/pagination/PageRanges.js.map +1 -1
  119. package/dist-cjs/pagination/Pagination.js.map +1 -1
  120. package/dist-cjs/pagination/PaginationContext.js.map +1 -1
  121. package/dist-cjs/pagination/Paginator.js.map +1 -1
  122. package/dist-cjs/pagination/usePagination.js.map +1 -1
  123. package/dist-cjs/pagination/usePaginationContext.js.map +1 -1
  124. package/dist-cjs/panel/Panel.js.map +1 -1
  125. package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
  126. package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
  127. package/dist-cjs/pill/Pill.js.map +1 -1
  128. package/dist-cjs/pill-input/PillInput.js.map +1 -1
  129. package/dist-cjs/pill-input/useTruncatePills.js.map +1 -1
  130. package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
  131. package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
  132. package/dist-cjs/radio-button/RadioButton.css.js +1 -1
  133. package/dist-cjs/radio-button/RadioButton.js.map +1 -1
  134. package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
  135. package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
  136. package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
  137. package/dist-cjs/radio-button/internal/useRadioGroup.js.map +1 -1
  138. package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
  139. package/dist-cjs/scrim/Scrim.js.map +1 -1
  140. package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
  141. package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
  142. package/dist-cjs/skip-link/SkipLink.js.map +1 -1
  143. package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  144. package/dist-cjs/slider/RangeSlider.js.map +1 -1
  145. package/dist-cjs/slider/Slider.js.map +1 -1
  146. package/dist-cjs/slider/internal/SliderThumb.js.map +1 -1
  147. package/dist-cjs/slider/internal/SliderTooltip.js.map +1 -1
  148. package/dist-cjs/slider/internal/SliderTrack.js.map +1 -1
  149. package/dist-cjs/slider/internal/useRangeSliderThumb.js.map +1 -1
  150. package/dist-cjs/slider/internal/useSliderThumb.js.map +1 -1
  151. package/dist-cjs/slider/internal/utils.js.map +1 -1
  152. package/dist-cjs/spinner/Spinner.js.map +1 -1
  153. package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
  154. package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
  155. package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
  156. package/dist-cjs/status-adornment/ErrorAdornment.js.map +1 -1
  157. package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
  158. package/dist-cjs/status-adornment/SuccessAdornment.js.map +1 -1
  159. package/dist-cjs/status-adornment/WarningAdornment.js.map +1 -1
  160. package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
  161. package/dist-cjs/status-indicator/ValidationStatus.js.map +1 -1
  162. package/dist-cjs/stepper/Step.js.map +1 -1
  163. package/dist-cjs/stepper/Stepper.js.map +1 -1
  164. package/dist-cjs/stepper/internal/StepConnector.js.map +1 -1
  165. package/dist-cjs/stepper/internal/StepExpandTrigger.js.map +1 -1
  166. package/dist-cjs/stepper/internal/StepIcon.js.map +1 -1
  167. package/dist-cjs/stepper/internal/StepScreenReaderOnly.js.map +1 -1
  168. package/dist-cjs/stepper/internal/StepText.js.map +1 -1
  169. package/dist-cjs/stepper/internal/StepperProvider.js.map +1 -1
  170. package/dist-cjs/switch/Switch.css.js +1 -1
  171. package/dist-cjs/switch/Switch.js.map +1 -1
  172. package/dist-cjs/tag/Tag.js.map +1 -1
  173. package/dist-cjs/text/Code.js.map +1 -1
  174. package/dist-cjs/text/Display.js.map +1 -1
  175. package/dist-cjs/text/Headings.js.map +1 -1
  176. package/dist-cjs/text/Label.js.map +1 -1
  177. package/dist-cjs/text/Text.js.map +1 -1
  178. package/dist-cjs/text/TextAction.js.map +1 -1
  179. package/dist-cjs/text/TextNotation.js.map +1 -1
  180. package/dist-cjs/theme/Accent.js.map +1 -1
  181. package/dist-cjs/theme/ActionFont.js.map +1 -1
  182. package/dist-cjs/theme/Corner.js.map +1 -1
  183. package/dist-cjs/theme/Density.js.map +1 -1
  184. package/dist-cjs/theme/HeadingFont.js.map +1 -1
  185. package/dist-cjs/theme/Mode.js.map +1 -1
  186. package/dist-cjs/theme/Theme.js.map +1 -1
  187. package/dist-cjs/toast/Toast.js.map +1 -1
  188. package/dist-cjs/toast/ToastContent.js.map +1 -1
  189. package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
  190. package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  191. package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  192. package/dist-cjs/tooltip/Tooltip.js.map +1 -1
  193. package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
  194. package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
  195. package/dist-cjs/tooltip/useTooltip.js.map +1 -1
  196. package/dist-cjs/utils/capitalize.js.map +1 -1
  197. package/dist-cjs/utils/createChainedFunction.js.map +1 -1
  198. package/dist-cjs/utils/createContext.js.map +1 -1
  199. package/dist-cjs/utils/debounce.js.map +1 -1
  200. package/dist-cjs/utils/getRefFromChildren.js.map +1 -1
  201. package/dist-cjs/utils/makePrefixer.js.map +1 -1
  202. package/dist-cjs/utils/marginMiddleware.js.map +1 -1
  203. package/dist-cjs/utils/mergeProps.js.map +1 -1
  204. package/dist-cjs/utils/ownerDocument.js.map +1 -1
  205. package/dist-cjs/utils/ownerWindow.js.map +1 -1
  206. package/dist-cjs/utils/renderProps.js.map +1 -1
  207. package/dist-cjs/utils/setRef.js.map +1 -1
  208. package/dist-cjs/utils/useControlled.js.map +1 -1
  209. package/dist-cjs/utils/useEventCallback.js.map +1 -1
  210. package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  211. package/dist-cjs/utils/useForkRef.js.map +1 -1
  212. package/dist-cjs/utils/useId.js.map +1 -1
  213. package/dist-cjs/utils/useIsFocusVisible.js.map +1 -1
  214. package/dist-cjs/utils/useIsomorphicLayoutEffect.js.map +1 -1
  215. package/dist-cjs/utils/usePreventScroll.js.map +1 -1
  216. package/dist-cjs/utils/usePrevious.js.map +1 -1
  217. package/dist-cjs/utils/useResizeObserver.js.map +1 -1
  218. package/dist-cjs/utils/useResponsiveProp.js.map +1 -1
  219. package/dist-cjs/utils/useValueEffect.js.map +1 -1
  220. package/dist-cjs/vertical-navigation/SubMenuContext.js +39 -0
  221. package/dist-cjs/vertical-navigation/SubMenuContext.js.map +1 -0
  222. package/dist-cjs/vertical-navigation/VerticalNavigation.css.js +6 -0
  223. package/dist-cjs/vertical-navigation/VerticalNavigation.css.js.map +1 -0
  224. package/dist-cjs/vertical-navigation/VerticalNavigation.js +38 -0
  225. package/dist-cjs/vertical-navigation/VerticalNavigation.js.map +1 -0
  226. package/dist-cjs/vertical-navigation/VerticalNavigationItem.js +53 -0
  227. package/dist-cjs/vertical-navigation/VerticalNavigationItem.js.map +1 -0
  228. package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +6 -0
  229. package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js.map +1 -0
  230. package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js +88 -0
  231. package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.js.map +1 -0
  232. package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js +35 -0
  233. package/dist-cjs/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -0
  234. package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js +6 -0
  235. package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js.map +1 -0
  236. package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js +28 -0
  237. package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -0
  238. package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js +6 -0
  239. package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.css.js.map +1 -0
  240. package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js +74 -0
  241. package/dist-cjs/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -0
  242. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js +6 -0
  243. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.css.js.map +1 -0
  244. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.js +39 -0
  245. package/dist-cjs/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -0
  246. package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
  247. package/dist-es/accordion/Accordion.js.map +1 -1
  248. package/dist-es/accordion/AccordionContext.js.map +1 -1
  249. package/dist-es/accordion/AccordionGroup.js.map +1 -1
  250. package/dist-es/accordion/AccordionHeader.js.map +1 -1
  251. package/dist-es/accordion/AccordionPanel.js.map +1 -1
  252. package/dist-es/aria-announcer/AriaAnnounce.js.map +1 -1
  253. package/dist-es/aria-announcer/AriaAnnouncerContext.js.map +1 -1
  254. package/dist-es/aria-announcer/AriaAnnouncerProvider.js.map +1 -1
  255. package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
  256. package/dist-es/avatar/Avatar.js.map +1 -1
  257. package/dist-es/avatar/useAvatarImage.js +47 -19
  258. package/dist-es/avatar/useAvatarImage.js.map +1 -1
  259. package/dist-es/avatar/useIsHydrated.js +16 -0
  260. package/dist-es/avatar/useIsHydrated.js.map +1 -0
  261. package/dist-es/badge/Badge.js.map +1 -1
  262. package/dist-es/banner/Banner.css.js +1 -1
  263. package/dist-es/banner/Banner.js.map +1 -1
  264. package/dist-es/banner/BannerActions.js.map +1 -1
  265. package/dist-es/banner/BannerContent.js.map +1 -1
  266. package/dist-es/border-item/BorderItem.js.map +1 -1
  267. package/dist-es/border-layout/BorderLayout.js.map +1 -1
  268. package/dist-es/breakpoints/BreakpointProvider.js.map +1 -1
  269. package/dist-es/breakpoints/Breakpoints.js.map +1 -1
  270. package/dist-es/button/Button.js.map +1 -1
  271. package/dist-es/button/useButton.js.map +1 -1
  272. package/dist-es/card/Card.js.map +1 -1
  273. package/dist-es/checkbox/Checkbox.css.js +1 -1
  274. package/dist-es/checkbox/Checkbox.js.map +1 -1
  275. package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
  276. package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
  277. package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
  278. package/dist-es/checkbox/internal/useCheckboxGroup.js.map +1 -1
  279. package/dist-es/collapsible/Collapsible.js +50 -0
  280. package/dist-es/collapsible/Collapsible.js.map +1 -0
  281. package/dist-es/collapsible/CollapsibleContext.js +26 -0
  282. package/dist-es/collapsible/CollapsibleContext.js.map +1 -0
  283. package/dist-es/collapsible/CollapsiblePanel.css.js +4 -0
  284. package/dist-es/collapsible/CollapsiblePanel.css.js.map +1 -0
  285. package/dist-es/collapsible/CollapsiblePanel.js +45 -0
  286. package/dist-es/collapsible/CollapsiblePanel.js.map +1 -0
  287. package/dist-es/collapsible/CollapsibleTrigger.js +38 -0
  288. package/dist-es/collapsible/CollapsibleTrigger.js.map +1 -0
  289. package/dist-es/combo-box/ComboBox.js.map +1 -1
  290. package/dist-es/combo-box/useComboBox.js.map +1 -1
  291. package/dist-es/dialog/Dialog.js.map +1 -1
  292. package/dist-es/dialog/DialogActions.js.map +1 -1
  293. package/dist-es/dialog/DialogCloseButton.js.map +1 -1
  294. package/dist-es/dialog/DialogContent.css.js +1 -1
  295. package/dist-es/dialog/DialogContent.js.map +1 -1
  296. package/dist-es/dialog/DialogContext.js.map +1 -1
  297. package/dist-es/dialog/DialogHeader.js.map +1 -1
  298. package/dist-es/divider/Divider.js.map +1 -1
  299. package/dist-es/drawer/Drawer.js.map +1 -1
  300. package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
  301. package/dist-es/dropdown/Dropdown.js.map +1 -1
  302. package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
  303. package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
  304. package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -1
  305. package/dist-es/file-drop-zone/FileDropZoneTrigger.js +1 -1
  306. package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
  307. package/dist-es/file-drop-zone/internal/utils.js.map +1 -1
  308. package/dist-es/flex-item/FlexItem.js.map +1 -1
  309. package/dist-es/flex-layout/FlexLayout.js.map +1 -1
  310. package/dist-es/flex-layout/parseSpacing.js.map +1 -1
  311. package/dist-es/flow-layout/FlowLayout.js.map +1 -1
  312. package/dist-es/form-field/FormField.js.map +1 -1
  313. package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
  314. package/dist-es/form-field/FormFieldLabel.css.js +1 -1
  315. package/dist-es/form-field/FormFieldLabel.js.map +1 -1
  316. package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
  317. package/dist-es/form-field-context/useFormFieldProps.js.map +1 -1
  318. package/dist-es/grid-item/GridItem.js.map +1 -1
  319. package/dist-es/grid-layout/GridLayout.js.map +1 -1
  320. package/dist-es/index.js +10 -0
  321. package/dist-es/index.js.map +1 -1
  322. package/dist-es/input/Input.js.map +1 -1
  323. package/dist-es/interactable-card/InteractableCard.js.map +1 -1
  324. package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
  325. package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
  326. package/dist-es/interactable-card/useInteractableCard.js.map +1 -1
  327. package/dist-es/link/Link.js.map +1 -1
  328. package/dist-es/link/LinkAction.js.map +1 -1
  329. package/dist-es/link-card/LinkCard.js.map +1 -1
  330. package/dist-es/list-box/ListBox.js.map +1 -1
  331. package/dist-es/list-control/ListControlContext.js.map +1 -1
  332. package/dist-es/list-control/ListControlState.js.map +1 -1
  333. package/dist-es/menu/Menu.js.map +1 -1
  334. package/dist-es/menu/MenuBase.js.map +1 -1
  335. package/dist-es/menu/MenuContext.js.map +1 -1
  336. package/dist-es/menu/MenuGroup.js.map +1 -1
  337. package/dist-es/menu/MenuItem.js.map +1 -1
  338. package/dist-es/menu/MenuPanel.js.map +1 -1
  339. package/dist-es/menu/MenuPanelBase.js.map +1 -1
  340. package/dist-es/menu/MenuPanelContext.js.map +1 -1
  341. package/dist-es/menu/MenuTrigger.js.map +1 -1
  342. package/dist-es/menu/MenuTriggerContext.js.map +1 -1
  343. package/dist-es/multiline-input/MultilineInput.js.map +1 -1
  344. package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
  345. package/dist-es/navigation-item/NavigationItem.js.map +1 -1
  346. package/dist-es/navigation-item/NavigationItemAction.js.map +1 -1
  347. package/dist-es/option/Option.js.map +1 -1
  348. package/dist-es/option/OptionGroup.js.map +1 -1
  349. package/dist-es/option/OptionList.js.map +1 -1
  350. package/dist-es/option/OptionListBase.js.map +1 -1
  351. package/dist-es/overlay/Overlay.js.map +1 -1
  352. package/dist-es/overlay/OverlayContext.js.map +1 -1
  353. package/dist-es/overlay/OverlayHeader.js.map +1 -1
  354. package/dist-es/overlay/OverlayPanel.js.map +1 -1
  355. package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
  356. package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
  357. package/dist-es/overlay/OverlayTrigger.js.map +1 -1
  358. package/dist-es/pagination/CompactInput.js.map +1 -1
  359. package/dist-es/pagination/CompactPaginator.js.map +1 -1
  360. package/dist-es/pagination/GoToInput.js.map +1 -1
  361. package/dist-es/pagination/PageButton.js.map +1 -1
  362. package/dist-es/pagination/PageRanges.js.map +1 -1
  363. package/dist-es/pagination/Pagination.js.map +1 -1
  364. package/dist-es/pagination/PaginationContext.js.map +1 -1
  365. package/dist-es/pagination/Paginator.js.map +1 -1
  366. package/dist-es/pagination/usePagination.js.map +1 -1
  367. package/dist-es/pagination/usePaginationContext.js.map +1 -1
  368. package/dist-es/panel/Panel.js.map +1 -1
  369. package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
  370. package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
  371. package/dist-es/pill/Pill.js.map +1 -1
  372. package/dist-es/pill-input/PillInput.js.map +1 -1
  373. package/dist-es/pill-input/useTruncatePills.js.map +1 -1
  374. package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
  375. package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
  376. package/dist-es/radio-button/RadioButton.css.js +1 -1
  377. package/dist-es/radio-button/RadioButton.js.map +1 -1
  378. package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
  379. package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
  380. package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
  381. package/dist-es/radio-button/internal/useRadioGroup.js.map +1 -1
  382. package/dist-es/salt-provider/SaltProvider.js.map +1 -1
  383. package/dist-es/scrim/Scrim.js.map +1 -1
  384. package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
  385. package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
  386. package/dist-es/skip-link/SkipLink.js.map +1 -1
  387. package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +1 -1
  388. package/dist-es/slider/RangeSlider.js.map +1 -1
  389. package/dist-es/slider/Slider.js.map +1 -1
  390. package/dist-es/slider/internal/SliderThumb.js.map +1 -1
  391. package/dist-es/slider/internal/SliderTooltip.js.map +1 -1
  392. package/dist-es/slider/internal/SliderTrack.js.map +1 -1
  393. package/dist-es/slider/internal/useRangeSliderThumb.js.map +1 -1
  394. package/dist-es/slider/internal/useSliderThumb.js.map +1 -1
  395. package/dist-es/slider/internal/utils.js.map +1 -1
  396. package/dist-es/spinner/Spinner.js.map +1 -1
  397. package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
  398. package/dist-es/split-layout/SplitLayout.js.map +1 -1
  399. package/dist-es/stack-layout/StackLayout.js.map +1 -1
  400. package/dist-es/status-adornment/ErrorAdornment.js.map +1 -1
  401. package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
  402. package/dist-es/status-adornment/SuccessAdornment.js.map +1 -1
  403. package/dist-es/status-adornment/WarningAdornment.js.map +1 -1
  404. package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
  405. package/dist-es/status-indicator/ValidationStatus.js.map +1 -1
  406. package/dist-es/stepper/Step.js.map +1 -1
  407. package/dist-es/stepper/Stepper.js.map +1 -1
  408. package/dist-es/stepper/internal/StepConnector.js.map +1 -1
  409. package/dist-es/stepper/internal/StepExpandTrigger.js.map +1 -1
  410. package/dist-es/stepper/internal/StepIcon.js.map +1 -1
  411. package/dist-es/stepper/internal/StepScreenReaderOnly.js.map +1 -1
  412. package/dist-es/stepper/internal/StepText.js.map +1 -1
  413. package/dist-es/stepper/internal/StepperProvider.js.map +1 -1
  414. package/dist-es/switch/Switch.css.js +1 -1
  415. package/dist-es/switch/Switch.js.map +1 -1
  416. package/dist-es/tag/Tag.js.map +1 -1
  417. package/dist-es/text/Code.js.map +1 -1
  418. package/dist-es/text/Display.js.map +1 -1
  419. package/dist-es/text/Headings.js.map +1 -1
  420. package/dist-es/text/Label.js.map +1 -1
  421. package/dist-es/text/Text.js.map +1 -1
  422. package/dist-es/text/TextAction.js.map +1 -1
  423. package/dist-es/text/TextNotation.js.map +1 -1
  424. package/dist-es/theme/Accent.js.map +1 -1
  425. package/dist-es/theme/ActionFont.js.map +1 -1
  426. package/dist-es/theme/Corner.js.map +1 -1
  427. package/dist-es/theme/Density.js.map +1 -1
  428. package/dist-es/theme/HeadingFont.js.map +1 -1
  429. package/dist-es/theme/Mode.js.map +1 -1
  430. package/dist-es/theme/Theme.js.map +1 -1
  431. package/dist-es/toast/Toast.js.map +1 -1
  432. package/dist-es/toast/ToastContent.js.map +1 -1
  433. package/dist-es/toggle-button/ToggleButton.js.map +1 -1
  434. package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
  435. package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
  436. package/dist-es/tooltip/Tooltip.js.map +1 -1
  437. package/dist-es/tooltip/TooltipBase.js.map +1 -1
  438. package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
  439. package/dist-es/tooltip/useTooltip.js.map +1 -1
  440. package/dist-es/utils/capitalize.js.map +1 -1
  441. package/dist-es/utils/createChainedFunction.js.map +1 -1
  442. package/dist-es/utils/createContext.js.map +1 -1
  443. package/dist-es/utils/debounce.js.map +1 -1
  444. package/dist-es/utils/getRefFromChildren.js.map +1 -1
  445. package/dist-es/utils/makePrefixer.js.map +1 -1
  446. package/dist-es/utils/marginMiddleware.js.map +1 -1
  447. package/dist-es/utils/mergeProps.js.map +1 -1
  448. package/dist-es/utils/ownerDocument.js.map +1 -1
  449. package/dist-es/utils/ownerWindow.js.map +1 -1
  450. package/dist-es/utils/renderProps.js.map +1 -1
  451. package/dist-es/utils/setRef.js.map +1 -1
  452. package/dist-es/utils/useControlled.js.map +1 -1
  453. package/dist-es/utils/useEventCallback.js.map +1 -1
  454. package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
  455. package/dist-es/utils/useForkRef.js.map +1 -1
  456. package/dist-es/utils/useId.js.map +1 -1
  457. package/dist-es/utils/useIsFocusVisible.js.map +1 -1
  458. package/dist-es/utils/useIsomorphicLayoutEffect.js.map +1 -1
  459. package/dist-es/utils/usePreventScroll.js.map +1 -1
  460. package/dist-es/utils/usePrevious.js.map +1 -1
  461. package/dist-es/utils/useResizeObserver.js.map +1 -1
  462. package/dist-es/utils/useResponsiveProp.js.map +1 -1
  463. package/dist-es/utils/useValueEffect.js.map +1 -1
  464. package/dist-es/vertical-navigation/SubMenuContext.js +35 -0
  465. package/dist-es/vertical-navigation/SubMenuContext.js.map +1 -0
  466. package/dist-es/vertical-navigation/VerticalNavigation.css.js +4 -0
  467. package/dist-es/vertical-navigation/VerticalNavigation.css.js.map +1 -0
  468. package/dist-es/vertical-navigation/VerticalNavigation.js +36 -0
  469. package/dist-es/vertical-navigation/VerticalNavigation.js.map +1 -0
  470. package/dist-es/vertical-navigation/VerticalNavigationItem.js +50 -0
  471. package/dist-es/vertical-navigation/VerticalNavigationItem.js.map +1 -0
  472. package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +4 -0
  473. package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js.map +1 -0
  474. package/dist-es/vertical-navigation/VerticalNavigationItemContent.js +86 -0
  475. package/dist-es/vertical-navigation/VerticalNavigationItemContent.js.map +1 -0
  476. package/dist-es/vertical-navigation/VerticalNavigationItemExpansionIcon.js +33 -0
  477. package/dist-es/vertical-navigation/VerticalNavigationItemExpansionIcon.js.map +1 -0
  478. package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js +4 -0
  479. package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js.map +1 -0
  480. package/dist-es/vertical-navigation/VerticalNavigationItemLabel.js +26 -0
  481. package/dist-es/vertical-navigation/VerticalNavigationItemLabel.js.map +1 -0
  482. package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.css.js +4 -0
  483. package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.css.js.map +1 -0
  484. package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.js +72 -0
  485. package/dist-es/vertical-navigation/VerticalNavigationItemTrigger.js.map +1 -0
  486. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js +4 -0
  487. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.css.js.map +1 -0
  488. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.js +37 -0
  489. package/dist-es/vertical-navigation/VerticalNavigationSubMenu.js.map +1 -0
  490. package/dist-es/viewport/ViewportProvider.js.map +1 -1
  491. package/dist-types/avatar/useAvatarImage.d.ts +3 -1
  492. package/dist-types/avatar/useIsHydrated.d.ts +1 -0
  493. package/dist-types/collapsible/Collapsible.d.ts +16 -0
  494. package/dist-types/collapsible/CollapsibleContext.d.ts +9 -0
  495. package/dist-types/collapsible/CollapsiblePanel.d.ts +4 -0
  496. package/dist-types/collapsible/CollapsibleTrigger.d.ts +5 -0
  497. package/dist-types/collapsible/index.d.ts +3 -0
  498. package/dist-types/file-drop-zone/FileDropZone.d.ts +1 -1
  499. package/dist-types/flex-layout/FlexLayout.d.ts +1 -1
  500. package/dist-types/index.d.ts +2 -0
  501. package/dist-types/vertical-navigation/SubMenuContext.d.ts +14 -0
  502. package/dist-types/vertical-navigation/VerticalNavigation.d.ts +8 -0
  503. package/dist-types/vertical-navigation/VerticalNavigationItem.d.ts +12 -0
  504. package/dist-types/vertical-navigation/VerticalNavigationItemContent.d.ts +4 -0
  505. package/dist-types/vertical-navigation/VerticalNavigationItemExpansionIcon.d.ts +2 -0
  506. package/dist-types/vertical-navigation/VerticalNavigationItemLabel.d.ts +4 -0
  507. package/dist-types/vertical-navigation/VerticalNavigationItemTrigger.d.ts +6 -0
  508. package/dist-types/vertical-navigation/VerticalNavigationSubMenu.d.ts +4 -0
  509. package/dist-types/vertical-navigation/index.d.ts +7 -0
  510. package/package.json +3 -2
@@ -0,0 +1,18 @@
1
+ 'use strict';
2
+
3
+ var shim = require('use-sync-external-store/shim');
4
+
5
+ function subscribe() {
6
+ return () => {
7
+ };
8
+ }
9
+ function useIsHydrated() {
10
+ return shim.useSyncExternalStore(
11
+ subscribe,
12
+ () => true,
13
+ () => false
14
+ );
15
+ }
16
+
17
+ exports.useIsHydrated = useIsHydrated;
18
+ //# sourceMappingURL=useIsHydrated.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useIsHydrated.js","sources":["../src/avatar/useIsHydrated.ts"],"sourcesContent":["import { useSyncExternalStore } from \"use-sync-external-store/shim\";\n\nfunction subscribe() {\n return () => {};\n}\n\n// TODO consider moving this to utils\nexport function useIsHydrated() {\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n"],"names":["useSyncExternalStore"],"mappings":";;;;AAEA,SAAS,SAAA,GAAY;AACnB,EAAA,OAAO,MAAM;AAAA,EAAC,CAAA;AAChB;AAGO,SAAS,aAAA,GAAgB;AAC9B,EAAA,OAAOA,yBAAA;AAAA,IACL,SAAA;AAAA,IACA,MAAM,IAAA;AAAA,IACN,MAAM;AAAA,GACR;AACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * The number to display on the badge. If `value` is not provided,\n * the badge will render as a dot badge.\n */\n value?: number | string;\n /**\n * If a child is provided the Badge will render top right. By defualt renders inline.\n */\n children?: ReactNode;\n /**\n * The max number to display on the badge.\n */\n max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { value, max = 999, className, children, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-badge\",\n css: badgeCss,\n window: targetWindow,\n });\n\n const valueText =\n typeof value === \"number\" && value > max ? `${max}+` : value;\n\n const dotBadge = typeof value === \"undefined\";\n\n return (\n <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n <span\n className={clsx(withBaseName(\"badge\"), {\n [withBaseName(\"topRight\")]: children,\n [withBaseName(\"dotBadge\")]: dotBadge,\n })}\n >\n {valueText}\n </span>\n </span>\n );\n});\n"],"names":["makePrefixer","forwardRef","Badge","useWindow","useComponentCssInjection","badgeCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAEtC,MAAM,KAAQ,GAAAC,gBAAA,CAAwC,SAASC,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAM,GAAA,GAAA,EAAK,SAAW,EAAA,QAAA,EAAU,GAAG,IAAA,IAC5C,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GACJ,OAAO,KAAU,KAAA,QAAA,IAAY,QAAQ,GAAM,GAAA,CAAA,EAAG,GAAG,CAAM,CAAA,CAAA,GAAA,KAAA;AAEzD,EAAM,MAAA,QAAA,GAAW,OAAO,KAAU,KAAA,WAAA;AAElC,EACE,uBAAAC,eAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAW,EAAA,GAAG,IAC7D,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACDC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,UACrC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * The number to display on the badge. If `value` is not provided,\n * the badge will render as a dot badge.\n */\n value?: number | string;\n /**\n * If a child is provided the Badge will render top right. By defualt renders inline.\n */\n children?: ReactNode;\n /**\n * The max number to display on the badge.\n */\n max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n { value, max = 999, className, children, ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-badge\",\n css: badgeCss,\n window: targetWindow,\n });\n\n const valueText =\n typeof value === \"number\" && value > max ? `${max}+` : value;\n\n const dotBadge = typeof value === \"undefined\";\n\n return (\n <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {children}\n <span\n className={clsx(withBaseName(\"badge\"), {\n [withBaseName(\"topRight\")]: children,\n [withBaseName(\"dotBadge\")]: dotBadge,\n })}\n >\n {valueText}\n </span>\n </span>\n );\n});\n"],"names":["makePrefixer","forwardRef","Badge","useWindow","useComponentCssInjection","badgeCss","jsxs","clsx","jsx"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAEtC,MAAM,KAAA,GAAQC,gBAAA,CAAwC,SAASC,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAA,GAAM,GAAA,EAAK,SAAA,EAAW,QAAA,EAAU,GAAG,IAAA,IAC5C,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,YAAA;AAAA,IACR,GAAA,EAAKC,OAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAA,GACJ,OAAO,KAAA,KAAU,QAAA,IAAY,QAAQ,GAAA,GAAM,CAAA,EAAG,GAAG,CAAA,CAAA,CAAA,GAAM,KAAA;AAEzD,EAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,WAAA;AAElC,EAAA,uBACEC,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC7D,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACDC,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWD,SAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,UACrC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to root component */\n.saltBanner {\n --banner-background: var(--salt-container-primary-background);\n\n background: var(--saltBanner-background, var(--banner-background));\n border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--salt-spacing-75);\n padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\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}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n --banner-background: var(--salt-status-success-background);\n}\n";
3
+ var css_248z = "/* Styles applied to root component */\n.saltBanner {\n --banner-background: var(--salt-container-primary-background);\n\n background: var(--saltBanner-background, var(--banner-background));\n border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n box-sizing: border-box;\n display: inline-flex;\n gap: var(--salt-spacing-75);\n padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\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 color: var(--salt-content-primary-foreground);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n --banner-background: var(--salt-status-success-background);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Banner.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n aria-live=\"polite\"\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Banner","useWindow","useComponentCssInjection","bannerCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAQ,GAAG,IAAA,IAChE,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,MAAM,CAAA;AAAA,QACnB,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,WAAU,EAAA,QAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,+BAAgB,EAAA,EAAA,MAAA,EAAgB,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,QACjE;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport bannerCss from \"./Banner.css\";\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Emphasize the styling by applying a background color: defaults to false\n */\n variant?: \"primary\" | \"secondary\";\n /**\n * A string to determine the current state of the Banner\n */\n status?: ValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n { children, className, variant = \"primary\", status = \"info\", ...rest },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner\",\n css: bannerCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n withBaseName(variant),\n className,\n )}\n ref={ref}\n {...rest}\n aria-live=\"polite\"\n >\n <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Banner","useWindow","useComponentCssInjection","bannerCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,GAAU,SAAA,EAAW,MAAA,GAAS,MAAA,EAAQ,GAAG,IAAA,IAChE,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,MAAM,CAAA;AAAA,QACnB,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,QAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,+BAAA,EAAA,EAAgB,MAAA,EAAgB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QACjE;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.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 { makePrefixer } from \"../utils\";\nimport bannerActionsCss from \"./BannerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\ninterface BannerActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerActions\n */\n children: ReactNode;\n}\n\nexport const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(\n function BannerActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-actions\",\n css: bannerActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerActions","useWindow","useComponentCssInjection","bannerActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAAA;AAG3E;;;;"}
1
+ {"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.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 { makePrefixer } from \"../utils\";\nimport bannerActionsCss from \"./BannerActions.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerActions\");\n\ninterface BannerActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerActions\n */\n children: ReactNode;\n}\n\nexport const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(\n function BannerActions(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-actions\",\n css: bannerActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerActions","useWindow","useComponentCssInjection","bannerActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAAA,EAEzE;AACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.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 { makePrefixer } from \"../utils\";\nimport bannerContentCss from \"./BannerContent.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\ninterface BannerContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerContent\n */\n children: ReactNode;\n}\n\nexport const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(\n function BannerContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-content\",\n css: bannerContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerContent","useWindow","useComponentCssInjection","bannerContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA;AAAA;AAG3E;;;;"}
1
+ {"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.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 { makePrefixer } from \"../utils\";\nimport bannerContentCss from \"./BannerContent.css\";\n\nconst withBaseName = makePrefixer(\"saltBannerContent\");\n\ninterface BannerContentProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of BannerContent\n */\n children: ReactNode;\n}\n\nexport const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(\n function BannerContent(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-banner-content\",\n css: bannerContentCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BannerContent","useWindow","useComponentCssInjection","bannerContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAS9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GAAA,EAAU,CAAA;AAAA,EAEzE;AACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\nimport borderItemCss from \"./BorderItem.css\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderItem: BorderItemComponent = forwardRef(function BorderItem<\n T extends ElementType,\n>(props: unknown, ref?: ForwardedRef<unknown>) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const {\n as,\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n } = props as BorderItemProps<T>;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n as={as as ElementType}\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className,\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n});\n"],"names":["makePrefixer","forwardRef","BorderItem","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAmCA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAkC,GAAAC,gBAAA,CAAW,SAASC,WAAAA,CAEjE,OAAgB,GAA6B,EAAA;AAE7C,EAAM,MAAA;AAAA,IACJ,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,GAAG,KAAA;AAAA,IACH,qBAAuB,EAAA;AAAA,GACzB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;;"}
1
+ {"version":3,"file":"BorderItem.js","sources":["../src/border-item/BorderItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n} from \"react\";\nimport { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\nimport borderItemCss from \"./BorderItem.css\";\n\nexport const BORDER_POSITION = [\n \"north\",\n \"west\",\n \"center\",\n \"east\",\n \"south\",\n] as const;\n\nexport type BorderPosition = (typeof BORDER_POSITION)[number];\n\nexport type BorderItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n */\n horizontalAlignment?: GridItemProps<T>[\"horizontalAlignment\"];\n /**\n * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n */\n verticalAlignment?: GridItemProps<T>[\"verticalAlignment\"];\n /**\n * Position in the Border Layout\n */\n position: BorderPosition;\n /**\n * Defines if the item should stick to the edges of its container. Defaults to \"false\"\n */\n sticky?: boolean;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderItem: BorderItemComponent = forwardRef(function BorderItem<\n T extends ElementType,\n>(props: unknown, ref?: ForwardedRef<unknown>) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const {\n as,\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n } = props as BorderItemProps<T>;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-border-item\",\n css: borderItemCss,\n window: targetWindow,\n });\n\n const gridItemStyles = {\n ...style,\n \"--gridItem-gridArea\": position,\n };\n\n return (\n <GridItem\n as={as as ElementType}\n ref={ref}\n className={clsx(\n withBaseName(),\n \"saltGridItem-area\",\n {\n [withBaseName(\"sticky\")]: sticky,\n },\n className,\n )}\n style={gridItemStyles}\n {...rest}\n >\n {children}\n </GridItem>\n );\n});\n"],"names":["makePrefixer","forwardRef","BorderItem","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,eAAA,GAAkB;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AAmCA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAA,GAAkCC,gBAAA,CAAW,SAASC,WAAAA,CAEjE,OAAgB,GAAA,EAA6B;AAE7C,EAAA,MAAM;AAAA,IACJ,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,GAAS,KAAA;AAAA,IACT,KAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,kBAAA;AAAA,IACR,GAAA,EAAKC,YAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,GAAG,KAAA;AAAA,IACH,qBAAA,EAAuB;AAAA,GACzB;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n isValidElement,\n type ReactNode,\n useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n function BorderLayout<T extends ElementType>(\n props: unknown,\n ref?: ForwardedRef<unknown>,\n ) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const { as, children, className, gap, style, ...rest } =\n props as BorderLayoutProps<T>;\n\n const borderAreas = Children.map(\n children,\n (child) => isValidElement(child) && child.props.position,\n ) as BorderPosition[];\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\",\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n as={as as ElementType}\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BorderLayout","Children","isValidElement","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA;AAMjB,MAAM,YAAsC,GAAAC,gBAAA;AAAA,EACjD,SAASC,aACP,CAAA,KAAA,EACA,GACA,EAAA;AAEA,IAAM,MAAA,EAAE,IAAI,QAAU,EAAA,SAAA,EAAW,KAAK,KAAO,EAAA,GAAG,MAC9C,GAAA,KAAA;AAEF,IAAA,MAAM,cAAcC,cAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAAU,KAAAC,oBAAA,CAAe,KAAK,CAAA,IAAK,MAAM,KAAM,CAAA;AAAA,KAClD;AAEA,IAAM,MAAA,UAAA,GAAa,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA;AAE7D,IAAA,MAAM,UAAa,GAAA,CAAA,EAAG,WAAW,CAAA,QAAA,EAAW,YAAY,CAAA,CAAA;AAExD,IAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAS,CAAA,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAQ,CAAA,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,oBAAoB,CAAI,CAAA,EAAA,UAAU,CAAM,GAAA,EAAA,UAAU,MAAM,aAAa,CAAA,CAAA,CAAA;AAE3E,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN;AAAA,WACF;AAAA;AACF;AACF,KACF,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA;AAAA,KAC/B;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,QAChE,OAAS,EAAA,eAAA;AAAA,QACT,KAAK,GAAO,IAAA,CAAA;AAAA,QACZ,KAAO,EAAA,kBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
1
+ {"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Children,\n type ElementType,\n type ForwardedRef,\n type FunctionComponent,\n forwardRef,\n isValidElement,\n type ReactNode,\n useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n makePrefixer,\n type PolymorphicComponentPropWithRef,\n type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n */\n gap?: GridLayoutProps<T>[\"gap\"];\n /**\n * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n */\n columnGap?: GridLayoutProps<T>[\"columnGap\"];\n /**\n * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n */\n rowGap?: GridLayoutProps<T>[\"rowGap\"];\n /**\n * Border item components to be rendered.\n */\n children: ReactNode;\n /**\n * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n */\n margin?: ResponsiveProp<number | string>;\n /**\n * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n */\n padding?: ResponsiveProp<number | string>;\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n function BorderLayout<T extends ElementType>(\n props: unknown,\n ref?: ForwardedRef<unknown>,\n ) {\n // Props need to be typed this way due to polymorphic types not working with required props.\n const { as, children, className, gap, style, ...rest } =\n props as BorderLayoutProps<T>;\n\n const borderAreas = Children.map(\n children,\n (child) => isValidElement(child) && child.props.position,\n ) as BorderPosition[];\n\n const topSection = borderAreas.includes(\"north\")\n ? \"north \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n const midSection = `${leftSection} center ${rightSection}`;\n\n const bottomSection = borderAreas.includes(\"south\")\n ? \"south \".repeat(numberOfColumns)\n : \"none \".repeat(numberOfColumns);\n\n const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n const hasMainSection = borderAreas.includes(\"center\");\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!hasMainSection) {\n console.warn(\n \"No main section has been found. A main section should be provided.\",\n );\n }\n }\n }, [hasMainSection]);\n\n const borderLayoutStyles = {\n ...style,\n \"--gridLayout-gridTemplate\": gridTemplateAreas,\n };\n\n return (\n <GridLayout\n as={as as ElementType}\n className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n columns={numberOfColumns}\n gap={gap || 0}\n style={borderLayoutStyles}\n ref={ref}\n {...rest}\n >\n {children}\n </GridLayout>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","BorderLayout","Children","isValidElement","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAEpD,MAAM,eAAA,GAAkB,CAAA;AAMjB,MAAM,YAAA,GAAsCC,gBAAA;AAAA,EACjD,SAASC,aAAAA,CACP,KAAA,EACA,GAAA,EACA;AAEA,IAAA,MAAM,EAAE,IAAI,QAAA,EAAU,SAAA,EAAW,KAAK,KAAA,EAAO,GAAG,MAAK,GACnD,KAAA;AAEF,IAAA,MAAM,cAAcC,cAAA,CAAS,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAAA,KAAUC,oBAAA,CAAe,KAAK,CAAA,IAAK,MAAM,KAAA,CAAM;AAAA,KAClD;AAEA,IAAA,MAAM,UAAA,GAAa,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAA,CAAS,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAA,CAAQ,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,WAAA,GAAc,WAAA,CAAY,QAAA,CAAS,MAAM,IAAI,MAAA,GAAS,QAAA;AAE5D,IAAA,MAAM,YAAA,GAAe,WAAA,CAAY,QAAA,CAAS,MAAM,IAAI,MAAA,GAAS,QAAA;AAE7D,IAAA,MAAM,UAAA,GAAa,CAAA,EAAG,WAAW,CAAA,QAAA,EAAW,YAAY,CAAA,CAAA;AAExD,IAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAA,CAAS,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAA,CAAQ,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,oBAAoB,CAAA,CAAA,EAAI,UAAU,CAAA,GAAA,EAAM,UAAU,MAAM,aAAa,CAAA,CAAA,CAAA;AAE3E,IAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,QAAA,CAAS,QAAQ,CAAA;AAEpD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,QAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,UAAA,OAAA,CAAQ,IAAA;AAAA,YACN;AAAA,WACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,MAAM,kBAAA,GAAqB;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAAA,EAA6B;AAAA,KAC/B;AAEA,IAAA,uBACEC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,WAAW,qBAAqB,CAAA;AAAA,QAChE,OAAA,EAAS,eAAA;AAAA,QACT,KAAK,GAAA,IAAO,CAAA;AAAA,QACZ,KAAA,EAAO,kBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useMemo, useState } from \"react\";\nimport { createContext } from \"../utils/createContext\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport type { Breakpoints } from \"./Breakpoints\";\n\ntype Breakpoint = keyof Breakpoints;\n\ninterface BreakpointContext {\n matchedBreakpoints: Breakpoint[];\n}\n\nconst Context = createContext<BreakpointContext>(\"BreakpointContext\", {\n matchedBreakpoints: [],\n});\n\ninterface BreakpointProviderProps {\n children?: ReactNode;\n matchedBreakpoints: Breakpoint[];\n}\n\nexport function BreakpointProvider(props: BreakpointProviderProps) {\n const { children, matchedBreakpoints } = props;\n\n return (\n <Context.Provider value={{ matchedBreakpoints }}>\n {children}\n </Context.Provider>\n );\n}\n\nexport function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[] {\n const entries = useMemo(\n () => Object.entries(breakpoints).sort(([, a], [, b]) => b - a),\n [breakpoints],\n );\n\n const supportsMatchMedia =\n typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n const [matchedBreakpoints, setMatchedBreakpoints] = useState<\n Partial<Record<Breakpoint, boolean>>\n >(Object.fromEntries(entries.map(([bp]) => [bp as Breakpoint, false])));\n\n useIsomorphicLayoutEffect(() => {\n if (!supportsMatchMedia) {\n return;\n }\n\n const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\n\n const matchers = queries.map((query, index) => {\n const mq = window.matchMedia(query);\n const bp = entries[index][0] as Breakpoint;\n\n return {\n mq,\n handler: () => {\n setMatchedBreakpoints((prev) => {\n return {\n ...prev,\n [bp]: mq.matches,\n };\n });\n },\n };\n });\n\n for (const { mq, handler } of matchers) {\n handler();\n mq.addEventListener(\"change\", handler);\n }\n\n return () => {\n for (const { mq, handler } of matchers) {\n mq.removeEventListener(\"change\", handler);\n }\n };\n }, [supportsMatchMedia, entries]);\n\n return Object.keys(matchedBreakpoints).filter(\n (bp) => matchedBreakpoints[bp as Breakpoint],\n ) as Breakpoint[];\n}\n\nexport function useBreakpoint(): BreakpointContext & {\n breakpoint: Breakpoint | null;\n} {\n const { matchedBreakpoints } = useContext(Context);\n\n return {\n matchedBreakpoints,\n breakpoint: matchedBreakpoints[0] ?? null,\n };\n}\n"],"names":["createContext","jsx","useMemo","useState","useIsomorphicLayoutEffect","useContext"],"mappings":";;;;;;;AAWA,MAAM,OAAA,GAAUA,4BAAiC,mBAAqB,EAAA;AAAA,EACpE,oBAAoB;AACtB,CAAC,CAAA;AAOM,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,KAAA;AAEzC,EACE,uBAAAC,cAAA,CAAC,QAAQ,QAAR,EAAA,EAAiB,OAAO,EAAE,kBAAA,IACxB,QACH,EAAA,CAAA;AAEJ;AAEO,SAAS,sBAAsB,WAAwC,EAAA;AAC5E,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,MAAM,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAA,CAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA;AAAA,IAC9D,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,qBACJ,OAAO,MAAA,KAAW,WAAe,IAAA,OAAO,OAAO,UAAe,KAAA,UAAA;AAEhE,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,IAAIC,cAElD,CAAA,MAAA,CAAO,YAAY,OAAQ,CAAA,GAAA,CAAI,CAAC,CAAC,EAAE,CAAM,KAAA,CAAC,IAAkB,KAAK,CAAC,CAAC,CAAC,CAAA;AAEtE,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,kBAAoB,EAAA;AACvB,MAAA;AAAA;AAGF,IAAM,MAAA,OAAA,GAAU,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAG,KAAK,CAAA,KAAM,CAAe,YAAA,EAAA,KAAK,CAAK,GAAA,CAAA,CAAA;AAEpE,IAAA,MAAM,QAAW,GAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC7C,MAAM,MAAA,EAAA,GAAK,MAAO,CAAA,UAAA,CAAW,KAAK,CAAA;AAClC,MAAA,MAAM,EAAK,GAAA,OAAA,CAAQ,KAAK,CAAA,CAAE,CAAC,CAAA;AAE3B,MAAO,OAAA;AAAA,QACL,EAAA;AAAA,QACA,SAAS,MAAM;AACb,UAAA,qBAAA,CAAsB,CAAC,IAAS,KAAA;AAC9B,YAAO,OAAA;AAAA,cACL,GAAG,IAAA;AAAA,cACH,CAAC,EAAE,GAAG,EAAG,CAAA;AAAA,aACX;AAAA,WACD,CAAA;AAAA;AACH,OACF;AAAA,KACD,CAAA;AAED,IAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAQ,EAAA,IAAK,QAAU,EAAA;AACtC,MAAQ,OAAA,EAAA;AACR,MAAG,EAAA,CAAA,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAAA;AAGvC,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAQ,EAAA,IAAK,QAAU,EAAA;AACtC,QAAG,EAAA,CAAA,mBAAA,CAAoB,UAAU,OAAO,CAAA;AAAA;AAC1C,KACF;AAAA,GACC,EAAA,CAAC,kBAAoB,EAAA,OAAO,CAAC,CAAA;AAEhC,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,kBAAkB,CAAE,CAAA,MAAA;AAAA,IACrC,CAAC,EAAO,KAAA,kBAAA,CAAmB,EAAgB;AAAA,GAC7C;AACF;AAEO,SAAS,aAEd,GAAA;AACA,EAAA,MAAM,EAAE,kBAAA,EAAuB,GAAAC,gBAAA,CAAW,OAAO,CAAA;AAEjD,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,UAAA,EAAY,kBAAmB,CAAA,CAAC,CAAK,IAAA;AAAA,GACvC;AACF;;;;;;"}
1
+ {"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useMemo, useState } from \"react\";\nimport { createContext } from \"../utils/createContext\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport type { Breakpoints } from \"./Breakpoints\";\n\ntype Breakpoint = keyof Breakpoints;\n\ninterface BreakpointContext {\n matchedBreakpoints: Breakpoint[];\n}\n\nconst Context = createContext<BreakpointContext>(\"BreakpointContext\", {\n matchedBreakpoints: [],\n});\n\ninterface BreakpointProviderProps {\n children?: ReactNode;\n matchedBreakpoints: Breakpoint[];\n}\n\nexport function BreakpointProvider(props: BreakpointProviderProps) {\n const { children, matchedBreakpoints } = props;\n\n return (\n <Context.Provider value={{ matchedBreakpoints }}>\n {children}\n </Context.Provider>\n );\n}\n\nexport function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[] {\n const entries = useMemo(\n () => Object.entries(breakpoints).sort(([, a], [, b]) => b - a),\n [breakpoints],\n );\n\n const supportsMatchMedia =\n typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n const [matchedBreakpoints, setMatchedBreakpoints] = useState<\n Partial<Record<Breakpoint, boolean>>\n >(Object.fromEntries(entries.map(([bp]) => [bp as Breakpoint, false])));\n\n useIsomorphicLayoutEffect(() => {\n if (!supportsMatchMedia) {\n return;\n }\n\n const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\n\n const matchers = queries.map((query, index) => {\n const mq = window.matchMedia(query);\n const bp = entries[index][0] as Breakpoint;\n\n return {\n mq,\n handler: () => {\n setMatchedBreakpoints((prev) => {\n return {\n ...prev,\n [bp]: mq.matches,\n };\n });\n },\n };\n });\n\n for (const { mq, handler } of matchers) {\n handler();\n mq.addEventListener(\"change\", handler);\n }\n\n return () => {\n for (const { mq, handler } of matchers) {\n mq.removeEventListener(\"change\", handler);\n }\n };\n }, [supportsMatchMedia, entries]);\n\n return Object.keys(matchedBreakpoints).filter(\n (bp) => matchedBreakpoints[bp as Breakpoint],\n ) as Breakpoint[];\n}\n\nexport function useBreakpoint(): BreakpointContext & {\n breakpoint: Breakpoint | null;\n} {\n const { matchedBreakpoints } = useContext(Context);\n\n return {\n matchedBreakpoints,\n breakpoint: matchedBreakpoints[0] ?? null,\n };\n}\n"],"names":["createContext","jsx","useMemo","useState","useIsomorphicLayoutEffect","useContext"],"mappings":";;;;;;;AAWA,MAAM,OAAA,GAAUA,4BAAiC,mBAAA,EAAqB;AAAA,EACpE,oBAAoB;AACtB,CAAC,CAAA;AAOM,SAAS,mBAAmB,KAAA,EAAgC;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,kBAAA,EAAmB,GAAI,KAAA;AAEzC,EAAA,uBACEC,cAAA,CAAC,QAAQ,QAAA,EAAR,EAAiB,OAAO,EAAE,kBAAA,IACxB,QAAA,EACH,CAAA;AAEJ;AAEO,SAAS,sBAAsB,WAAA,EAAwC;AAC5E,EAAA,MAAM,OAAA,GAAUC,aAAA;AAAA,IACd,MAAM,MAAA,CAAO,OAAA,CAAQ,WAAW,CAAA,CAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA;AAAA,IAC9D,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,qBACJ,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,OAAO,UAAA,KAAe,UAAA;AAEhE,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,IAAIC,cAAA,CAElD,MAAA,CAAO,YAAY,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAC,EAAE,CAAA,KAAM,CAAC,IAAkB,KAAK,CAAC,CAAC,CAAC,CAAA;AAEtE,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,kBAAA,EAAoB;AACvB,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,GAAA,CAAI,CAAC,GAAG,KAAK,CAAA,KAAM,CAAA,YAAA,EAAe,KAAK,CAAA,GAAA,CAAK,CAAA;AAEpE,IAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,GAAA,CAAI,CAAC,OAAO,KAAA,KAAU;AAC7C,MAAA,MAAM,EAAA,GAAK,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAClC,MAAA,MAAM,EAAA,GAAK,OAAA,CAAQ,KAAK,CAAA,CAAE,CAAC,CAAA;AAE3B,MAAA,OAAO;AAAA,QACL,EAAA;AAAA,QACA,SAAS,MAAM;AACb,UAAA,qBAAA,CAAsB,CAAC,IAAA,KAAS;AAC9B,YAAA,OAAO;AAAA,cACL,GAAG,IAAA;AAAA,cACH,CAAC,EAAE,GAAG,EAAA,CAAG;AAAA,aACX;AAAA,UACF,CAAC,CAAA;AAAA,QACH;AAAA,OACF;AAAA,IACF,CAAC,CAAA;AAED,IAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAA,EAAQ,IAAK,QAAA,EAAU;AACtC,MAAA,OAAA,EAAQ;AACR,MAAA,EAAA,CAAG,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAAA,IACvC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAA,EAAQ,IAAK,QAAA,EAAU;AACtC,QAAA,EAAA,CAAG,mBAAA,CAAoB,UAAU,OAAO,CAAA;AAAA,MAC1C;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,kBAAA,EAAoB,OAAO,CAAC,CAAA;AAEhC,EAAA,OAAO,MAAA,CAAO,IAAA,CAAK,kBAAkB,CAAA,CAAE,MAAA;AAAA,IACrC,CAAC,EAAA,KAAO,kBAAA,CAAmB,EAAgB;AAAA,GAC7C;AACF;AAEO,SAAS,aAAA,GAEd;AACA,EAAA,MAAM,EAAE,kBAAA,EAAmB,GAAIC,gBAAA,CAAW,OAAO,CAAA;AAEjD,EAAA,OAAO;AAAA,IACL,kBAAA;AAAA,IACA,UAAA,EAAY,kBAAA,CAAmB,CAAC,CAAA,IAAK;AAAA,GACvC;AACF;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Breakpoints.js","sources":["../src/breakpoints/Breakpoints.tsx"],"sourcesContent":["export interface Breakpoints {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n xs: 0,\n sm: 600,\n md: 960,\n lg: 1280,\n xl: 1920,\n};\n"],"names":[],"mappings":";;AAQO,MAAM,mBAAmC,GAAA;AAAA,EAC9C,EAAI,EAAA,CAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA,EACJ,EAAI,EAAA,GAAA;AAAA,EACJ,EAAI,EAAA,IAAA;AAAA,EACJ,EAAI,EAAA;AACN;;;;"}
1
+ {"version":3,"file":"Breakpoints.js","sources":["../src/breakpoints/Breakpoints.tsx"],"sourcesContent":["export interface Breakpoints {\n xs: number;\n sm: number;\n md: number;\n lg: number;\n xl: number;\n}\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n xs: 0,\n sm: 600,\n md: 960,\n lg: 1280,\n xl: 1920,\n};\n"],"names":[],"mappings":";;AAQO,MAAM,mBAAA,GAAmC;AAAA,EAC9C,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI;AACN;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.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 ReactElement,\n} from \"react\";\nimport { Spinner } from \"../spinner\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport const ButtonAppearanceValues = [\n \"solid\",\n \"bordered\",\n \"transparent\",\n] as const;\nexport const ButtonSentimentValues = [\n \"accented\",\n \"neutral\",\n \"positive\",\n \"negative\",\n \"caution\",\n] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\nexport type ButtonAppearance = (typeof ButtonAppearanceValues)[number];\nexport type ButtonSentiment = (typeof ButtonSentimentValues)[number];\n\nexport interface ButtonProps 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 * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n *\n * @deprecated Use `appearance` and `sentiment` instead.\n *\n * | variant | appearance | sentiment |\n * | ----------- | ------------- | ----------- |\n * | `cta` | `solid` | `accented` |\n * | `primary` | `solid` | `neutral` |\n * | `secondary` | `transparent` | `neutral` |\n */\n variant?: ButtonVariant;\n /**\n * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n * 'solid' is the default value.\n *\n * @since 1.36.0.\n */\n appearance?: ButtonAppearance;\n /**\n * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n * 'neutral' is the default value.\n *\n * @since 1.36.0.\n */\n sentiment?: ButtonSentiment;\n\n /**\n * If `true`, the button will be in a loading state. This allows a spinner to be nested inside the button.\n *\n * @since 1.38.0.\n */\n loading?: boolean;\n\n /**\n * Text to be announced by screen readers, intended to be used in conjunction with the `loading` prop.\n *\n * @since 1.38.0.\n */\n loadingAnnouncement?: string;\n}\n\nfunction variantToAppearanceAndColor(\n variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n switch (variant) {\n case \"primary\":\n return { appearance: \"solid\", sentiment: \"neutral\" };\n case \"secondary\":\n return { appearance: \"transparent\", sentiment: \"neutral\" };\n case \"cta\":\n return { appearance: \"solid\", sentiment: \"accented\" };\n }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n loading,\n loadingAnnouncement,\n appearance: appearanceProp,\n sentiment: sentimentProp,\n type: typeProp = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?,\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n const mapped = variantToAppearanceAndColor(variant);\n const appearance: ButtonAppearance =\n appearanceProp ?? mapped?.appearance ?? \"solid\";\n\n const sentiment: ButtonSentiment =\n sentimentProp ?? mapped?.sentiment ?? \"neutral\";\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n /* When the button is in a loading state, we want to prevent form submission. */\n const type = typeProp === \"submit\" && loading ? \"button\" : typeProp;\n\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"loading\")]: loading,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n [withBaseName(appearance)]: appearance,\n [withBaseName(sentiment)]: sentiment,\n },\n className,\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {loading && (\n <div className={withBaseName(\"spinner\")} aria-hidden>\n <Spinner size=\"small\" aria-hidden disableAnnouncer />\n </div>\n )}\n {typeof loadingAnnouncement === \"string\" && (\n <span role=\"status\" className={withBaseName(\"sr-only\")}>\n {loadingAnnouncement}\n </span>\n )}\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsxs","clsx","jsx","Spinner"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.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 ReactElement,\n} from \"react\";\nimport { Spinner } from \"../spinner\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport const ButtonAppearanceValues = [\n \"solid\",\n \"bordered\",\n \"transparent\",\n] as const;\nexport const ButtonSentimentValues = [\n \"accented\",\n \"neutral\",\n \"positive\",\n \"negative\",\n \"caution\",\n] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\nexport type ButtonAppearance = (typeof ButtonAppearanceValues)[number];\nexport type ButtonSentiment = (typeof ButtonSentimentValues)[number];\n\nexport interface ButtonProps 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 * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n * 'primary' is the default value.\n *\n * @deprecated Use `appearance` and `sentiment` instead.\n *\n * | variant | appearance | sentiment |\n * | ----------- | ------------- | ----------- |\n * | `cta` | `solid` | `accented` |\n * | `primary` | `solid` | `neutral` |\n * | `secondary` | `transparent` | `neutral` |\n */\n variant?: ButtonVariant;\n /**\n * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n * 'solid' is the default value.\n *\n * @since 1.36.0.\n */\n appearance?: ButtonAppearance;\n /**\n * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n * 'neutral' is the default value.\n *\n * @since 1.36.0.\n */\n sentiment?: ButtonSentiment;\n\n /**\n * If `true`, the button will be in a loading state. This allows a spinner to be nested inside the button.\n *\n * @since 1.38.0.\n */\n loading?: boolean;\n\n /**\n * Text to be announced by screen readers, intended to be used in conjunction with the `loading` prop.\n *\n * @since 1.38.0.\n */\n loadingAnnouncement?: string;\n}\n\nfunction variantToAppearanceAndColor(\n variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n switch (variant) {\n case \"primary\":\n return { appearance: \"solid\", sentiment: \"neutral\" };\n case \"secondary\":\n return { appearance: \"transparent\", sentiment: \"neutral\" };\n case \"cta\":\n return { appearance: \"solid\", sentiment: \"accented\" };\n }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n {\n children,\n className,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n loading,\n loadingAnnouncement,\n appearance: appearanceProp,\n sentiment: sentimentProp,\n type: typeProp = \"button\",\n variant = \"primary\",\n ...restProps\n },\n ref?,\n ): ReactElement<ButtonProps> {\n const { active, buttonProps } = useButton({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onBlur,\n onClick,\n });\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-button\",\n css: buttonCss,\n window: targetWindow,\n });\n\n const mapped = variantToAppearanceAndColor(variant);\n const appearance: ButtonAppearance =\n appearanceProp ?? mapped?.appearance ?? \"solid\";\n\n const sentiment: ButtonSentiment =\n sentimentProp ?? mapped?.sentiment ?? \"neutral\";\n\n // we do not want to spread tab index in this case because the button element\n // does not require tabindex=\"0\" attribute\n const { tabIndex, ...restButtonProps } = buttonProps;\n\n /* When the button is in a loading state, we want to prevent form submission. */\n const type = typeProp === \"submit\" && loading ? \"button\" : typeProp;\n\n return (\n <button\n {...restButtonProps}\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"loading\")]: loading,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"active\")]: active,\n [withBaseName(appearance)]: appearance,\n [withBaseName(sentiment)]: sentiment,\n },\n className,\n )}\n {...restProps}\n ref={ref}\n type={type}\n >\n {loading && (\n <div className={withBaseName(\"spinner\")} aria-hidden>\n <Spinner size=\"small\" aria-hidden disableAnnouncer />\n </div>\n )}\n {typeof loadingAnnouncement === \"string\" && (\n <span role=\"status\" className={withBaseName(\"sr-only\")}>\n {loadingAnnouncement}\n </span>\n )}\n {children}\n </button>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsxs","clsx","jsx","Spinner"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useButton.js","sources":["../src/button/useButton.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface ButtonHookProps<T extends Element> {\n loading?: boolean;\n disabled?: boolean;\n focusableWhenDisabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface ButtonHookResult<T extends Element> {\n active: boolean;\n buttonProps: {\n \"aria-disabled\"?: boolean;\n \"data-loading\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useButton = <T extends Element>({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: ButtonHookProps<T>): ButtonHookResult<T> => {\n const [keyIsDown, setKeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: active is needed to remove the active styling on mouse up\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setKeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setKeyIsDown(event.key);\n setActive(true);\n }\n\n onKeyDown?.(event);\n };\n\n const buttonProps = {\n \"aria-disabled\": disabled && focusableWhenDisabled ? true : undefined,\n \"data-loading\": loading,\n disabled: disabled && !focusableWhenDisabled,\n tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !loading && !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n buttonProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAgCO,MAAM,YAAY,CAAoB;AAAA,EAC3C,OAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA;AAGd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAI,IAAA,SAAA,KAAc,KAAS,IAAA,SAAA,KAAc,KAAO,EAAA;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,OACC,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAGhB,IAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,eAAA,EAAiB,QAAY,IAAA,qBAAA,GAAwB,IAAO,GAAA,MAAA;AAAA,IAC5D,cAAgB,EAAA,OAAA;AAAA,IAChB,QAAA,EAAU,YAAY,CAAC,qBAAA;AAAA,IACvB,QAAU,EAAA,QAAA,IAAY,CAAC,qBAAA,GAAwB,EAAK,GAAA,CAAA;AAAA,IACpD,MAAQ,EAAA,UAAA;AAAA,IACR,OAAS,EAAA,CAAC,OAAW,IAAA,CAAC,WAAW,WAAc,GAAA,MAAA;AAAA,IAC/C,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA;AAAA,GACX;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
1
+ {"version":3,"file":"useButton.js","sources":["../src/button/useButton.ts"],"sourcesContent":["import {\n type FocusEvent,\n type KeyboardEvent,\n type MouseEvent,\n useEffect,\n useState,\n} from \"react\";\n\nexport interface ButtonHookProps<T extends Element> {\n loading?: boolean;\n disabled?: boolean;\n focusableWhenDisabled?: boolean;\n onKeyUp?: (event: KeyboardEvent<T>) => void;\n onKeyDown?: (event: KeyboardEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface ButtonHookResult<T extends Element> {\n active: boolean;\n buttonProps: {\n \"aria-disabled\"?: boolean;\n \"data-loading\"?: boolean;\n disabled?: boolean;\n tabIndex: number;\n onBlur: (event: FocusEvent<T>) => void;\n onClick?: (event: MouseEvent<T>) => void;\n onKeyDown: (event: KeyboardEvent<T>) => void;\n onKeyUp: (event: KeyboardEvent<T>) => void;\n };\n}\n\nexport const useButton = <T extends Element>({\n loading,\n disabled,\n focusableWhenDisabled,\n onKeyUp,\n onKeyDown,\n onClick,\n onBlur,\n}: ButtonHookProps<T>): ButtonHookResult<T> => {\n const [keyIsDown, setKeyIsDown] = useState(\"\");\n const [active, setActive] = useState(false);\n\n const enter = \"Enter\";\n const space = \" \";\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: active is needed to remove the active styling on mouse up\n useEffect(() => {\n const t = setTimeout(() => {\n // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button\n // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n if (keyIsDown !== enter && keyIsDown !== space) {\n setActive(false);\n }\n }, 0);\n\n return () => {\n clearTimeout(t);\n };\n }, [active, keyIsDown]);\n\n const handleKeyUp = (event: KeyboardEvent<T>) => {\n setKeyIsDown(\"\");\n setActive(false);\n onKeyUp?.(event);\n };\n\n const handleClick = (event: MouseEvent<T>) => {\n setActive(true);\n onClick?.(event);\n };\n\n const handleBlur = (event: FocusEvent<T>) => {\n setActive(false);\n onBlur?.(event);\n };\n\n const handleKeyDown = (event: KeyboardEvent<T>) => {\n if (event.key === enter || event.key === space) {\n setKeyIsDown(event.key);\n setActive(true);\n }\n\n onKeyDown?.(event);\n };\n\n const buttonProps = {\n \"aria-disabled\": disabled && focusableWhenDisabled ? true : undefined,\n \"data-loading\": loading,\n disabled: disabled && !focusableWhenDisabled,\n tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n onBlur: handleBlur,\n onClick: !loading && !disabled ? handleClick : undefined,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n };\n\n return {\n active,\n buttonProps,\n };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAgCO,MAAM,YAAY,CAAoB;AAAA,EAC3C,OAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA+C;AAC7C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAA,GAAQ,OAAA;AACd,EAAA,MAAM,KAAA,GAAQ,GAAA;AAGd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAA,IAAI,SAAA,KAAc,KAAA,IAAS,SAAA,KAAc,KAAA,EAAO;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MACjB;AAAA,IACF,GAAG,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,SAAS,CAAC,CAAA;AAEtB,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyB;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAyB;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA4B;AACjD,IAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,KAAA,IAAS,KAAA,CAAM,QAAQ,KAAA,EAAO;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA,IAChB;AAEA,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,eAAA,EAAiB,QAAA,IAAY,qBAAA,GAAwB,IAAA,GAAO,MAAA;AAAA,IAC5D,cAAA,EAAgB,OAAA;AAAA,IAChB,QAAA,EAAU,YAAY,CAAC,qBAAA;AAAA,IACvB,QAAA,EAAU,QAAA,IAAY,CAAC,qBAAA,GAAwB,EAAA,GAAK,CAAA;AAAA,IACpD,MAAA,EAAQ,UAAA;AAAA,IACR,OAAA,EAAS,CAAC,OAAA,IAAW,CAAC,WAAW,WAAA,GAAc,MAAA;AAAA,IAC/C,SAAA,EAAW,aAAA;AAAA,IACX,OAAA,EAAS;AAAA,GACX;AAEA,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the card will have hover styling.\n */\n hoverable?: boolean;\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n * on the page.\n */\n interactable?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n function Card(props, ref) {\n const {\n accent,\n children,\n className,\n disabled,\n interactable,\n hoverable,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-card\",\n css: cardCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n [withBaseName(\"hoverable\")]: hoverable,\n /* **Deprecated:** InteractableCard should be used instead for these features */\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"interactable\")]: interactable,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AA6BrC,MAAM,IAAO,GAAAC,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,GAAK,EAAA;AACxB,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACV,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,MAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAS,MAAA,EAAAC,qBAAA,CAAW,UAAU,EAAE,CAAC,CAAE,CAAA,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
1
+ {"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * If provided an accent is shown in the specified position.\n */\n accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, the card will be disabled.\n */\n disabled?: boolean;\n /**\n * If `true` the card will have hover styling.\n */\n hoverable?: boolean;\n /**\n * **Deprecated:** Use the InteractableCard component instead\n *\n * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n * on the page.\n */\n interactable?: boolean;\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n function Card(props, ref) {\n const {\n accent,\n children,\n className,\n disabled,\n interactable,\n hoverable,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-card\",\n css: cardCss,\n window: targetWindow,\n });\n\n return (\n <div\n className={clsx(\n withBaseName(),\n withBaseName(variant),\n {\n [withBaseName(\"accent\")]: accent,\n [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n [withBaseName(\"hoverable\")]: hoverable,\n /* **Deprecated:** InteractableCard should be used instead for these features */\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"interactable\")]: interactable,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AA6BrC,MAAM,IAAA,GAAOC,gBAAA;AAAA,EAClB,SAASC,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,MAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAA,MAAA,EAASC,qBAAA,CAAW,UAAU,EAAE,CAAC,CAAA,CAAE,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: inline-flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-spacing-fixed-100);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
3
+ var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n display: inline-flex;\n width: fit-content;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-cursor-hover);\n\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n color: var(--salt-content-primary-foreground);\n cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-offset: var(--salt-spacing-fixed-100);\n outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-error-foreground-decorative);\n border-color: var(--salt-status-error-borderColor);\n color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n outline-color: var(--salt-status-warning-foreground-decorative);\n border-color: var(--salt-status-warning-borderColor);\n color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n cursor: inherit;\n opacity: 0;\n padding: 0;\n position: absolute;\n z-index: var(--salt-zIndex-default);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Checkbox.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Used to access the hidden `<input>` element.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n inputRef: inputRefProp,\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkedProp ??\n (checkboxGroup?.checkedValues && value\n ? checkboxGroup.checkedValues.includes(value)\n : checkedProp);\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly =\n checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? (checkboxGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp)\n : undefined;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n checkboxGroup?.onChange?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current != null) {\n inputRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n ref={handleInputRef}\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","useForkRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEventHandler,\n type FocusEventHandler,\n forwardRef,\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n makePrefixer,\n useControlled,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport checkboxCss from \"./Checkbox.css\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n extends Omit<\n InputHTMLAttributes<HTMLLabelElement>,\n \"onChange\" | \"onBlur\" | \"onFocus\"\n > {\n /**\n * If `true`, the checkbox will be checked.\n */\n checked?: boolean;\n /**\n * Whether the checkbox component is checked by default\n * This will be disregarded if checked is already set.\n */\n defaultChecked?: boolean;\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled?: boolean;\n /**\n * **Deprecated**: Use validationStatus instead\n * If `true`, the checkbox will be in the error state.\n */\n error?: boolean;\n /**\n * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n */\n indeterminate?: boolean;\n /**\n * Properties applied to the input element.\n */\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n /**\n * Used to access the hidden `<input>` element.\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * The label to be shown next to the checkbox.\n */\n label?: ReactNode;\n /**\n * The name applied to the input.\n */\n name?: string;\n /**\n * Callback when checkbox loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Callback when checked state is changed.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Callback when checkbox gains focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * The value of the checkbox.\n */\n value?: string;\n /**\n * Validation status, one of \"warning\" | \"error\" | \"success\"\n *\n * Checkbox has styling variants for \"error\" and \"warning\".\n * No visual styling will be applied on \"success\" variant.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n function Checkbox(\n {\n checked: checkedProp,\n className,\n defaultChecked,\n disabled: disabledProp,\n error,\n indeterminate,\n inputProps = {},\n inputRef: inputRefProp,\n label,\n name,\n onBlur,\n onChange,\n onFocus,\n value,\n validationStatus: validationStatusProp,\n readOnly: readOnlyProp,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox\",\n css: checkboxCss,\n window: targetWindow,\n });\n const checkboxGroup = useCheckboxGroup();\n\n const {\n \"aria-describedby\": inputDescribedBy,\n \"aria-labelledby\": inputLabelledBy,\n className: inputClassName,\n onChange: inputOnChange,\n ...restInputProps\n } = inputProps;\n\n const checkboxGroupChecked =\n checkedProp ??\n (checkboxGroup?.checkedValues && value\n ? checkboxGroup.checkedValues.includes(value)\n : checkedProp);\n\n const [checked, setChecked] = useControlled({\n controlled: checkboxGroupChecked,\n default: Boolean(defaultChecked),\n name: \"Checkbox\",\n state: \"checked\",\n });\n\n const {\n a11yProps: formFieldA11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled =\n checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n const readOnly =\n checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n const validationStatus = !disabled\n ? (checkboxGroup?.validationStatus ??\n formFieldValidationStatus ??\n validationStatusProp)\n : undefined;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const handleInputRef = useForkRef(inputRefProp, inputRef);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n // Workaround for https://github.com/facebook/react/issues/9023\n if (event.nativeEvent.defaultPrevented || readOnly) {\n return;\n }\n\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event);\n inputOnChange?.(event);\n checkboxGroup?.onChange?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (inputRef.current != null) {\n inputRef.current.indeterminate = indeterminate ?? false;\n }\n }, [indeterminate]);\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"error\")]: error /* **Deprecated** */,\n [withBaseName(validationStatus ?? \"\")]: validationStatus,\n },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <input\n aria-readonly={readOnly || undefined}\n aria-describedby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-describedby\"]\n : undefined,\n inputDescribedBy,\n )}\n aria-labelledby={clsx(\n checkboxGroup === undefined\n ? formFieldA11yProps?.[\"aria-labelledby\"]\n : undefined,\n inputLabelledBy,\n )}\n name={name}\n value={value}\n checked={checked}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n data-indeterminate={indeterminate}\n defaultChecked={defaultChecked}\n disabled={disabled}\n readOnly={readOnly}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"checkbox\"\n ref={handleInputRef}\n {...restInputProps}\n />\n <CheckboxIcon\n checked={checked}\n disabled={disabled}\n readOnly={readOnly}\n indeterminate={indeterminate}\n validationStatus={validationStatus}\n error={error}\n />\n {label}\n </label>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","useForkRef","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\n\nexport interface CheckboxGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * The current checked options.\n */\n checkedValues?: string[];\n /**\n * The default selected options for un-controlled component.\n */\n defaultCheckedValues?: string[];\n /**\n * Display group of elements in a compact row.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the Checkbox group\n */\n disabled?: boolean;\n /**\n * The name used to reference the value of the control.\n */\n name?: string;\n /**\n * Callback fired when a checkbox is clicked.\n * `event.target.value` returns the value of the checkbox that was clicked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n HTMLFieldSetElement,\n CheckboxGroupProps\n>(function CheckboxGroup(\n {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n checkedValues: checkedValuesProp,\n defaultCheckedValues = [],\n children,\n className,\n disabled: disabledProp,\n direction = \"vertical\",\n name,\n onChange,\n readOnly: readOnlyProp,\n wrap,\n validationStatus: validationStatusProp,\n ...other\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-group\",\n css: checkboxGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [checkedValues, setCheckedValues] = useControlled({\n controlled: checkedValuesProp,\n default: defaultCheckedValues,\n name: \"CheckboxGroup\",\n state: \"checkedValues\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const name = event.target.value;\n setCheckedValues((oldValues: string[] = []) => {\n const isSelected = oldValues.includes(name);\n\n return isSelected\n ? oldValues.filter((value) => value !== name)\n : oldValues.concat(name);\n });\n\n onChange?.(event);\n };\n\n return (\n <fieldset\n aria-labelledby={\n clsx(a11yProps?.[\"aria-labelledby\"], ariaLabelledBy) || undefined\n }\n aria-describedby={\n clsx(a11yProps?.[\"aria-describedby\"], ariaDescribedBy) || undefined\n }\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className,\n )}\n ref={ref}\n {...other}\n >\n <CheckboxGroupContext.Provider\n value={{\n disabled,\n name,\n onChange: handleChange,\n checkedValues,\n readOnly,\n validationStatus,\n }}\n >\n {children}\n </CheckboxGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["makePrefixer","forwardRef","CheckboxGroup","useWindow","useComponentCssInjection","checkboxGroupCss","useFormFieldProps","useControlled","name","jsx","clsx","CheckboxGroupContext"],"mappings":";;;;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAExC,MAAA,aAAA,GAAgBC,gBAG3B,CAAA,SAASC,cACT,CAAA;AAAA,EACE,iBAAmB,EAAA,cAAA;AAAA,EACnB,kBAAoB,EAAA,eAAA;AAAA,EACpB,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EAClB,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA;AAAA,MAChBC,mCAAkB,EAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,YAAA;AACtC,EAAA,MAAM,WAAW,iBAAqB,IAAA,YAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,oBAAA;AAEtD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA;AAC1B,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA;AAAA,KAC1B,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,GACb;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,iBACE,EAAAC,SAAA,CAAK,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,iBAAA,CAAA,EAAoB,cAAc,CAAK,IAAA,MAAA;AAAA,MAE1D,kBACE,EAAAA,SAAA,CAAK,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA,EAAqB,eAAe,CAAK,IAAA,MAAA;AAAA,MAE5D,SAAW,EAAAA,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB;AAAA,UACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,CAAC;AAAA,SAC7B;AAAA,QACA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA;AAAA,QAACE,yCAAqB,CAAA,QAAA;AAAA,QAArB;AAAA,UACC,KAAO,EAAA;AAAA,YACL,QAAA;AAAA,YACA,IAAA;AAAA,YACA,QAAU,EAAA,YAAA;AAAA,YACV,aAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ChangeEventHandler,\n type ComponentPropsWithoutRef,\n forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\n\nexport interface CheckboxGroupProps\n extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n /**\n * The current checked options.\n */\n checkedValues?: string[];\n /**\n * The default selected options for un-controlled component.\n */\n defaultCheckedValues?: string[];\n /**\n * Display group of elements in a compact row.\n */\n direction?: \"horizontal\" | \"vertical\";\n /**\n * Disable the Checkbox group\n */\n disabled?: boolean;\n /**\n * The name used to reference the value of the control.\n */\n name?: string;\n /**\n * Callback fired when a checkbox is clicked.\n * `event.target.value` returns the value of the checkbox that was clicked.\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n /**\n * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n */\n wrap?: boolean;\n /**\n * Validation status.\n */\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n HTMLFieldSetElement,\n CheckboxGroupProps\n>(function CheckboxGroup(\n {\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n checkedValues: checkedValuesProp,\n defaultCheckedValues = [],\n children,\n className,\n disabled: disabledProp,\n direction = \"vertical\",\n name,\n onChange,\n readOnly: readOnlyProp,\n wrap,\n validationStatus: validationStatusProp,\n ...other\n },\n ref,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-group\",\n css: checkboxGroupCss,\n window: targetWindow,\n });\n\n const {\n a11yProps,\n disabled: formFieldDisabled,\n readOnly: formFieldReadOnly,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled || disabledProp;\n const readOnly = formFieldReadOnly || readOnlyProp;\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const [checkedValues, setCheckedValues] = useControlled({\n controlled: checkedValuesProp,\n default: defaultCheckedValues,\n name: \"CheckboxGroup\",\n state: \"checkedValues\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const name = event.target.value;\n setCheckedValues((oldValues: string[] = []) => {\n const isSelected = oldValues.includes(name);\n\n return isSelected\n ? oldValues.filter((value) => value !== name)\n : oldValues.concat(name);\n });\n\n onChange?.(event);\n };\n\n return (\n <fieldset\n aria-labelledby={\n clsx(a11yProps?.[\"aria-labelledby\"], ariaLabelledBy) || undefined\n }\n aria-describedby={\n clsx(a11yProps?.[\"aria-describedby\"], ariaDescribedBy) || undefined\n }\n className={clsx(\n withBaseName(),\n withBaseName(direction),\n {\n [withBaseName(\"noWrap\")]: !wrap,\n },\n className,\n )}\n ref={ref}\n {...other}\n >\n <CheckboxGroupContext.Provider\n value={{\n disabled,\n name,\n onChange: handleChange,\n checkedValues,\n readOnly,\n validationStatus,\n }}\n >\n {children}\n </CheckboxGroupContext.Provider>\n </fieldset>\n );\n});\n"],"names":["makePrefixer","forwardRef","CheckboxGroup","useWindow","useComponentCssInjection","checkboxGroupCss","useFormFieldProps","useControlled","name","jsx","clsx","CheckboxGroupContext"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n /**\n * @deprecated Use validationStatus instead\n */\n error?: boolean;\n indeterminate?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n checked = false,\n className,\n disabled,\n error,\n indeterminate,\n validationStatus,\n readOnly,\n}: CheckboxIconProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-icon\",\n css: checkboxIconCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"error\")]: error,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"indeterminate\")]: indeterminate,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className,\n )}\n >\n {checked && !indeterminate && !readOnly && (\n <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n )}\n {checked && !indeterminate && readOnly && (\n <CheckmarkIcon className={withBaseName(\"icon\")} />\n )}\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","checkboxIconCss","jsxs","clsx","CheckmarkSolidIcon","CheckmarkIcon"],"mappings":";;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,MAAA;AAAA,MACZ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAW,OAAA,IAAA,CAAC,iBAAiB,CAAC,QAAA,mCAC5BC,wBAAmB,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,CAAG,EAAA,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAiB,IAAA,QAAA,mCAC3BC,mBAAc,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}
1
+ {"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n checked?: boolean;\n className?: string;\n disabled?: boolean;\n /**\n * @deprecated Use validationStatus instead\n */\n error?: boolean;\n indeterminate?: boolean;\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n checked = false,\n className,\n disabled,\n error,\n indeterminate,\n validationStatus,\n readOnly,\n}: CheckboxIconProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-checkbox-icon\",\n css: checkboxIconCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden=\"true\"\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"error\")]: error,\n [withBaseName(validationStatus || \"\")]: validationStatus,\n [withBaseName(\"indeterminate\")]: indeterminate,\n [withBaseName(\"readOnly\")]: readOnly,\n },\n className,\n )}\n >\n {checked && !indeterminate && !readOnly && (\n <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n )}\n {checked && !indeterminate && readOnly && (\n <CheckmarkIcon className={withBaseName(\"icon\")} />\n )}\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","checkboxIconCss","jsxs","clsx","CheckmarkSolidIcon","CheckmarkIcon"],"mappings":";;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKC,cAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,mCAC5BC,wBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,mCAC3BC,mBAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import type { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\nimport type { CheckboxGroupProps } from \"../CheckboxGroup\";\n\nexport interface CheckboxGroupState {\n disabled?: boolean;\n name?: CheckboxGroupProps[\"name\"];\n onChange?: CheckboxGroupProps[\"onChange\"];\n checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState | undefined>(\n \"CheckboxGroupContext\",\n undefined,\n);\n\nexport { CheckboxGroupContext };\n"],"names":["createContext"],"mappings":";;;;;;;;;;;AAaA,MAAM,oBAAuB,GAAAA,2BAAA;AAAA,EAC3B,sBAAA;AAAA,EACA;AACF;;;;"}
1
+ {"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import type { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\nimport type { CheckboxGroupProps } from \"../CheckboxGroup\";\n\nexport interface CheckboxGroupState {\n disabled?: boolean;\n name?: CheckboxGroupProps[\"name\"];\n onChange?: CheckboxGroupProps[\"onChange\"];\n checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n readOnly?: boolean;\n validationStatus?: AdornmentValidationStatus;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState | undefined>(\n \"CheckboxGroupContext\",\n undefined,\n);\n\nexport { CheckboxGroupContext };\n"],"names":["createContext"],"mappings":";;;;;;;;;;;AAaA,MAAM,oBAAA,GAAuBA,2BAAA;AAAA,EAC3B,sBAAA;AAAA,EACA;AACF;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"useCheckboxGroup.js","sources":["../src/checkbox/internal/useCheckboxGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { CheckboxGroupContext } from \"./CheckboxGroupContext\";\n\nexport function useCheckboxGroup() {\n return useContext(CheckboxGroupContext);\n}\n"],"names":["useContext","CheckboxGroupContext"],"mappings":";;;;;AAGO,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAOA,iBAAWC,yCAAoB,CAAA;AACxC;;;;"}
1
+ {"version":3,"file":"useCheckboxGroup.js","sources":["../src/checkbox/internal/useCheckboxGroup.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { CheckboxGroupContext } from \"./CheckboxGroupContext\";\n\nexport function useCheckboxGroup() {\n return useContext(CheckboxGroupContext);\n}\n"],"names":["useContext","CheckboxGroupContext"],"mappings":";;;;;AAGO,SAAS,gBAAA,GAAmB;AACjC,EAAA,OAAOA,iBAAWC,yCAAoB,CAAA;AACxC;;;;"}
@@ -0,0 +1,52 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var clsx = require('clsx');
5
+ var React = require('react');
6
+ var makePrefixer = require('../utils/makePrefixer.js');
7
+ var useControlled = require('../utils/useControlled.js');
8
+ require('../utils/useFloatingUI/useFloatingUI.js');
9
+ require('../utils/useId.js');
10
+ require('../salt-provider/SaltProvider.js');
11
+ require('../viewport/ViewportProvider.js');
12
+ var CollapsibleContext = require('./CollapsibleContext.js');
13
+
14
+ const withBaseName = makePrefixer.makePrefixer("saltCollapsible");
15
+ const Collapsible = React.forwardRef(
16
+ function Collapsible2(props, ref) {
17
+ const {
18
+ className,
19
+ open: openProp,
20
+ defaultOpen,
21
+ onOpenChange,
22
+ ...rest
23
+ } = props;
24
+ const [open, setOpenState] = useControlled.useControlled({
25
+ default: Boolean(defaultOpen),
26
+ controlled: openProp,
27
+ name: "Collapsible",
28
+ state: "open"
29
+ });
30
+ const [panelId, setPanelId] = React.useState(void 0);
31
+ const setOpen = React.useCallback(
32
+ (event, newOpen) => {
33
+ setOpenState(newOpen);
34
+ onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
35
+ },
36
+ [onOpenChange]
37
+ );
38
+ const contextValue = React.useMemo(
39
+ () => ({
40
+ open,
41
+ setOpen,
42
+ panelId,
43
+ setPanelId
44
+ }),
45
+ [open, setOpen, panelId]
46
+ );
47
+ return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest }) });
48
+ }
49
+ );
50
+
51
+ exports.Collapsible = Collapsible;
52
+ //# sourceMappingURL=Collapsible.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Collapsible.js","sources":["../src/collapsible/Collapsible.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n type SyntheticEvent,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CollapsibleContext } from \"./CollapsibleContext\";\n\nexport interface CollapsibleProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n /**\n * Whether the accordion is open.\n */\n open?: boolean;\n /**\n * Whether the accordion is open by default.\n */\n defaultOpen?: boolean;\n /**\n * Callback fired when the accordion is opened or closed.\n */\n onOpenChange?: (\n event: SyntheticEvent<HTMLButtonElement>,\n open: boolean,\n ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsible\");\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n function Collapsible(props, ref) {\n const {\n className,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...rest\n } = props;\n\n const [open, setOpenState] = useControlled({\n default: Boolean(defaultOpen),\n controlled: openProp,\n name: \"Collapsible\",\n state: \"open\",\n });\n\n const [panelId, setPanelId] = useState<string | undefined>(undefined);\n\n const setOpen = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>, newOpen: boolean) => {\n setOpenState(newOpen);\n onOpenChange?.(event, newOpen);\n },\n [onOpenChange],\n );\n\n const contextValue = useMemo(\n () => ({\n open,\n setOpen,\n panelId,\n setPanelId,\n }),\n [open, setOpen, panelId],\n );\n\n return (\n <CollapsibleContext.Provider value={contextValue}>\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n </CollapsibleContext.Provider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Collapsible","useControlled","useState","useCallback","useMemo","CollapsibleContext","jsx","clsx"],"mappings":";;;;;;;;;;;;;AA+BA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAE5C,MAAM,WAAA,GAAcC,gBAAA;AAAA,EACzB,SAASC,YAAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AAC/B,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,IAAA,EAAM,QAAA;AAAA,MACN,WAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,CAAC,IAAA,EAAM,YAAY,CAAA,GAAIC,2BAAA,CAAc;AAAA,MACzC,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,UAAA,EAAY,QAAA;AAAA,MACZ,IAAA,EAAM,aAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAA6B,MAAS,CAAA;AAEpE,IAAA,MAAM,OAAA,GAAUC,iBAAA;AAAA,MACd,CAAC,OAA0C,OAAA,KAAqB;AAC9D,QAAA,YAAA,CAAa,OAAO,CAAA;AACpB,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,KAAA,EAAO,OAAA,CAAA;AAAA,MACxB,CAAA;AAAA,MACA,CAAC,YAAY;AAAA,KACf;AAEA,IAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,MACnB,OAAO;AAAA,QACL,IAAA;AAAA,QACA,OAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,IAAA,EAAM,OAAA,EAAS,OAAO;AAAA,KACzB;AAEA,IAAA,sCACGC,qCAAA,CAAmB,QAAA,EAAnB,EAA4B,KAAA,EAAO,cAClC,QAAA,kBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,GAAG,GAAA,EAAW,GAAG,MAAM,CAAA,EACvE,CAAA;AAAA,EAEJ;AACF;;;;"}
@@ -0,0 +1,29 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var createContext = require('../utils/createContext.js');
5
+ require('clsx');
6
+ require('react/jsx-runtime');
7
+ require('../utils/useFloatingUI/useFloatingUI.js');
8
+ require('../utils/useId.js');
9
+ require('../salt-provider/SaltProvider.js');
10
+ require('../viewport/ViewportProvider.js');
11
+
12
+ const CollapsibleContext = createContext.createContext(
13
+ "CollapsibleContext",
14
+ {
15
+ open: false,
16
+ setOpen: () => {
17
+ },
18
+ panelId: void 0,
19
+ setPanelId: () => {
20
+ }
21
+ }
22
+ );
23
+ function useCollapsibleContext() {
24
+ return React.useContext(CollapsibleContext);
25
+ }
26
+
27
+ exports.CollapsibleContext = CollapsibleContext;
28
+ exports.useCollapsibleContext = useCollapsibleContext;
29
+ //# sourceMappingURL=CollapsibleContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CollapsibleContext.js","sources":["../src/collapsible/CollapsibleContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport type CollapsibleContextValue = {\n open: boolean;\n setOpen: (event: SyntheticEvent<HTMLButtonElement>, open: boolean) => void;\n panelId?: string;\n setPanelId?: (panelId: string) => void;\n};\n\nexport const CollapsibleContext = createContext<CollapsibleContextValue>(\n \"CollapsibleContext\",\n {\n open: false,\n setOpen: () => {},\n panelId: undefined,\n setPanelId: () => {},\n },\n);\n\nexport function useCollapsibleContext() {\n return useContext(CollapsibleContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAUO,MAAM,kBAAA,GAAqBA,2BAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,SAAS,MAAM;AAAA,IAAC,CAAA;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC;AAAA;AAEvB;AAEO,SAAS,qBAAA,GAAwB;AACtC,EAAA,OAAOC,iBAAW,kBAAkB,CAAA;AACtC;;;;;"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = ".saltCollapsiblePanel {\n display: grid;\n transition:\n grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n opacity var(--salt-duration-perceptible) ease-in-out,\n visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n grid-template-rows: 0fr;\n opacity: 0;\n visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n grid-template-rows: 1fr;\n opacity: 1;\n visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n overflow: hidden;\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=CollapsiblePanel.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CollapsiblePanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}