@salt-ds/core 1.18.1 → 1.20.0

package/dist-cjs/drawer/DrawerCloseButton.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var Button = require('../button/Button.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var icons = require('@salt-ds/icons');
+var DrawerCloseButton$1 = require('./DrawerCloseButton.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
+
+const withBaseName = makePrefixer.makePrefixer("saltDrawerCloseButton");
+const DrawerCloseButton = React.forwardRef(
+  function DrawerCloseButton2({ className, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-drawer-close-button",
+      css: DrawerCloseButton$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: withBaseName("container"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, {
+        ref,
+        "aria-label": "Close Drawer",
+        variant: "secondary",
+        className: clsx__default["default"](withBaseName(), className),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
+          "aria-hidden": true
+        })
+      })
+    });
+  }
+);
+
+exports.DrawerCloseButton = DrawerCloseButton;
+//# sourceMappingURL=DrawerCloseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerCloseButton.js","sources":["../src/drawer/DrawerCloseButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Button, ButtonProps } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { CloseIcon } from \"@salt-ds/icons\";\n\nimport drawerCloseButtonCss from \"./DrawerCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltDrawerCloseButton\");\n\nexport const DrawerCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function DrawerCloseButton({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer-close-button\",\n      css: drawerCloseButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={withBaseName(\"container\")}>\n        <Button\n          ref={ref}\n          aria-label=\"Close Drawer\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(), className)}\n          {...rest}\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DrawerCloseButton","useWindow","useComponentCssInjection","drawerCloseButtonCss","jsx","Button","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA,CAAA;AAElD,MAAM,iBAAoB,GAAAC,gBAAA;AAAA,EAC/B,SAASC,kBAAkB,CAAA,EAAE,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACtD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,0BAAA;AAAA,MACR,GAAK,EAAAC,mBAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACtC,QAAC,kBAAAA,cAAA,CAAAC,aAAA,EAAA;AAAA,QACC,GAAA;AAAA,QACA,YAAW,EAAA,cAAA;AAAA,QACX,OAAQ,EAAA,WAAA;AAAA,QACR,SAAW,EAAAC,wBAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAF,cAAA,CAAAG,eAAA,EAAA;AAAA,UAAU,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OACzB,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/file-drop-zone/FileDropZone.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n  flex-direction: column;\n  padding: var(--salt-spacing-200);\n  gap: var(--salt-spacing-200);\n  width: 100%;\n  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n  box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n  background: var(--salt-target-background-hover);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n  display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-target-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+var css_248z = ".saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n  border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));\n  flex-direction: column;\n  padding: var(--salt-spacing-200);\n  gap: var(--salt-spacing-200);\n  width: 100%;\n  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n  box-sizing: border-box;\n}\n\n.saltFileDropZone-active {\n  background: var(--salt-target-background-hover);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n  display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-target-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FileDropZone.css.js.map

package/dist-cjs/index.js

@@ -26,6 +26,14 @@ var InteractableCard = require('./card/InteractableCard.js');
 var Checkbox = require('./checkbox/Checkbox.js');
 var CheckboxGroup = require('./checkbox/CheckboxGroup.js');
 var CheckboxIcon = require('./checkbox/CheckboxIcon.js');
+var Dialog = require('./dialog/Dialog.js');
+var DialogHeader = require('./dialog/DialogHeader.js');
+var DialogActions = require('./dialog/DialogActions.js');
+var DialogContent = require('./dialog/DialogContent.js');
+var DialogContext = require('./dialog/DialogContext.js');
+var DialogCloseButton = require('./dialog/DialogCloseButton.js');
+var Drawer = require('./drawer/Drawer.js');
+var DrawerCloseButton = require('./drawer/DrawerCloseButton.js');
 var FileDropZone = require('./file-drop-zone/FileDropZone.js');
 var FileDropZoneIcon = require('./file-drop-zone/FileDropZoneIcon.js');
 var FileDropZoneTrigger = require('./file-drop-zone/FileDropZoneTrigger.js');
@@ -41,6 +49,7 @@ var GridItem = require('./grid-item/GridItem.js');
 var GridLayout = require('./grid-layout/GridLayout.js');
 var Input = require('./input/Input.js');
 var Link = require('./link/Link.js');
+var LinkCard = require('./link-card/LinkCard.js');
 var MultilineInput = require('./multiline-input/MultilineInput.js');
 var NavigationItem = require('./navigation-item/NavigationItem.js');
 var Pagination = require('./pagination/Pagination.js');
@@ -70,6 +79,7 @@ var TextAction = require('./text/TextAction.js');
 var Density = require('./theme/Density.js');
 var Theme = require('./theme/Theme.js');
 var Mode = require('./theme/Mode.js');
+var Corner = require('./theme/Corner.js');
 var Toast = require('./toast/Toast.js');
 var ToastContent = require('./toast/ToastContent.js');
 var SaltProvider = require('./salt-provider/SaltProvider.js');
@@ -129,6 +139,16 @@ exports.InteractableCard = InteractableCard.InteractableCard;
 exports.Checkbox = Checkbox.Checkbox;
 exports.CheckboxGroup = CheckboxGroup.CheckboxGroup;
 exports.CheckboxIcon = CheckboxIcon.CheckboxIcon;
+exports.ConditionalScrimWrapper = Dialog.ConditionalScrimWrapper;
+exports.Dialog = Dialog.Dialog;
+exports.DialogHeader = DialogHeader.DialogHeader;
+exports.DialogActions = DialogActions.DialogActions;
+exports.DialogContent = DialogContent.DialogContent;
+exports.DialogContext = DialogContext.DialogContext;
+exports.useDialogContext = DialogContext.useDialogContext;
+exports.DialogCloseButton = DialogCloseButton.DialogCloseButton;
+exports.Drawer = Drawer.Drawer;
+exports.DrawerCloseButton = DrawerCloseButton.DrawerCloseButton;
 exports.FileDropZone = FileDropZone.FileDropZone;
 exports.FileDropZoneIcon = FileDropZoneIcon.FileDropZoneIcon;
 exports.FileDropZoneTrigger = FileDropZoneTrigger.FileDropZoneTrigger;
@@ -148,6 +168,7 @@ exports.GridItem = GridItem.GridItem;
 exports.GridLayout = GridLayout.GridLayout;
 exports.Input = Input.Input;
 exports.Link = Link.Link;
+exports.LinkCard = LinkCard.LinkCard;
 exports.MultilineInput = MultilineInput.MultilineInput;
 exports.NavigationItem = NavigationItem.NavigationItem;
 exports.Pagination = Pagination.Pagination;
@@ -183,6 +204,7 @@ exports.TextAction = TextAction.TextAction;
 exports.DensityValues = Density.DensityValues;
 exports.getCharacteristicValue = Theme.getCharacteristicValue;
 exports.ModeValues = Mode.ModeValues;
+exports.UNSTABLE_CornerValues = Corner.UNSTABLE_CornerValues;
 exports.Toast = Toast.Toast;
 exports.ToastContent = ToastContent.ToastContent;
 exports.BreakpointContext = SaltProvider.BreakpointContext;
@@ -190,6 +212,7 @@ exports.DEFAULT_DENSITY = SaltProvider.DEFAULT_DENSITY;
 exports.DensityContext = SaltProvider.DensityContext;
 exports.SaltProvider = SaltProvider.SaltProvider;
 exports.ThemeContext = SaltProvider.ThemeContext;
+exports.UNSTABLE_SaltProviderNext = SaltProvider.UNSTABLE_SaltProviderNext;
 exports.useBreakpoints = SaltProvider.useBreakpoints;
 exports.useDensity = SaltProvider.useDensity;
 exports.useTheme = SaltProvider.useTheme;

package/dist-cjs/index.js.map

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

package/dist-cjs/link/Link.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-navigable-textDecoration);\n  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: var(--salt-size-adornmentGap);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
+var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-navigable-textDecoration);\n  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: var(--salt-text-letterSpacing);\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink .saltLink-icon {\n  margin-left: var(--salt-spacing-75);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Link.css.js.map

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

@@ -0,0 +1,6 @@
+'use strict';
+
+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, 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}\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  --linkCard-accent-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  --linkCard-accent-color: var(--salt-container-secondary-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-accent);\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-accent);\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-accent);\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-accent);\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.saltLinkCard:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  --linkCard-accent-color: var(--salt-selectable-foreground-hover);\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-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow);\n  --linkCard-accent-color: var(--salt-selectable-foreground-selected);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LinkCard.css.js.map

package/dist-cjs/link-card/LinkCard.css.js.map

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

package/dist-cjs/link-card/LinkCard.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var capitalize = require('../utils/capitalize.js');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var LinkCard$1 = require('./LinkCard.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltLinkCard");
+const LinkCard = React.forwardRef(
+  function LinkCard2(props, ref) {
+    const {
+      accent,
+      children,
+      className,
+      href,
+      variant = "primary",
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-link-card",
+      css: LinkCard$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("a", {
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(variant),
+        {
+          [withBaseName("accent")]: accent,
+          [withBaseName(`accent${capitalize.capitalize(accent != null ? accent : "")}`)]: accent
+        },
+        className
+      ),
+      href,
+      ...rest,
+      ref,
+      children
+    });
+  }
+);
+
+exports.LinkCard = LinkCard;
+//# sourceMappingURL=LinkCard.js.map

package/dist-cjs/link-card/LinkCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkCard.js","sources":["../src/link-card/LinkCard.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport linkCardCss from \"./LinkCard.css\";\n\nconst withBaseName = makePrefixer(\"saltLinkCard\");\n\nexport interface LinkCardProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const LinkCard = forwardRef<HTMLAnchorElement, LinkCardProps>(\n  function LinkCard(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      href,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-link-card\",\n      css: linkCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <a\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent ?? \"\")}`)]: accent,\n          },\n          className\n        )}\n        href={href}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </a>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","LinkCard","useWindow","useComponentCssInjection","linkCardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AAazC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACP,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,GAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAASC,sBAAW,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,SACvD;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/multiline-input/MultilineInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  color: inherit;\n  cursor: inherit;\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  line-height: var(--salt-text-lineHeight);\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  min-height: 0;\n  resize: vertical;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  color: inherit;\n  cursor: inherit;\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  line-height: var(--salt-text-lineHeight);\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  min-height: 0;\n  resize: vertical;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=MultilineInput.css.js.map

package/dist-cjs/navigation-item/NavigationItem.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  position: relative;\n  background: none;\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  text-decoration: none;\n  cursor: var(--salt-selectable-cursor-hover);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n  top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  --saltButton-margin: var(--salt-spacing-50) 0;\n\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-25);\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--salt-size-indicator);\n  left: var(--salt-spacing-25);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n  background: var(--salt-navigable-indicator-active);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  position: relative;\n  background: none;\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  text-decoration: none;\n  cursor: var(--salt-selectable-cursor-hover);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n  top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  --saltButton-margin: var(--salt-spacing-50) 0;\n\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-25);\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--salt-size-indicator);\n  left: var(--salt-spacing-25);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n  background: var(--salt-navigable-indicator-active);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=NavigationItem.css.js.map

package/dist-cjs/panel/Panel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, initial);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n  width: var(--saltPanel-width, 100%);\n}\n";
+var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, initial);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n  width: var(--saltPanel-width, 100%);\n  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Panel.css.js.map

package/dist-cjs/pill/Pill.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltPill {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--saltPill-background, var(--salt-actionable-primary-background));\n  border-radius: 0;\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  color: var(--saltPill-color, var(--salt-actionable-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable  */\n.saltPill-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n  color: var(--salt-actionable-primary-foreground-hover);\n  background: var(--salt-actionable-primary-background-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n  background: var(--salt-actionable-primary-background-active);\n  color: var(--salt-actionable-primary-foreground-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n  color: var(--salt-actionable-primary-foreground-disabled);\n  background: var(--salt-actionable-primary-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltPill {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--saltPill-background, var(--salt-actionable-primary-background));\n  border-radius: var(--saltPill-borderRadius, var(--salt-palette-corner-weaker, 0));\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  color: var(--saltPill-color, var(--salt-actionable-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable  */\n.saltPill-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n  color: var(--salt-actionable-primary-foreground-hover);\n  background: var(--salt-actionable-primary-background-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n  background: var(--salt-actionable-primary-background-active);\n  color: var(--salt-actionable-primary-foreground-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n  color: var(--salt-actionable-primary-foreground-disabled);\n  background: var(--salt-actionable-primary-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Pill.css.js.map

package/dist-cjs/salt-provider/SaltProvider.js

@@ -22,16 +22,40 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const DEFAULT_DENSITY = "medium";
 const DEFAULT_THEME_NAME = "salt-theme";
+const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next";
 const DEFAULT_MODE = "light";
+const DEFAULT_CORNER = "sharp";
 const DensityContext = React.createContext(DEFAULT_DENSITY);
 const ThemeContext = React.createContext({
   theme: "",
-  mode: DEFAULT_MODE
+  mode: DEFAULT_MODE,
+  themeNext: false,
+  UNSTABLE_corner: DEFAULT_CORNER
 });
 const BreakpointContext = React.createContext(Breakpoints.DEFAULT_BREAKPOINTS);
-const createThemedChildren = (children, themeName, density, mode, applyClassesTo) => {
+const getThemeNames = (themeName, themeNext) => {
+  if (themeNext) {
+    return themeName === DEFAULT_THEME_NAME ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME] : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];
+  } else {
+    {
+      return themeName === DEFAULT_THEME_NAME ? [DEFAULT_THEME_NAME] : [DEFAULT_THEME_NAME, themeName];
+    }
+  }
+};
+const createThemedChildren = ({
+  children,
+  themeName,
+  density,
+  mode,
+  applyClassesTo,
+  themeNext,
+  corner
+}) => {
   var _a;
-  const themeNames = themeName === DEFAULT_THEME_NAME ? [DEFAULT_THEME_NAME] : [DEFAULT_THEME_NAME, themeName];
+  const themeNames = getThemeNames(themeName, themeNext);
+  const themeNextProps = {
+    "data-corner": corner
+  };
   if (applyClassesTo === "root") {
     return children;
   } else if (applyClassesTo === "child") {
@@ -42,7 +66,8 @@ const createThemedChildren = (children, themeName, density, mode, applyClassesTo
           ...themeNames,
           `salt-density-${density}`
         ),
-        "data-mode": mode
+        "data-mode": mode,
+        ...themeNext ? themeNextProps : {}
       });
     } else {
       console.warn(
@@ -61,6 +86,7 @@ SaltProvider can only apply CSS classes for theming to a single nested child ele
         `salt-density-${density}`
       ),
       "data-mode": mode,
+      ...themeNext ? themeNextProps : {},
       children
     });
   }
@@ -71,20 +97,24 @@ function InternalSaltProvider({
   density: densityProp,
   theme: themeProp,
   mode: modeProp,
-  breakpoints: breakpointsProp
+  breakpoints: breakpointsProp,
+  themeNext,
+  corner: cornerProp
 }) {
-  var _a;
+  var _a, _b;
   const inheritedDensity = React.useContext(DensityContext);
   const {
     theme: inheritedTheme,
     mode: inheritedMode,
-    window: inheritedWindow
+    window: inheritedWindow,
+    UNSTABLE_corner: inheritedCorner
   } = React.useContext(ThemeContext);
   const isRootProvider = inheritedTheme === void 0 || inheritedTheme === "";
   const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY;
   const themeName = themeProp != null ? themeProp : inheritedTheme === "" ? DEFAULT_THEME_NAME : inheritedTheme;
   const mode = modeProp != null ? modeProp : inheritedMode;
   const breakpoints = breakpointsProp != null ? breakpointsProp : Breakpoints.DEFAULT_BREAKPOINTS;
+  const corner = (_b = cornerProp != null ? cornerProp : inheritedCorner) != null ? _b : DEFAULT_CORNER;
   const applyClassesTo = applyClassesToProp != null ? applyClassesToProp : isRootProvider ? "root" : "scope";
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -93,18 +123,26 @@ function InternalSaltProvider({
     window: targetWindow
   });
   const themeContextValue = React.useMemo(
-    () => ({ theme: themeName, mode, window: targetWindow }),
-    [themeName, mode, targetWindow]
+    () => ({
+      theme: themeName,
+      mode,
+      window: targetWindow,
+      themeNext: Boolean(themeNext),
+      UNSTABLE_corner: corner
+    }),
+    [themeName, mode, targetWindow, themeNext, corner]
   );
-  const themedChildren = createThemedChildren(
+  const themedChildren = createThemedChildren({
     children,
     themeName,
     density,
     mode,
-    applyClassesTo
-  );
+    applyClassesTo,
+    themeNext,
+    corner
+  });
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-    const themeNames = themeName === DEFAULT_THEME_NAME ? [DEFAULT_THEME_NAME] : [DEFAULT_THEME_NAME, themeName];
+    const themeNames = getThemeNames(themeName, themeNext);
     if (applyClassesTo === "root" && targetWindow) {
       if (inheritedWindow != targetWindow) {
         targetWindow.document.documentElement.classList.add(
@@ -112,6 +150,9 @@ function InternalSaltProvider({
           `salt-density-${density}`
         );
         targetWindow.document.documentElement.dataset.mode = mode;
+        if (themeNext) {
+          targetWindow.document.documentElement.dataset.corner = corner;
+        }
       } else {
         console.warn(
           "SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider."
@@ -125,9 +166,21 @@ function InternalSaltProvider({
           `salt-density-${density}`
         );
         targetWindow.document.documentElement.dataset.mode = void 0;
+        if (themeNext) {
+          delete targetWindow.document.documentElement.dataset.corner;
+        }
       }
     };
-  }, [applyClassesTo, density, mode, themeName, targetWindow, inheritedWindow]);
+  }, [
+    applyClassesTo,
+    density,
+    mode,
+    themeName,
+    targetWindow,
+    inheritedWindow,
+    themeNext,
+    corner
+  ]);
   const saltProvider = /* @__PURE__ */ jsxRuntime.jsx(DensityContext.Provider, {
     value: density,
     children: /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, {
@@ -159,6 +212,18 @@ function SaltProvider({
     })
   });
 }
+function UNSTABLE_SaltProviderNext({
+  enableStyleInjection,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.StyleInjectionProvider, {
+    value: enableStyleInjection,
+    children: /* @__PURE__ */ jsxRuntime.jsx(InternalSaltProvider, {
+      ...restProps,
+      themeNext: true
+    })
+  });
+}
 const useTheme = () => {
   const { window, ...contextWithoutWindow } = React.useContext(ThemeContext);
   return contextWithoutWindow;
@@ -177,6 +242,7 @@ exports.DEFAULT_DENSITY = DEFAULT_DENSITY;
 exports.DensityContext = DensityContext;
 exports.SaltProvider = SaltProvider;
 exports.ThemeContext = ThemeContext;
+exports.UNSTABLE_SaltProviderNext = UNSTABLE_SaltProviderNext;
 exports.useBreakpoints = useBreakpoints;
 exports.useDensity = useDensity;
 exports.useTheme = useTheme;

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

@@ -1 +1 @@
-{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  createContext,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n  useComponentCssInjection,\n  StyleInjectionProvider,\n} from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n  children: ReactNode,\n  themeName: ThemeName,\n  density: Density,\n  mode: Mode,\n  applyClassesTo?: TargetElement\n) => {\n  const themeNames =\n    themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME]\n      : [DEFAULT_THEME_NAME, themeName];\n  if (applyClassesTo === \"root\") {\n    return children;\n  } else if (applyClassesTo === \"child\") {\n    if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return React.cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          ...themeNames,\n          `salt-density-${density}`\n        ),\n        // @ts-expect-error data-* props need custom typing\n        \"data-mode\": mode,\n      });\n    } else {\n      console.warn(\n        `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`\n      );\n      return children;\n    }\n  } else {\n    return (\n      <div\n        className={clsx(\n          `salt-provider`,\n          ...themeNames,\n          `salt-density-${density}`\n        )}\n        data-mode={mode}\n      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  applyClassesTo?: TargetElement;\n  density?: Density;\n  theme?: ThemeName;\n  mode?: Mode;\n  breakpoints?: Breakpoints;\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({ theme: themeName, mode, window: targetWindow }),\n    [themeName, mode, targetWindow]\n  );\n\n  const themedChildren = createThemedChildren(\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames =\n      themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow != targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n      }\n    };\n  }, [applyClassesTo, density, mode, themeName, targetWindow, inheritedWindow]);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointContext.Provider value={breakpoints}>\n          <ViewportProvider>{themedChildren}</ViewportProvider>\n        </BreakpointContext.Provider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","clsx","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}
+{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  createContext,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n  useComponentCssInjection,\n  StyleInjectionProvider,\n} from \"@salt-ds/styles\";\nimport { UNSTABLE_Corner } from \"../theme/Corner\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst UNSTABLE_ADDITIONAL_THEME_NAME = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: UNSTABLE_Corner = \"sharp\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  UNSTABLE_corner: UNSTABLE_Corner;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  UNSTABLE_corner: DEFAULT_CORNER,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (themeName: ThemeName, themeNext?: boolean) => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME]\n      : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];\n  } else {\n    {\n      return themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    }\n  }\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  UNSTABLE_SaltProviderNextAdditionalProps) => {\n  const themeNames = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  } else if (applyClassesTo === \"child\") {\n    if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return React.cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          ...themeNames,\n          `salt-density-${density}`\n        ),\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? themeNextProps : {}),\n      });\n    } else {\n      console.warn(\n        `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`\n      );\n      return children;\n    }\n  } else {\n    return (\n      <div\n        className={clsx(\n          `salt-provider`,\n          ...themeNames,\n          `salt-density-${density}`\n        )}\n        data-mode={mode}\n        {...(themeNext ? themeNextProps : {})}\n      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  applyClassesTo?: TargetElement;\n  density?: Density;\n  theme?: ThemeName;\n  mode?: Mode;\n  breakpoints?: Breakpoints;\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n  themeNext,\n  corner: cornerProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    UNSTABLE_corner: inheritedCorner,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      UNSTABLE_corner: corner,\n    }),\n    [themeName, mode, targetWindow, themeNext, corner]\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames = getThemeNames(themeName, themeNext);\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow != targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n  ]);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointContext.Provider value={breakpoints}>\n          <ViewportProvider>{themedChildren}</ViewportProvider>\n        </BreakpointContext.Provider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface UNSTABLE_SaltProviderNextAdditionalProps {\n  corner?: UNSTABLE_Corner;\n}\n\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderProps &\n  UNSTABLE_SaltProviderNextAdditionalProps;\n\nexport function UNSTABLE_SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: UNSTABLE_SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","clsx","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}