@salt-ds/core 1.47.4 → 1.48.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @salt-ds/core
 
+## 1.48.0
+
+### Minor Changes
+
+- f1dc9fc: Added `VerticalNavigation` and related components.
+
+  `VerticalNavigation` has been introduced to replace the existing `NavigationItem` component for vertical navigation. The new component provides a more structured and flexible way to create vertical navigation. For now you can continue to use the `NavigationItem` component, but we recommend migrating to the new `VerticalNavigation` component as the `NavigationItem` component will be deprecated in a future release and removed in the future major release.
+
+  ```tsx
+  <VerticalNavigation aria-label="Basic sidebar" appearance="indicator">
+    <VerticalNavigationItem active>
+      <VerticalNavigationItemContent>
+        <VerticalNavigationItemTrigger>
+          <VerticalNavigationItemLabel>Item 1</VerticalNavigationItemLabel>
+        </VerticalNavigationItemTrigger>
+      </VerticalNavigationItemContent>
+    </VerticalNavigationItem>
+  </VerticalNavigation>
+  ```
+
+- f1dc9fc: Added `Collapsible` and related components.
+
+  `Collapsible` enables content to be either collapsed (hidden) or expanded (visible). It has two elements: a trigger and a panel whose visibility is controlled by the button.
+
+  ```tsx
+  <Collapsible>
+    <CollapsibleTrigger>
+      <Button>Click</Button>
+    </CollapsibleTrigger>
+    <CollapsiblePanel>
+      <p>Content</p>
+    </CollapsiblePanel>
+  </Collapsible>
+  ```
+
+### Patch Changes
+
+- 9560539: Fixed foreground color not being applied explicitly to Banner.
+
+## 1.47.5
+
+### Patch Changes
+
+- 846d975: Fixed Pagination active border color.
+- 8538730: Removed text selection background color override.
+- 8261887: Fixed Tooltip showing when content is null.
+- e6445dc: Fixed Stepper using incorrect font styles in steps.
+- ff646e2: Fixed Dialog having an unnecessary scrollbar.
+- 9a25824: Updated `DialogHeader`'s responsive behaviour to meet WCAG 2.1 Reflow success criterion.
+- 64ef723: Updated read-only style for RadioButton and Checkbox to meet color contrast requirements.
+
 ## 1.47.4
 
 ### Patch Changes

package/css/salt-core.css

@@ -299,6 +299,7 @@
   font-size: var(--salt-text-fontSize);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
+  color: var(--salt-content-primary-foreground);
 }
 .saltBanner-icon.saltIcon {
   min-height: var(--salt-size-base);
@@ -860,7 +861,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
 }
 .saltCheckbox-input:focus-visible + .saltCheckboxIcon {
-  outline-offset: var(--salt-focused-outlineOffset);
+  outline-offset: var(--salt-spacing-fixed-100);
   outline: var(--saltCheckbox-outline, var(--salt-focused-outline));
   border-color: var(--salt-selectable-borderColor-hover);
   color: var(--salt-selectable-foreground-hover);
@@ -983,8 +984,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   outline-color: var(--salt-status-warning-foreground-decorative);
 }
 .saltCheckboxIcon-readOnly,
-.saltCheckbox:hover .saltCheckboxIcon-readOnly {
+.saltCheckbox:hover .saltCheckboxIcon-readOnly,
+.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {
   border-color: var(--salt-selectable-borderColor-readonly);
+  border-style: var(--salt-borderStyle-dashed);
   color: var(--salt-content-primary-foreground);
 }
 .saltCheckboxIcon > svg {
@@ -992,6 +995,28 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transform: scale(1.01);
 }
 
+/* src/collapsible/CollapsiblePanel.css */
+.saltCollapsiblePanel {
+  display: grid;
+  transition:
+    grid-template-rows var(--salt-duration-perceptible) ease-in-out,
+    opacity var(--salt-duration-perceptible) ease-in-out,
+    visibility var(--salt-duration-perceptible) ease-in-out;
+}
+.saltCollapsiblePanel[aria-hidden=true] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+}
+.saltCollapsiblePanel {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+}
+.saltCollapsiblePanel-inner {
+  overflow: hidden;
+}
+
 /* src/combo-box/ComboBox.css */
 .saltComboBox-focused {
   outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));
@@ -1124,6 +1149,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   flex: 1 1 auto;
   position: relative;
   display: flex;
+  box-sizing: border-box;
 }
 .saltDialogContent-inner {
   overflow-y: auto;
@@ -1131,6 +1157,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
   max-height: inherit;
   flex: 1;
+  box-sizing: border-box;
 }
 .saltDialogContent-overflow {
   padding-right: var(--salt-spacing-100);
@@ -1141,6 +1168,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltDialogContent-scrollBottom.saltDialogContent-inner {
   border-bottom-color: var(--salt-separable-tertiary-borderColor);
 }
+@supports selector(:has(*)) {
+  .saltDialogContent:has(.saltDialogContent-overflow) {
+    min-height: calc(var(--salt-text-lineHeight) * 4);
+  }
+}
 
 /* src/dialog/DialogHeader.css */
 .saltDialogHeader {
@@ -1163,6 +1195,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
   gap: var(--salt-spacing-50);
   padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
   align-items: flex-start;
+  min-width: 0;
+  word-break: break-word;
 }
 .saltDialogHeader-header > .saltText {
   margin: 0;
@@ -1922,9 +1956,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltInput-input:focus {
   outline: none;
 }
-.saltInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
 .saltInput-input::placeholder {
   color: var(--salt-content-secondary-foreground);
   font-weight: var(--salt-text-fontWeight-small);
@@ -2565,9 +2596,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltMultilineInput-textarea:focus {
   outline: none;
 }
-.saltMultilineInput-textarea::selection {
-  background: var(--salt-content-foreground-highlight);
-}
 .saltMultilineInput-disabled .saltMultilineInput-textarea::selection {
   background: none;
 }
@@ -2903,7 +2931,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   line-height: var(--salt-text-lineHeight);
   letter-spacing: var(--salt-text-letterSpacing);
   cursor: var(--salt-cursor-hover);
-  border-radius: var(--salt-palette-corner-weak, 0);
+  border-radius: var(--salt-palette-corner-weak);
 }
 .saltPageButton:hover,
 .saltPageButton:focus-visible {
@@ -2921,7 +2949,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   cursor: var(--salt-cursor-readonly);
 }
 .saltPageButton[aria-current=page] {
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
   background: var(--salt-selectable-background-selected);
 }
 .saltPageButton-fixed {
@@ -3318,9 +3346,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltPillInput-input:focus {
   outline: none;
 }
-.saltPillInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
 .saltPillInput-disabled .saltPillInput-input::selection {
   background: none;
 }
@@ -3365,7 +3390,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {
   outline: var(--saltRadioButton-outline, var(--salt-focused-outline));
-  outline-offset: var(--salt-focused-outlineOffset);
+  outline-offset: var(--salt-spacing-fixed-100);
   border-color: var(--salt-selectable-borderColor-hover);
   color: var(--salt-selectable-foreground-hover);
   clip-path: unset;
@@ -3463,8 +3488,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   outline-color: var(--salt-status-warning-foreground-decorative);
 }
 .saltRadioButtonIcon-readOnly,
-.saltRadioButton:hover .saltRadioButtonIcon-readOnly {
+.saltRadioButton:hover .saltRadioButtonIcon-readOnly,
+.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-readOnly {
   border-color: var(--salt-selectable-borderColor-readonly);
+  border-style: var(--salt-borderStyle-dashed);
   color: var(--salt-content-primary-foreground);
 }
 .saltRadioButtonIcon > svg {
@@ -4073,9 +4100,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));
   letter-spacing: var(--salt-text-letterSpacing);
 }
-.saltText::selection {
-  background: var(--saltText-highlight, var(--salt-content-foreground-highlight));
-}
 .saltText-lineClamp {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -4733,6 +4757,153 @@ label.saltText small,
   --tooltip-status-borderColor: var(--salt-status-success-borderColor);
 }
 
+/* src/vertical-navigation/VerticalNavigation.css */
+.saltVerticalNavigation ol {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+.saltVerticalNavigationSubMenu > .saltDivider-horizontal,
+.saltVerticalNavigationItem > .saltDivider-horizontal,
+.saltVerticalNavigation ol > .saltDivider-horizontal {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner {
+  margin-bottom: calc(var(--salt-size-fixed-100) * -1);
+}
+.saltVerticalNavigation [data-has-direct-icons=false] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner {
+  margin-bottom: 0;
+}
+.saltVerticalNavigation .saltCollapsiblePanel-inner .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu,
+.saltVerticalNavigation .saltCollapsiblePanel[aria-hidden=true] .saltCollapsiblePanel-inner .saltVerticalNavigationSubMenu {
+  border-bottom: none;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemContent.css */
+.saltVerticalNavigationItemContent {
+  --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));
+  --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));
+  --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));
+}
+.saltVerticalNavigationItemContent {
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  appearance: none;
+  -webkit-appearance: none;
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  min-width: 4em;
+  padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weak, 0);
+  overflow: hidden;
+  cursor: var(--salt-cursor-hover);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-text-h4-fontWeight);
+  font-family: var(--salt-text-h4-fontFamily);
+  text-align: var(--salt-text-textAlign);
+  letter-spacing: var(--salt-text-letterSpacing);
+  line-height: var(--salt-text-h4-lineHeight);
+  font-size: var(--salt-text-h4-fontSize);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {
+  left: var(--salt-spacing-50);
+  content: "";
+  position: absolute;
+  height: var(--salt-size-base);
+  border-radius: var(--salt-palette-corner-strongest);
+  width: var(--salt-size-indicator);
+}
+.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {
+  background: var(--salt-navigable-accent-indicator-active);
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+}
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {
+  background: var(--salt-navigable-accent-background-active);
+  border-color: var(--salt-navigable-accent-borderColor-active);
+}
+.saltVerticalNavigationItemContent .saltIcon,
+.saltVerticalNavigationItemContent .saltBadge {
+  min-height: var(--salt-text-lineHeight);
+}
+.saltVerticalNavigationItemContent-focused {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+  z-index: 1;
+}
+.saltVerticalNavigationItemContent:hover {
+  background: var(--salt-overlayable-background-hover);
+}
+.saltVerticalNavigation .saltVerticalNavigationItemContent-active,
+.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {
+  font-weight: var(--salt-text-h4-fontWeight);
+}
+@supports selector(:has(*)) {
+  .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {
+    background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);
+  }
+}
+
+/* src/vertical-navigation/VerticalNavigationItemLabel.css */
+.saltVerticalNavigationItemLabel {
+  flex: 1;
+}
+
+/* src/vertical-navigation/VerticalNavigationItemTrigger.css */
+.saltVerticalNavigationItemTrigger {
+  all: unset;
+  padding: var(--salt-spacing-75) 0;
+  display: flex;
+  gap: var(--salt-spacing-100);
+  width: 100%;
+}
+.saltVerticalNavigationItemTrigger::before {
+  content: "";
+  display: block;
+  width: 100%;
+  position: absolute;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
+/* src/vertical-navigation/VerticalNavigationSubMenu.css */
+.saltVerticalNavigationSubMenu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-fixed-100);
+  list-style: none;
+  padding: var(--salt-spacing-fixed-100) 0 0;
+  margin: 0;
+}
+.saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent {
+  font-weight: var(--salt-text-h4-fontWeight-small);
+}
+
 /* src/progress/CircularProgress/CircularProgress.css */
 .saltCircularProgress {
   color: var(--salt-content-primary-foreground);
@@ -5247,6 +5418,11 @@ label.saltText small,
 /* src/stepper/internal/StepText.css */
 .saltStepText-label {
   grid-area: label;
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+  font-family: var(--salt-text-fontFamily);
+  color: var(--salt-content-primary-foreground);
+  font-weight: var(--salt-text-fontWeight);
 }
 .saltStepper-horizontal .saltStepText-label {
   margin-top: var(--salt-spacing-50);
@@ -5254,10 +5430,7 @@ label.saltText small,
 .saltStepper-vertical .saltStepText-label {
   padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
   padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);
-  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
-}
-.saltStep-depth-0 > .saltText.saltStepText-label {
-  font-weight: var(--salt-text-fontWeight-strong);
+  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));
 }
 .saltStep-depth-0 > .saltText.saltStepText-label {
   font-weight: var(--salt-text-fontWeight-strong);
@@ -5265,10 +5438,15 @@ label.saltText small,
 .saltStepText-description {
   grid-area: description;
   color: var(--salt-content-secondary-foreground);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-label-fontWeight-strong);
+  font-family: var(--salt-text-label-fontFamily);
+  line-height: var(--salt-text-label-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
 }
 .saltStepper-vertical .saltStepText-description {
   padding-bottom: var(--salt-spacing-300);
-  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));
+  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));
 }
 .saltStep-status-warning > .saltStepText-description {
   color: var(--salt-status-warning-foreground-informative);
@@ -5277,4 +5455,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/547b2efd-4e8e-42aa-9020-205b64d0039a.css */
+/* src/a3c9275d-f674-46ac-ba4b-1442197b5a6e.css */

package/dist-cjs/aria-announcer/AriaAnnounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnounce.js","sources":["../src/aria-announcer/AriaAnnounce.tsx"],"sourcesContent":["import { type ComponentType, useEffect } from \"react\";\n\nimport { useAriaAnnouncer } from \"./useAriaAnnouncer\";\n\nexport interface AriaAnnounceProps {\n  /**\n   * String which will be announced by screen readers on change\n   */\n  announcement?: string;\n}\n\nexport const AriaAnnounce: ComponentType<AriaAnnounceProps> = ({\n  announcement,\n}) => {\n  const { announce } = useAriaAnnouncer();\n\n  useEffect(() => {\n    if (announcement) {\n      announce(announcement);\n    }\n  }, [announce, announcement]);\n\n  // If we return null here, react-docgen wouldn't be able to locate the component\n  return <></>;\n};\n"],"names":["useAriaAnnouncer","useEffect","jsx","Fragment"],"mappings":";;;;;;AAWO,MAAM,eAAiD,CAAC;AAAA,EAC7D;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,iCAAiB,EAAA;AAEtC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AACvB,GACC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAG3B,EAAA,uBAASC,cAAA,CAAAC,mBAAA,EAAA,EAAA,CAAA;AACX;;;;"}
+{"version":3,"file":"AriaAnnounce.js","sources":["../src/aria-announcer/AriaAnnounce.tsx"],"sourcesContent":["import { type ComponentType, useEffect } from \"react\";\n\nimport { useAriaAnnouncer } from \"./useAriaAnnouncer\";\n\nexport interface AriaAnnounceProps {\n  /**\n   * String which will be announced by screen readers on change\n   */\n  announcement?: string;\n}\n\nexport const AriaAnnounce: ComponentType<AriaAnnounceProps> = ({\n  announcement,\n}) => {\n  const { announce } = useAriaAnnouncer();\n\n  useEffect(() => {\n    if (announcement) {\n      announce(announcement);\n    }\n  }, [announce, announcement]);\n\n  // biome-ignore lint/complexity/noUselessFragments: If we return null here, react-docgen wouldn't be able to locate the component.\n  return <></>;\n};\n"],"names":["useAriaAnnouncer","useEffect","jsx","Fragment"],"mappings":";;;;;;AAWO,MAAM,eAAiD,CAAC;AAAA,EAC7D;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,iCAAiB,EAAA;AAEtC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA;AACvB,GACC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAG3B,EAAA,uBAASC,cAAA,CAAAC,mBAAA,EAAA,EAAA,CAAA;AACX;;;;"}

package/dist-cjs/avatar/Avatar.js

@@ -50,6 +50,10 @@ const Avatar = React.forwardRef(function Avatar2({
     children = childrenProp;
   }
   const avatarInitials = nameToInitials(name);
+  const ariaProps = name ? {
+    role: "img",
+    "aria-label": name
+  } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -63,8 +67,7 @@ const Avatar = React.forwardRef(function Avatar2({
         },
         className
       ),
-      role: name ? "img" : void 0,
-      "aria-label": name,
+      ...ariaProps,
       ...rest,
       children: children || avatarInitials || fallbackIcon
     }

package/dist-cjs/avatar/Avatar.js.map

@@ -1 +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 { forwardRef, type HTMLAttributes, type ReactNode } 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   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\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    color = \"accent\",\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-hidden />\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=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      role={name ? \"img\" : undefined}\n      aria-label={name}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,mBAAsB,GAAA,CAAA;AAE5B,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IACI,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,KAAA,CAAM,KACP,KAAM,CAAA,CAAA,EAAG,CACT,CAAA,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EACL,CAAA,CAAA,WAAA,EAAA;AAEQ,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,KAAQ,GAAA,QAAA;AAAA,EACR,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,EACd,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,4BAAQ,EAAA;AAE7B,EAAA,MAAM,eACJ,gBAAqB,KAAA,MAAA,kCAClB,QAAS,EAAA,EAAA,aAAA,EAAW,MAAC,CAEtB,GAAA,gBAAA;AAGJ,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,QAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAS,GAAAC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAW,KAAA,QAAA;AACpC,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBAAYC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAI,EAAA,EAAA,EAAG,GAAU,EAAA,CAAA;AAAA,GACnC,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA;AAAA;AAGb,EAAM,MAAA,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EACE,uBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA,EAAM,OAAO,KAAQ,GAAA,MAAA;AAAA,MACrB,YAAY,EAAA,IAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAkB,IAAA;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}
+{"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 { forwardRef, type HTMLAttributes, type ReactNode } 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   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\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    color = \"accent\",\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-hidden />\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=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\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(color),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAC9C,MAAM,mBAAsB,GAAA,CAAA;AAE5B,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IACI,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA,KAAA,CAAM,KACP,KAAM,CAAA,CAAA,EAAG,CACT,CAAA,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EACL,CAAA,CAAA,WAAA,EAAA;AAEQ,MAAA,MAAA,GAASC,gBAAwC,CAAA,SAASC,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,KAAQ,GAAA,QAAA;AAAA,EACR,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,EACd,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,4BAAQ,EAAA;AAE7B,EAAA,MAAM,eACJ,gBAAqB,KAAA,MAAA,kCAClB,QAAS,EAAA,EAAA,aAAA,EAAW,MAAC,CAEtB,GAAA,gBAAA;AAGJ,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAI,IAAA,QAAA;AAEJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAS,GAAAC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAW,KAAA,QAAA;AACpC,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBAAYC,cAAA,CAAA,KAAA,EAAA,EAAI,GAAI,EAAA,EAAA,EAAG,GAAU,EAAA,CAAA;AAAA,GACnC,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA;AAAA;AAGb,EAAM,MAAA,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,YAAY,IACd,GAAA;AAAA,IACE,IAAM,EAAA,KAAA;AAAA,IACN,YAAc,EAAA;AAAA,MAEhB,EAAC;AAEL,EACE,uBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,sBAAY,cAAkB,IAAA;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}

package/dist-cjs/banner/Banner.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltBanner-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--salt-content-primary-foreground);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Banner.css.js.map

package/dist-cjs/breakpoints/BreakpointProvider.js

@@ -13,14 +13,17 @@ function BreakpointProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value: { matchedBreakpoints }, children });
 }
 function useMatchedBreakpoints(breakpoints) {
-  const entries = Object.entries(breakpoints).sort(([, a], [, b]) => b - a);
-  const queries = entries.map(([, value]) => `(min-width: ${value}px)`);
+  const entries = React.useMemo(
+    () => Object.entries(breakpoints).sort(([, a], [, b]) => b - a),
+    [breakpoints]
+  );
   const supportsMatchMedia = typeof window !== "undefined" && typeof window.matchMedia === "function";
   const [matchedBreakpoints, setMatchedBreakpoints] = React.useState(Object.fromEntries(entries.map(([bp]) => [bp, false])));
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     if (!supportsMatchMedia) {
       return;
     }
+    const queries = entries.map(([, value]) => `(min-width: ${value}px)`);
     const matchers = queries.map((query, index) => {
       const mq = window.matchMedia(query);
       const bp = entries[index][0];
@@ -36,16 +39,16 @@ function useMatchedBreakpoints(breakpoints) {
         }
       };
     });
-    matchers.forEach(({ mq, handler }) => {
+    for (const { mq, handler } of matchers) {
       handler();
       mq.addEventListener("change", handler);
-    });
+    }
     return () => {
-      matchers.forEach(({ mq, handler }) => {
+      for (const { mq, handler } of matchers) {
         mq.removeEventListener("change", handler);
-      });
+      }
     };
-  }, [supportsMatchMedia]);
+  }, [supportsMatchMedia, entries]);
   return Object.keys(matchedBreakpoints).filter(
     (bp) => matchedBreakpoints[bp]
   );

package/dist-cjs/breakpoints/BreakpointProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useState } from \"react\";\nimport { createContext } from \"../utils/createContext\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport type { Breakpoints } from \"./Breakpoints\";\n\ntype Breakpoint = keyof Breakpoints;\n\ninterface BreakpointContext {\n  matchedBreakpoints: Breakpoint[];\n}\n\nconst Context = createContext<BreakpointContext>(\"BreakpointContext\", {\n  matchedBreakpoints: [],\n});\n\ninterface BreakpointProviderProps {\n  children?: ReactNode;\n  matchedBreakpoints: Breakpoint[];\n}\n\nexport function BreakpointProvider(props: BreakpointProviderProps) {\n  const { children, matchedBreakpoints } = props;\n\n  return (\n    <Context.Provider value={{ matchedBreakpoints }}>\n      {children}\n    </Context.Provider>\n  );\n}\n\nexport function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[] {\n  const entries = 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":";;;;;;;AAWA,MAAM,OAAA,GAAUA,4BAAiC,mBAAqB,EAAA;AAAA,EACpE,oBAAoB;AACtB,CAAC,CAAA;AAOM,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,KAAA;AAEzC,EACE,uBAAAC,cAAA,CAAC,QAAQ,QAAR,EAAA,EAAiB,OAAO,EAAE,kBAAA,IACxB,QACH,EAAA,CAAA;AAEJ;AAEO,SAAS,sBAAsB,WAAwC,EAAA;AAC5E,EAAA,MAAM,UAAU,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAA,CAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA;AACxE,EAAM,MAAA,OAAA,GAAU,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAG,KAAK,CAAA,KAAM,CAAe,YAAA,EAAA,KAAK,CAAK,GAAA,CAAA,CAAA;AAEpE,EAAA,MAAM,qBACJ,OAAO,MAAA,KAAW,WAAe,IAAA,OAAO,OAAO,UAAe,KAAA,UAAA;AAEhE,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,IAAIC,cAElD,CAAA,MAAA,CAAO,YAAY,OAAQ,CAAA,GAAA,CAAI,CAAC,CAAC,EAAE,CAAM,KAAA,CAAC,IAAkB,KAAK,CAAC,CAAC,CAAC,CAAA;AAEtE,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,kBAAoB,EAAA;AACvB,MAAA;AAAA;AAGF,IAAA,MAAM,QAAW,GAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC7C,MAAM,MAAA,EAAA,GAAK,MAAO,CAAA,UAAA,CAAW,KAAK,CAAA;AAClC,MAAA,MAAM,EAAK,GAAA,OAAA,CAAQ,KAAK,CAAA,CAAE,CAAC,CAAA;AAE3B,MAAO,OAAA;AAAA,QACL,EAAA;AAAA,QACA,SAAS,MAAM;AACb,UAAA,qBAAA,CAAsB,CAAC,IAAS,KAAA;AAC9B,YAAO,OAAA;AAAA,cACL,GAAG,IAAA;AAAA,cACH,CAAC,EAAE,GAAG,EAAG,CAAA;AAAA,aACX;AAAA,WACD,CAAA;AAAA;AACH,OACF;AAAA,KACD,CAAA;AAED,IAAA,QAAA,CAAS,OAAQ,CAAA,CAAC,EAAE,EAAA,EAAI,SAAc,KAAA;AACpC,MAAQ,OAAA,EAAA;AACR,MAAG,EAAA,CAAA,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAAA,KACtC,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;AAAA,OACzC,CAAA;AAAA,KACH;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,kBAAkB,CAAE,CAAA,MAAA;AAAA,IACrC,CAAC,EAAO,KAAA,kBAAA,CAAmB,EAAgB;AAAA,GAC7C;AACF;AAEO,SAAS,aAEd,GAAA;AACA,EAAA,MAAM,EAAE,kBAAA,EAAuB,GAAAC,gBAAA,CAAW,OAAO,CAAA;AAEjD,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,UAAA,EAAY,kBAAmB,CAAA,CAAC,CAAK,IAAA;AAAA,GACvC;AACF;;;;;;"}
+{"version":3,"file":"BreakpointProvider.js","sources":["../src/breakpoints/BreakpointProvider.tsx"],"sourcesContent":["import { type ReactNode, useContext, useMemo, useState } from \"react\";\nimport { createContext } from \"../utils/createContext\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport type { Breakpoints } from \"./Breakpoints\";\n\ntype Breakpoint = keyof Breakpoints;\n\ninterface BreakpointContext {\n  matchedBreakpoints: Breakpoint[];\n}\n\nconst Context = createContext<BreakpointContext>(\"BreakpointContext\", {\n  matchedBreakpoints: [],\n});\n\ninterface BreakpointProviderProps {\n  children?: ReactNode;\n  matchedBreakpoints: Breakpoint[];\n}\n\nexport function BreakpointProvider(props: BreakpointProviderProps) {\n  const { children, matchedBreakpoints } = props;\n\n  return (\n    <Context.Provider value={{ matchedBreakpoints }}>\n      {children}\n    </Context.Provider>\n  );\n}\n\nexport function useMatchedBreakpoints(breakpoints: Breakpoints): Breakpoint[] {\n  const entries = useMemo(\n    () => Object.entries(breakpoints).sort(([, a], [, b]) => b - a),\n    [breakpoints],\n  );\n\n  const supportsMatchMedia =\n    typeof window !== \"undefined\" && typeof window.matchMedia === \"function\";\n\n  const [matchedBreakpoints, setMatchedBreakpoints] = useState<\n    Partial<Record<Breakpoint, boolean>>\n  >(Object.fromEntries(entries.map(([bp]) => [bp as Breakpoint, false])));\n\n  useIsomorphicLayoutEffect(() => {\n    if (!supportsMatchMedia) {\n      return;\n    }\n\n    const queries = entries.map(([, value]) => `(min-width: ${value}px)`);\n\n    const matchers = queries.map((query, index) => {\n      const mq = window.matchMedia(query);\n      const bp = entries[index][0] as Breakpoint;\n\n      return {\n        mq,\n        handler: () => {\n          setMatchedBreakpoints((prev) => {\n            return {\n              ...prev,\n              [bp]: mq.matches,\n            };\n          });\n        },\n      };\n    });\n\n    for (const { mq, handler } of matchers) {\n      handler();\n      mq.addEventListener(\"change\", handler);\n    }\n\n    return () => {\n      for (const { mq, handler } of matchers) {\n        mq.removeEventListener(\"change\", handler);\n      }\n    };\n  }, [supportsMatchMedia, entries]);\n\n  return Object.keys(matchedBreakpoints).filter(\n    (bp) => matchedBreakpoints[bp as Breakpoint],\n  ) as Breakpoint[];\n}\n\nexport function useBreakpoint(): BreakpointContext & {\n  breakpoint: Breakpoint | null;\n} {\n  const { matchedBreakpoints } = useContext(Context);\n\n  return {\n    matchedBreakpoints,\n    breakpoint: matchedBreakpoints[0] ?? null,\n  };\n}\n"],"names":["createContext","jsx","useMemo","useState","useIsomorphicLayoutEffect","useContext"],"mappings":";;;;;;;AAWA,MAAM,OAAA,GAAUA,4BAAiC,mBAAqB,EAAA;AAAA,EACpE,oBAAoB;AACtB,CAAC,CAAA;AAOM,SAAS,mBAAmB,KAAgC,EAAA;AACjE,EAAM,MAAA,EAAE,QAAU,EAAA,kBAAA,EAAuB,GAAA,KAAA;AAEzC,EACE,uBAAAC,cAAA,CAAC,QAAQ,QAAR,EAAA,EAAiB,OAAO,EAAE,kBAAA,IACxB,QACH,EAAA,CAAA;AAEJ;AAEO,SAAS,sBAAsB,WAAwC,EAAA;AAC5E,EAAA,MAAM,OAAU,GAAAC,aAAA;AAAA,IACd,MAAM,MAAO,CAAA,OAAA,CAAQ,WAAW,CAAA,CAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA,KAAM,IAAI,CAAC,CAAA;AAAA,IAC9D,CAAC,WAAW;AAAA,GACd;AAEA,EAAA,MAAM,qBACJ,OAAO,MAAA,KAAW,WAAe,IAAA,OAAO,OAAO,UAAe,KAAA,UAAA;AAEhE,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,IAAIC,cAElD,CAAA,MAAA,CAAO,YAAY,OAAQ,CAAA,GAAA,CAAI,CAAC,CAAC,EAAE,CAAM,KAAA,CAAC,IAAkB,KAAK,CAAC,CAAC,CAAC,CAAA;AAEtE,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,kBAAoB,EAAA;AACvB,MAAA;AAAA;AAGF,IAAM,MAAA,OAAA,GAAU,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAG,KAAK,CAAA,KAAM,CAAe,YAAA,EAAA,KAAK,CAAK,GAAA,CAAA,CAAA;AAEpE,IAAA,MAAM,QAAW,GAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,OAAO,KAAU,KAAA;AAC7C,MAAM,MAAA,EAAA,GAAK,MAAO,CAAA,UAAA,CAAW,KAAK,CAAA;AAClC,MAAA,MAAM,EAAK,GAAA,OAAA,CAAQ,KAAK,CAAA,CAAE,CAAC,CAAA;AAE3B,MAAO,OAAA;AAAA,QACL,EAAA;AAAA,QACA,SAAS,MAAM;AACb,UAAA,qBAAA,CAAsB,CAAC,IAAS,KAAA;AAC9B,YAAO,OAAA;AAAA,cACL,GAAG,IAAA;AAAA,cACH,CAAC,EAAE,GAAG,EAAG,CAAA;AAAA,aACX;AAAA,WACD,CAAA;AAAA;AACH,OACF;AAAA,KACD,CAAA;AAED,IAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAQ,EAAA,IAAK,QAAU,EAAA;AACtC,MAAQ,OAAA,EAAA;AACR,MAAG,EAAA,CAAA,gBAAA,CAAiB,UAAU,OAAO,CAAA;AAAA;AAGvC,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,MAAW,EAAE,EAAA,EAAI,OAAQ,EAAA,IAAK,QAAU,EAAA;AACtC,QAAG,EAAA,CAAA,mBAAA,CAAoB,UAAU,OAAO,CAAA;AAAA;AAC1C,KACF;AAAA,GACC,EAAA,CAAC,kBAAoB,EAAA,OAAO,CAAC,CAAA;AAEhC,EAAO,OAAA,MAAA,CAAO,IAAK,CAAA,kBAAkB,CAAE,CAAA,MAAA;AAAA,IACrC,CAAC,EAAO,KAAA,kBAAA,CAAmB,EAAgB;AAAA,GAC7C;AACF;AAEO,SAAS,aAEd,GAAA;AACA,EAAA,MAAM,EAAE,kBAAA,EAAuB,GAAAC,gBAAA,CAAW,OAAO,CAAA;AAEjD,EAAO,OAAA;AAAA,IACL,kBAAA;AAAA,IACA,UAAA,EAAY,kBAAmB,CAAA,CAAC,CAAK,IAAA;AAAA,GACvC;AACF;;;;;;"}

package/dist-cjs/button/useButton.js

@@ -11,7 +11,7 @@ const useButton = ({
   onClick,
   onBlur
 }) => {
-  const [keyIsDown, setkeyIsDown] = React.useState("");
+  const [keyIsDown, setKeyIsDown] = React.useState("");
   const [active, setActive] = React.useState(false);
   const enter = "Enter";
   const space = " ";
@@ -26,7 +26,7 @@ const useButton = ({
     };
   }, [active, keyIsDown]);
   const handleKeyUp = (event) => {
-    setkeyIsDown("");
+    setKeyIsDown("");
     setActive(false);
     onKeyUp == null ? void 0 : onKeyUp(event);
   };
@@ -40,7 +40,7 @@ const useButton = ({
   };
   const handleKeyDown = (event) => {
     if (event.key === enter || event.key === space) {
-      setkeyIsDown(event.key);
+      setKeyIsDown(event.key);
       setActive(true);
     }
     onKeyDown == null ? void 0 : onKeyDown(event);

package/dist-cjs/button/useButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButton.js","sources":["../src/button/useButton.ts"],"sourcesContent":["import {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  useEffect,\n  useState,\n} from \"react\";\n\nexport interface ButtonHookProps<T extends Element> {\n  loading?: boolean;\n  disabled?: boolean;\n  focusableWhenDisabled?: boolean;\n  onKeyUp?: (event: KeyboardEvent<T>) => void;\n  onKeyDown?: (event: KeyboardEvent<T>) => void;\n  onClick?: (event: MouseEvent<T>) => void;\n  onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface ButtonHookResult<T extends Element> {\n  active: boolean;\n  buttonProps: {\n    \"aria-disabled\"?: boolean;\n    \"data-loading\"?: boolean;\n    disabled?: boolean;\n    tabIndex: number;\n    onBlur: (event: FocusEvent<T>) => void;\n    onClick?: (event: MouseEvent<T>) => void;\n    onKeyDown: (event: KeyboardEvent<T>) => void;\n    onKeyUp: (event: KeyboardEvent<T>) => void;\n  };\n}\n\nexport const useButton = <T extends Element>({\n  loading,\n  disabled,\n  focusableWhenDisabled,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n  onBlur,\n}: ButtonHookProps<T>): ButtonHookResult<T> => {\n  const [keyIsDown, setkeyIsDown] = useState(\"\");\n  const [active, setActive] = useState(false);\n\n  const enter = \"Enter\";\n  const space = \" \";\n\n  useEffect(() => {\n    const t = setTimeout(() => {\n      // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button\n      // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n      if (keyIsDown !== enter && keyIsDown !== space) {\n        setActive(false);\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(t);\n    };\n  }, [active, keyIsDown]);\n\n  const handleKeyUp = (event: KeyboardEvent<T>) => {\n    setkeyIsDown(\"\");\n    setActive(false);\n    onKeyUp?.(event);\n  };\n\n  const handleClick = (event: MouseEvent<T>) => {\n    setActive(true);\n    onClick?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<T>) => {\n    setActive(false);\n    onBlur?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<T>) => {\n    if (event.key === enter || event.key === space) {\n      setkeyIsDown(event.key);\n      setActive(true);\n    }\n\n    onKeyDown?.(event);\n  };\n\n  const buttonProps = {\n    \"aria-disabled\": disabled && focusableWhenDisabled ? true : undefined,\n    \"data-loading\": loading,\n    disabled: disabled && !focusableWhenDisabled,\n    tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n    onBlur: handleBlur,\n    onClick: !loading && !disabled ? handleClick : undefined,\n    onKeyDown: handleKeyDown,\n    onKeyUp: handleKeyUp,\n  };\n\n  return {\n    active,\n    buttonProps,\n  };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAgCO,MAAM,YAAY,CAAoB;AAAA,EAC3C,OAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA;AAEd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAI,IAAA,SAAA,KAAc,KAAS,IAAA,SAAA,KAAc,KAAO,EAAA;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,OACC,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAGhB,IAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,eAAA,EAAiB,QAAY,IAAA,qBAAA,GAAwB,IAAO,GAAA,MAAA;AAAA,IAC5D,cAAgB,EAAA,OAAA;AAAA,IAChB,QAAA,EAAU,YAAY,CAAC,qBAAA;AAAA,IACvB,QAAU,EAAA,QAAA,IAAY,CAAC,qBAAA,GAAwB,EAAK,GAAA,CAAA;AAAA,IACpD,MAAQ,EAAA,UAAA;AAAA,IACR,OAAS,EAAA,CAAC,OAAW,IAAA,CAAC,WAAW,WAAc,GAAA,MAAA;AAAA,IAC/C,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA;AAAA,GACX;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useButton.js","sources":["../src/button/useButton.ts"],"sourcesContent":["import {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  useEffect,\n  useState,\n} from \"react\";\n\nexport interface ButtonHookProps<T extends Element> {\n  loading?: boolean;\n  disabled?: boolean;\n  focusableWhenDisabled?: boolean;\n  onKeyUp?: (event: KeyboardEvent<T>) => void;\n  onKeyDown?: (event: KeyboardEvent<T>) => void;\n  onClick?: (event: MouseEvent<T>) => void;\n  onBlur?: (event: FocusEvent<T>) => void;\n}\n\nexport interface ButtonHookResult<T extends Element> {\n  active: boolean;\n  buttonProps: {\n    \"aria-disabled\"?: boolean;\n    \"data-loading\"?: boolean;\n    disabled?: boolean;\n    tabIndex: number;\n    onBlur: (event: FocusEvent<T>) => void;\n    onClick?: (event: MouseEvent<T>) => void;\n    onKeyDown: (event: KeyboardEvent<T>) => void;\n    onKeyUp: (event: KeyboardEvent<T>) => void;\n  };\n}\n\nexport const useButton = <T extends Element>({\n  loading,\n  disabled,\n  focusableWhenDisabled,\n  onKeyUp,\n  onKeyDown,\n  onClick,\n  onBlur,\n}: ButtonHookProps<T>): ButtonHookResult<T> => {\n  const [keyIsDown, setKeyIsDown] = useState(\"\");\n  const [active, setActive] = useState(false);\n\n  const enter = \"Enter\";\n  const space = \" \";\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: active is needed to remove the active styling on mouse up\n  useEffect(() => {\n    const t = setTimeout(() => {\n      // This key state check is to stop continual visual state change when using Enter Key, which the browser treats as both key and click events on a Button\n      // This key state check also fixes Firefox Button where Space key is pressed but button fails to be in active state\n      if (keyIsDown !== enter && keyIsDown !== space) {\n        setActive(false);\n      }\n    }, 0);\n\n    return () => {\n      clearTimeout(t);\n    };\n  }, [active, keyIsDown]);\n\n  const handleKeyUp = (event: KeyboardEvent<T>) => {\n    setKeyIsDown(\"\");\n    setActive(false);\n    onKeyUp?.(event);\n  };\n\n  const handleClick = (event: MouseEvent<T>) => {\n    setActive(true);\n    onClick?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<T>) => {\n    setActive(false);\n    onBlur?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<T>) => {\n    if (event.key === enter || event.key === space) {\n      setKeyIsDown(event.key);\n      setActive(true);\n    }\n\n    onKeyDown?.(event);\n  };\n\n  const buttonProps = {\n    \"aria-disabled\": disabled && focusableWhenDisabled ? true : undefined,\n    \"data-loading\": loading,\n    disabled: disabled && !focusableWhenDisabled,\n    tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,\n    onBlur: handleBlur,\n    onClick: !loading && !disabled ? handleClick : undefined,\n    onKeyDown: handleKeyDown,\n    onKeyUp: handleKeyUp,\n  };\n\n  return {\n    active,\n    buttonProps,\n  };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAgCO,MAAM,YAAY,CAAoB;AAAA,EAC3C,OAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA+C,KAAA;AAC7C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE1C,EAAA,MAAM,KAAQ,GAAA,OAAA;AACd,EAAA,MAAM,KAAQ,GAAA,GAAA;AAGd,EAAAC,eAAA,CAAU,MAAM;AACd,IAAM,MAAA,CAAA,GAAI,WAAW,MAAM;AAGzB,MAAI,IAAA,SAAA,KAAc,KAAS,IAAA,SAAA,KAAc,KAAO,EAAA;AAC9C,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB,OACC,CAAC,CAAA;AAEJ,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,CAAC,CAAA;AAAA,KAChB;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA;AAEtB,EAAM,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AAC/C,IAAA,YAAA,CAAa,EAAE,CAAA;AACf,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyB,KAAA;AAC5C,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyB,KAAA;AAC3C,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAS,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACjD,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,KAAS,IAAA,KAAA,CAAM,QAAQ,KAAO,EAAA;AAC9C,MAAA,YAAA,CAAa,MAAM,GAAG,CAAA;AACtB,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAGhB,IAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,GACd;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,eAAA,EAAiB,QAAY,IAAA,qBAAA,GAAwB,IAAO,GAAA,MAAA;AAAA,IAC5D,cAAgB,EAAA,OAAA;AAAA,IAChB,QAAA,EAAU,YAAY,CAAC,qBAAA;AAAA,IACvB,QAAU,EAAA,QAAA,IAAY,CAAC,qBAAA,GAAwB,EAAK,GAAA,CAAA;AAAA,IACpD,MAAQ,EAAA,UAAA;AAAA,IACR,OAAS,EAAA,CAAC,OAAW,IAAA,CAAC,WAAW,WAAc,GAAA,MAAA;AAAA,IAC/C,SAAW,EAAA,aAAA;AAAA,IACX,OAAS,EAAA;AAAA,GACX;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/checkbox/Checkbox.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-spacing-fixed-100);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Checkbox.css.js.map