@salt-ds/core 1.35.0 → 1.37.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.
- package/css/salt-core.css +733 -471
- package/dist-cjs/accordion/Accordion.js +1 -0
- package/dist-cjs/accordion/Accordion.js.map +1 -1
- package/dist-cjs/accordion/AccordionContext.js +1 -0
- package/dist-cjs/accordion/AccordionContext.js.map +1 -1
- package/dist-cjs/accordion/AccordionGroup.js +1 -0
- package/dist-cjs/accordion/AccordionGroup.js.map +1 -1
- package/dist-cjs/accordion/AccordionHeader.js +5 -3
- package/dist-cjs/accordion/AccordionHeader.js.map +1 -1
- package/dist-cjs/accordion/AccordionPanel.js +1 -0
- package/dist-cjs/accordion/AccordionPanel.js.map +1 -1
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js +1 -0
- package/dist-cjs/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-cjs/avatar/Avatar.js +8 -5
- package/dist-cjs/avatar/Avatar.js.map +1 -1
- package/dist-cjs/avatar/useAvatarImage.js +1 -0
- package/dist-cjs/avatar/useAvatarImage.js.map +1 -1
- package/dist-cjs/badge/Badge.js +1 -0
- package/dist-cjs/badge/Badge.js.map +1 -1
- package/dist-cjs/banner/Banner.js +1 -0
- package/dist-cjs/banner/Banner.js.map +1 -1
- package/dist-cjs/banner/BannerActions.js +1 -0
- package/dist-cjs/banner/BannerActions.js.map +1 -1
- package/dist-cjs/banner/BannerContent.js +1 -0
- package/dist-cjs/banner/BannerContent.js.map +1 -1
- package/dist-cjs/border-item/BorderItem.js +1 -0
- package/dist-cjs/border-item/BorderItem.js.map +1 -1
- package/dist-cjs/border-layout/BorderLayout.js +1 -0
- package/dist-cjs/border-layout/BorderLayout.js.map +1 -1
- package/dist-cjs/breakpoints/BreakpointProvider.js +1 -0
- package/dist-cjs/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/button/Button.js +34 -1
- package/dist-cjs/button/Button.js.map +1 -1
- package/dist-cjs/card/Card.css.js +1 -1
- package/dist-cjs/card/Card.js +1 -0
- package/dist-cjs/card/Card.js.map +1 -1
- package/dist-cjs/checkbox/Checkbox.css.js +1 -1
- package/dist-cjs/checkbox/Checkbox.js +1 -0
- package/dist-cjs/checkbox/Checkbox.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxGroup.js +1 -0
- package/dist-cjs/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.js +1 -0
- package/dist-cjs/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js +1 -0
- package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-cjs/combo-box/ComboBox.js +5 -3
- package/dist-cjs/combo-box/ComboBox.js.map +1 -1
- package/dist-cjs/combo-box/useComboBox.js +1 -0
- package/dist-cjs/combo-box/useComboBox.js.map +1 -1
- package/dist-cjs/dialog/Dialog.js +3 -2
- package/dist-cjs/dialog/Dialog.js.map +1 -1
- package/dist-cjs/dialog/DialogActions.js +1 -0
- package/dist-cjs/dialog/DialogActions.js.map +1 -1
- package/dist-cjs/dialog/DialogCloseButton.js +4 -2
- package/dist-cjs/dialog/DialogCloseButton.js.map +1 -1
- package/dist-cjs/dialog/DialogContent.css.js +1 -1
- package/dist-cjs/dialog/DialogContent.js +1 -0
- package/dist-cjs/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.js +1 -0
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/divider/Divider.js +1 -0
- package/dist-cjs/divider/Divider.js.map +1 -1
- package/dist-cjs/drawer/Drawer.js +1 -0
- package/dist-cjs/drawer/Drawer.js.map +1 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +4 -2
- package/dist-cjs/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-cjs/dropdown/Dropdown.css.js +1 -1
- package/dist-cjs/dropdown/Dropdown.js +5 -3
- package/dist-cjs/dropdown/Dropdown.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +1 -0
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +3 -2
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +1 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-cjs/flex-item/FlexItem.js +1 -0
- package/dist-cjs/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/flex-layout/FlexLayout.js +1 -0
- package/dist-cjs/flex-layout/FlexLayout.js.map +1 -1
- package/dist-cjs/form-field/FormField.js +1 -0
- package/dist-cjs/form-field/FormField.js.map +1 -1
- package/dist-cjs/form-field/FormFieldHelperText.js +1 -0
- package/dist-cjs/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-cjs/form-field/FormFieldLabel.js +1 -0
- package/dist-cjs/form-field/FormFieldLabel.js.map +1 -1
- package/dist-cjs/form-field-context/FormFieldContext.js +1 -0
- package/dist-cjs/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-cjs/grid-item/GridItem.js +1 -0
- package/dist-cjs/grid-item/GridItem.js.map +1 -1
- package/dist-cjs/grid-layout/GridLayout.js +1 -0
- package/dist-cjs/grid-layout/GridLayout.js.map +1 -1
- package/dist-cjs/index.js +5 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/input/Input.js +1 -0
- package/dist-cjs/input/Input.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCard.css.js +1 -1
- package/dist-cjs/interactable-card/InteractableCard.js +1 -0
- package/dist-cjs/interactable-card/InteractableCard.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroup.js +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js +1 -0
- package/dist-cjs/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-cjs/link/Link.js +8 -5
- package/dist-cjs/link/Link.js.map +1 -1
- package/dist-cjs/link-card/LinkCard.css.js +1 -1
- package/dist-cjs/link-card/LinkCard.js +1 -0
- package/dist-cjs/link-card/LinkCard.js.map +1 -1
- package/dist-cjs/list-box/ListBox.js +1 -0
- package/dist-cjs/list-box/ListBox.js.map +1 -1
- package/dist-cjs/list-control/ListControlContext.js +1 -0
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +38 -5
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/menu/MenuBase.js +1 -0
- package/dist-cjs/menu/MenuBase.js.map +1 -1
- package/dist-cjs/menu/MenuContext.js +1 -0
- package/dist-cjs/menu/MenuContext.js.map +1 -1
- package/dist-cjs/menu/MenuGroup.css.js +1 -1
- package/dist-cjs/menu/MenuGroup.js +1 -0
- package/dist-cjs/menu/MenuGroup.js.map +1 -1
- package/dist-cjs/menu/MenuItem.css.js +1 -1
- package/dist-cjs/menu/MenuItem.js +4 -2
- package/dist-cjs/menu/MenuItem.js.map +1 -1
- package/dist-cjs/menu/MenuPanel.js +1 -0
- package/dist-cjs/menu/MenuPanel.js.map +1 -1
- package/dist-cjs/menu/MenuPanelContext.js +1 -0
- package/dist-cjs/menu/MenuPanelContext.js.map +1 -1
- package/dist-cjs/menu/MenuTrigger.js +1 -0
- package/dist-cjs/menu/MenuTrigger.js.map +1 -1
- package/dist-cjs/menu/MenuTriggerContext.js +1 -0
- package/dist-cjs/menu/MenuTriggerContext.js.map +1 -1
- package/dist-cjs/multiline-input/MultilineInput.css.js +1 -1
- package/dist-cjs/multiline-input/MultilineInput.js +1 -0
- package/dist-cjs/multiline-input/MultilineInput.js.map +1 -1
- package/dist-cjs/navigation-item/ExpansionIcon.js +12 -11
- package/dist-cjs/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +1 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItemAction.js +1 -0
- package/dist-cjs/navigation-item/NavigationItemAction.js.map +1 -1
- package/dist-cjs/option/Option.js +1 -0
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionGroup.css.js +1 -1
- package/dist-cjs/option/OptionGroup.js +1 -0
- package/dist-cjs/option/OptionGroup.js.map +1 -1
- package/dist-cjs/option/OptionList.js +1 -0
- package/dist-cjs/option/OptionList.js.map +1 -1
- package/dist-cjs/option/OptionListBase.js +1 -0
- package/dist-cjs/option/OptionListBase.js.map +1 -1
- package/dist-cjs/overlay/Overlay.js +1 -0
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +1 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanel.css.js +1 -1
- package/dist-cjs/overlay/OverlayPanel.js +1 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelCloseButton.js +4 -2
- package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-cjs/overlay/OverlayPanelContent.js +1 -0
- package/dist-cjs/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-cjs/overlay/OverlayTrigger.js +1 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -1
- package/dist-cjs/pagination/CompactInput.js +1 -0
- package/dist-cjs/pagination/CompactInput.js.map +1 -1
- package/dist-cjs/pagination/CompactPaginator.js +5 -3
- package/dist-cjs/pagination/CompactPaginator.js.map +1 -1
- package/dist-cjs/pagination/GoToInput.js +1 -0
- package/dist-cjs/pagination/GoToInput.js.map +1 -1
- package/dist-cjs/pagination/PageButton.js +1 -0
- package/dist-cjs/pagination/PageButton.js.map +1 -1
- package/dist-cjs/pagination/PageRanges.js +1 -0
- package/dist-cjs/pagination/PageRanges.js.map +1 -1
- package/dist-cjs/pagination/Pagination.js +1 -0
- package/dist-cjs/pagination/Pagination.js.map +1 -1
- package/dist-cjs/pagination/Paginator.js +5 -3
- package/dist-cjs/pagination/Paginator.js.map +1 -1
- package/dist-cjs/panel/Panel.css.js +1 -1
- package/dist-cjs/panel/Panel.js +1 -0
- package/dist-cjs/panel/Panel.js.map +1 -1
- package/dist-cjs/parent-child-layout/ParentChildLayout.js +1 -0
- package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js +1 -0
- package/dist-cjs/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-cjs/pill/Pill.css.js +1 -1
- package/dist-cjs/pill/Pill.js +1 -0
- package/dist-cjs/pill/Pill.js.map +1 -1
- package/dist-cjs/pill-input/PillInput.css.js +1 -1
- package/dist-cjs/pill-input/PillInput.js +5 -3
- package/dist-cjs/pill-input/PillInput.js.map +1 -1
- package/dist-cjs/progress/CircularProgress/CircularProgress.js +1 -0
- package/dist-cjs/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-cjs/progress/LinearProgress/LinearProgress.js +1 -0
- package/dist-cjs/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-cjs/radio-button/RadioButton.css.js +1 -1
- package/dist-cjs/radio-button/RadioButton.js +5 -4
- package/dist-cjs/radio-button/RadioButton.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonGroup.js +1 -0
- package/dist-cjs/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.js +1 -0
- package/dist-cjs/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-cjs/radio-button/internal/RadioGroupContext.js +1 -0
- package/dist-cjs/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-cjs/salt-provider/SaltProvider.js +1 -0
- package/dist-cjs/salt-provider/SaltProvider.js.map +1 -1
- package/dist-cjs/scrim/Scrim.js +1 -0
- package/dist-cjs/scrim/Scrim.js.map +1 -1
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js +1 -0
- package/dist-cjs/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js +47 -0
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -0
- package/dist-cjs/spinner/Spinner.js +1 -0
- package/dist-cjs/spinner/Spinner.js.map +1 -1
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js +1 -0
- package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-cjs/split-layout/SplitLayout.js +1 -0
- package/dist-cjs/split-layout/SplitLayout.js.map +1 -1
- package/dist-cjs/stack-layout/StackLayout.js +1 -0
- package/dist-cjs/stack-layout/StackLayout.js.map +1 -1
- package/dist-cjs/status-adornment/StatusAdornment.js +1 -0
- package/dist-cjs/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.js +11 -9
- package/dist-cjs/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-cjs/switch/Switch.js +2 -1
- package/dist-cjs/switch/Switch.js.map +1 -1
- package/dist-cjs/tag/Tag.css.js +1 -1
- package/dist-cjs/tag/Tag.js +1 -0
- package/dist-cjs/tag/Tag.js.map +1 -1
- package/dist-cjs/text/Text.css.js +1 -1
- package/dist-cjs/text/Text.js +1 -0
- package/dist-cjs/text/Text.js.map +1 -1
- package/dist-cjs/toast/Toast.js +1 -0
- package/dist-cjs/toast/Toast.js.map +1 -1
- package/dist-cjs/toast/ToastContent.js +1 -0
- package/dist-cjs/toast/ToastContent.js.map +1 -1
- package/dist-cjs/toggle-button/ToggleButton.js +1 -0
- package/dist-cjs/toggle-button/ToggleButton.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js +1 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js +1 -0
- package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-cjs/tooltip/Tooltip.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +1 -0
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/TooltipBase.js +1 -0
- package/dist-cjs/tooltip/TooltipBase.js.map +1 -1
- package/dist-cjs/tooltip/useAriaAnnounce.js +1 -0
- package/dist-cjs/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +1 -0
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/useControlled.js +1 -1
- package/dist-cjs/utils/useControlled.js.map +1 -1
- package/dist-cjs/utils/useValueEffect.js +1 -0
- package/dist-cjs/utils/useValueEffect.js.map +1 -1
- package/dist-cjs/viewport/ViewportProvider.js +1 -0
- package/dist-cjs/viewport/ViewportProvider.js.map +1 -1
- package/dist-es/accordion/Accordion.js +1 -0
- package/dist-es/accordion/Accordion.js.map +1 -1
- package/dist-es/accordion/AccordionContext.js +1 -0
- package/dist-es/accordion/AccordionContext.js.map +1 -1
- package/dist-es/accordion/AccordionGroup.js +1 -0
- package/dist-es/accordion/AccordionGroup.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.js +5 -3
- package/dist-es/accordion/AccordionHeader.js.map +1 -1
- package/dist-es/accordion/AccordionPanel.js +1 -0
- package/dist-es/accordion/AccordionPanel.js.map +1 -1
- package/dist-es/aria-announcer/useAriaAnnouncer.js +1 -0
- package/dist-es/aria-announcer/useAriaAnnouncer.js.map +1 -1
- package/dist-es/avatar/Avatar.js +8 -5
- package/dist-es/avatar/Avatar.js.map +1 -1
- package/dist-es/avatar/useAvatarImage.js +1 -0
- package/dist-es/avatar/useAvatarImage.js.map +1 -1
- package/dist-es/badge/Badge.js +1 -0
- package/dist-es/badge/Badge.js.map +1 -1
- package/dist-es/banner/Banner.js +1 -0
- package/dist-es/banner/Banner.js.map +1 -1
- package/dist-es/banner/BannerActions.js +1 -0
- package/dist-es/banner/BannerActions.js.map +1 -1
- package/dist-es/banner/BannerContent.js +1 -0
- package/dist-es/banner/BannerContent.js.map +1 -1
- package/dist-es/border-item/BorderItem.js +1 -0
- package/dist-es/border-item/BorderItem.js.map +1 -1
- package/dist-es/border-layout/BorderLayout.js +1 -0
- package/dist-es/border-layout/BorderLayout.js.map +1 -1
- package/dist-es/breakpoints/BreakpointProvider.js +1 -0
- package/dist-es/breakpoints/BreakpointProvider.js.map +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/button/Button.js +33 -2
- package/dist-es/button/Button.js.map +1 -1
- package/dist-es/card/Card.css.js +1 -1
- package/dist-es/card/Card.js +1 -0
- package/dist-es/card/Card.js.map +1 -1
- package/dist-es/checkbox/Checkbox.css.js +1 -1
- package/dist-es/checkbox/Checkbox.js +1 -0
- package/dist-es/checkbox/Checkbox.js.map +1 -1
- package/dist-es/checkbox/CheckboxGroup.js +1 -0
- package/dist-es/checkbox/CheckboxGroup.js.map +1 -1
- package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.js +1 -0
- package/dist-es/checkbox/CheckboxIcon.js.map +1 -1
- package/dist-es/checkbox/internal/CheckboxGroupContext.js +1 -0
- package/dist-es/checkbox/internal/CheckboxGroupContext.js.map +1 -1
- package/dist-es/combo-box/ComboBox.js +5 -3
- package/dist-es/combo-box/ComboBox.js.map +1 -1
- package/dist-es/combo-box/useComboBox.js +1 -0
- package/dist-es/combo-box/useComboBox.js.map +1 -1
- package/dist-es/dialog/Dialog.js +3 -2
- package/dist-es/dialog/Dialog.js.map +1 -1
- package/dist-es/dialog/DialogActions.js +1 -0
- package/dist-es/dialog/DialogActions.js.map +1 -1
- package/dist-es/dialog/DialogCloseButton.js +3 -1
- package/dist-es/dialog/DialogCloseButton.js.map +1 -1
- package/dist-es/dialog/DialogContent.css.js +1 -1
- package/dist-es/dialog/DialogContent.js +1 -0
- package/dist-es/dialog/DialogContent.js.map +1 -1
- package/dist-es/dialog/DialogHeader.js +1 -0
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/divider/Divider.js +1 -0
- package/dist-es/divider/Divider.js.map +1 -1
- package/dist-es/drawer/Drawer.js +1 -0
- package/dist-es/drawer/Drawer.js.map +1 -1
- package/dist-es/drawer/DrawerCloseButton.js +3 -1
- package/dist-es/drawer/DrawerCloseButton.js.map +1 -1
- package/dist-es/dropdown/Dropdown.css.js +1 -1
- package/dist-es/dropdown/Dropdown.js +5 -3
- package/dist-es/dropdown/Dropdown.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +1 -0
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneIcon.js +3 -2
- package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +1 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -1
- package/dist-es/flex-item/FlexItem.js +1 -0
- package/dist-es/flex-item/FlexItem.js.map +1 -1
- package/dist-es/flex-layout/FlexLayout.js +1 -0
- package/dist-es/flex-layout/FlexLayout.js.map +1 -1
- package/dist-es/form-field/FormField.js +1 -0
- package/dist-es/form-field/FormField.js.map +1 -1
- package/dist-es/form-field/FormFieldHelperText.js +1 -0
- package/dist-es/form-field/FormFieldHelperText.js.map +1 -1
- package/dist-es/form-field/FormFieldLabel.js +1 -0
- package/dist-es/form-field/FormFieldLabel.js.map +1 -1
- package/dist-es/form-field-context/FormFieldContext.js +1 -0
- package/dist-es/form-field-context/FormFieldContext.js.map +1 -1
- package/dist-es/grid-item/GridItem.js +1 -0
- package/dist-es/grid-item/GridItem.js.map +1 -1
- package/dist-es/grid-layout/GridLayout.js +1 -0
- package/dist-es/grid-layout/GridLayout.js.map +1 -1
- package/dist-es/index.js +2 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/input/Input.js +1 -0
- package/dist-es/input/Input.js.map +1 -1
- package/dist-es/interactable-card/InteractableCard.css.js +1 -1
- package/dist-es/interactable-card/InteractableCard.js +1 -0
- package/dist-es/interactable-card/InteractableCard.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroup.js +1 -0
- package/dist-es/interactable-card/InteractableCardGroup.js.map +1 -1
- package/dist-es/interactable-card/InteractableCardGroupContext.js +1 -0
- package/dist-es/interactable-card/InteractableCardGroupContext.js.map +1 -1
- package/dist-es/link/Link.js +8 -5
- package/dist-es/link/Link.js.map +1 -1
- package/dist-es/link-card/LinkCard.css.js +1 -1
- package/dist-es/link-card/LinkCard.js +1 -0
- package/dist-es/link-card/LinkCard.js.map +1 -1
- package/dist-es/list-box/ListBox.js +1 -0
- package/dist-es/list-box/ListBox.js.map +1 -1
- package/dist-es/list-control/ListControlContext.js +1 -0
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +38 -5
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/menu/MenuBase.js +1 -0
- package/dist-es/menu/MenuBase.js.map +1 -1
- package/dist-es/menu/MenuContext.js +1 -0
- package/dist-es/menu/MenuContext.js.map +1 -1
- package/dist-es/menu/MenuGroup.css.js +1 -1
- package/dist-es/menu/MenuGroup.js +1 -0
- package/dist-es/menu/MenuGroup.js.map +1 -1
- package/dist-es/menu/MenuItem.css.js +1 -1
- package/dist-es/menu/MenuItem.js +4 -2
- package/dist-es/menu/MenuItem.js.map +1 -1
- package/dist-es/menu/MenuPanel.js +1 -0
- package/dist-es/menu/MenuPanel.js.map +1 -1
- package/dist-es/menu/MenuPanelContext.js +1 -0
- package/dist-es/menu/MenuPanelContext.js.map +1 -1
- package/dist-es/menu/MenuTrigger.js +1 -0
- package/dist-es/menu/MenuTrigger.js.map +1 -1
- package/dist-es/menu/MenuTriggerContext.js +1 -0
- package/dist-es/menu/MenuTriggerContext.js.map +1 -1
- package/dist-es/multiline-input/MultilineInput.css.js +1 -1
- package/dist-es/multiline-input/MultilineInput.js +1 -0
- package/dist-es/multiline-input/MultilineInput.js.map +1 -1
- package/dist-es/navigation-item/ExpansionIcon.js +12 -11
- package/dist-es/navigation-item/ExpansionIcon.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +1 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/navigation-item/NavigationItemAction.js +1 -0
- package/dist-es/navigation-item/NavigationItemAction.js.map +1 -1
- package/dist-es/option/Option.js +1 -0
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionGroup.css.js +1 -1
- package/dist-es/option/OptionGroup.js +1 -0
- package/dist-es/option/OptionGroup.js.map +1 -1
- package/dist-es/option/OptionList.js +1 -0
- package/dist-es/option/OptionList.js.map +1 -1
- package/dist-es/option/OptionListBase.js +1 -0
- package/dist-es/option/OptionListBase.js.map +1 -1
- package/dist-es/overlay/Overlay.js +1 -0
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +1 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -1
- package/dist-es/overlay/OverlayPanel.css.js +1 -1
- package/dist-es/overlay/OverlayPanel.js +1 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js +3 -1
- package/dist-es/overlay/OverlayPanelCloseButton.js.map +1 -1
- package/dist-es/overlay/OverlayPanelContent.js +1 -0
- package/dist-es/overlay/OverlayPanelContent.js.map +1 -1
- package/dist-es/overlay/OverlayTrigger.js +1 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -1
- package/dist-es/pagination/CompactInput.js +1 -0
- package/dist-es/pagination/CompactInput.js.map +1 -1
- package/dist-es/pagination/CompactPaginator.js +5 -3
- package/dist-es/pagination/CompactPaginator.js.map +1 -1
- package/dist-es/pagination/GoToInput.js +1 -0
- package/dist-es/pagination/GoToInput.js.map +1 -1
- package/dist-es/pagination/PageButton.js +1 -0
- package/dist-es/pagination/PageButton.js.map +1 -1
- package/dist-es/pagination/PageRanges.js +1 -0
- package/dist-es/pagination/PageRanges.js.map +1 -1
- package/dist-es/pagination/Pagination.js +1 -0
- package/dist-es/pagination/Pagination.js.map +1 -1
- package/dist-es/pagination/Paginator.js +5 -3
- package/dist-es/pagination/Paginator.js.map +1 -1
- package/dist-es/panel/Panel.css.js +1 -1
- package/dist-es/panel/Panel.js +1 -0
- package/dist-es/panel/Panel.js.map +1 -1
- package/dist-es/parent-child-layout/ParentChildLayout.js +1 -0
- package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js +1 -0
- package/dist-es/parent-child-layout/useIsViewportLargerThanBreakpoint.js.map +1 -1
- package/dist-es/pill/Pill.css.js +1 -1
- package/dist-es/pill/Pill.js +1 -0
- package/dist-es/pill/Pill.js.map +1 -1
- package/dist-es/pill-input/PillInput.css.js +1 -1
- package/dist-es/pill-input/PillInput.js +4 -2
- package/dist-es/pill-input/PillInput.js.map +1 -1
- package/dist-es/progress/CircularProgress/CircularProgress.js +1 -0
- package/dist-es/progress/CircularProgress/CircularProgress.js.map +1 -1
- package/dist-es/progress/LinearProgress/LinearProgress.js +1 -0
- package/dist-es/progress/LinearProgress/LinearProgress.js.map +1 -1
- package/dist-es/radio-button/RadioButton.css.js +1 -1
- package/dist-es/radio-button/RadioButton.js +5 -4
- package/dist-es/radio-button/RadioButton.js.map +1 -1
- package/dist-es/radio-button/RadioButtonGroup.js +1 -0
- package/dist-es/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-es/radio-button/RadioButtonIcon.js +1 -0
- package/dist-es/radio-button/RadioButtonIcon.js.map +1 -1
- package/dist-es/radio-button/internal/RadioGroupContext.js +1 -0
- package/dist-es/radio-button/internal/RadioGroupContext.js.map +1 -1
- package/dist-es/salt-provider/SaltProvider.js +1 -0
- package/dist-es/salt-provider/SaltProvider.js.map +1 -1
- package/dist-es/scrim/Scrim.js +1 -0
- package/dist-es/scrim/Scrim.js.map +1 -1
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js +1 -0
- package/dist-es/segmented-button-group/SegmentedButtonGroup.js.map +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +42 -0
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -0
- package/dist-es/spinner/Spinner.js +1 -0
- package/dist-es/spinner/Spinner.js.map +1 -1
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js +1 -0
- package/dist-es/spinner/svgSpinners/SpinnerSVG.js.map +1 -1
- package/dist-es/split-layout/SplitLayout.js +1 -0
- package/dist-es/split-layout/SplitLayout.js.map +1 -1
- package/dist-es/stack-layout/StackLayout.js +1 -0
- package/dist-es/stack-layout/StackLayout.js.map +1 -1
- package/dist-es/status-adornment/StatusAdornment.js +1 -0
- package/dist-es/status-adornment/StatusAdornment.js.map +1 -1
- package/dist-es/status-indicator/StatusIndicator.js +10 -8
- package/dist-es/status-indicator/StatusIndicator.js.map +1 -1
- package/dist-es/switch/Switch.js +2 -1
- package/dist-es/switch/Switch.js.map +1 -1
- package/dist-es/tag/Tag.css.js +1 -1
- package/dist-es/tag/Tag.js +1 -0
- package/dist-es/tag/Tag.js.map +1 -1
- package/dist-es/text/Text.css.js +1 -1
- package/dist-es/text/Text.js +1 -0
- package/dist-es/text/Text.js.map +1 -1
- package/dist-es/toast/Toast.js +1 -0
- package/dist-es/toast/Toast.js.map +1 -1
- package/dist-es/toast/ToastContent.js +1 -0
- package/dist-es/toast/ToastContent.js.map +1 -1
- package/dist-es/toggle-button/ToggleButton.js +1 -0
- package/dist-es/toggle-button/ToggleButton.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroup.js +1 -0
- package/dist-es/toggle-button-group/ToggleButtonGroup.js.map +1 -1
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js +1 -0
- package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map +1 -1
- package/dist-es/tooltip/Tooltip.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +1 -0
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/TooltipBase.js +1 -0
- package/dist-es/tooltip/TooltipBase.js.map +1 -1
- package/dist-es/tooltip/useAriaAnnounce.js +1 -0
- package/dist-es/tooltip/useAriaAnnounce.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +1 -0
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/useControlled.js +1 -1
- package/dist-es/utils/useControlled.js.map +1 -1
- package/dist-es/utils/useValueEffect.js +1 -0
- package/dist-es/utils/useValueEffect.js.map +1 -1
- package/dist-es/viewport/ViewportProvider.js +1 -0
- package/dist-es/viewport/ViewportProvider.js.map +1 -1
- package/dist-types/button/Button.d.ts +26 -0
- package/dist-types/checkbox/Checkbox.d.ts +2 -1
- package/dist-types/index.d.ts +2 -0
- package/dist-types/input/Input.d.ts +2 -1
- package/dist-types/link/Link.d.ts +1 -1
- package/dist-types/multiline-input/MultilineInput.d.ts +2 -1
- package/dist-types/pill-input/PillInput.d.ts +2 -1
- package/dist-types/radio-button/RadioButton.d.ts +2 -1
- package/dist-types/semantic-icon-provider/SemanticIconProvider.d.ts +36 -0
- package/dist-types/semantic-icon-provider/index.d.ts +1 -0
- package/dist-types/switch/Switch.d.ts +2 -1
- package/dist-types/types.d.ts +8 -0
- package/package.json +1 -1
|
@@ -108,6 +108,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
109
109
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
110
110
|
require('../tooltip/Tooltip.js');
|
|
111
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
111
112
|
var Accordion$1 = require('./Accordion.css.js');
|
|
112
113
|
var AccordionContext = require('./AccordionContext.js');
|
|
113
114
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type SyntheticEvent,\n forwardRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Side to align the Accordion's indicator. Defaults to `left`.\n */\n indicatorSide?: \"left\" | \"right\";\n /**\n * Callback fired when the accordion is toggled.\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n /**\n * The status of the accordion.\n */\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n indicatorSide = \"left\",\n id: idProp,\n onToggle,\n status,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const [headerId, setHeaderId] = useState(`${id}-header`);\n const [panelId, setPanelId] = useState(`${id}-panel`);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n indicatorSide,\n disabled: Boolean(disabled),\n headerId,\n setHeaderId,\n panelId,\n setPanelId,\n status,\n }}\n >\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status ?? \"\")]: status,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n {...rest}\n />\n </AccordionContext.Provider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type SyntheticEvent,\n forwardRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport accordionCss from \"./Accordion.css\";\nimport { AccordionContext } from \"./AccordionContext\";\nexport interface AccordionProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onToggle\"> {\n /**\n * AccordionGroup value.\n */\n value: string;\n /**\n * Whether the accordion is expanded.\n */\n expanded?: boolean;\n /**\n * Whether the accordion is expanded by default.\n */\n defaultExpanded?: boolean;\n /**\n * Side to align the Accordion's indicator. Defaults to `left`.\n */\n indicatorSide?: \"left\" | \"right\";\n /**\n * Callback fired when the accordion is toggled.\n */\n onToggle?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n /**\n * Whether the accordion is disabled.\n */\n disabled?: boolean;\n /**\n * The status of the accordion.\n */\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n function Accordion(props, ref) {\n const {\n className,\n defaultExpanded,\n expanded: expandedProp,\n disabled,\n indicatorSide = \"left\",\n id: idProp,\n onToggle,\n status,\n value,\n ...rest\n } = props;\n\n const id = useId(idProp);\n const [headerId, setHeaderId] = useState(`${id}-header`);\n const [panelId, setPanelId] = useState(`${id}-panel`);\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion\",\n css: accordionCss,\n window: targetWindow,\n });\n\n const [expanded, setExpanded] = useControlled({\n controlled: expandedProp,\n default: Boolean(defaultExpanded),\n name: \"Accordion\",\n state: \"expanded\",\n });\n\n const toggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n setExpanded((prev) => !prev);\n onToggle?.(event);\n };\n\n return (\n <AccordionContext.Provider\n value={{\n value,\n toggle,\n expanded,\n indicatorSide,\n disabled: Boolean(disabled),\n headerId,\n setHeaderId,\n panelId,\n setPanelId,\n status,\n }}\n >\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status ?? \"\")]: status,\n [withBaseName(\"disabled\")]: disabled,\n },\n className,\n )}\n {...rest}\n />\n </AccordionContext.Provider>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Accordion","useId","useState","useWindow","useComponentCssInjection","accordionCss","useControlled","jsx","AccordionContext","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAgB,GAAA,MAAA;AAAA,MAChB,EAAI,EAAA,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAAC,cAAA,CAAS,GAAG,EAAW,CAAA,OAAA,CAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAS,GAAG,EAAU,CAAA,MAAA,CAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,UAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,QAC1B,QAAA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,QACA,UAAA;AAAA,QACA,MAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,CAAI,GAAA,MAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -108,6 +108,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
109
109
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
110
110
|
require('../tooltip/Tooltip.js');
|
|
111
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
111
112
|
|
|
112
113
|
const AccordionContext = createContext.createContext(
|
|
113
114
|
"AccordionContext",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n value: string;\n expanded: boolean;\n toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n disabled: boolean;\n indicatorSide: \"left\" | \"right\";\n headerId: string;\n setHeaderId: (id: string) => void;\n panelId: string;\n setPanelId: (id: string) => void;\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n \"AccordionContext\",\n {\n value: \"\",\n expanded: false,\n toggle: () => undefined,\n disabled: false,\n indicatorSide: \"left\",\n headerId: \"\",\n setHeaderId: () => undefined,\n panelId: \"\",\n setPanelId: () => undefined,\n },\n);\n\nexport function useAccordion() {\n return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionContext.js","sources":["../src/accordion/AccordionContext.ts"],"sourcesContent":["import { type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface AccordionContextValue {\n value: string;\n expanded: boolean;\n toggle: (event: SyntheticEvent<HTMLButtonElement>) => void;\n disabled: boolean;\n indicatorSide: \"left\" | \"right\";\n headerId: string;\n setHeaderId: (id: string) => void;\n panelId: string;\n setPanelId: (id: string) => void;\n status?: \"error\" | \"warning\" | \"success\";\n}\n\nexport const AccordionContext = createContext<AccordionContextValue>(\n \"AccordionContext\",\n {\n value: \"\",\n expanded: false,\n toggle: () => undefined,\n disabled: false,\n indicatorSide: \"left\",\n headerId: \"\",\n setHeaderId: () => undefined,\n panelId: \"\",\n setPanelId: () => undefined,\n },\n);\n\nexport function useAccordion() {\n return useContext(AccordionContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,KAAA,CAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,aAAa,MAAM,KAAA,CAAA;AAAA,IACnB,OAAS,EAAA,EAAA;AAAA,IACT,YAAY,MAAM,KAAA,CAAA;AAAA,GACpB;AACF,EAAA;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA,CAAA;AACpC;;;;;"}
|
|
@@ -107,6 +107,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
107
107
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
109
109
|
require('../tooltip/Tooltip.js');
|
|
110
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
110
111
|
var AccordionGroup$1 = require('./AccordionGroup.css.js');
|
|
111
112
|
|
|
112
113
|
const withBaseName = makePrefixer.makePrefixer("saltAccordionGroup");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The child Accordions to be rendered\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-group\",\n css: accordionGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","useWindow","useComponentCssInjection","accordionGroupCss","jsx","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionGroup.js","sources":["../src/accordion/AccordionGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport accordionGroupCss from \"./AccordionGroup.css\";\n\nexport interface AccordionGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The child Accordions to be rendered\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionGroup\");\n\nexport const AccordionGroup = forwardRef<HTMLDivElement, AccordionGroupProps>(\n function AccordionGroup(props, ref) {\n const { className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-group\",\n css: accordionGroupCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionGroup","useWindow","useComponentCssInjection","accordionGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var icons = require('@salt-ds/icons');
|
|
7
6
|
var styles = require('@salt-ds/styles');
|
|
8
7
|
var window = require('@salt-ds/window');
|
|
9
8
|
var clsx = require('clsx');
|
|
10
9
|
var React = require('react');
|
|
10
|
+
var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
11
11
|
var StatusIndicator = require('../status-indicator/StatusIndicator.js');
|
|
12
12
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
13
13
|
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
@@ -31,6 +31,7 @@ require('../button/Button.js');
|
|
|
31
31
|
require('../card/Card.js');
|
|
32
32
|
require('../checkbox/Checkbox.js');
|
|
33
33
|
require('../checkbox/CheckboxGroup.js');
|
|
34
|
+
require('@salt-ds/icons');
|
|
34
35
|
require('../combo-box/ComboBox.js');
|
|
35
36
|
require('../dialog/Dialog.js');
|
|
36
37
|
require('../dialog/DialogHeader.js');
|
|
@@ -113,13 +114,14 @@ var AccordionHeader$1 = require('./AccordionHeader.css.js');
|
|
|
113
114
|
|
|
114
115
|
const withBaseName = makePrefixer.makePrefixer("saltAccordionHeader");
|
|
115
116
|
function ExpansionIcon({ expanded }) {
|
|
117
|
+
const { CollapseIcon, ExpandIcon } = SemanticIconProvider.useIcon();
|
|
116
118
|
if (expanded) {
|
|
117
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
119
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, {
|
|
118
120
|
"aria-hidden": true,
|
|
119
121
|
className: withBaseName("icon")
|
|
120
122
|
});
|
|
121
123
|
}
|
|
122
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
124
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {
|
|
123
125
|
"aria-hidden": true,
|
|
124
126
|
className: withBaseName("icon")
|
|
125
127
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"AccordionHeader.js","sources":["../src/accordion/AccordionHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type MouseEvent,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusIndicator } from \"../status-indicator\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\n\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionHeaderCss from \"./AccordionHeader.css\";\n\nexport interface AccordionHeaderProps\n extends ComponentPropsWithoutRef<\"button\"> {\n /**\n * The content of the Accordion Header\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionHeader\");\n\nfunction ExpansionIcon({ expanded }: { expanded: boolean }) {\n const { CollapseIcon, ExpandIcon } = useIcon();\n if (expanded) {\n return <CollapseIcon aria-hidden className={withBaseName(\"icon\")} />;\n }\n\n return <ExpandIcon aria-hidden className={withBaseName(\"icon\")} />;\n}\n\nexport const AccordionHeader = forwardRef<\n HTMLButtonElement,\n AccordionHeaderProps\n>(function AccordionHeader(props, ref) {\n const { children, className, onClick, id, ...rest } = props;\n const {\n value,\n expanded,\n toggle,\n indicatorSide,\n disabled,\n headerId,\n panelId,\n setHeaderId,\n status,\n } = useAccordion();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-header\",\n css: accordionHeaderCss,\n window: targetWindow,\n });\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n toggle(event);\n onClick?.(event);\n };\n\n useIsomorphicLayoutEffect(() => {\n if (id) {\n setHeaderId(id);\n }\n }, [id, setHeaderId]);\n\n return (\n <button\n ref={ref}\n className={clsx(\n withBaseName(),\n { [withBaseName(status ?? \"\")]: status },\n className,\n )}\n disabled={disabled}\n onClick={handleClick}\n aria-expanded={expanded}\n id={headerId}\n aria-controls={panelId}\n value={value}\n type=\"button\"\n {...rest}\n >\n {indicatorSide === \"left\" && <ExpansionIcon expanded={expanded} />}\n <span className={withBaseName(\"content\")}>{children}</span>\n {status && !disabled && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={status}\n />\n )}\n {indicatorSide === \"right\" && <ExpansionIcon expanded={expanded} />}\n </button>\n );\n});\n"],"names":["makePrefixer","useIcon","jsx","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAmC,EAAA;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA,CAAA;AAC7C,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,uBAAQC,cAAA,CAAA,YAAA,EAAA;AAAA,MAAa,aAAW,EAAA,IAAA;AAAA,MAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,KAAG,CAAA,CAAA;AAAA,GACpE;AAEA,EAAA,uBAAQA,cAAA,CAAA,UAAA,EAAA;AAAA,IAAW,aAAW,EAAA,IAAA;AAAA,IAAC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,GAAG,CAAA,CAAA;AAClE,CAAA;AAEO,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,OAAS,EAAA,EAAA,EAAA,GAAO,MAAS,GAAA,KAAA,CAAA;AACtD,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,MACEC,6BAAa,EAAA,CAAA;AAEjB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,EAAI,EAAA,WAAW,CAAC,CAAA,CAAA;AAEpB,EAAA,uBACGC,eAAA,CAAA,QAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAA,CAAa,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,IAAI,MAAO,EAAA;AAAA,MACvC,SAAA;AAAA,KACF;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,eAAe,EAAA,QAAA;AAAA,IACf,EAAI,EAAA,QAAA;AAAA,IACJ,eAAe,EAAA,OAAA;AAAA,IACf,KAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,aAAA,KAAkB,0BAAWT,cAAA,CAAA,aAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAoB,CAAA;AAAA,sBAC/DA,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAI,QAAA;AAAA,OAAS,CAAA;AAAA,MACnD,MAAA,IAAU,CAAC,QAAA,oBACTA,cAAA,CAAAU,+BAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QACzC,MAAA;AAAA,OACF,CAAA;AAAA,MAED,aAAA,KAAkB,2BAAYV,cAAA,CAAA,aAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAoB,CAAA;AAAA,KAAA;AAAA,GACnE,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -108,6 +108,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
109
109
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
110
110
|
require('../tooltip/Tooltip.js');
|
|
111
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
111
112
|
var AccordionContext = require('./AccordionContext.js');
|
|
112
113
|
var AccordionPanel$1 = require('./AccordionPanel.css.js');
|
|
113
114
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the Accordion Panel\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, id, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { headerId, panelId, setPanelId, expanded, indicatorSide } =\n useAccordion();\n\n useIsomorphicLayoutEffect(() => {\n if (id) {\n setPanelId(id);\n }\n }, [id, setPanelId]);\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={panelId}\n aria-labelledby={headerId}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n })}\n >\n {children}\n </div>\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AccordionPanel.js","sources":["../src/accordion/AccordionPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\n\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useAccordion } from \"./AccordionContext\";\nimport accordionPanelCss from \"./AccordionPanel.css\";\n\nexport interface AccordionPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * The content of the Accordion Panel\n */\n children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAccordionPanel\");\n\nexport const AccordionPanel = forwardRef<HTMLDivElement, AccordionPanelProps>(\n function AccordionPanel(props, ref) {\n const { children, className, id, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-accordion-panel\",\n css: accordionPanelCss,\n window: targetWindow,\n });\n\n const { headerId, panelId, setPanelId, expanded, indicatorSide } =\n useAccordion();\n\n useIsomorphicLayoutEffect(() => {\n if (id) {\n setPanelId(id);\n }\n }, [id, setPanelId]);\n\n return (\n <div\n ref={ref}\n className={clsx(withBaseName(), className)}\n role=\"region\"\n id={panelId}\n aria-labelledby={headerId}\n aria-hidden={!expanded ? \"true\" : undefined}\n hidden={!expanded}\n {...rest}\n >\n <div className={withBaseName(\"inner\")}>\n <div\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"indentedContent\")]: indicatorSide === \"left\",\n })}\n >\n {children}\n </div>\n </div>\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","AccordionPanel","useWindow","useComponentCssInjection","accordionPanelCss","useAccordion","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,EAAA,EAAA,GAAO,MAAS,GAAA,KAAA,CAAA;AAE7C,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,YAAY,QAAU,EAAA,aAAA,KAC/CC,6BAAa,EAAA,CAAA;AAEf,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,UAAA,CAAW,EAAE,CAAA,CAAA;AAAA,OACf;AAAA,KACC,EAAA,CAAC,EAAI,EAAA,UAAU,CAAC,CAAA,CAAA;AAEnB,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAK,EAAA,QAAA;AAAA,MACL,EAAI,EAAA,OAAA;AAAA,MACJ,iBAAiB,EAAA,QAAA;AAAA,MACjB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,QAAQ,CAAC,QAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAClC,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,aAAkB,KAAA,MAAA;AAAA,WACtD,CAAA;AAAA,UAEA,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -108,6 +108,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
109
109
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
110
110
|
require('../tooltip/Tooltip.js');
|
|
111
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
111
112
|
|
|
112
113
|
let warnedOnce = false;
|
|
113
114
|
const useAriaAnnouncer = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport {\n type AriaAnnouncer,\n AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions,\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context?.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\",\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context],\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval],\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce],\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport {\n type AriaAnnouncer,\n AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions,\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context?.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\",\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context],\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval],\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce],\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAaC,aAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAA,MAAM,4BAA4B,OAAS,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,QAAA,CAAA;AAE3C,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACfC,iBAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
|
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var icons = require('@salt-ds/icons');
|
|
7
6
|
var styles = require('@salt-ds/styles');
|
|
8
7
|
var window = require('@salt-ds/window');
|
|
9
8
|
var clsx = require('clsx');
|
|
10
9
|
var React = require('react');
|
|
11
|
-
var
|
|
10
|
+
var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
12
11
|
var makePrefixer = require('../utils/makePrefixer.js');
|
|
13
12
|
require('../utils/useFloatingUI/useFloatingUI.js');
|
|
14
13
|
require('../utils/useId.js');
|
|
@@ -19,6 +18,7 @@ require('../accordion/AccordionPanel.js');
|
|
|
19
18
|
require('../accordion/Accordion.js');
|
|
20
19
|
require('../accordion/AccordionHeader.js');
|
|
21
20
|
require('../aria-announcer/AriaAnnouncerContext.js');
|
|
21
|
+
var useAvatarImage = require('./useAvatarImage.js');
|
|
22
22
|
require('../badge/Badge.js');
|
|
23
23
|
require('../banner/Banner.js');
|
|
24
24
|
require('../banner/BannerActions.js');
|
|
@@ -30,6 +30,7 @@ require('../button/Button.js');
|
|
|
30
30
|
require('../card/Card.js');
|
|
31
31
|
require('../checkbox/Checkbox.js');
|
|
32
32
|
require('../checkbox/CheckboxGroup.js');
|
|
33
|
+
require('@salt-ds/icons');
|
|
33
34
|
require('../combo-box/ComboBox.js');
|
|
34
35
|
require('../dialog/Dialog.js');
|
|
35
36
|
require('../dialog/DialogHeader.js');
|
|
@@ -121,12 +122,14 @@ const Avatar = React.forwardRef(function Avatar2({
|
|
|
121
122
|
src,
|
|
122
123
|
size = DEFAULT_AVATAR_SIZE,
|
|
123
124
|
style: styleProp,
|
|
124
|
-
fallbackIcon
|
|
125
|
-
"aria-label": "User Avatar"
|
|
126
|
-
}),
|
|
125
|
+
fallbackIcon: fallbackIconProp,
|
|
127
126
|
...rest
|
|
128
127
|
}, ref) {
|
|
129
128
|
const targetWindow = window.useWindow();
|
|
129
|
+
const { UserIcon } = SemanticIconProvider.useIcon();
|
|
130
|
+
const fallbackIcon = fallbackIconProp === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {
|
|
131
|
+
"aria-label": "User Avatar"
|
|
132
|
+
}) : fallbackIconProp;
|
|
130
133
|
styles.useComponentCssInjection({
|
|
131
134
|
testId: "salt-avatar",
|
|
132
135
|
css: Avatar$1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * The name that Avatar represents.\n */\n name?: string;\n /**\n * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n * If a function is not passed or returns undefined, Avatar will default to Icon.\n */\n nameToInitials?: NameToInitials;\n /**\n * Image src of Avatar.\n */\n src?: string;\n /**\n * Multiplier for the base avatar.\n */\n size?: number;\n /**\n * Icon to be used as a default item. Defaults to `UserIcon`\n */\n fallbackIcon?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\nconst defaultNameToInitials = (name?: string) =>\n name\n ?.split(\" \")\n .slice(0, 2)\n .map((n) => n[0])\n .join(\"\")\n .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n className,\n children: childrenProp,\n name,\n nameToInitials = defaultNameToInitials,\n src,\n size = DEFAULT_AVATAR_SIZE,\n style: styleProp,\n fallbackIcon: fallbackIconProp,\n ...rest\n },\n ref,\n) {\n const targetWindow = useWindow();\n const { UserIcon } = useIcon();\n\n const fallbackIcon =\n fallbackIconProp === undefined ? (\n <UserIcon aria-label=\"User Avatar\" />\n ) : (\n fallbackIconProp\n );\n\n useComponentCssInjection({\n testId: \"salt-avatar\",\n css: avatarCss,\n window: targetWindow,\n });\n\n let children: ReactNode;\n\n const style = {\n ...styleProp,\n \"--saltAvatar-size-multiplier\": `${size}`,\n };\n\n const status = useAvatarImage({ src });\n const hasImgNotFailing = status === \"loaded\";\n if (hasImgNotFailing) {\n children = <img alt={name} src={src} />;\n } else if (childrenProp != null) {\n children = childrenProp;\n }\n\n const avatarInitials = nameToInitials(name);\n\n const initialsProps = avatarInitials\n ? {\n role: \"img\",\n \"aria-label\": name,\n }\n : {};\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withImage\")]: hasImgNotFailing },\n className,\n )}\n {...initialsProps}\n {...rest}\n >\n {children || avatarInitials || fallbackIcon}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","jsx","useComponentCssInjection","avatarCss","useAvatarImage","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAC9C,MAAM,mBAAsB,GAAA,CAAA,CAAA;AAE5B,MAAM,qBAAwB,GAAA,CAAC,IAC7B,KAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CACI,MAAM,GACP,CAAA,CAAA,KAAA,CAAM,CAAG,EAAA,CAAA,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,CAAA,CAAA,CAAA,CACb,KAAK,EACL,CAAA,CAAA,WAAA,EAAA,CAAA;AAEQ,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,cAAiB,GAAA,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAO,GAAA,mBAAA;AAAA,EACP,KAAO,EAAA,SAAA;AAAA,EACP,YAAc,EAAA,gBAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,4BAAQ,EAAA,CAAA;AAE7B,EAAM,MAAA,YAAA,GACJ,gBAAqB,KAAA,KAAA,CAAA,mBAClBC,cAAA,CAAA,QAAA,EAAA;AAAA,IAAS,YAAW,EAAA,aAAA;AAAA,GAAc,CAEnC,GAAA,gBAAA,CAAA;AAGJ,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAI,IAAA,QAAA,CAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,gCAAgC,CAAG,EAAA,IAAA,CAAA,CAAA;AAAA,GACrC,CAAA;AAEA,EAAA,MAAM,MAAS,GAAAC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAW,KAAA,QAAA,CAAA;AACpC,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBAAYH,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GACvC,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb;AAEA,EAAM,MAAA,cAAA,GAAiB,eAAe,IAAI,CAAA,CAAA;AAE1C,EAAA,MAAM,gBAAgB,cAClB,GAAA;AAAA,IACE,IAAM,EAAA,KAAA;AAAA,IACN,YAAc,EAAA,IAAA;AAAA,MAEhB,EAAC,CAAA;AAEL,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAW,EAAAI,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,WAAW,IAAI,gBAAiB,EAAA;AAAA,MAChD,SAAA;AAAA,KACF;AAAA,IACC,GAAG,aAAA;AAAA,IACH,GAAG,IAAA;AAAA,IAEH,sBAAY,cAAkB,IAAA,YAAA;AAAA,GACjC,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -108,6 +108,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
109
109
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
110
110
|
require('../tooltip/Tooltip.js');
|
|
111
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
111
112
|
|
|
112
113
|
function useAvatarImage({ src }) {
|
|
113
114
|
const [status, setStatus] = React.useState("loading");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { type ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" | \"loading\" | \"loaded\" | \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":["useState","useEffect","useIsomorphicLayoutEffect"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { type ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" | \"loading\" | \"loaded\" | \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":["useState","useEffect","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAE1B,SAAS,CAAA,CAAA;AAEX,EAAAC,eAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
|
package/dist-cjs/badge/Badge.js
CHANGED
|
@@ -107,6 +107,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
107
107
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
109
109
|
require('../tooltip/Tooltip.js');
|
|
110
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
110
111
|
var Badge$1 = require('./Badge.css.js');
|
|
111
112
|
|
|
112
113
|
const withBaseName = makePrefixer.makePrefixer("saltBadge");
|
|
@@ -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 { type HTMLAttributes, type ReactNode, forwardRef } 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":"
|
|
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 { type HTMLAttributes, type ReactNode, forwardRef } 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,CAAA;AAEtC,MAAM,KAAQ,GAAAC,gBAAA,CAAwC,SAASC,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAM,GAAA,GAAA,EAAK,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACjD,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YACJ,OAAO,KAAA,KAAU,YAAY,KAAQ,GAAA,GAAA,GAAM,GAAG,GAAS,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAEzD,EAAM,MAAA,QAAA,GAAW,OAAO,KAAU,KAAA,WAAA,CAAA;AAElC,EAAA,uBACGC,eAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACAC,cAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,UACrC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -107,6 +107,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
107
107
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
109
109
|
require('../tooltip/Tooltip.js');
|
|
110
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
110
111
|
var Banner$1 = require('./Banner.css.js');
|
|
111
112
|
|
|
112
113
|
const withBaseName = makePrefixer.makePrefixer("saltBanner");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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":"
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,GAAU,SAAW,EAAA,MAAA,GAAS,MAAW,EAAA,GAAA,IAAA,IAChE,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,MAAM,CAAA;AAAA,MACnB,aAAa,OAAO,CAAA;AAAA,MACpB,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IACJ,WAAU,EAAA,QAAA;AAAA,IAEV,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,+BAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -107,6 +107,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
107
107
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
109
109
|
require('../tooltip/Tooltip.js');
|
|
110
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
110
111
|
var BannerActions$1 = require('./BannerActions.css.js');
|
|
111
112
|
|
|
112
113
|
const withBaseName = makePrefixer.makePrefixer("saltBannerActions");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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":"
|
|
1
|
+
{"version":3,"file":"BannerActions.js","sources":["../src/banner/BannerActions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -107,6 +107,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
107
107
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
109
109
|
require('../tooltip/Tooltip.js');
|
|
110
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
110
111
|
var BannerContent$1 = require('./BannerContent.css.js');
|
|
111
112
|
|
|
112
113
|
const withBaseName = makePrefixer.makePrefixer("saltBannerContent");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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":"
|
|
1
|
+
{"version":3,"file":"BannerContent.js","sources":["../src/banner/BannerContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n type ReactNode,\n forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAEzE;AACF;;;;"}
|
|
@@ -107,6 +107,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
107
107
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
109
109
|
require('../tooltip/Tooltip.js');
|
|
110
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
110
111
|
var BorderItem$1 = require('./BorderItem.css.js');
|
|
111
112
|
|
|
112
113
|
const BORDER_POSITION = [
|
|
@@ -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 { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n makePrefixer,\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 >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>,\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<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 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);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":"
|
|
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 { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { GridItem, type GridItemProps } from \"../grid-item\";\nimport {\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n makePrefixer,\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 >;\n\nconst withBaseName = makePrefixer(\"saltBorderItem\");\n\ntype BorderItemComponent = <T extends ElementType = \"div\">(\n props: BorderItemProps<T>,\n) => ReactElement | null;\n\nexport const BorderItem: BorderItemComponent = forwardRef(\n <T extends ElementType>(\n {\n children,\n className,\n position,\n sticky = false,\n style,\n ...rest\n }: BorderItemProps<T>,\n ref?: PolymorphicRef<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 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);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","borderItemCss","jsx","GridItem","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,eAAkB,GAAA;AAAA,EAC7B,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,EAAA;AA2BA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAS,GAAA,KAAA;AAAA,IACT,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,cAAiB,GAAA;AAAA,MACrB,GAAG,KAAA;AAAA,MACH,qBAAuB,EAAA,QAAA;AAAA,KACzB,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAAC,iBAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,mBAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,KAAO,EAAA,cAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
|
|
@@ -107,6 +107,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
107
107
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
109
109
|
require('../tooltip/Tooltip.js');
|
|
110
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
110
111
|
|
|
111
112
|
const withBaseName = makePrefixer.makePrefixer("saltBorderLayout");
|
|
112
113
|
const numberOfColumns = 3;
|
|
@@ -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 ReactElement,\n forwardRef,\n useEffect,\n} from \"react\";\n\nimport type { BorderItemProps } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n makePrefixer,\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: ReactElement<BorderItemProps<T>>[];\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n <T extends ElementType>(\n { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n ref?: PolymorphicRef<T>,\n ) => {\n const borderAreas = Children.map(\n children,\n (child: ReactElement<BorderItemProps<T>>) => child.props.position,\n );\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 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","Children","useEffect","jsx","GridLayout","clsx"],"mappings":"
|
|
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 ReactElement,\n forwardRef,\n useEffect,\n} from \"react\";\n\nimport type { BorderItemProps } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n type PolymorphicComponentPropWithRef,\n type PolymorphicRef,\n makePrefixer,\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: ReactElement<BorderItemProps<T>>[];\n }\n >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n props: BorderLayoutProps<T>,\n) => ReactElement | null;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n <T extends ElementType>(\n { children, className, gap, style, ...rest }: BorderLayoutProps<T>,\n ref?: PolymorphicRef<T>,\n ) => {\n const borderAreas = Children.map(\n children,\n (child: ReactElement<BorderItemProps<T>>) => child.props.position,\n );\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 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","Children","useEffect","jsx","GridLayout","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAEpD,MAAM,eAAkB,GAAA,CAAA,CAAA;AAMjB,MAAM,YAAsC,GAAAC,gBAAA;AAAA,EACjD,CACE,EAAE,QAAU,EAAA,SAAA,EAAW,KAAK,KAAU,EAAA,GAAA,IAAA,IACtC,GACG,KAAA;AACH,IAAA,MAAM,cAAcC,cAAS,CAAA,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAA4C,KAAA,KAAA,CAAM,KAAM,CAAA,QAAA;AAAA,KAC3D,CAAA;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,CAAA;AAElC,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE5D,IAAA,MAAM,YAAe,GAAA,WAAA,CAAY,QAAS,CAAA,MAAM,IAAI,MAAS,GAAA,QAAA,CAAA;AAE7D,IAAM,MAAA,UAAA,GAAa,GAAG,WAAsB,CAAA,QAAA,EAAA,YAAA,CAAA,CAAA,CAAA;AAE5C,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,CAAA;AAElC,IAAM,MAAA,iBAAA,GAAoB,CAAI,CAAA,EAAA,UAAA,CAAA,GAAA,EAAgB,UAAgB,CAAA,GAAA,EAAA,aAAA,CAAA,CAAA,CAAA,CAAA;AAE9D,IAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,QAAA,CAAS,QAAQ,CAAA,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,oEAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF,EAAG,CAAC,cAAc,CAAC,CAAA,CAAA;AAEnB,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAA6B,EAAA,iBAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,WAAW,qBAAqB,CAAA;AAAA,MAChE,OAAS,EAAA,eAAA;AAAA,MACT,KAAK,GAAO,IAAA,CAAA;AAAA,MACZ,KAAO,EAAA,kBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -108,6 +108,7 @@ require('../toggle-button/ToggleButton.js');
|
|
|
108
108
|
require('../toggle-button-group/ToggleButtonGroup.js');
|
|
109
109
|
require('../toggle-button-group/ToggleButtonGroupContext.js');
|
|
110
110
|
require('../tooltip/Tooltip.js');
|
|
111
|
+
require('../semantic-icon-provider/SemanticIconProvider.js');
|
|
111
112
|
|
|
112
113
|
const Context = createContext.createContext("BreakpointContext", {
|
|
113
114
|
matchedBreakpoints: []
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useState } from \"react\";\nimport { createContext, useIsomorphicLayoutEffect } from \"../utils\";\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 = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);\n const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\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 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 matchers.forEach(({ mq, handler }) => {\n handler();\n mq.addEventListener(\"change\", handler);\n });\n\n return () => {\n matchers.forEach(({ mq, handler }) => {\n mq.removeEventListener(\"change\", handler);\n });\n };\n }, [supportsMatchMedia]);\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","useState","useIsomorphicLayoutEffect","useContext"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useState } from \"react\";\nimport { createContext, useIsomorphicLayoutEffect } from \"../utils\";\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 = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);\n const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\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 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 matchers.forEach(({ mq, handler }) => {\n handler();\n mq.addEventListener(\"change\", handler);\n });\n\n return () => {\n matchers.forEach(({ mq, handler }) => {\n mq.removeEventListener(\"change\", handler);\n });\n };\n }, [supportsMatchMedia]);\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","useState","useIsomorphicLayoutEffect","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,OAAA,GAAUA,4BAAiC,mBAAqB,EAAA;AAAA,EACpE,oBAAoB,EAAC;AACvB,CAAC,CAAA,CAAA;AAOM,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,KAAA,CAAA;AAEzC,EACE,uBAAAC,cAAA,CAAC,QAAQ,QAAR,EAAA;AAAA,IAAiB,KAAA,EAAO,EAAE,kBAAmB,EAAA;AAAA,IAC3C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,sBAAsB,WAAwC,EAAA;AAC5E,EAAA,MAAM,UAAU,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAA,CAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA,CAAA;AACxE,EAAM,MAAA,OAAA,GAAU,QAAQ,GAAI,CAAA,CAAC,GAAG,KAAK,CAAM,KAAA,CAAA,YAAA,EAAe,KAAU,CAAA,GAAA,CAAA,CAAA,CAAA;AAEpE,EAAA,MAAM,qBACJ,OAAO,MAAA,KAAW,WAAe,IAAA,OAAO,OAAO,UAAe,KAAA,UAAA,CAAA;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,CAAA;AAEtE,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,kBAAoB,EAAA;AACvB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,QAAW,GAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC7C,MAAM,MAAA,EAAA,GAAK,MAAO,CAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAClC,MAAM,MAAA,EAAA,GAAK,QAAQ,KAAO,CAAA,CAAA,CAAA,CAAA,CAAA;AAE1B,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,KAAK,EAAG,CAAA,OAAA;AAAA,aACX,CAAA;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AAAA,OACF,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,QAAA,CAAS,OAAQ,CAAA,CAAC,EAAE,EAAA,EAAI,SAAc,KAAA;AACpC,MAAQ,OAAA,EAAA,CAAA;AACR,MAAG,EAAA,CAAA,gBAAA,CAAiB,UAAU,OAAO,CAAA,CAAA;AAAA,KACtC,CAAA,CAAA;AAED,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,OAAQ,CAAA,CAAC,EAAE,EAAA,EAAI,SAAc,KAAA;AACpC,QAAG,EAAA,CAAA,mBAAA,CAAoB,UAAU,OAAO,CAAA,CAAA;AAAA,OACzC,CAAA,CAAA;AAAA,KACH,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,kBAAkB,CAAE,CAAA,MAAA;AAAA,IACrC,CAAC,OAAO,kBAAmB,CAAA,EAAA,CAAA;AAAA,GAC7B,CAAA;AACF,CAAA;AAEO,SAAS,aAEd,GAAA;AAjFF,EAAA,IAAA,EAAA,CAAA;AAkFE,EAAA,MAAM,EAAE,kBAAA,EAAuB,GAAAC,gBAAA,CAAW,OAAO,CAAA,CAAA;AAEjD,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,UAAA,EAAA,CAAY,EAAmB,GAAA,kBAAA,CAAA,CAAA,CAAA,KAAnB,IAAyB,GAAA,EAAA,GAAA,IAAA;AAAA,GACvC,CAAA;AACF;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n --button-borderColor: var(--salt-actionable-cta-borderColor);\n --button-borderColor-hover: var(--salt-actionable-cta-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-cta-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-cta-borderColor-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n --button-borderColor: var(--salt-actionable-primary-borderColor);\n --button-borderColor-hover: var(--salt-actionable-primary-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-primary-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-primary-borderColor-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n --button-borderColor: var(--salt-actionable-secondary-borderColor);\n --button-borderColor-hover: var(--salt-actionable-secondary-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-secondary-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-secondary-borderColor-disabled);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n";
|
|
3
|
+
var css_248z = ".saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-background-disabled: var(--salt-actionable-background-disabled);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Button.css.js.map
|