@salt-ds/core 1.47.5 → 1.49.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @salt-ds/core
 
+## 1.49.0
+
+### Minor Changes
+
+- 378fc01: Improved the experience of using `FileDropZoneTrigger`.
+- 1f53f12: Enhanced `FlexLayout`, `StackLayout` and `SplitLayout` components by extending `LayoutDirection` to support both `column-reverse` and `row-reverse` directions, providing more flexible layout options.
+
+  ```tsx
+  direction = {{ xs: "column-reverse", sm: "row-reverse" }}
+  ```
+
+### Patch Changes
+
+- 22fed0d: Fixed `CollapsiblePanel` not supporting passing a ref.
+- 770bc9c: Improved Avatar image loading logic. This should improve image flickering and make image loading more consistent.
+- 54e4b19: Fixed FileDropZone's `status` prop type.
+- bbb7dba: Fixed Dialog having a scrollbar when its content has uses `height: 100%`.
+- c3df8d8: - Fixed `Checkbox`, `RadioButton` and `Switch`'s clickable areas taking full width of containers.
+  - Reduced the width of `FormFieldLabel` when `labelPlacement="top"` this prevents its whitespace triggering focus of the associated form control.
+
+## 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

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);
@@ -838,6 +839,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 /* src/checkbox/Checkbox.css */
 .saltCheckbox {
   display: inline-flex;
+  width: fit-content;
   gap: var(--salt-spacing-100);
   position: relative;
   cursor: var(--salt-cursor-hover);
@@ -994,6 +996,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));
@@ -1129,6 +1153,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
 }
 .saltDialogContent-inner {
+  display: flex;
   overflow-y: auto;
   border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
   border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
@@ -1501,9 +1526,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltFileDropZone-success {
   border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-status-success-borderColor);
 }
-.saltFileDropZone .input-hidden {
-  display: none;
-}
 .saltFileDropZone-disabled {
   background: var(--salt-container-primary-background-disabled);
   border: var(--salt-size-fixed-200) var(--salt-borderStyle-dashed) var(--salt-container-primary-borderColor-disabled);
@@ -1689,6 +1711,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   align-self: baseline;
   padding-top: var(--salt-spacing-100);
 }
+.saltFormField-labelTop .saltFormFieldLabel.saltText {
+  width: fit-content;
+}
 .saltFormFieldLabel-necessityLabel {
   font-weight: var(--salt-text-fontWeight);
   font-style: var(--salt-editable-help-fontStyle);
@@ -3334,6 +3359,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 /* src/radio-button/RadioButton.css */
 .saltRadioButton {
   display: inline-flex;
+  width: fit-content;
   gap: var(--salt-spacing-100);
   cursor: var(--salt-cursor-hover);
   position: relative;
@@ -3786,6 +3812,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 /* src/switch/Switch.css */
 .saltSwitch {
   display: flex;
+  width: fit-content;
   gap: var(--salt-spacing-100);
   position: relative;
   cursor: var(--salt-cursor-hover);
@@ -4734,6 +4761,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);
@@ -5285,4 +5459,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/4a0f5cbc-a0a0-42f9-8be1-8d5615fbd745.css */
+/* src/6b292d77-1069-4ff3-8eee-6c5dec17dcee.css */

package/dist-cjs/accordion/Accordion.js.map

@@ -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  forwardRef,\n  type SyntheticEvent,\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;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,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAIC,cAAS,CAAA,CAAA,EAAG,EAAE,CAAS,OAAA,CAAA,CAAA;AACvD,IAAA,MAAM,CAAC,OAAS,EAAA,UAAU,IAAIA,cAAS,CAAA,CAAA,EAAG,EAAE,CAAQ,MAAA,CAAA,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,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;AAAA,KACR,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,CAAC,KAA6C,KAAA;AAC3D,MAAY,WAAA,CAAA,CAAC,IAAS,KAAA,CAAC,IAAI,CAAA;AAC3B,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,KACb;AAEA,IACE,uBAAAC,cAAA;AAAA,MAACC,iCAAiB,CAAA,QAAA;AAAA,MAAjB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,UAC1B,QAAA;AAAA,UACA,WAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,SAAW,EAAAE,SAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb;AAAA,gBACE,CAAC,YAAA,CAAa,MAAU,IAAA,EAAE,CAAC,GAAG,MAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,eAC9B;AAAA,cACA;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA;AACN;AAAA,KACF;AAAA;AAGN;;;;"}
+{"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  forwardRef,\n  type SyntheticEvent,\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;AAE1C,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,SAASC,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,QAAA;AAAA,MACA,aAAA,GAAgB,MAAA;AAAA,MAChB,EAAA,EAAI,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAIC,cAAA,CAAS,CAAA,EAAG,EAAE,CAAA,OAAA,CAAS,CAAA;AACvD,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,IAAIA,cAAA,CAAS,CAAA,EAAG,EAAE,CAAA,MAAA,CAAQ,CAAA;AAEpD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAA,CAAc;AAAA,MAC5C,UAAA,EAAY,YAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,MAAA,GAAS,CAAC,KAAA,KAA6C;AAC3D,MAAA,WAAA,CAAY,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAC3B,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAACC,iCAAA,CAAiB,QAAA;AAAA,MAAjB;AAAA,QACC,KAAA,EAAO;AAAA,UACL,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAA,EAAU,QAAQ,QAAQ,CAAA;AAAA,UAC1B,QAAA;AAAA,UACA,WAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,SAAA,EAAWE,SAAA;AAAA,cACT,YAAA,EAAa;AAAA,cACb;AAAA,gBACE,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,MAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,eAC9B;AAAA,cACA;AAAA,aACF;AAAA,YACC,GAAG;AAAA;AAAA;AACN;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/accordion/AccordionContext.js.map

@@ -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":";;;;;;;;;;;AAgBO,MAAM,gBAAmB,GAAAA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAO,EAAA,EAAA;AAAA,IACP,QAAU,EAAA,KAAA;AAAA,IACV,QAAQ,MAAM,MAAA;AAAA,IACd,QAAU,EAAA,KAAA;AAAA,IACV,aAAe,EAAA,MAAA;AAAA,IACf,QAAU,EAAA,EAAA;AAAA,IACV,aAAa,MAAM,MAAA;AAAA,IACnB,OAAS,EAAA,EAAA;AAAA,IACT,YAAY,MAAM;AAAA;AAEtB;AAEO,SAAS,YAAe,GAAA;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}
+{"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,gBAAA,GAAmBA,2BAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,KAAA,EAAO,EAAA;AAAA,IACP,QAAA,EAAU,KAAA;AAAA,IACV,QAAQ,MAAM,MAAA;AAAA,IACd,QAAA,EAAU,KAAA;AAAA,IACV,aAAA,EAAe,MAAA;AAAA,IACf,QAAA,EAAU,EAAA;AAAA,IACV,aAAa,MAAM,MAAA;AAAA,IACnB,OAAA,EAAS,EAAA;AAAA,IACT,YAAY,MAAM;AAAA;AAEtB;AAEO,SAAS,YAAA,GAAe;AAC7B,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}

package/dist-cjs/accordion/AccordionGroup.js.map

@@ -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  forwardRef,\n  type ReactNode,\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;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAW,EAAA,GAAG,IAAM,EAAA,CAAA;AAAA;AAG3E;;;;"}
+{"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  forwardRef,\n  type ReactNode,\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;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAAA,EAEzE;AACF;;;;"}

package/dist-cjs/accordion/AccordionHeader.js.map

@@ -1 +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  forwardRef,\n  type MouseEvent,\n  type ReactNode,\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","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAmC,EAAA;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA;AAC7C,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,sCAAQ,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA;AAGpE,EAAA,sCAAQ,UAAW,EAAA,EAAA,aAAA,EAAW,MAAC,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAClE;AAEO,MAAM,eAAkB,GAAAC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAK,EAAA;AACrC,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAS,EAAI,EAAA,GAAG,MAAS,GAAA,KAAA;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;AAAA,MACEC,6BAAa,EAAA;AAEjB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA;AACZ,IAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA;AAChB,GACC,EAAA,CAAC,EAAI,EAAA,WAAW,CAAC,CAAA;AAEpB,EACE,uBAAAC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,QACvC;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,eAAe,EAAA,QAAA;AAAA,MACf,EAAI,EAAA,QAAA;AAAA,MACJ,eAAe,EAAA,OAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAkB,aAAA,KAAA,MAAA,oBAAWC,cAAA,CAAA,aAAA,EAAA,EAAc,QAAoB,EAAA,CAAA;AAAA,uCAC/D,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,SAAS,GAAI,QAAS,EAAA,CAAA;AAAA,QACnD,MAAA,IAAU,CAAC,QACV,oBAAAA,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC;AAAA;AAAA,SACF;AAAA,QAED,aAAkB,KAAA,OAAA,oBAAYD,cAAA,CAAA,aAAA,EAAA,EAAc,QAAoB,EAAA;AAAA;AAAA;AAAA,GACnE;AAEJ,CAAC;;;;"}
+{"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  forwardRef,\n  type MouseEvent,\n  type ReactNode,\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","forwardRef","AccordionHeader","useAccordion","useWindow","useComponentCssInjection","accordionHeaderCss","useIsomorphicLayoutEffect","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEvD,SAAS,aAAA,CAAc,EAAE,QAAA,EAAS,EAA0B;AAC1D,EAAA,MAAM,EAAE,YAAA,EAAc,UAAA,EAAW,GAAIC,4BAAA,EAAQ;AAC7C,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,sCAAQ,YAAA,EAAA,EAAa,aAAA,EAAW,MAAC,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,EACpE;AAEA,EAAA,sCAAQ,UAAA,EAAA,EAAW,aAAA,EAAW,MAAC,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAClE;AAEO,MAAM,eAAA,GAAkBC,gBAAA,CAG7B,SAASC,gBAAAA,CAAgB,OAAO,GAAA,EAAK;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,SAAS,EAAA,EAAI,GAAG,MAAK,GAAI,KAAA;AACtD,EAAA,MAAM;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;AAAA,MACEC,6BAAA,EAAa;AAEjB,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKC,iBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,MAAA,CAAO,KAAK,CAAA;AACZ,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA,IAChB;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,WAAW,CAAC,CAAA;AAEpB,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAA,EAAO;AAAA,QACvC;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,eAAA,EAAe,QAAA;AAAA,MACf,EAAA,EAAI,QAAA;AAAA,MACJ,eAAA,EAAe,OAAA;AAAA,MACf,KAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,aAAA,KAAkB,MAAA,oBAAUC,cAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAoB,CAAA;AAAA,uCAC/D,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,SAAS,GAAI,QAAA,EAAS,CAAA;AAAA,QACnD,MAAA,IAAU,CAAC,QAAA,oBACVA,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,YACzC;AAAA;AAAA,SACF;AAAA,QAED,aAAA,KAAkB,OAAA,oBAAWD,cAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAoB;AAAA;AAAA;AAAA,GACnE;AAEJ,CAAC;;;;"}

package/dist-cjs/accordion/AccordionPanel.js.map

@@ -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  forwardRef,\n  type ReactNode,\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;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,EAAI,EAAA,GAAG,MAAS,GAAA,KAAA;AAE7C,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAU,EAAA,OAAA,EAAS,YAAY,QAAU,EAAA,aAAA,KAC/CC,6BAAa,EAAA;AAEf,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,UAAA,CAAW,EAAE,CAAA;AAAA;AACf,KACC,EAAA,CAAC,EAAI,EAAA,UAAU,CAAC,CAAA;AAEnB,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,QAAA;AAAA,QACL,EAAI,EAAA,OAAA;AAAA,QACJ,iBAAiB,EAAA,QAAA;AAAA,QACjB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAS,GAAA,MAAA;AAAA,QAClC,QAAQ,CAAC,QAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,OAAO,CAClC,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,aAAkB,KAAA;AAAA,aACtD,CAAA;AAAA,YAEA;AAAA;AAAA,SAEL,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"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  forwardRef,\n  type ReactNode,\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;AAE/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,KAAA;AAE7C,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,YAAY,QAAA,EAAU,aAAA,KAC/CC,6BAAA,EAAa;AAEf,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAA,EAAI;AACN,QAAA,UAAA,CAAW,EAAE,CAAA;AAAA,MACf;AAAA,IACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAK,QAAA;AAAA,QACL,EAAA,EAAI,OAAA;AAAA,QACJ,iBAAA,EAAiB,QAAA;AAAA,QACjB,aAAA,EAAa,CAAC,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,QAClC,QAAQ,CAAC,QAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAClC,QAAA,kBAAAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,cACvC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,aAAA,KAAkB;AAAA,aACtD,CAAA;AAAA,YAEA;AAAA;AAAA,SACH,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

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  // 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;;;;"}
+{"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,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIA,iCAAA,EAAiB;AAEtC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,QAAA,CAAS,YAAY,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,YAAY,CAAC,CAAA;AAG3B,EAAA,uBAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAE,CAAA;AACX;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnouncerContext.js","sources":["../src/aria-announcer/AriaAnnouncerContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AnnounceFn = (announcement: string, delay?: number) => void;\n\nexport type AriaAnnouncer = {\n  announce: AnnounceFn;\n};\n\nexport const AriaAnnouncerContext = createContext<AriaAnnouncer | undefined>(\n  undefined,\n);\n"],"names":["createContext"],"mappings":";;;;AAQO,MAAM,oBAAuB,GAAAA,mBAAA;AAAA,EAClC;AACF;;;;"}
+{"version":3,"file":"AriaAnnouncerContext.js","sources":["../src/aria-announcer/AriaAnnouncerContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AnnounceFn = (announcement: string, delay?: number) => void;\n\nexport type AriaAnnouncer = {\n  announce: AnnounceFn;\n};\n\nexport const AriaAnnouncerContext = createContext<AriaAnnouncer | undefined>(\n  undefined,\n);\n"],"names":["createContext"],"mappings":";;;;AAQO,MAAM,oBAAA,GAAuBA,mBAAA;AAAA,EAClC;AACF;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n  children?: ReactNode;\n  /**\n   * Style overrides for the aria-live element\n   */\n  style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n  children,\n  style,\n}: AriaAnnouncerProviderProps) {\n  // announcement that gets rendered inside aria-live and read out by screen readers\n  const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n  // queue that stores all the requested announcements\n  const announcementsRef = useRef<string[]>([]);\n  // we use this variable to decide whether to start the announcement queue if one is not already in progress\n  const isAnnouncingRef = useRef(false);\n  // we need to keep track of the state of the component mount since all the async function calls\n  // might trigger a setState after a component has been unmounted\n  const mountedRef = useRef(true);\n\n  // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n  const announceAll = useCallback(() => {\n    isAnnouncingRef.current = true;\n    if (mountedRef.current) {\n      setCurrentAnnouncement(\"\");\n      requestAnimationFrame(() => {\n        if (mountedRef.current && announcementsRef.current.length) {\n          const announcement = announcementsRef.current.shift() as string;\n          setCurrentAnnouncement(announcement);\n          setTimeout(() => {\n            announceAll();\n          }, ARIA_ANNOUNCE_DELAY);\n        } else {\n          isAnnouncingRef.current = false;\n        }\n      });\n    }\n  }, []);\n\n  const announce = useCallback(\n    (announcement: string) => {\n      announcementsRef.current.push(announcement);\n      if (!isAnnouncingRef.current) {\n        announceAll();\n      }\n    },\n    [announceAll],\n  );\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n    };\n  }, []);\n\n  const value = useMemo(() => ({ announce }), [announce]);\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        aria-atomic=\"true\"\n        aria-live=\"assertive\"\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n      >\n        {currentAnnouncement}\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","AriaAnnouncerContext","jsx"],"mappings":";;;;;;AAYO,MAAM,mBAAsB,GAAA;AAU5B,SAAS,qBAAsB,CAAA;AAAA,EACpC,QAAA;AAAA,EACA;AACF,CAA+B,EAAA;AAE7B,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAIA,eAAS,EAAE,CAAA;AAEjE,EAAM,MAAA,gBAAA,GAAmBC,YAAiB,CAAA,EAAE,CAAA;AAE5C,EAAM,MAAA,eAAA,GAAkBA,aAAO,KAAK,CAAA;AAGpC,EAAM,MAAA,UAAA,GAAaA,aAAO,IAAI,CAAA;AAG9B,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,eAAA,CAAgB,OAAU,GAAA,IAAA;AAC1B,IAAA,IAAI,WAAW,OAAS,EAAA;AACtB,MAAA,sBAAA,CAAuB,EAAE,CAAA;AACzB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,UAAW,CAAA,OAAA,IAAW,gBAAiB,CAAA,OAAA,CAAQ,MAAQ,EAAA;AACzD,UAAM,MAAA,YAAA,GAAe,gBAAiB,CAAA,OAAA,CAAQ,KAAM,EAAA;AACpD,UAAA,sBAAA,CAAuB,YAAY,CAAA;AACnC,UAAA,UAAA,CAAW,MAAM;AACf,YAAY,WAAA,EAAA;AAAA,aACX,mBAAmB,CAAA;AAAA,SACjB,MAAA;AACL,UAAA,eAAA,CAAgB,OAAU,GAAA,KAAA;AAAA;AAC5B,OACD,CAAA;AAAA;AACH,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,IACf,CAAC,YAAyB,KAAA;AACxB,MAAiB,gBAAA,CAAA,OAAA,CAAQ,KAAK,YAAY,CAAA;AAC1C,MAAI,IAAA,CAAC,gBAAgB,OAAS,EAAA;AAC5B,QAAY,WAAA,EAAA;AAAA;AACd,KACF;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AAAA,KACvB;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,KAAA,GAAQC,cAAQ,OAAO,EAAE,UAAa,CAAA,EAAA,CAAC,QAAQ,CAAC,CAAA;AACtD,EAAA,uBACGC,eAAA,CAAAC,yCAAA,CAAqB,QAArB,EAAA,EAA8B,KAC5B,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACDC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAY,EAAA,MAAA;AAAA,QACZ,WAAU,EAAA,WAAA;AAAA,QAEV,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,UAAA;AAAA,UACV,MAAQ,EAAA,CAAA;AAAA,UACR,KAAO,EAAA,CAAA;AAAA,UACP,OAAS,EAAA,CAAA;AAAA,UACT,MAAQ,EAAA,EAAA;AAAA,UACR,QAAU,EAAA,QAAA;AAAA,UACV,IAAM,EAAA,kBAAA;AAAA,UACN,UAAY,EAAA,QAAA;AAAA,UACZ,WAAa,EAAA,CAAA;AAAA,UACb,GAAG;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GACF,EAAA,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport const ARIA_ANNOUNCE_DELAY = 150;\n\nexport interface AriaAnnouncerProviderProps {\n  children?: ReactNode;\n  /**\n   * Style overrides for the aria-live element\n   */\n  style?: CSSProperties;\n}\n\nexport function AriaAnnouncerProvider({\n  children,\n  style,\n}: AriaAnnouncerProviderProps) {\n  // announcement that gets rendered inside aria-live and read out by screen readers\n  const [currentAnnouncement, setCurrentAnnouncement] = useState(\"\");\n  // queue that stores all the requested announcements\n  const announcementsRef = useRef<string[]>([]);\n  // we use this variable to decide whether to start the announcement queue if one is not already in progress\n  const isAnnouncingRef = useRef(false);\n  // we need to keep track of the state of the component mount since all the async function calls\n  // might trigger a setState after a component has been unmounted\n  const mountedRef = useRef(true);\n\n  // announceAll will get called recursively until all the announcements are rendered and cleared from the queue\n  const announceAll = useCallback(() => {\n    isAnnouncingRef.current = true;\n    if (mountedRef.current) {\n      setCurrentAnnouncement(\"\");\n      requestAnimationFrame(() => {\n        if (mountedRef.current && announcementsRef.current.length) {\n          const announcement = announcementsRef.current.shift() as string;\n          setCurrentAnnouncement(announcement);\n          setTimeout(() => {\n            announceAll();\n          }, ARIA_ANNOUNCE_DELAY);\n        } else {\n          isAnnouncingRef.current = false;\n        }\n      });\n    }\n  }, []);\n\n  const announce = useCallback(\n    (announcement: string) => {\n      announcementsRef.current.push(announcement);\n      if (!isAnnouncingRef.current) {\n        announceAll();\n      }\n    },\n    [announceAll],\n  );\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n    };\n  }, []);\n\n  const value = useMemo(() => ({ announce }), [announce]);\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        aria-atomic=\"true\"\n        aria-live=\"assertive\"\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n      >\n        {currentAnnouncement}\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n}\n"],"names":["useState","useRef","useCallback","useEffect","useMemo","jsxs","AriaAnnouncerContext","jsx"],"mappings":";;;;;;AAYO,MAAM,mBAAA,GAAsB;AAU5B,SAAS,qBAAA,CAAsB;AAAA,EACpC,QAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAE7B,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAIA,eAAS,EAAE,CAAA;AAEjE,EAAA,MAAM,gBAAA,GAAmBC,YAAA,CAAiB,EAAE,CAAA;AAE5C,EAAA,MAAM,eAAA,GAAkBA,aAAO,KAAK,CAAA;AAGpC,EAAA,MAAM,UAAA,GAAaA,aAAO,IAAI,CAAA;AAG9B,EAAA,MAAM,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAC1B,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,sBAAA,CAAuB,EAAE,CAAA;AACzB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,UAAA,CAAW,OAAA,IAAW,gBAAA,CAAiB,OAAA,CAAQ,MAAA,EAAQ;AACzD,UAAA,MAAM,YAAA,GAAe,gBAAA,CAAiB,OAAA,CAAQ,KAAA,EAAM;AACpD,UAAA,sBAAA,CAAuB,YAAY,CAAA;AACnC,UAAA,UAAA,CAAW,MAAM;AACf,YAAA,WAAA,EAAY;AAAA,UACd,GAAG,mBAAmB,CAAA;AAAA,QACxB,CAAA,MAAO;AACL,UAAA,eAAA,CAAgB,OAAA,GAAU,KAAA;AAAA,QAC5B;AAAA,MACF,CAAC,CAAA;AAAA,IACH;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,QAAA,GAAWA,iBAAA;AAAA,IACf,CAAC,YAAA,KAAyB;AACxB,MAAA,gBAAA,CAAiB,OAAA,CAAQ,KAAK,YAAY,CAAA;AAC1C,MAAA,IAAI,CAAC,gBAAgB,OAAA,EAAS;AAC5B,QAAA,WAAA,EAAY;AAAA,MACd;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAA,GAAU,KAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,KAAA,GAAQC,cAAQ,OAAO,EAAE,UAAS,CAAA,EAAI,CAAC,QAAQ,CAAC,CAAA;AACtD,EAAA,uBACEC,eAAA,CAACC,yCAAA,CAAqB,QAAA,EAArB,EAA8B,KAAA,EAC5B,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACDC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,WAAA,EAAU,WAAA;AAAA,QAEV,KAAA,EAAO;AAAA,UACL,QAAA,EAAU,UAAA;AAAA,UACV,MAAA,EAAQ,CAAA;AAAA,UACR,KAAA,EAAO,CAAA;AAAA,UACP,OAAA,EAAS,CAAA;AAAA,UACT,MAAA,EAAQ,EAAA;AAAA,UACR,QAAA,EAAU,QAAA;AAAA,UACV,IAAA,EAAM,kBAAA;AAAA,UACN,UAAA,EAAY,QAAA;AAAA,UACZ,WAAA,EAAa,CAAA;AAAA,UACb,GAAG;AAAA,SACL;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ;;;;;"}

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

@@ -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/debounce\";\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":";;;;;;AAgBO,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAaC,aAAO,IAAI,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAA,MAAM,4BAA4B,OAAS,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,QAAA;AAE3C,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AAS3C,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA;AAAA;AAC/B;AACF;AAGF,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA;AAAA;AACnB,KACF;AAAA,IACA,CAAC,OAAO;AAAA,GACV;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;AAAA,GACjC;AAEA,EAAA,MAAM,aAAgB,GAAAD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,GACpB;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AAAA,KACvB;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAO,OAAA,aAAA;AACT;;;;"}
+{"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils/debounce\";\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":";;;;;;AAgBO,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAA,GAAmB;AAC/B,CAAA,GAAI,EAAC,KAAM;AACT,EAAA,MAAM,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA;AAC/C,EAAA,MAAM,UAAA,GAAaC,aAAO,IAAI,CAAA;AAC9B,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAA,KAAmB;AACxC,MAAA,MAAM,4BAA4B,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAS,QAAA;AAE3C,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AAS3C,MAAA,SAAS,gBAAA,GAAmB;AAC1B,QAAA,IAAI,WAAW,OAAA,EAAS;AACtB,UAAA,IAAI,yBAAA,EAA2B;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA;AAAA,UAC/B;AAAA,QACF;AAAA,MACF;AAEA,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA;AAAA,MACpC,CAAA,MAAO;AACL,QAAA,gBAAA,EAAiB;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,EAAA,MAAM,QAAA,GAAWC,aAAA;AAAA,IACf,MACE,gBAAA,GAAmB,CAAA,GACfC,iBAAA,CAAS,YAAA,EAAc,gBAAgB,CAAA,GACvC,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB;AAAA,GACjC;AAEA,EAAA,MAAM,aAAA,GAAgBD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,GACpB;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAA,GAAU,IAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAA,GAAU,KAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,aAAA;AACT;;;;"}

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  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;;;;"}
+{"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,mBAAA,GAAsB,CAAA;AAE5B,MAAM,wBAAwB,CAAC,IAAA,KAC7B,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CACI,KAAA,CAAM,KACP,KAAA,CAAM,CAAA,EAAG,CAAA,CAAA,CACT,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,CAAC,CAAA,CAAA,CACd,KAAK,EAAA,CAAA,CACL,WAAA,EAAA;AAEE,MAAM,MAAA,GAASC,gBAAA,CAAwC,SAASC,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,KAAA,GAAQ,QAAA;AAAA,EACR,IAAA;AAAA,EACA,cAAA,GAAiB,qBAAA;AAAA,EACjB,GAAA;AAAA,EACA,IAAA,GAAO,mBAAA;AAAA,EACP,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,EAAc,gBAAA;AAAA,EACd,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAS,GAAIC,4BAAA,EAAQ;AAE7B,EAAA,MAAM,eACJ,gBAAA,KAAqB,MAAA,kCAClB,QAAA,EAAA,EAAS,aAAA,EAAW,MAAC,CAAA,GAEtB,gBAAA;AAGJ,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,IAAI,QAAA;AAEJ,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,8BAAA,EAAgC,GAAG,IAAI,CAAA;AAAA,GACzC;AAEA,EAAA,MAAM,MAAA,GAASC,6BAAA,CAAe,EAAE,GAAA,EAAK,CAAA;AACrC,EAAA,MAAM,mBAAmB,MAAA,KAAW,QAAA;AACpC,EAAA,IAAI,gBAAA,EAAkB;AACpB,IAAA,QAAA,mBAAWC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAI,EAAA,EAAG,GAAA,EAAU,CAAA;AAAA,EACnC,CAAA,MAAA,IAAW,gBAAgB,IAAA,EAAM;AAC/B,IAAA,QAAA,GAAW,YAAA;AAAA,EACb;AAEA,EAAA,MAAM,cAAA,GAAiB,eAAe,IAAI,CAAA;AAE1C,EAAA,MAAM,YAAY,IAAA,GACd;AAAA,IACE,IAAA,EAAM,KAAA;AAAA,IACN,YAAA,EAAc;AAAA,MAEhB,EAAC;AAEL,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAWC,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,cAAA,IAAkB;AAAA;AAAA,GACjC;AAEJ,CAAC;;;;"}

package/dist-cjs/avatar/useAvatarImage.js

@@ -8,29 +8,57 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+var useIsHydrated = require('./useIsHydrated.js');
 
-function useAvatarImage({ src }) {
-  const [status, setStatus] = React.useState("loading");
-  React.useEffect(() => {
-    setStatus(src ? "loading" : "pending");
-  }, [src]);
+function resolveStatus(image, src) {
+  if (!image) {
+    return "pending";
+  }
+  if (!src) {
+    return "error";
+  }
+  if (image.src !== src) {
+    image.src = src;
+  }
+  return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
+}
+function useAvatarImage({
+  src,
+  referrerPolicy,
+  crossOrigin
+}) {
+  const isHydrated = useIsHydrated.useIsHydrated();
+  const imageRef = React.useRef(null);
+  const image = (() => {
+    if (!isHydrated) return null;
+    if (!imageRef.current) {
+      imageRef.current = new Image();
+    }
+    return imageRef.current;
+  })();
+  const [status, setStatus] = React.useState(
+    () => resolveStatus(image, src)
+  );
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    if (!src) {
-      return;
+    setStatus(resolveStatus(image, src));
+  }, [image, src]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!image) return;
+    const handleLoad = () => setStatus("loaded");
+    const handleError = () => setStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    if (typeof crossOrigin === "string") {
+      image.crossOrigin = crossOrigin;
     }
-    let active = true;
-    const image = new Image();
-    image.src = src;
-    const onLoad = () => active && setStatus("loaded");
-    const onError = () => active && setStatus("error");
-    image.addEventListener("load", onLoad, { once: true });
-    image.addEventListener("error", onError, { once: true });
     return () => {
-      image.removeEventListener("load", onLoad);
-      image.removeEventListener("load", onError);
-      active = false;
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
     };
-  }, [src]);
+  }, [image, crossOrigin, referrerPolicy]);
   return status;
 }
 

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

@@ -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":";;;;;;;;;;;AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAE1B,SAAS,CAAA;AAEX,EAAAC,eAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAA;AAAA;AAGF,IAAA,IAAI,MAAS,GAAA,IAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA;AACxB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA;AACZ,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA;AAAA,KACX;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAO,OAAA,MAAA;AACT;;;;"}
+{"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { type ImgHTMLAttributes, useRef, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\nimport { useIsHydrated } from \"./useIsHydrated\";\n\ntype ImageLoadingStatus = \"pending\" | \"loading\" | \"loaded\" | \"error\";\n\nfunction resolveStatus(\n  image: HTMLImageElement | null,\n  src?: string,\n): ImageLoadingStatus {\n  if (!image) {\n    return \"pending\";\n  }\n  if (!src) {\n    return \"error\";\n  }\n  if (image.src !== src) {\n    image.src = src;\n  }\n  return image.complete && image.naturalWidth > 0 ? \"loaded\" : \"loading\";\n}\n\nexport function useAvatarImage({\n  src,\n  referrerPolicy,\n  crossOrigin,\n}: ImgHTMLAttributes<HTMLImageElement>) {\n  const isHydrated = useIsHydrated();\n  const imageRef = useRef<HTMLImageElement | null>(null);\n  const image = (() => {\n    if (!isHydrated) return null;\n    if (!imageRef.current) {\n      imageRef.current = new Image();\n    }\n    return imageRef.current;\n  })();\n\n  const [status, setStatus] = useState<ImageLoadingStatus>(() =>\n    resolveStatus(image, src),\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    setStatus(resolveStatus(image, src));\n  }, [image, src]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!image) return;\n\n    const handleLoad = () => setStatus(\"loaded\");\n    const handleError = () => setStatus(\"error\");\n    image.addEventListener(\"load\", handleLoad);\n    image.addEventListener(\"error\", handleError);\n    if (referrerPolicy) {\n      image.referrerPolicy = referrerPolicy;\n    }\n    if (typeof crossOrigin === \"string\") {\n      image.crossOrigin = crossOrigin;\n    }\n\n    return () => {\n      image.removeEventListener(\"load\", handleLoad);\n      image.removeEventListener(\"error\", handleError);\n    };\n  }, [image, crossOrigin, referrerPolicy]);\n\n  return status;\n}\n"],"names":["useIsHydrated","useRef","useState","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;;;AAMA,SAAS,aAAA,CACP,OACA,GAAA,EACoB;AACpB,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO,SAAA;AAAA,EACT;AACA,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,IAAI,KAAA,CAAM,QAAQ,GAAA,EAAK;AACrB,IAAA,KAAA,CAAM,GAAA,GAAM,GAAA;AAAA,EACd;AACA,EAAA,OAAO,KAAA,CAAM,QAAA,IAAY,KAAA,CAAM,YAAA,GAAe,IAAI,QAAA,GAAW,SAAA;AAC/D;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,GAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,aAAaA,2BAAA,EAAc;AACjC,EAAA,MAAM,QAAA,GAAWC,aAAgC,IAAI,CAAA;AACrD,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,IAAI,CAAC,YAAY,OAAO,IAAA;AACxB,IAAA,IAAI,CAAC,SAAS,OAAA,EAAS;AACrB,MAAA,QAAA,CAAS,OAAA,GAAU,IAAI,KAAA,EAAM;AAAA,IAC/B;AACA,IAAA,OAAO,QAAA,CAAS,OAAA;AAAA,EAClB,CAAA,GAAG;AAEH,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,cAAA;AAAA,IAA6B,MACvD,aAAA,CAAc,KAAA,EAAO,GAAG;AAAA,GAC1B;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,SAAA,CAAU,aAAA,CAAc,KAAA,EAAO,GAAG,CAAC,CAAA;AAAA,EACrC,CAAA,EAAG,CAAC,KAAA,EAAO,GAAG,CAAC,CAAA;AAEf,EAAAA,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,KAAA,EAAO;AAEZ,IAAA,MAAM,UAAA,GAAa,MAAM,SAAA,CAAU,QAAQ,CAAA;AAC3C,IAAA,MAAM,WAAA,GAAc,MAAM,SAAA,CAAU,OAAO,CAAA;AAC3C,IAAA,KAAA,CAAM,gBAAA,CAAiB,QAAQ,UAAU,CAAA;AACzC,IAAA,KAAA,CAAM,gBAAA,CAAiB,SAAS,WAAW,CAAA;AAC3C,IAAA,IAAI,cAAA,EAAgB;AAClB,MAAA,KAAA,CAAM,cAAA,GAAiB,cAAA;AAAA,IACzB;AACA,IAAA,IAAI,OAAO,gBAAgB,QAAA,EAAU;AACnC,MAAA,KAAA,CAAM,WAAA,GAAc,WAAA;AAAA,IACtB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,KAAA,CAAM,mBAAA,CAAoB,QAAQ,UAAU,CAAA;AAC5C,MAAA,KAAA,CAAM,mBAAA,CAAoB,SAAS,WAAW,CAAA;AAAA,IAChD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,WAAA,EAAa,cAAc,CAAC,CAAA;AAEvC,EAAA,OAAO,MAAA;AACT;;;;"}