@salt-ds/core 1.11.1 → 1.13.0

package/dist-es/salt-provider/SaltProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  createContext,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n  children: ReactNode,\n  themeName: ThemeName,\n  density: Density,\n  mode: Mode,\n  applyClassesTo?: TargetElement\n) => {\n  const themeNames =\n    themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME]\n      : [DEFAULT_THEME_NAME, themeName];\n  if (applyClassesTo === \"root\") {\n    return children;\n  } else if (applyClassesTo === \"child\") {\n    if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return React.cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          ...themeNames,\n          `salt-density-${density}`\n        ),\n        // @ts-ignore\n        \"data-mode\": mode,\n      });\n    } else {\n      console.warn(\n        `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`\n      );\n      return children;\n    }\n  } else {\n    return (\n      <div\n        className={clsx(\n          `salt-provider`,\n          ...themeNames,\n          `salt-density-${density}`\n        )}\n        data-mode={mode}\n      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n  applyClassesTo?: TargetElement;\n  density?: Density;\n  theme?: ThemeName;\n  mode?: Mode;\n  breakpoints?: Breakpoints;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nexport function SaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n  const inheritedDensity = useContext(DensityContext);\n  const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n  const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ??\n    (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n  const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n  const themeContextValue = useMemo(\n    () => ({ theme: themeName, mode }),\n    [themeName, mode]\n  );\n\n  const themedChildren = createThemedChildren(\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo\n  );\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames =\n      themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (isRoot) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n      } else {\n        console.warn(\n          \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n      }\n    };\n  }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointContext.Provider value={breakpoints}>\n          <ViewportProvider>{themedChildren}</ViewportProvider>\n        </BreakpointContext.Provider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRoot) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}
+{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  createContext,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  useComponentCssInjection,\n  StyleInjectionProvider,\n} from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n  children: ReactNode,\n  themeName: ThemeName,\n  density: Density,\n  mode: Mode,\n  applyClassesTo?: TargetElement\n) => {\n  const themeNames =\n    themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME]\n      : [DEFAULT_THEME_NAME, themeName];\n  if (applyClassesTo === \"root\") {\n    return children;\n  } else if (applyClassesTo === \"child\") {\n    if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return React.cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          ...themeNames,\n          `salt-density-${density}`\n        ),\n        // @ts-ignore\n        \"data-mode\": mode,\n      });\n    } else {\n      console.warn(\n        `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`\n      );\n      return children;\n    }\n  } else {\n    return (\n      <div\n        className={clsx(\n          `salt-provider`,\n          ...themeNames,\n          `salt-density-${density}`\n        )}\n        data-mode={mode}\n      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n  applyClassesTo?: TargetElement;\n  density?: Density;\n  theme?: ThemeName;\n  mode?: Mode;\n  breakpoints?: Breakpoints;\n  enableStyleInjection?: boolean;\n};\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n  const inheritedDensity = useContext(DensityContext);\n  const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n  const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ??\n    (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n  const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n  const themeContextValue = useMemo(\n    () => ({ theme: themeName, mode }),\n    [themeName, mode]\n  );\n\n  const themedChildren = createThemedChildren(\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo\n  );\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames =\n      themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (isRoot) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n      } else {\n        console.warn(\n          \"\\nSaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n      }\n    };\n  }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointContext.Provider value={breakpoints}>\n          <ViewportProvider>{themedChildren}</ViewportProvider>\n        </BreakpointContext.Provider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRoot) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport function SaltProvider({\n  enableStyleInjection = true,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  return useContext(ThemeContext);\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density || densityFromContext || DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["React","saltProviderCss"],"mappings":"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"}

package/dist-es/status-adornment/StatusAdornment.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltStatusAdornment {\n  align-self: center;\n  display: inline-block;\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-adornment);\n  padding-left: var(--salt-spacing-100);\n  position: relative;\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n\n.saltStatusAdornment-success {\n  --statusAdornment-color: var(--salt-status-success-foreground);\n}\n";
+var css_248z = ".saltStatusAdornment {\n  align-self: center;\n  display: inline-block;\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  height: var(--salt-size-adornment);\n  min-height: var(--salt-size-adornment);\n  padding-left: var(--salt-spacing-100);\n  position: relative;\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n\n.saltStatusAdornment-success {\n  --statusAdornment-color: var(--salt-status-success-foreground);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StatusAdornment.css.js.map

package/dist-es/switch/Switch.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
+var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\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.saltSwitch-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Switch.css.js.map

package/dist-es/text/Display.js

@@ -1,36 +1,29 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { makePrefixer } from '../utils/makePrefixer.js';
-import '../utils/useFloatingUI/useFloatingUI.js';
-import '../utils/useId.js';
-import '../salt-provider/SaltProvider.js';
-import '../viewport/ViewportProvider.js';
-import { clsx } from 'clsx';
 import { Text } from './Text.js';
 
-const withBaseName = makePrefixer("saltText");
-const Display1 = forwardRef(function Display12({ children, className, ...rest }, ref) {
+const Display1 = forwardRef(function Display12({ children, className, styleAs = "display1", ...rest }, ref) {
   return /* @__PURE__ */ jsx(Text, {
     as: "span",
-    className: clsx(className, withBaseName(`display1`)),
+    styleAs,
     ref,
     ...rest,
     children
   });
 });
-const Display2 = forwardRef(function Display22({ children, className, ...rest }, ref) {
+const Display2 = forwardRef(function Display22({ children, className, styleAs = "display2", ...rest }, ref) {
   return /* @__PURE__ */ jsx(Text, {
     as: "span",
-    className: clsx(className, withBaseName(`display2`)),
+    styleAs,
     ref,
     ...rest,
     children
   });
 });
-const Display3 = forwardRef(function Display32({ children, className, ...rest }, ref) {
+const Display3 = forwardRef(function Display32({ children, className, styleAs = "display3", ...rest }, ref) {
   return /* @__PURE__ */ jsx(Text, {
     as: "span",
-    className: clsx(className, withBaseName(`display3`)),
+    styleAs,
     ref,
     ...rest,
     children

package/dist-es/text/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Display1 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display1({ children, className, ...rest }, ref) {\n  return (\n    <Text\n      as=\"span\"\n      className={clsx(className, withBaseName(`display1`))}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n\nexport const Display2 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display2({ children, className, ...rest }, ref) {\n  return (\n    <Text\n      as=\"span\"\n      className={clsx(className, withBaseName(`display2`))}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n\nexport const Display3 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display3({ children, className, ...rest }, ref) {\n  return (\n    <Text\n      as=\"span\"\n      className={clsx(className, withBaseName(`display3`))}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Text>\n  );\n});\n"],"names":["Display1","Display2","Display3"],"mappings":";;;;;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAE/B,MAAA,QAAA,GAAW,WAGtB,SAASA,SAAAA,CAAS,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,MAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,IACnD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAW,WAGtB,SAASC,SAAAA,CAAS,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,MAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,IACnD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAW,WAGtB,SAASC,SAAAA,CAAS,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AACzD,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,EAAG,EAAA,MAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,CAAa,UAAU,CAAC,CAAA;AAAA,IACnD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Display1 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display1(\n  { children, className, styleAs = \"display1\", ...rest },\n  ref\n) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Display2 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display2(\n  { children, className, styleAs = \"display2\", ...rest },\n  ref\n) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Display3 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display3(\n  { children, className, styleAs = \"display3\", ...rest },\n  ref\n) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n"],"names":["Display1","Display2","Display3"],"mappings":";;;;AAGa,MAAA,QAAA,GAAW,UAGtB,CAAA,SAASA,SACT,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EACrD,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAW,UAGtB,CAAA,SAASC,SACT,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EACrD,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAW,UAGtB,CAAA,SAASC,SACT,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EACrD,GACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/text/Text.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-label-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n  font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n  font-family: var(--salt-text-notation-fontFamily);\n  font-size: var(--salt-text-notation-fontSize);\n  line-height: var(--salt-text-notation-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n  font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  text-align: var(--salt-text-action-textAlign);\n  font-weight: var(--salt-text-action-fontWeight);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Text.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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    /**\n     * Change text color palette\n     */\n    variant?: \"primary\" | \"secondary\";\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(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      maxRows,\n      style,\n      styleAs,\n      variant = \"primary\",\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    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"lineClamp\")]: maxRows,\n            [withBaseName(styleAs || \"\")]: styleAs,\n            [withBaseName(variant)]: variant,\n          },\n          className\n        )}\n        {...restProps}\n        ref={ref}\n        style={textStyles}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["textCss"],"mappings":";;;;;;;;;;;;AA8CA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,UAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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      | \"notation\"\n      | \"action\";\n    /**\n     * Change text color palette\n     */\n    variant?: \"primary\" | \"secondary\";\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(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      maxRows,\n      style,\n      styleAs,\n      variant = \"primary\",\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    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"lineClamp\")]: maxRows,\n            [withBaseName(styleAs || \"\")]: styleAs,\n            [withBaseName(variant)]: variant,\n          },\n          className\n        )}\n        {...restProps}\n        ref={ref}\n        style={textStyles}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["textCss"],"mappings":";;;;;;;;;;;;AAgDA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAW,IAAA,EAAE,CAAI,GAAA,OAAA;AAAA,UAC/B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,SAC3B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/text/TextAction.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Text } from './Text.js';
+
+const TextAction = forwardRef(function TextAction2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, {
+    as: "span",
+    styleAs: "action",
+    ref,
+    ...rest,
+    children
+  });
+});
+
+export { TextAction };
+//# sourceMappingURL=TextAction.js.map

package/dist-es/text/TextAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAction.js","sources":["../src/text/TextAction.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const TextAction = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function TextAction({ children, className, ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs=\"action\" ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n"],"names":["TextAction"],"mappings":";;;;AAGa,MAAA,UAAA,GAAa,WAGxB,SAASA,WAAAA,CAAW,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AAC3D,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAQ,EAAA,QAAA;AAAA,IAAS,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC5C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/text/TextNotation.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Text } from './Text.js';
+
+const TextNotation = forwardRef(function TextNotation2({ children, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Text, {
+    as: "span",
+    styleAs: "notation",
+    ref,
+    ...rest,
+    children
+  });
+});
+
+export { TextNotation };
+//# sourceMappingURL=TextNotation.js.map

package/dist-es/text/TextNotation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextNotation.js","sources":["../src/text/TextNotation.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const TextNotation = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function TextNotation({ children, className, ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs=\"notation\" ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n"],"names":["TextNotation"],"mappings":";;;;AAGa,MAAA,YAAA,GAAe,WAG1B,SAASA,aAAAA,CAAa,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,IAAK,EAAA,EAAG,GAAK,EAAA;AAC7D,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAQ,EAAA,UAAA;AAAA,IAAW,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC9C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\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\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\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\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\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-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Toast.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-actionable-textTransform);\n  font-weight: var(--salt-actionable-secondary-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-actionable-textAlign);\n  letter-spacing: var(--salt-actionable-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-text-action-textTransform);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-action-textAlign);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButton.css.js.map

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

@@ -1,4 +1,4 @@
-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-icon-size-base), 12px)) / 2);\n}\n\n.saltTooltip {\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  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\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(--salt-size-unit));\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(--saltTooltip-icon-marginRight, 6px) 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-icon-size-base), 12px)) / 2);\n}\n\n.saltTooltip {\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  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(--salt-size-unit));\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(--saltTooltip-icon-marginRight, 6px) 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";
 
 export { css_248z as default };
 //# sourceMappingURL=Tooltip.css.js.map

package/dist-types/badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from "react";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The number to display on the badge
+     */
+    value: number | string;
+    /**
+     * If a child is provided the Badge will render top right. By defualt renders inline.
+     */
+    children?: ReactNode;
+    /**
+     * The max number to display on the badge.
+     */
+    max?: number;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/badge/index.d.ts

@@ -0,0 +1 @@
+export * from "./Badge";

package/dist-types/card/Card.d.ts

@@ -13,5 +13,9 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
      * on the page.
      */
     interactable?: boolean;
+    /**
+     * Styling variant; defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/card/InteractableCard.d.ts

@@ -8,5 +8,9 @@ export interface InteractableCardProps extends ComponentPropsWithoutRef<"div"> {
      * If `true`, the card will be disabled.
      */
     disabled?: boolean;
+    /**
+     * Styling variant; defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
 }
 export declare const InteractableCard: import("react").ForwardRefExoticComponent<InteractableCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./accordion";
 export * from "./aria-announcer";
 export * from "./avatar";
+export * from "./badge";
 export * from "./banner";
 export * from "./border-item";
 export * from "./border-layout";

package/dist-types/salt-provider/SaltProvider.d.ts

@@ -16,6 +16,7 @@ declare type SaltProviderBaseProps = {
     theme?: ThemeName;
     mode?: Mode;
     breakpoints?: Breakpoints;
+    enableStyleInjection?: boolean;
 };
 interface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {
     children: ReactElement;
@@ -28,7 +29,7 @@ interface SaltProviderThatClassesToRoot extends SaltProviderThatInjectsThemeElem
     applyClassesTo: "root";
 }
 declare type SaltProviderProps = SaltProviderThatAppliesClassesToChild | SaltProviderThatInjectsThemeElement | SaltProviderThatClassesToRoot;
-export declare function SaltProvider({ applyClassesTo: applyClassesToProp, children, density: densityProp, theme: themeProp, mode: modeProp, breakpoints: breakpointsProp, }: SaltProviderProps): JSX.Element;
+export declare function SaltProvider({ enableStyleInjection, ...restProps }: SaltProviderProps): JSX.Element;
 export declare const useTheme: () => ThemeContextProps;
 /**
  * `useDensity` merges density value from `DensityContext` with the one from component's props.

package/dist-types/text/Text.d.ts

@@ -12,7 +12,7 @@ export declare type TextProps<T extends ElementType> = PolymorphicComponentPropW
     /**
      * Match styling to another text component's style
      */
-    styleAs?: "h1" | "h2" | "h3" | "h4" | "label" | "display1" | "display2" | "display3";
+    styleAs?: "h1" | "h2" | "h3" | "h4" | "label" | "display1" | "display2" | "display3" | "notation" | "action";
     /**
      * Change text color palette
      */

package/dist-types/text/TextAction.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from "./Text";
+export declare const TextAction: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/text/TextNotation.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from "./Text";
+export declare const TextNotation: import("react").ForwardRefExoticComponent<Omit<Omit<TextProps<"span">, "as">, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/text/index.d.ts

@@ -2,3 +2,5 @@ export * from "./Text";
 export * from "./Display";
 export * from "./Headings";
 export * from "./Label";
+export * from "./TextNotation";
+export * from "./TextAction";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.11.1",
+  "version": "1.13.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -14,8 +14,8 @@
     "@floating-ui/react": "^0.23.0",
     "clsx": "^2.0.0",
     "@salt-ds/window": "^0.1.1",
-    "@salt-ds/styles": "^0.1.2",
-    "@salt-ds/icons": "^1.7.0"
+    "@salt-ds/styles": "^0.2.0",
+    "@salt-ds/icons": "^1.8.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",
@@ -31,12 +31,16 @@
     "directory": "../../dist/salt-ds-core",
     "provenance": true
   },
-  "module": "dist-es/index.js",
-  "typings": "dist-types/index.d.ts",
+  "scripts": {
+    "bundle:css": "yarn node ./scripts/build.mjs"
+  },
   "files": [
+    "css",
     "dist-cjs",
     "dist-es",
     "dist-types",
     "README.md"
-  ]
+  ],
+  "module": "dist-es/index.js",
+  "typings": "dist-types/index.d.ts"
 }