@salt-ds/core 1.47.0 → 1.47.2

package/dist-cjs/tag/Tag.js

@@ -3,9 +3,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
+var clsx = require('clsx');
 var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
-var clsx = require('clsx');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');

package/dist-cjs/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport tagCss from \"./Tag.css\";\n\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltTag\");\n\nexport interface TagProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   * Emphasize the styling by applying a background color. Defaults to primary\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * The tag category, needs to be within range of 1-20. Defaults to 1\n   */\n  category?: number;\n}\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(\n  { children, className, variant = \"primary\", category = 1, bordered, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tag\",\n    css: tagCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`category-${category}`),\n        withBaseName(variant),\n        {\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Tag","useWindow","useComponentCssInjection","tagCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,SAAS,CAAA;AAiBpC,MAAM,GAAM,GAAAC,gBAAA,CAAqC,SAASC,IAAAA,CAC/D,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,SAAA,EAAW,WAAW,CAAG,EAAA,QAAA,EAAU,GAAG,IAAA,IACvE,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,CAAY,SAAA,EAAA,QAAQ,CAAE,CAAA,CAAA;AAAA,QACnC,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport tagCss from \"./Tag.css\";\n\nconst withBaseName = makePrefixer(\"saltTag\");\n\nexport interface TagProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   * Emphasize the styling by applying a background color. Defaults to primary\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * The tag category, needs to be within range of 1-20. Defaults to 1\n   */\n  category?: number;\n}\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(function Tag(\n  { children, className, variant = \"primary\", category = 1, bordered, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tag\",\n    css: tagCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`category-${category}`),\n        withBaseName(variant),\n        {\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Tag","useWindow","useComponentCssInjection","tagCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,SAAS,CAAA;AAiBpC,MAAM,GAAM,GAAAC,gBAAA,CAAqC,SAASC,IAAAA,CAC/D,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,SAAA,EAAW,WAAW,CAAG,EAAA,QAAA,EAAU,GAAG,IAAA,IACvE,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAAC,KAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,CAAY,SAAA,EAAA,QAAQ,CAAE,CAAA,CAAA;AAAA,QACnC,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/text/Text.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
@@ -8,8 +10,6 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var Text$1 = require('./Text.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltText");

package/dist-cjs/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"display4\"\n      | \"notation\"\n      | \"action\"\n      | \"code\";\n    /**\n     * Change text color palette\n     * @deprecated Use `color` instead\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>,\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled = false,\n    maxRows,\n    style,\n    styleAs,\n    variant,\n    color: colorProp,\n    ...restProps\n  }: TextProps<T>,\n  ref?: PolymorphicRef<T>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text\",\n    css: textCss,\n    window: targetWindow,\n  });\n\n  const Component = as ?? \"div\";\n\n  const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n  const color = variant ?? colorProp ?? \"primary\";\n\n  return (\n    <Component\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"lineClamp\")]: maxRows,\n          [withBaseName(styleAs as string)]: styleAs,\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      {...restProps}\n      ref={ref}\n      style={textStyles}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAE/B,MAAA,IAAA,GAAsBC,gBAAW,CAAA,SAASC,KAGrD,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AAExB,EAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA;AAE1D,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AAEtC,EACE,uBAAAC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAU,KAAA;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n} from \"../utils\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"display4\"\n      | \"notation\"\n      | \"action\"\n      | \"code\";\n    /**\n     * Change text color palette\n     * @deprecated Use `color` instead\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled = false,\n    maxRows,\n    style,\n    styleAs,\n    variant,\n    color: colorProp,\n    ...restProps\n  }: TextProps<T>,\n  ref?: ForwardedRef<unknown>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text\",\n    css: textCss,\n    window: targetWindow,\n  });\n\n  const Component = as ?? \"div\";\n\n  const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n  const color = variant ?? colorProp ?? \"primary\";\n\n  return (\n    <Component\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"lineClamp\")]: maxRows,\n          [withBaseName(styleAs as string)]: styleAs,\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      {...restProps}\n      ref={ref as PolymorphicRef<T>}\n      style={textStyles}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA4DA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAE/B,MAAA,IAAA,GAAsBC,gBAAW,CAAA,SAASC,KAGrD,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AAExB,EAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA;AAE1D,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AAEtC,EACE,uBAAAC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAU,KAAA;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n  | \"accent\"\n  | \"actionable\"\n  | \"container\"\n  | \"draggable\"\n  | \"editable\"\n  | \"focused\"\n  | \"measured\"\n  | \"navigable\"\n  | \"overlayable\"\n  | \"selectable\"\n  | \"separable\"\n  | \"status\"\n  | \"taggable\"\n  | \"target\"\n  | \"text\"\n  | \"differential\" /* **deprecated** */;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n  themeName: ThemeName,\n  characteristicName: characteristic,\n  variant: string,\n  scopeElement?: HTMLElement,\n): string | null => {\n  const cssVariableName = `--salt-${characteristicName}-${variant}`;\n  const scopeTarget =\n    scopeElement || document.body.querySelector(`.${themeName}`);\n  if (scopeTarget) {\n    const style = getComputedStyle(scopeTarget);\n    const variableValue = style.getPropertyValue(cssVariableName);\n    if (variableValue) {\n      return variableValue;\n    }\n  }\n  return null;\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAA,MAAM,eAAkB,GAAA,CAAA,OAAA,EAAU,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAC/D,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,KAAK,aAAc,CAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA;AAAA;AACT;AAEF,EAAO,OAAA,IAAA;AACT;;;;"}
+{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n  | \"accent\"\n  | \"actionable\"\n  | \"container\"\n  | \"draggable\" /* **deprecated** */\n  | \"editable\"\n  | \"focused\"\n  | \"measured\"\n  | \"navigable\"\n  | \"overlayable\"\n  | \"selectable\"\n  | \"separable\"\n  | \"status\"\n  | \"taggable\"\n  | \"target\"\n  | \"text\"\n  | \"differential\" /* **deprecated** */;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n  themeName: ThemeName,\n  characteristicName: characteristic,\n  variant: string,\n  scopeElement?: HTMLElement,\n): string | null => {\n  const cssVariableName = `--salt-${characteristicName}-${variant}`;\n  const scopeTarget =\n    scopeElement || document.body.querySelector(`.${themeName}`);\n  if (scopeTarget) {\n    const style = getComputedStyle(scopeTarget);\n    const variableValue = style.getPropertyValue(cssVariableName);\n    if (variableValue) {\n      return variableValue;\n    }\n  }\n  return null;\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAA,MAAM,eAAkB,GAAA,CAAA,OAAA,EAAU,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAC/D,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,KAAK,aAAc,CAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA;AAAA;AACT;AAEF,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist-cjs/toast/Toast.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-primary-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-primary-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-borderStyle-solid));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toast.css.js.map

package/dist-cjs/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\n\nimport type { IconProps } from \"@salt-ds/icons\";\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   *  A string to determine the current state of the Toast.\n   */\n  status?: ValidationStatus;\n  /**\n   * (Optional) if provided, this icon component will be used instead of the status icon\n   */\n  icon?: ReactElement<IconProps>;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  function Toast(props, ref) {\n    const { children, className, status, icon, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toast\",\n      css: toastCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(status ?? \"\")]: status },\n          className,\n        )}\n        role=\"alert\"\n        {...rest}\n        ref={ref}\n      >\n        {status && (\n          <div className={withBaseName(\"iconContainer\")}>\n            {icon ? icon : <StatusIndicator status={status} />}\n          </div>\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Toast","useWindow","useComponentCssInjection","toastCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAatC,MAAM,KAAQ,GAAAC,gBAAA;AAAA,EACnB,SAASC,MAAM,CAAA,KAAA,EAAO,GAAK,EAAA;AACzB,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,GAAG,MAAS,GAAA,KAAA;AACvD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,YAAA;AAAA,MACR,GAAK,EAAAC,OAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,UACvC;AAAA,SACF;AAAA,QACA,IAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UACC,MAAA,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,eAAe,CACzC,EAAA,QAAA,EAAA,IAAA,GAAO,IAAO,mBAAAA,cAAA,CAACC,+BAAgB,EAAA,EAAA,MAAA,EAAgB,CAClD,EAAA,CAAA;AAAA,UAED;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.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  forwardRef,\n  type ReactElement,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   *  A string to determine the current state of the Toast.\n   */\n  status?: ValidationStatus;\n  /**\n   * (Optional) if provided, this icon component will be used instead of the status icon\n   */\n  icon?: ReactElement<IconProps>;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  function Toast(props, ref) {\n    const { children, className, status, icon, ...rest } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toast\",\n      css: toastCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(status ?? \"\")]: status },\n          className,\n        )}\n        role=\"alert\"\n        {...rest}\n        ref={ref}\n      >\n        {status && (\n          <div className={withBaseName(\"iconContainer\")}>\n            {icon ? icon : <StatusIndicator status={status} />}\n          </div>\n        )}\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Toast","useWindow","useComponentCssInjection","toastCss","jsxs","clsx","jsx","StatusIndicator"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,WAAW,CAAA;AAatC,MAAM,KAAQ,GAAAC,gBAAA;AAAA,EACnB,SAASC,MAAM,CAAA,KAAA,EAAO,GAAK,EAAA;AACzB,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,QAAQ,IAAM,EAAA,GAAG,MAAS,GAAA,KAAA;AACvD,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,YAAA;AAAA,MACR,GAAK,EAAAC,OAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,UACvC;AAAA,SACF;AAAA,QACA,IAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UACC,MAAA,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,eAAe,CACzC,EAAA,QAAA,EAAA,IAAA,GAAO,IAAO,mBAAAA,cAAA,CAACC,+BAAgB,EAAA,EAAA,MAAA,EAAgB,CAClD,EAAA,CAAA;AAAA,UAED;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/toast/ToastContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Toast Content\n   */\n  children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n  { children, className, ...restProps }: ToastContentProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast-content\",\n    css: toastContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToastContent","useWindow","useComponentCssInjection","toastContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AASvC,MAAA,YAAA,GAAeC,gBAAW,CAAA,SAASC,aAC9C,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,SAAW,EAAA,GAAA,EAC7D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport interface ToastContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Toast Content\n   */\n  children?: ReactNode;\n}\n\nexport const ToastContent = forwardRef(function ToastContent(\n  { children, className, ...restProps }: ToastContentProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast-content\",\n    css: toastContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToastContent","useWindow","useComponentCssInjection","toastContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AASvC,MAAA,YAAA,GAAeC,gBAAW,CAAA,SAASC,aAC9C,CAAA,EAAE,UAAU,SAAW,EAAA,GAAG,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,SAAW,EAAA,GAAA,EAC7D,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/toggle-button/ToggleButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButton {\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--salt-size-border, 0);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-actionable-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled);\n  color: var(--toggleButton-text-color-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled-selected);\n  color: var(--toggleButton-text-color-disabled-selected);\n  border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly);\n  color: var(--toggleButton-text-color-readonly);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly-selected);\n  color: var(--toggleButton-text-color-readonly-selected);\n  border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-background);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
+var css_248z = ".saltToggleButton {\n  --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--toggleButton-borderWidth);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled);\n  color: var(--toggleButton-text-color-disabled);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled-selected);\n  color: var(--toggleButton-text-color-disabled-selected);\n  border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly);\n  color: var(--toggleButton-text-color-readonly);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly-selected);\n  color: var(--toggleButton-text-color-readonly-selected);\n  border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-background);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-cjs/toggle-button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.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 MouseEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The appearance of the toggle button when `selected` is true.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is in a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Whether the toggle button is selected by default.\n   * This will be disregarded if `selected` is already set.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      appearance: appearanceProp,\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      defaultSelected,\n      sentiment: sentimenentProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(defaultSelected),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ToggleButtonProps = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      readOnly: readOnlyProp,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAkDA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,UAAY,EAAA,cAAA;AAAA,MACZ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,QAAU,EAAA,YAAA;AAAA,MACV,eAAA;AAAA,MACA,SAAW,EAAA,eAAA;AAAA,MACX,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAYC,aAA0B,IAAI,CAAA;AAChD,IAAM,MAAA,SAAA,GAAYC,qBAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAE3C,IAAA,MAAM,oBAAoBC,6CAAqB,EAAA;AAE/C,IAAA,MAAM,yBAA4B,GAAA,iBAAA,GAC9B,iBAAkB,CAAA,UAAA,CAAW,KAAK,CAClC,GAAA,YAAA;AACJ,IAAA,MAAM,SAAY,GAAA,iBAAA,GACd,iBAAmB,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAA,SAAA,CAAU,KAC7B,CAAA,GAAA,IAAA;AAEJ,IAAM,MAAA,SAAA,GACJ,eAAmB,KAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,SAAa,CAAA,IAAA,SAAA;AACrD,IAAM,MAAA,UAAA,GACJ,cAAkB,KAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,UAAc,CAAA,IAAA,OAAA;AACrD,IAAM,MAAA,QAAA,GAAA,CAAW,uDAAmB,QAAY,KAAA,YAAA;AAChD,IAAM,MAAA,QAAA,GAAA,CAAW,uDAAmB,QAAY,KAAA,YAAA;AAEhD,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC5C,UAAY,EAAA,yBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,eAAe,CAAA;AAAA,MAChC,IAAM,EAAA,cAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAA,IAAI,YAAY,QAAU,EAAA;AACxB,QAAA;AAAA;AAEF,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,MAAO,CAAA,KAAA,CAAA;AAC1B,MAAA,WAAA,CAAY,CAAC,QAAQ,CAAA;AACrB,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACX,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,KAAM,CAAA,KAAA,CAAA;AACzB,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAEA,IAAA,MAAM,iBAAuC,GAAA;AAAA,MAC3C,eAAiB,EAAA,YAAA;AAAA,MACjB,cAAA,EAAgB,CAAC,iBAAA,GAAoB,QAAW,GAAA,MAAA;AAAA,MAChD,cAAA,EAAgB,oBAAoB,QAAW,GAAA,MAAA;AAAA,MAC/C,eAAiB,EAAA,QAAA;AAAA,MACjB,IAAA,EAAM,oBAAoB,OAAU,GAAA,MAAA;AAAA,MACpC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,SAAS,CAAA;AAAA,QACtB,aAAa,UAAU,CAAA;AAAA,QACvB,QAAA,IAAY,aAAa,UAAU,CAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,QAAA,EAAU,YAAY,CAAI,GAAA,EAAA;AAAA,MAC1B,KAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,GAAG;AAAA,KACL;AAEA,IAAA,sCACG,QAAO,EAAA,EAAA,GAAA,EAAK,SAAY,EAAA,GAAG,mBACzB,QACH,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.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  forwardRef,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * The appearance of the toggle button when `selected` is true.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * Callback fired when the toggle button's selection state is changed.\n   */\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The sentiment of the toggle button.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n  /**\n   * Whether the toggle button is in a selected state.\n   */\n  selected?: boolean;\n  /**\n   * Whether the toggle button is selected by default.\n   * This will be disregarded if `selected` is already set.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Value of the toggle button, to be used when in a controlled state.\n   */\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      appearance: appearanceProp,\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      readOnly: readOnlyProp,\n      selected: selectedProp,\n      defaultSelected,\n      sentiment: sentimenentProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n\n    const sentiment =\n      sentimenentProp || toggleButtonGroup?.sentiment || \"neutral\";\n    const appearance =\n      appearanceProp || toggleButtonGroup?.appearance || \"solid\";\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n    const readOnly = toggleButtonGroup?.readOnly || readOnlyProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(defaultSelected),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly) {\n        return;\n      }\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const toggleButtonProps: ToggleButtonProps = {\n      \"aria-readonly\": readOnlyProp,\n      \"aria-pressed\": !toggleButtonGroup ? selected : undefined,\n      \"aria-checked\": toggleButtonGroup ? selected : undefined,\n      \"aria-disabled\": disabled,\n      role: toggleButtonGroup ? \"radio\" : undefined,\n      className: clsx(\n        withBaseName(),\n        withBaseName(sentiment),\n        withBaseName(appearance),\n        readOnly && withBaseName(\"readOnly\"),\n        className,\n      ),\n      onClick: handleClick,\n      onFocus: handleFocus,\n      tabIndex: focusable ? 0 : -1,\n      value: value,\n      type: \"button\",\n      disabled: disabled,\n      readOnly: readOnlyProp,\n      ...rest,\n    };\n\n    return (\n      <button ref={handleRef} {...toggleButtonProps}>\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ToggleButton","useWindow","useComponentCssInjection","toggleButtonCss","useRef","useForkRef","useToggleButtonGroup","useControlled","clsx"],"mappings":"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"}

package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+var css_248z = ".saltToggleButtonGroup {\n  --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);\n\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--toggleButtonGroup-borderWidth) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-cjs/toggle-button-group/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The appearance of all the toggle buttons within the group.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Value of the toggle button group, to be used when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button group will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The visual sentimenent of all the toggle buttons within the group.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    appearance,\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    readOnly,\n    sentiment,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    }),\n    [\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    ],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        aria-disabled={disabled}\n        aria-readonly={readOnly}\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          disabled && withBaseName(\"disabled\"),\n          readOnly && withBaseName(\"readOnly\"),\n          className,\n        )}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { ButtonAppearance, ButtonSentiment } from \"../button\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\nimport {\n  ToggleButtonGroupContext,\n  type Value,\n} from \"./ToggleButtonGroupContext\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The appearance of all the toggle buttons within the group.\n   * @default solid\n   */\n  appearance?: Extract<ButtonAppearance, \"bordered\" | \"solid\">;\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Value of the toggle button group, to be used when the component is controlled.\n   */\n  value?: Value;\n  /**\n   * Callback fired when the selection changes.\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * If `true`, the toggle button group will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * The visual sentimenent of all the toggle buttons within the group.\n   * @default neutral\n   */\n  sentiment?: ButtonSentiment;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    appearance,\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    readOnly,\n    sentiment,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<Value>(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value],\n  );\n\n  const isSelected = useCallback(\n    (id: Value) => {\n      return value === id;\n    },\n    [value],\n  );\n\n  const focus = useCallback((id: Value) => {\n    setFocused(id);\n  }, []);\n\n  const isFocused = useCallback(\n    (id: Value) => {\n      return focused === id || !focused;\n    },\n    [focused],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    }),\n    [\n      appearance,\n      disabled,\n      focus,\n      isFocused,\n      isSelected,\n      orientation,\n      readOnly,\n      select,\n      sentiment,\n    ],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? [],\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        aria-disabled={disabled}\n        aria-readonly={readOnly}\n        className={clsx(\n          withBaseName(),\n          withBaseName(orientation),\n          disabled && withBaseName(\"disabled\"),\n          readOnly && withBaseName(\"readOnly\"),\n          className,\n        )}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ToggleButtonGroup","useWindow","useComponentCssInjection","toggleButtonGroupCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","ToggleButtonGroupContext","clsx"],"mappings":"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"}

package/dist-cjs/toggle-button-group/ToggleButtonGroupContext.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var createContext = require('../utils/createContext.js');
-require('react/jsx-runtime');
 require('clsx');
+require('react/jsx-runtime');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');

package/dist-cjs/tooltip/Tooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--salt-size-border)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tooltip.css.js.map

package/dist-cjs/tooltip/Tooltip.js

@@ -3,8 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
+require('../form-field-context/FormFieldContext.js');
+var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 require('../status-indicator/StatusIndicator.js');
 var ValidationStatus = require('../status-indicator/ValidationStatus.js');
+var getRefFromChildren = require('../utils/getRefFromChildren.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var mergeProps = require('../utils/mergeProps.js');
 var useFloatingUI = require('../utils/useFloatingUI/useFloatingUI.js');
@@ -12,9 +15,6 @@ var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var getRefFromChildren = require('../utils/getRefFromChildren.js');
-require('../form-field-context/FormFieldContext.js');
-var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 var TooltipBase = require('./TooltipBase.js');
 var useTooltip = require('./useTooltip.js');
 

package/dist-cjs/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport {\n  VALIDATION_NAMED_STATUS,\n  type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n  type UseFloatingUIProps,\n  getRefFromChildren,\n  makePrefixer,\n  mergeProps,\n  useFloatingComponent,\n  useForkRef,\n} from \"../utils\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   * If no status is provided, icon will also be hidden.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp = false,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp,\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = disabledProp || formFieldDisabled;\n    const status =\n      statusProp ??\n      (formFieldValidationStatus !== undefined &&\n      VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n        ? formFieldValidationStatus\n        : undefined);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      disabled,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n      getTooltipPosition,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n    const hasContent = content !== undefined && content !== \"\";\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        <FloatingComponent\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          open={open && !disabled && hasContent}\n          {...getTooltipProps()}\n          ref={floatingRef}\n          {...getTooltipPosition()}\n        >\n          <TooltipBase\n            hideIcon={hideIcon}\n            status={status}\n            content={content}\n            hideArrow={hideArrow}\n            arrowProps={arrowProps}\n          />\n        </FloatingComponent>\n      </>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","VALIDATION_NAMED_STATUS","useFloatingComponent","useTooltip","useForkRef","getRefFromChildren","jsxs","Fragment","isValidElement","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAgDxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACb,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA;AAAA,QAChBC,mCAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA;AACjC,IAAM,MAAA,MAAA,GACJ,eACC,yBAA8B,KAAA,MAAA,IAC/BC,yCAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,MAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA,CAAWC,qCAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,IAAM,MAAA,WAAA,GAAcD,qBAA2B,CAAA,QAAA,EAAU,GAAG,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,MAAA,IAAa,OAAY,KAAA,EAAA;AAExD,IAAA,uBAEKE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAeC,oBAAA,CAAA,QAAQ,CACtB,IAAAC,kBAAA,CAAa,QAAU,EAAA;AAAA,QACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,QAC/C,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,sBAEHC,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAAC,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,YACvC;AAAA,WACF;AAAA,UACA,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAA,kBAAAD,cAAA;AAAA,YAACE,uBAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,MAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  VALIDATION_NAMED_STATUS,\n  type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n  getRefFromChildren,\n  makePrefixer,\n  mergeProps,\n  type UseFloatingUIProps,\n  useFloatingComponent,\n  useForkRef,\n} from \"../utils\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   * If no status is provided, icon will also be hidden.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp = false,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp,\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = disabledProp || formFieldDisabled;\n    const status =\n      statusProp ??\n      (formFieldValidationStatus !== undefined &&\n      VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n        ? formFieldValidationStatus\n        : undefined);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      disabled,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n      getTooltipPosition,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n    const hasContent = content !== undefined && content !== \"\";\n\n    return (\n      <>\n        {isValidElement<{ ref?: Ref<unknown> }>(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        <FloatingComponent\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          open={open && !disabled && hasContent}\n          {...getTooltipProps()}\n          ref={floatingRef}\n          {...getTooltipPosition()}\n        >\n          <TooltipBase\n            hideIcon={hideIcon}\n            status={status}\n            content={content}\n            hideArrow={hideArrow}\n            arrowProps={arrowProps}\n          />\n        </FloatingComponent>\n      </>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","VALIDATION_NAMED_STATUS","useFloatingComponent","useTooltip","useForkRef","getRefFromChildren","jsxs","Fragment","isValidElement","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAgDxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACb,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA;AAAA,QAChBC,mCAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA;AACjC,IAAM,MAAA,MAAA,GACJ,eACC,yBAA8B,KAAA,MAAA,IAC/BC,yCAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,MAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA,CAAWC,qCAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,IAAM,MAAA,WAAA,GAAcD,qBAA2B,CAAA,QAAA,EAAU,GAAG,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,MAAA,IAAa,OAAY,KAAA,EAAA;AAExD,IAAA,uBAEKE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAuCC,oBAAA,CAAA,QAAQ,CAC9C,IAAAC,kBAAA,CAAa,QAAU,EAAA;AAAA,QACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,QAC/C,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,sBAEHC,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAAC,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,YACvC;AAAA,WACF;AAAA,UACA,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAA,kBAAAD,cAAA;AAAA,YAACE,uBAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,MAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/tooltip/TooltipBase.js

@@ -2,6 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@floating-ui/react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 require('../form-field-context/FormFieldContext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 var StatusIndicator = require('../status-indicator/StatusIndicator.js');
@@ -12,8 +14,6 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var Tooltip = require('./Tooltip.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltTooltip");

package/dist-cjs/tooltip/TooltipBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { FloatingArrow, type FloatingArrowProps } from \"@floating-ui/react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport type { TooltipProps } from \"./Tooltip\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport tooltipCss from \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n  arrowProps: FloatingArrowProps;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps } = useFormFieldProps();\n\n  const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n  return (\n    <>\n      <div className={withBaseName(\"container\")}>\n        {!hideIcon && status && (\n          <StatusIndicator\n            status={status}\n            size={1}\n            className={withBaseName(\"icon\")}\n          />\n        )}\n        <span\n          id={a11yProps?.[\"aria-describedby\"]}\n          className={withBaseName(\"content\")}\n        >\n          {content}\n        </span>\n      </div>\n      {!hideArrow && (\n        <FloatingArrow\n          {...arrowProps}\n          className={withBaseName(\"arrow\")}\n          strokeWidth={1}\n          fill=\"var(--salt-container-primary-background)\"\n          stroke=\"var(--tooltip-status-borderColor)\"\n          height={5}\n          width={10}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tooltipCss","useFormFieldProps","jsxs","Fragment","jsx","StatusIndicator","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,mCAAkB,EAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA;AAE7D,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACrC,EAAA,QAAA,EAAA;AAAA,MAAA,CAAC,YAAY,MACZ,oBAAAE,cAAA;AAAA,QAACC,+BAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,IAAM,EAAA,CAAA;AAAA,UACN,SAAA,EAAW,aAAa,MAAM;AAAA;AAAA,OAChC;AAAA,sBAEFD,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,UAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAEhC,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,IACC,CAAC,SACA,oBAAAA,cAAA;AAAA,MAACE,mBAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA;AAAA;AAAA;AACT,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TooltipBase.js","sources":["../src/tooltip/TooltipBase.tsx"],"sourcesContent":["import { FloatingArrow, type FloatingArrowProps } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport type { TooltipProps } from \"./Tooltip\";\nimport tooltipCss from \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\ninterface TooltipBaseProps extends Omit<TooltipProps, \"children\"> {\n  arrowProps: FloatingArrowProps;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n}\n\nexport const TooltipBase = (props: TooltipBaseProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tooltip\",\n    css: tooltipCss,\n    window: targetWindow,\n  });\n\n  const { a11yProps } = useFormFieldProps();\n\n  const { arrowProps, content, hideArrow, hideIcon, status } = props;\n\n  return (\n    <>\n      <div className={withBaseName(\"container\")}>\n        {!hideIcon && status && (\n          <StatusIndicator\n            status={status}\n            size={1}\n            className={withBaseName(\"icon\")}\n          />\n        )}\n        <span\n          id={a11yProps?.[\"aria-describedby\"]}\n          className={withBaseName(\"content\")}\n        >\n          {content}\n        </span>\n      </div>\n      {!hideArrow && (\n        <FloatingArrow\n          {...arrowProps}\n          className={withBaseName(\"arrow\")}\n          strokeWidth={1}\n          fill=\"var(--salt-container-primary-background)\"\n          stroke=\"var(--tooltip-status-borderColor)\"\n          height={5}\n          width={10}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","tooltipCss","useFormFieldProps","jsxs","Fragment","jsx","StatusIndicator","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAUlC,MAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACtD,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAC,OAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,mCAAkB,EAAA;AAExC,EAAA,MAAM,EAAE,UAAY,EAAA,OAAA,EAAS,SAAW,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA;AAE7D,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACrC,EAAA,QAAA,EAAA;AAAA,MAAA,CAAC,YAAY,MACZ,oBAAAE,cAAA;AAAA,QAACC,+BAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,IAAM,EAAA,CAAA;AAAA,UACN,SAAA,EAAW,aAAa,MAAM;AAAA;AAAA,OAChC;AAAA,sBAEFD,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAI,SAAY,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,kBAAA,CAAA;AAAA,UAChB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,UAEhC,QAAA,EAAA;AAAA;AAAA;AACH,KACF,EAAA,CAAA;AAAA,IACC,CAAC,SACA,oBAAAA,cAAA;AAAA,MAACE,mBAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,0CAAA;AAAA,QACL,MAAO,EAAA,mCAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA;AAAA;AAAA;AACT,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/tooltip/useAriaAnnounce.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var React = require('react');
-require('../aria-announcer/AriaAnnouncerContext.js');
 require('react/jsx-runtime');
 var useAriaAnnouncer = require('../aria-announcer/useAriaAnnouncer.js');
+require('../aria-announcer/AriaAnnouncerContext.js');
 require('clsx');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
-var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 

package/dist-cjs/tooltip/useTooltip.js

@@ -2,8 +2,8 @@
 
 var react = require('@floating-ui/react');
 var React = require('react');
-require('react/jsx-runtime');
 require('clsx');
+require('react/jsx-runtime');
 var useControlled = require('../utils/useControlled.js');
 var useFloatingUI = require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');

package/dist-cjs/utils/getRefFromChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"getRefFromChildren.js","sources":["../src/utils/getRefFromChildren.ts"],"sourcesContent":["import { type ReactNode, isValidElement } from \"react\";\n\nexport function getRefFromChildren(child: ReactNode) {\n  if (!child || !isValidElement(child)) {\n    return null;\n  }\n\n  return Object.prototype.propertyIsEnumerable.call(child.props, \"ref\")\n    ? child.props.ref\n    : // @ts-expect-error - ref is not defined on ReactNode\n      child.ref;\n}\n"],"names":["isValidElement"],"mappings":";;;;AAEO,SAAS,mBAAmB,KAAkB,EAAA;AACnD,EAAA,IAAI,CAAC,KAAA,IAAS,CAACA,oBAAA,CAAe,KAAK,CAAG,EAAA;AACpC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,OAAA,MAAA,CAAO,UAAU,oBAAqB,CAAA,IAAA,CAAK,MAAM,KAAO,EAAA,KAAK,CAChE,GAAA,KAAA,CAAM,KAAM,CAAA,GAAA;AAAA;AAAA,IAEZ,KAAM,CAAA;AAAA,GAAA;AACZ;;;;"}
+{"version":3,"file":"getRefFromChildren.js","sources":["../src/utils/getRefFromChildren.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\n\nexport function getRefFromChildren(child: ReactNode) {\n  if (!child || !isValidElement(child)) {\n    return null;\n  }\n\n  return Object.prototype.propertyIsEnumerable.call(child.props, \"ref\")\n    ? child.props.ref\n    : // @ts-expect-error - ref is not defined on ReactNode\n      child.ref;\n}\n"],"names":["isValidElement"],"mappings":";;;;AAEO,SAAS,mBAAmB,KAAkB,EAAA;AACnD,EAAA,IAAI,CAAC,KAAA,IAAS,CAACA,oBAAA,CAAe,KAAK,CAAG,EAAA;AACpC,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,OAAA,MAAA,CAAO,UAAU,oBAAqB,CAAA,IAAA,CAAK,MAAM,KAAO,EAAA,KAAK,CAChE,GAAA,KAAA,CAAM,KAAM,CAAA,GAAA;AAAA;AAAA,IAEZ,KAAM,CAAA;AAAA,GAAA;AACZ;;;;"}

package/dist-cjs/utils/renderProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderProps.js","sources":["../src/utils/renderProps.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type ElementType,\n  type ReactElement,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport { mergeProps } from \"./mergeProps\";\n\nexport interface RenderPropsType {\n  render?: ReactElement | ((props: any) => ReactElement);\n}\n\nexport function renderProps<Type extends ElementType>(\n  Type: Type | null,\n  props: RenderPropsType & ComponentProps<Type>,\n): ReactElement {\n  const { render, ...rest } = props;\n  // Case 1: If render is a valid React element, clone it with merged props\n  if (isValidElement(render)) {\n    const renderProps = render.props as ComponentProps<Type>;\n    return cloneElement(render, mergeProps(rest, renderProps));\n  }\n\n  const restProps = rest as ComponentProps<Type>;\n\n  // Case 2: If render is a function, call it with the rest of the props\n  if (typeof render === \"function\") {\n    const renderedElement = render(restProps);\n    if (isValidElement(renderedElement)) {\n      return renderedElement;\n    }\n    throw new Error(\"Render function did not return a valid React element\");\n  }\n\n  if (Type) {\n    // Case 3: If render is not provided, render the Type component with the rest of the props\n    return <Type {...restProps} />;\n  }\n\n  throw new Error(\"Type or render should be provided\");\n}\n"],"names":["isValidElement","renderProps","cloneElement","mergeProps","jsx"],"mappings":";;;;;;AAagB,SAAA,WAAA,CACd,MACA,KACc,EAAA;AACd,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,IAAA,EAAS,GAAA,KAAA;AAE5B,EAAI,IAAAA,oBAAA,CAAe,MAAM,CAAG,EAAA;AAC1B,IAAA,MAAMC,eAAc,MAAO,CAAA,KAAA;AAC3B,IAAA,OAAOC,kBAAa,CAAA,MAAA,EAAQC,qBAAW,CAAA,IAAA,EAAMF,YAAW,CAAC,CAAA;AAAA;AAG3D,EAAA,MAAM,SAAY,GAAA,IAAA;AAGlB,EAAI,IAAA,OAAO,WAAW,UAAY,EAAA;AAChC,IAAM,MAAA,eAAA,GAAkB,OAAO,SAAS,CAAA;AACxC,IAAI,IAAAD,oBAAA,CAAe,eAAe,CAAG,EAAA;AACnC,MAAO,OAAA,eAAA;AAAA;AAET,IAAM,MAAA,IAAI,MAAM,sDAAsD,CAAA;AAAA;AAGxE,EAAA,IAAI,IAAM,EAAA;AAER,IAAO,uBAAAI,cAAA,CAAC,IAAM,EAAA,EAAA,GAAG,SAAW,EAAA,CAAA;AAAA;AAG9B,EAAM,MAAA,IAAI,MAAM,mCAAmC,CAAA;AACrD;;;;"}
+{"version":3,"file":"renderProps.js","sources":["../src/utils/renderProps.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  cloneElement,\n  type ElementType,\n  isValidElement,\n  type ReactElement,\n} from \"react\";\nimport { mergeProps } from \"./mergeProps\";\n\nexport interface RenderPropsType {\n  render?: ReactElement | ((props: any) => ReactElement);\n}\n\nexport function renderProps<Type extends ElementType>(\n  Type: Type | null,\n  props: RenderPropsType & ComponentProps<Type>,\n): ReactElement {\n  const { render, ...rest } = props;\n  // Case 1: If render is a valid React element, clone it with merged props\n  if (isValidElement(render)) {\n    const renderProps = render.props as ComponentProps<Type>;\n    return cloneElement(render, mergeProps(rest, renderProps));\n  }\n\n  const restProps = rest as ComponentProps<Type>;\n\n  // Case 2: If render is a function, call it with the rest of the props\n  if (typeof render === \"function\") {\n    const renderedElement = render(restProps);\n    if (isValidElement(renderedElement)) {\n      return renderedElement;\n    }\n    throw new Error(\"Render function did not return a valid React element\");\n  }\n\n  if (Type) {\n    // Case 3: If render is not provided, render the Type component with the rest of the props\n    return <Type {...restProps} />;\n  }\n\n  throw new Error(\"Type or render should be provided\");\n}\n"],"names":["isValidElement","renderProps","cloneElement","mergeProps","jsx"],"mappings":";;;;;;AAagB,SAAA,WAAA,CACd,MACA,KACc,EAAA;AACd,EAAA,MAAM,EAAE,MAAA,EAAQ,GAAG,IAAA,EAAS,GAAA,KAAA;AAE5B,EAAI,IAAAA,oBAAA,CAAe,MAAM,CAAG,EAAA;AAC1B,IAAA,MAAMC,eAAc,MAAO,CAAA,KAAA;AAC3B,IAAA,OAAOC,kBAAa,CAAA,MAAA,EAAQC,qBAAW,CAAA,IAAA,EAAMF,YAAW,CAAC,CAAA;AAAA;AAG3D,EAAA,MAAM,SAAY,GAAA,IAAA;AAGlB,EAAI,IAAA,OAAO,WAAW,UAAY,EAAA;AAChC,IAAM,MAAA,eAAA,GAAkB,OAAO,SAAS,CAAA;AACxC,IAAI,IAAAD,oBAAA,CAAe,eAAe,CAAG,EAAA;AACnC,MAAO,OAAA,eAAA;AAAA;AAET,IAAM,MAAA,IAAI,MAAM,sDAAsD,CAAA;AAAA;AAGxE,EAAA,IAAI,IAAM,EAAA;AAER,IAAO,uBAAAI,cAAA,CAAC,IAAM,EAAA,EAAA,GAAG,SAAW,EAAA,CAAA;AAAA;AAG9B,EAAM,MAAA,IAAI,MAAM,mCAAmC,CAAA;AACrD;;;;"}

package/dist-cjs/utils/useControlled.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlled.js","sources":["../src/utils/useControlled.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type SetStateAction,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface UseControlledProps<T> {\n  /**\n   * Holds the component value when it's controlled.\n   */\n  controlled?: T;\n  /**\n   * The default value when uncontrolled.\n   */\n  default: T;\n  /**\n   * The component name displayed in warnings.\n   */\n  name: string;\n  /**\n   * The name of the state variable displayed in warnings.\n   */\n  state?: string;\n}\n\n/**\n * Copied from MUI (v5) useControlled hook with one additional returned value\n * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js\n */\nexport function useControlled<S>({\n  controlled,\n  default: defaultProp,\n  name,\n  state = \"value\",\n}: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean] {\n  const { current: isControlled } = useRef(controlled !== undefined);\n  const [valueState, setValue] = useState<S>(defaultProp);\n  const value = controlled !== undefined ? controlled : valueState;\n  const { current: defaultValue } = useRef(defaultProp);\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (isControlled !== (controlled !== undefined)) {\n        console.error(\n          [\n            `Salt: A component is changing the ${\n              isControlled ? \"\" : \"un\"\n            }controlled ${state} state of ${name} to be ${\n              isControlled ? \"un\" : \"\"\n            }controlled.`,\n            \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n            `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,\n            \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n            \"More info: https://reactjs.org/link/controlled-components\",\n          ].join(\"\\n\"),\n        );\n      }\n    }\n    return undefined;\n  }, [state, name, controlled]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: uses JSON.stringify to compare defaultProp\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!isControlled && defaultValue !== defaultProp) {\n        console.error(\n          [\n            `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +\n              `To suppress this warning opt to use a controlled ${name}.`,\n          ].join(\"\\n\"),\n        );\n      }\n    }\n    return undefined;\n  }, [JSON.stringify(defaultProp, ignoreReactElements)]);\n\n  const setValueIfUncontrolled: Dispatch<SetStateAction<S>> = useCallback(\n    (newValue) => {\n      if (!isControlled) {\n        setValue(newValue);\n      }\n    },\n    [],\n  );\n\n  return [value, setValueIfUncontrolled, isControlled];\n}\n\n// Ignore ReactElements in JSON, they contain circular refs\nfunction ignoreReactElements<T>(key: string, value: T): T | null {\n  return isValidElement(value) ? null : value;\n}\n"],"names":["useRef","useState","useEffect","useCallback","isValidElement"],"mappings":";;;;AAiCO,SAAS,aAAiB,CAAA;AAAA,EAC/B,UAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,IAAA;AAAA,EACA,KAAQ,GAAA;AACV,CAAqE,EAAA;AACnE,EAAA,MAAM,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAAA,YAAA,CAAO,eAAe,MAAS,CAAA;AACjE,EAAA,MAAM,CAAC,UAAA,EAAY,QAAQ,CAAA,GAAIC,eAAY,WAAW,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,UAAe,KAAA,MAAA,GAAY,UAAa,GAAA,UAAA;AACtD,EAAA,MAAM,EAAE,OAAA,EAAS,YAAa,EAAA,GAAID,aAAO,WAAW,CAAA;AAEpD,EAAAE,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,YAAA,MAAkB,eAAe,MAAY,CAAA,EAAA;AAC/C,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAAA,kCAAA,EACE,YAAe,GAAA,EAAA,GAAK,IACtB,CAAA,WAAA,EAAc,KAAK,CAAA,UAAA,EAAa,IAAI,CAAA,OAAA,EAClC,YAAe,GAAA,IAAA,GAAO,EACxB,CAAA,WAAA,CAAA;AAAA,YACA,6EAAA;AAAA,YACA,qDAAqD,IAAI,CAAA,2CAAA,CAAA;AAAA,YACzD,4HAAA;AAAA,YACA;AAAA,WACF,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,GACN,EAAA,CAAC,KAAO,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA;AAG5B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,CAAC,YAAgB,IAAA,YAAA,KAAiB,WAAa,EAAA;AACjD,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAA6C,0CAAA,EAAA,KAAK,CAA6B,0BAAA,EAAA,IAAI,8EAC7B,IAAI,CAAA,CAAA;AAAA,WAC5D,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,KACN,CAAC,IAAA,CAAK,UAAU,WAAa,EAAA,mBAAmB,CAAC,CAAC,CAAA;AAErD,EAAA,MAAM,sBAAsD,GAAAC,iBAAA;AAAA,IAC1D,CAAC,QAAa,KAAA;AACZ,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;AACnB,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA,CAAC,KAAO,EAAA,sBAAA,EAAwB,YAAY,CAAA;AACrD;AAGA,SAAS,mBAAA,CAAuB,KAAa,KAAoB,EAAA;AAC/D,EAAO,OAAAC,oBAAA,CAAe,KAAK,CAAA,GAAI,IAAO,GAAA,KAAA;AACxC;;;;"}
+{"version":3,"file":"useControlled.js","sources":["../src/utils/useControlled.ts"],"sourcesContent":["import {\n  type Dispatch,\n  isValidElement,\n  type SetStateAction,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface UseControlledProps<T> {\n  /**\n   * Holds the component value when it's controlled.\n   */\n  controlled?: T;\n  /**\n   * The default value when uncontrolled.\n   */\n  default: T;\n  /**\n   * The component name displayed in warnings.\n   */\n  name: string;\n  /**\n   * The name of the state variable displayed in warnings.\n   */\n  state?: string;\n}\n\n/**\n * Copied from MUI (v5) useControlled hook with one additional returned value\n * @see https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/packages/material-ui-utils/src/useControlled.js\n */\nexport function useControlled<S>({\n  controlled,\n  default: defaultProp,\n  name,\n  state = \"value\",\n}: UseControlledProps<S>): [S, Dispatch<SetStateAction<S>>, boolean] {\n  const { current: isControlled } = useRef(controlled !== undefined);\n  const [valueState, setValue] = useState<S>(defaultProp);\n  const value = controlled !== undefined ? controlled : valueState;\n  const { current: defaultValue } = useRef(defaultProp);\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (isControlled !== (controlled !== undefined)) {\n        console.error(\n          [\n            `Salt: A component is changing the ${\n              isControlled ? \"\" : \"un\"\n            }controlled ${state} state of ${name} to be ${\n              isControlled ? \"un\" : \"\"\n            }controlled.`,\n            \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n            `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,\n            \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n            \"More info: https://reactjs.org/link/controlled-components\",\n          ].join(\"\\n\"),\n        );\n      }\n    }\n    return undefined;\n  }, [state, name, controlled]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: uses JSON.stringify to compare defaultProp\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!isControlled && defaultValue !== defaultProp) {\n        console.error(\n          [\n            `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +\n              `To suppress this warning opt to use a controlled ${name}.`,\n          ].join(\"\\n\"),\n        );\n      }\n    }\n    return undefined;\n  }, [JSON.stringify(defaultProp, ignoreReactElements)]);\n\n  const setValueIfUncontrolled: Dispatch<SetStateAction<S>> = useCallback(\n    (newValue) => {\n      if (!isControlled) {\n        setValue(newValue);\n      }\n    },\n    [],\n  );\n\n  return [value, setValueIfUncontrolled, isControlled];\n}\n\n// Ignore ReactElements in JSON, they contain circular refs\nfunction ignoreReactElements<T>(key: string, value: T): T | null {\n  return isValidElement(value) ? null : value;\n}\n"],"names":["useRef","useState","useEffect","useCallback","isValidElement"],"mappings":";;;;AAiCO,SAAS,aAAiB,CAAA;AAAA,EAC/B,UAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,IAAA;AAAA,EACA,KAAQ,GAAA;AACV,CAAqE,EAAA;AACnE,EAAA,MAAM,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAAA,YAAA,CAAO,eAAe,MAAS,CAAA;AACjE,EAAA,MAAM,CAAC,UAAA,EAAY,QAAQ,CAAA,GAAIC,eAAY,WAAW,CAAA;AACtD,EAAM,MAAA,KAAA,GAAQ,UAAe,KAAA,MAAA,GAAY,UAAa,GAAA,UAAA;AACtD,EAAA,MAAM,EAAE,OAAA,EAAS,YAAa,EAAA,GAAID,aAAO,WAAW,CAAA;AAEpD,EAAAE,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,YAAA,MAAkB,eAAe,MAAY,CAAA,EAAA;AAC/C,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAAA,kCAAA,EACE,YAAe,GAAA,EAAA,GAAK,IACtB,CAAA,WAAA,EAAc,KAAK,CAAA,UAAA,EAAa,IAAI,CAAA,OAAA,EAClC,YAAe,GAAA,IAAA,GAAO,EACxB,CAAA,WAAA,CAAA;AAAA,YACA,6EAAA;AAAA,YACA,qDAAqD,IAAI,CAAA,2CAAA,CAAA;AAAA,YACzD,4HAAA;AAAA,YACA;AAAA,WACF,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,GACN,EAAA,CAAC,KAAO,EAAA,IAAA,EAAM,UAAU,CAAC,CAAA;AAG5B,EAAAA,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAI,IAAA,CAAC,YAAgB,IAAA,YAAA,KAAiB,WAAa,EAAA;AACjD,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN;AAAA,YACE,CAA6C,0CAAA,EAAA,KAAK,CAA6B,0BAAA,EAAA,IAAI,8EAC7B,IAAI,CAAA,CAAA;AAAA,WAC5D,CAAE,KAAK,IAAI;AAAA,SACb;AAAA;AACF;AAEF,IAAO,OAAA,MAAA;AAAA,KACN,CAAC,IAAA,CAAK,UAAU,WAAa,EAAA,mBAAmB,CAAC,CAAC,CAAA;AAErD,EAAA,MAAM,sBAAsD,GAAAC,iBAAA;AAAA,IAC1D,CAAC,QAAa,KAAA;AACZ,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;AACnB,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA,CAAC,KAAO,EAAA,sBAAA,EAAwB,YAAY,CAAA;AACrD;AAGA,SAAS,mBAAA,CAAuB,KAAa,KAAoB,EAAA;AAC/D,EAAO,OAAAC,oBAAA,CAAe,KAAK,CAAA,GAAI,IAAO,GAAA,KAAA;AACxC;;;;"}

package/dist-cjs/utils/useEventCallback.js

@@ -8,13 +8,7 @@ function useEventCallback(fn) {
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     ref.current = fn;
   });
-  return React.useCallback(
-    (...args) => (
-      // biome-ignore lint/style/noCommaOperator: This is a valid use case for the comma operator
-      (0, ref.current)(...args)
-    ),
-    []
-  );
+  return React.useCallback((...args) => (0, ref.current)(...args), []);
 }
 
 exports.useEventCallback = useEventCallback;

package/dist-cjs/utils/useEventCallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventCallback.js","sources":["../src/utils/useEventCallback.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const ref = useRef(fn);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n  return useCallback(\n    (...args: Args) =>\n      // biome-ignore lint/style/noCommaOperator: This is a valid use case for the comma operator\n      (void 0, ref.current)(...args),\n    [],\n  );\n}\n"],"names":["useRef","useIsomorphicLayoutEffect","useCallback"],"mappings":";;;;;AAMO,SAAS,iBACd,EAC2B,EAAA;AAC3B,EAAM,MAAA,GAAA,GAAMA,aAAO,EAAE,CAAA;AACrB,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,GAAA,CAAI,OAAU,GAAA,EAAA;AAAA,GACf,CAAA;AACD,EAAO,OAAAC,iBAAA;AAAA,IACL,CAAI,GAAA,IAAA;AAAA;AAAA,MAAA,IAEO,GAAA,CAAI,OAAS,EAAA,GAAG,IAAI;AAAA,KAAA;AAAA,IAC/B;AAAC,GACH;AACF;;;;"}
+{"version":3,"file":"useEventCallback.js","sources":["../src/utils/useEventCallback.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const ref = useRef(fn);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n  // biome-ignore lint/complexity/noCommaOperator: This is a valid use case for the comma operator\n  return useCallback((...args: Args) => (void 0, ref.current)(...args), []);\n}\n"],"names":["useRef","useIsomorphicLayoutEffect","useCallback"],"mappings":";;;;;AAMO,SAAS,iBACd,EAC2B,EAAA;AAC3B,EAAM,MAAA,GAAA,GAAMA,aAAO,EAAE,CAAA;AACrB,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,GAAA,CAAI,OAAU,GAAA,EAAA;AAAA,GACf,CAAA;AAED,EAAO,OAAAC,iBAAA,CAAY,CAAI,GAAA,IAAA,KAAA,IAAwB,GAAA,CAAI,SAAS,GAAG,IAAI,CAAG,EAAA,EAAE,CAAA;AAC1E;;;;"}