@salt-ds/core 1.47.1 → 1.47.2

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

@@ -1 +1 @@
-{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n  StyleInjectionProvider,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { type WindowContextType, useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  BreakpointProvider,\n  type Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport { ViewportProvider } from \"../viewport\";\nimport saltProviderCss from \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  corner: Corner;\n  /** @deprecated use `corner`*/\n  UNSTABLE_corner: Corner;\n  headingFont: HeadingFont;\n  /** @deprecated use `headingFont` */\n  UNSTABLE_headingFont: HeadingFont;\n  accent: Accent;\n  /** @deprecated use `accent` */\n  UNSTABLE_accent: Accent;\n  actionFont: ActionFont;\n  /** @deprecated use `actionFont` */\n  UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  corner: DEFAULT_CORNER,\n  UNSTABLE_corner: DEFAULT_CORNER,\n  headingFont: DEFAULT_HEADING_FONT,\n  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n  accent: DEFAULT_ACCENT,\n  UNSTABLE_accent: DEFAULT_ACCENT,\n  actionFont: DEFAULT_ACTION_FONT,\n  UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (\n  themeName: ThemeName,\n  themeNext?: boolean,\n): ThemeName => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)\n      : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);\n  }\n  return themeName === DEFAULT_THEME_NAME\n    ? themeName\n    : clsx(DEFAULT_THEME_NAME, themeName);\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  SaltProviderNextAdditionalProps) => {\n  const themeNamesString = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  }\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          themeNamesString,\n          `salt-density-${density}`,\n        ),\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? themeNextProps : {}),\n      });\n    }\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  return (\n    <div\n      className={clsx(\n        \"salt-provider\",\n        themeNamesString,\n        `salt-density-${density}`,\n      )}\n      data-mode={mode}\n      {...(themeNext ? themeNextProps : {})}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo?: TargetElement;\n  /**\n   * Either \"high\", \"medium\", \"low\" or \"touch\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density?: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme?: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode?: Mode;\n  /**\n   * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n   * Determines breakpoints used in responsive calculation for layout components.\n   */\n  breakpoints?: Breakpoints;\n  /**\n   * A boolean. Enables dynamic style injection for each component.\n   *\n   * If `false`, you'll need to include component CSS yourself.\n   *\n   * @default true\n   */\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  themeNext,\n  corner: cornerProp,\n  headingFont: headingFontProp,\n  accent: accentProp,\n  actionFont: actionFontProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    corner: inheritedCorner,\n    headingFont: inheritedHeadingFont,\n    accent: inheritedAccent,\n    actionFont: inheritedActionFont,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n  const headingFont =\n    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n  const actionFont =\n    actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      corner: corner,\n      headingFont: headingFont,\n      accent: accent,\n      actionFont: actionFont,\n      // Backward compatibility\n      UNSTABLE_corner: corner,\n      UNSTABLE_headingFont: headingFont,\n      UNSTABLE_accent: accent,\n      UNSTABLE_actionFont: actionFont,\n    }),\n    [\n      themeName,\n      mode,\n      targetWindow,\n      themeNext,\n      corner,\n      headingFont,\n      accent,\n      actionFont,\n    ],\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n    headingFont,\n    accent,\n    actionFont,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNamesString = getThemeNames(themeName, themeNext);\n    const themeNames = themeNamesString.split(\" \");\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow !== targetWindow) {\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        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n          targetWindow.document.documentElement.dataset.headingFont =\n            headingFont;\n          targetWindow.document.documentElement.dataset.accent = accent;\n          targetWindow.document.documentElement.dataset.actionFont = actionFont;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider 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        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n          delete targetWindow.document.documentElement.dataset.headingFont;\n          delete targetWindow.document.documentElement.dataset.accent;\n          delete targetWindow.document.documentElement.dataset.actionFont;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  }\n  return saltProvider;\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface SaltProviderNextAdditionalProps {\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n  SaltProviderNextAdditionalProps;\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\nexport function SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n/** @deprecated use `SaltProviderNext` */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\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":["saltProviderCss"],"mappings":";;;;;;;;;;;;;AAoCO,MAAM,eAAkB,GAAA;AAE/B,MAAM,kBAAqB,GAAA,YAAA;AAC3B,MAAM,uBAA0B,GAAA,iBAAA;AAEhC,MAAM,YAAe,GAAA,OAAA;AACrB,MAAM,cAAyB,GAAA,OAAA;AAC/B,MAAM,oBAAoC,GAAA,WAAA;AAC1C,MAAM,cAAyB,GAAA,MAAA;AAC/B,MAAM,mBAAkC,GAAA,WAAA;AAqB3B,MAAA,cAAA,GAAiB,cAAuB,eAAe;AAE7D,MAAM,eAAe,aAAiC,CAAA;AAAA,EAC3D,KAAO,EAAA,EAAA;AAAA,EACP,IAAM,EAAA,YAAA;AAAA,EACN,SAAW,EAAA,KAAA;AAAA,EACX,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA,cAAA;AAAA,EACjB,WAAa,EAAA,oBAAA;AAAA,EACb,oBAAsB,EAAA,oBAAA;AAAA,EACtB,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA,cAAA;AAAA,EACjB,UAAY,EAAA,mBAAA;AAAA,EACZ,mBAAqB,EAAA;AACvB,CAAC;AAEY,MAAA,iBAAA,GACX,cAA2B,mBAAmB;AAKhD,MAAM,aAAA,GAAgB,CACpB,SAAA,EACA,SACc,KAAA;AACd,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,SAAA,KAAc,qBACjB,IAAK,CAAA,kBAAA,EAAoB,uBAAuB,CAChD,GAAA,IAAA,CAAK,kBAAoB,EAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA;AAEjE,EAAA,OAAO,SAAc,KAAA,kBAAA,GACjB,SACA,GAAA,IAAA,CAAK,oBAAoB,SAAS,CAAA;AACxC,CAAA;AAMA,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAOsC,KAAA;AA5HtC,EAAA,IAAA,EAAA;AA6HE,EAAM,MAAA,gBAAA,GAAmB,aAAc,CAAA,SAAA,EAAW,SAAS,CAAA;AAC3D,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,aAAe,EAAA,MAAA;AAAA,IACf,mBAAqB,EAAA,WAAA;AAAA,IACrB,aAAe,EAAA,MAAA;AAAA,IACf,kBAAoB,EAAA;AAAA,GACtB;AACA,EAAA,IAAI,mBAAmB,MAAQ,EAAA;AAC7B,IAAO,OAAA,QAAA;AAAA;AAET,EAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,IAAI,IAAA,cAAA,CAA4C,QAAQ,CAAG,EAAA;AACzD,MAAA,OAAO,aAAa,QAAU,EAAA;AAAA,QAC5B,SAAW,EAAA,IAAA;AAAA,UACT,CAAA,EAAA,GAAA,QAAA,CAAS,UAAT,IAAgB,GAAA,MAAA,GAAA,EAAA,CAAA,SAAA;AAAA,UAChB,gBAAA;AAAA,UACA,gBAAgB,OAAO,CAAA;AAAA,SACzB;AAAA;AAAA,QAEA,WAAa,EAAA,IAAA;AAAA,QACb,GAAI,SAAY,GAAA,cAAA,GAAiB;AAAC,OACnC,CAAA;AAAA;AAEH,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA;AAAA;AAAA,iDAAA;AAAA,KAGF;AACA,IAAO,OAAA,QAAA;AAAA;AAET,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,gBAAgB,OAAO,CAAA;AAAA,OACzB;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACV,GAAI,SAAY,GAAA,cAAA,GAAiB,EAAC;AAAA,MAElC;AAAA;AAAA,GACH;AAEJ,CAAA;AAiEA,SAAS,oBAAqB,CAAA;AAAA,EAC5B,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,KAAO,EAAA,SAAA;AAAA,EACP,IAAM,EAAA,QAAA;AAAA,EACN,WAAa,EAAA,eAAA;AAAA,EACb,SAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,WAAa,EAAA,eAAA;AAAA,EACb,MAAQ,EAAA,UAAA;AAAA,EACR,UAAY,EAAA;AACd,CAGG,EAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,WAAW,cAAc,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,cAAA;AAAA,IACP,IAAM,EAAA,aAAA;AAAA,IACN,MAAQ,EAAA,eAAA;AAAA,IACR,MAAQ,EAAA,eAAA;AAAA,IACR,WAAa,EAAA,oBAAA;AAAA,IACb,MAAQ,EAAA,eAAA;AAAA,IACR,UAAY,EAAA;AAAA,GACd,GAAI,WAAW,YAAY,CAAA;AAE3B,EAAM,MAAA,cAAA,GAAiB,cAAmB,KAAA,MAAA,IAAa,cAAmB,KAAA,EAAA;AAC1E,EAAM,MAAA,OAAA,GAAU,eAAe,gBAAoB,IAAA,eAAA;AACnD,EAAA,MAAM,SACJ,GAAA,SAAA,KAAc,cAAmB,KAAA,EAAA,GAAK,kBAAqB,GAAA,cAAA,CAAA;AAC7D,EAAA,MAAM,OAAO,QAAY,IAAA,aAAA;AACzB,EAAA,MAAM,cAAc,eAAmB,IAAA,mBAAA;AACvC,EAAM,MAAA,MAAA,GAAS,cAAc,eAAmB,IAAA,cAAA;AAChD,EAAM,MAAA,WAAA,GACJ,mBAAmB,oBAAwB,IAAA,oBAAA;AAC7C,EAAM,MAAA,MAAA,GAAS,cAAc,eAAmB,IAAA,cAAA;AAChD,EAAM,MAAA,UAAA,GACJ,kBAAkB,mBAAuB,IAAA,mBAAA;AAE3C,EAAM,MAAA,cAAA,GACJ,kBAAuB,KAAA,cAAA,GAAiB,MAAS,GAAA,OAAA,CAAA;AAEnD,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,iBAAoB,GAAA,OAAA;AAAA,IACxB,OAAO;AAAA,MACL,KAAO,EAAA,SAAA;AAAA,MACP,IAAA;AAAA,MACA,MAAQ,EAAA,YAAA;AAAA,MACR,SAAA,EAAW,QAAQ,SAAS,CAAA;AAAA,MAC5B,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA;AAAA,MAEA,eAAiB,EAAA,MAAA;AAAA,MACjB,oBAAsB,EAAA,WAAA;AAAA,MACtB,eAAiB,EAAA,MAAA;AAAA,MACjB,mBAAqB,EAAA;AAAA,KACvB,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,iBAAiB,oBAAqB,CAAA;AAAA,IAC1C,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAM,MAAA,gBAAA,GAAmB,aAAc,CAAA,SAAA,EAAW,SAAS,CAAA;AAC3D,IAAM,MAAA,UAAA,GAAa,gBAAiB,CAAA,KAAA,CAAM,GAAG,CAAA;AAE7C,IAAI,IAAA,cAAA,KAAmB,UAAU,YAAc,EAAA;AAC7C,MAAA,IAAI,oBAAoB,YAAc,EAAA;AAEpC,QAAa,YAAA,CAAA,QAAA,CAAS,gBAAgB,SAAU,CAAA,GAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,IAAO,GAAA,IAAA;AACrD,QAAA,IAAI,SAAW,EAAA;AACb,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,MAAS,GAAA,MAAA;AACvD,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,WAC5C,GAAA,WAAA;AACF,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,MAAS,GAAA,MAAA;AACvD,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,UAAa,GAAA,UAAA;AAAA;AAC7D,OACK,MAAA;AACL,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF;AAEF,IAAA,OAAO,MAAM;AACX,MAAI,IAAA,cAAA,KAAmB,UAAU,YAAc,EAAA;AAE7C,QAAa,YAAA,CAAA,QAAA,CAAS,gBAAgB,SAAU,CAAA,MAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,IAAO,GAAA,MAAA;AACrD,QAAA,IAAI,SAAW,EAAA;AACb,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,MAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,WAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,MAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,UAAA;AAAA;AACvD;AACF,KACF;AAAA,GACC,EAAA;AAAA,IACD,cAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqB,sBAAsB,WAAW,CAAA;AAE5D,EAAA,MAAM,YACJ,mBAAA,GAAA,CAAC,cAAe,CAAA,QAAA,EAAf,EAAwB,KAAA,EAAO,OAC9B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,iBAC5B,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,kBAAA,EAClB,QAAC,kBAAA,GAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,KAAO,EAAA,WAAA,EACjC,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAkB,QAAe,EAAA,cAAA,EAAA,CAAA,EACpC,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAGF,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAO,uBAAA,GAAA,CAAC,yBAAuB,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA;AAE9C,EAAO,OAAA,YAAA;AACT;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B,oBAAA;AAAA,EACA,GAAG;AACL,CAAsB,EAAA;AACpB,EACE,uBAAA,GAAA,CAAC,0BAAuB,KAAO,EAAA,oBAAA,EAC7B,8BAAC,oBAAsB,EAAA,EAAA,GAAG,WAAW,CACvC,EAAA,CAAA;AAEJ;AAkCO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,oBAAA;AAAA,EACA,GAAG;AACL,CAA0B,EAAA;AACxB,EACE,uBAAA,GAAA,CAAC,sBAAuB,EAAA,EAAA,KAAA,EAAO,oBAE7B,EAAA,QAAA,kBAAA,GAAA,CAAC,wBAAsB,GAAG,SAAA,EAAW,SAAW,EAAA,IAAA,EAAM,CACxD,EAAA,CAAA;AAEJ;AAEO,MAAM,yBAA4B,GAAA;AAElC,MAAM,WAAW,MAAyB;AAC/C,EAAA,MAAM,EAAE,MAAQ,EAAA,GAAG,oBAAqB,EAAA,GAAI,WAAW,YAAY,CAAA;AAEnE,EAAO,OAAA,oBAAA;AACT;AAKO,SAAS,WAAW,OAA4B,EAAA;AACrD,EAAM,MAAA,kBAAA,GAAqB,WAAW,cAAc,CAAA;AACpD,EAAA,OAAO,WAAW,kBAAsB,IAAA,eAAA;AAC1C;AAEO,MAAM,iBAAiB,MAAmB;AAC/C,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACrC;;;;"}
+{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n  StyleInjectionProvider,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow, type WindowContextType } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  BreakpointProvider,\n  type Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport { ViewportProvider } from \"../viewport\";\nimport saltProviderCss from \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  corner: Corner;\n  /** @deprecated use `corner`*/\n  UNSTABLE_corner: Corner;\n  headingFont: HeadingFont;\n  /** @deprecated use `headingFont` */\n  UNSTABLE_headingFont: HeadingFont;\n  accent: Accent;\n  /** @deprecated use `accent` */\n  UNSTABLE_accent: Accent;\n  actionFont: ActionFont;\n  /** @deprecated use `actionFont` */\n  UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  corner: DEFAULT_CORNER,\n  UNSTABLE_corner: DEFAULT_CORNER,\n  headingFont: DEFAULT_HEADING_FONT,\n  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n  accent: DEFAULT_ACCENT,\n  UNSTABLE_accent: DEFAULT_ACCENT,\n  actionFont: DEFAULT_ACTION_FONT,\n  UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (\n  themeName: ThemeName,\n  themeNext?: boolean,\n): ThemeName => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)\n      : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);\n  }\n  return themeName === DEFAULT_THEME_NAME\n    ? themeName\n    : clsx(DEFAULT_THEME_NAME, themeName);\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  SaltProviderNextAdditionalProps) => {\n  const themeNamesString = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  }\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          themeNamesString,\n          `salt-density-${density}`,\n        ),\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? themeNextProps : {}),\n      });\n    }\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  return (\n    <div\n      className={clsx(\n        \"salt-provider\",\n        themeNamesString,\n        `salt-density-${density}`,\n      )}\n      data-mode={mode}\n      {...(themeNext ? themeNextProps : {})}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo?: TargetElement;\n  /**\n   * Either \"high\", \"medium\", \"low\" or \"touch\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density?: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme?: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode?: Mode;\n  /**\n   * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n   * Determines breakpoints used in responsive calculation for layout components.\n   */\n  breakpoints?: Breakpoints;\n  /**\n   * A boolean. Enables dynamic style injection for each component.\n   *\n   * If `false`, you'll need to include component CSS yourself.\n   *\n   * @default true\n   */\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  themeNext,\n  corner: cornerProp,\n  headingFont: headingFontProp,\n  accent: accentProp,\n  actionFont: actionFontProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    corner: inheritedCorner,\n    headingFont: inheritedHeadingFont,\n    accent: inheritedAccent,\n    actionFont: inheritedActionFont,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n  const headingFont =\n    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n  const actionFont =\n    actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      corner: corner,\n      headingFont: headingFont,\n      accent: accent,\n      actionFont: actionFont,\n      // Backward compatibility\n      UNSTABLE_corner: corner,\n      UNSTABLE_headingFont: headingFont,\n      UNSTABLE_accent: accent,\n      UNSTABLE_actionFont: actionFont,\n    }),\n    [\n      themeName,\n      mode,\n      targetWindow,\n      themeNext,\n      corner,\n      headingFont,\n      accent,\n      actionFont,\n    ],\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n    headingFont,\n    accent,\n    actionFont,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNamesString = getThemeNames(themeName, themeNext);\n    const themeNames = themeNamesString.split(\" \");\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow !== targetWindow) {\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        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n          targetWindow.document.documentElement.dataset.headingFont =\n            headingFont;\n          targetWindow.document.documentElement.dataset.accent = accent;\n          targetWindow.document.documentElement.dataset.actionFont = actionFont;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider 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        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n          delete targetWindow.document.documentElement.dataset.headingFont;\n          delete targetWindow.document.documentElement.dataset.accent;\n          delete targetWindow.document.documentElement.dataset.actionFont;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  }\n  return saltProvider;\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface SaltProviderNextAdditionalProps {\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n  SaltProviderNextAdditionalProps;\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\nexport function SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n/** @deprecated use `SaltProviderNext` */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\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":["saltProviderCss"],"mappings":";;;;;;;;;;;;;AAoCO,MAAM,eAAkB,GAAA;AAE/B,MAAM,kBAAqB,GAAA,YAAA;AAC3B,MAAM,uBAA0B,GAAA,iBAAA;AAEhC,MAAM,YAAe,GAAA,OAAA;AACrB,MAAM,cAAyB,GAAA,OAAA;AAC/B,MAAM,oBAAoC,GAAA,WAAA;AAC1C,MAAM,cAAyB,GAAA,MAAA;AAC/B,MAAM,mBAAkC,GAAA,WAAA;AAqB3B,MAAA,cAAA,GAAiB,cAAuB,eAAe;AAE7D,MAAM,eAAe,aAAiC,CAAA;AAAA,EAC3D,KAAO,EAAA,EAAA;AAAA,EACP,IAAM,EAAA,YAAA;AAAA,EACN,SAAW,EAAA,KAAA;AAAA,EACX,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA,cAAA;AAAA,EACjB,WAAa,EAAA,oBAAA;AAAA,EACb,oBAAsB,EAAA,oBAAA;AAAA,EACtB,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA,cAAA;AAAA,EACjB,UAAY,EAAA,mBAAA;AAAA,EACZ,mBAAqB,EAAA;AACvB,CAAC;AAEY,MAAA,iBAAA,GACX,cAA2B,mBAAmB;AAKhD,MAAM,aAAA,GAAgB,CACpB,SAAA,EACA,SACc,KAAA;AACd,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,SAAA,KAAc,qBACjB,IAAK,CAAA,kBAAA,EAAoB,uBAAuB,CAChD,GAAA,IAAA,CAAK,kBAAoB,EAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA;AAEjE,EAAA,OAAO,SAAc,KAAA,kBAAA,GACjB,SACA,GAAA,IAAA,CAAK,oBAAoB,SAAS,CAAA;AACxC,CAAA;AAMA,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAOsC,KAAA;AA5HtC,EAAA,IAAA,EAAA;AA6HE,EAAM,MAAA,gBAAA,GAAmB,aAAc,CAAA,SAAA,EAAW,SAAS,CAAA;AAC3D,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,aAAe,EAAA,MAAA;AAAA,IACf,mBAAqB,EAAA,WAAA;AAAA,IACrB,aAAe,EAAA,MAAA;AAAA,IACf,kBAAoB,EAAA;AAAA,GACtB;AACA,EAAA,IAAI,mBAAmB,MAAQ,EAAA;AAC7B,IAAO,OAAA,QAAA;AAAA;AAET,EAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,IAAI,IAAA,cAAA,CAA4C,QAAQ,CAAG,EAAA;AACzD,MAAA,OAAO,aAAa,QAAU,EAAA;AAAA,QAC5B,SAAW,EAAA,IAAA;AAAA,UACT,CAAA,EAAA,GAAA,QAAA,CAAS,UAAT,IAAgB,GAAA,MAAA,GAAA,EAAA,CAAA,SAAA;AAAA,UAChB,gBAAA;AAAA,UACA,gBAAgB,OAAO,CAAA;AAAA,SACzB;AAAA;AAAA,QAEA,WAAa,EAAA,IAAA;AAAA,QACb,GAAI,SAAY,GAAA,cAAA,GAAiB;AAAC,OACnC,CAAA;AAAA;AAEH,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA;AAAA;AAAA,iDAAA;AAAA,KAGF;AACA,IAAO,OAAA,QAAA;AAAA;AAET,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,gBAAgB,OAAO,CAAA;AAAA,OACzB;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACV,GAAI,SAAY,GAAA,cAAA,GAAiB,EAAC;AAAA,MAElC;AAAA;AAAA,GACH;AAEJ,CAAA;AAiEA,SAAS,oBAAqB,CAAA;AAAA,EAC5B,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,KAAO,EAAA,SAAA;AAAA,EACP,IAAM,EAAA,QAAA;AAAA,EACN,WAAa,EAAA,eAAA;AAAA,EACb,SAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,WAAa,EAAA,eAAA;AAAA,EACb,MAAQ,EAAA,UAAA;AAAA,EACR,UAAY,EAAA;AACd,CAGG,EAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,WAAW,cAAc,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,cAAA;AAAA,IACP,IAAM,EAAA,aAAA;AAAA,IACN,MAAQ,EAAA,eAAA;AAAA,IACR,MAAQ,EAAA,eAAA;AAAA,IACR,WAAa,EAAA,oBAAA;AAAA,IACb,MAAQ,EAAA,eAAA;AAAA,IACR,UAAY,EAAA;AAAA,GACd,GAAI,WAAW,YAAY,CAAA;AAE3B,EAAM,MAAA,cAAA,GAAiB,cAAmB,KAAA,MAAA,IAAa,cAAmB,KAAA,EAAA;AAC1E,EAAM,MAAA,OAAA,GAAU,eAAe,gBAAoB,IAAA,eAAA;AACnD,EAAA,MAAM,SACJ,GAAA,SAAA,KAAc,cAAmB,KAAA,EAAA,GAAK,kBAAqB,GAAA,cAAA,CAAA;AAC7D,EAAA,MAAM,OAAO,QAAY,IAAA,aAAA;AACzB,EAAA,MAAM,cAAc,eAAmB,IAAA,mBAAA;AACvC,EAAM,MAAA,MAAA,GAAS,cAAc,eAAmB,IAAA,cAAA;AAChD,EAAM,MAAA,WAAA,GACJ,mBAAmB,oBAAwB,IAAA,oBAAA;AAC7C,EAAM,MAAA,MAAA,GAAS,cAAc,eAAmB,IAAA,cAAA;AAChD,EAAM,MAAA,UAAA,GACJ,kBAAkB,mBAAuB,IAAA,mBAAA;AAE3C,EAAM,MAAA,cAAA,GACJ,kBAAuB,KAAA,cAAA,GAAiB,MAAS,GAAA,OAAA,CAAA;AAEnD,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,iBAAoB,GAAA,OAAA;AAAA,IACxB,OAAO;AAAA,MACL,KAAO,EAAA,SAAA;AAAA,MACP,IAAA;AAAA,MACA,MAAQ,EAAA,YAAA;AAAA,MACR,SAAA,EAAW,QAAQ,SAAS,CAAA;AAAA,MAC5B,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA;AAAA,MAEA,eAAiB,EAAA,MAAA;AAAA,MACjB,oBAAsB,EAAA,WAAA;AAAA,MACtB,eAAiB,EAAA,MAAA;AAAA,MACjB,mBAAqB,EAAA;AAAA,KACvB,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,iBAAiB,oBAAqB,CAAA;AAAA,IAC1C,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAM,MAAA,gBAAA,GAAmB,aAAc,CAAA,SAAA,EAAW,SAAS,CAAA;AAC3D,IAAM,MAAA,UAAA,GAAa,gBAAiB,CAAA,KAAA,CAAM,GAAG,CAAA;AAE7C,IAAI,IAAA,cAAA,KAAmB,UAAU,YAAc,EAAA;AAC7C,MAAA,IAAI,oBAAoB,YAAc,EAAA;AAEpC,QAAa,YAAA,CAAA,QAAA,CAAS,gBAAgB,SAAU,CAAA,GAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,IAAO,GAAA,IAAA;AACrD,QAAA,IAAI,SAAW,EAAA;AACb,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,MAAS,GAAA,MAAA;AACvD,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,WAC5C,GAAA,WAAA;AACF,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,MAAS,GAAA,MAAA;AACvD,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,UAAa,GAAA,UAAA;AAAA;AAC7D,OACK,MAAA;AACL,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF;AAEF,IAAA,OAAO,MAAM;AACX,MAAI,IAAA,cAAA,KAAmB,UAAU,YAAc,EAAA;AAE7C,QAAa,YAAA,CAAA,QAAA,CAAS,gBAAgB,SAAU,CAAA,MAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,IAAO,GAAA,MAAA;AACrD,QAAA,IAAI,SAAW,EAAA;AACb,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,MAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,WAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,MAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,UAAA;AAAA;AACvD;AACF,KACF;AAAA,GACC,EAAA;AAAA,IACD,cAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqB,sBAAsB,WAAW,CAAA;AAE5D,EAAA,MAAM,YACJ,mBAAA,GAAA,CAAC,cAAe,CAAA,QAAA,EAAf,EAAwB,KAAA,EAAO,OAC9B,EAAA,QAAA,kBAAA,GAAA,CAAC,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,iBAC5B,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,kBAAA,EAClB,QAAC,kBAAA,GAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,KAAO,EAAA,WAAA,EACjC,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA,EAAkB,QAAe,EAAA,cAAA,EAAA,CAAA,EACpC,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAGF,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAO,uBAAA,GAAA,CAAC,yBAAuB,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA;AAE9C,EAAO,OAAA,YAAA;AACT;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B,oBAAA;AAAA,EACA,GAAG;AACL,CAAsB,EAAA;AACpB,EACE,uBAAA,GAAA,CAAC,0BAAuB,KAAO,EAAA,oBAAA,EAC7B,8BAAC,oBAAsB,EAAA,EAAA,GAAG,WAAW,CACvC,EAAA,CAAA;AAEJ;AAkCO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,oBAAA;AAAA,EACA,GAAG;AACL,CAA0B,EAAA;AACxB,EACE,uBAAA,GAAA,CAAC,sBAAuB,EAAA,EAAA,KAAA,EAAO,oBAE7B,EAAA,QAAA,kBAAA,GAAA,CAAC,wBAAsB,GAAG,SAAA,EAAW,SAAW,EAAA,IAAA,EAAM,CACxD,EAAA,CAAA;AAEJ;AAEO,MAAM,yBAA4B,GAAA;AAElC,MAAM,WAAW,MAAyB;AAC/C,EAAA,MAAM,EAAE,MAAQ,EAAA,GAAG,oBAAqB,EAAA,GAAI,WAAW,YAAY,CAAA;AAEnE,EAAO,OAAA,oBAAA;AACT;AAKO,SAAS,WAAW,OAA4B,EAAA;AACrD,EAAM,MAAA,kBAAA,GAAqB,WAAW,cAAc,CAAA;AACpD,EAAA,OAAO,WAAW,kBAAsB,IAAA,eAAA;AAC1C;AAEO,MAAM,iBAAiB,MAAmB;AAC/C,EAAA,OAAO,WAAW,iBAAiB,CAAA;AACrC;;;;"}

package/dist-es/scrim/Scrim.js

@@ -1,4 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { makePrefixer } from '../utils/makePrefixer.js';
@@ -6,8 +8,6 @@ import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
 import css_248z from './Scrim.css.js';
 
 const withBaseName = makePrefixer("saltScrim");

package/dist-es/scrim/Scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true` the scrim is bound to the document viewport.\n   * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n   */\n  fixed?: boolean;\n  /**\n   * If `true` the scrim is shown.\n   */\n  open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  { className, children, fixed = false, open = true, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrim\",\n    css: scrimCss,\n    window: targetWindow,\n  });\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fixed\")]: fixed,\n        },\n        className,\n      )}\n      data-testid=\"scrim\"\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["Scrim","scrimCss"],"mappings":";;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA;AActC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAW,EAAA,QAAA,EAAU,KAAQ,GAAA,KAAA,EAAO,IAAO,GAAA,IAAA,EAAM,GAAG,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,SAC3B;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAY,EAAA,OAAA;AAAA,MACZ,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.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\";\n\nimport scrimCss from \"./Scrim.css\";\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nexport interface ScrimProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true` the scrim is bound to the document viewport.\n   * The default value of this prop is false, and the default behavior is for Scrim to be bound to its parent container (nearest positioned ancestor).\n   */\n  fixed?: boolean;\n  /**\n   * If `true` the scrim is shown.\n   */\n  open?: boolean;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  { className, children, fixed = false, open = true, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-scrim\",\n    css: scrimCss,\n    window: targetWindow,\n  });\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fixed\")]: fixed,\n        },\n        className,\n      )}\n      data-testid=\"scrim\"\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["Scrim","scrimCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA;AActC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,EAAE,SAAW,EAAA,QAAA,EAAU,KAAQ,GAAA,KAAA,EAAO,IAAO,GAAA,IAAA,EAAM,GAAG,IAAA,IACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,SAC3B;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAY,EAAA,OAAA;AAAA,MACZ,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  ErrorSolidIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  StepSuccessIcon,\n  SuccessTickIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserSolidIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  type ElementType,\n  type ReactNode,\n  createContext,\n  useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n  ExpandIcon: ElementType;\n  CollapseIcon: ElementType;\n  ExpandGroupIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  NextIcon: ElementType;\n  PreviousIcon: ElementType;\n  IncreaseIcon: ElementType;\n  DecreaseIcon: ElementType;\n  UploadIcon: ElementType;\n  ErrorIcon: ElementType;\n  SuccessIcon: ElementType;\n  InfoIcon: ElementType;\n  WarningIcon: ElementType;\n  OverflowIcon: ElementType;\n  UserIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  ExternalIcon: ElementType;\n  PendingIcon: ElementType;\n  ActiveIcon: ElementType;\n  CompletedIcon: ElementType;\n  LockedIcon: ElementType;\n  InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ExpandIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  NextIcon: ChevronRightIcon,\n  PreviousIcon: ChevronLeftIcon,\n  IncreaseIcon: TriangleUpIcon,\n  DecreaseIcon: TriangleDownIcon,\n  UploadIcon,\n  ErrorIcon: ErrorSolidIcon,\n  SuccessIcon: SuccessTickIcon,\n  InfoIcon: InfoSolidIcon,\n  WarningIcon: WarningSolidIcon,\n  OverflowIcon: OverflowMenuIcon,\n  UserIcon: UserSolidIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  ExternalIcon: TearOutIcon,\n  PendingIcon: StepDefaultIcon,\n  ActiveIcon: StepActiveIcon,\n  CompletedIcon: StepSuccessIcon,\n  LockedIcon: LockedIcon,\n  InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;AAoEA,MAAM,cAAkC,GAAA;AAAA,EACtC,UAAY,EAAA,eAAA;AAAA,EACZ,YAAc,EAAA,aAAA;AAAA,EACd,eAAiB,EAAA,gBAAA;AAAA,EACjB,iBAAmB,EAAA,eAAA;AAAA,EACnB,QAAU,EAAA,gBAAA;AAAA,EACV,YAAc,EAAA,eAAA;AAAA,EACd,YAAc,EAAA,cAAA;AAAA,EACd,YAAc,EAAA,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAW,EAAA,cAAA;AAAA,EACX,WAAa,EAAA,eAAA;AAAA,EACb,QAAU,EAAA,aAAA;AAAA,EACV,WAAa,EAAA,gBAAA;AAAA,EACb,YAAc,EAAA,gBAAA;AAAA,EACd,QAAU,EAAA,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAc,EAAA,WAAA;AAAA,EACd,WAAa,EAAA,eAAA;AAAA,EACb,UAAY,EAAA,cAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAgB,EAAA;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CACE,qBAAA,GAAA,CAAC,mBAAoB,CAAA,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAgB,EAAA,GAAG,OAAQ,EAAA,EAClE,QACH,EAAA;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAM,MAAA,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAW,IAAA,cAAA;AACpB;;;;"}
+{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n  CalendarIcon,\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CloseIcon,\n  ErrorSolidIcon,\n  InfoSolidIcon,\n  LockedIcon,\n  OverflowMenuIcon,\n  ProgressInprogressIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  StepSuccessIcon,\n  SuccessTickIcon,\n  TearOutIcon,\n  TriangleDownIcon,\n  TriangleUpIcon,\n  UploadIcon,\n  UserSolidIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n  createContext,\n  type ElementType,\n  type ReactNode,\n  useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n  ExpandIcon: ElementType;\n  CollapseIcon: ElementType;\n  ExpandGroupIcon: ElementType;\n  CollapseGroupIcon: ElementType;\n  NextIcon: ElementType;\n  PreviousIcon: ElementType;\n  IncreaseIcon: ElementType;\n  DecreaseIcon: ElementType;\n  UploadIcon: ElementType;\n  ErrorIcon: ElementType;\n  SuccessIcon: ElementType;\n  InfoIcon: ElementType;\n  WarningIcon: ElementType;\n  OverflowIcon: ElementType;\n  UserIcon: ElementType;\n  CalendarIcon: ElementType;\n  CloseIcon: ElementType;\n  ExternalIcon: ElementType;\n  PendingIcon: ElementType;\n  ActiveIcon: ElementType;\n  CompletedIcon: ElementType;\n  LockedIcon: ElementType;\n  InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n  /**\n   * Custom mapping of icon names to components. Overrides default icons if provided.\n   */\n  iconMap?: Partial<SemanticIconMap>;\n\n  /**\n   * Child elements that will use the provided icons.\n   */\n  children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n  ExpandIcon: ChevronDownIcon,\n  CollapseIcon: ChevronUpIcon,\n  ExpandGroupIcon: ChevronRightIcon,\n  CollapseGroupIcon: ChevronDownIcon,\n  NextIcon: ChevronRightIcon,\n  PreviousIcon: ChevronLeftIcon,\n  IncreaseIcon: TriangleUpIcon,\n  DecreaseIcon: TriangleDownIcon,\n  UploadIcon,\n  ErrorIcon: ErrorSolidIcon,\n  SuccessIcon: SuccessTickIcon,\n  InfoIcon: InfoSolidIcon,\n  WarningIcon: WarningSolidIcon,\n  OverflowIcon: OverflowMenuIcon,\n  UserIcon: UserSolidIcon,\n  CalendarIcon: CalendarIcon,\n  CloseIcon: CloseIcon,\n  ExternalIcon: TearOutIcon,\n  PendingIcon: StepDefaultIcon,\n  ActiveIcon: StepActiveIcon,\n  CompletedIcon: StepSuccessIcon,\n  LockedIcon: LockedIcon,\n  InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n  iconMap = {},\n  children,\n}: SemanticIconProviderProps) => (\n  <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n    {children}\n  </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n  const context = useContext(SemanticIconContext);\n  return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;AAoEA,MAAM,cAAkC,GAAA;AAAA,EACtC,UAAY,EAAA,eAAA;AAAA,EACZ,YAAc,EAAA,aAAA;AAAA,EACd,eAAiB,EAAA,gBAAA;AAAA,EACjB,iBAAmB,EAAA,eAAA;AAAA,EACnB,QAAU,EAAA,gBAAA;AAAA,EACV,YAAc,EAAA,eAAA;AAAA,EACd,YAAc,EAAA,cAAA;AAAA,EACd,YAAc,EAAA,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAW,EAAA,cAAA;AAAA,EACX,WAAa,EAAA,eAAA;AAAA,EACb,QAAU,EAAA,aAAA;AAAA,EACV,WAAa,EAAA,gBAAA;AAAA,EACb,YAAc,EAAA,gBAAA;AAAA,EACd,QAAU,EAAA,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAc,EAAA,WAAA;AAAA,EACd,WAAa,EAAA,eAAA;AAAA,EACb,UAAY,EAAA,cAAA;AAAA,EACZ,aAAe,EAAA,eAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAgB,EAAA;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CACE,qBAAA,GAAA,CAAC,mBAAoB,CAAA,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAgB,EAAA,GAAG,OAAQ,EAAA,EAClE,QACH,EAAA;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAM,MAAA,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAW,IAAA,cAAA;AACpB;;;;"}

package/dist-es/skip-link/SkipLink.js

@@ -8,8 +8,8 @@ import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import css_248z from './SkipLink.css.js';
 import { useManageFocusOnTarget } from './internal/useManageFocusOnTarget.js';
+import css_248z from './SkipLink.css.js';
 
 const withBaseName = makePrefixer("saltSkipLink");
 const SkipLink = forwardRef(

package/dist-es/skip-link/SkipLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.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  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport skipLinkCss from \"./SkipLink.css\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\ninterface SkipLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * The ID of the target element to apply focus when the link is clicked.\n   * If the element with this ID is not found, the SkipLink will not be rendered.\n   */\n  targetId: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink(\n    { className, targetId, children, onKeyUp, onBlur, onClick, ...rest },\n    ref,\n  ) {\n    const [isTargetAvailable, setIsTargetAvailable] = useState(false);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-skip-link\",\n      css: skipLinkCss,\n      window: targetWindow,\n    });\n\n    const targetRef = useRef<HTMLElement | null>(null);\n\n    useEffect(() => {\n      if (targetWindow) {\n        targetRef.current = targetWindow.document.getElementById(targetId);\n      }\n      setIsTargetAvailable(!!targetRef.current);\n    }, [targetId, targetWindow]);\n\n    const eventHandlers = useManageFocusOnTarget({\n      onKeyUp,\n      onBlur,\n      onClick,\n      targetRef,\n      targetClass: withBaseName(\"target\"),\n    });\n\n    if (!isTargetAvailable) return null;\n    return (\n      <a\n        className={clsx(withBaseName(), className)}\n        href={`#${targetId}`}\n        ref={ref}\n        target=\"_self\"\n        {...eventHandlers}\n        {...rest}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAAA,CACP,EAAE,SAAA,EAAW,QAAU,EAAA,QAAA,EAAU,OAAS,EAAA,MAAA,EAAQ,OAAS,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAChE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AAEjD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,SAAA,CAAU,OAAU,GAAA,YAAA,CAAa,QAAS,CAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AAEnE,MAAqB,oBAAA,CAAA,CAAC,CAAC,SAAA,CAAU,OAAO,CAAA;AAAA,KACvC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,IAAA,MAAM,gBAAgB,sBAAuB,CAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,EAAa,aAAa,QAAQ;AAAA,KACnC,CAAA;AAED,IAAI,IAAA,CAAC,mBAA0B,OAAA,IAAA;AAC/B,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,QAClB,GAAA;AAAA,QACA,MAAO,EAAA,OAAA;AAAA,QACN,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.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  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * The ID of the target element to apply focus when the link is clicked.\n   * If the element with this ID is not found, the SkipLink will not be rendered.\n   */\n  targetId: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink(\n    { className, targetId, children, onKeyUp, onBlur, onClick, ...rest },\n    ref,\n  ) {\n    const [isTargetAvailable, setIsTargetAvailable] = useState(false);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-skip-link\",\n      css: skipLinkCss,\n      window: targetWindow,\n    });\n\n    const targetRef = useRef<HTMLElement | null>(null);\n\n    useEffect(() => {\n      if (targetWindow) {\n        targetRef.current = targetWindow.document.getElementById(targetId);\n      }\n      setIsTargetAvailable(!!targetRef.current);\n    }, [targetId, targetWindow]);\n\n    const eventHandlers = useManageFocusOnTarget({\n      onKeyUp,\n      onBlur,\n      onClick,\n      targetRef,\n      targetClass: withBaseName(\"target\"),\n    });\n\n    if (!isTargetAvailable) return null;\n    return (\n      <a\n        className={clsx(withBaseName(), className)}\n        href={`#${targetId}`}\n        ref={ref}\n        target=\"_self\"\n        {...eventHandlers}\n        {...rest}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAAA,CACP,EAAE,SAAA,EAAW,QAAU,EAAA,QAAA,EAAU,OAAS,EAAA,MAAA,EAAQ,OAAS,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAChE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AAEjD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,SAAA,CAAU,OAAU,GAAA,YAAA,CAAa,QAAS,CAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AAEnE,MAAqB,oBAAA,CAAA,CAAC,CAAC,SAAA,CAAU,OAAO,CAAA;AAAA,KACvC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,IAAA,MAAM,gBAAgB,sBAAuB,CAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,EAAa,aAAa,QAAQ;AAAA,KACnC,CAAA;AAED,IAAI,IAAA,CAAC,mBAA0B,OAAA,IAAA;AAC/B,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,QAClB,GAAA;AAAA,QACA,MAAO,EAAA,OAAA;AAAA,QACN,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/slider/RangeSlider.js

@@ -50,10 +50,10 @@ const RangeSlider = forwardRef(
       disabled: formFieldDisabled
     } = useFormFieldProps();
     const disabled = formFieldDisabled || disabledProp;
-    const inputRefs = Array.from(
-      { length: 2 },
-      () => useRef(null)
-    );
+    const inputRefs = [
+      useRef(null),
+      useRef(null)
+    ];
     const value = clampRange(
       valueState,
       max,

package/dist-es/slider/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default [min, min + (max - min) / 2]\n   */\n  defaultValue?: [number, number];\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: [number, number]) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText,\n      accessibleMinText,\n      decimalPlaces = 2,\n      disabled: disabledProp = false,\n      format,\n      marks,\n      max = 100,\n      min = 0,\n      maxLabel,\n      minLabel,\n      onChange,\n      onChangeEnd,\n      restrictToMarks = false,\n      showTooltip = true,\n      step = 1,\n      stepMultiplier = 2,\n      value: valueProp,\n      defaultValue = [min, min + (max - min) / 2],\n      ...rest\n    },\n    ref,\n  ) {\n    const [valueState, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"RangeSlider\",\n      state: \"value\",\n    });\n    const lastValueRef = useRef<[number, number]>(valueState);\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n    const inputRefs = Array.from({ length: 2 }, () =>\n      useRef<HTMLInputElement>(null),\n    );\n    const value: [number, number] = clampRange(\n      valueState,\n      max,\n      min,\n      step,\n      decimalPlaces,\n      marks,\n      restrictToMarks,\n    );\n    const progressPercentageStart = calculatePercentage(value[0], max, min);\n    const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n    const handleInputChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      thumbIndex: number,\n    ) => {\n      const parsedValue = toFloat(event.target.value);\n      const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n      const haveValuesChanged =\n        values[0] !== lastValueRef.current[0] ||\n        values[1] !== lastValueRef.current[1];\n      if (haveValuesChanged) {\n        const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n        setValue(values as [number, number]);\n        onChange?.(event.nativeEvent, values as [number, number]);\n        onChangeEnd?.(event.nativeEvent, values as [number, number]);\n        lastValueRef.current = values;\n      }\n    };\n\n    const {\n      handleBlur,\n      handleFocus,\n      handleKeydownOnThumb,\n      handlePointerDownOnThumb,\n      handlePointerDownOnTrack,\n      isDragging,\n      isFocusVisible,\n      sliderRef,\n      thumbIndexState,\n      preventThumbOverlap,\n    } = useRangeSliderThumb({\n      decimalPlaces,\n      handleInputChange,\n      inputRefs,\n      marks,\n      min,\n      max,\n      step,\n      value,\n      onChange,\n      onChangeEnd,\n      restrictToMarks,\n      setValue,\n      stepMultiplier,\n    });\n\n    const thumbProps = {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText: accessibleMaxText,\n      accessibleMinText: accessibleMinText,\n      disabled: disabled,\n      format: format,\n      max: max,\n      maxLabel: maxLabel,\n      min: min,\n      minLabel: minLabel,\n      restrictToMarks: restrictToMarks,\n      showTooltip: showTooltip,\n      step: step,\n      stepMultiplier: stepMultiplier,\n      sliderValue: value,\n    };\n\n    return (\n      <SliderTrack\n        disabled={disabled}\n        format={format}\n        handlePointerDown={handlePointerDownOnTrack}\n        isDragging={isDragging}\n        isRange\n        marks={marks}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        progressPercentageRange={[\n          progressPercentageStart,\n          progressPercentageEnd,\n        ]}\n        ref={ref}\n        sliderRef={sliderRef}\n        {...rest}\n      >\n        <SliderThumb\n          index={0}\n          handleInputChange={(event) => handleInputChange(event, 0)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n          offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 0}\n          isFocusVisible={isFocusVisible && thumbIndexState === 0}\n          inputRef={inputRefs[0]}\n          onFocus={() => handleFocus(0)}\n          onBlur={() => handleBlur(0)}\n          {...thumbProps}\n        />\n        <SliderThumb\n          index={1}\n          handleInputChange={(event) => handleInputChange(event, 1)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n          offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 1}\n          isFocusVisible={isFocusVisible && thumbIndexState === 1}\n          inputRef={inputRefs[1]}\n          onFocus={() => handleFocus(1)}\n          onBlur={() => handleBlur(1)}\n          {...thumbProps}\n        />\n      </SliderTrack>\n    );\n  },\n);\n"],"names":["RangeSlider","values"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","sources":["../src/slider/RangeSlider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type HTMLAttributes,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useRangeSliderThumb } from \"./internal/useRangeSliderThumb\";\nimport { calculatePercentage, clampRange, toFloat } from \"./internal/utils\";\n\nexport interface RangeSliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default [min, min + (max - min) / 2]\n   */\n  defaultValue?: [number, number];\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: [number, number]) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: [number, number]) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: [number, number];\n}\n\nexport const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText,\n      accessibleMinText,\n      decimalPlaces = 2,\n      disabled: disabledProp = false,\n      format,\n      marks,\n      max = 100,\n      min = 0,\n      maxLabel,\n      minLabel,\n      onChange,\n      onChangeEnd,\n      restrictToMarks = false,\n      showTooltip = true,\n      step = 1,\n      stepMultiplier = 2,\n      value: valueProp,\n      defaultValue = [min, min + (max - min) / 2],\n      ...rest\n    },\n    ref,\n  ) {\n    const [valueState, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"RangeSlider\",\n      state: \"value\",\n    });\n    const lastValueRef = useRef<[number, number]>(valueState);\n\n    const {\n      a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n      disabled: formFieldDisabled,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled || disabledProp;\n    const inputRefs = [\n      useRef<HTMLInputElement>(null),\n      useRef<HTMLInputElement>(null),\n    ];\n    const value: [number, number] = clampRange(\n      valueState,\n      max,\n      min,\n      step,\n      decimalPlaces,\n      marks,\n      restrictToMarks,\n    );\n    const progressPercentageStart = calculatePercentage(value[0], max, min);\n    const progressPercentageEnd = calculatePercentage(value[1], max, min);\n\n    const handleInputChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      thumbIndex: number,\n    ) => {\n      const parsedValue = toFloat(event.target.value);\n      const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n      const haveValuesChanged =\n        values[0] !== lastValueRef.current[0] ||\n        values[1] !== lastValueRef.current[1];\n      if (haveValuesChanged) {\n        const values = preventThumbOverlap(parsedValue, value, thumbIndex);\n        setValue(values as [number, number]);\n        onChange?.(event.nativeEvent, values as [number, number]);\n        onChangeEnd?.(event.nativeEvent, values as [number, number]);\n        lastValueRef.current = values;\n      }\n    };\n\n    const {\n      handleBlur,\n      handleFocus,\n      handleKeydownOnThumb,\n      handlePointerDownOnThumb,\n      handlePointerDownOnTrack,\n      isDragging,\n      isFocusVisible,\n      sliderRef,\n      thumbIndexState,\n      preventThumbOverlap,\n    } = useRangeSliderThumb({\n      decimalPlaces,\n      handleInputChange,\n      inputRefs,\n      marks,\n      min,\n      max,\n      step,\n      value,\n      onChange,\n      onChangeEnd,\n      restrictToMarks,\n      setValue,\n      stepMultiplier,\n    });\n\n    const thumbProps = {\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": clsx(formFieldLabelledBy, ariaLabelledBy),\n      \"aria-valuemax\": max,\n      \"aria-valuemin\": min,\n      \"aria-valuetext\": ariaValueText,\n      accessibleMaxText: accessibleMaxText,\n      accessibleMinText: accessibleMinText,\n      disabled: disabled,\n      format: format,\n      max: max,\n      maxLabel: maxLabel,\n      min: min,\n      minLabel: minLabel,\n      restrictToMarks: restrictToMarks,\n      showTooltip: showTooltip,\n      step: step,\n      stepMultiplier: stepMultiplier,\n      sliderValue: value,\n    };\n\n    return (\n      <SliderTrack\n        disabled={disabled}\n        format={format}\n        handlePointerDown={handlePointerDownOnTrack}\n        isDragging={isDragging}\n        isRange\n        marks={marks}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        progressPercentageRange={[\n          progressPercentageStart,\n          progressPercentageEnd,\n        ]}\n        ref={ref}\n        sliderRef={sliderRef}\n        {...rest}\n      >\n        <SliderThumb\n          index={0}\n          handleInputChange={(event) => handleInputChange(event, 0)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 0)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 0)}\n          offsetPercentage={`${calculatePercentage(value[0], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 0}\n          isFocusVisible={isFocusVisible && thumbIndexState === 0}\n          inputRef={inputRefs[0]}\n          onFocus={() => handleFocus(0)}\n          onBlur={() => handleBlur(0)}\n          {...thumbProps}\n        />\n        <SliderThumb\n          index={1}\n          handleInputChange={(event) => handleInputChange(event, 1)}\n          handlePointerDown={(event) => handlePointerDownOnThumb(event, 1)}\n          handleKeydownOnThumb={(event) => handleKeydownOnThumb(event, 1)}\n          offsetPercentage={`${calculatePercentage(value[1], max, min)}%`}\n          trackDragging={isDragging && thumbIndexState === 1}\n          isFocusVisible={isFocusVisible && thumbIndexState === 1}\n          inputRef={inputRefs[1]}\n          onFocus={() => handleFocus(1)}\n          onBlur={() => handleBlur(1)}\n          {...thumbProps}\n        />\n      </SliderTrack>\n    );\n  },\n);\n"],"names":["RangeSlider","values"],"mappings":"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"}

package/dist-es/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   * @default false\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default min + (max - min) / 2,\n   */\n  defaultValue?: number;\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for the minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: number) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: number) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    accessibleMaxText,\n    accessibleMinText,\n    decimalPlaces = 2,\n    disabled: disabledProp = false,\n    format,\n    marks,\n    min = 0,\n    minLabel,\n    max = 100,\n    maxLabel,\n    onChange,\n    onChangeEnd,\n    restrictToMarks = false,\n    showTooltip = true,\n    step = 1,\n    stepMultiplier = 2,\n    value: valueProp,\n    defaultValue = min + (max - min) / 2,\n    ...rest\n  },\n  ref,\n) {\n  const [valueState, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"value\",\n  });\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const value = clamp(\n    valueState,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n  const progressPercentage = calculatePercentage(toFloat(value), max, min);\n  const lastValueRef = useRef<number>(value);\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const parsedValue = toFloat(event.target.value);\n    if (parsedValue !== lastValueRef.current) {\n      setValue(parsedValue);\n      onChange?.(event.nativeEvent, parsedValue);\n      onChangeEnd?.(event.nativeEvent, parsedValue);\n      lastValueRef.current = parsedValue;\n    }\n  };\n\n  const {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  } = useSliderThumb({\n    decimalPlaces,\n    handleInputChange,\n    inputRef,\n    marks,\n    min,\n    max,\n    step,\n    value,\n    onChange,\n    onChangeEnd,\n    restrictToMarks,\n    setValue,\n    stepMultiplier,\n  });\n\n  return (\n    <SliderTrack\n      disabled={disabled}\n      format={format}\n      handlePointerDown={handlePointerDownOnTrack}\n      isDragging={isDragging}\n      min={min}\n      minLabel={minLabel}\n      max={max}\n      maxLabel={maxLabel}\n      marks={marks}\n      progressPercentage={progressPercentage}\n      ref={ref}\n      sliderRef={sliderRef}\n      {...rest}\n    >\n      <SliderThumb\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuetext={ariaValueText}\n        accessibleMaxText={accessibleMaxText}\n        accessibleMinText={accessibleMinText}\n        disabled={disabled}\n        format={format}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        handleInputChange={handleInputChange}\n        handlePointerDown={handlePointerDownOnThumb}\n        handleKeydownOnThumb={handleKeydownOnThumb}\n        inputRef={inputRef}\n        isFocusVisible={isFocusVisible}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        offsetPercentage={`${progressPercentage}%`}\n        restrictToMarks={restrictToMarks}\n        sliderValue={value}\n        showTooltip={showTooltip}\n        step={step}\n        stepMultiplier={stepMultiplier}\n        trackDragging={isDragging}\n      />\n    </SliderTrack>\n  );\n});\n"],"names":["Slider"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  forwardRef,\n  type HTMLAttributes,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useControlled } from \"../utils\";\nimport { SliderThumb } from \"./internal/SliderThumb\";\nimport { SliderTrack } from \"./internal/SliderTrack\";\nimport { useSliderThumb } from \"./internal/useSliderThumb\";\nimport { calculatePercentage, clamp, toFloat } from \"./internal/utils\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Accessible text to announce maximum value label.\n   */\n  accessibleMaxText?: string;\n  /**\n   * Accessible text to announce minimum value label.\n   */\n  accessibleMinText?: string;\n  /**\n   * When minimum and maximum labels are defined, ensure\n   * they are confined within the boundary of the slider.\n   * @default false\n   */\n  constrainLabelPosition?: boolean;\n  /**\n   * The number of allowed decimal places\n   * @default 2\n   */\n  decimalPlaces?: number;\n  /**\n   * The default value. Use when the component is not controlled.\n   * @default min + (max - min) / 2,\n   */\n  defaultValue?: number;\n  /**\n   * Disable the slider.\n   */\n  disabled?: boolean;\n  /**\n   * A callback to format the display value in the tooltip, min and max labels\n   * and the `aria-valuetext` attribute.\n   */\n  format?: (value: number) => string | number;\n  /**\n   * Marks that are displayed under the track.\n   */\n  marks?: { label: string; value: number }[];\n  /**\n   * Maximum slider value.\n   * @default 10\n   */\n  max?: number;\n  /**\n   * Minimum slider value.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Label for maximum value.\n   */\n  maxLabel?: string;\n  /**\n   * Label for the minimum value.\n   */\n  minLabel?: string;\n  /**\n   * Callback called when slider value is changed.\n   * It provides a generic event and the current value of the slider.\n   */\n  onChange?: (event: Event, value: number) => void;\n  /**\n   * Callback called when the slider is stopped from being dragged or\n   * its value is changed from the keyboard. It provides a generic\n   * event and the current value of the slider.\n   */\n  onChangeEnd?: (event: Event, value: number) => void;\n  /**\n   * Restrict slider value to marks only. The step will be ignored.\n   */\n  restrictToMarks?: boolean;\n  /**\n   * Show visual ticks above the marks.\n   */\n  showTicks?: boolean;\n  /**\n   * Show the slider value in a tooltip when the thumb is hovered.\n   * @default true\n   */\n  showTooltip?: boolean;\n  /**\n   * Minimum interval the slider thumb can move.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Maximum interval the slider thumb can move when using PageUp and PageDown keys.\n   * @default 2\n   */\n  stepMultiplier?: number;\n  /**\n   * Value of the slider, to be used when in a controlled state.\n   */\n  value?: number;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    accessibleMaxText,\n    accessibleMinText,\n    decimalPlaces = 2,\n    disabled: disabledProp = false,\n    format,\n    marks,\n    min = 0,\n    minLabel,\n    max = 100,\n    maxLabel,\n    onChange,\n    onChangeEnd,\n    restrictToMarks = false,\n    showTooltip = true,\n    step = 1,\n    stepMultiplier = 2,\n    value: valueProp,\n    defaultValue = min + (max - min) / 2,\n    ...rest\n  },\n  ref,\n) {\n  const [valueState, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"value\",\n  });\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled || disabledProp;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const value = clamp(\n    valueState,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n  const progressPercentage = calculatePercentage(toFloat(value), max, min);\n  const lastValueRef = useRef<number>(value);\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const parsedValue = toFloat(event.target.value);\n    if (parsedValue !== lastValueRef.current) {\n      setValue(parsedValue);\n      onChange?.(event.nativeEvent, parsedValue);\n      onChangeEnd?.(event.nativeEvent, parsedValue);\n      lastValueRef.current = parsedValue;\n    }\n  };\n\n  const {\n    handleBlur,\n    handleFocus,\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    isFocusVisible,\n    sliderRef,\n  } = useSliderThumb({\n    decimalPlaces,\n    handleInputChange,\n    inputRef,\n    marks,\n    min,\n    max,\n    step,\n    value,\n    onChange,\n    onChangeEnd,\n    restrictToMarks,\n    setValue,\n    stepMultiplier,\n  });\n\n  return (\n    <SliderTrack\n      disabled={disabled}\n      format={format}\n      handlePointerDown={handlePointerDownOnTrack}\n      isDragging={isDragging}\n      min={min}\n      minLabel={minLabel}\n      max={max}\n      maxLabel={maxLabel}\n      marks={marks}\n      progressPercentage={progressPercentage}\n      ref={ref}\n      sliderRef={sliderRef}\n      {...rest}\n    >\n      <SliderThumb\n        aria-label={ariaLabel}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuetext={ariaValueText}\n        accessibleMaxText={accessibleMaxText}\n        accessibleMinText={accessibleMinText}\n        disabled={disabled}\n        format={format}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        handleInputChange={handleInputChange}\n        handlePointerDown={handlePointerDownOnThumb}\n        handleKeydownOnThumb={handleKeydownOnThumb}\n        inputRef={inputRef}\n        isFocusVisible={isFocusVisible}\n        min={min}\n        minLabel={minLabel}\n        max={max}\n        maxLabel={maxLabel}\n        offsetPercentage={`${progressPercentage}%`}\n        restrictToMarks={restrictToMarks}\n        sliderValue={value}\n        showTooltip={showTooltip}\n        step={step}\n        stepMultiplier={stepMultiplier}\n        trackDragging={isDragging}\n      />\n    </SliderTrack>\n  );\n});\n"],"names":["Slider"],"mappings":"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"}

package/dist-es/slider/internal/SliderTooltip.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSliderTooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  bottom: 50%;\n  left: 50%;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: absolute;\n  transform: translate(-50%, -50%);\n  text-align: var(--saltTooltip-textAlign, left);\n  user-select: none;\n  visibility: hidden;\n  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n  visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n  fill: var(--salt-container-primary-background);\n  height: var(--salt-size-icon);\n  left: 50%;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  transform: translateX(-50%);\n  stroke: var(--salt-container-primary-borderColor);\n  stroke-width: var(--salt-size-fixed-100);\n  width: var(--salt-size-icon);\n}\n\n.saltSliderTooltip-text {\n  white-space: nowrap;\n}\n";
+var css_248z = ".saltSliderTooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--saltTooltip-borderStyle, var(--salt-borderStyle-solid));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  bottom: 50%;\n  left: 50%;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: absolute;\n  transform: translate(-50%, -50%);\n  text-align: var(--saltTooltip-textAlign, left);\n  user-select: none;\n  visibility: hidden;\n  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n  visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n  fill: var(--salt-container-primary-background);\n  height: var(--salt-size-icon);\n  left: 50%;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  transform: translateX(-50%);\n  stroke: var(--salt-container-primary-borderColor);\n  stroke-width: var(--salt-size-fixed-100);\n  width: var(--salt-size-icon);\n}\n\n.saltSliderTooltip-text {\n  white-space: nowrap;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SliderTooltip.css.js.map

package/dist-es/slider/internal/SliderTooltip.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import clsx from 'clsx';
-import { Text } from '../../text/Text.js';
+import { clsx } from 'clsx';
 import '../../text/Code.js';
 import '../../text/Display.js';
 import '../../text/Headings.js';
 import '../../text/Label.js';
+import { Text } from '../../text/Text.js';
 import '../../text/TextAction.js';
 import '../../text/TextNotation.js';
 import 'react';

package/dist-es/slider/internal/SliderTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-primary-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["sliderTooltipCss"],"mappings":";;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAgB,GAAA,CAAC,EAAE,KAAA,EAAO,MAA+B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAY,EAAA,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAY,EAAA,MAAA;AAAA,YACZ,OAAQ,EAAA,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA,eACT;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,4BACC,IAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}
+{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-primary-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["sliderTooltipCss"],"mappings":";;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAgB,GAAA,CAAC,EAAE,KAAA,EAAO,MAA+B,KAAA;AACpE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAW,EAAA,IAAA;AAAA,MACX,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAY,EAAA,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAY,EAAA,MAAA;AAAA,YACZ,OAAQ,EAAA,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA,eACT;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAE,EAAA,0BAAA;AAAA,kBACF,MAAO,EAAA;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,4BACC,IAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,MAAM,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}

package/dist-es/slider/internal/SliderTrack.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSliderTrack {\n  --slider-track-background: var(--salt-track-borderColor);\n  --slider-track-fill: var(--salt-accent-borderColor);\n  --slider-progressPercentage: 0%;\n  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);\n  /* For range */\n  --slider-progressPercentageStart: 0%;\n  --slider-progressPercentageEnd: 0%;\n\n  display: flex;\n  touch-action: none;\n  width: 100%;\n}\n\n.saltSliderTrack.saltSliderTrack-withMarks {\n  /* To wrap the marks within the boundary box */\n  margin-bottom: calc(var(--salt-size-base) / 2);\n}\n\n.saltSliderTrack-disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-container {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  display: flex;\n  flex: 1;\n  height: var(--salt-size-selectable);\n  position: relative;\n  width: 100%;\n}\n\n.saltSliderTrack-disabled,\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  pointer-events: none;\n}\n\n.saltSliderTrack-rail {\n  display: flex;\n  flex: 100%;\n  height: var(--salt-size-bar);\n  justify-content: space-between;\n  position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n  content: \"\";\n  display: block;\n  height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n  background: var(--slider-track-fill);\n  border-top-left-radius: var(--salt-palette-corner-weaker);\n  border-bottom-left-radius: var(--salt-palette-corner-weaker);\n  width: calc(var(--slider-progressPercentage) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n  border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  border-top-right-radius: var(--salt-palette-corner-weaker);\n  border-bottom-right-radius: var(--salt-palette-corner-weaker);\n  width: calc(100% - var(--slider-progressPercentage) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n  border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n  background: var(--slider-track-background);\n  width: calc(var(--slider-progressPercentageStart) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n  background: var(--slider-track-fill);\n  height: 100%;\n  left: calc(var(--slider-progressPercentageStart) + var(--salt-size-fixed-300));\n  position: absolute;\n  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n  user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-wrapper {\n  cursor: var(--salt-cursor-grab-active);\n}\n\n.saltSliderTrack-disabled {\n  --slider-track-fill: var(--salt-accent-borderColor-disabled);\n  --slider-track-background: var(--salt-track-borderColor-disabled);\n}\n\n.saltSliderTrack-ticks {\n  top: calc(var(--salt-size-bar) + var(--slider-tick-height));\n  position: absolute;\n  width: 100%;\n}\n\n.saltSliderTrack-tick {\n  background: var(--slider-track-background);\n  height: var(--slider-tick-height);\n  position: absolute;\n  transform: translate(-50%);\n  width: var(--salt-size-fixed-200);\n}\n\n.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {\n  visibility: hidden;\n}\n\n.saltSliderTrack-tickSelected {\n  background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-tick:first-of-type {\n  transform: unset;\n}\n\n.saltSliderTrack-tick:last-of-type {\n  transform: translateX(-100%);\n}\n\n.saltSliderTrack-marks {\n  position: absolute;\n  user-select: none;\n  width: 100%;\n}\n\n.saltSliderTrack-markLabel {\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-label-fontFamily);\n  font-weight: var(--salt-text-label-fontWeight);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  transform: translateX(-50%);\n  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));\n  white-space: nowrap;\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {\n  transform: translateX(0%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {\n  transform: translateX(-100%);\n}\n\n/* Styles applied when slider and range slider are inside a form field */\n\n.saltFormField .saltSliderTrack.saltSliderTrack-withMark {\n  margin-bottom: 0;\n}\n\n.saltFormField .saltSliderTrack-container {\n  --saltFormField-label-width: 10%;\n\n  height: var(--salt-size-base);\n}\n\n.saltFormField .saltSliderTrack-markLabel {\n  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);\n}\n";
+var css_248z = ".saltSliderTrack {\n  --slider-track-background: var(--salt-sentiment-neutral-track);\n  --slider-track-fill: var(--salt-accent-borderColor);\n  --slider-progressPercentage: 0%;\n  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);\n  /* For range */\n  --slider-progressPercentageStart: 0%;\n  --slider-progressPercentageEnd: 0%;\n\n  display: flex;\n  touch-action: none;\n  width: 100%;\n}\n\n.saltSliderTrack.saltSliderTrack-withMarks {\n  /* To wrap the marks within the boundary box */\n  margin-bottom: calc(var(--salt-size-base) / 2);\n}\n\n.saltSliderTrack-disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-container {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  display: flex;\n  flex: 1;\n  height: var(--salt-size-selectable);\n  position: relative;\n  width: 100%;\n}\n\n.saltSliderTrack-disabled,\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  pointer-events: none;\n}\n\n.saltSliderTrack-rail {\n  display: flex;\n  flex: 100%;\n  height: var(--salt-size-bar);\n  justify-content: space-between;\n  position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n  content: \"\";\n  display: block;\n  height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n  background: var(--slider-track-fill);\n  border-top-left-radius: var(--salt-palette-corner-weaker);\n  border-bottom-left-radius: var(--salt-palette-corner-weaker);\n  width: calc(var(--slider-progressPercentage) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n  border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  border-top-right-radius: var(--salt-palette-corner-weaker);\n  border-bottom-right-radius: var(--salt-palette-corner-weaker);\n  width: calc(100% - var(--slider-progressPercentage) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n  border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n  background: var(--slider-track-background);\n  width: calc(var(--slider-progressPercentageStart) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n  background: var(--slider-track-fill);\n  height: 100%;\n  left: calc(var(--slider-progressPercentageStart) + var(--salt-size-fixed-300));\n  position: absolute;\n  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n  user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-wrapper {\n  cursor: var(--salt-cursor-grab-active);\n}\n\n.saltSliderTrack-disabled {\n  --slider-track-fill: var(--salt-accent-borderColor-disabled);\n  --slider-track-background: var(--salt-sentiment-neutral-track-disabled);\n}\n\n.saltSliderTrack-ticks {\n  top: calc(var(--salt-size-bar) + var(--slider-tick-height));\n  position: absolute;\n  width: 100%;\n}\n\n.saltSliderTrack-tick {\n  background: var(--slider-track-background);\n  height: var(--slider-tick-height);\n  position: absolute;\n  transform: translate(-50%);\n  width: var(--salt-size-fixed-200);\n}\n\n.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {\n  visibility: hidden;\n}\n\n.saltSliderTrack-tickSelected {\n  background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-tick:first-of-type {\n  transform: unset;\n}\n\n.saltSliderTrack-tick:last-of-type {\n  transform: translateX(-100%);\n}\n\n.saltSliderTrack-marks {\n  position: absolute;\n  user-select: none;\n  width: 100%;\n}\n\n.saltSliderTrack-markLabel {\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-label-fontFamily);\n  font-weight: var(--salt-text-label-fontWeight);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  transform: translateX(-50%);\n  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));\n  white-space: nowrap;\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {\n  transform: translateX(0%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {\n  transform: translateX(-100%);\n}\n\n/* Styles applied when slider and range slider are inside a form field */\n\n.saltFormField .saltSliderTrack.saltSliderTrack-withMark {\n  margin-bottom: 0;\n}\n\n.saltFormField .saltSliderTrack-container {\n  --saltFormField-label-width: 10%;\n\n  height: var(--salt-size-base);\n}\n\n.saltFormField .saltSliderTrack-markLabel {\n  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SliderTrack.css.js.map

package/dist-es/slider/internal/SliderTrack.js

@@ -3,11 +3,11 @@ import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { Text } from '../../text/Text.js';
 import '../../text/Code.js';
 import '../../text/Display.js';
 import '../../text/Headings.js';
 import '../../text/Label.js';
+import { Text } from '../../text/Text.js';
 import '../../text/TextAction.js';
 import '../../text/TextNotation.js';
 import { makePrefixer } from '../../utils/makePrefixer.js';

package/dist-es/slider/internal/SliderTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, type RefObject, forwardRef } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTrackCss from \"./SliderTrack.css\";\nimport { calculateMarkPosition, calculatePercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\ninterface SliderTrackProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  children: React.ReactNode;\n  constrainLabelPosition?: boolean;\n  disabled: boolean;\n  showTicks?: boolean;\n  format?: (value: number) => string | number;\n  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n  isDragging: boolean;\n  isRange?: boolean;\n  marks?: { label: string; value: number }[];\n  max: number;\n  maxLabel?: number | string;\n  min: number;\n  minLabel?: number | string;\n  progressPercentage?: number;\n  progressPercentageRange?: [number, number];\n  sliderRef: RefObject<HTMLDivElement>;\n}\n\nexport const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(\n  function SliderTrack(\n    {\n      children,\n      className,\n      constrainLabelPosition = false,\n      disabled,\n      showTicks,\n      format,\n      handlePointerDown,\n      isDragging,\n      isRange = false,\n      marks,\n      max,\n      maxLabel,\n      min,\n      minLabel,\n      progressPercentage = 0,\n      progressPercentageRange = [0, 0],\n      sliderRef,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-slider-track\",\n      css: sliderTrackCss,\n      window: targetWindow,\n    });\n\n    const checkIsMarkSelected = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage > progressPercentageRange[0] &&\n          markPercentage < progressPercentageRange[1]\n        );\n      }\n      return markPercentage < progressPercentage;\n    };\n\n    const checkIsMarkOverlapped = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage === progressPercentageRange[0] ||\n          markPercentage === progressPercentageRange[1]\n        );\n      }\n      return markPercentage === progressPercentage;\n    };\n\n    const hasMinTick = () => {\n      return marks?.some((mark) => mark.value === min) || false;\n    };\n\n    const hasMaxTick = () => {\n      return marks?.some((mark) => mark.value === max) || false;\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"dragging\")]: isDragging,\n          [withBaseName(\"range\")]: isRange,\n          [withBaseName(\"withMarks\")]: marks,\n          [withBaseName(\"constrainLabelPosition\")]: constrainLabelPosition,\n          [withBaseName(\"withTicks\")]: showTicks,\n        })}\n        data-testid=\"sliderTrack\"\n        ref={ref}\n        {...rest}\n      >\n        <div className={clsx(withBaseName(\"container\"))}>\n          {minLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"minLabel\")}\n              color=\"secondary\"\n              disabled={disabled}\n              styleAs=\"label\"\n            >\n              {minLabel || format?.(min)}\n            </Text>\n          )}\n          {/* Slider Track */}\n          <div\n            onPointerDown={handlePointerDown}\n            className={withBaseName(\"wrapper\")}\n          >\n            <div\n              className={clsx(withBaseName(\"rail\"), {\n                [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n                [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n              })}\n              ref={sliderRef}\n              style={\n                {\n                  ...(progressPercentage !== undefined && {\n                    \"--slider-progressPercentage\": `${progressPercentage}%`,\n                  }),\n                  ...(progressPercentageRange?.[0] !== undefined && {\n                    \"--slider-progressPercentageStart\": `${progressPercentageRange[0]}%`,\n                  }),\n                  ...(progressPercentageRange?.[1] !== undefined && {\n                    \"--slider-progressPercentageEnd\": `${progressPercentageRange[1]}%`,\n                  }),\n                } as React.CSSProperties\n              }\n            >\n              {isRange && <div className={clsx(withBaseName(\"fill\"))} />}\n              {children}\n            </div>\n            {/* Ticks */}\n            {marks && showTicks && (\n              <div className={withBaseName(\"ticks\")}>\n                {marks.map(({ value }) => (\n                  <span\n                    key={`${value}-tick`}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                    className={clsx(\n                      withBaseName(\"tick\"),\n                      {\n                        [withBaseName(\"tickSelected\")]:\n                          checkIsMarkSelected(value),\n                      },\n                      {\n                        [withBaseName(\"tickHidden\")]:\n                          checkIsMarkOverlapped(value),\n                      },\n                    )}\n                  />\n                ))}\n              </div>\n            )}\n            {/* Marks */}\n            {marks && (\n              <div className={withBaseName(\"marks\")}>\n                {marks.map(({ label, value }) => (\n                  <span\n                    data-testid=\"mark\"\n                    key={`${value}-mark`}\n                    className={withBaseName(\"markLabel\")}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                  >\n                    {label}\n                  </span>\n                ))}\n              </div>\n            )}\n          </div>\n          {maxLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"maxLabel\")}\n              color=\"secondary\"\n              disabled={disabled}\n              styleAs=\"label\"\n            >\n              {maxLabel || format?.(max)}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["SliderTrack","sliderTrackCss"],"mappings":"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"}
+{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type RefObject } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTrackCss from \"./SliderTrack.css\";\nimport { calculateMarkPosition, calculatePercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\ninterface SliderTrackProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  children: React.ReactNode;\n  constrainLabelPosition?: boolean;\n  disabled: boolean;\n  showTicks?: boolean;\n  format?: (value: number) => string | number;\n  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n  isDragging: boolean;\n  isRange?: boolean;\n  marks?: { label: string; value: number }[];\n  max: number;\n  maxLabel?: number | string;\n  min: number;\n  minLabel?: number | string;\n  progressPercentage?: number;\n  progressPercentageRange?: [number, number];\n  sliderRef: RefObject<HTMLDivElement>;\n}\n\nexport const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(\n  function SliderTrack(\n    {\n      children,\n      className,\n      constrainLabelPosition = false,\n      disabled,\n      showTicks,\n      format,\n      handlePointerDown,\n      isDragging,\n      isRange = false,\n      marks,\n      max,\n      maxLabel,\n      min,\n      minLabel,\n      progressPercentage = 0,\n      progressPercentageRange = [0, 0],\n      sliderRef,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-slider-track\",\n      css: sliderTrackCss,\n      window: targetWindow,\n    });\n\n    const checkIsMarkSelected = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage > progressPercentageRange[0] &&\n          markPercentage < progressPercentageRange[1]\n        );\n      }\n      return markPercentage < progressPercentage;\n    };\n\n    const checkIsMarkOverlapped = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage === progressPercentageRange[0] ||\n          markPercentage === progressPercentageRange[1]\n        );\n      }\n      return markPercentage === progressPercentage;\n    };\n\n    const hasMinTick = () => {\n      return marks?.some((mark) => mark.value === min) || false;\n    };\n\n    const hasMaxTick = () => {\n      return marks?.some((mark) => mark.value === max) || false;\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"dragging\")]: isDragging,\n          [withBaseName(\"range\")]: isRange,\n          [withBaseName(\"withMarks\")]: marks,\n          [withBaseName(\"constrainLabelPosition\")]: constrainLabelPosition,\n          [withBaseName(\"withTicks\")]: showTicks,\n        })}\n        data-testid=\"sliderTrack\"\n        ref={ref}\n        {...rest}\n      >\n        <div className={clsx(withBaseName(\"container\"))}>\n          {minLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"minLabel\")}\n              color=\"secondary\"\n              disabled={disabled}\n              styleAs=\"label\"\n            >\n              {minLabel || format?.(min)}\n            </Text>\n          )}\n          {/* Slider Track */}\n          <div\n            onPointerDown={handlePointerDown}\n            className={withBaseName(\"wrapper\")}\n          >\n            <div\n              className={clsx(withBaseName(\"rail\"), {\n                [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n                [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n              })}\n              ref={sliderRef}\n              style={\n                {\n                  ...(progressPercentage !== undefined && {\n                    \"--slider-progressPercentage\": `${progressPercentage}%`,\n                  }),\n                  ...(progressPercentageRange?.[0] !== undefined && {\n                    \"--slider-progressPercentageStart\": `${progressPercentageRange[0]}%`,\n                  }),\n                  ...(progressPercentageRange?.[1] !== undefined && {\n                    \"--slider-progressPercentageEnd\": `${progressPercentageRange[1]}%`,\n                  }),\n                } as React.CSSProperties\n              }\n            >\n              {isRange && <div className={clsx(withBaseName(\"fill\"))} />}\n              {children}\n            </div>\n            {/* Ticks */}\n            {marks && showTicks && (\n              <div className={withBaseName(\"ticks\")}>\n                {marks.map(({ value }) => (\n                  <span\n                    key={`${value}-tick`}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                    className={clsx(\n                      withBaseName(\"tick\"),\n                      {\n                        [withBaseName(\"tickSelected\")]:\n                          checkIsMarkSelected(value),\n                      },\n                      {\n                        [withBaseName(\"tickHidden\")]:\n                          checkIsMarkOverlapped(value),\n                      },\n                    )}\n                  />\n                ))}\n              </div>\n            )}\n            {/* Marks */}\n            {marks && (\n              <div className={withBaseName(\"marks\")}>\n                {marks.map(({ label, value }) => (\n                  <span\n                    data-testid=\"mark\"\n                    key={`${value}-mark`}\n                    className={withBaseName(\"markLabel\")}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                  >\n                    {label}\n                  </span>\n                ))}\n              </div>\n            )}\n          </div>\n          {maxLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"maxLabel\")}\n              color=\"secondary\"\n              disabled={disabled}\n              styleAs=\"label\"\n            >\n              {maxLabel || format?.(max)}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["SliderTrack","sliderTrackCss"],"mappings":"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"}

package/dist-es/spinner/Spinner.js

@@ -1,17 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useEffect } from 'react';
-import '../aria-announcer/AriaAnnouncerContext.js';
 import { useAriaAnnouncer } from '../aria-announcer/useAriaAnnouncer.js';
+import '../aria-announcer/AriaAnnouncerContext.js';
+import { useDensity } from '../salt-provider/SaltProvider.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useId } from '../utils/useId.js';
-import { useDensity } from '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
-import { SpinnerSVG } from './svgSpinners/SpinnerSVG.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
 import css_248z from './Spinner.css.js';
+import { SpinnerSVG } from './svgSpinners/SpinnerSVG.js';
 
 const SpinnerSizeValues = [
   "default",

package/dist-es/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useDensity } from \"../salt-provider\";\nimport spinnerCss from \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["Spinner","spinnerCss"],"mappings":";;;;;;;;;;;;;;;AAkBO,MAAM,iBAAoB,GAAA;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAa,GAAA,CAAC,IAClB,KAAA,IAAA,KAAS,YAAY,QAAW,GAAA,IAAA;AAElC,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAqCxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA;AAEtC,IAAA,MAAM,UAAU,UAAW,EAAA;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAkB,EAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,iBAAA,IAAI,IAAK,EAAA,EAAE,OAAQ,EAAA;AAErC,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAA,qBAAQ,IAAK,EAAA,EAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA;AAEF,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,SACjB,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAkB,EAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA;AACjC,OACF;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,IAAY,EAAA,OAAA,EAAkB,EAAQ,EAAA;AAAA;AAAA,KACpD;AAAA;AAGN;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["Spinner","spinnerCss"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,iBAAoB,GAAA;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAa,GAAA,CAAC,IAClB,KAAA,IAAA,KAAS,YAAY,QAAW,GAAA,IAAA;AAElC,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA;AAqCxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA;AAEtC,IAAA,MAAM,UAAU,UAAW,EAAA;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAkB,EAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,iBAAA,IAAI,IAAK,EAAA,EAAE,OAAQ,EAAA;AAErC,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAA,qBAAQ,IAAK,EAAA,EAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA;AAEF,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,SACjB,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAkB,EAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA;AACjC,OACF;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,IAAY,EAAA,OAAA,EAAkB,EAAQ,EAAA;AAAA;AAAA,KACpD;AAAA;AAGN;;;;"}

package/dist-es/split-layout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.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  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport { type PolymorphicComponentPropWithRef, makePrefixer } from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  function SplitLayout<T extends ElementType = \"div\">(\n    { as, endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["SplitLayout","splitLayoutCss"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,SAASA,YACP,CAAA,EAAE,EAAI,EAAA,OAAA,EAAS,WAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.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  type ReactNode,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport { makePrefixer, type PolymorphicComponentPropWithRef } from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  function SplitLayout<T extends ElementType = \"div\">(\n    { as, endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["SplitLayout","splitLayoutCss"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,SAASA,YACP,CAAA,EAAE,EAAI,EAAA,OAAA,EAAS,WAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/stack-layout/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.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 { useBreakpoint } from \"../breakpoints\";\nimport {\n  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  function StackLayout<T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["StackLayout","stackLayoutCss"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,SAASA,YACP,CAAA;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAU,sBAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,sBAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.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 { useBreakpoint } from \"../breakpoints\";\nimport {\n  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  function StackLayout<T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["StackLayout","stackLayoutCss"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAA,UAAA;AAAA,EAC/C,SAASA,YACP,CAAA;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAU,sBAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgB,sBAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}