@salt-ds/core 1.69.0 → 1.71.0

package/dist-cjs/avatar/Avatar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-entity {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
+var css_248z = "/* TODO: Remove hardcoded values - unitless notation-fontSize / size-base because Firefox can't do unit division  */\n.salt-density-high {\n  --avatar-fontSize-ratio: calc(8 / 20);\n}\n\n.salt-density-medium {\n  --avatar-fontSize-ratio: calc(10 / 28);\n}\n\n.salt-density-low {\n  --avatar-fontSize-ratio: calc(12 / 36);\n}\n\n.salt-density-touch {\n  --avatar-fontSize-ratio: calc(14 / 44);\n}\n\n.salt-density-mobile {\n  --avatar-fontSize-ratio: calc(12 / 44);\n}\n\n/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base);\n  --avatar-direct-fontSize: calc(var(--saltAvatar-size) * var(--avatar-fontSize-ratio) / var(--avatar-size-multiplier));\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--avatar-direct-fontSize, var(--salt-text-notation-fontSize)));\n  --avatar-container-size: var(--saltAvatar-size, calc(var(--avatar-base-size) * var(--avatar-size-multiplier)));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  color: var(--saltAvatar-foreground, var(--salt-content-bold-foreground));\n  background: var(--saltAvatar-background, var(--avatar-background));\n  font-size: var(--avatar-fontSize);\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  font-family: var(--salt-text-notation-fontFamily);\n  font-weight: var(--salt-text-notation-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n  border: none;\n  padding: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  text-decoration: none;\n  position: relative;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  user-select: none;\n}\n\n.saltAvatar-entity {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltAvatar-accent {\n  --avatar-background: var(--salt-sentiment-accent-background);\n}\n\n.saltAvatar-category-1 {\n  --avatar-background: var(--salt-category-1-bold-background);\n}\n.saltAvatar-category-2 {\n  --avatar-background: var(--salt-category-2-bold-background);\n}\n\n.saltAvatar-category-3 {\n  --avatar-background: var(--salt-category-3-bold-background);\n}\n\n.saltAvatar-category-4 {\n  --avatar-background: var(--salt-category-4-bold-background);\n}\n\n.saltAvatar-category-5 {\n  --avatar-background: var(--salt-category-5-bold-background);\n}\n\n.saltAvatar-category-6 {\n  --avatar-background: var(--salt-category-6-bold-background);\n}\n\n.saltAvatar-category-7 {\n  --avatar-background: var(--salt-category-7-bold-background);\n}\n\n.saltAvatar-category-8 {\n  --avatar-background: var(--salt-category-8-bold-background);\n}\n\n.saltAvatar-category-9 {\n  --avatar-background: var(--salt-category-9-bold-background);\n}\n\n.saltAvatar-category-10 {\n  --avatar-background: var(--salt-category-10-bold-background);\n}\n.saltAvatar-category-11 {\n  --avatar-background: var(--salt-category-11-bold-background);\n}\n.saltAvatar-category-12 {\n  --avatar-background: var(--salt-category-12-bold-background);\n}\n.saltAvatar-category-13 {\n  --avatar-background: var(--salt-category-13-bold-background);\n}\n.saltAvatar-category-14 {\n  --avatar-background: var(--salt-category-14-bold-background);\n}\n.saltAvatar-category-15 {\n  --avatar-background: var(--salt-category-15-bold-background);\n}\n.saltAvatar-category-16 {\n  --avatar-background: var(--salt-category-16-bold-background);\n}\n.saltAvatar-category-17 {\n  --avatar-background: var(--salt-category-17-bold-background);\n}\n.saltAvatar-category-18 {\n  --avatar-background: var(--salt-category-18-bold-background);\n}\n.saltAvatar-category-19 {\n  --avatar-background: var(--salt-category-19-bold-background);\n}\n.saltAvatar-category-20 {\n  --avatar-background: var(--salt-category-20-bold-background);\n}\n\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  --avatar-background: none;\n}\n\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n\n.saltAvatar:focus-visible {\n  outline-offset: var(--salt-spacing-fixed-100);\n}\n\nbutton.saltAvatar,\na.saltAvatar {\n  cursor: var(--salt-cursor-hover);\n}\n\nbutton.saltAvatar:disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\nbutton.saltAvatar::after,\na.saltAvatar::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background: transparent;\n}\n\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"menu\"]::after,\n.saltAvatar[aria-expanded=\"true\"][aria-haspopup=\"dialog\"]::after {\n  background: var(--salt-overlayable-background-hover);\n}\n\n@media (hover: hover) {\n  button.saltAvatar:hover::after,\n  a.saltAvatar:hover::after {\n    background: var(--salt-overlayable-background-hover);\n  }\n\n  button.saltAvatar:disabled:hover::after {\n    background: transparent;\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Avatar.css.js.map

package/dist-cjs/avatar/Avatar.js

@@ -48,8 +48,8 @@ const Avatar = React.forwardRef(function Avatar2({
   });
   let children;
   const style = {
-    ...styleProp,
-    "--saltAvatar-size-multiplier": `${size}`
+    "--saltAvatar-size-multiplier": `${size}`,
+    ...styleProp
   };
   const status = useAvatarImage.useAvatarImage({ src });
   const hasImgNotFailing = status === "loaded";

package/dist-cjs/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.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 HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to the semantic `UserIcon` when\n   * `kind` is `\"person\"`, and the semantic `EntityIcon` when `kind`\n   * is `\"entity\"`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * What the Avatar depicts, which determines its default shape and fallback icon:\n   * - `\"person\"` renders a circular Avatar (default).\n   * - `\"entity\"` renders a square Avatar.\n   *\n   * @default \"person\"\n   */\n  kind?: \"person\" | \"entity\";\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n  /**\n   * Render prop to enable customization of the avatar root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\ninterface AvatarActionProps extends ComponentPropsWithoutRef<\"div\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(\n  function AvatarAction(props, ref) {\n    return renderProps(\"div\", { ...props, ref });\n  },\n);\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    kind = \"person\",\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon, EntityIcon } = useIcon();\n\n  const DefaultFallbackIcon = kind === \"entity\" ? EntityIcon : UserIcon;\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <DefaultFallbackIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    ...styleProp,\n    \"--saltAvatar-size-multiplier\": `${size}`,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? render\n      ? {\n          \"aria-label\": name,\n        }\n      : {\n          role: \"img\",\n          \"aria-label\": name,\n        }\n    : {};\n\n  return (\n    <AvatarAction\n      ref={ref}\n      render={render}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        withBaseName(kind),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </AvatarAction>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AvatarAction","renderProps","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.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 HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, type RenderPropsType, renderProps } from \"../utils\";\nimport avatarCss from \"./Avatar.css\";\nimport { useAvatarImage } from \"./useAvatarImage\";\n\nexport type NameToInitials = (name?: string) => string;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The name that Avatar represents.\n   */\n  name?: string;\n  /**\n   * Defines the function that gets initials. Default is capital first letter of each separate word in name.\n   * If a function is not passed or returns undefined, Avatar will default to Icon.\n   */\n  nameToInitials?: NameToInitials;\n  /**\n   * Image src of Avatar.\n   */\n  src?: string;\n  /**\n   * Multiplier for the base avatar.\n   */\n  size?: number;\n  /**\n   * Icon to be used as a default item. Defaults to the semantic `UserIcon` when\n   * `kind` is `\"person\"`, and the semantic `EntityIcon` when `kind`\n   * is `\"entity\"`.\n   */\n  fallbackIcon?: ReactNode;\n  /**\n   * What the Avatar depicts, which determines its default shape and fallback icon:\n   * - `\"person\"` renders a circular Avatar (default).\n   * - `\"entity\"` renders a square Avatar.\n   *\n   * @default \"person\"\n   */\n  kind?: \"person\" | \"entity\";\n  /**\n   * Changes Avatar's color.\n   */\n  color?:\n    | \"accent\"\n    | \"category-1\"\n    | \"category-2\"\n    | \"category-3\"\n    | \"category-4\"\n    | \"category-5\"\n    | \"category-6\"\n    | \"category-7\"\n    | \"category-8\"\n    | \"category-9\"\n    | \"category-10\"\n    | \"category-11\"\n    | \"category-12\"\n    | \"category-13\"\n    | \"category-14\"\n    | \"category-15\"\n    | \"category-16\"\n    | \"category-17\"\n    | \"category-18\"\n    | \"category-19\"\n    | \"category-20\";\n  /**\n   * Render prop to enable customization of the avatar root element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst withBaseName = makePrefixer(\"saltAvatar\");\nconst DEFAULT_AVATAR_SIZE = 2; // medium\n\ninterface AvatarActionProps extends ComponentPropsWithoutRef<\"div\"> {\n  render?: RenderPropsType[\"render\"];\n}\n\nconst AvatarAction = forwardRef<HTMLDivElement, AvatarActionProps>(\n  function AvatarAction(props, ref) {\n    return renderProps(\"div\", { ...props, ref });\n  },\n);\n\nconst defaultNameToInitials = (name?: string) =>\n  name\n    ?.split(\" \")\n    .slice(0, 2)\n    .map((n) => n[0])\n    .join(\"\")\n    .toUpperCase();\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    className,\n    children: childrenProp,\n    color = \"accent\",\n    name,\n    nameToInitials = defaultNameToInitials,\n    kind = \"person\",\n    src,\n    size = DEFAULT_AVATAR_SIZE,\n    style: styleProp,\n    fallbackIcon: fallbackIconProp,\n    render,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  const { UserIcon, EntityIcon } = useIcon();\n\n  const DefaultFallbackIcon = kind === \"entity\" ? EntityIcon : UserIcon;\n  const fallbackIcon =\n    fallbackIconProp === undefined ? (\n      <DefaultFallbackIcon aria-hidden />\n    ) : (\n      fallbackIconProp\n    );\n\n  useComponentCssInjection({\n    testId: \"salt-avatar\",\n    css: avatarCss,\n    window: targetWindow,\n  });\n\n  let children: ReactNode;\n\n  const style = {\n    \"--saltAvatar-size-multiplier\": `${size}`,\n    ...styleProp,\n  };\n\n  const status = useAvatarImage({ src });\n  const hasImgNotFailing = status === \"loaded\";\n  if (hasImgNotFailing) {\n    children = <img alt=\"\" src={src} />;\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  }\n\n  const avatarInitials = nameToInitials(name);\n\n  const ariaProps = name\n    ? render\n      ? {\n          \"aria-label\": name,\n        }\n      : {\n          role: \"img\",\n          \"aria-label\": name,\n        }\n    : {};\n\n  return (\n    <AvatarAction\n      ref={ref}\n      render={render}\n      style={style}\n      className={clsx(\n        withBaseName(),\n        withBaseName(color),\n        withBaseName(kind),\n        {\n          [withBaseName(\"withImage\")]: hasImgNotFailing,\n        },\n        className,\n      )}\n      {...ariaProps}\n      {...rest}\n    >\n      {children || avatarInitials || fallbackIcon}\n    </AvatarAction>\n  );\n});\n"],"names":["makePrefixer","forwardRef","AvatarAction","renderProps","Avatar","useWindow","useIcon","useComponentCssInjection","avatarCss","useAvatarImage","jsx","clsx"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  padding: var(--saltCard-padding, var(--card-padding));\n  position: relative;\n  box-shadow: var(--salt-overlayable-shadow);\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltCard.saltCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  border-color: var(--salt-container-ghost-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n  position: relative;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--saltCard-borderColor, var(--card-borderColor));\n  padding: var(--saltCard-padding, var(--card-padding));\n  position: relative;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --card-borderColor: var(--salt-container-borderColor);\n  --card-borderColor-strong: var(--salt-container-bold-borderColor);\n  --card-borderColor-subtle: var(--salt-container-subtle-borderColor);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltCard.saltCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  --card-borderColor: var(--salt-container-ghost-borderColor);\n  --card-borderColor-strong: var(--salt-container-ghost-bold-borderColor);\n  --card-borderColor-subtle: var(--salt-container-ghost-subtle-borderColor);\n}\n\n/* Styles applied when elevation=\"flat\" */\n.saltCard-flat {\n  box-shadow: var(--saltCard-boxShadow-flat, none);\n}\n\n/* Styles applied when elevation=\"raised\" */\n.saltCard-raised {\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied when borderColor=\"strong\" */\n.saltCard-borderColorStrong {\n  --card-borderColor: var(--card-borderColor-strong);\n}\n\n/* Styles applied when borderColor=\"subtle\" */\n.saltCard-borderColorSubtle {\n  --card-borderColor: var(--card-borderColor-subtle);\n}\n\n/* Styles applied when borderColor=\"none\" */\n.saltCard-borderColorNone {\n  --card-borderColor: transparent;\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Deprecated interactable styles. Use InteractableCard instead. */\n\n/* Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n}\n\n/* Deprecated hoverable styles retained for backward compatibility. */\n@media (hover: hover) {\n  .saltCard-hoverable:not(.saltCard-disabled):hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied to disabled interactable states */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Card.css.js.map

package/dist-cjs/card/Card.js

@@ -19,9 +19,11 @@ const Card = React.forwardRef(
   function Card2(props, ref) {
     const {
       accent,
+      borderColor,
       children,
       className,
       disabled,
+      elevation = "raised",
       interactable,
       hoverable,
       variant = "primary",
@@ -40,9 +42,11 @@ const Card = React.forwardRef(
         className: clsx.clsx(
           withBaseName(),
           withBaseName(variant),
+          borderColor && withBaseName(`borderColor${capitalize.capitalize(borderColor)}`),
           {
             [withBaseName("accent")]: accent,
             [withBaseName(`accent${capitalize.capitalize(accent || "")}`)]: accent,
+            [withBaseName(elevation || "")]: elevation,
             [withBaseName("hoverable")]: hoverable,
             /* **Deprecated:** InteractableCard should be used instead for these features */
             [withBaseName("disabled")]: disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\nimport { hasCardSection } from \"./hasCardSection\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      disabled,\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    const sectioned = hasCardSection(children);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n            [withBaseName(\"sectioned\")]: sectioned,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","hasCardSection","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AA6BrC,MAAM,IAAA,GAAOC,gBAAA;AAAA,EAClB,SAASC,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,MAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAA,GAAYC,8BAAe,QAAQ,CAAA;AAEzC,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAA,MAAA,EAASC,qBAAA,CAAW,UAAU,EAAE,CAAC,CAAA,CAAE,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,YAAA;AAAA,YAChC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\nimport { hasCardSection } from \"./hasCardSection\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Visual elevation.\n   */\n  elevation?: \"flat\" | \"raised\";\n  /**\n   * Border color strength.\n   */\n  borderColor?: \"strong\" | \"subtle\" | \"none\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * @deprecated since 1.71.0. Use `LinkCard` or `InteractableCard` when the entire card is interactive.\n   *\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      borderColor,\n      children,\n      className,\n      disabled,\n      elevation = \"raised\",\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    const sectioned = hasCardSection(children);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          borderColor && withBaseName(`borderColor${capitalize(borderColor)}`),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(elevation || \"\")]: elevation,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n            [withBaseName(\"sectioned\")]: sectioned,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","hasCardSection","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAuCrC,MAAM,IAAA,GAAOC,gBAAA;AAAA,EAClB,SAASC,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM;AAAA,MACJ,MAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA,GAAY,QAAA;AAAA,MACZ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,MAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,SAAA,GAAYC,8BAAe,QAAQ,CAAA;AAEzC,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB,eAAe,YAAA,CAAa,CAAA,WAAA,EAAcC,qBAAA,CAAW,WAAW,CAAC,CAAA,CAAE,CAAA;AAAA,UACnE;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAA,MAAA,EAASA,qBAAA,CAAW,UAAU,EAAE,CAAC,CAAA,CAAE,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,SAAA,IAAa,EAAE,CAAC,GAAG,SAAA;AAAA,YACjC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,YAAA;AAAA,YAChC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/drawer/Drawer.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n  --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  /* Legacy padding for unsectioned drawers only. */\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawer.saltDrawer-sectioned {\n  padding: 0;\n}\n\n@supports selector(:has(*)) {\n  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {\n    padding: 0;\n  }\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when variant = \"tertiary\" */\n.saltDrawer-tertiary {\n  --drawer-background: var(--salt-container-tertiary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Drawer.css.js.map

package/dist-cjs/drawer/Drawer.js

@@ -10,10 +10,12 @@ var Scrim = require('../scrim/Scrim.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useFloatingUI = require('../utils/useFloatingUI/useFloatingUI.js');
 var useForkRef = require('../utils/useForkRef.js');
-require('../utils/useId.js');
+var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var Drawer$1 = require('./Drawer.css.js');
+var DrawerContext = require('./DrawerContext.js');
+var hasDrawerSection = require('./hasDrawerSection.js');
 
 const ConditionalScrimWrapper = ({
   condition,
@@ -42,6 +44,9 @@ const Drawer = React.forwardRef(
       disableDismiss,
       disableScrim,
       initialFocus,
+      id,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
       ...rest
     } = props;
     const targetWindow = window.useWindow();
@@ -50,7 +55,13 @@ const Drawer = React.forwardRef(
       css: Drawer$1,
       window: targetWindow
     });
+    const drawerId = useId.useId(id);
+    const sectioned = hasDrawerSection.hasDrawerSection(children);
     const [showComponent, setShowComponent] = React.useState(false);
+    const [headerId, setHeaderId] = React.useState(void 0);
+    const [descriptionId, setDescriptionId] = React.useState(
+      void 0
+    );
     const { Component: FloatingComponent } = useFloatingUI.useFloatingComponent();
     const { context, floating, elements } = useFloatingUI.useFloatingUI({
       open: showComponent,
@@ -58,7 +69,7 @@ const Drawer = React.forwardRef(
     });
     const { getFloatingProps } = react.useInteractions([
       react.useClick(context),
-      react.useDismiss(context, { enabled: !disableDismiss })
+      react.useDismiss(context, { outsidePress: !disableDismiss })
     ]);
     const handleRef = useForkRef.useForkRef(floating, ref);
     React.useEffect(() => {
@@ -72,15 +83,28 @@ const Drawer = React.forwardRef(
         return () => clearTimeout(animate);
       }
     }, [open, showComponent]);
-    return /* @__PURE__ */ jsxRuntime.jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsxRuntime.jsx(
+    const contextValue = React.useMemo(
+      () => ({
+        drawerId,
+        headerId,
+        setHeaderId,
+        descriptionId,
+        setDescriptionId
+      }),
+      [drawerId, headerId, descriptionId]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ConditionalScrimWrapper, { condition: showComponent && !disableScrim, children: /* @__PURE__ */ jsxRuntime.jsx(
       FloatingComponent,
       {
+        id: drawerId,
         open: showComponent,
         ref: handleRef,
         role: "dialog",
         width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
         height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
         "aria-modal": "true",
+        "aria-labelledby": clsx.clsx(ariaLabelledBy, headerId) || void 0,
+        "aria-describedby": clsx.clsx(ariaDescribedBy, descriptionId) || void 0,
         focusManagerProps: {
           context,
           initialFocus,
@@ -92,7 +116,8 @@ const Drawer = React.forwardRef(
           {
             [withBaseName("enterAnimation")]: open,
             [withBaseName("exitAnimation")]: !open,
-            [withBaseName(variant)]: variant
+            [withBaseName(variant)]: variant,
+            [withBaseName("sectioned")]: sectioned
           },
           className
         ),
@@ -100,7 +125,7 @@ const Drawer = React.forwardRef(
         ...rest,
         children
       }
-    ) });
+    ) }) });
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      initialFocus,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer\",\n      css: drawerCss,\n      window: targetWindow,\n    });\n\n    const [showComponent, setShowComponent] = useState(false);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    return (\n      <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n        <FloatingComponent\n          open={showComponent}\n          ref={handleRef}\n          role={\"dialog\"}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          aria-modal=\"true\"\n          focusManagerProps={{\n            context: context,\n            initialFocus,\n            outsideElementsInert: true,\n          }}\n          className={clsx(\n            withBaseName(),\n            withBaseName(position),\n            {\n              [withBaseName(\"enterAnimation\")]: open,\n              [withBaseName(\"exitAnimation\")]: !open,\n              [withBaseName(variant)]: variant,\n            },\n            className,\n          )}\n          {...getFloatingProps()}\n          {...rest}\n        >\n          {children}\n        </FloatingComponent>\n      </ConditionalScrimWrapper>\n    );\n  },\n);\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { hasDrawerSection } from \"./hasDrawerSection\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Prevent the drawer closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      initialFocus,\n      id,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer\",\n      css: drawerCss,\n      window: targetWindow,\n    });\n\n    const drawerId = useId(id);\n\n    const sectioned = hasDrawerSection(children);\n\n    const [showComponent, setShowComponent] = useState(false);\n    const [headerId, setHeaderId] = useState<string | undefined>(undefined);\n    const [descriptionId, setDescriptionId] = useState<string | undefined>(\n      undefined,\n    );\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { outsidePress: !disableDismiss }),\n    ]);\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    const contextValue = useMemo(\n      () => ({\n        drawerId,\n        headerId,\n        setHeaderId,\n        descriptionId,\n        setDescriptionId,\n      }),\n      [drawerId, headerId, descriptionId],\n    );\n\n    return (\n      <DrawerContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            id={drawerId}\n            open={showComponent}\n            ref={handleRef}\n            role={\"dialog\"}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            aria-modal=\"true\"\n            aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n            aria-describedby={clsx(ariaDescribedBy, descriptionId) || undefined}\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n              outsideElementsInert: true,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(position),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(variant)]: variant,\n                [withBaseName(\"sectioned\")]: sectioned,\n              },\n              className,\n            )}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DrawerContext.Provider>\n    );\n  },\n);\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useId","hasDrawerSection","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","useMemo","jsx","DrawerContext","clsx"],"mappings":"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"}

package/dist-cjs/drawer/DrawerCloseButton.js

@@ -28,7 +28,7 @@ const DrawerCloseButton = React.forwardRef(
       Button.Button,
       {
         ref,
-        "aria-label": "Close Drawer",
+        "aria-label": "Close drawer",
         appearance: "transparent",
         className: clsx.clsx(withBaseName(), className),
         ...rest,

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DrawerCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-close-button\",\n      css: drawerCloseButtonCss,\n      window: targetWindow,\n    });\n    const { CloseIcon } = useIcon();\n\n    return (\n      <div className={withBaseName(\"container\")}>\n        <Button\n          ref={ref}\n          aria-label=\"Close Drawer\"\n          appearance=\"transparent\"\n          className={clsx(withBaseName(), className)}\n          {...rest}\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DrawerCloseButton","useWindow","useComponentCssInjection","drawerCloseButtonCss","useIcon","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,MAAM,iBAAA,GAAoBC,gBAAA;AAAA,EAC/B,SAASC,kBAAAA,CAAkB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,0BAAA;AAAA,MACR,GAAA,EAAKC,mBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KACzB,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\n/**\n * @deprecated since 1.71.0. Use `Button` in `DrawerHeader`'s `actions` instead.\n */\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DrawerCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-close-button\",\n      css: drawerCloseButtonCss,\n      window: targetWindow,\n    });\n    const { CloseIcon } = useIcon();\n\n    return (\n      <div className={withBaseName(\"container\")}>\n        <Button\n          ref={ref}\n          aria-label=\"Close drawer\"\n          appearance=\"transparent\"\n          className={clsx(withBaseName(), className)}\n          {...rest}\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DrawerCloseButton","useWindow","useComponentCssInjection","drawerCloseButtonCss","useIcon","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAKlD,MAAM,iBAAA,GAAoBC,gBAAA;AAAA,EAC/B,SAASC,kBAAAA,CAAkB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACtD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,0BAAA;AAAA,MACR,GAAA,EAAKC,mBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,4BAAA,EAAQ;AAE9B,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAA,EAAW,cAAA;AAAA,QACX,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAF,cAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KACzB,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/drawer/DrawerContent.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDrawerContent {\n  color: var(--salt-content-primary-foreground);\n  padding: 0 var(--salt-spacing-300);\n  flex: 1 1 auto;\n  min-height: var(--salt-text-lineHeight);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltDrawerContent:first-child {\n  padding-top: var(--salt-spacing-300);\n}\n\n.saltDrawerContent:last-child {\n  padding-bottom: var(--salt-spacing-300);\n}\n\n.saltDrawerContent-inner {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n  box-sizing: border-box;\n}\n\n.saltDrawerContent-inner:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltDrawerContent-inner.saltDrawerContent-scrollTop {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.saltDrawerContent-inner.saltDrawerContent-scrollBottom {\n  border-bottom-color: var(--salt-separable-tertiary-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DrawerContent.css.js.map

package/dist-cjs/drawer/DrawerContent.css.js.map

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

package/dist-cjs/drawer/DrawerContent.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+var useResizeObserver = require('../utils/useResizeObserver.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var DrawerContent$1 = require('./DrawerContent.css.js');
+var DrawerContext = require('./DrawerContext.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltDrawerContent");
+const DrawerContent = React.forwardRef(
+  function DrawerContent2(props, ref) {
+    const { children, className, onScroll, onScrollCapture, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-drawer-content",
+      css: DrawerContent$1,
+      window: targetWindow
+    });
+    const { drawerId, headerId } = DrawerContext.useDrawerContext();
+    const scrollRef = React.useRef(null);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const [canScrollUp, setCanScrollUp] = React.useState(false);
+    const [canScrollDown, setCanScrollDown] = React.useState(false);
+    const readScrollPosition = React.useCallback(() => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const overflowingY = container.scrollHeight > container.clientHeight;
+      setIsOverflowing(
+        overflowingY || container.scrollWidth > container.clientWidth
+      );
+      setCanScrollUp(overflowingY && container.scrollTop > 0);
+      setCanScrollDown(
+        overflowingY && container.scrollHeight - container.scrollTop - container.clientHeight > 1
+      );
+    }, []);
+    const handleScrollCapture = (event) => {
+      targetWindow == null ? void 0 : targetWindow.requestAnimationFrame(readScrollPosition);
+      onScrollCapture == null ? void 0 : onScrollCapture(event);
+    };
+    useResizeObserver.useResizeObserver({ ref: scrollRef, onResize: readScrollPosition });
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      readScrollPosition();
+    }, [readScrollPosition]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: clsx.clsx(withBaseName("inner"), {
+          [withBaseName("scrollTop")]: canScrollUp,
+          [withBaseName("scrollBottom")]: canScrollDown
+        }),
+        onScroll,
+        onScrollCapture: handleScrollCapture,
+        ...isOverflowing && {
+          tabIndex: 0,
+          role: "region",
+          "aria-labelledby": headerId ?? drawerId
+        },
+        children
+      }
+    ) });
+  }
+);
+
+exports.DrawerContent = DrawerContent;
+//# sourceMappingURL=DrawerContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContent.js","sources":["../src/drawer/DrawerContent.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 UIEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\nimport drawerContentCss from \"./DrawerContent.css\";\nimport { useDrawerContext } from \"./DrawerContext\";\n\nconst withBaseName = makePrefixer(\"saltDrawerContent\");\n\nexport type DrawerContentProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(\n  function DrawerContent(props, ref) {\n    const { children, className, onScroll, onScrollCapture, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-content\",\n      css: drawerContentCss,\n      window: targetWindow,\n    });\n\n    const { drawerId, headerId } = useDrawerContext();\n\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n    const [canScrollUp, setCanScrollUp] = useState(false);\n    const [canScrollDown, setCanScrollDown] = useState(false);\n\n    const readScrollPosition = useCallback(() => {\n      const container = scrollRef.current;\n      if (!container) return;\n\n      const overflowingY = container.scrollHeight > container.clientHeight;\n      setIsOverflowing(\n        overflowingY || container.scrollWidth > container.clientWidth,\n      );\n      setCanScrollUp(overflowingY && container.scrollTop > 0);\n      setCanScrollDown(\n        overflowingY &&\n          container.scrollHeight -\n            container.scrollTop -\n            container.clientHeight >\n            1,\n      );\n    }, []);\n\n    const handleScrollCapture: UIEventHandler<HTMLDivElement> = (event) => {\n      targetWindow?.requestAnimationFrame(readScrollPosition);\n      onScrollCapture?.(event);\n    };\n\n    useResizeObserver({ ref: scrollRef, onResize: readScrollPosition });\n\n    useIsomorphicLayoutEffect(() => {\n      readScrollPosition();\n    }, [readScrollPosition]);\n\n    return (\n      <div ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n        <div\n          ref={scrollRef}\n          className={clsx(withBaseName(\"inner\"), {\n            [withBaseName(\"scrollTop\")]: canScrollUp,\n            [withBaseName(\"scrollBottom\")]: canScrollDown,\n          })}\n          onScroll={onScroll}\n          onScrollCapture={handleScrollCapture}\n          {...(isOverflowing && {\n            tabIndex: 0,\n            role: \"region\",\n            \"aria-labelledby\": headerId ?? drawerId,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DrawerContent","useWindow","useComponentCssInjection","drawerContentCss","useDrawerContext","useRef","useState","useCallback","useResizeObserver","useIsomorphicLayoutEffect","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAI9C,MAAM,aAAA,GAAgBC,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,eAAA,EAAiB,GAAG,MAAK,GAAI,KAAA;AAEpE,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,QAAA,EAAS,GAAIC,8BAAA,EAAiB;AAEhD,IAAA,MAAM,SAAA,GAAYC,aAAuB,IAAI,CAAA;AAC7C,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA;AACxD,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,KAAK,CAAA;AACpD,IAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIA,eAAS,KAAK,CAAA;AAExD,IAAA,MAAM,kBAAA,GAAqBC,kBAAY,MAAM;AAC3C,MAAA,MAAM,YAAY,SAAA,CAAU,OAAA;AAC5B,MAAA,IAAI,CAAC,SAAA,EAAW;AAEhB,MAAA,MAAM,YAAA,GAAe,SAAA,CAAU,YAAA,GAAe,SAAA,CAAU,YAAA;AACxD,MAAA,gBAAA;AAAA,QACE,YAAA,IAAgB,SAAA,CAAU,WAAA,GAAc,SAAA,CAAU;AAAA,OACpD;AACA,MAAA,cAAA,CAAe,YAAA,IAAgB,SAAA,CAAU,SAAA,GAAY,CAAC,CAAA;AACtD,MAAA,gBAAA;AAAA,QACE,gBACE,SAAA,CAAU,YAAA,GACR,SAAA,CAAU,SAAA,GACV,UAAU,YAAA,GACV;AAAA,OACN;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,mBAAA,GAAsD,CAAC,KAAA,KAAU;AACrE,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,qBAAA,CAAsB,kBAAA,CAAA;AACpC,MAAA,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAkB,KAAA,CAAA;AAAA,IACpB,CAAA;AAEA,IAAAC,mCAAA,CAAkB,EAAE,GAAA,EAAK,SAAA,EAAW,QAAA,EAAU,oBAAoB,CAAA;AAElE,IAAAC,mDAAA,CAA0B,MAAM;AAC9B,MAAA,kBAAA,EAAmB;AAAA,IACrB,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC7D,QAAA,kBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,SAAA;AAAA,QACL,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,UACrC,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,WAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,SACjC,CAAA;AAAA,QACD,QAAA;AAAA,QACA,eAAA,EAAiB,mBAAA;AAAA,QAChB,GAAI,aAAA,IAAiB;AAAA,UACpB,QAAA,EAAU,CAAA;AAAA,UACV,IAAA,EAAM,QAAA;AAAA,UACN,mBAAmB,QAAA,IAAY;AAAA,SACjC;AAAA,QAEC;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/drawer/DrawerContext.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var createContext = require('../utils/createContext.js');
+require('clsx');
+require('react/jsx-runtime');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+
+const DrawerContext = createContext.createContext(
+  "DrawerContext",
+  {
+    drawerId: void 0,
+    headerId: void 0,
+    setHeaderId: () => {
+    },
+    descriptionId: void 0,
+    setDescriptionId: () => {
+    }
+  }
+);
+const useDrawerContext = () => {
+  return React.useContext(DrawerContext);
+};
+
+exports.DrawerContext = DrawerContext;
+exports.useDrawerContext = useDrawerContext;
+//# sourceMappingURL=DrawerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContext.js","sources":["../src/drawer/DrawerContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\n\nexport interface DrawerContextValue {\n  drawerId?: string;\n  headerId?: string;\n  setHeaderId?: (id: string | undefined) => void;\n  descriptionId?: string;\n  setDescriptionId?: (id: string | undefined) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextValue>(\n  \"DrawerContext\",\n  {\n    drawerId: undefined,\n    headerId: undefined,\n    setHeaderId: () => {},\n    descriptionId: undefined,\n    setDescriptionId: () => {},\n  },\n);\n\nexport const useDrawerContext = () => {\n  return useContext(DrawerContext);\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;;;;;;;AAWO,MAAM,aAAA,GAAgBA,2BAAA;AAAA,EAC3B,eAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU,MAAA;AAAA,IACV,QAAA,EAAU,MAAA;AAAA,IACV,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,aAAA,EAAe,MAAA;AAAA,IACf,kBAAkB,MAAM;AAAA,IAAC;AAAA;AAE7B;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,OAAOC,iBAAW,aAAa,CAAA;AACjC;;;;;"}

package/dist-cjs/drawer/DrawerFooter.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDrawerFooter {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DrawerFooter.css.js.map

package/dist-cjs/drawer/DrawerFooter.css.js.map

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

package/dist-cjs/drawer/DrawerFooter.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var DrawerFooter$1 = require('./DrawerFooter.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltDrawerFooter");
+const DrawerFooter = React.forwardRef(
+  function DrawerFooter2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-drawer-footer",
+      css: DrawerFooter$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ref, ...rest });
+  }
+);
+
+exports.DrawerFooter = DrawerFooter;
+//# sourceMappingURL=DrawerFooter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFooter.js","sources":["../src/drawer/DrawerFooter.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport drawerFooterCss from \"./DrawerFooter.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerFooter\");\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(\n  function DrawerFooter(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-footer\",\n      css: drawerFooterCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","DrawerFooter","useWindow","useComponentCssInjection","drawerFooterCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA;AAI7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CAAa,KAAA,EAAO,GAAA,EAAK;AAChC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,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,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAAA,EAEzE;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltDrawerHeader {\n  padding: var(--salt-spacing-300);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.saltDrawerHeader-header {\n  margin: 0;\n}\n\n.saltDrawerHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);\n  align-items: flex-start;\n  min-width: 0;\n  word-break: break-word;\n}\n\n.saltDrawerHeader-header > .saltText {\n  display: block;\n  margin: 0;\n}\n\n.saltDrawerHeader-actionsContainer {\n  align-self: flex-start;\n  display: flex;\n}\n\n.saltDrawerHeader-withAccent {\n  position: relative;\n}\n\n.saltDrawerHeader-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-300);\n  bottom: var(--salt-spacing-300);\n  left: 0;\n  width: var(--salt-size-bar);\n  background: var(--salt-sentiment-accent-background);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=DrawerHeader.css.js.map

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

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