@salt-ds/core 1.72.0 → 1.73.0

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

@@ -1,4 +1,4 @@
-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  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-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-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-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-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=\"tertiary\"` */\n.saltInput-tertiary {\n  --input-background: var(--salt-editable-tertiary-background);\n  --input-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --input-background-readonly: var(--salt-editable-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-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-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-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  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, var(--salt-text-letterSpacing));\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";
+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  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-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-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-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-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=\"tertiary\"` */\n.saltInput-tertiary {\n  --input-background: var(--salt-editable-tertiary-background);\n  --input-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --input-background-readonly: var(--salt-editable-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-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-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-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  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, var(--salt-text-letterSpacing));\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-lighter);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Input.css.js.map

package/dist-es/link/Link.js

@@ -6,6 +6,8 @@ import { forwardRef } from 'react';
 import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';

package/dist-es/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n  /**\n   * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /*\n   * The color of the text. Defaults to \"primary\".\n   */\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n  /**\n   *\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    underline = \"default\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`underline${capitalize(underline)}`),\n        {\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      href={href}\n      ref={ref}\n      target={target}\n      color=\"inherit\"\n      externalLinkContent={\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>\n            Opens in a new tab\n          </span>\n        </>\n      }\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n"],"names":["Link","linkCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAiCrC,MAAM,IAAA,GAAO,UAAA,CAAyC,SAASA,KAAAA,CACpE;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GAAA,EACyB;AACzB,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AACtC,EAAA,MAAM,iBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAY,UAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA,EAAM,SAAA;AAAA,MACN,qCACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,iBAAA,wBACE,iBAAA,EAAA,EAAkB,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,4BAEjE,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF,CAAA;AAAA,MAED,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  forwardRef,\n  type ReactElement,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { capitalize, makePrefixer, type RenderPropsType } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n  /**\n   * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /*\n   * The color of the text. Defaults to \"primary\".\n   */\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n  /**\n   *\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    underline = \"default\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`underline${capitalize(underline)}`),\n        {\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      href={href}\n      ref={ref}\n      target={target}\n      color=\"inherit\"\n      externalLinkContent={\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>\n            Opens in a new tab\n          </span>\n        </>\n      }\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n"],"names":["Link","linkCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAiCrC,MAAM,IAAA,GAAO,UAAA,CAAyC,SAASA,KAAAA,CACpE;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,EAAO,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAA,GAAS,OAAA;AAAA,EACT,SAAA,GAAY,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GAAA,EACyB;AACzB,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,WAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,EAAA,MAAM,KAAA,GAAQ,WAAW,SAAA,IAAa,SAAA;AACtC,EAAA,MAAM,iBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,SAAA,EAAY,UAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAA,KAAU;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA,EAAM,SAAA;AAAA,MACN,qCACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,iBAAA,wBACE,iBAAA,EAAA,EAAkB,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,4BAEjE,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF,CAAA;AAAA,MAED,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/link/LinkAction.js

@@ -10,14 +10,15 @@ import '../viewport/ViewportProvider.js';
 const LinkAction = forwardRef(
   function LinkAction2({ externalLinkContent, ...props }, ref) {
     const link = renderProps("a", { ...props, ref });
-    if (link.props.target !== "_blank" || !externalLinkContent) {
+    const linkProps = link.props;
+    if (linkProps.target !== "_blank" || !externalLinkContent) {
       return link;
     }
     return cloneElement(
       link,
       void 0,
       /* @__PURE__ */ jsxs(Fragment, { children: [
-        link.props.children,
+        linkProps.children,
         externalLinkContent
       ] })
     );

package/dist-es/link/LinkAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {\n  externalLinkContent?: ReactNode;\n}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n  function LinkAction({ externalLinkContent, ...props }, ref) {\n    // Resolve the final element before deciding whether to append external-link\n    // content. A JSX `render` element can override `target`, so checking\n    // `props.target` would make the icon and announcement disagree with the\n    // rendered link.\n    const link = renderProps(\"a\", { ...props, ref });\n\n    if (link.props.target !== \"_blank\" || !externalLinkContent) {\n      return link;\n    }\n\n    return cloneElement(\n      link,\n      undefined,\n      <>\n        {link.props.children}\n        {externalLinkContent}\n      </>,\n    );\n  },\n);\n"],"names":["LinkAction"],"mappings":";;;;;;;;;AAYO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,EAAE,qBAAqB,GAAG,KAAA,IAAS,GAAA,EAAK;AAK1D,IAAA,MAAM,OAAO,WAAA,CAAY,GAAA,EAAK,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAE/C,IAAA,IAAI,IAAA,CAAK,KAAA,CAAM,MAAA,KAAW,QAAA,IAAY,CAAC,mBAAA,EAAqB;AAC1D,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAO,YAAA;AAAA,MACL,IAAA;AAAA,MACA,MAAA;AAAA,sBACA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,KAAA,CAAM,QAAA;AAAA,QACX;AAAA,OAAA,EACH;AAAA,KACF;AAAA,EACF;AACF;;;;"}
+{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {\n  externalLinkContent?: ReactNode;\n}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n  function LinkAction({ externalLinkContent, ...props }, ref) {\n    // Resolve the final element before deciding whether to append external-link\n    // content. A JSX `render` element can override `target`, so checking\n    // `props.target` would make the icon and announcement disagree with the\n    // rendered link.\n    const link = renderProps(\"a\", { ...props, ref });\n\n    const linkProps = link.props as ComponentPropsWithoutRef<\"a\">;\n\n    if (linkProps.target !== \"_blank\" || !externalLinkContent) {\n      return link;\n    }\n\n    return cloneElement(\n      link,\n      undefined,\n      <>\n        {linkProps.children}\n        {externalLinkContent}\n      </>,\n    );\n  },\n);\n"],"names":["LinkAction"],"mappings":";;;;;;;;;AAYO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,EAAE,qBAAqB,GAAG,KAAA,IAAS,GAAA,EAAK;AAK1D,IAAA,MAAM,OAAO,WAAA,CAAY,GAAA,EAAK,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAE/C,IAAA,MAAM,YAAY,IAAA,CAAK,KAAA;AAEvB,IAAA,IAAI,SAAA,CAAU,MAAA,KAAW,QAAA,IAAY,CAAC,mBAAA,EAAqB;AACzD,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAO,YAAA;AAAA,MACL,IAAA;AAAA,MACA,MAAA;AAAA,sBACA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,SAAA,CAAU,QAAA;AAAA,QACV;AAAA,OAAA,EACH;AAAA,KACF;AAAA,EACF;AACF;;;;"}

package/dist-es/link-button/LinkButton.js

@@ -60,14 +60,15 @@ const LinkButton = forwardRef(
       target,
       children
     });
-    if (linkButton.props.target !== "_blank") {
+    const linkButtonProps = linkButton.props;
+    if (linkButtonProps.target !== "_blank") {
       return linkButton;
     }
     return cloneElement(
       linkButton,
       void 0,
       /* @__PURE__ */ jsxs(Fragment, { children: [
-        linkButton.props.children,
+        linkButtonProps.children,
         LinkButtonIconComponent && /* @__PURE__ */ jsx(
           LinkButtonIconComponent,
           {

package/dist-es/link-button/LinkButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  cloneElement,\n  forwardRef,\n} from \"react\";\nimport { useButton } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n  capitalize,\n  makePrefixer,\n  type RenderPropsType,\n  renderProps,\n} from \"../utils\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   */\n  sentiment?: \"accented\" | \"neutral\";\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link button.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  function LinkButton(props, ref) {\n    const {\n      children,\n      className,\n      IconComponent,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      sentiment = \"neutral\",\n      target = \"_self\",\n      underline = \"default\",\n      ...rest\n    } = props;\n\n    const { active, buttonProps } = useButton<HTMLAnchorElement>({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n    // Native anchors with an href do not require tabIndex=\"0\".\n    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-button\",\n      css: linkButtonCss,\n      window: targetWindow,\n    });\n    const { ExternalIcon } = useIcon();\n\n    const LinkButtonIconComponent =\n      IconComponent === undefined ? ExternalIcon : IconComponent;\n\n    const linkButton = renderProps(\"a\", {\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(`underline${capitalize(underline)}`),\n        { [withBaseName(\"active\")]: active },\n        className,\n      ),\n      ...activeStateProps,\n      ...rest,\n      ref,\n      target,\n      children,\n    });\n\n    if (linkButton.props.target !== \"_blank\") {\n      return linkButton;\n    }\n\n    return cloneElement(\n      linkButton,\n      undefined,\n      <>\n        {linkButton.props.children}\n        {LinkButtonIconComponent && (\n          <LinkButtonIconComponent\n            className={withBaseName(\"icon\")}\n            aria-hidden\n          />\n        )}\n        <span className={withBaseName(\"externalLinkADA\")}>\n          Opens in a new tab\n        </span>\n      </>,\n    );\n  },\n);\n"],"names":["LinkButton","linkButtonCss"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAa,YAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAY,UAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,IAAI,UAAA,CAAW,KAAA,CAAM,MAAA,KAAW,QAAA,EAAU;AACxC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAO,YAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,KAAA,CAAM,QAAA;AAAA,QACjB,uBAAA,oBACC,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,4BAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}
+{"version":3,"file":"LinkButton.js","sources":["../src/link-button/LinkButton.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  cloneElement,\n  forwardRef,\n} from \"react\";\nimport { useButton } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport {\n  capitalize,\n  makePrefixer,\n  type RenderPropsType,\n  renderProps,\n} from \"../utils\";\n\nimport linkButtonCss from \"./LinkButton.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkButton\");\n\nexport interface LinkButtonProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * Icon component displayed when `target=\"_blank\"`. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   */\n  sentiment?: \"accented\" | \"neutral\";\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link button.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  function LinkButton(props, ref) {\n    const {\n      children,\n      className,\n      IconComponent,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      sentiment = \"neutral\",\n      target = \"_self\",\n      underline = \"default\",\n      ...rest\n    } = props;\n\n    const { active, buttonProps } = useButton<HTMLAnchorElement>({\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n    // Native anchors with an href do not require tabIndex=\"0\".\n    const { tabIndex: _tabIndex, ...activeStateProps } = buttonProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-button\",\n      css: linkButtonCss,\n      window: targetWindow,\n    });\n    const { ExternalIcon } = useIcon();\n\n    const LinkButtonIconComponent =\n      IconComponent === undefined ? ExternalIcon : IconComponent;\n\n    const linkButton = renderProps(\"a\", {\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(`underline${capitalize(underline)}`),\n        { [withBaseName(\"active\")]: active },\n        className,\n      ),\n      ...activeStateProps,\n      ...rest,\n      ref,\n      target,\n      children,\n    });\n\n    const linkButtonProps = linkButton.props as ComponentPropsWithoutRef<\"a\">;\n\n    if (linkButtonProps.target !== \"_blank\") {\n      return linkButton;\n    }\n\n    return cloneElement(\n      linkButton,\n      undefined,\n      <>\n        {linkButtonProps.children}\n        {LinkButtonIconComponent && (\n          <LinkButtonIconComponent\n            className={withBaseName(\"icon\")}\n            aria-hidden\n          />\n        )}\n        <span className={withBaseName(\"externalLinkADA\")}>\n          Opens in a new tab\n        </span>\n      </>,\n    );\n  },\n);\n"],"names":["LinkButton","linkButtonCss"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAyB3C,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CAAW,KAAA,EAAO,GAAA,EAAK;AAC9B,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,GAAY,SAAA;AAAA,MACZ,MAAA,GAAS,OAAA;AAAA,MACT,SAAA,GAAY,SAAA;AAAA,MACZ,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,kBAAiB,GAAI,WAAA;AAErD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,IAAA,MAAM,uBAAA,GACJ,aAAA,KAAkB,MAAA,GAAY,YAAA,GAAe,aAAA;AAE/C,IAAA,MAAM,UAAA,GAAa,YAAY,GAAA,EAAK;AAAA,MAClC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,YAAA,CAAa,CAAA,SAAA,EAAY,UAAA,CAAW,SAAS,CAAC,CAAA,CAAE,CAAA;AAAA,QAChD,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA,EAAO;AAAA,QACnC;AAAA,OACF;AAAA,MACA,GAAG,gBAAA;AAAA,MACH,GAAG,IAAA;AAAA,MACH,GAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,kBAAkB,UAAA,CAAW,KAAA;AAEnC,IAAA,IAAI,eAAA,CAAgB,WAAW,QAAA,EAAU;AACvC,MAAA,OAAO,UAAA;AAAA,IACT;AAEA,IAAA,OAAO,YAAA;AAAA,MACL,UAAA;AAAA,MACA,MAAA;AAAA,sBACA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,eAAA,CAAgB,QAAA;AAAA,QAChB,uBAAA,oBACC,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,aAAA,EAAW;AAAA;AAAA,SACb;AAAA,4BAED,MAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,iBAAiB,GAAG,QAAA,EAAA,oBAAA,EAElD;AAAA,OAAA,EACF;AAAA,KACF;AAAA,EACF;AACF;;;;"}

package/dist-es/list-box/ListBox.js

@@ -65,7 +65,7 @@ const ListBox = forwardRef(function ListBox2(props, ref) {
     setListRef
   } = listControl;
   const typeaheadString = useRef("");
-  const typeaheadTimeout = useRef();
+  const typeaheadTimeout = useRef(void 0);
   const handleTypeahead = (event) => {
     if (typeaheadTimeout.current) {
       clearTimeout(typeaheadTimeout.current);

package/dist-es/list-box/ListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\nimport {\n  getListControlNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n  defaultValueToString,\n  type ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n  /**\n   * If `true`, the list box will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `false`, the list box will have not a border.\n   */\n  bordered?: boolean;\n  /**\n   * The options to display in the list box.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the list box will be multiselect.\n   */\n  multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n  Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n  props: ListBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    bordered,\n    className,\n    children,\n    defaultSelected,\n    disabled,\n    selected,\n    onSelectionChange,\n    multiselect,\n    valueToString = defaultValueToString,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-list-box\",\n    css: listBoxCss,\n    window: targetWindow,\n  });\n\n  const listControl = useListControl<Item>({\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n    disabled,\n  });\n\n  const {\n    activeState,\n    setActive,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    setFocusedState,\n    setListRef,\n  } = listControl;\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>();\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    const newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (isModifiedListControlNavigationKey(event)) {\n      return;\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    if (activeOption === undefined) {\n      return;\n    }\n\n    const isNavigationKey = isListControlNavigationKey(event.key);\n    if (isNavigationKey) {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n      ? getListControlNavigationTarget(event.key, activeOption, {\n          getFirstOption,\n          getLastOption,\n          getOptionAfter,\n          getOptionBefore,\n          getOptionPageAbove,\n          getOptionPageBelow,\n        })\n      : undefined;\n\n    switch (event.key) {\n      case \"Enter\":\n      case \" \":\n        if (\n          activeState?.disabled ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const wasMouseDown = useRef(false);\n\n  const handleMouseDown = () => {\n    wasMouseDown.current = true;\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n    if (wasMouseDown.current) {\n      wasMouseDown.current = false;\n      return;\n    }\n\n    setFocusVisibleState(true);\n    wasMouseDown.current = false;\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive: ReturnType<typeof getOptionAtIndex>;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getOptionAtIndex(0);\n    }\n\n    setActive(newActive?.data);\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    setFocusedState(false);\n    setActive(undefined);\n    onBlur?.(event);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n    setActive(undefined);\n  };\n\n  const handleRef = useForkRef(setListRef, ref);\n\n  return (\n    <ListControlProvider value={listControl}>\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"bordered\")]: bordered },\n          className,\n        )}\n        role=\"listbox\"\n        aria-activedescendant={activeState?.id}\n        aria-disabled={disabled || undefined}\n        aria-multiselectable={multiselect}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        onMouseOver={handleListMouseOver}\n        onMouseDown={handleMouseDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["ListBox","listBoxCss"],"mappings":"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"}
+{"version":3,"file":"ListBox.js","sources":["../src/list-box/ListBox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useRef,\n} from \"react\";\nimport {\n  getListControlNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport {\n  defaultValueToString,\n  type ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { makePrefixer, useForkRef } from \"../utils\";\n\nimport listBoxCss from \"./ListBox.css\";\n\nexport type ListBoxProps<Item = string> = {\n  /**\n   * If `true`, the list box will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `false`, the list box will have not a border.\n   */\n  bordered?: boolean;\n  /**\n   * The options to display in the list box.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the list box will be multiselect.\n   */\n  multiselect?: boolean;\n} & ComponentPropsWithoutRef<\"div\"> &\n  Omit<ListControlProps<Item>, \"onOpenChange\">;\n\nconst withBaseName = makePrefixer(\"saltListBox\");\n\nexport const ListBox = forwardRef(function ListBox<Item>(\n  props: ListBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    bordered,\n    className,\n    children,\n    defaultSelected,\n    disabled,\n    selected,\n    onSelectionChange,\n    multiselect,\n    valueToString = defaultValueToString,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-list-box\",\n    css: listBoxCss,\n    window: targetWindow,\n  });\n\n  const listControl = useListControl<Item>({\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n    disabled,\n  });\n\n  const {\n    activeState,\n    setActive,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    setFocusedState,\n    setListRef,\n  } = listControl;\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>(undefined);\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    const newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (isModifiedListControlNavigationKey(event)) {\n      return;\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption()?.data;\n\n    if (activeOption === undefined) {\n      return;\n    }\n\n    const isNavigationKey = isListControlNavigationKey(event.key);\n    if (isNavigationKey) {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined = isNavigationKey\n      ? getListControlNavigationTarget(event.key, activeOption, {\n          getFirstOption,\n          getLastOption,\n          getOptionAfter,\n          getOptionBefore,\n          getOptionPageAbove,\n          getOptionPageBelow,\n        })\n      : undefined;\n\n    switch (event.key) {\n      case \"Enter\":\n      case \" \":\n        if (\n          activeState?.disabled ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const wasMouseDown = useRef(false);\n\n  const handleMouseDown = () => {\n    wasMouseDown.current = true;\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n    if (wasMouseDown.current) {\n      wasMouseDown.current = false;\n      return;\n    }\n\n    setFocusVisibleState(true);\n    wasMouseDown.current = false;\n\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive: ReturnType<typeof getOptionAtIndex>;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getOptionAtIndex(0);\n    }\n\n    setActive(newActive?.data);\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    setFocusedState(false);\n    setActive(undefined);\n    onBlur?.(event);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n    setActive(undefined);\n  };\n\n  const handleRef = useForkRef(setListRef, ref);\n\n  return (\n    <ListControlProvider value={listControl}>\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"bordered\")]: bordered },\n          className,\n        )}\n        role=\"listbox\"\n        aria-activedescendant={activeState?.id}\n        aria-disabled={disabled || undefined}\n        aria-multiselectable={multiselect}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        onMouseOver={handleListMouseOver}\n        onMouseDown={handleMouseDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ListBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["ListBox","listBoxCss"],"mappings":";;;;;;;;;;;;;;;;AAkDA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAExC,MAAM,OAAA,GAAU,UAAA,CAAW,SAASA,QAAAA,CACzC,OACA,GAAA,EACA;AACA,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA,GAAgB,oBAAA;AAAA,IAChB,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,cAAc,cAAA,CAAqB;AAAA,IACvC,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM;AAAA,IACJ,WAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACF,GAAI,WAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,OAAO,EAAE,CAAA;AACjC,EAAA,MAAM,gBAAA,GAAmB,OAA2B,MAAS,CAAA;AAE7D,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAyC;AAChE,IAAA,IAAI,iBAAiB,OAAA,EAAS;AAC5B,MAAA,YAAA,CAAa,iBAAiB,OAAO,CAAA;AAAA,IACvC;AACA,IAAA,eAAA,CAAgB,WAAW,KAAA,CAAM,GAAA;AACjC,IAAA,gBAAA,CAAiB,OAAA,GAAU,MAAA,CAAO,UAAA,CAAW,MAAM;AACjD,MAAA,eAAA,CAAgB,OAAA,GAAU,EAAA;AAAA,IAC5B,GAAG,GAAG,CAAA;AAEN,IAAA,MAAM,SAAA,GAAY,mBAAA,CAAoB,eAAA,CAAgB,OAAA,EAAS,WAAW,CAAA;AAE1E,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,SAAA,CAAU,SAAS,CAAA;AACnB,MAAA,oBAAA,CAAqB,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAyC;AA/HlE,IAAA,IAAA,EAAA;AAgII,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,KAAA,CAAA;AAEZ,IAAA,IAAI,kCAAA,CAAmC,KAAK,CAAA,EAAG;AAC7C,MAAA;AAAA,IACF;AAEA,IAAA,IACE,KAAA,CAAM,GAAA,CAAI,MAAA,KAAW,CAAA,IACrB,CAAC,KAAA,CAAM,OAAA,IACP,CAAC,KAAA,CAAM,OAAA,IACP,CAAC,KAAA,CAAM,MAAA,EACP;AACA,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACvB;AAEA,IAAA,MAAM,YAAA,GAAe,WAAA,KAAA,CAAe,EAAA,GAAA,cAAA,EAAe,KAAf,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,IAAA,CAAA;AAEtD,IAAA,IAAI,iBAAiB,MAAA,EAAW;AAC9B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,eAAA,GAAkB,0BAAA,CAA2B,KAAA,CAAM,GAAG,CAAA;AAC5D,IAAA,IAAI,eAAA,EAAiB;AACnB,MAAA,KAAA,CAAM,cAAA,EAAe;AAAA,IACvB;AAEA,IAAA,MAAM,SAAA,GAAgD,eAAA,GAClD,8BAAA,CAA+B,KAAA,CAAM,KAAK,YAAA,EAAc;AAAA,MACtD,cAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,MACA;AAAA,KACD,CAAA,GACD,MAAA;AAEJ,IAAA,QAAQ,MAAM,GAAA;AAAK,MACjB,KAAK,OAAA;AAAA,MACL,KAAK,GAAA;AACH,QAAA,IAAA,CACE,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAa,QAAA,KACZ,eAAA,CAAgB,OAAA,CAAQ,IAAA,GAAO,MAAA,GAAS,CAAA,IAAK,KAAA,CAAM,GAAA,KAAQ,GAAA,EAC5D;AACA,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA;AAAA,QACF;AAEA,QAAA,IAAI,CAAC,WAAA,EAAa;AAChB,UAAA;AAAA,QACF;AAEA,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,MAAA,CAAO,OAAO,WAAW,CAAA;AAEzB,QAAA;AAAA;AAGJ,IAAA,IAAI,SAAA,IAAa,SAAA,CAAU,IAAA,CAAK,EAAA,MAAO,2CAAa,EAAA,CAAA,EAAI;AACtD,MAAA,SAAA,CAAU,UAAU,IAAI,CAAA;AACxB,MAAA,oBAAA,CAAqB,IAAI,CAAA;AAAA,IAC3B;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AAAA,EACzB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAsC;AACzD,IAAA,IAAI,aAAa,OAAA,EAAS;AACxB,MAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AACvB,MAAA;AAAA,IACF;AAEA,IAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,IAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AAGvB,IAAA,MAAM,WAAA,GAAc,WAAA,GAAc,gBAAA,CAAiB,WAAW,CAAA,GAAI,EAAA;AAClE,IAAA,IAAI,SAAA;AAGJ,IAAA,IAAI,cAAc,CAAA,EAAG;AACnB,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,aAAA,CAAc,SAAS,CAAA,EAAG;AAC5B,MAAA,SAAA,GAAY,kBAAA;AAAA,QACV,CAAC,MAAA,KAAW,MAAA,CAAO,KAAA,KAAU,cAAc,CAAC;AAAA,QAC5C,GAAA,EAAI;AAAA,IACR;AAGA,IAAA,IAAI,CAAC,SAAA,EAAW;AACd,MAAA,SAAA,GAAY,iBAAiB,CAAC,CAAA;AAAA,IAChC;AAEA,IAAA,SAAA,CAAU,uCAAW,IAAI,CAAA;AACzB,IAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAsC;AACxD,IAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,IAAA,SAAA,CAAU,MAAS,CAAA;AACnB,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,EACX,CAAA;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,IAAA,SAAA,CAAU,MAAS,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,UAAA,EAAY,GAAG,CAAA;AAE5C,EAAA,uBACE,GAAA,CAAC,mBAAA,EAAA,EAAoB,KAAA,EAAO,WAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA,EAAS;AAAA,QACvC;AAAA,OACF;AAAA,MACA,IAAA,EAAK,SAAA;AAAA,MACL,yBAAuB,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAa,EAAA;AAAA,MACpC,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,sBAAA,EAAsB,WAAA;AAAA,MACtB,QAAA,EAAU,WAAW,EAAA,GAAK,CAAA;AAAA,MAC1B,SAAA,EAAW,aAAA;AAAA,MACX,MAAA,EAAQ,UAAA;AAAA,MACR,OAAA,EAAS,WAAA;AAAA,MACT,WAAA,EAAa,mBAAA;AAAA,MACb,WAAA,EAAa,eAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/list-control/ListControlContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n  id: string;\n  disabled: boolean;\n  value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n  openState: boolean;\n  setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n  register: (\n    optionValue: OptionValue<Item>,\n    element: HTMLElement,\n  ) => () => void;\n  selectedState: unknown[];\n  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n  activeState?: OptionValue<Item>;\n  setActive: (option: OptionValue<Item>) => void;\n  multiselect: boolean;\n  focusVisibleState: boolean;\n  valueToString: (item: Item) => string;\n  disabled?: boolean;\n  listRef?: RefObject<HTMLDivElement>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n  \"ListControlContext\",\n  {\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    register() {\n      return () => undefined;\n    },\n    selectedState: [],\n    select() {\n      return undefined;\n    },\n    activeState: undefined,\n    setActive() {\n      return undefined;\n    },\n    multiselect: false,\n    focusVisibleState: false,\n    valueToString: defaultValueToString,\n    disabled: false,\n    listRef: undefined,\n  },\n);\n\nexport function useListControlContext<Item>() {\n  return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,kBAAA,GAAqB,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,GAAU;AACR,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,GAAW;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,IACf,CAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAA,GAAS;AACP,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,MAAA;AAAA,IACb,SAAA,GAAY;AACV,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,KAAA;AAAA,IACb,iBAAA,EAAmB,KAAA;AAAA,IACnB,aAAA,EAAe,oBAAA;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;AAEO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,OAAO,WAAW,kBAAkB,CAAA;AACtC;;;;"}
+{"version":3,"file":"ListControlContext.js","sources":["../src/list-control/ListControlContext.tsx"],"sourcesContent":["import { type RefObject, type SyntheticEvent, useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport { defaultValueToString } from \"./ListControlState\";\n\nexport interface OptionValue<Item> {\n  id: string;\n  disabled: boolean;\n  value: Item;\n}\n\nexport type OpenChangeReason = \"input\" | \"manual\";\n\nexport interface ListControlContextValue<Item> {\n  openState: boolean;\n  setOpen: (newOpen: boolean, openChangeReason?: OpenChangeReason) => void;\n  register: (\n    optionValue: OptionValue<Item>,\n    element: HTMLElement,\n  ) => () => void;\n  selectedState: unknown[];\n  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n  activeState?: OptionValue<Item>;\n  setActive: (option: OptionValue<Item>) => void;\n  multiselect: boolean;\n  focusVisibleState: boolean;\n  valueToString: (item: Item) => string;\n  disabled?: boolean;\n  listRef?: RefObject<HTMLDivElement | null>;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: Need to use any here as a wider type but it gets narrowed when using the useListControl hook.\nexport const ListControlContext = createContext<ListControlContextValue<any>>(\n  \"ListControlContext\",\n  {\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    register() {\n      return () => undefined;\n    },\n    selectedState: [],\n    select() {\n      return undefined;\n    },\n    activeState: undefined,\n    setActive() {\n      return undefined;\n    },\n    multiselect: false,\n    focusVisibleState: false,\n    valueToString: defaultValueToString,\n    disabled: false,\n    listRef: undefined,\n  },\n);\n\nexport function useListControlContext<Item>() {\n  return useContext(ListControlContext) as ListControlContextValue<Item>;\n}\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,kBAAA,GAAqB,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,GAAU;AACR,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,QAAA,GAAW;AACT,MAAA,OAAO,MAAM,MAAA;AAAA,IACf,CAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,MAAA,GAAS;AACP,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,MAAA;AAAA,IACb,SAAA,GAAY;AACV,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,IACA,WAAA,EAAa,KAAA;AAAA,IACb,iBAAA,EAAmB,KAAA;AAAA,IACnB,aAAA,EAAe,oBAAA;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA;AAEb;AAEO,SAAS,qBAAA,GAA8B;AAC5C,EAAA,OAAO,WAAW,kBAAkB,CAAA;AACtC;;;;"}

package/dist-es/list-control/ListControlOptionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListControlOptionContext.js","sources":["../src/list-control/ListControlOptionContext.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  type RefObject,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport { createContext } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\nimport { ListControlOptionStore } from \"./ListControlOptionStore\";\n\nexport interface ListControlOptionContextValue<Item> {\n  disabled?: boolean;\n  listRef?: RefObject<HTMLDivElement>;\n  multiselect: boolean;\n  optionStateStore: ListControlOptionStore<Item>;\n  register: (\n    optionValue: OptionValue<Item>,\n    element: HTMLElement,\n  ) => () => void;\n  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n  setActive: (option: OptionValue<Item>) => void;\n  valueToString: (item: Item) => string;\n}\n\nconst fallbackOptionStateStore = new ListControlOptionStore<unknown>();\n\nconst defaultListControlOptionContext: ListControlOptionContextValue<unknown> =\n  {\n    disabled: false,\n    listRef: undefined,\n    multiselect: false,\n    optionStateStore: fallbackOptionStateStore,\n    register: () => () => undefined,\n    select: () => undefined,\n    setActive: () => undefined,\n    valueToString: (item) => String(item),\n  };\n\nconst ListControlOptionContext = createContext(\n  \"ListControlOptionContext\",\n  defaultListControlOptionContext,\n);\n\nexport function ListControlOptionContextProvider<Item>({\n  children,\n  value,\n}: {\n  children: ReactNode;\n  value: ListControlOptionContextValue<Item>;\n}) {\n  return (\n    <ListControlOptionContext.Provider\n      value={value as unknown as ListControlOptionContextValue<unknown>}\n    >\n      {children}\n    </ListControlOptionContext.Provider>\n  );\n}\n\nexport function useListControlOptionContext<Item>() {\n  const context = useContext(ListControlOptionContext);\n  return context as unknown as ListControlOptionContextValue<Item>;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwBA,MAAM,wBAAA,GAA2B,IAAI,sBAAA,EAAgC;AAErE,MAAM,+BAAA,GACJ;AAAA,EACE,QAAA,EAAU,KAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,WAAA,EAAa,KAAA;AAAA,EACb,gBAAA,EAAkB,wBAAA;AAAA,EAClB,QAAA,EAAU,MAAM,MAAM,MAAA;AAAA,EACtB,QAAQ,MAAM,MAAA;AAAA,EACd,WAAW,MAAM,MAAA;AAAA,EACjB,aAAA,EAAe,CAAC,IAAA,KAAS,MAAA,CAAO,IAAI;AACtC,CAAA;AAEF,MAAM,wBAAA,GAA2B,aAAA;AAAA,EAC/B,0BAAA;AAAA,EACA;AACF,CAAA;AAEO,SAAS,gCAAA,CAAuC;AAAA,EACrD,QAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,wBAAA,CAAyB,QAAA;AAAA,IAAzB;AAAA,MACC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,2BAAA,GAAoC;AAClD,EAAA,MAAM,OAAA,GAAU,WAAW,wBAAwB,CAAA;AACnD,EAAA,OAAO,OAAA;AACT;;;;"}
+{"version":3,"file":"ListControlOptionContext.js","sources":["../src/list-control/ListControlOptionContext.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  type RefObject,\n  type SyntheticEvent,\n  useContext,\n} from \"react\";\nimport { createContext } from \"../utils\";\nimport type { OptionValue } from \"./ListControlContext\";\nimport { ListControlOptionStore } from \"./ListControlOptionStore\";\n\nexport interface ListControlOptionContextValue<Item> {\n  disabled?: boolean;\n  listRef?: RefObject<HTMLDivElement | null>;\n  multiselect: boolean;\n  optionStateStore: ListControlOptionStore<Item>;\n  register: (\n    optionValue: OptionValue<Item>,\n    element: HTMLElement,\n  ) => () => void;\n  select: (event: SyntheticEvent, option: OptionValue<Item>) => void;\n  setActive: (option: OptionValue<Item>) => void;\n  valueToString: (item: Item) => string;\n}\n\nconst fallbackOptionStateStore = new ListControlOptionStore<unknown>();\n\nconst defaultListControlOptionContext: ListControlOptionContextValue<unknown> =\n  {\n    disabled: false,\n    listRef: undefined,\n    multiselect: false,\n    optionStateStore: fallbackOptionStateStore,\n    register: () => () => undefined,\n    select: () => undefined,\n    setActive: () => undefined,\n    valueToString: (item) => String(item),\n  };\n\nconst ListControlOptionContext = createContext(\n  \"ListControlOptionContext\",\n  defaultListControlOptionContext,\n);\n\nexport function ListControlOptionContextProvider<Item>({\n  children,\n  value,\n}: {\n  children: ReactNode;\n  value: ListControlOptionContextValue<Item>;\n}) {\n  return (\n    <ListControlOptionContext.Provider\n      value={value as unknown as ListControlOptionContextValue<unknown>}\n    >\n      {children}\n    </ListControlOptionContext.Provider>\n  );\n}\n\nexport function useListControlOptionContext<Item>() {\n  const context = useContext(ListControlOptionContext);\n  return context as unknown as ListControlOptionContextValue<Item>;\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwBA,MAAM,wBAAA,GAA2B,IAAI,sBAAA,EAAgC;AAErE,MAAM,+BAAA,GACJ;AAAA,EACE,QAAA,EAAU,KAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,WAAA,EAAa,KAAA;AAAA,EACb,gBAAA,EAAkB,wBAAA;AAAA,EAClB,QAAA,EAAU,MAAM,MAAM,MAAA;AAAA,EACtB,QAAQ,MAAM,MAAA;AAAA,EACd,WAAW,MAAM,MAAA;AAAA,EACjB,aAAA,EAAe,CAAC,IAAA,KAAS,MAAA,CAAO,IAAI;AACtC,CAAA;AAEF,MAAM,wBAAA,GAA2B,aAAA;AAAA,EAC/B,0BAAA;AAAA,EACA;AACF,CAAA;AAEO,SAAS,gCAAA,CAAuC;AAAA,EACrD,QAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,wBAAA,CAAyB,QAAA;AAAA,IAAzB;AAAA,MACC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,SAAS,2BAAA,GAAoC;AAClD,EAAA,MAAM,OAAA,GAAU,WAAW,wBAAwB,CAAA;AACnD,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist-es/mega-menu/MegaMenuGroupHeading.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMegaMenuGroupHeading {\n  display: flex;\n  align-items: center;\n  margin: 0 0 var(--salt-spacing-50);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n  min-height: var(--salt-size-base);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  color: var(--salt-content-secondary-foreground);\n}\n";
+var css_248z = ".saltMegaMenuGroupHeading {\n  display: flex;\n  align-items: center;\n  margin: 0 0 var(--salt-spacing-50);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n  min-height: var(--salt-size-base);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-bolder);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  color: var(--salt-content-secondary-foreground);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MegaMenuGroupHeading.css.js.map

package/dist-es/mega-menu/MegaMenuListItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMegaMenuListItem {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n}\n\n.saltMegaMenuListItem-wrapper {\n  display: flex;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  align-items: flex-start;\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-hover);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  box-sizing: border-box;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  text-decoration: none;\n  border: none;\n  font: inherit;\n  text-align: start;\n}\n\n.saltMegaMenuListItem-wrapper > .saltIcon {\n  display: flex;\n  height: var(--salt-size-base);\n  align-items: center;\n}\n\n.saltMegaMenuListItem-content {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltMegaMenuListItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuListItem-wrapper:hover:not(:focus-visible) {\n  outline: none;\n  background: var(--salt-overlayable-background-hover);\n}\n\n.saltMegaMenuListItem-wrapper:active {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuListItem-wrapper:active::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: inherit;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n  pointer-events: none;\n}\n";
+var css_248z = ".saltMegaMenuListItem {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n}\n\n.saltMegaMenuListItem-wrapper {\n  display: flex;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  align-items: flex-start;\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-hover);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  box-sizing: border-box;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  text-decoration: none;\n  border: none;\n  font: inherit;\n  text-align: start;\n}\n\n.saltMegaMenuListItem-wrapper > .saltIcon {\n  display: flex;\n  height: var(--salt-size-base);\n  align-items: center;\n}\n\n.saltMegaMenuListItem-content {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltMegaMenuListItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMegaMenuListItem-wrapper:hover:not(:focus-visible, :active) {\n  outline: none;\n  background: var(--salt-overlayable-background-hover);\n}\n\n.saltMegaMenuListItem-wrapper:active {\n  background: var(--salt-navigable-accent-background-active);\n}\n\n.saltMegaMenuListItem-wrapper:active::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  border-radius: inherit;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-navigable-accent-borderColor-active);\n  pointer-events: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MegaMenuListItem.css.js.map

package/dist-es/menu/MenuGroup.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMenuGroup-label {\n  background: var(--salt-container-primary-background);\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltMenuGroup {\n  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n  border-top: 0;\n}\n";
+var css_248z = ".saltMenuGroup-label {\n  background: var(--salt-container-primary-background);\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-bolder);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltMenuGroup {\n  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n  border-top: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MenuGroup.css.js.map

package/dist-es/multiline-input/MultilineInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  display: inline-grid;\n  grid-template-areas: \"start-adornment textarea end-adornment\";\n  grid-template-columns: min-content 1fr min-content;\n  grid-template-rows: 1fr;\n  background: var(--multilineInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 0 var(--salt-spacing-100);\n}\n\n.saltMultilineInput-wrapper {\n  grid-area: textarea;\n  overflow: hidden;\n  margin: var(--salt-spacing-75) 0;\n  display: flex;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-focused,\n.saltMultilineInput-bordered.saltMultilineInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-disabled,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-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(--multilineInput-borderColor);\n}\n\n.saltMultilineInput:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--multilineInput-borderColor-hover);\n}\n\n.saltMultilineInput-focused .saltMultilineInput-activationIndicator,\n.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--multilineInput-borderColor-active);\n}\n\n.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-activationIndicator,\n.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltMultilineInput-bordered .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-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.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltMultilineInput-tertiary {\n  --multilineInput-background: var(--salt-editable-tertiary-background);\n  --multilineInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-readonly: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-readonly: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-readonly: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused,\n.saltMultilineInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput.saltMultilineInput-readOnly {\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltMultilineInput.saltMultilineInput-disabled,\n.saltMultilineInput.saltMultilineInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-textarea {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  grid-template-areas: \"start-adornment textarea\" \"end-adornment end-adornment\";\n  grid-template-columns: min-content 1fr;\n  grid-template-rows: 1fr auto;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n  grid-area: start-adornment;\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n  grid-area: end-adornment;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-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 textarea element */\n.saltMultilineInput-textarea {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  resize: vertical;\n  width: 100%;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 0;\n  min-width: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  display: inline-grid;\n  grid-template-areas: \"start-adornment textarea end-adornment\";\n  grid-template-columns: min-content 1fr min-content;\n  grid-template-rows: 1fr;\n  background: var(--multilineInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 0 var(--salt-spacing-100);\n}\n\n.saltMultilineInput-wrapper {\n  grid-area: textarea;\n  overflow: hidden;\n  margin: var(--salt-spacing-75) 0;\n  display: flex;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-focused,\n.saltMultilineInput-bordered.saltMultilineInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-disabled,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-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(--multilineInput-borderColor);\n}\n\n.saltMultilineInput:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--multilineInput-borderColor-hover);\n}\n\n.saltMultilineInput-focused .saltMultilineInput-activationIndicator,\n.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--multilineInput-borderColor-active);\n}\n\n.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-activationIndicator,\n.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltMultilineInput-bordered .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-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.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltMultilineInput-tertiary {\n  --multilineInput-background: var(--salt-editable-tertiary-background);\n  --multilineInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-readonly: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-readonly: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-readonly: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused,\n.saltMultilineInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput.saltMultilineInput-readOnly {\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltMultilineInput.saltMultilineInput-disabled,\n.saltMultilineInput.saltMultilineInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-textarea {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  grid-template-areas: \"start-adornment textarea\" \"end-adornment end-adornment\";\n  grid-template-columns: min-content 1fr;\n  grid-template-rows: 1fr auto;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n  grid-area: start-adornment;\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n  grid-area: end-adornment;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-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 textarea element */\n.saltMultilineInput-textarea {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  resize: vertical;\n  width: 100%;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 0;\n  min-width: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MultilineInput.css.js.map

package/dist-es/navigation-item/NavigationItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltNavigationItem {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  position: relative;\n  background: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  text-decoration: none;\n  cursor: var(--salt-cursor-hover);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n  top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  --saltButton-margin: var(--salt-spacing-50) 0;\n\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-25);\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--salt-size-indicator);\n  left: var(--salt-spacing-25);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n  background: var(--salt-navigable-accent-indicator-active);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n";
+var css_248z = ".saltNavigationItem {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  position: relative;\n  background: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  text-decoration: none;\n  cursor: var(--salt-cursor-hover);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n  font-weight: var(--salt-text-fontWeight-bolder);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n  top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  --saltButton-margin: var(--salt-spacing-50) 0;\n\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-25);\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--salt-size-indicator);\n  left: var(--salt-spacing-25);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n  background: var(--salt-navigable-accent-indicator-active);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=NavigationItem.css.js.map

package/dist-es/number-input/NumberInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n  --numberInput-background: var(--salt-editable-tertiary-background);\n  --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-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  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-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.saltNumberInput-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.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-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.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n.saltNumberInput-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(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
+var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n  --numberInput-background: var(--salt-editable-tertiary-background);\n  --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-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  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-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.saltNumberInput-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.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-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.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n.saltNumberInput-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(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=NumberInput.css.js.map

package/dist-es/on-solid-button/OnSolidButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOnSolidButton {\n  --onSolidButton-borderWidth: var(--salt-size-fixed-100);\n  align-items: center;\n  appearance: none;\n  -webkit-appearance: none;\n  background: var(--salt-actionable-onSolid-subtle-background);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  border-style: solid;\n  border-width: var(--onSolidButton-borderWidth);\n  color: var(--salt-actionable-onSolid-subtle-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-action-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  padding: 0 calc(var(--salt-spacing-100) - var(--onSolidButton-borderWidth));\n  position: relative;\n  -webkit-tap-highlight-color: transparent;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  text-transform: var(--salt-text-action-textTransform);\n  transition: none;\n}\n\n.saltOnSolidButton:focus-visible {\n  background: var(--salt-actionable-onSolid-subtle-background-hover);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n  color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n  outline-color: var(--salt-focused-onSolid-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n@media (hover: hover) {\n  .saltOnSolidButton:hover {\n    background: var(--salt-actionable-onSolid-subtle-background-hover);\n    border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n    color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n    cursor: var(--salt-cursor-hover);\n  }\n}\n\n.saltOnSolidButton.saltOnSolidButton-active:focus-visible,\n.saltOnSolidButton:focus-visible:active,\n.saltOnSolidButton:active,\n.saltOnSolidButton.saltOnSolidButton-active {\n  background: var(--salt-actionable-onSolid-subtle-background-active);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor-active);\n  color: var(--salt-actionable-onSolid-subtle-foreground-active);\n  cursor: var(--salt-cursor-active);\n}\n\n.saltOnSolidButton:disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:hover {\n  background: var(--salt-actionable-onSolid-subtle-background);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n  color: var(--salt-actionable-onSolid-subtle-foreground);\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Lets a nested Text with styleAs=\"inherit\" use the action weights */\n.saltOnSolidButton {\n  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltOnSolidButton strong,\n.saltOnSolidButton b {\n  font-weight: var(--salt-text-action-fontWeight-bolder);\n}\n\n/* Deprecated, use a nested Text with styleAs=\"inherit\" and fontWeight=\"lighter\" instead */\n.saltOnSolidButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-lighter);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OnSolidButton.css.js.map

package/dist-es/on-solid-button/OnSolidButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnSolidButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/on-solid-button/OnSolidButton.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import '../button/Button.js';
+import { useButton } from '../button/useButton.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './OnSolidButton.css.js';
+
+const withBaseName = makePrefixer("saltOnSolidButton");
+const OnSolidButton = forwardRef(
+  function OnSolidButton2({
+    children,
+    className,
+    disabled,
+    focusableWhenDisabled,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    type = "button",
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-on-solid-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { active, buttonProps } = useButton({
+      disabled,
+      focusableWhenDisabled,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onKeyUp
+    });
+    const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...restButtonProps,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("active")]: active,
+            [withBaseName("disabled")]: disabled
+          },
+          className
+        ),
+        ...rest,
+        ref,
+        type,
+        children
+      }
+    );
+  }
+);
+
+export { OnSolidButton };
+//# sourceMappingURL=OnSolidButton.js.map

package/dist-es/on-solid-button/OnSolidButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnSolidButton.js","sources":["../src/on-solid-button/OnSolidButton.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 { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\n\nimport onSolidButtonCss from \"./OnSolidButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOnSolidButton\");\n\nexport interface OnSolidButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n}\n\nexport const OnSolidButton = forwardRef<HTMLButtonElement, OnSolidButtonProps>(\n  function OnSolidButton(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      type = \"button\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-on-solid-button\",\n      css: onSolidButtonCss,\n      window: targetWindow,\n    });\n\n    const { active, buttonProps } = useButton<HTMLButtonElement>({\n      disabled,\n      focusableWhenDisabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n\n    const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;\n\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n        type={type}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["OnSolidButton","onSolidButtonCss"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAa9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,iBAAgB,GAAI,WAAA;AAEpD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,WAC9B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/option/Option.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  opacity: 0.4;\n\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n    calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n    0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n";
+var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  opacity: 0.4;\n\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n    calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n    0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* Align the checkbox with the first line of text */\n.saltOption-checkbox {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Option.css.js.map

package/dist-es/option/Option.js

@@ -115,7 +115,13 @@ const OptionComponent = forwardRef(
           tabIndex: -1,
           ...rest,
           children: [
-            multiselect && /* @__PURE__ */ jsx(CheckboxIcon, { checked: selected }),
+            multiselect && /* @__PURE__ */ jsx(
+              CheckboxIcon,
+              {
+                checked: selected,
+                className: withBaseName("checkbox")
+              }
+            ),
             children ?? valueToString(value)
           ]
         }