@salt-ds/core 1.72.0 → 1.73.0

package/dist-cjs/border-layout/BorderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n       */\n      gap?: GridLayoutProps<T>[\"gap\"];\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n       */\n      columnGap?: GridLayoutProps<T>[\"columnGap\"];\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n       */\n      rowGap?: GridLayoutProps<T>[\"rowGap\"];\n      /**\n       * Border item components to be rendered.\n       */\n      children: 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?: ResponsiveProp<number | string>;\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?: ResponsiveProp<number | string>;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  function BorderLayout<T extends ElementType>(\n    props: unknown,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    // Props need to be typed this way due to polymorphic types not working with required props.\n    const { as, children, className, gap, style, ...rest } =\n      props as BorderLayoutProps<T>;\n\n    const borderAreas = Children.map(\n      children,\n      (child) => isValidElement(child) && child.props.position,\n    ) as BorderPosition[];\n\n    const hasNorth = borderAreas.includes(\"north\");\n    const hasWest = borderAreas.includes(\"west\");\n    const hasEast = borderAreas.includes(\"east\");\n    const hasSouth = borderAreas.includes(\"south\");\n\n    const middleColumns = [\n      hasWest ? \"west\" : undefined,\n      \"center\",\n      hasEast ? \"east\" : undefined,\n    ].filter(Boolean) as BorderPosition[];\n\n    const gridTemplateColumns = [\n      hasWest ? \"min-content\" : undefined,\n      \"1fr\",\n      hasEast ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateRows = [\n      hasNorth ? \"min-content\" : undefined,\n      \"1fr\",\n      hasSouth ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateSections = [\n      hasNorth\n        ? `\"${\"north \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n      `\"${middleColumns.join(\" \")}\"`,\n      hasSouth\n        ? `\"${\"south \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n    ].filter(Boolean);\n\n    const gridTemplateAreas = gridTemplateSections.join(\" \");\n\n    const hasMainSection = borderAreas.includes(\"center\");\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!hasMainSection) {\n          console.warn(\n            \"No main section has been found. A main section should be provided.\",\n          );\n        }\n      }\n    }, [hasMainSection]);\n\n    const borderLayoutStyles = {\n      ...style,\n      \"--gridLayout-gridTemplate\": gridTemplateAreas,\n      \"--gridLayout-areaColumns\": gridTemplateColumns,\n      \"--gridLayout-areaRows\": gridTemplateRows,\n    };\n\n    return (\n      <GridLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n        columns={numberOfColumns}\n        gap={gap || 0}\n        style={borderLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </GridLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","BorderLayout","Children","isValidElement","useEffect","jsx","GridLayout","clsx"],"mappings":"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"}
+{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n       */\n      gap?: GridLayoutProps<T>[\"gap\"];\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n       */\n      columnGap?: GridLayoutProps<T>[\"columnGap\"];\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n       */\n      rowGap?: GridLayoutProps<T>[\"rowGap\"];\n      /**\n       * Border item components to be rendered.\n       */\n      children: 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?: ResponsiveProp<number | string>;\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?: ResponsiveProp<number | string>;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  function BorderLayout<T extends ElementType>(\n    props: unknown,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    // Props need to be typed this way due to polymorphic types not working with required props.\n    const { as, children, className, gap, style, ...rest } =\n      props as BorderLayoutProps<T>;\n\n    const borderAreas = Children.map(\n      children,\n      (child) =>\n        isValidElement<{ position?: BorderPosition }>(child) &&\n        child.props.position,\n    ) as BorderPosition[];\n\n    const hasNorth = borderAreas.includes(\"north\");\n    const hasWest = borderAreas.includes(\"west\");\n    const hasEast = borderAreas.includes(\"east\");\n    const hasSouth = borderAreas.includes(\"south\");\n\n    const middleColumns = [\n      hasWest ? \"west\" : undefined,\n      \"center\",\n      hasEast ? \"east\" : undefined,\n    ].filter(Boolean) as BorderPosition[];\n\n    const gridTemplateColumns = [\n      hasWest ? \"min-content\" : undefined,\n      \"1fr\",\n      hasEast ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateRows = [\n      hasNorth ? \"min-content\" : undefined,\n      \"1fr\",\n      hasSouth ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateSections = [\n      hasNorth\n        ? `\"${\"north \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n      `\"${middleColumns.join(\" \")}\"`,\n      hasSouth\n        ? `\"${\"south \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n    ].filter(Boolean);\n\n    const gridTemplateAreas = gridTemplateSections.join(\" \");\n\n    const hasMainSection = borderAreas.includes(\"center\");\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!hasMainSection) {\n          console.warn(\n            \"No main section has been found. A main section should be provided.\",\n          );\n        }\n      }\n    }, [hasMainSection]);\n\n    const borderLayoutStyles = {\n      ...style,\n      \"--gridLayout-gridTemplate\": gridTemplateAreas,\n      \"--gridLayout-areaColumns\": gridTemplateColumns,\n      \"--gridLayout-areaRows\": gridTemplateRows,\n    };\n\n    return (\n      <GridLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n        columns={numberOfColumns}\n        gap={gap || 0}\n        style={borderLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </GridLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","BorderLayout","Children","isValidElement","useEffect","jsx","GridLayout","clsx"],"mappings":"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"}

package/dist-cjs/breadcrumbs/Breadcrumb.js

@@ -29,13 +29,12 @@ function isMissingBreadcrumbContent(children) {
 }
 let missingBreadcrumbContentWarningShown = false;
 function warnIfMissingBreadcrumbContent() {
-  if (process.env.NODE_ENV === "production" || missingBreadcrumbContentWarningShown) {
-    return;
+  if (process.env.NODE_ENV !== "production" && !missingBreadcrumbContentWarningShown) {
+    missingBreadcrumbContentWarningShown = true;
+    console.warn(
+      "Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
+    );
   }
-  missingBreadcrumbContentWarningShown = true;
-  console.warn(
-    "Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items."
-  );
 }
 const Breadcrumb = React.forwardRef(
   function Breadcrumb2(props, ref) {

package/dist-cjs/breadcrumbs/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n  BreadcrumbContext,\n  useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n  return (\n    (typeof children === \"string\" && children.trim() !== \"\") ||\n    typeof children === \"number\"\n  );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n  const childArray = Children.toArray(children);\n\n  return (\n    childArray.length === 0 ||\n    childArray.every(\n      (child) => typeof child === \"string\" && child.trim() === \"\",\n    )\n  );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n  if (\n    process.env.NODE_ENV === \"production\" ||\n    missingBreadcrumbContentWarningShown\n  ) {\n    return;\n  }\n\n  missingBreadcrumbContentWarningShown = true;\n  console.warn(\n    \"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items.\",\n  );\n}\n\nexport interface BreadcrumbProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbTrigger` and `BreadcrumbLabel`.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the breadcrumb represents the current page.\n   */\n  current?: boolean;\n  /**\n   * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n   * renders as a focusable link with `aria-current=\"page\"`.\n   */\n  href?: string;\n  /**\n   * Render prop to enable customization of the underlying link element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(props, ref) {\n    const {\n      children,\n      className,\n      current: currentProp,\n      href,\n      render,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbContext();\n    const current = parentContext?.current ?? Boolean(currentProp);\n    const onNavigate = parentContext?.onNavigate;\n    const placement = parentContext?.placement ?? \"trail\";\n    const showSeparator = parentContext?.showSeparator ?? false;\n    const triggerRef = parentContext?.triggerRef;\n    const resolvedRender = render ?? parentContext?.render;\n    const { LevelSeparatorIcon } = useIcon();\n    const missingContent = isMissingBreadcrumbContent(children);\n\n    if (missingContent) {\n      warnIfMissingBreadcrumbContent();\n    }\n\n    const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n      ? children\n      : undefined;\n    const content = missingContent ? null : primitiveChildren !== undefined ? (\n      <BreadcrumbTrigger>\n        <BreadcrumbLabel>{primitiveChildren}</BreadcrumbLabel>\n      </BreadcrumbTrigger>\n    ) : (\n      children\n    );\n    const context = {\n      current,\n      href,\n      onNavigate,\n      placement,\n      render: resolvedRender,\n      showSeparator,\n      triggerRef,\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          placement === \"disclosure\"\n            ? withBreadcrumbsBaseName(\"disclosureListItem\")\n            : withBaseName(),\n          className,\n        )}\n        {...rest}\n      >\n        <BreadcrumbContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbContext","useIcon","jsx","BreadcrumbTrigger","BreadcrumbLabel","clsx","jsxs","BreadcrumbContext"],"mappings":"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"}
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType } from \"../utils\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { BreadcrumbLabel } from \"./BreadcrumbLabel\";\nimport { BreadcrumbTrigger } from \"./BreadcrumbTrigger\";\nimport {\n  BreadcrumbContext,\n  useBreadcrumbContext,\n} from \"./internal/BreadcrumbContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n  return (\n    (typeof children === \"string\" && children.trim() !== \"\") ||\n    typeof children === \"number\"\n  );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n  const childArray = Children.toArray(children);\n\n  return (\n    childArray.length === 0 ||\n    childArray.every(\n      (child) => typeof child === \"string\" && child.trim() === \"\",\n    )\n  );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !missingBreadcrumbContentWarningShown\n  ) {\n    missingBreadcrumbContentWarningShown = true;\n    console.warn(\n      \"Breadcrumb requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbTrigger with BreadcrumbLabel for composed items.\",\n    );\n  }\n}\n\nexport interface BreadcrumbProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbTrigger` and `BreadcrumbLabel`.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the breadcrumb represents the current page.\n   */\n  current?: boolean;\n  /**\n   * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n   * renders as a focusable link with `aria-current=\"page\"`.\n   */\n  href?: string;\n  /**\n   * Render prop to enable customization of the underlying link element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(props, ref) {\n    const {\n      children,\n      className,\n      current: currentProp,\n      href,\n      render,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbContext();\n    const current = parentContext?.current ?? Boolean(currentProp);\n    const onNavigate = parentContext?.onNavigate;\n    const placement = parentContext?.placement ?? \"trail\";\n    const showSeparator = parentContext?.showSeparator ?? false;\n    const triggerRef = parentContext?.triggerRef;\n    const resolvedRender = render ?? parentContext?.render;\n    const { LevelSeparatorIcon } = useIcon();\n    const missingContent = isMissingBreadcrumbContent(children);\n\n    if (missingContent) {\n      warnIfMissingBreadcrumbContent();\n    }\n\n    const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n      ? children\n      : undefined;\n    const content = missingContent ? null : primitiveChildren !== undefined ? (\n      <BreadcrumbTrigger>\n        <BreadcrumbLabel>{primitiveChildren}</BreadcrumbLabel>\n      </BreadcrumbTrigger>\n    ) : (\n      children\n    );\n    const context = {\n      current,\n      href,\n      onNavigate,\n      placement,\n      render: resolvedRender,\n      showSeparator,\n      triggerRef,\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          placement === \"disclosure\"\n            ? withBreadcrumbsBaseName(\"disclosureListItem\")\n            : withBaseName(),\n          className,\n        )}\n        {...rest}\n      >\n        <BreadcrumbContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbContext","useIcon","jsx","BreadcrumbTrigger","BreadcrumbLabel","clsx","jsxs","BreadcrumbContext"],"mappings":"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"}

package/dist-cjs/button/Button.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltButton {\n  --button-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n@media (hover: hover) {\n  /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n  .saltButton:hover {\n    background: var(--saltButton-background-hover, var(--button-background-hover));\n    color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n    border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n    cursor: var(--salt-cursor-hover);\n  }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n  cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n  opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n  --button-text-color: var(--salt-actionable-accented-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n  --button-background: var(--salt-actionable-accented-bold-background);\n  --button-background-active: var(--salt-actionable-accented-bold-background-active);\n  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-accented-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background-hover);\n  --button-background-active: var(--salt-actionable-accented-background-active);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --button-background: var(--salt-actionable-accented-subtle-background);\n  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n  --button-text-color: var(--salt-actionable-accented-background);\n  --button-text-color-hover: var(--salt-actionable-accented-background);\n  --button-text-color-active: var(--salt-actionable-accented-background);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background);\n  --button-background-active: var(--salt-actionable-accented-background);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n  --button-text-color: var(--salt-actionable-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n  --button-background: var(--salt-actionable-bold-background);\n  --button-background-hover: var(--salt-actionable-bold-background-hover);\n  --button-background-active: var(--salt-actionable-bold-background-active);\n  --button-borderColor: var(--salt-actionable-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-foreground);\n  --button-text-color-hover: var(--salt-actionable-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-foreground-active);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background-hover);\n  --button-background-active: var(--salt-actionable-background-active);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --button-background: var(--salt-actionable-subtle-background);\n  --button-background-hover: var(--salt-actionable-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n  --button-text-color: var(--salt-actionable-background);\n  --button-text-color-hover: var(--salt-actionable-background);\n  --button-text-color-active: var(--salt-actionable-background);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background);\n  --button-background-active: var(--salt-actionable-background);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor);\n  --button-borderColor-active: var(--salt-actionable-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n  --button-text-color: var(--salt-actionable-negative-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n  --button-background: var(--salt-actionable-negative-bold-background);\n  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n  --button-background-active: var(--salt-actionable-negative-bold-background-active);\n  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-negative-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background-hover);\n  --button-background-active: var(--salt-actionable-negative-background-active);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --button-background: var(--salt-actionable-negative-subtle-background);\n  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n  --button-text-color: var(--salt-actionable-negative-background);\n  --button-text-color-hover: var(--salt-actionable-negative-background);\n  --button-text-color-active: var(--salt-actionable-negative-background);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background);\n  --button-background-active: var(--salt-actionable-negative-background);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n  --button-text-color: var(--salt-actionable-positive-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n  --button-background: var(--salt-actionable-positive-bold-background);\n  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n  --button-background-active: var(--salt-actionable-positive-bold-background-active);\n  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-positive-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background-hover);\n  --button-background-active: var(--salt-actionable-positive-background-active);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --button-background: var(--salt-actionable-positive-subtle-background);\n  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n  --button-text-color: var(--salt-actionable-positive-background);\n  --button-text-color-hover: var(--salt-actionable-positive-background);\n  --button-text-color-active: var(--salt-actionable-positive-background);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background);\n  --button-background-active: var(--salt-actionable-positive-background);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n  --button-text-color: var(--salt-actionable-caution-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n  --button-background: var(--salt-actionable-caution-bold-background);\n  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n  --button-background-active: var(--salt-actionable-caution-bold-background-active);\n  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-caution-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background-hover);\n  --button-background-active: var(--salt-actionable-caution-background-active);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --button-background: var(--salt-actionable-caution-subtle-background);\n  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n  --button-text-color: var(--salt-actionable-caution-background);\n  --button-text-color-hover: var(--salt-actionable-caution-background);\n  --button-text-color-active: var(--salt-actionable-caution-background);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background);\n  --button-background-active: var(--salt-actionable-caution-background);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n  font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.saltButton-sr-only {\n  position: fixed;\n  top: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n";
+var css_248z = ".saltButton {\n  --button-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n@media (hover: hover) {\n  /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n  .saltButton:hover {\n    background: var(--saltButton-background-hover, var(--button-background-hover));\n    color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n    border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n    cursor: var(--salt-cursor-hover);\n  }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active,\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n  cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton.saltButton-disabled,\n.saltButton.saltButton-disabled:active,\n.saltButton.saltButton-disabled:focus-visible,\n.saltButton.saltButton-disabled:focus-visible:active,\n.saltButton.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n  opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n  --button-text-color: var(--salt-actionable-accented-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n  --button-background: var(--salt-actionable-accented-bold-background);\n  --button-background-active: var(--salt-actionable-accented-bold-background-active);\n  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-accented-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background-hover);\n  --button-background-active: var(--salt-actionable-accented-background-active);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --button-background: var(--salt-actionable-accented-subtle-background);\n  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n  --button-text-color: var(--salt-actionable-accented-background);\n  --button-text-color-hover: var(--salt-actionable-accented-background);\n  --button-text-color-active: var(--salt-actionable-accented-background);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background);\n  --button-background-active: var(--salt-actionable-accented-background);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n  --button-text-color: var(--salt-actionable-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n  --button-background: var(--salt-actionable-bold-background);\n  --button-background-hover: var(--salt-actionable-bold-background-hover);\n  --button-background-active: var(--salt-actionable-bold-background-active);\n  --button-borderColor: var(--salt-actionable-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-foreground);\n  --button-text-color-hover: var(--salt-actionable-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-foreground-active);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background-hover);\n  --button-background-active: var(--salt-actionable-background-active);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --button-background: var(--salt-actionable-subtle-background);\n  --button-background-hover: var(--salt-actionable-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n  --button-text-color: var(--salt-actionable-background);\n  --button-text-color-hover: var(--salt-actionable-background);\n  --button-text-color-active: var(--salt-actionable-background);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background);\n  --button-background-active: var(--salt-actionable-background);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor);\n  --button-borderColor-active: var(--salt-actionable-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n  --button-text-color: var(--salt-actionable-negative-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n  --button-background: var(--salt-actionable-negative-bold-background);\n  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n  --button-background-active: var(--salt-actionable-negative-bold-background-active);\n  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-negative-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background-hover);\n  --button-background-active: var(--salt-actionable-negative-background-active);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --button-background: var(--salt-actionable-negative-subtle-background);\n  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n  --button-text-color: var(--salt-actionable-negative-background);\n  --button-text-color-hover: var(--salt-actionable-negative-background);\n  --button-text-color-active: var(--salt-actionable-negative-background);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background);\n  --button-background-active: var(--salt-actionable-negative-background);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n  --button-text-color: var(--salt-actionable-positive-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n  --button-background: var(--salt-actionable-positive-bold-background);\n  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n  --button-background-active: var(--salt-actionable-positive-bold-background-active);\n  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-positive-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background-hover);\n  --button-background-active: var(--salt-actionable-positive-background-active);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --button-background: var(--salt-actionable-positive-subtle-background);\n  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n  --button-text-color: var(--salt-actionable-positive-background);\n  --button-text-color-hover: var(--salt-actionable-positive-background);\n  --button-text-color-active: var(--salt-actionable-positive-background);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background);\n  --button-background-active: var(--salt-actionable-positive-background);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n  --button-text-color: var(--salt-actionable-caution-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n  --button-background: var(--salt-actionable-caution-bold-background);\n  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n  --button-background-active: var(--salt-actionable-caution-bold-background-active);\n  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-caution-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background-hover);\n  --button-background-active: var(--salt-actionable-caution-background-active);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --button-background: var(--salt-actionable-caution-subtle-background);\n  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n  --button-text-color: var(--salt-actionable-caution-background);\n  --button-text-color-hover: var(--salt-actionable-caution-background);\n  --button-text-color-active: var(--salt-actionable-caution-background);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background);\n  --button-background-active: var(--salt-actionable-caution-background);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n  cursor: var(--salt-cursor-pending);\n}\n\n/* Lets a nested Text with styleAs=\"inherit\" use the action weights */\n.saltButton {\n  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltButton strong,\n.saltButton b {\n  font-weight: var(--salt-text-action-fontWeight-bolder);\n}\n\n/* Deprecated, use a nested Text with styleAs=\"inherit\" and fontWeight=\"lighter\" instead */\n.saltButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltButton-spinner {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.saltButton-sr-only {\n  position: fixed;\n  top: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Button.css.js.map

package/dist-cjs/card/CardContent.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCardContent {\n  padding: var(--saltCardContent-padding, var(--salt-spacing-200));\n  box-sizing: border-box;\n}\n\n.saltCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltCard-sectioned > .saltCardContent + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent + .saltCardContent {\n  padding-top: 0;\n}\n\n.saltCard-sectioned > .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent {\n  flex: 1 1 auto;\n}\n\n@supports selector(:has(*)) {\n  .saltCard > .saltCardHeader + .saltCardContent,\n  .saltCard > .saltCardContent + .saltCardContent,\n  .saltLinkCard > .saltCardHeader + .saltCardContent,\n  .saltLinkCard > .saltCardContent + .saltCardContent,\n  .saltInteractableCard > .saltCardHeader + .saltCardContent,\n  .saltInteractableCard > .saltCardContent + .saltCardContent {\n    padding-top: 0;\n  }\n\n  .saltCard > .saltCardContent,\n  .saltLinkCard > .saltCardContent,\n  .saltInteractableCard > .saltCardContent {\n    flex: 1 1 auto;\n  }\n}\n";
+var css_248z = ".saltCardContent {\n  padding: var(--saltCardContent-padding, var(--salt-spacing-200));\n  box-sizing: border-box;\n}\n\n/* Collapse vertical padding when rendered as a closed CollapsiblePanel */\n.saltCardContent.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.saltCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltCard-sectioned > .saltCardContent + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardHeader + .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent + .saltCardContent {\n  padding-top: 0;\n}\n\n.saltCard-sectioned > .saltCardContent,\n.saltLinkCard-sectioned > .saltCardContent,\n.saltInteractableCard-sectioned > .saltCardContent {\n  flex: 1 1 auto;\n}\n\n@supports selector(:has(*)) {\n  .saltCard > .saltCardHeader + .saltCardContent,\n  .saltCard > .saltCardContent + .saltCardContent,\n  .saltLinkCard > .saltCardHeader + .saltCardContent,\n  .saltLinkCard > .saltCardContent + .saltCardContent,\n  .saltInteractableCard > .saltCardHeader + .saltCardContent,\n  .saltInteractableCard > .saltCardContent + .saltCardContent {\n    padding-top: 0;\n  }\n\n  .saltCard > .saltCardContent,\n  .saltLinkCard > .saltCardContent,\n  .saltInteractableCard > .saltCardContent {\n    flex: 1 1 auto;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CardContent.css.js.map

package/dist-cjs/card/hasCardSection.js

@@ -6,11 +6,19 @@ var CardFooter = require('./CardFooter.js');
 var CardHeader = require('./CardHeader.js');
 
 const cardSectionTypes = [CardHeader.CardHeader, CardContent.CardContent, CardFooter.CardFooter];
-function hasCardSection(children) {
-  return React.Children.toArray(children).some(
-    (child) => React.isValidElement(child) && cardSectionTypes.some((sectionType) => child.type === sectionType)
+function isCardSection(child) {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+  const render = child.props.render;
+  const renderedChild = React.isValidElement(render) ? render : child;
+  return cardSectionTypes.some(
+    (sectionType) => renderedChild.type === sectionType
   );
 }
+function hasCardSection(children) {
+  return React.Children.toArray(children).some(isCardSection);
+}
 
 exports.hasCardSection = hasCardSection;
 //# sourceMappingURL=hasCardSection.js.map

package/dist-cjs/card/hasCardSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"hasCardSection.js","sources":["../src/card/hasCardSection.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { CardContent } from \"./CardContent\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardHeader } from \"./CardHeader\";\n\nconst cardSectionTypes = [CardHeader, CardContent, CardFooter];\n\nexport function hasCardSection(children: ReactNode): boolean {\n  return Children.toArray(children).some(\n    (child) =>\n      isValidElement(child) &&\n      cardSectionTypes.some((sectionType) => child.type === sectionType),\n  );\n}\n"],"names":["CardHeader","CardContent","CardFooter","Children","isValidElement"],"mappings":";;;;;;;AAKA,MAAM,gBAAA,GAAmB,CAACA,qBAAA,EAAYC,uBAAA,EAAaC,qBAAU,CAAA;AAEtD,SAAS,eAAe,QAAA,EAA8B;AAC3D,EAAA,OAAOC,cAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA;AAAA,IAChC,CAAC,KAAA,KACCC,oBAAA,CAAe,KAAK,CAAA,IACpB,gBAAA,CAAiB,IAAA,CAAK,CAAC,WAAA,KAAgB,KAAA,CAAM,IAAA,KAAS,WAAW;AAAA,GACrE;AACF;;;;"}
+{"version":3,"file":"hasCardSection.js","sources":["../src/card/hasCardSection.ts"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from \"react\";\nimport { CardContent } from \"./CardContent\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardHeader } from \"./CardHeader\";\n\nconst cardSectionTypes = [CardHeader, CardContent, CardFooter];\n\nfunction isCardSection(child: ReactNode): boolean {\n  if (!isValidElement(child)) {\n    return false;\n  }\n\n  // Salt's render prop replaces a component's root without adding a wrapper.\n  const render = (child.props as { render?: ReactNode }).render;\n  const renderedChild = isValidElement(render) ? render : child;\n\n  return cardSectionTypes.some(\n    (sectionType) => renderedChild.type === sectionType,\n  );\n}\n\nexport function hasCardSection(children: ReactNode): boolean {\n  return Children.toArray(children).some(isCardSection);\n}\n"],"names":["CardHeader","CardContent","CardFooter","isValidElement","Children"],"mappings":";;;;;;;AAKA,MAAM,gBAAA,GAAmB,CAACA,qBAAA,EAAYC,uBAAA,EAAaC,qBAAU,CAAA;AAE7D,SAAS,cAAc,KAAA,EAA2B;AAChD,EAAA,IAAI,CAACC,oBAAA,CAAe,KAAK,CAAA,EAAG;AAC1B,IAAA,OAAO,KAAA;AAAA,EACT;AAGA,EAAA,MAAM,MAAA,GAAU,MAAM,KAAA,CAAiC,MAAA;AACvD,EAAA,MAAM,aAAA,GAAgBA,oBAAA,CAAe,MAAM,CAAA,GAAI,MAAA,GAAS,KAAA;AAExD,EAAA,OAAO,gBAAA,CAAiB,IAAA;AAAA,IACtB,CAAC,WAAA,KAAgB,aAAA,CAAc,IAAA,KAAS;AAAA,GAC1C;AACF;AAEO,SAAS,eAAe,QAAA,EAA8B;AAC3D,EAAA,OAAOC,cAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,KAAK,aAAa,CAAA;AACtD;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * @deprecated since 1.8.0-rc.2. Use `validationStatus` instead.\n   */\n  error?: boolean;\n  indeterminate?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n  readOnly,\n}: CheckboxIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"indeterminate\")]: indeterminate,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className,\n      )}\n    >\n      {checked && !indeterminate && !readOnly && (\n        <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n      )}\n      {checked && !indeterminate && readOnly && (\n        <CheckmarkIcon className={withBaseName(\"icon\")} />\n      )}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","checkboxIconCss","jsxs","clsx","CheckmarkSolidIcon","CheckmarkIcon"],"mappings":";;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAsC;AACpC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKC,cAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,mCAC5BC,wBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,mCAC3BC,mBAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * @deprecated since 1.8.0-rc.2. Use `validationStatus` instead.\n   */\n  error?: boolean;\n  indeterminate?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n  readOnly,\n}: CheckboxIconProps): ReactElement => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"indeterminate\")]: indeterminate,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className,\n      )}\n    >\n      {checked && !indeterminate && !readOnly && (\n        <CheckmarkSolidIcon className={withBaseName(\"icon\")} />\n      )}\n      {checked && !indeterminate && readOnly && (\n        <CheckmarkIcon className={withBaseName(\"icon\")} />\n      )}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","checkboxIconCss","jsxs","clsx","CheckmarkSolidIcon","CheckmarkIcon"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,KAAuC;AACrC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,oBAAA;AAAA,IACR,GAAA,EAAKC,cAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAWC,SAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,UACzB,CAAC,YAAA,CAAa,gBAAA,IAAoB,EAAE,CAAC,GAAG,gBAAA;AAAA,UACxC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAA;AAAA,UACjC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,IAAW,CAAC,iBAAiB,CAAC,QAAA,mCAC5BC,wBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,QAEtD,OAAA,IAAW,CAAC,aAAA,IAAiB,QAAA,mCAC3BC,mBAAA,EAAA,EAAc,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG;AAAA;AAAA;AAAA,GAEpD;AAEJ;;;;"}

package/dist-cjs/collapsible/CollapsiblePanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n";
+var css_248z = ".saltCollapsiblePanel {\n  display: grid;\n  transition:\n    grid-template-rows var(--salt-duration-perceptible) ease-in-out,\n    opacity var(--salt-duration-perceptible) ease-in-out,\n    visibility var(--salt-duration-perceptible) ease-in-out,\n    padding-top var(--salt-duration-perceptible) ease-in-out,\n    padding-bottom var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCollapsiblePanel[aria-hidden=\"true\"] {\n  grid-template-rows: 0fr;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.saltCollapsiblePanel {\n  grid-template-rows: 1fr;\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltCollapsiblePanel-inner {\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltCollapsiblePanel {\n    transition: none;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CollapsiblePanel.css.js.map

package/dist-cjs/collapsible/CollapsiblePanel.js

@@ -6,6 +6,7 @@ var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
 var makePrefixer = require('../utils/makePrefixer.js');
+var renderProps = require('../utils/renderProps.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
@@ -14,33 +15,32 @@ var CollapsibleContext = require('./CollapsibleContext.js');
 var CollapsiblePanel$1 = require('./CollapsiblePanel.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltCollapsiblePanel");
-const CollapsiblePanel = React.forwardRef((props, ref) => {
-  const { children, className, id: idProp, ...rest } = props;
+const CollapsiblePanel = React.forwardRef(function CollapsiblePanel2(props, ref) {
+  const { children, className, id: idProp, render, ...rest } = props;
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-collapsible-panel",
     css: CollapsiblePanel$1,
     window: targetWindow
   });
-  const id = useId.useId(idProp);
+  const renderId = React.isValidElement(render) ? render.props.id : void 0;
+  const id = useId.useId(renderId ?? idProp);
   const { open, setPanelId } = CollapsibleContext.useCollapsibleContext();
   React.useEffect(() => {
     if (id) {
       setPanelId == null ? void 0 : setPanelId(id);
     }
   }, [id, setPanelId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: clsx.clsx(withBaseName(), className),
-      id,
-      "aria-hidden": !open ? "true" : void 0,
-      hidden: !open,
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("inner"), children })
-    }
-  );
+  return renderProps.renderProps("div", {
+    className: clsx.clsx(withBaseName(), className),
+    id,
+    "aria-hidden": !open ? "true" : void 0,
+    hidden: !open,
+    ref,
+    ...rest,
+    render,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("inner"), children })
+  });
 });
 
 exports.CollapsiblePanel = CollapsiblePanel;

package/dist-cjs/collapsible/CollapsiblePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { makePrefixer, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps\n  extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n  HTMLDivElement,\n  CollapsiblePanelProps\n>((props, ref) => {\n  const { children, className, id: idProp, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      id={id}\n      aria-hidden={!open ? \"true\" : undefined}\n      hidden={!open}\n      ref={ref}\n      {...rest}\n    >\n      <div className={withBaseName(\"inner\")}>{children}</div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","collapsiblePanelCss","useId","useCollapsibleContext","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,IAAI,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAErD,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAIC,wCAAA,EAAsB;AAEnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA;AAAA,MACA,aAAA,EAAa,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC9B,QAAQ,CAAC,IAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CollapsiblePanel.js","sources":["../src/collapsible/CollapsiblePanel.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  isValidElement,\n  type ReactElement,\n  useEffect,\n} from \"react\";\nimport { makePrefixer, renderProps, useId } from \"../utils\";\n\nimport { useCollapsibleContext } from \"./CollapsibleContext\";\nimport collapsiblePanelCss from \"./CollapsiblePanel.css\";\n\nexport interface CollapsiblePanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Element used to customize the panel's root, e.g. `<CardContent />`.\n   * Props are merged onto this element, and its own props take precedence.\n   * Don't set `children`, `hidden` or `aria-hidden` on it, as they replace the\n   * panel's content and open state.\n   */\n  render?: ReactElement;\n}\n\nconst withBaseName = makePrefixer(\"saltCollapsiblePanel\");\n\nexport const CollapsiblePanel = forwardRef<\n  HTMLDivElement,\n  CollapsiblePanelProps\n>(function CollapsiblePanel(props, ref) {\n  const { children, className, id: idProp, render, ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-collapsible-panel\",\n    css: collapsiblePanelCss,\n    window: targetWindow,\n  });\n\n  const renderId = isValidElement<{ id?: string }>(render)\n    ? render.props.id\n    : undefined;\n  // The render element's id wins when props are merged, so prefer it here\n  // to keep aria-controls in sync.\n  const id = useId(renderId ?? idProp);\n  const { open, setPanelId } = useCollapsibleContext();\n\n  useEffect(() => {\n    if (id) {\n      setPanelId?.(id);\n    }\n  }, [id, setPanelId]);\n\n  return renderProps(\"div\", {\n    className: clsx(withBaseName(), className),\n    id,\n    \"aria-hidden\": !open ? \"true\" : undefined,\n    hidden: !open,\n    ref,\n    ...rest,\n    render,\n    children: <div className={withBaseName(\"inner\")}>{children}</div>,\n  });\n});\n"],"names":["makePrefixer","forwardRef","CollapsiblePanel","useWindow","useComponentCssInjection","collapsiblePanelCss","isValidElement","useId","useCollapsibleContext","useEffect","renderProps","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,0BAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,QAAQ,MAAA,EAAQ,GAAG,MAAK,GAAI,KAAA;AAE7D,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,WAAWC,oBAAA,CAAgC,MAAM,CAAA,GACnD,MAAA,CAAO,MAAM,EAAA,GACb,MAAA;AAGJ,EAAA,MAAM,EAAA,GAAKC,WAAA,CAAM,QAAA,IAAY,MAAM,CAAA;AACnC,EAAA,MAAM,EAAE,IAAA,EAAM,UAAA,EAAW,GAAIC,wCAAA,EAAsB;AAEnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAa,EAAA,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,EAAA,EAAI,UAAU,CAAC,CAAA;AAEnB,EAAA,OAAOC,wBAAY,KAAA,EAAO;AAAA,IACxB,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,IACzC,EAAA;AAAA,IACA,aAAA,EAAe,CAAC,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,IAChC,QAAQ,CAAC,IAAA;AAAA,IACT,GAAA;AAAA,IACA,GAAG,IAAA;AAAA,IACH,MAAA;AAAA,IACA,0BAAUC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,OAAO,GAAI,QAAA,EAAS;AAAA,GAC5D,CAAA;AACH,CAAC;;;;"}

package/dist-cjs/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  getComboBoxNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n  extends UseComboBoxProps<Item>,\n    Omit<PillInputProps, \"onPillRemove\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected when the tab key is pressed.\n   */\n  selectOnTab?: boolean;\n  /**\n   * Props to pass to ComboBox's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltComboBox\",\n    props,\n  );\n  const {\n    children,\n    disabled: disabledProp,\n    endAdornment: endAdornmentProp,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputRef: inputRefProp,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    OverlayProps,\n    ...rest\n  } = finalProps;\n\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n  const shouldAutoSelectRef = useRef(false);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    setListRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const hasValidChildren =\n    Children.toArray(children).filter(Boolean).length > 0;\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && hasValidChildren,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            );\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.repeat) {\n      shouldAutoSelectRef.current = false;\n    }\n\n    if (readOnly || isModifiedListControlNavigationKey(event)) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    // With no list shown, leave these keys to move the caret or scroll the page.\n    if (\n      (!openState || !hasValidChildren) &&\n      isListControlNavigationKey(event.key)\n    ) {\n      return;\n    }\n\n    const activeOption = activeState;\n\n    // Unlike arrow keys, PageUp/PageDown scroll the nearest scroll container.\n    if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined =\n      getComboBoxNavigationTarget(event.key, activeOption, {\n        getFirstOption,\n        getLastOption,\n        getOptionAfter,\n        getOptionBefore,\n        getOptionPageAbove,\n        getOptionPageBelow,\n      });\n\n    switch (event.key) {\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    if (event.currentTarget === inputRef.current) {\n      setFocusedState(true);\n    } else {\n      setActive(undefined);\n    }\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n      shouldAutoSelectRef.current = false;\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Clean active item if no text is present.\n    if (value === \"\") {\n      setActive(undefined);\n    } else {\n      shouldAutoSelectRef.current = true;\n    }\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      shouldAutoSelectRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (openState && value) {\n      queueMicrotask(() => {\n        const newOption = getFirstOption();\n        if (newOption && shouldAutoSelectRef.current) {\n          setActive(newOption.data);\n        }\n      });\n    }\n  }, [value, setActive, openState, getFirstOption]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    let newActive: ReturnType<typeof getFirstOption>;\n\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    if (newActive) {\n      setActive(newActive?.data);\n    }\n  }, [openState]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, floating);\n\n  const showOptionsButton = (\n    <Button\n      aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n      aria-label=\"Show options\"\n      aria-expanded={openState}\n      aria-controls={openState ? listId : undefined}\n      aria-haspopup=\"listbox\"\n      disabled={disabled}\n      appearance=\"transparent\"\n      onClick={handleButtonClick}\n      onFocus={handleButtonFocus}\n      tabIndex={-1}\n    >\n      {openState ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n\n  // avoid render empty fragment, or empty div appear in PillInput\n  const endAdornment =\n    !readOnly && hasValidChildren ? (\n      <>\n        {endAdornmentProp}\n        {showOptionsButton}\n      </>\n    ) : (\n      endAdornmentProp\n    );\n\n  return (\n    <ListControlProvider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={endAdornment}\n        onChange={handleChange}\n        // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n        role={readOnly ? \"textbox\" : \"combobox\"}\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          \"aria-readonly\": readOnly ? \"true\" : undefined,\n          \"aria-expanded\": !readOnly ? openState : undefined,\n          \"aria-controls\": openState && !readOnly ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={handleInputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={(openState || focusedState) && !readOnly && hasValidChildren}\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n          ...OverlayProps,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => JSX.Element;\n"],"names":["makePrefixer","forwardRef","ComboBox","useClassNameInjection","defaultValueToString","useIcon","useFormFieldProps","useRef","useForkRef","useComboBox","_a","Children","useFloatingUI","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","isModifiedListControlNavigationKey","isListControlNavigationKey","getComboBoxNavigationTarget","value","useIsomorphicLayoutEffect","useEffect","useId","jsx","Button","clsx","jsxs","Fragment","ListControlProvider","PillInput","OptionList"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","sources":["../src/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useClassNameInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  getComboBoxNavigationTarget,\n  isListControlNavigationKey,\n  isModifiedListControlNavigationKey,\n  type OptionAndElement,\n} from \"../list-control/ListControlNavigationKeys\";\nimport { ListControlProvider } from \"../list-control/ListControlProvider\";\nimport { defaultValueToString } from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { PillInput, type PillInputProps } from \"../pill-input\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  type UseFloatingUIProps,\n  useFloatingUI,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { type UseComboBoxProps, useComboBox } from \"./useComboBox\";\n\nexport interface ComboBoxProps<Item = string>\n  extends UseComboBoxProps<Item>,\n    Omit<PillInputProps, \"onPillRemove\"> {\n  /**\n   * The options to display in the combo box.\n   */\n  children?: ReactNode;\n  /**\n   * If true, options will be selected when the tab key is pressed.\n   */\n  selectOnTab?: boolean;\n  /**\n   * Props to pass to ComboBox's overlay.\n   */\n  OverlayProps?: Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"id\"> &\n    DataAttributes;\n}\n\nconst withBaseName = makePrefixer(\"saltComboBox\");\n\nexport const ComboBox = forwardRef(function ComboBox<Item>(\n  props: ComboBoxProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { className, props: finalProps } = useClassNameInjection(\n    \"saltComboBox\",\n    props,\n  );\n  const {\n    children,\n    disabled: disabledProp,\n    endAdornment: endAdornmentProp,\n    readOnly: readOnlyProp,\n    multiselect,\n    selectOnTab = !multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    onOpenChange,\n    onChange,\n    open,\n    inputRef: inputRefProp,\n    inputProps: inputPropsProp,\n    variant = \"primary\",\n    onKeyDown,\n    onFocus,\n    onBlur,\n    value,\n    defaultValue,\n    valueToString = defaultValueToString,\n    truncate,\n    bordered = false,\n    OverlayProps,\n    ...rest\n  } = finalProps;\n\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const {\n    a11yProps: { \"aria-labelledby\": formFieldLabelledBy } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n  const shouldAutoSelectRef = useRef(false);\n\n  const listControl = useComboBox<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    value,\n    defaultValue,\n    disabled,\n    readOnly,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getOptionsMatching,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    clear,\n    focusVisibleState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n    setListRef,\n    valueState,\n    setValueState,\n    removePill,\n  } = listControl;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (reason === \"focus\") {\n      setFocusedState(newOpen);\n    }\n\n    if (reason === \"focus\" && !newOpen) {\n      setFocusVisibleState(false);\n    }\n\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n\n    if (newOpen) {\n      inputRef.current?.focus();\n    }\n  };\n\n  const hasValidChildren =\n    Children.toArray(children).filter(Boolean).length > 0;\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && hasValidChildren,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      strategy: \"fixed\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            elements.floating.style.setProperty(\n              \"--overlay-minWidth\",\n              `${rects.reference.width}px`,\n            );\n            elements.floating.style.setProperty(\n              \"--overlay-maxHeight\",\n              `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            );\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(reference, ref);\n\n  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      event.stopPropagation();\n      setFocusVisibleState(false);\n      setOpen(!openState, \"manual\");\n    }\n  };\n\n  const handleButtonFocus = () => {\n    inputRef.current?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.repeat) {\n      shouldAutoSelectRef.current = false;\n    }\n\n    if (readOnly || isModifiedListControlNavigationKey(event)) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    // With no list shown, leave these keys to move the caret or scroll the page.\n    if (\n      (!openState || !hasValidChildren) &&\n      isListControlNavigationKey(event.key)\n    ) {\n      return;\n    }\n\n    const activeOption = activeState;\n\n    // Unlike arrow keys, PageUp/PageDown scroll the nearest scroll container.\n    if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n      event.preventDefault();\n    }\n\n    const newActive: OptionAndElement<Item> | undefined =\n      getComboBoxNavigationTarget(event.key, activeOption, {\n        getFirstOption,\n        getLastOption,\n        getOptionAfter,\n        getOptionBefore,\n        getOptionPageAbove,\n        getOptionPageBelow,\n      });\n\n    switch (event.key) {\n      case \"Enter\":\n        if (openState && activeState?.disabled) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        select(event, activeState);\n\n        if (!multiselect) {\n          event.preventDefault();\n        }\n\n        break;\n      case \"Tab\":\n        if (\n          openState &&\n          selectOnTab &&\n          activeState &&\n          !activeState?.disabled &&\n          !selectedState.includes(activeState?.value)\n        ) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive) {\n      setFocusVisibleState(true);\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    if (event.currentTarget === inputRef.current) {\n      setFocusedState(true);\n    } else {\n      setActive(undefined);\n    }\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    event.persist();\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n      shouldAutoSelectRef.current = false;\n    }\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    if (value === \"\" && !multiselect) {\n      clear(event);\n    }\n\n    setValueState(value);\n\n    // Clean active item if no text is present.\n    if (value === \"\") {\n      setActive(undefined);\n    } else {\n      shouldAutoSelectRef.current = true;\n    }\n\n    onChange?.(event);\n  };\n\n  const handlePillRemove = (event: SyntheticEvent, index: number) => {\n    event.stopPropagation();\n    const removed = selectedState[index];\n    removePill(event, removed);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseLeave = () => {\n    setActive(undefined);\n  };\n\n  const handleFocusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (value) {\n      shouldAutoSelectRef.current = true;\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (openState && value) {\n      queueMicrotask(() => {\n        const newOption = getFirstOption();\n        if (newOption && shouldAutoSelectRef.current) {\n          setActive(newOption.data);\n        }\n      });\n    }\n  }, [value, setActive, openState, getFirstOption]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    let newActive: ReturnType<typeof getFirstOption>;\n\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n        setFocusVisibleState(true);\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n        setFocusVisibleState(true);\n      }\n    }\n\n    if (newActive) {\n      setActive(newActive?.data);\n    }\n  }, [openState]);\n\n  const buttonId = useId();\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(setListRef, floating);\n\n  const showOptionsButton = (\n    <Button\n      aria-labelledby={clsx(buttonId, formFieldLabelledBy)}\n      aria-label=\"Show options\"\n      aria-expanded={openState}\n      aria-controls={openState ? listId : undefined}\n      aria-haspopup=\"listbox\"\n      disabled={disabled}\n      appearance=\"transparent\"\n      onClick={handleButtonClick}\n      onFocus={handleButtonFocus}\n      tabIndex={-1}\n    >\n      {openState ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n\n  // avoid render empty fragment, or empty div appear in PillInput\n  const endAdornment =\n    !readOnly && hasValidChildren ? (\n      <>\n        {endAdornmentProp}\n        {showOptionsButton}\n      </>\n    ) : (\n      endAdornmentProp\n    );\n\n  return (\n    <ListControlProvider value={listControl}>\n      <PillInput\n        // Ensures that the field is focused when you don't directly click on the input.\n        tabIndex={!disabled ? -1 : undefined}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"focused\")]: focusedState,\n            [withBaseName(\"focusVisible\")]: focusVisibleState,\n          },\n          className,\n        )}\n        endAdornment={endAdornment}\n        onChange={handleChange}\n        // Workaround to have readonly conveyed by screen readers (https://github.com/jpmorganchase/salt-ds/issues/4586)\n        role={readOnly ? \"textbox\" : \"combobox\"}\n        disabled={disabled}\n        readOnly={readOnly}\n        inputProps={{\n          \"aria-readonly\": readOnly ? \"true\" : undefined,\n          \"aria-expanded\": !readOnly ? openState : undefined,\n          \"aria-controls\": openState && !readOnly ? listId : undefined,\n          onKeyDown: handleKeyDown,\n          ...inputPropsProp,\n        }}\n        aria-activedescendant={activeState?.id}\n        variant={variant}\n        inputRef={handleInputRef}\n        value={valueState}\n        ref={handleRef}\n        bordered={bordered}\n        {...getReferenceProps({\n          onBlur: handleBlur,\n          onFocus: handleFocus,\n          ...rest,\n        })}\n        pills={\n          multiselect ? selectedState.map((item) => valueToString(item)) : []\n        }\n        truncate={truncate && !focusedState && !openState}\n        onPillRemove={handlePillRemove}\n        hidePillClose={!focusedState || readOnly}\n        emptyReadOnlyMarker={\n          readOnly && selectedState.length > 0 ? \"\" : undefined\n        }\n      />\n      <OptionList\n        aria-multiselectable={multiselect}\n        open={(openState || focusedState) && !readOnly && hasValidChildren}\n        collapsed={!openState}\n        ref={handleListRef}\n        id={listId}\n        tabIndex={-1}\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusInput,\n          onClick: handleFocusInput,\n          onMouseLeave: handleListMouseLeave,\n          ...OverlayProps,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n      >\n        {children}\n      </OptionList>\n    </ListControlProvider>\n  );\n}) as <Item = string>(\n  props: ComboBoxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["makePrefixer","forwardRef","ComboBox","useClassNameInjection","defaultValueToString","useIcon","useFormFieldProps","useRef","useForkRef","useComboBox","_a","Children","useFloatingUI","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","isModifiedListControlNavigationKey","isListControlNavigationKey","getComboBoxNavigationTarget","value","useIsomorphicLayoutEffect","useEffect","useId","jsx","Button","clsx","jsxs","Fragment","ListControlProvider","PillInput","OptionList"],"mappings":"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"}

package/dist-cjs/dialog/DialogHeader.js

@@ -8,6 +8,8 @@ var React = require('react');
 var StatusIndicator = require('../status-indicator/StatusIndicator.js');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 var Headings = require('../text/Headings.js');
 require('../text/Label.js');
 var Text = require('../text/Text.js');

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

@@ -1 +1 @@
-{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      description,\n      disableAccent,\n      actions,\n      header,\n      preheader,\n      status: statusProp,\n      ...rest\n    } = props;\n    const {\n      status: statusContext,\n      setId: setHeaderId,\n      id: contextHeaderId,\n    } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n    const headerId = useId(contextHeaderId);\n\n    useEffect(() => {\n      if (headerId) {\n        setHeaderId?.(headerId);\n      }\n    }, [headerId, setHeaderId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <div className={withBaseName(\"container\")}>\n          <H2 id={headerId} className={withBaseName(\"header\")}>\n            {preheader && <Text color=\"primary\">{preheader}</Text>}\n            {header}\n          </H2>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DialogHeader","useDialogContext","useWindow","useComponentCssInjection","dialogHeaderCss","useId","useEffect","jsxs","clsx","jsx","StatusIndicator","H2","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACFC,8BAAA,EAAiB;AAErB,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAWC,YAAM,eAAe,CAAA;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAUC,cAAA,CAACC,mCAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5CH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAACI,eAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAaF,cAAA,CAACG,SAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,mCACEA,SAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACCH,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"DialogHeader.js","sources":["../src/dialog/DialogHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n} from \"react\";\nimport { StatusIndicator, type ValidationStatus } from \"../status-indicator\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { useDialogContext } from \"./DialogContext\";\nimport dialogHeaderCss from \"./DialogHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogHeader\");\n\nexport interface DialogHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Dialog\n   */\n  header: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader(props, ref) {\n    const {\n      className,\n      description,\n      disableAccent,\n      actions,\n      header,\n      preheader,\n      status: statusProp,\n      ...rest\n    } = props;\n    const {\n      status: statusContext,\n      setId: setHeaderId,\n      id: contextHeaderId,\n    } = useDialogContext();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog-header\",\n      css: dialogHeaderCss,\n      window: targetWindow,\n    });\n\n    const status = statusProp ?? statusContext;\n    const headerId = useId(contextHeaderId);\n\n    useEffect(() => {\n      if (headerId) {\n        setHeaderId?.(headerId);\n      }\n    }, [headerId, setHeaderId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent && !status,\n            [withBaseName(status ?? \"\")]: !!status,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {status && <StatusIndicator status={status} />}\n        <div className={withBaseName(\"container\")}>\n          <H2 id={headerId} className={withBaseName(\"header\")}>\n            {preheader && <Text color=\"primary\">{preheader}</Text>}\n            {header}\n          </H2>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DialogHeader","useDialogContext","useWindow","useComponentCssInjection","dialogHeaderCss","useId","useEffect","jsxs","clsx","jsx","StatusIndicator","H2","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AA4B7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,GAAG;AAAA,KACL,GAAI,KAAA;AACJ,IAAA,MAAM;AAAA,MACJ,MAAA,EAAQ,aAAA;AAAA,MACR,KAAA,EAAO,WAAA;AAAA,MACP,EAAA,EAAI;AAAA,QACFC,8BAAA,EAAiB;AAErB,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAS,UAAA,IAAc,aAAA;AAC7B,IAAA,MAAM,QAAA,GAAWC,YAAM,eAAe,CAAA;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,QAAA,CAAA;AAAA,MAChB;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,WAAW,CAAC,CAAA;AAE1B,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,MAAA;AAAA,YACjD,CAAC,YAAA,CAAa,MAAA,IAAU,EAAE,CAAC,GAAG,CAAC,CAAC;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBAAUC,cAAA,CAACC,mCAAgB,MAAA,EAAgB,CAAA;AAAA,0BAC5CH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAACI,eAAG,EAAA,EAAI,QAAA,EAAU,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAC/C,QAAA,EAAA;AAAA,cAAA,SAAA,oBAAaF,cAAA,CAACG,SAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,cAC9C;AAAA,aAAA,EACH,CAAA;AAAA,YACC,WAAA,mCACEA,SAAA,EAAA,EAAK,KAAA,EAAM,aAAY,SAAA,EAAW,YAAA,CAAa,aAAa,CAAA,EAC1D,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,2BACCH,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,kBAAkB,GAAI,QAAA,EAAA,OAAA,EAAQ;AAAA;AAAA;AAAA,KAE/D;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/drawer/DrawerHeader.js

@@ -7,6 +7,8 @@ var clsx = require('clsx');
 var React = require('react');
 require('../text/Code.js');
 require('../text/Display.js');
+require('../text/Editorial.js');
+require('../text/Eyebrow.js');
 var Headings = require('../text/Headings.js');
 require('../text/Label.js');
 var Text = require('../text/Text.js');

package/dist-cjs/drawer/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\n   */\n  header?: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { setHeaderId, setDescriptionId } = useDrawerContext();\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DrawerHeader","useWindow","useComponentCssInjection","drawerHeaderCss","useDrawerContext","useId","useIsomorphicLayoutEffect","jsxs","clsx","H2","Text","jsx"],"mappings":"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"}
+{"version":3,"file":"DrawerHeader.js","sources":["../src/drawer/DrawerHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport drawerHeaderCss from \"./DrawerHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerHeader\");\n\nexport interface DrawerHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Hides the accent bar in the Drawer Header. Defaults to `false`.\n   */\n  disableAccent?: boolean;\n  /**\n   * Displays the header at the top of the Drawer\n   */\n  header?: ReactNode;\n  /**\n   * Displays the preheader just above the header\n   **/\n  preheader?: ReactNode;\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n}\n\nexport const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  function DrawerHeader(props, ref) {\n    const {\n      actions,\n      className,\n      description,\n      disableAccent,\n      header,\n      preheader,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-header\",\n      css: drawerHeaderCss,\n      window: targetWindow,\n    });\n\n    const { setHeaderId, setDescriptionId } = useDrawerContext();\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"withAccent\")]: !disableAccent,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} className={withBaseName(\"header\")}>\n              {preheader && (\n                <Text as=\"span\" color=\"primary\">\n                  {preheader}\n                </Text>\n              )}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DrawerHeader","useWindow","useComponentCssInjection","drawerHeaderCss","useDrawerContext","useId","useIsomorphicLayoutEffect","jsxs","clsx","H2","Text","jsx"],"mappings":"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"}