@salt-ds/core 1.47.4 → 1.47.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @salt-ds/core
 
+## 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

@@ -860,7 +860,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 +983,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 {
@@ -1124,6 +1126,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 +1134,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 +1145,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 +1172,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 +1933,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 +2573,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 +2908,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 +2926,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 +3323,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 +3367,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 +3465,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 +4077,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;
@@ -5247,6 +5248,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 +5260,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 +5268,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 +5285,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/547b2efd-4e8e-42aa-9020-205b64d0039a.css */
+/* src/4a0f5cbc-a0a0-42f9-8be1-8d5615fbd745.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/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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly,\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-cjs/dialog/Dialog.js

@@ -70,7 +70,7 @@ const Dialog = React.forwardRef(
         }, 300);
         return () => clearTimeout(animate);
       }
-    }, [open, showComponent, setShowComponent]);
+    }, [open, showComponent]);
     const contextValue = React.useMemo(() => ({ status, id }), [status, id]);
     return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsxRuntime.jsx(
       FloatingComponent,

package/dist-cjs/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent, setShowComponent]);\n\n    const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={id}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            lockScroll\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={id}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            lockScroll\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}

package/dist-cjs/dialog/DialogContent.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  /* auto is needed for support on Safari, due to webkit bugs with flex */\n  flex: 1 1 auto;\n  position: relative;\n  display: flex;\n}\n\n.saltDialogContent-inner {\n  overflow-y: auto;\n  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  max-height: inherit;\n  flex: 1;\n}\n\n.saltDialogContent-overflow {\n  padding-right: var(--salt-spacing-100);\n}\n\n.saltDialogContent-scrollTop.saltDialogContent-inner {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDialogContent-scrollBottom.saltDialogContent-inner {\n  border-bottom-color: var(--salt-separable-tertiary-borderColor);\n}\n";
+var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  /* auto is needed for support on Safari, due to webkit bugs with flex */\n  flex: 1 1 auto;\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltDialogContent-inner {\n  overflow-y: auto;\n  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  max-height: inherit;\n  flex: 1;\n  box-sizing: border-box;\n}\n\n.saltDialogContent-overflow {\n  padding-right: var(--salt-spacing-100);\n}\n\n.saltDialogContent-scrollTop.saltDialogContent-inner {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDialogContent-scrollBottom.saltDialogContent-inner {\n  border-bottom-color: var(--salt-separable-tertiary-borderColor);\n}\n\n@supports selector(:has(*)) {\n  .saltDialogContent:has(.saltDialogContent-overflow) {\n    min-height: calc(var(--salt-text-lineHeight) * 4);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DialogContent.css.js.map

package/dist-cjs/dialog/DialogHeader.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n.saltDialogHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n  align-items: flex-start;\n}\n\n.saltDialogHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-300);\n  width: var(--salt-size-bar);\n  background: var(--salt-accent-background);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltDialogHeader {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n.saltDialogHeader-header {\n  margin: 0;\n}\n\n.saltDialogHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n  align-items: flex-start;\n  min-width: 0;\n  word-break: break-word;\n}\n\n.saltDialogHeader-header > .saltText {\n  margin: 0;\n}\n\n.saltDialogHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogHeader .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n}\n\n/* Styles applied to DialogHeader when accent={true} */\n.saltDialogHeader-withAccent {\n  position: relative;\n}\n\n.saltDialogHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-300);\n  width: var(--salt-size-bar);\n  background: var(--salt-accent-background);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DialogHeader.css.js.map

package/dist-cjs/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport dividerCss from \"./Divider.css\";\n\nexport interface DividerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The orientation of the divider. Defaults to `\"horizontal\"`.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The variant of the divider. Defaults to `\"primary\"`.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDivider\");\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  function Divider(props, ref) {\n    const {\n      className,\n      orientation = \"horizontal\",\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-divider\",\n      css: dividerCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          withBaseName(variant),\n          className,\n        )}\n        aria-orientation={orientation}\n        role=\"separator\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Divider","useWindow","useComponentCssInjection","dividerCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,OAAU,GAAA,SAAA;AAAA,MACV,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,WAAW,CAAA;AAAA,UACxB,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,kBAAkB,EAAA,WAAA;AAAA,QAClB,IAAK,EAAA,WAAA;AAAA,QACL,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}
+{"version":3,"file":"Divider.js","sources":["../src/divider/Divider.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport dividerCss from \"./Divider.css\";\n\nexport interface DividerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The orientation of the divider. Defaults to `\"horizontal\"`.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The variant of the divider. Defaults to `\"primary\"`.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDivider\");\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  function Divider(props, ref) {\n    const {\n      className,\n      orientation = \"horizontal\",\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-divider\",\n      css: dividerCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          withBaseName(variant),\n          className,\n        )}\n        aria-orientation={orientation}\n        // biome-ignore lint/a11y/useAriaPropsForRole: Separator is not focusable, so it doesn't need aria-valuenow.\n        role=\"separator\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Divider","useWindow","useComponentCssInjection","dividerCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAc,GAAA,YAAA;AAAA,MACd,OAAU,GAAA,SAAA;AAAA,MACV,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,WAAW,CAAA;AAAA,UACxB,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,kBAAkB,EAAA,WAAA;AAAA,QAElB,IAAK,EAAA,WAAA;AAAA,QACL,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}

package/dist-cjs/input/Input.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltInput-height, var(--salt-size-base));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput-bordered.saltInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput-bordered.saltInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered.saltInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-bordered.saltInput-disabled,\n.saltInput-bordered.saltInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltInput-focused .saltInput-activationIndicator,\n.saltInput-focused:hover .saltInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-readOnly:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-disabled .saltInput-activationIndicator,\n.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-bordered .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltInput-focused,\n.saltInput-focused:hover {\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltInput-height, var(--salt-size-base));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput-bordered.saltInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput-bordered.saltInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered.saltInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-bordered.saltInput-disabled,\n.saltInput-bordered.saltInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--input-borderColor);\n}\n\n.saltInput:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltInput-focused .saltInput-activationIndicator,\n.saltInput-focused:hover .saltInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--input-borderColor-active);\n}\n\n.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-readOnly:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-disabled .saltInput-activationIndicator,\n.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-bordered .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltInput-focused,\n.saltInput-focused:hover {\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Input.css.js.map