@salt-ds/core 1.41.0 → 1.42.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @salt-ds/core
 
+## 1.42.0
+
+### Minor Changes
+
+- 38da566: Added strong and small font weight support to `Text` when `styleAs="action"`.
+  `<strong>` and `<small>` work in `Button` as well.
+- aac1500: - Added `variant="ghost"` to Card with translucent background.
+  - Added default shadow to all Card, Link Card and Interactable Card variants.
+- 803d0c0: Added `underline` prop to `Link`. It controls when the underline text decoration is applied to a link.
+
+  ```
+  <Link underline="default">Underline default</Link>
+  <Link underline="never">Underline never</Link>
+  ```
+
+- e783dd5: Added `lockScroll` prop to FloatingComponent that makes the page unscrollable when the floating component is open.
+
+### Patch Changes
+
+- 32de853: Refactored Pagination to simplify page button styling.
+- 7a84d72: Fixed Accordion flashing blue when tapped on mobile devices.
+- c30b6a4: Revert layout padding and margin defaults removal to avoid margins and paddings being inherited from parent containers.
+
 ## 1.41.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -37,6 +37,7 @@
   text-align: left;
   cursor: var(--salt-actionable-cursor-hover);
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 .saltAccordionHeader:focus-visible {
   outline: var(--salt-focused-outline);
@@ -712,6 +713,13 @@
   --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);
   cursor: progress;
 }
+.saltButton strong {
+  font-weight: var(--salt-text-action-fontWeight-strong);
+}
+.saltButton small {
+  font-size: inherit;
+  font-weight: var(--salt-text-action-fontWeight-small);
+}
 .saltButton-spinner {
   position: absolute;
   inset: 0;
@@ -732,6 +740,7 @@
   border-style: var(--salt-container-borderStyle);
   padding: var(--saltCard-padding, var(--salt-spacing-200));
   position: relative;
+  box-shadow: var(--salt-overlayable-shadow);
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   box-sizing: border-box;
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
@@ -750,6 +759,10 @@
   background: var(--saltCard-background, var(--salt-container-tertiary-background));
   border-color: var(--salt-container-tertiary-borderColor);
 }
+.saltCard-ghost {
+  background: var(--saltCard-background, var(--salt-container-ghost-background));
+  border-color: var(--salt-container-ghost-borderColor);
+}
 .saltCard-accent::after {
   content: "";
   position: absolute;
@@ -1891,6 +1904,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));
   border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));
   border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));
+  box-shadow: var(--salt-overlayable-shadow);
   display: block;
   padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));
   position: relative;
@@ -2021,10 +2035,19 @@ a:focus .saltCard-interactable.saltCard-disabled {
   --link-color-visited: var(--salt-content-foreground-visited);
   --link-color-focus: "inherit";
   --link-focus-outlineColor: currentColor;
-  --link-textDecoration: var(--salt-navigable-textDecoration);
-  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);
   --link-fontFamily: var(--salt-text-fontFamily);
 }
+.saltLink-underlineDefault {
+  --link-textDecoration: var(--salt-typography-textDecoration-underline);
+  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-active: var(--link-textDecoration);
+  --link-textDecoration-focus: var(--link-textDecoration-hover);
+  --link-textDecoration-visited: var(--link-textDecoration);
+}
+.saltLink-underlineNever {
+  --link-textDecoration: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);
+}
 .saltLink.saltText {
   color: var(--link-color);
   letter-spacing: var(--salt-text-letterSpacing);
@@ -2061,6 +2084,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltLink:visited {
   color: var(--saltLink-color-visited, var(--link-color-visited));
+  text-decoration: var(--link-textDecoration-visited);
 }
 .saltLink:hover {
   color: var(--saltLink-color-hover, var(--link-color-hover));
@@ -2068,12 +2092,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltLink:active {
   color: var(--saltLink-color-active, var(--link-color-active));
+  text-decoration: var(--link-textDecoration-active);
 }
 .saltLink:focus {
   color: var(--saltLink-color-focus, var(--link-color-focus));
   outline: var(--salt-focused-outline);
   outline-color: var(--link-focus-outlineColor);
-  text-decoration: var(--link-textDecoration-hover);
+  text-decoration: var(--link-textDecoration-focus);
 }
 .saltLink-externalLinkADA {
   display: block;
@@ -2088,16 +2113,17 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* 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, var(--salt-palette-corner, 0));
+  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));
+  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));
+  box-shadow: var(--salt-overlayable-shadow);
   display: block;
+  overflow: hidden;
   padding: var(--saltLinkCard-padding, var(--salt-spacing-200));
   position: relative;
   text-decoration: none;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   --linkCard-accent-color: var(--salt-accent-background);
-  overflow: hidden;
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
@@ -2800,30 +2826,46 @@ a:focus .saltCard-interactable.saltCard-disabled {
 
 /* src/pagination/PageButton.css */
 .saltPageButton {
-  --saltButton-minWidth: var(--salt-size-base);
-  --saltButton-fontWeight: var(--salt-text-fontWeight);
-  --saltButton-height: var(--salt-size-base);
-  --saltButton-text-color: var(--salt-content-primary-foreground);
-  --saltButton-background-active: var(--salt-selectable-background-selected);
-  --saltButton-text-color-active: var(--salt-content-primary-foreground);
+  min-width: var(--salt-size-base);
+  font-weight: var(--salt-text-fontWeight);
+  height: var(--salt-size-base);
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  appearance: none;
+  box-sizing: border-box;
+  padding: 0 var(--salt-spacing-100);
+  border: none;
+  font-size: var(--salt-text-fontSize);
+  font-family: var(--salt-text-action-fontFamily);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-action-letterSpacing);
+  cursor: var(--salt-selectable-cursor-hover);
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
 .saltPageButton:hover,
 .saltPageButton:focus-visible {
-  --saltButton-text-color-hover: var(--salt-content-primary-foreground);
-  --saltButton-background-hover: var(--salt-selectable-background-hover);
+  background: var(--salt-selectable-background-hover);
+}
+.saltPageButton:active,
+.saltPageButton-active {
+  background: var(--salt-selectable-background-selected);
+}
+.saltPageButton:focus-visible {
+  outline: var(--salt-focused-outline);
 }
 .saltPageButton:disabled {
-  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);
-  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);
+  color: var(--salt-content-secondary-foreground);
+  background: var(--salt-selectable-background);
+  cursor: var(--salt-editable-cursor-readonly);
 }
 .saltPageButton-selected {
-  --saltButton-background: var(--salt-selectable-background-selected);
+  background: var(--salt-selectable-background-selected);
 }
 .saltPageButton-selected:focus-visible {
-  --saltButton-background-hover: var(--salt-selectable-background-selected);
+  background: var(--salt-selectable-background-selected);
 }
 .saltPageButton-fixed {
-  --saltButton-padding: 0;
+  padding: 0;
 }
 
 /* src/pagination/PageRanges.css */
@@ -2847,11 +2889,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   display: flex;
   flex-wrap: nowrap;
 }
-.saltPaginator-arrowButton-previous {
-  --saltButton-margin: 0 var(--salt-spacing-100) 0 0;
+.saltPaginator-arrowButton-previous.saltButton {
+  margin: 0 var(--salt-spacing-100) 0 0;
 }
-.saltPaginator-arrowButton-next {
-  --saltButton-margin: 0 0 0 var(--salt-spacing-100);
+.saltPaginator-arrowButton-next.saltButton {
+  margin: 0 0 0 var(--salt-spacing-100);
 }
 
 /* src/panel/Panel.css */
@@ -3450,7 +3492,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   box-sizing: border-box;
   color: var(--salt-content-primary-foreground);
   letter-spacing: var(--salt-text-letterSpacing);
-  text-decoration: var(--salt-navigable-textDecoration);
+  text-decoration: var(--salt-typography-textDecoration-underline);
   font-family: var(--salt-text-fontFamily);
   white-space: nowrap;
   background: var(--saltSkipLink-background, var(--salt-container-primary-background));
@@ -3958,6 +4000,13 @@ a:focus .saltCard-interactable.saltCard-disabled {
   text-align: var(--salt-text-action-textAlign);
   font-weight: var(--salt-text-action-fontWeight);
 }
+.saltText-action.saltText strong {
+  font-weight: var(--salt-text-action-fontWeight-strong);
+}
+.saltText-action.saltText small {
+  font-size: inherit;
+  font-weight: var(--salt-text-action-fontWeight-small);
+}
 code.saltText,
 .saltText-code.saltText {
   font-family: var(--salt-text-code-fontFamily);
@@ -4478,4 +4527,4 @@ label.saltText small,
   }
 }
 
-/* src/0405b15e-f504-43d2-b8de-29008cbcb5f3.css */
+/* src/69f9d8f9-ed5e-44e2-9a8c-b7ed2155ac5d.css */

package/dist-cjs/accordion/AccordionHeader.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n";
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=AccordionHeader.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".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, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--salt-size-border, 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-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* 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  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\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  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-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  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\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  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n  --button-text-color: var(--salt-actionable-accented-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-bold-background);\n  --button-background-active: var(--salt-actionable-accented-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-accented-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background-hover);\n  --button-background-active: var(--salt-actionable-accented-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-subtle-background);\n  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-loading {\n  --button-text-color: var(--salt-actionable-accented-background);\n  --button-text-color-hover: var(--salt-actionable-accented-background);\n  --button-text-color-active: var(--salt-actionable-accented-background);\n  --button-text-color-disabled: var(--salt-actionable-accented-background);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background);\n  --button-background-active: var(--salt-actionable-accented-background);\n  --button-background-disabled: var(--salt-actionable-accented-background);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);\n  cursor: progress;\n}\n\n.saltButton-neutral.saltButton-solid {\n  --button-text-color: var(--salt-actionable-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-bold-background);\n  --button-background-hover: var(--salt-actionable-bold-background-hover);\n  --button-background-active: var(--salt-actionable-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-foreground);\n  --button-text-color-hover: var(--salt-actionable-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background-hover);\n  --button-background-active: var(--salt-actionable-background-active);\n  --button-background-disabled: var(--salt-actionable-background-disabled);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-subtle-background);\n  --button-background-hover: var(--salt-actionable-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-loading {\n  --button-text-color: var(--salt-actionable-background);\n  --button-text-color-hover: var(--salt-actionable-background);\n  --button-text-color-active: var(--salt-actionable-background);\n  --button-text-color-disabled: var(--salt-actionable-background);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background);\n  --button-background-active: var(--salt-actionable-background);\n  --button-background-disabled: var(--salt-actionable-background);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor);\n  --button-borderColor-active: var(--salt-actionable-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-borderColor);\n  cursor: progress;\n}\n\n.saltButton-negative.saltButton-solid {\n  --button-text-color: var(--salt-actionable-negative-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-bold-background);\n  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n  --button-background-active: var(--salt-actionable-negative-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-negative-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background-hover);\n  --button-background-active: var(--salt-actionable-negative-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-subtle-background);\n  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-loading {\n  --button-text-color: var(--salt-actionable-negative-background);\n  --button-text-color-hover: var(--salt-actionable-negative-background);\n  --button-text-color-active: var(--salt-actionable-negative-background);\n  --button-text-color-disabled: var(--salt-actionable-negative-background);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background);\n  --button-background-active: var(--salt-actionable-negative-background);\n  --button-background-disabled: var(--salt-actionable-negative-background);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);\n  cursor: progress;\n}\n\n.saltButton-positive.saltButton-solid {\n  --button-text-color: var(--salt-actionable-positive-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-bold-background);\n  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n  --button-background-active: var(--salt-actionable-positive-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-positive-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background-hover);\n  --button-background-active: var(--salt-actionable-positive-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-subtle-background);\n  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-loading {\n  --button-text-color: var(--salt-actionable-positive-background);\n  --button-text-color-hover: var(--salt-actionable-positive-background);\n  --button-text-color-active: var(--salt-actionable-positive-background);\n  --button-text-color-disabled: var(--salt-actionable-positive-background);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background);\n  --button-background-active: var(--salt-actionable-positive-background);\n  --button-background-disabled: var(--salt-actionable-positive-background);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);\n  cursor: progress;\n}\n\n.saltButton-caution.saltButton-solid {\n  --button-text-color: var(--salt-actionable-caution-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-bold-background);\n  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n  --button-background-active: var(--salt-actionable-caution-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-caution-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background-hover);\n  --button-background-active: var(--salt-actionable-caution-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-subtle-background);\n  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-loading {\n  --button-text-color: var(--salt-actionable-caution-background);\n  --button-text-color-hover: var(--salt-actionable-caution-background);\n  --button-text-color-active: var(--salt-actionable-caution-background);\n  --button-text-color-disabled: var(--salt-actionable-caution-background);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background);\n  --button-background-active: var(--salt-actionable-caution-background);\n  --button-background-disabled: var(--salt-actionable-caution-background);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);\n  cursor: progress;\n}\n\n.saltButton-spinner {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.saltButton-sr-only {\n  position: fixed;\n  top: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n";
+var css_248z = ".saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--salt-size-border, 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-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* 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  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\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  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-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  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\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  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n  --button-text-color: var(--salt-actionable-accented-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-bold-background);\n  --button-background-active: var(--salt-actionable-accented-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-accented-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background-hover);\n  --button-background-active: var(--salt-actionable-accented-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-subtle-background);\n  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-loading {\n  --button-text-color: var(--salt-actionable-accented-background);\n  --button-text-color-hover: var(--salt-actionable-accented-background);\n  --button-text-color-active: var(--salt-actionable-accented-background);\n  --button-text-color-disabled: var(--salt-actionable-accented-background);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background);\n  --button-background-active: var(--salt-actionable-accented-background);\n  --button-background-disabled: var(--salt-actionable-accented-background);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);\n  cursor: progress;\n}\n\n.saltButton-neutral.saltButton-solid {\n  --button-text-color: var(--salt-actionable-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-bold-background);\n  --button-background-hover: var(--salt-actionable-bold-background-hover);\n  --button-background-active: var(--salt-actionable-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-foreground);\n  --button-text-color-hover: var(--salt-actionable-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background-hover);\n  --button-background-active: var(--salt-actionable-background-active);\n  --button-background-disabled: var(--salt-actionable-background-disabled);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-subtle-background);\n  --button-background-hover: var(--salt-actionable-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-loading {\n  --button-text-color: var(--salt-actionable-background);\n  --button-text-color-hover: var(--salt-actionable-background);\n  --button-text-color-active: var(--salt-actionable-background);\n  --button-text-color-disabled: var(--salt-actionable-background);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background);\n  --button-background-active: var(--salt-actionable-background);\n  --button-background-disabled: var(--salt-actionable-background);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor);\n  --button-borderColor-active: var(--salt-actionable-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-borderColor);\n  cursor: progress;\n}\n\n.saltButton-negative.saltButton-solid {\n  --button-text-color: var(--salt-actionable-negative-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-bold-background);\n  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n  --button-background-active: var(--salt-actionable-negative-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-negative-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background-hover);\n  --button-background-active: var(--salt-actionable-negative-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-subtle-background);\n  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-loading {\n  --button-text-color: var(--salt-actionable-negative-background);\n  --button-text-color-hover: var(--salt-actionable-negative-background);\n  --button-text-color-active: var(--salt-actionable-negative-background);\n  --button-text-color-disabled: var(--salt-actionable-negative-background);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background);\n  --button-background-active: var(--salt-actionable-negative-background);\n  --button-background-disabled: var(--salt-actionable-negative-background);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);\n  cursor: progress;\n}\n\n.saltButton-positive.saltButton-solid {\n  --button-text-color: var(--salt-actionable-positive-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-bold-background);\n  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n  --button-background-active: var(--salt-actionable-positive-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-positive-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background-hover);\n  --button-background-active: var(--salt-actionable-positive-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-subtle-background);\n  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-loading {\n  --button-text-color: var(--salt-actionable-positive-background);\n  --button-text-color-hover: var(--salt-actionable-positive-background);\n  --button-text-color-active: var(--salt-actionable-positive-background);\n  --button-text-color-disabled: var(--salt-actionable-positive-background);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background);\n  --button-background-active: var(--salt-actionable-positive-background);\n  --button-background-disabled: var(--salt-actionable-positive-background);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);\n  cursor: progress;\n}\n\n.saltButton-caution.saltButton-solid {\n  --button-text-color: var(--salt-actionable-caution-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-bold-background);\n  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n  --button-background-active: var(--salt-actionable-caution-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-caution-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background-hover);\n  --button-background-active: var(--salt-actionable-caution-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-subtle-background);\n  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-loading {\n  --button-text-color: var(--salt-actionable-caution-background);\n  --button-text-color-hover: var(--salt-actionable-caution-background);\n  --button-text-color-active: var(--salt-actionable-caution-background);\n  --button-text-color-disabled: var(--salt-actionable-caution-background);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background);\n  --button-background-active: var(--salt-actionable-caution-background);\n  --button-background-disabled: var(--salt-actionable-caution-background);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);\n  cursor: progress;\n}\n\n.saltButton strong {\n  font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.saltButton-sr-only {\n  position: fixed;\n  top: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n";
 
 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  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-accent-background);\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-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}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to 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-bar);\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-bar);\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-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n  position: relative;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-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  box-shadow: var(--salt-overlayable-shadow);\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-accent-background);\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-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}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  border-color: var(--salt-container-ghost-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to 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-bar);\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-bar);\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-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n  position: relative;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-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/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      disabled,\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AA6BrC,MAAM,IAAO,GAAAC,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,GAAK,EAAA;AACxB,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACV,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,MAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAS,MAAA,EAAAC,qBAAA,CAAW,UAAU,EAAE,CAAC,CAAE,CAAA,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  function Card(props, ref) {\n    const {\n      accent,\n      children,\n      className,\n      disabled,\n      interactable,\n      hoverable,\n      variant = \"primary\",\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-card\",\n      css: cardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"accent\")]: accent,\n            [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n            [withBaseName(\"hoverable\")]: hoverable,\n            /* **Deprecated:** InteractableCard should be used instead for these features */\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"interactable\")]: interactable,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AA6BrC,MAAM,IAAO,GAAAC,gBAAA;AAAA,EAClB,SAASC,KAAK,CAAA,KAAA,EAAO,GAAK,EAAA;AACxB,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACV,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,MAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,aAAa,CAAS,MAAA,EAAAC,qBAAA,CAAW,UAAU,EAAE,CAAC,CAAE,CAAA,CAAC,GAAG,MAAA;AAAA,YACrD,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA;AAAA,YAE7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG;AAAA,WAClC;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/dialog/Dialog.js

@@ -82,6 +82,7 @@ const Dialog = React.forwardRef(
         ref: floatingRef,
         width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
         height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+        lockScroll: true,
         focusManagerProps: {
           context,
           initialFocus

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent, setShowComponent]);\n\n    const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={id}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  type HTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent, setShowComponent]);\n\n    const contextValue = useMemo(() => ({ status, id }), [status, id]);\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={id}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            lockScroll\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["jsx","Scrim","jsxs","Fragment","makePrefixer","forwardRef","Dialog","useWindow","useComponentCssInjection","dialogCss","useId","useCurrentBreakpoint","useState","useFloatingUI","useInteractions","useClick","useDismiss","useFloatingComponent","useForkRef","useEffect","useMemo","DialogContext","clsx"],"mappings":"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"}

package/dist-cjs/flex-item/FlexItem.js

@@ -26,8 +26,8 @@ const FlexItem = React.forwardRef(
     align,
     children,
     className,
-    margin,
-    padding,
+    margin = 0,
+    padding = 0,
     shrink,
     grow,
     basis,

package/dist-cjs/flex-item/FlexItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type CSSProperties,\n  type ElementType,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport flexItemCss from \"./FlexItem.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\nexport type flexItemAlignment = (typeof FLEX_ITEM_ALIGNMENTS)[number];\n\nexport type FlexItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n       */\n      align?: flexItemAlignment;\n      /**\n       * Defines the ability for an item to shrink x times more compared to its siblings, default is 1.\n       */\n      shrink?: ResponsiveProp<number>;\n      /**\n       * Defines the ability for an item to grow x times more compared to its siblings, default is 0.\n       */\n      grow?: ResponsiveProp<number>;\n      /**\n       * Sets the initial main size of a flex item, default is \"auto\".\n       */\n      basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n  props: FlexItemProps<T>,\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      margin,\n      padding,\n      shrink,\n      grow,\n      basis,\n      style,\n      ...rest\n    }: FlexItemProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-flex-item\",\n      css: flexItemCss,\n      window: targetWindow,\n    });\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const Component = as || \"div\";\n    const flexItemShrink = resolveResponsiveValue(shrink, matchedBreakpoints);\n    const flexItemGrow = resolveResponsiveValue(grow, matchedBreakpoints);\n    const flexItemBasis = resolveResponsiveValue(basis, matchedBreakpoints);\n    const flexItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n    const flexItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n\n    const itemStyle = {\n      \"--flexItem-margin\": parseSpacing(flexItemMargin),\n      \"--flexItem-padding\": parseSpacing(flexItemPadding),\n      \"--saltFlexItem-alignment\": align,\n      \"--saltFlexItem-shrink\": flexItemShrink,\n      \"--saltFlexItem-grow\": flexItemGrow,\n      \"--saltFlexItem-basis\": flexItemBasis,\n      ...style,\n    };\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        style={itemStyle}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","flexItemCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAuCO,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AACxB,IAAM,MAAA,cAAA,GAAiBC,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACxE,IAAM,MAAA,YAAA,GAAeA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA;AACpE,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,KAAA,EAAO,kBAAkB,CAAA;AACtE,IAAM,MAAA,cAAA,GAAiBA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACxE,IAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAE1E,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,mBAAA,EAAqBC,0BAAa,cAAc,CAAA;AAAA,MAChD,oBAAA,EAAsBA,0BAAa,eAAe,CAAA;AAAA,MAClD,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,sBAAwB,EAAA,aAAA;AAAA,MACxB,GAAG;AAAA,KACL;AACA,IACE,uBAAAC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,KAAO,EAAA,SAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}
+{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type CSSProperties,\n  type ElementType,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport { parseSpacing } from \"../flex-layout/parseSpacing\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport flexItemCss from \"./FlexItem.css\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\nexport type flexItemAlignment = (typeof FLEX_ITEM_ALIGNMENTS)[number];\n\nexport type FlexItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n       */\n      align?: flexItemAlignment;\n      /**\n       * Defines the ability for an item to shrink x times more compared to its siblings, default is 1.\n       */\n      shrink?: ResponsiveProp<number>;\n      /**\n       * Defines the ability for an item to grow x times more compared to its siblings, default is 0.\n       */\n      grow?: ResponsiveProp<number>;\n      /**\n       * Sets the initial main size of a flex item, default is \"auto\".\n       */\n      basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n  props: FlexItemProps<T>,\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      margin = 0,\n      padding = 0,\n      shrink,\n      grow,\n      basis,\n      style,\n      ...rest\n    }: FlexItemProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-flex-item\",\n      css: flexItemCss,\n      window: targetWindow,\n    });\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const Component = as || \"div\";\n    const flexItemShrink = resolveResponsiveValue(shrink, matchedBreakpoints);\n    const flexItemGrow = resolveResponsiveValue(grow, matchedBreakpoints);\n    const flexItemBasis = resolveResponsiveValue(basis, matchedBreakpoints);\n    const flexItemMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n    const flexItemPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n\n    const itemStyle = {\n      \"--flexItem-margin\": parseSpacing(flexItemMargin),\n      \"--flexItem-padding\": parseSpacing(flexItemPadding),\n      \"--saltFlexItem-alignment\": align,\n      \"--saltFlexItem-shrink\": flexItemShrink,\n      \"--saltFlexItem-grow\": flexItemGrow,\n      \"--saltFlexItem-basis\": flexItemBasis,\n      ...style,\n    };\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        style={itemStyle}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","flexItemCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAuCO,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,CAAA;AAAA,IACT,OAAU,GAAA,CAAA;AAAA,IACV,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AACxB,IAAM,MAAA,cAAA,GAAiBC,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACxE,IAAM,MAAA,YAAA,GAAeA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA;AACpE,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,KAAA,EAAO,kBAAkB,CAAA;AACtE,IAAM,MAAA,cAAA,GAAiBA,wCAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA;AACxE,IAAM,MAAA,eAAA,GAAkBA,wCAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAE1E,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,mBAAA,EAAqBC,0BAAa,cAAc,CAAA;AAAA,MAChD,oBAAA,EAAsBA,0BAAa,eAAe,CAAA;AAAA,MAClD,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,sBAAwB,EAAA,aAAA;AAAA,MACxB,GAAG;AAAA,KACL;AACA,IACE,uBAAAC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,KAAO,EAAA,SAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}

package/dist-cjs/flex-layout/FlexLayout.js

@@ -32,8 +32,8 @@ const FlexLayout = React.forwardRef(
     className,
     direction = "row",
     gap = 3,
-    margin,
-    padding,
+    margin = 0,
+    padding = 0,
     justify,
     separators,
     style,

package/dist-cjs/flex-layout/FlexLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport flexLayoutCss from \"./FlexLayout.css\";\nimport { parseSpacing } from \"./parseSpacing\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n  ...FLEX_ALIGNMENT_BASE,\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];\nexport type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexAlignment | \"stretch\" | \"baseline\";\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the alignment along the main axis, default is \"start\".\n       */\n      justify?: FlexContentAlignment;\n      /**\n       * **Deprecated:** For separators see `StackLayout` component instead.\n       *\n       * Adds a separator between elements if wrap is not active, default is false.\n       */\n      separators?: LayoutSeparator | true;\n      /**\n       * Allow the items to wrap as needed, default is false.\n       */\n      wrap?: ResponsiveProp<boolean>;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlexLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseAlignment(style: string | undefined) {\n  return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n}\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      direction = \"row\",\n      gap = 3,\n      margin,\n      padding,\n      justify,\n      separators,\n      style,\n      wrap = false,\n      ...rest\n    }: FlexLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-flex-layout\",\n      css: flexLayoutCss,\n      window: targetWindow,\n    });\n\n    const Component = as || \"div\";\n    const separatorAlignment = separators === true ? \"center\" : separators;\n\n    const { matchedBreakpoints } = useBreakpoint();\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const flexMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n    const flexPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const flexWrap = resolveResponsiveValue(wrap, matchedBreakpoints);\n    const flexLayoutStyles = {\n      ...style,\n      \"--flexLayout-align\": parseAlignment(align),\n      \"--flexLayout-direction\": flexDirection,\n      \"--flexLayout-gap\": parseSpacing(flexGap),\n      \"--flexLayout-margin\": parseSpacing(flexMargin),\n      \"--flexLayout-padding\": parseSpacing(flexPadding),\n      \"--flexLayout-justify\": parseAlignment(justify),\n      \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n    };\n\n    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n            [withBaseName(\n              `separator-${flexDirection ?? \"row\"}-${\n                separatorAlignment ?? \"center\"\n              }`,\n            )]: separatorAlignment && !wrap,\n            [withBaseName(`separator-${flexDirection ?? \"row\"}`)]:\n              separatorAlignment && !wrap,\n          },\n          className,\n        )}\n        ref={ref}\n        style={flexLayoutStyles}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","flexLayoutCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport flexLayoutCss from \"./FlexLayout.css\";\nimport { parseSpacing } from \"./parseSpacing\";\n\nconst withBaseName = makePrefixer(\"saltFlexLayout\");\n\nexport type LayoutSeparator = \"start\" | \"center\" | \"end\";\nexport type LayoutDirection = \"row\" | \"column\";\n\nexport const FLEX_ALIGNMENT_BASE = [\"start\", \"end\", \"center\"] as const;\nexport const FLEX_CONTENT_ALIGNMENT_BASE = [\n  ...FLEX_ALIGNMENT_BASE,\n  \"space-between\",\n  \"space-around\",\n  \"space-evenly\",\n] as const;\n\nexport type FlexAlignment = (typeof FLEX_ALIGNMENT_BASE)[number];\nexport type FlexContentAlignment = (typeof FLEX_CONTENT_ALIGNMENT_BASE)[number];\n\nexport type FlexLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexAlignment | \"stretch\" | \"baseline\";\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the alignment along the main axis, default is \"start\".\n       */\n      justify?: FlexContentAlignment;\n      /**\n       * **Deprecated:** For separators see `StackLayout` component instead.\n       *\n       * Adds a separator between elements if wrap is not active, default is false.\n       */\n      separators?: LayoutSeparator | true;\n      /**\n       * Allow the items to wrap as needed, default is false.\n       */\n      wrap?: ResponsiveProp<boolean>;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype FlexLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlexLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseAlignment(style: string | undefined) {\n  return style === \"start\" || style === \"end\" ? `flex-${style}` : style;\n}\n\nexport const FlexLayout: FlexLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      align,\n      children,\n      className,\n      direction = \"row\",\n      gap = 3,\n      margin = 0,\n      padding = 0,\n      justify,\n      separators,\n      style,\n      wrap = false,\n      ...rest\n    }: FlexLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-flex-layout\",\n      css: flexLayoutCss,\n      window: targetWindow,\n    });\n\n    const Component = as || \"div\";\n    const separatorAlignment = separators === true ? \"center\" : separators;\n\n    const { matchedBreakpoints } = useBreakpoint();\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const flexMargin = resolveResponsiveValue(margin, matchedBreakpoints);\n    const flexPadding = resolveResponsiveValue(padding, matchedBreakpoints);\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const flexWrap = resolveResponsiveValue(wrap, matchedBreakpoints);\n    const flexLayoutStyles = {\n      ...style,\n      \"--flexLayout-align\": parseAlignment(align),\n      \"--flexLayout-direction\": flexDirection,\n      \"--flexLayout-gap\": parseSpacing(flexGap),\n      \"--flexLayout-margin\": parseSpacing(flexMargin),\n      \"--flexLayout-padding\": parseSpacing(flexPadding),\n      \"--flexLayout-justify\": parseAlignment(justify),\n      \"--flexLayout-wrap\": flexWrap ? \"wrap\" : \"nowrap\",\n    };\n\n    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"separator\")]: separatorAlignment && !wrap,\n            [withBaseName(\n              `separator-${flexDirection ?? \"row\"}-${\n                separatorAlignment ?? \"center\"\n              }`,\n            )]: separatorAlignment && !wrap,\n            [withBaseName(`separator-${flexDirection ?? \"row\"}`)]:\n              separatorAlignment && !wrap,\n          },\n          className,\n        )}\n        ref={ref}\n        style={flexLayoutStyles}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","flexLayoutCss","useBreakpoint","resolveResponsiveValue","parseSpacing","jsx","clsx"],"mappings":"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"}

package/dist-cjs/grid-item/GridItem.js

@@ -29,8 +29,8 @@ const GridItem = React.forwardRef(
     as,
     children,
     className,
-    margin,
-    padding,
+    margin = 0,
+    padding = 0,
     colSpan = "auto",
     rowSpan = "auto",
     horizontalAlignment = "stretch",