@salt-ds/core 1.18.0 → 1.19.0

package/css/salt-core.css

@@ -131,7 +131,7 @@
   min-height: var(--avatar-container-size);
   overflow: hidden;
   user-select: none;
-  border-radius: 50%;
+  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));
 }
 .saltAvatar:has(img),
 .saltAvatar-withImage {
@@ -155,9 +155,10 @@
   padding-right: var(--salt-spacing-50);
   height: var(--salt-text-notation-lineHeight);
   min-width: var(--salt-text-notation-lineHeight);
-  border-radius: 9999px;
+  border-radius: var(--salt-palette-corner-strongest, 9999px);
   white-space: nowrap;
   z-index: var(--salt-zIndex-default);
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
   display: inline-flex;
@@ -184,6 +185,7 @@
   border-color: var(--saltBanner-borderColor, var(--banner-borderColor));
   border-width: var(--saltBanner-borderWidth, var(--salt-size-border));
   border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));
+  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;
   display: inline-flex;
   gap: var(--salt-spacing-75);
@@ -286,7 +288,7 @@
   border-color: var(--saltButton-borderColor, transparent);
   border-style: var(--saltButton-borderStyle, solid);
   border-width: var(--saltButton-borderWidth, 0);
-  border-radius: var(--saltButton-borderRadius, 0);
+  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));
   color: var(--saltButton-text-color, var(--button-text-color));
   cursor: var(--saltButton-cursor, pointer);
   display: inline-flex;
@@ -351,6 +353,9 @@
   border-style: var(--salt-container-borderStyle);
   padding: var(--saltCard-padding, var(--salt-spacing-200));
   position: relative;
+  transition: box-shadow var(--salt-duration-instant) ease-in-out;
+  box-sizing: border-box;
+  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
@@ -433,7 +438,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-width: var(--saltCard-borderWidth, var(--card-borderWidth));
   border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));
   border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));
-  border-radius: var(--saltCard-borderRadius, 0);
+  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
   display: block;
   transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);
   padding: var(--saltCard-padding, var(--salt-spacing-300));
@@ -534,6 +539,7 @@ a:link .saltInteractableCard * {
 .saltCheckbox-input,
 .saltCheckboxIcon {
   margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);
+  box-sizing: border-box;
 }
 .saltCheckboxIcon > svg {
   transform: translate(0px, 0px);
@@ -603,11 +609,13 @@ a:link .saltInteractableCard * {
   height: var(--checkbox-size);
   min-height: var(--checkbox-size);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
+  border-radius: var(--salt-palette-corner-weaker, 0);
   color: var(--salt-selectable-foreground);
   background: var(--salt-container-primary-background);
   position: relative;
   --saltIcon-size: 100%;
   display: flex;
+  box-sizing: border-box;
 }
 .saltCheckbox:hover .saltCheckboxIcon,
 .saltCheckbox:hover .saltCheckboxIcon-indeterminate {
@@ -660,6 +668,85 @@ a:link .saltInteractableCard * {
   color: var(--salt-content-primary-foreground);
 }
 
+/* src/drawer/Drawer.css */
+.saltDrawer {
+  background: var(--drawer-background);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  padding: var(--salt-spacing-300);
+  box-shadow: var(--salt-overlayable-shadow-modal);
+  z-index: var(--salt-zIndex-drawer);
+  position: fixed;
+  top: 0;
+  box-sizing: border-box;
+}
+.saltDrawer-primary {
+  --drawer-background: var(--salt-container-primary-background);
+}
+.saltDrawer-secondary {
+  --drawer-background: var(--salt-container-secondary-background);
+}
+.saltDrawer-top {
+  left: 0;
+  right: 0;
+  bottom: auto;
+}
+.saltDrawer-top.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-bottom);
+}
+.saltDrawer-top.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-bottom);
+}
+.saltDrawer-right {
+  left: auto;
+  right: 0;
+  height: 100%;
+}
+.saltDrawer-right.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-right);
+}
+.saltDrawer-right.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-right);
+}
+.saltDrawer-left {
+  left: 0;
+  right: auto;
+  height: 100%;
+}
+.saltDrawer-left.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-left);
+}
+.saltDrawer-left.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-left);
+}
+.saltDrawer-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: auto;
+}
+.saltDrawer-bottom.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-top);
+}
+.saltDrawer-bottom.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-top);
+}
+
+/* src/drawer/DrawerCloseButton.css */
+.saltDrawerCloseButton-container {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+}
+.saltButton-secondary.saltDrawerCloseButton {
+  position: fixed;
+  margin-top: calc(var(--salt-spacing-300) * -1);
+  margin-right: calc(var(--salt-spacing-300) * -1);
+}
+
 /* src/file-drop-zone/FileDropZone.css */
 .saltFileDropZone {
   color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
@@ -669,6 +756,7 @@ a:link .saltInteractableCard * {
   align-items: center;
   justify-content: center;
   border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
+  border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));
   flex-direction: column;
   padding: var(--salt-spacing-200);
   gap: var(--salt-spacing-200);
@@ -676,6 +764,7 @@ a:link .saltInteractableCard * {
   font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));
   font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));
   line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));
+  box-sizing: border-box;
 }
 .saltFileDropZone-active {
   background: var(--salt-target-background-hover);
@@ -733,6 +822,7 @@ a:link .saltInteractableCard * {
   flex-wrap: var(--flexLayout-wrap);
   justify-content: var(--flexLayout-justify);
   align-items: var(--flexLayout-align);
+  box-sizing: border-box;
 }
 .saltFlexLayout-separator {
   gap: calc(var(--flexLayout-gap) * 2);
@@ -930,6 +1020,7 @@ a:link .saltInteractableCard * {
   padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));
   position: relative;
   width: 100%;
+  box-sizing: border-box;
 }
 .saltInput:hover {
   --input-borderStyle: var(--salt-editable-borderStyle-hover);
@@ -1095,7 +1186,7 @@ a:link .saltInteractableCard * {
 }
 .saltLink {
   color: var(--link-color);
-  letter-spacing: 0px;
+  letter-spacing: var(--salt-text-letterSpacing);
   text-decoration: var(--link-textDecoration);
   font-family: var(--link-fontFamily);
 }
@@ -1105,8 +1196,8 @@ a:link .saltInteractableCard * {
 .saltText-secondary {
   --link-color: var(--salt-content-secondary-foreground);
 }
-.saltLink-icon {
-  margin-left: var(--salt-size-adornmentGap);
+.saltLink .saltLink-icon {
+  margin-left: var(--salt-spacing-75);
   margin-bottom: -2px;
 }
 .saltLink:visited {
@@ -1135,6 +1226,77 @@ a:link .saltInteractableCard * {
   opacity: 0;
 }
 
+/* src/link-card/LinkCard.css */
+.saltLinkCard {
+  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));
+  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));
+  border-radius: var(--saltLinkCard-borderRadius, 0);
+  display: block;
+  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));
+  position: relative;
+  text-decoration: none;
+  transition: box-shadow var(--salt-duration-instant) ease-in-out;
+}
+.saltLinkCard-primary {
+  background: var(--saltLinkCard-background, var(--salt-container-primary-background));
+  border-color: var(--salt-container-primary-borderColor);
+  --linkCard-accent-color: var(--salt-container-primary-borderColor);
+}
+.saltLinkCard-secondary {
+  background: var(--saltLinkCard-background, var(--salt-container-secondary-background));
+  border-color: var(--salt-container-secondary-borderColor);
+  --linkCard-accent-color: var(--salt-container-secondary-borderColor);
+}
+.saltLinkCard-accent::after {
+  content: "";
+  position: absolute;
+  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));
+}
+.saltLinkCard-accentBottom::after {
+  left: calc(-1 * var(--salt-size-border));
+  bottom: calc(-1 * var(--salt-size-border));
+  height: var(--salt-size-accent);
+  width: calc(100% + calc(2 * var(--salt-size-border)));
+}
+.saltLinkCard-accentLeft::after {
+  left: calc(-1 * var(--salt-size-border));
+  top: calc(-1 * var(--salt-size-border));
+  height: calc(100% + calc(2 * var(--salt-size-border)));
+  width: var(--salt-size-accent);
+}
+.saltLinkCard-accentTop::after {
+  left: calc(-1 * var(--salt-size-border));
+  top: calc(-1 * var(--salt-size-border));
+  height: var(--salt-size-accent);
+  width: calc(100% + calc(2 * var(--salt-size-border)));
+}
+.saltLinkCard-accentRight::after {
+  right: calc(-1 * var(--salt-size-border));
+  top: calc(-1 * var(--salt-size-border));
+  height: calc(100% + calc(2 * var(--salt-size-border)));
+  width: var(--salt-size-accent);
+}
+.saltLinkCard:focus-visible {
+  cursor: var(--salt-selectable-cursor-hover);
+  box-shadow: var(--salt-overlayable-shadow-hover);
+  outline-color: var(--salt-focused-outlineColor);
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-offset: var(--salt-focused-outlineOffset);
+  --linkCard-accent-color: var(--salt-selectable-foreground-hover);
+}
+.saltLinkCard:hover {
+  cursor: var(--salt-selectable-cursor-hover);
+  box-shadow: var(--salt-overlayable-shadow-hover);
+  --linkCard-accent-color: var(--salt-selectable-foreground-hover);
+}
+.saltLinkCard:active {
+  cursor: var(--salt-selectable-cursor-active);
+  border-color: var(--salt-selectable-borderColor-selected);
+  box-shadow: var(--salt-overlayable-shadow);
+  --linkCard-accent-color: var(--salt-selectable-foreground-selected);
+}
+
 /* src/multiline-input/MultilineInput.css */
 .saltMultilineInput {
   --multilineInput-borderColor: var(--salt-editable-borderColor);
@@ -1539,6 +1701,7 @@ a:link .saltInteractableCard * {
   overflow: auto;
   padding: var(--saltPanel-padding, var(--salt-size-container-spacing));
   width: var(--saltPanel-width, 100%);
+  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
 }
 
 /* src/pill/Pill.css */
@@ -1547,7 +1710,7 @@ a:link .saltInteractableCard * {
   display: inline-flex;
   align-items: center;
   background: var(--saltPill-background, var(--salt-actionable-primary-background));
-  border-radius: 0;
+  border-radius: var(--saltPill-borderRadius, var(--salt-palette-corner-weaker, 0));
   border: 0;
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
   min-height: var(--salt-text-minHeight);
@@ -1616,9 +1779,11 @@ a:link .saltInteractableCard * {
   padding: 0;
   width: var(--salt-size-selectable);
   z-index: var(--salt-zIndex-default);
+  box-sizing: border-box;
 }
 .saltRadioButtonIcon {
   margin-top: var(--radioButton-icon-marginTop);
+  box-sizing: border-box;
 }
 .saltRadioButtonIcon > svg {
   transform: translate(0px, 0px);
@@ -1893,6 +2058,7 @@ a:link .saltInteractableCard * {
 .saltSwitch-track {
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   --saltIcon-size: 100%;
+  border-radius: var(--salt-palette-corner-weak, 0);
   display: flex;
   flex-shrink: 0;
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
@@ -1900,6 +2066,7 @@ a:link .saltInteractableCard * {
   align-items: center;
   color: var(--salt-selectable-foreground);
   background: var(--salt-container-primary-background);
+  box-sizing: border-box;
 }
 .saltSwitch-label {
   padding-top: var(--salt-spacing-25);
@@ -1937,6 +2104,8 @@ a:link .saltInteractableCard * {
   background: currentColor;
   margin: var(--salt-spacing-25);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weaker, 0);
 }
 .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,
 .saltSwitch:hover .saltSwitch-thumb {
@@ -2137,6 +2306,7 @@ label.saltText small,
   border-color: var(--saltToast-borderColor, var(--toast-borderColor));
   border-width: var(--saltToast-borderWidth, var(--salt-size-border));
   border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));
+  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;
   box-shadow: var(--salt-overlayable-shadow-popout);
   display: flex;
@@ -2186,7 +2356,7 @@ label.saltText small,
   display: inline-flex;
   background: var(--salt-actionable-secondary-background);
   border: 0 solid transparent;
-  border-radius: 0;
+  border-radius: var(--salt-palette-corner-weaker, 0);
   height: var(--salt-size-base);
   color: var(--salt-actionable-secondary-foreground);
   text-transform: var(--salt-text-action-textTransform);
@@ -2234,6 +2404,7 @@ label.saltText small,
   display: flex;
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border-radius: var(--salt-palette-corner-weak, 0);
   width: fit-content;
   gap: var(--salt-spacing-50);
   padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
@@ -2260,6 +2431,7 @@ label.saltText small,
   border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));
   border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
   border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
+  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
   box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
   color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));
   font-family: var(--salt-text-fontFamily);
@@ -2321,6 +2493,7 @@ label.saltText small,
   border-width: var(--salt-size-bar-small);
   border-radius: calc(var(--salt-size-base) * 3);
   border-color: var(--salt-track-borderColor);
+  box-sizing: border-box;
 }
 .saltCircularProgress-bar {
   inline-size: calc(var(--salt-size-base) * 3);
@@ -2329,6 +2502,7 @@ label.saltText small,
   border-width: var(--salt-size-bar-strong);
   border-radius: calc(var(--salt-size-base) * 3);
   border-color: var(--salt-accent-background);
+  box-sizing: border-box;
 }
 .saltCircularProgress-bars {
   position: absolute;
@@ -2365,6 +2539,7 @@ label.saltText small,
   display: flex;
   min-width: 400px;
   font-size: var(--linearProgress-fontSize);
+  box-sizing: border-box;
 }
 .saltLinearProgress-barContainer {
   background: none;
@@ -2400,4 +2575,4 @@ label.saltText small,
   padding-left: var(--salt-spacing-100);
 }
 
-/* src/ea07bb70-951b-4950-986a-9d5bf6b2ea75.css */
+/* src/74bb8614-e2fd-43f5-8567-6cfe0430ac06.css */

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Avatar.css.js.map

package/dist-cjs/badge/Badge.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--salt-text-notation-lineHeight);\n  min-width: var(--salt-text-notation-lineHeight);\n  border-radius: 9999px;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--salt-text-notation-lineHeight);\n  min-width: var(--salt-text-notation-lineHeight);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Badge.css.js.map

package/dist-cjs/banner/Banner.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\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}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\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}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Banner.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
+var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Button.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n  border-style: var(--salt-container-borderStyle);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\n  position: relative;\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-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 Card if `accent=\"left\"` */\n.saltCard-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 Card if `accent=\"top\"` */\n.saltCard-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 Card if `accent=\"right\"` */\n.saltCard-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/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n  position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-border));\n  border-style: var(--salt-container-borderStyle);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\n  position: relative;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-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 Card if `accent=\"left\"` */\n.saltCard-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 Card if `accent=\"top\"` */\n.saltCard-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 Card if `accent=\"right\"` */\n.saltCard-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/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n  position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Card.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n  padding: var(--saltCard-padding, var(--salt-spacing-300));\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-content-primary-foreground));\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}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-primary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-secondary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-content-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n  padding: var(--saltCard-padding, var(--salt-spacing-300));\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-content-primary-foreground));\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}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-primary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-secondary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-content-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-cjs/checkbox/Checkbox.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n.saltCheckboxIcon > svg {\n  /* ensures svg is centered in all browsers */\n  transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n  box-sizing: border-box;\n}\n\n.saltCheckboxIcon > svg {\n  /* ensures svg is centered in all browsers */\n  transform: translate(0px, 0px);\n}\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Checkbox.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map

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

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

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

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