@salt-ds/core 1.40.0 → 1.42.0

package/dist-es/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { type RenderPropsType, makePrefixer } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"color\" | \"variant\"> {\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(withBaseName(), className)}\n      href={href}\n      ref={ref}\n      target={target}\n      color={color}\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>External</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["Link","linkCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAkB/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,GAAG;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA;AAEjC,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AACtC,EAAM,MAAA,iBAAA,GACJ,aAAkB,KAAA,KAAA,CAAA,GAAY,YAAe,GAAA,aAAA;AAE/C,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,UAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,MAAA,KAAW,4BAEP,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,iBAAA,wBACE,iBAAkB,EAAA,EAAA,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAC,EAAA,CAAA;AAAA,8BAEjE,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,GAAG,QAAQ,EAAA,UAAA,EAAA;AAAA,SAC5D,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { type RenderPropsType, capitalize, makePrefixer } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"variant\"> {\n  /**\n   * Icon component displayed for external links. Defaults to `ExternalIcon` from `SemanticIconProvider`.\n   */\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n  /*\n   * The color of the text. Defaults to \"primary\".\n   */\n  color?: \"inherit\" | \"primary\" | \"secondary\" | \"accent\";\n  /**\n   *\n   * Either \"default\" or \"never\".\n   * Determines when underline should be applied to the link.\n   *\n   * @default \"default\".\n   */\n  underline?: \"default\" | \"never\";\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    underline = \"default\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`underline${capitalize(underline)}`),\n        {\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      href={href}\n      ref={ref}\n      target={target}\n      color=\"inherit\"\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>External</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["Link","linkCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAiC/B,MAAA,IAAA,GAAO,UAAyC,CAAA,SAASA,KACpE,CAAA;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,SAAY,GAAA,SAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,OAAQ,EAAA;AAEjC,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AACtC,EAAM,MAAA,iBAAA,GACJ,aAAkB,KAAA,KAAA,CAAA,GAAY,YAAe,GAAA,aAAA;AAE/C,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,UAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAa,CAAA,CAAA,SAAA,EAAY,UAAW,CAAA,SAAS,CAAC,CAAE,CAAA,CAAA;AAAA,QAChD;AAAA,UACE,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAU,KAAA;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAM,EAAA,SAAA;AAAA,MACL,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,MAAA,KAAW,4BAEP,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,iBAAA,wBACE,iBAAkB,EAAA,EAAA,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAC,EAAA,CAAA;AAAA,8BAEjE,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,GAAG,QAAQ,EAAA,UAAA,EAAA;AAAA,SAC5D,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-es/link-card/LinkCard.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to LinkCard */\n.saltLinkCard {\n  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-decoration: none;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  --linkCard-accent-color: var(--salt-accent-background);\n  overflow: hidden;\n}\n\n/* Styles applied to LinkCard when variant=\"primary\" */\n.saltLinkCard-primary {\n  background: var(--saltLinkCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"secondary\" */\n.saltLinkCard-secondary {\n  background: var(--saltLinkCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"tertiary\" */\n.saltLinkCard-tertiary {\n  background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltLinkCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));\n}\n\n/* Styles applied to LinkCard if `accent=\"bottom\"` (default) */\n.saltLinkCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"left\"` */\n.saltLinkCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard if `accent=\"top\"` */\n.saltLinkCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"right\"` */\n.saltLinkCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard on focus */\n.saltLinkCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on hover state to LinkCard */\n@media (hover: hover) {\n  .saltLinkCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state to LinkCard */\n.saltLinkCard:active {\n  cursor: var(--salt-selectable-cursor-active);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--salt-overlayable-shadow);\n}\n";
+var css_248z = "/* Styles applied to LinkCard */\n.saltLinkCard {\n  border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));\n  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));\n  box-shadow: var(--salt-overlayable-shadow);\n  display: block;\n  overflow: hidden;\n  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-decoration: none;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  --linkCard-accent-color: var(--salt-accent-background);\n}\n\n/* Styles applied to LinkCard when variant=\"primary\" */\n.saltLinkCard-primary {\n  background: var(--saltLinkCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"secondary\" */\n.saltLinkCard-secondary {\n  background: var(--saltLinkCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to LinkCard when variant=\"tertiary\" */\n.saltLinkCard-tertiary {\n  background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltLinkCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));\n}\n\n/* Styles applied to LinkCard if `accent=\"bottom\"` (default) */\n.saltLinkCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"left\"` */\n.saltLinkCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard if `accent=\"top\"` */\n.saltLinkCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to LinkCard if `accent=\"right\"` */\n.saltLinkCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to LinkCard on focus */\n.saltLinkCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --linkCard-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on hover state to LinkCard */\n@media (hover: hover) {\n  .saltLinkCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state to LinkCard */\n.saltLinkCard:active {\n  cursor: var(--salt-selectable-cursor-active);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--salt-overlayable-shadow);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=LinkCard.css.js.map

package/dist-es/menu/MenuItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMenuItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n  outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n  margin-left: auto;\n}\n";
+var css_248z = ".saltMenuItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n  outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* TODO: Find a better way of doing this */\n.saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n  margin-left: auto;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MenuItem.css.js.map

package/dist-es/option/Option.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
+var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Option.css.js.map

package/dist-es/pagination/PageButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltPageButton {\n  --saltButton-minWidth: var(--salt-size-base);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n  --saltButton-height: var(--salt-size-base);\n  --saltButton-text-color: var(--salt-content-primary-foreground);\n  --saltButton-background-active: var(--salt-selectable-background-selected);\n  --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  --saltButton-text-color-hover: var(--salt-content-primary-foreground);\n  --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  --saltButton-padding: 0;\n}\n";
+var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-action-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  cursor: var(--salt-selectable-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active,\n.saltPageButton-active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n  background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PageButton.css.js.map

package/dist-es/pagination/PageButton.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
@@ -26,11 +25,10 @@ const PageButton = forwardRef(
       onPageChange(event, page);
     };
     return /* @__PURE__ */ jsx(
-      Button,
+      "button",
       {
         "aria-label": `Page ${page} of ${count}`,
         "aria-current": selected ? "page" : void 0,
-        appearance: "transparent",
         className: clsx(withBaseName(), {
           [withBaseName("selected")]: selected,
           [withBaseName("fixed")]: page < 100
@@ -38,6 +36,7 @@ const PageButton = forwardRef(
         onClick,
         disabled,
         ref,
+        type: "button",
         children: page
       }
     );

package/dist-es/pagination/PageButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { Button } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n  page: number;\n  selected?: boolean;\n  disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n  function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-page-button\",\n      css: pageButtonCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n\n    const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, page);\n    };\n\n    return (\n      <Button\n        aria-label={`Page ${page} of ${count}`}\n        aria-current={selected ? \"page\" : undefined}\n        appearance=\"transparent\"\n        className={clsx(withBaseName(), {\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"fixed\")]: page < 100,\n        })}\n        onClick={onClick}\n        disabled={disabled}\n        ref={ref}\n      >\n        {page}\n      </Button>\n    );\n  },\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA;AAAA,QACpC,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,QAClC,UAAW,EAAA,aAAA;AAAA,QACX,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,UAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,IAAO,GAAA;AAAA,SACjC,CAAA;AAAA,QACD,OAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type MouseEventHandler, forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n  page: number;\n  selected?: boolean;\n  disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n  function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-page-button\",\n      css: pageButtonCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n\n    const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      onPageChange(event, page);\n    };\n\n    return (\n      <button\n        aria-label={`Page ${page} of ${count}`}\n        aria-current={selected ? \"page\" : undefined}\n        className={clsx(withBaseName(), {\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"fixed\")]: page < 100,\n        })}\n        onClick={onClick}\n        disabled={disabled}\n        ref={ref}\n        type=\"button\"\n      >\n        {page}\n      </button>\n    );\n  },\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA;AAAA,KAC1B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,CAAA,KAAA,EAAQ,IAAI,CAAA,IAAA,EAAO,KAAK,CAAA,CAAA;AAAA,QACpC,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,QAClC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,UAC9B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,IAAO,GAAA;AAAA,SACjC,CAAA;AAAA,QACD,OAAA;AAAA,QACA,QAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QAEJ,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/pagination/Paginator.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltPaginator {\n  display: flex;\n  flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous {\n  --saltButton-margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next {\n  --saltButton-margin: 0 0 0 var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltPaginator {\n  display: flex;\n  flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous.saltButton {\n  margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next.saltButton {\n  margin: 0 0 0 var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Paginator.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = "/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n  top: 0;\n  left: 0;\n  opacity: 0;\n  width: 1px;\n  height: 1px;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-decoration: var(--salt-navigable-textDecoration);\n  font-family: var(--salt-text-fontFamily);\n  white-space: nowrap;\n  background: var(--saltSkipLink-background, var(--salt-container-primary-background));\n  z-index: calc(var(--salt-zIndex-appHeader) + 1);\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n  opacity: 1;\n  width: auto;\n  height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n  padding: var(--salt-spacing-100) var(--salt-spacing-300);\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n  box-shadow: var(--salt-overlayable-shadow);\n}\n\n@keyframes fade-out-back-outline {\n  /* required animation to apply an opacity fade-out-back to outline */\n  0% {\n    outline-color: var(--salt-focused-outlineColor);\n  }\n  100% {\n    outline-color: transparent;\n  }\n}\n\n.saltSkipLink-target {\n  animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;\n  outline: var(--salt-focused-outline);\n}\n@media (prefers-reduced-motion: reduce) {\n  .saltSkipLink-target {\n    animation: none;\n  }\n}\n";
+var css_248z = "/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n  top: 0;\n  left: 0;\n  opacity: 0;\n  width: 1px;\n  height: 1px;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  color: var(--salt-content-primary-foreground);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-decoration: var(--salt-typography-textDecoration-underline);\n  font-family: var(--salt-text-fontFamily);\n  white-space: nowrap;\n  background: var(--saltSkipLink-background, var(--salt-container-primary-background));\n  z-index: calc(var(--salt-zIndex-appHeader) + 1);\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n  opacity: 1;\n  width: auto;\n  height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n  padding: var(--salt-spacing-100) var(--salt-spacing-300);\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n  box-shadow: var(--salt-overlayable-shadow);\n}\n\n@keyframes fade-out-back-outline {\n  /* required animation to apply an opacity fade-out-back to outline */\n  0% {\n    outline-color: var(--salt-focused-outlineColor);\n  }\n  100% {\n    outline-color: transparent;\n  }\n}\n\n.saltSkipLink-target {\n  animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;\n  outline: var(--salt-focused-outline);\n}\n@media (prefers-reduced-motion: reduce) {\n  .saltSkipLink-target {\n    animation: none;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SkipLink.css.js.map

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

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

package/dist-es/utils/useFloatingUI/useFloatingUI.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { FloatingPortal, FloatingFocusManager, flip, shift, limitShift, platform, useFloating, autoUpdate } from '@floating-ui/react';
 import { forwardRef, createContext, useMemo, useContext } from 'react';
 import { useTheme, SaltProviderNext, SaltProvider } from '../../salt-provider/SaltProvider.js';
+import { usePreventScroll } from '../usePreventScroll.js';
 
 const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(props, ref) {
   const {
@@ -12,6 +13,7 @@ const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(p
     width,
     height,
     focusManagerProps,
+    lockScroll,
     ...rest
   } = props;
   const style = {
@@ -20,6 +22,7 @@ const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(p
     position
   };
   const { themeNext } = useTheme();
+  usePreventScroll({ isDisabled: !lockScroll || !open });
   const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;
   if (focusManagerProps && open) {
     return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(ChosenSaltProvider, { applyClassesTo: "scope", children: /* @__PURE__ */ jsx(FloatingFocusManager, { ...focusManagerProps, children: /* @__PURE__ */ jsx("div", { style, ...rest, ref }) }) }) });

package/dist-es/utils/useFloatingUI/useFloatingUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  type FloatingFocusManagerProps,\n  FloatingPortal,\n  type Middleware,\n  type Platform,\n  type Strategy,\n  type UseFloatingOptions,\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determining whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Use this prop when `FloatingFocusManager` is needed for floating component\n   */\n  focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n  /**\n   * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n   * `width` and `height` are used to define the size of the floating element.\n   *\n   */\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n  position?: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    width,\n    height,\n    focusManagerProps,\n    ...rest\n  } = props;\n  const style = {\n    top,\n    left,\n    position,\n  };\n\n  const { themeNext } = useTheme();\n\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  if (focusManagerProps && open) {\n    return (\n      <FloatingPortal>\n        <ChosenSaltProvider applyClassesTo=\"scope\">\n          <FloatingFocusManager {...focusManagerProps}>\n            <div style={style} {...rest} ref={ref} />\n          </FloatingFocusManager>\n        </ChosenSaltProvider>\n      </FloatingPortal>\n    );\n  }\n\n  return open ? (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div style={style} {...rest} ref={ref} />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps,\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n  extends Pick<\n    UseFloatingOptions,\n    \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n  > {\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame || false,\n    }),\n    [platformProp, middleware, animationFrame],\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n    ...other\n  } = props;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    open,\n    boolean,\n    reason,\n  ) => {\n    update();\n    onOpenChange?.(open, boolean, reason);\n  };\n\n  const {\n    platform: contextPlatform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    ...other,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlatform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":";;;;;AAiDA,MAAM,wBAA2B,GAAA,UAAA,CAG/B,SAASA,yBAAAA,CAAyB,OAAO,GAAK,EAAA;AAC9C,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,iBAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AACJ,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,QAAS,EAAA;AAE/B,EAAM,MAAA,kBAAA,GAAqB,YAAY,gBAAmB,GAAA,YAAA;AAE1D,EAAA,IAAI,qBAAqB,IAAM,EAAA;AAC7B,IAAA,2BACG,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,sBAAmB,cAAe,EAAA,OAAA,EACjC,8BAAC,oBAAsB,EAAA,EAAA,GAAG,iBACxB,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAe,EAAA,GAAG,MAAM,GAAU,EAAA,CAAA,EACzC,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,OAAO,IACL,mBAAA,GAAA,CAAC,cACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,sBAAmB,cAAe,EAAA,OAAA,EACjC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,OAAe,GAAG,IAAA,EAAM,GAAU,EAAA,CAAA,EACzC,GACF,CACE,GAAA,IAAA;AACN,CAAC,CAAA;AAMD,MAAM,2BAA2B,aAA4C,CAAA;AAAA,EAC3E,SAAW,EAAA;AACb,CAAC,CAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,wBAAA,CAAyB,WAAc,GAAA,0BAAA;AACzC;AAOO,SAAS,0BACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,SAAW,EAAA,QAAA,EAAa,GAAA,KAAA;AAChC,EAAM,MAAA,KAAA,GAAQ,QAAQ,OAAO,EAAE,WAAc,CAAA,EAAA,CAAC,SAAS,CAAC,CAAA;AAExD,EAAA,uBACG,GAAA,CAAA,wBAAA,CAAyB,QAAzB,EAAA,EAAkC,OAChC,QACH,EAAA,CAAA;AAEJ;AAEO,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;AAeA,MAAM,oBAAA,GAAsC,CAAC,iBAC3C,KAAA,iBAAA;AAQF,MAAM,sBAAsD,GAAA;AAAA,EAC1D,QAAA;AAAA,EACA,UAAY,EAAA,oBAAA;AAAA,EACZ,cAAgB,EAAA;AAClB,CAAA;AAEA,MAAM,uBAA0B,GAAA,aAAA;AAAA,EAC9B;AACF,CAAA;AASO,SAAS,yBAAyB,KAAsC,EAAA;AAC7E,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,4BAA+B,GAAA,OAAA;AAAA,IACnC,OAAO;AAAA,MACL,UAAU,YAAgB,IAAA,QAAA;AAAA,MAC1B,YAAY,UAAc,IAAA,oBAAA;AAAA,MAC1B,gBAAgB,cAAkB,IAAA;AAAA,KACpC,CAAA;AAAA,IACA,CAAC,YAAc,EAAA,UAAA,EAAY,cAAc;AAAA,GAC3C;AAEA,EAAA,2BACG,uBAAwB,CAAA,QAAA,EAAxB,EAAiC,KAAA,EAAO,8BACtC,QACH,EAAA,CAAA;AAEJ;AAEO,SAAS,mBAAsB,GAAA;AACpC,EAAA,OAAO,WAAW,uBAAuB,CAAA;AAC3C;AAEO,MAAM,8BAAiC,GAAA;AAAA,EAC5C,IAAK,EAAA;AAAA,EACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc;AACjC;AASO,SAAS,cAAc,KAAgD,EAAA;AAC5E,EAAM,MAAA;AAAA,IACJ,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,gBAAuD,GAAA,CAC3DC,KACA,EAAA,OAAA,EACA,MACG,KAAA;AACH,IAAO,MAAA,EAAA;AACP,IAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAeA,OAAM,OAAS,EAAA,MAAA,CAAA;AAAA,GAChC;AAEA,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,eAAA;AAAA,IACV,UAAY,EAAA,iBAAA;AAAA,IACZ;AAAA,MACE,mBAAoB,EAAA;AAExB,EAAA,MAAM,EAAE,IAAM,EAAA,MAAA,EAAQ,GAAG,IAAA,KAAS,WAAY,CAAA;AAAA,IAC5C,GAAG,KAAA;AAAA,IACH,UAAA,EAAY,kBAAkB,UAAU,CAAA;AAAA,IACxC,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,oBAAA,EAAsB,IAAI,IAAS,KAAA;AACjC,MAAA,MAAM,UAAU,UAAW,CAAA,GAAG,IAAM,EAAA,EAAE,gBAAgB,CAAA;AAEtD,MAAO,OAAA,OAAA;AAAA,KACT;AAAA,IACA,QAAU,EAAA;AAAA,GACX,CAAA;AAED,EAAO,OAAA;AAAA,IACL,WAAW,IAAK,CAAA,YAAA;AAAA,IAChB,UAAU,IAAK,CAAA,WAAA;AAAA,IACf,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,GACL;AACF;;;;"}
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  FloatingFocusManager,\n  type FloatingFocusManagerProps,\n  FloatingPortal,\n  type Middleware,\n  type Platform,\n  type Strategy,\n  type UseFloatingOptions,\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { SaltProvider, SaltProviderNext, useTheme } from \"../../salt-provider\";\nimport { usePreventScroll } from \"../usePreventScroll\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determining whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Use this prop when `FloatingFocusManager` is needed for floating component\n   */\n  focusManagerProps?: Omit<FloatingFocusManagerProps, \"children\">;\n  /**\n   * Position and sizing optional props for the floating component. `top`, `left`, and `position` for floating elements where they aren't positioned with relative to the trigger.\n   * `width` and `height` are used to define the size of the floating element.\n   *\n   */\n  top?: number;\n  left?: number;\n  width?: number;\n  height?: number;\n  position?: Strategy;\n  /**\n   * Makes the page unscrollable when the floating component is open.\n   */\n  lockScroll?: boolean;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    width,\n    height,\n    focusManagerProps,\n    lockScroll,\n    ...rest\n  } = props;\n  const style = {\n    top,\n    left,\n    position,\n  };\n\n  const { themeNext } = useTheme();\n  usePreventScroll({ isDisabled: !lockScroll || !open });\n\n  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;\n\n  if (focusManagerProps && open) {\n    return (\n      <FloatingPortal>\n        <ChosenSaltProvider applyClassesTo=\"scope\">\n          <FloatingFocusManager {...focusManagerProps}>\n            <div style={style} {...rest} ref={ref} />\n          </FloatingFocusManager>\n        </ChosenSaltProvider>\n      </FloatingPortal>\n    );\n  }\n\n  return open ? (\n    <FloatingPortal>\n      <ChosenSaltProvider applyClassesTo=\"scope\">\n        <div style={style} {...rest} ref={ref} />\n      </ChosenSaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps,\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps\n  extends Pick<\n    UseFloatingOptions,\n    \"placement\" | \"strategy\" | \"open\" | \"onOpenChange\" | \"nodeId\"\n  > {\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform,\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame || false,\n    }),\n    [platformProp, middleware, animationFrame],\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n    ...other\n  } = props;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    open,\n    boolean,\n    reason,\n  ) => {\n    update();\n    onOpenChange?.(open, boolean, reason);\n  };\n\n  const {\n    platform: contextPlatform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    ...other,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlatform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}

package/dist-es/utils/usePreventScroll.js

@@ -0,0 +1,231 @@
+import { createChainedFunction } from './createChainedFunction.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+
+const visualViewport = typeof document !== "undefined" && window.visualViewport;
+const nonTextInputTypes = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+let preventScrollCount = 0;
+let restore;
+function usePreventScroll(options = {}) {
+  const { isDisabled } = options;
+  useIsomorphicLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+      if (isIOS()) {
+        restore = preventScrollMobileSafari();
+      } else {
+        restore = preventScrollStandard();
+      }
+    }
+    return () => {
+      preventScrollCount--;
+      if (preventScrollCount === 0) {
+        restore();
+      }
+    };
+  }, [isDisabled]);
+}
+function preventScrollStandard() {
+  return createChainedFunction(
+    setStyle(
+      document.documentElement,
+      "paddingRight",
+      `${window.innerWidth - document.documentElement.clientWidth}px`
+    ),
+    setStyle(document.documentElement, "overflow", "hidden")
+  );
+}
+function preventScrollMobileSafari() {
+  let scrollable;
+  let restoreScrollableStyles;
+  const onTouchStart = (e) => {
+    scrollable = getScrollParent(e.target, true);
+    if (scrollable === document.documentElement && scrollable === document.body) {
+      return;
+    }
+    if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === "auto") {
+      restoreScrollableStyles = setStyle(
+        scrollable,
+        "overscrollBehavior",
+        "contain"
+      );
+    }
+  };
+  const onTouchMove = (e) => {
+    if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+      e.preventDefault();
+      return;
+    }
+    if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) {
+      e.preventDefault();
+    }
+  };
+  const onTouchEnd = () => {
+    if (restoreScrollableStyles) {
+      restoreScrollableStyles();
+    }
+  };
+  const onFocus = (e) => {
+    const target = e.target;
+    if (willOpenKeyboard(target)) {
+      setupStyles();
+      target.style.transform = "translateY(-2000px)";
+      requestAnimationFrame(() => {
+        target.style.transform = "";
+        if (visualViewport) {
+          if (visualViewport.height < window.innerHeight) {
+            requestAnimationFrame(() => {
+              scrollIntoView(target);
+            });
+          } else {
+            visualViewport.addEventListener(
+              "resize",
+              () => scrollIntoView(target),
+              { once: true }
+            );
+          }
+        }
+      });
+    }
+  };
+  let restoreStyles = null;
+  const setupStyles = () => {
+    if (restoreStyles) {
+      return;
+    }
+    const onWindowScroll = () => {
+      window.scrollTo(0, 0);
+    };
+    const scrollX = window.pageXOffset;
+    const scrollY = window.pageYOffset;
+    restoreStyles = createChainedFunction(
+      addEvent(window, "scroll", onWindowScroll),
+      setStyle(
+        document.documentElement,
+        "paddingRight",
+        `${window.innerWidth - document.documentElement.clientWidth}px`
+      ),
+      setStyle(document.documentElement, "overflow", "hidden"),
+      setStyle(document.body, "marginTop", `-${scrollY}px`),
+      () => {
+        window.scrollTo(scrollX, scrollY);
+      }
+    );
+    window.scrollTo(0, 0);
+  };
+  const removeEvents = createChainedFunction(
+    addEvent(document, "touchstart", onTouchStart, {
+      passive: false,
+      capture: true
+    }),
+    addEvent(document, "touchmove", onTouchMove, {
+      passive: false,
+      capture: true
+    }),
+    addEvent(document, "touchend", onTouchEnd, {
+      passive: false,
+      capture: true
+    }),
+    addEvent(document, "focus", onFocus, true)
+  );
+  return () => {
+    restoreScrollableStyles == null ? void 0 : restoreScrollableStyles();
+    restoreStyles == null ? void 0 : restoreStyles();
+    removeEvents();
+  };
+}
+function setStyle(element, style, value) {
+  const cur = element.style[style];
+  element.style[style] = value;
+  return () => {
+    element.style[style] = cur;
+  };
+}
+function addEvent(target, event, handler, options) {
+  target.addEventListener(event, handler, options);
+  return () => {
+    target.removeEventListener(event, handler, options);
+  };
+}
+function scrollIntoView(target) {
+  const root = document.scrollingElement || document.documentElement;
+  let nextTarget = target;
+  while (nextTarget && nextTarget !== root) {
+    const scrollable = getScrollParent(nextTarget);
+    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
+      const scrollableTop = scrollable.getBoundingClientRect().top;
+      const targetTop = nextTarget.getBoundingClientRect().top;
+      if (targetTop > scrollableTop + nextTarget.clientHeight) {
+        scrollable.scrollTop += targetTop - scrollableTop;
+      }
+    }
+    nextTarget = scrollable.parentElement;
+  }
+}
+function willOpenKeyboard(target) {
+  return target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLElement && target.isContentEditable;
+}
+function isScrollable(node, checkForOverflow) {
+  if (!node) {
+    return false;
+  }
+  const style = window.getComputedStyle(node);
+  let isScrollable2 = /(auto|scroll)/.test(
+    style.overflow + style.overflowX + style.overflowY
+  );
+  if (isScrollable2 && checkForOverflow) {
+    isScrollable2 = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+  }
+  return isScrollable2;
+}
+function getScrollParent(node, checkForOverflow) {
+  let scrollableNode = node;
+  if (isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
+  }
+  while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {
+    scrollableNode = scrollableNode.parentElement;
+  }
+  return scrollableNode || document.scrollingElement || document.documentElement;
+}
+function testPlatform(re) {
+  var _a;
+  return typeof window !== "undefined" && window.navigator != null ? re.test(
+    // @ts-expect-error userAgentData is only supported in Chrome 90+
+    ((_a = window.navigator.userAgentData) == null ? void 0 : _a.platform) || window.navigator.platform
+  ) : false;
+}
+function cached(fn) {
+  if (process.env.NODE_ENV === "test") {
+    return fn;
+  }
+  let res = null;
+  return () => {
+    if (res == null) {
+      res = fn();
+    }
+    return res;
+  };
+}
+const isMac = cached(() => testPlatform(/^Mac/i));
+const isIPhone = cached(() => testPlatform(/^iPhone/i));
+const isIPad = cached(
+  () => testPlatform(/^iPad/i) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  isMac() && navigator.maxTouchPoints > 1
+);
+const isIOS = cached(() => isIPhone() || isIPad());
+
+export { usePreventScroll };
+//# sourceMappingURL=usePreventScroll.js.map

package/dist-es/utils/usePreventScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreventScroll.js","sources":["../src/utils/usePreventScroll.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * Taken from https://github.com/adobe/react-spectrum/blob/cc08a8dbc95d3648eee47bc9b8e0ed48448e0da2/packages/%40react-aria/overlays/src/usePreventScroll.ts#L44 but refactored.\n * This hook currently doesn't use `useWindow` because in a desktop environment the main window is only the window they typically want locked.\n * If we need to in the future we can add an option to specify which window should be affected.\n */\n\nimport { createChainedFunction } from \"./createChainedFunction\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\ninterface PreventScrollOptions {\n  /** Whether the scroll lock is disabled. */\n  isDisabled?: boolean;\n}\n\nconst visualViewport = typeof document !== \"undefined\" && window.visualViewport;\n\n// HTML input types that do not cause the software keyboard to appear.\nconst nonTextInputTypes = new Set([\n  \"checkbox\",\n  \"radio\",\n  \"range\",\n  \"color\",\n  \"file\",\n  \"image\",\n  \"button\",\n  \"submit\",\n  \"reset\",\n]);\n\n// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position\nlet preventScrollCount = 0;\nlet restore: () => void;\n\n/**\n * Prevents scrolling on the document body on mount, and\n * restores it on unmount. Also ensures that content does not\n * shift due to the scrollbars disappearing.\n */\nexport function usePreventScroll(options: PreventScrollOptions = {}) {\n  const { isDisabled } = options;\n\n  useIsomorphicLayoutEffect(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    preventScrollCount++;\n    if (preventScrollCount === 1) {\n      if (isIOS()) {\n        restore = preventScrollMobileSafari();\n      } else {\n        restore = preventScrollStandard();\n      }\n    }\n\n    return () => {\n      preventScrollCount--;\n      if (preventScrollCount === 0) {\n        restore();\n      }\n    };\n  }, [isDisabled]);\n}\n\n// For most browsers, all we need to do is set `overflow: hidden` on the root element, and\n// add some padding to prevent the page from shifting when the scrollbar is hidden.\nfunction preventScrollStandard() {\n  return createChainedFunction(\n    setStyle(\n      document.documentElement,\n      \"paddingRight\",\n      `${window.innerWidth - document.documentElement.clientWidth}px`,\n    ),\n    setStyle(document.documentElement, \"overflow\", \"hidden\"),\n  );\n}\n\n// Mobile Safari is a whole different beast. Even with overflow: hidden,\n// it still scrolls the page in many situations:\n//\n// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.\n// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of\n//    it, so it becomes scrollable.\n// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.\n//    This may cause even fixed position elements to scroll off the screen.\n// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always\n//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.\n//\n// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:\n//\n// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling\n//    on the window.\n// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at\n//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow\n//    by preventing default in a `touchmove` event.\n// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.\n// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top\n//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element\n//    into view ourselves, without scrolling the whole page.\n// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the\n//    same visually, but makes the actual scroll position always zero. This is required to make all of the\n//    above work or Safari will still try to scroll the page when focusing an input.\n// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting\n//    to navigate to an input with the next/previous buttons that's outside a modal.\nfunction preventScrollMobileSafari() {\n  let scrollable: Element;\n  let restoreScrollableStyles: () => void;\n  const onTouchStart = (e: TouchEvent) => {\n    // Store the nearest scrollable parent element from the element that the user touched.\n    scrollable = getScrollParent(e.target as Element, true);\n    if (\n      scrollable === document.documentElement &&\n      scrollable === document.body\n    ) {\n      return;\n    }\n\n    // Prevent scrolling up when at the top and scrolling down when at the bottom\n    // of a nested scrollable area, otherwise mobile Safari will start scrolling\n    // the window instead.\n    if (\n      scrollable instanceof HTMLElement &&\n      window.getComputedStyle(scrollable).overscrollBehavior === \"auto\"\n    ) {\n      restoreScrollableStyles = setStyle(\n        scrollable,\n        \"overscrollBehavior\",\n        \"contain\",\n      );\n    }\n  };\n\n  const onTouchMove = (e: TouchEvent) => {\n    // Prevent scrolling the window.\n    if (\n      !scrollable ||\n      scrollable === document.documentElement ||\n      scrollable === document.body\n    ) {\n      e.preventDefault();\n      return;\n    }\n\n    // overscroll-behavior should prevent scroll chaining, but currently does not\n    // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452\n    // This checks that both the width and height do not overflow, otherwise we might\n    // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to\n    // the element will prevent vertical page scrolling. We can't add that automatically\n    // because it must be set before the touchstart event.\n    if (\n      scrollable.scrollHeight === scrollable.clientHeight &&\n      scrollable.scrollWidth === scrollable.clientWidth\n    ) {\n      e.preventDefault();\n    }\n  };\n\n  const onTouchEnd = () => {\n    if (restoreScrollableStyles) {\n      restoreScrollableStyles();\n    }\n  };\n\n  const onFocus = (e: FocusEvent) => {\n    const target = e.target as HTMLElement;\n    if (willOpenKeyboard(target)) {\n      setupStyles();\n\n      // Apply a transform to trick Safari into thinking the input is at the top of the page\n      // so it doesn't try to scroll it into view.\n      target.style.transform = \"translateY(-2000px)\";\n      requestAnimationFrame(() => {\n        target.style.transform = \"\";\n\n        // This will have prevented the browser from scrolling the focused element into view,\n        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.\n        if (visualViewport) {\n          if (visualViewport.height < window.innerHeight) {\n            // If the keyboard is already visible, do this after one additional frame\n            // to wait for the transform to be removed.\n            requestAnimationFrame(() => {\n              scrollIntoView(target);\n            });\n          } else {\n            // Otherwise, wait for the visual viewport to resize before scrolling so we can\n            // measure the correct position to scroll to.\n            visualViewport.addEventListener(\n              \"resize\",\n              () => scrollIntoView(target),\n              { once: true },\n            );\n          }\n        }\n      });\n    }\n  };\n\n  let restoreStyles: null | (() => void) = null;\n  const setupStyles = () => {\n    if (restoreStyles) {\n      return;\n    }\n\n    const onWindowScroll = () => {\n      // Last resort. If the window scrolled, scroll it back to the top.\n      // It should always be at the top because the body will have a negative margin (see below).\n      window.scrollTo(0, 0);\n    };\n\n    // Record the original scroll position so we can restore it.\n    // Then apply a negative margin to the body to offset it by the scroll position. This will\n    // enable us to scroll the window to the top, which is required for the rest of this to work.\n    const scrollX = window.pageXOffset;\n    const scrollY = window.pageYOffset;\n\n    restoreStyles = createChainedFunction(\n      addEvent(window, \"scroll\", onWindowScroll),\n      setStyle(\n        document.documentElement,\n        \"paddingRight\",\n        `${window.innerWidth - document.documentElement.clientWidth}px`,\n      ),\n      setStyle(document.documentElement, \"overflow\", \"hidden\"),\n      setStyle(document.body, \"marginTop\", `-${scrollY}px`),\n      () => {\n        window.scrollTo(scrollX, scrollY);\n      },\n    );\n\n    // Scroll to the top. The negative margin on the body will make this appear the same.\n    window.scrollTo(0, 0);\n  };\n\n  const removeEvents = createChainedFunction(\n    addEvent(document, \"touchstart\", onTouchStart, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"touchmove\", onTouchMove, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"touchend\", onTouchEnd, {\n      passive: false,\n      capture: true,\n    }),\n    addEvent(document, \"focus\", onFocus, true),\n  );\n\n  return () => {\n    // Restore styles and scroll the page back to where it was.\n    restoreScrollableStyles?.();\n    restoreStyles?.();\n    removeEvents();\n  };\n}\n\n// Sets a CSS property on an element, and returns a function to revert it to the previous value.\nfunction setStyle(element: HTMLElement, style: string, value: string) {\n  const cur = element.style[style as any];\n  element.style[style as any] = value;\n\n  return () => {\n    element.style[style as any] = cur;\n  };\n}\n\n// Adds an event listener to an element, and returns a function to remove it.\nfunction addEvent<K extends keyof GlobalEventHandlersEventMap>(\n  target: Document | Window,\n  event: K,\n  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any,\n  options?: boolean | AddEventListenerOptions,\n) {\n  // internal function, so it's ok to ignore the difficult to fix type error\n  // @ts-ignore\n  target.addEventListener(event, handler, options);\n  return () => {\n    // @ts-ignore\n    target.removeEventListener(event, handler, options);\n  };\n}\n\nfunction scrollIntoView(target: Element) {\n  const root = document.scrollingElement || document.documentElement;\n  let nextTarget: Element | null = target;\n  while (nextTarget && nextTarget !== root) {\n    // Find the parent scrollable element and adjust the scroll position if the target is not already in view.\n    const scrollable = getScrollParent(nextTarget);\n    if (\n      scrollable !== document.documentElement &&\n      scrollable !== document.body &&\n      scrollable !== nextTarget\n    ) {\n      const scrollableTop = scrollable.getBoundingClientRect().top;\n      const targetTop = nextTarget.getBoundingClientRect().top;\n      if (targetTop > scrollableTop + nextTarget.clientHeight) {\n        scrollable.scrollTop += targetTop - scrollableTop;\n      }\n    }\n\n    nextTarget = scrollable.parentElement;\n  }\n}\n\nfunction willOpenKeyboard(target: Element) {\n  return (\n    (target instanceof HTMLInputElement &&\n      !nonTextInputTypes.has(target.type)) ||\n    target instanceof HTMLTextAreaElement ||\n    (target instanceof HTMLElement && target.isContentEditable)\n  );\n}\n\nfunction isScrollable(\n  node: Element | null,\n  checkForOverflow?: boolean,\n): boolean {\n  if (!node) {\n    return false;\n  }\n  const style = window.getComputedStyle(node);\n  let isScrollable = /(auto|scroll)/.test(\n    style.overflow + style.overflowX + style.overflowY,\n  );\n\n  if (isScrollable && checkForOverflow) {\n    isScrollable =\n      node.scrollHeight !== node.clientHeight ||\n      node.scrollWidth !== node.clientWidth;\n  }\n\n  return isScrollable;\n}\n\nfunction getScrollParent(node: Element, checkForOverflow?: boolean): Element {\n  let scrollableNode: Element | null = node;\n  if (isScrollable(scrollableNode, checkForOverflow)) {\n    scrollableNode = scrollableNode.parentElement;\n  }\n\n  while (scrollableNode && !isScrollable(scrollableNode, checkForOverflow)) {\n    scrollableNode = scrollableNode.parentElement;\n  }\n\n  return (\n    scrollableNode || document.scrollingElement || document.documentElement\n  );\n}\n\nfunction testPlatform(re: RegExp) {\n  return typeof window !== \"undefined\" && window.navigator != null\n    ? re.test(\n        // @ts-expect-error userAgentData is only supported in Chrome 90+\n        window.navigator.userAgentData?.platform || window.navigator.platform,\n      )\n    : false;\n}\n\nfunction cached(fn: () => boolean) {\n  if (process.env.NODE_ENV === \"test\") {\n    return fn;\n  }\n\n  let res: boolean | null = null;\n  return () => {\n    if (res == null) {\n      res = fn();\n    }\n    return res;\n  };\n}\n\nconst isMac = cached(() => testPlatform(/^Mac/i));\n\nconst isIPhone = cached(() => testPlatform(/^iPhone/i));\n\nconst isIPad = cached(\n  () =>\n    testPlatform(/^iPad/i) ||\n    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.\n    (isMac() && navigator.maxTouchPoints > 1),\n);\n\nconst isIOS = cached(() => isIPhone() || isIPad());\n"],"names":["isScrollable"],"mappings":"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"}

package/dist-types/avatar/Avatar.d.ts

@@ -19,8 +19,12 @@ export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
      */
     size?: number;
     /**
-     * Icon to be used as a default item. Defaults to `UserIcon`
+     * Icon to be used as a default item. Defaults to `UserIcon`.
      */
     fallbackIcon?: ReactNode;
+    /**
+     * Changes Avatar's color.
+     */
+    color?: "accent" | "category-1" | "category-2" | "category-3" | "category-4" | "category-5" | "category-6" | "category-7" | "category-8" | "category-9" | "category-10" | "category-11" | "category-12" | "category-13" | "category-14" | "category-15" | "category-16" | "category-17" | "category-18" | "category-19" | "category-20";
 }
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/border-item/BorderItem.d.ts

@@ -1,6 +1,6 @@
 import { type ElementType, type ReactElement } from "react";
 import { type GridItemProps } from "../grid-item";
-import { type PolymorphicComponentPropWithRef } from "../utils";
+import { type PolymorphicComponentPropWithRef, type ResponsiveProp } from "../utils";
 export declare const BORDER_POSITION: readonly ["north", "west", "center", "east", "south"];
 export declare type BorderPosition = (typeof BORDER_POSITION)[number];
 export declare type BorderItemProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
@@ -20,6 +20,14 @@ export declare type BorderItemProps<T extends ElementType> = PolymorphicComponen
      * Defines if the item should stick to the edges of its container. Defaults to "false"
      */
     sticky?: boolean;
+    /**
+     * 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`.
+     */
+    margin?: ResponsiveProp<number | string>;
+    /**
+     * 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`.
+     */
+    padding?: ResponsiveProp<number | string>;
 }>;
 declare type BorderItemComponent = <T extends ElementType = "div">(props: BorderItemProps<T>) => ReactElement | null;
 export declare const BorderItem: BorderItemComponent;

package/dist-types/border-layout/BorderLayout.d.ts

@@ -1,7 +1,7 @@
 import { type ElementType, type ReactElement } from "react";
 import type { BorderItemProps } from "../border-item";
 import { type GridLayoutProps } from "../grid-layout";
-import { type PolymorphicComponentPropWithRef } from "../utils";
+import { type PolymorphicComponentPropWithRef, type ResponsiveProp } from "../utils";
 export declare type BorderLayoutProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, {
     /**
      * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0
@@ -19,6 +19,14 @@ export declare type BorderLayoutProps<T extends ElementType> = PolymorphicCompon
      * Border item components to be rendered.
      */
     children: ReactElement<BorderItemProps<T>>[];
+    /**
+     * 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`.
+     */
+    margin?: ResponsiveProp<number | string>;
+    /**
+     * 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`.
+     */
+    padding?: ResponsiveProp<number | string>;
 }>;
 declare type BorderLayoutComponent = <T extends ElementType = "div">(props: BorderLayoutProps<T>) => ReactElement | null;
 export declare const BorderLayout: BorderLayoutComponent;