@salt-ds/core 1.38.0 → 1.40.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n  --saltFlexItem-alignment: auto;\n  --saltFlexItem-shrink: 1;\n  --saltFlexItem-grow: 0;\n  --saltFlexItem-basis: auto;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n  position: relative;\n  align-self: var(--saltFlexItem-alignment);\n  flex-grow: var(--saltFlexItem-grow);\n  flex-shrink: var(--saltFlexItem-shrink);\n  flex-basis: var(--saltFlexItem-basis);\n}\n\n.saltFlexItem-stacked {\n  flex-grow: 2;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n  --saltFlexItem-alignment: auto;\n  --saltFlexItem-shrink: 1;\n  --saltFlexItem-grow: 0;\n  --saltFlexItem-basis: auto;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n  position: relative;\n  margin: var(--flexItem-margin);\n  padding: var(--flexItem-padding);\n  align-self: var(--saltFlexItem-alignment);\n  flex-grow: var(--saltFlexItem-grow);\n  flex-shrink: var(--saltFlexItem-shrink);\n  flex-basis: var(--saltFlexItem-basis);\n}\n\n.saltFlexItem-stacked {\n  flex-grow: 2;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FlexItem.css.js.map

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

@@ -19,12 +19,20 @@ const FLEX_ITEM_ALIGNMENTS = [
   "center",
   "stretch"
 ];
+function parseSpacing(value) {
+  if (value === void 0 || typeof value === "string") {
+    return value;
+  }
+  return `calc(var(--salt-spacing-100) * ${value})`;
+}
 const FlexItem = React.forwardRef(
   ({
     as,
     align,
     children,
     className,
+    margin = 0,
+    padding = 0,
     shrink,
     grow,
     basis,
@@ -42,7 +50,11 @@ const FlexItem = React.forwardRef(
     const flexItemShrink = useResponsiveProp.resolveResponsiveValue(shrink, matchedBreakpoints);
     const flexItemGrow = useResponsiveProp.resolveResponsiveValue(grow, matchedBreakpoints);
     const flexItemBasis = useResponsiveProp.resolveResponsiveValue(basis, matchedBreakpoints);
+    const flexItemMargin = useResponsiveProp.resolveResponsiveValue(margin, matchedBreakpoints);
+    const flexItemPadding = useResponsiveProp.resolveResponsiveValue(padding, matchedBreakpoints);
     const itemStyle = {
+      "--flexItem-margin": parseSpacing(flexItemMargin),
+      "--flexItem-padding": parseSpacing(flexItemPadding),
       "--saltFlexItem-alignment": align,
       "--saltFlexItem-shrink": flexItemShrink,
       "--saltFlexItem-grow": flexItemGrow,

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 {\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 it's siblings, default is 1.\n       */\n      shrink?: ResponsiveProp<number>;\n      /**\n       * Defines the ability for an item to grow x times more compared to it's 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  >;\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      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\n    const itemStyle = {\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","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AA+BO,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;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;AAEtE,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,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 {\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\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\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","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF;AAuCA,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AACO,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,EAAqB,aAAa,cAAc,CAAA;AAAA,MAChD,oBAAA,EAAsB,aAAa,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.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltFlexLayout {\n  --flexLayout-layout-display: flex;\n  --flexLayout-direction: row;\n  --flexLayout-wrap: nowrap;\n  --flexLayout-justify: flex-start;\n  --flexLayout-align: stretch;\n  --flexLayout-separator: var(--salt-size-border);\n}\n\n/* Style applied to the root element */\n.saltFlexLayout {\n  gap: var(--flexLayout-gap);\n  display: var(--flexLayout-layout-display);\n  flex-direction: var(--flexLayout-direction);\n  flex-wrap: var(--flexLayout-wrap);\n  justify-content: var(--flexLayout-justify);\n  align-items: var(--flexLayout-align);\n  box-sizing: border-box;\n}\n\n.saltFlexLayout-separator {\n  gap: calc(var(--flexLayout-gap) * 2);\n}\n\n.saltFlexLayout-separator > * {\n  position: relative;\n}\n.saltFlexLayout-separator > *:not(:last-child)::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* Row separator */\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n  height: 100%;\n}\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n  width: var(--flexLayout-separator);\n  top: 0;\n}\n.saltFlexLayout-separator-row-start > *:not(:last-child)::after {\n  right: 0;\n}\n.saltFlexLayout-separator-row-center > *:not(:last-child)::after {\n  right: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-row-end > *:not(:last-child)::after {\n  right: calc(var(--flexLayout-gap) * -2);\n}\n\n/* Column separator */\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n  width: 100%;\n}\n\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n  height: var(--flexLayout-separator);\n  left: 0;\n  width: 100%;\n}\n.saltFlexLayout-separator-column-start > *:not(:last-child)::after {\n  bottom: 0;\n}\n.saltFlexLayout-separator-column-center > *:not(:last-child)::after {\n  bottom: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-column-end > *:not(:last-child)::after {\n  bottom: calc(var(--flexLayout-gap) * -2);\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltFlexLayout {\n  --flexLayout-layout-display: flex;\n  --flexLayout-direction: row;\n  --flexLayout-wrap: nowrap;\n  --flexLayout-justify: flex-start;\n  --flexLayout-align: stretch;\n  --flexLayout-separator: var(--salt-size-border);\n}\n\n/* Style applied to the root element */\n.saltFlexLayout {\n  gap: var(--flexLayout-gap);\n  margin: var(--flexLayout-margin);\n  padding: var(--flexLayout-padding);\n  display: var(--flexLayout-layout-display);\n  flex-direction: var(--flexLayout-direction);\n  flex-wrap: var(--flexLayout-wrap);\n  justify-content: var(--flexLayout-justify);\n  align-items: var(--flexLayout-align);\n  box-sizing: border-box;\n}\n\n.saltFlexLayout-separator {\n  gap: calc(var(--flexLayout-gap) * 2);\n}\n\n.saltFlexLayout-separator > * {\n  position: relative;\n}\n.saltFlexLayout-separator > *:not(:last-child)::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/* Row separator */\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n  height: 100%;\n}\n\n.saltFlexLayout-separator-row > *:not(:last-child)::after {\n  width: var(--flexLayout-separator);\n  top: 0;\n}\n.saltFlexLayout-separator-row-start > *:not(:last-child)::after {\n  right: 0;\n}\n.saltFlexLayout-separator-row-center > *:not(:last-child)::after {\n  right: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-row-end > *:not(:last-child)::after {\n  right: calc(var(--flexLayout-gap) * -2);\n}\n\n/* Column separator */\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n  width: 100%;\n}\n\n.saltFlexLayout-separator-column > *:not(:last-child)::after {\n  height: var(--flexLayout-separator);\n  left: 0;\n  width: 100%;\n}\n.saltFlexLayout-separator-column-start > *:not(:last-child)::after {\n  bottom: 0;\n}\n.saltFlexLayout-separator-column-center > *:not(:last-child)::after {\n  bottom: calc(var(--flexLayout-gap) * -1);\n}\n.saltFlexLayout-separator-column-end > *:not(:last-child)::after {\n  bottom: calc(var(--flexLayout-gap) * -2);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FlexLayout.css.js.map

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

@@ -1,15 +1,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
+var BreakpointProvider = require('../breakpoints/BreakpointProvider.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 var useResponsiveProp = require('../utils/useResponsiveProp.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var BreakpointProvider = require('../breakpoints/BreakpointProvider.js');
 var FlexLayout$1 = require('./FlexLayout.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltFlexLayout");
@@ -37,6 +37,8 @@ const FlexLayout = React.forwardRef(
     className,
     direction = "row",
     gap = 3,
+    margin = 0,
+    padding = 0,
     justify,
     separators,
     style,
@@ -53,6 +55,8 @@ const FlexLayout = React.forwardRef(
     const separatorAlignment = separators === true ? "center" : separators;
     const { matchedBreakpoints } = BreakpointProvider.useBreakpoint();
     const flexGap = useResponsiveProp.resolveResponsiveValue(gap, matchedBreakpoints);
+    const flexMargin = useResponsiveProp.resolveResponsiveValue(margin, matchedBreakpoints);
+    const flexPadding = useResponsiveProp.resolveResponsiveValue(padding, matchedBreakpoints);
     const flexDirection = useResponsiveProp.resolveResponsiveValue(direction, matchedBreakpoints);
     const flexWrap = useResponsiveProp.resolveResponsiveValue(wrap, matchedBreakpoints);
     const flexLayoutStyles = {
@@ -60,6 +64,8 @@ const FlexLayout = React.forwardRef(
       "--flexLayout-align": parseAlignment(align),
       "--flexLayout-direction": flexDirection,
       "--flexLayout-gap": parseSpacing(flexGap),
+      "--flexLayout-margin": parseSpacing(flexMargin),
+      "--flexLayout-padding": parseSpacing(flexPadding),
       "--flexLayout-justify": parseAlignment(justify),
       "--flexLayout-wrap": flexWrap ? "wrap" : "nowrap"
     };

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

@@ -1 +1 @@
-{"version":3,"file":"FlexLayout.js","sources":["../src/flex-layout/FlexLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\n\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport flexLayoutCss from \"./FlexLayout.css\";\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  >;\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\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\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      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 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-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","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,gBAAgB,CAAA;AAK3C,MAAM,mBAAsB,GAAA,CAAC,OAAS,EAAA,KAAA,EAAO,QAAQ;AACrD,MAAM,2BAA8B,GAAA;AAAA,EACzC,GAAG,mBAAA;AAAA,EACH,eAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF;AA0CA,SAAS,eAAe,KAA2B,EAAA;AACjD,EAAA,OAAO,UAAU,OAAW,IAAA,KAAA,KAAU,KAAQ,GAAA,CAAA,KAAA,EAAQ,KAAK,CAAK,CAAA,GAAA,KAAA;AAClE;AAEA,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,UAAkC,GAAAC,gBAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,OAAA;AAAA,IACA,UAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AACxB,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAE5D,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAC7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAM,MAAA,QAAA,GAAWA,wCAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA;AAChE,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,oBAAA,EAAsB,eAAe,KAAK,CAAA;AAAA,MAC1C,wBAA0B,EAAA,aAAA;AAAA,MAC1B,kBAAA,EAAoB,aAAa,OAAO,CAAA;AAAA,MACxC,sBAAA,EAAwB,eAAe,OAAO,CAAA;AAAA,MAC9C,mBAAA,EAAqB,WAAW,MAAS,GAAA;AAAA,KAC3C;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,sBAAsB,CAAC,IAAA;AAAA,YACpD,CAAC,YAAA;AAAA,cACC,CAAa,UAAA,EAAA,aAAA,IAAiB,KAAK,CAAA,CAAA,EACjC,sBAAsB,QACxB,CAAA;AAAA,aACD,GAAG,kBAAA,IAAsB,CAAC,IAAA;AAAA,YAC3B,CAAC,aAAa,CAAa,UAAA,EAAA,aAAA,IAAiB,KAAK,CAAE,CAAA,CAAC,GAClD,kBAAA,IAAsB,CAAC;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,KAAO,EAAA,gBAAA;AAAA,QACN,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;;"}
+{"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\";\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\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\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","jsx","clsx"],"mappings":"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"}

package/dist-cjs/flow-layout/FlowLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowLayout.js","sources":["../src/flow-layout/FlowLayout.tsx"],"sourcesContent":["import { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport type { PolymorphicComponentPropWithRef, PolymorphicRef } from \"../utils\";\n\nexport type FlowLayoutProps<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?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Defines the alignment along the main axis, default is \"start\"\n       */\n      justify?: FlexLayoutProps<ElementType>[\"justify\"];\n    }\n  >;\n\ntype FlowLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlowLayoutProps<T>,\n) => ReactElement | null;\n\nexport const FlowLayout: FlowLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { children, ...rest }: FlowLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    return (\n      <FlexLayout direction=\"row\" ref={ref} wrap {...rest}>\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["forwardRef","jsx","FlexLayout"],"mappings":";;;;;;AA2BO,MAAM,UAAkC,GAAAA,gBAAA;AAAA,EAC7C,CACE,EAAE,QAAA,EAAU,GAAG,IAAA,IACf,GACG,KAAA;AACH,IACE,uBAAAC,cAAA,CAACC,yBAAW,SAAU,EAAA,KAAA,EAAM,KAAU,IAAI,EAAA,IAAA,EAAE,GAAG,IAAA,EAC5C,QACH,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"FlowLayout.js","sources":["../src/flow-layout/FlowLayout.tsx"],"sourcesContent":["import { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport type { PolymorphicComponentPropWithRef, PolymorphicRef } from \"../utils\";\n\nexport type FlowLayoutProps<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?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Defines the alignment along the main axis, default is \"start\"\n       */\n      justify?: FlexLayoutProps<ElementType>[\"justify\"];\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?: FlexLayoutProps<ElementType>[\"margin\"];\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?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype FlowLayoutComponent = <T extends ElementType = \"div\">(\n  props: FlowLayoutProps<T>,\n) => ReactElement | null;\n\nexport const FlowLayout: FlowLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { children, ...rest }: FlowLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    return (\n      <FlexLayout direction=\"row\" ref={ref} wrap {...rest}>\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["forwardRef","jsx","FlexLayout"],"mappings":";;;;;;AAmCO,MAAM,UAAkC,GAAAA,gBAAA;AAAA,EAC7C,CACE,EAAE,QAAA,EAAU,GAAG,IAAA,IACf,GACG,KAAA;AACH,IACE,uBAAAC,cAAA,CAACC,yBAAW,SAAU,EAAA,KAAA,EAAM,KAAU,IAAI,EAAA,IAAA,EAAE,GAAG,IAAA,EAC5C,QACH,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/index.js

@@ -85,6 +85,7 @@ var RadioButtonGroup = require('./radio-button/RadioButtonGroup.js');
 var RadioButtonIcon = require('./radio-button/RadioButtonIcon.js');
 var Scrim = require('./scrim/Scrim.js');
 var SegmentedButtonGroup = require('./segmented-button-group/SegmentedButtonGroup.js');
+var SkipLink = require('./skip-link/SkipLink.js');
 var Spinner = require('./spinner/Spinner.js');
 var StackLayout = require('./stack-layout/StackLayout.js');
 var StatusAdornment = require('./status-adornment/StatusAdornment.js');
@@ -240,6 +241,7 @@ exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
 exports.RadioButtonIcon = RadioButtonIcon.RadioButtonIcon;
 exports.Scrim = Scrim.Scrim;
 exports.SegmentedButtonGroup = SegmentedButtonGroup.SegmentedButtonGroup;
+exports.SkipLink = SkipLink.SkipLink;
 exports.Spinner = Spinner.Spinner;
 exports.SpinnerSizeValues = Spinner.SpinnerSizeValues;
 exports.StackLayout = StackLayout.StackLayout;

package/dist-cjs/index.js.map

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  overflow: hidden;\n  --card-accent-color: var(--salt-accent-background);\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"tertiary\" */\n.saltInteractableCard-tertiary {\n  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-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 InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-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 InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-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 InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n\n  .saltInteractableCard-disabled:hover {\n    cursor: var(--salt-selectable-cursor-disabled);\n    box-shadow: none;\n  }\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  outline: none;\n  --card-accent-color: var(--salt-accent-background-disabled);\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */\n.saltInteractableCard-selected.saltInteractableCard-disabled,\n.saltInteractableCard-selected.saltInteractableCard-disabled:focus,\n.saltInteractableCard-selected.saltInteractableCard-disabled:hover,\n.saltInteractableCard-selected.saltInteractableCard-disabled:active {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  --card-accent-color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  overflow: hidden;\n  --card-accent-color: var(--salt-accent-background);\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"tertiary\" */\n.saltInteractableCard-tertiary {\n  background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-tertiary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-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 InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-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 InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-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 InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n\n  .saltInteractableCard-disabled:hover {\n    cursor: var(--salt-selectable-cursor-disabled);\n    box-shadow: none;\n  }\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow);\n  border-color: var(--salt-actionable-accented-borderColor-active);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  outline: none;\n  --card-accent-color: var(--salt-accent-background-disabled);\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background-disabled));\n  border-color: var(--salt-container-secondary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard tertiary variant if `disabled={true}` */\n.saltInteractableCard-tertiary.saltInteractableCard-disabled,\n.saltInteractableCard-tertiary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-tertiary.saltInteractableCard-disabled:active {\n  background: var(--salt-container-tertiary-background-disabled);\n  border-color: var(--salt-container-tertiary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */\n.saltInteractableCard-selected.saltInteractableCard-disabled,\n.saltInteractableCard-selected.saltInteractableCard-disabled:focus,\n.saltInteractableCard-selected.saltInteractableCard-disabled:hover,\n.saltInteractableCard-selected.saltInteractableCard-disabled:active {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  --card-accent-color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-cjs/link/Link.js

@@ -19,6 +19,7 @@ require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var Link$1 = require('./Link.css.js');
+var LinkAction = require('./LinkAction.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltLink");
 const Link = React.forwardRef(function Link2({
@@ -43,7 +44,7 @@ const Link = React.forwardRef(function Link2({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Text.Text,
     {
-      as: "a",
+      as: LinkAction.LinkAction,
       className: clsx.clsx(withBaseName(), className),
       href,
       ref,

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, type ReactElement, forwardRef } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport linkCss from \"./Link.css\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps extends Omit<TextProps<\"a\">, \"as\" | \"disabled\"> {\n  IconComponent?: ComponentType<IconProps> | null;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as=\"a\"\n      className={clsx(withBaseName(), className)}\n      href={href}\n      ref={ref}\n      target={target}\n      color={color}\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>External</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsxs","Text","clsx","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAY/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,GAAG;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,4BAAQ,EAAA;AAEjC,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AACtC,EAAM,MAAA,iBAAA,GACJ,aAAkB,KAAA,KAAA,CAAA,GAAY,YAAe,GAAA,aAAA;AAE/C,EACE,uBAAAC,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,GAAA;AAAA,MACH,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,MAAA,KAAW,4BAEPF,eAAA,CAAAG,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,iBAAA,mCACE,iBAAkB,EAAA,EAAA,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAC,EAAA,CAAA;AAAA,yCAEjE,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,GAAG,QAAQ,EAAA,UAAA,EAAA;AAAA,SAC5D,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Link.js","sources":["../src/link/Link.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text, type TextProps } from \"../text\";\nimport { type RenderPropsType, makePrefixer } from \"../utils\";\nimport linkCss from \"./Link.css\";\nimport { LinkAction } from \"./LinkAction\";\n\nconst withBaseName = makePrefixer(\"saltLink\");\n\n/**\n * Links are a fundamental navigation element. When clicked, they take the user to an entirely different page.\n *\n * @example\n * <LinkExample to=\"#link\">Action</LinkExample>\n */\nexport interface LinkProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"color\">,\n    Pick<TextProps<\"a\">, \"maxRows\" | \"styleAs\" | \"color\" | \"variant\"> {\n  IconComponent?: ComponentType<IconProps> | null;\n  /**\n   * Render prop to enable customisation of anchor element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  {\n    IconComponent,\n    href,\n    className,\n    children,\n    color: colorProp,\n    variant,\n    target = \"_self\",\n    ...rest\n  },\n  ref,\n): ReactElement<LinkProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-link\",\n    css: linkCss,\n    window: targetWindow,\n  });\n  const { ExternalIcon } = useIcon();\n\n  const color = variant ?? colorProp ?? \"primary\";\n  const LinkIconComponent =\n    IconComponent === undefined ? ExternalIcon : IconComponent;\n\n  return (\n    <Text\n      as={LinkAction}\n      className={clsx(withBaseName(), className)}\n      href={href}\n      ref={ref}\n      target={target}\n      color={color}\n      {...rest}\n    >\n      {children}\n      {target === \"_blank\" && (\n        <>\n          {LinkIconComponent && (\n            <LinkIconComponent className={withBaseName(\"icon\")} aria-hidden />\n          )}\n          <span className={withBaseName(\"externalLinkADA\")}>External</span>\n        </>\n      )}\n    </Text>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Link","useWindow","useComponentCssInjection","linkCss","useIcon","jsxs","Text","LinkAction","clsx","Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAkB/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,aAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,OAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACT,GAAG;AACL,CAAA,EACA,GACyB,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,4BAAQ,EAAA;AAEjC,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AACtC,EAAM,MAAA,iBAAA,GACJ,aAAkB,KAAA,KAAA,CAAA,GAAY,YAAe,GAAA,aAAA;AAE/C,EACE,uBAAAC,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAAC,qBAAA;AAAA,MACJ,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,MAAA,KAAW,4BAEPH,eAAA,CAAAI,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,UAAA,iBAAA,mCACE,iBAAkB,EAAA,EAAA,SAAA,EAAW,aAAa,MAAM,CAAA,EAAG,eAAW,IAAC,EAAA,CAAA;AAAA,yCAEjE,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,GAAG,QAAQ,EAAA,UAAA,EAAA;AAAA,SAC5D,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-cjs/link/LinkAction.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var renderProps = require('../utils/renderProps.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+require('clsx');
+
+const LinkAction = React.forwardRef(
+  function LinkAction2(props, ref) {
+    return renderProps.renderProps("a", { ...props, ref });
+  }
+);
+
+exports.LinkAction = LinkAction;
+//# sourceMappingURL=LinkAction.js.map

package/dist-cjs/link/LinkAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkAction.js","sources":["../src/link/LinkAction.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { renderProps } from \"../utils\";\n\ninterface LinkActionProps extends ComponentPropsWithoutRef<\"a\"> {}\n\nexport const LinkAction = forwardRef<HTMLAnchorElement, LinkActionProps>(\n  function LinkAction(props, ref) {\n    return renderProps(\"a\", { ...props, ref });\n  },\n);\n"],"names":["forwardRef","LinkAction","renderProps"],"mappings":";;;;;;;;;;AAKO,MAAM,UAAa,GAAAA,gBAAA;AAAA,EACxB,SAASC,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,OAAOC,wBAAY,GAAK,EAAA,EAAE,GAAG,KAAA,EAAO,KAAK,CAAA;AAAA;AAE7C;;;;"}

package/dist-cjs/radio-button/RadioButton.js

@@ -26,6 +26,7 @@ const RadioButton = React.forwardRef(
       disabled: disabledProp,
       error,
       inputProps = {},
+      inputRef,
       label,
       name: nameProp,
       onFocus,
@@ -113,6 +114,7 @@ const RadioButton = React.forwardRef(
               onChange: handleChange,
               onFocus,
               type: "radio",
+              ref: inputRef,
               ...restInputProps
             }
           ),

package/dist-cjs/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  type InputHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\n\nimport radioButtonCss from \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * Set the default selected radio button in the group\n   */\n  checked?: boolean;\n  /**\n   * Set the disabled state\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * Set the error state\n   */\n  error?: boolean;\n  /**\n   * Props to be passed to the radio input\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * The label to be shown next to the radio icon\n   */\n  label?: ReactNode;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n  /**\n   * Callback for blur event\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback for focus event\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Set the read only state.\n   * **Note**: Setting a standalone radio button as read-only is not accessible. The whole radio buttton group should be set as read-only instead.\n   */\n  readOnly?: boolean;\n  /**\n   * Value of radio button\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * RadioButton has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n  function RadioButton(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      disabled: disabledProp,\n      error,\n      inputProps = {},\n      label,\n      name: nameProp,\n      onFocus,\n      onBlur,\n      onChange,\n      readOnly: readOnlyProp,\n      value,\n      validationStatus: validationStatusProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-radio-button\",\n      css: radioButtonCss,\n      window: targetWindow,\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const radioGroup = useRadioGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n    const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n    const validationStatus = !disabled\n      ? (radioGroup?.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp)\n      : undefined;\n\n    const radioGroupChecked =\n      checkedProp ??\n      (radioGroup && value ? radioGroup.value === value : checkedProp);\n    const name = nameProp ?? radioGroup?.name;\n\n    const [checked, setCheckedState] = useControlled({\n      controlled: radioGroupChecked,\n      default: Boolean(checkedProp),\n      name: \"RadioBase\",\n      state: \"checked\",\n    });\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      if (readOnly) return;\n\n      const newChecked = event.target.checked;\n      setCheckedState(newChecked);\n\n      onChange?.(event);\n      inputOnChange?.(event);\n      radioGroup?.onChange?.(event);\n    };\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus || \"\")]: validationStatus,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-describedby={\n            clsx(\n              radioGroup === undefined\n                ? formFieldA11yProps?.[\"aria-describedby\"]\n                : undefined,\n              inputDescribedBy,\n            ) || undefined\n          }\n          aria-labelledby={\n            clsx(\n              radioGroup === undefined\n                ? formFieldA11yProps?.[\"aria-labelledby\"]\n                : undefined,\n              inputLabelledBy,\n            ) || undefined\n          }\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          name={name}\n          value={value}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"radio\"\n          {...restInputProps}\n        />\n        <RadioButtonIcon\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","RadioButton","useWindow","useComponentCssInjection","radioButtonCss","useFormFieldProps","useRadioGroup","useControlled","jsxs","clsx","jsx","RadioButtonIcon"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\n\nimport radioButtonCss from \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * Set the default selected radio button in the group\n   */\n  checked?: boolean;\n  /**\n   * Set the disabled state\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * Set the error state\n   */\n  error?: boolean;\n  /**\n   * Props to be passed to the radio input\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Used to access the hidden `<input>` element.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * The label to be shown next to the radio icon\n   */\n  label?: ReactNode;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n  /**\n   * Callback for blur event\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback for focus event\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Set the read only state.\n   * **Note**: Setting a standalone radio button as read-only is not accessible. The whole radio buttton group should be set as read-only instead.\n   */\n  readOnly?: boolean;\n  /**\n   * Value of radio button\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * RadioButton has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n  function RadioButton(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      disabled: disabledProp,\n      error,\n      inputProps = {},\n      inputRef,\n      label,\n      name: nameProp,\n      onFocus,\n      onBlur,\n      onChange,\n      readOnly: readOnlyProp,\n      value,\n      validationStatus: validationStatusProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-radio-button\",\n      css: radioButtonCss,\n      window: targetWindow,\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const radioGroup = useRadioGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const disabled = radioGroup?.disabled || formFieldDisabled || disabledProp;\n    const readOnly = radioGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n    const validationStatus = !disabled\n      ? (radioGroup?.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp)\n      : undefined;\n\n    const radioGroupChecked =\n      checkedProp ??\n      (radioGroup && value ? radioGroup.value === value : checkedProp);\n    const name = nameProp ?? radioGroup?.name;\n\n    const [checked, setCheckedState] = useControlled({\n      controlled: radioGroupChecked,\n      default: Boolean(checkedProp),\n      name: \"RadioBase\",\n      state: \"checked\",\n    });\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      if (readOnly) return;\n\n      const newChecked = event.target.checked;\n      setCheckedState(newChecked);\n\n      onChange?.(event);\n      inputOnChange?.(event);\n      radioGroup?.onChange?.(event);\n    };\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus || \"\")]: validationStatus,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-describedby={\n            clsx(\n              radioGroup === undefined\n                ? formFieldA11yProps?.[\"aria-describedby\"]\n                : undefined,\n              inputDescribedBy,\n            ) || undefined\n          }\n          aria-labelledby={\n            clsx(\n              radioGroup === undefined\n                ? formFieldA11yProps?.[\"aria-labelledby\"]\n                : undefined,\n              inputLabelledBy,\n            ) || undefined\n          }\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          name={name}\n          value={value}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"radio\"\n          ref={inputRef}\n          {...restInputProps}\n        />\n        <RadioButtonIcon\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","RadioButton","useWindow","useComponentCssInjection","radioButtonCss","useFormFieldProps","useRadioGroup","useControlled","jsxs","clsx","jsx","RadioButtonIcon"],"mappings":"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"}

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

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

package/dist-cjs/skip-link/SkipLink.css.js.map

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

package/dist-cjs/skip-link/SkipLink.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var SkipLink$1 = require('./SkipLink.css.js');
+var useManageFocusOnTarget = require('./internal/useManageFocusOnTarget.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltSkipLink");
+const SkipLink = React.forwardRef(
+  function SkipLink2({ className, targetId, children, onKeyUp, onBlur, onClick, ...rest }, ref) {
+    const [isTargetAvailable, setIsTargetAvailable] = React.useState(false);
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-skip-link",
+      css: SkipLink$1,
+      window: targetWindow
+    });
+    const targetRef = React.useRef(null);
+    React.useEffect(() => {
+      if (targetWindow) {
+        targetRef.current = targetWindow.document.getElementById(targetId);
+      }
+      setIsTargetAvailable(!!targetRef.current);
+    }, [targetId, targetWindow]);
+    const eventHandlers = useManageFocusOnTarget.useManageFocusOnTarget({
+      onKeyUp,
+      onBlur,
+      onClick,
+      targetRef,
+      targetClass: withBaseName("target")
+    });
+    if (!isTargetAvailable) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        className: clsx.clsx(withBaseName(), className),
+        href: `#${targetId}`,
+        ref,
+        target: "_self",
+        ...eventHandlers,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.SkipLink = SkipLink;
+//# sourceMappingURL=SkipLink.js.map

package/dist-cjs/skip-link/SkipLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport skipLinkCss from \"./SkipLink.css\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\ninterface SkipLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  /**\n   * The ID of the target element to apply focus when the link is clicked.\n   * If the element with this ID is not found, the SkipLink will not be rendered.\n   */\n  targetId: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink(\n    { className, targetId, children, onKeyUp, onBlur, onClick, ...rest },\n    ref,\n  ) {\n    const [isTargetAvailable, setIsTargetAvailable] = useState(false);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-skip-link\",\n      css: skipLinkCss,\n      window: targetWindow,\n    });\n\n    const targetRef = useRef<HTMLElement | null>(null);\n\n    useEffect(() => {\n      if (targetWindow) {\n        targetRef.current = targetWindow.document.getElementById(targetId);\n      }\n      setIsTargetAvailable(!!targetRef.current);\n    }, [targetId, targetWindow]);\n\n    const eventHandlers = useManageFocusOnTarget({\n      onKeyUp,\n      onBlur,\n      onClick,\n      targetRef,\n      targetClass: withBaseName(\"target\"),\n    });\n\n    if (!isTargetAvailable) return null;\n    return (\n      <a\n        className={clsx(withBaseName(), className)}\n        href={`#${targetId}`}\n        ref={ref}\n        target=\"_self\"\n        {...eventHandlers}\n        {...rest}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SkipLink","useState","useWindow","useComponentCssInjection","skipLinkCss","useRef","useEffect","useManageFocusOnTarget","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAAA,CACP,EAAE,SAAA,EAAW,QAAU,EAAA,QAAA,EAAU,OAAS,EAAA,MAAA,EAAQ,OAAS,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChE,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;AAED,IAAM,MAAA,SAAA,GAAYC,aAA2B,IAAI,CAAA;AAEjD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,SAAA,CAAU,OAAU,GAAA,YAAA,CAAa,QAAS,CAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AAEnE,MAAqB,oBAAA,CAAA,CAAC,CAAC,SAAA,CAAU,OAAO,CAAA;AAAA,KACvC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,IAAA,MAAM,gBAAgBC,6CAAuB,CAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,EAAa,aAAa,QAAQ;AAAA,KACnC,CAAA;AAED,IAAI,IAAA,CAAC,mBAA0B,OAAA,IAAA;AAC/B,IACE,uBAAAC,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,QAClB,GAAA;AAAA,QACA,MAAO,EAAA,OAAA;AAAA,QACN,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var React = require('react');
+
+const FOCUS_TIMEOUT = 50;
+const useManageFocusOnTarget = ({
+  onKeyUp,
+  onBlur,
+  onClick,
+  targetRef,
+  targetClass
+}) => {
+  const [target, setTarget] = React.useState();
+  const hasTabIndex = React.useRef();
+  const shouldRemoveTabIndex = React.useRef();
+  React.useEffect(() => {
+    if (targetRef == null ? void 0 : targetRef.current) {
+      setTarget(targetRef.current);
+    }
+  }, [targetRef]);
+  if (!target) {
+    return {};
+  }
+  const addTabIndex = () => {
+    const tabIndex = target.getAttribute("tabIndex");
+    hasTabIndex.current = tabIndex || tabIndex === "0";
+    if (!hasTabIndex.current) {
+      shouldRemoveTabIndex.current = true;
+      target.setAttribute("tabIndex", "-1");
+    }
+  };
+  const removeTabIndex = () => {
+    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
+      target.removeAttribute("tabIndex");
+    }
+  };
+  const handleFocusOnTarget = () => {
+    shouldRemoveTabIndex.current = false;
+    target.classList.add(targetClass);
+  };
+  const handleBlurFromTarget = () => {
+    shouldRemoveTabIndex.current = true;
+    removeTabIndex();
+    target.classList.remove(targetClass);
+  };
+  function moveToTarget() {
+    addTabIndex();
+    setTimeout(() => {
+      target == null ? void 0 : target.focus();
+    }, FOCUS_TIMEOUT);
+    target == null ? void 0 : target.addEventListener("focus", handleFocusOnTarget, { once: true });
+    target == null ? void 0 : target.addEventListener("blur", handleBlurFromTarget, { once: true });
+  }
+  const handleKeyUp = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      moveToTarget();
+    }
+    onKeyUp == null ? void 0 : onKeyUp(event);
+  };
+  const handleClick = (event) => {
+    moveToTarget();
+    onClick == null ? void 0 : onClick(event);
+  };
+  const handleBlur = (event) => {
+    setTimeout(removeTabIndex, FOCUS_TIMEOUT);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  return {
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyUp: handleKeyUp
+  };
+};
+
+exports.useManageFocusOnTarget = useManageFocusOnTarget;
+//# sourceMappingURL=useManageFocusOnTarget.js.map

package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n  onBlur?: FocusEventHandler;\n  onClick?: MouseEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  targetRef: RefObject<HTMLElement> | undefined;\n  targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n  onBlur?: FocusEventHandler<HTMLAnchorElement>;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n  onKeyUp,\n  onBlur,\n  onClick,\n  targetRef,\n  targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string>();\n  const shouldRemoveTabIndex = useRef<boolean>();\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  if (!target) {\n    return {};\n  }\n\n  const addTabIndex = () => {\n    const tabIndex = target.getAttribute(\"tabIndex\");\n    hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n    if (!hasTabIndex.current) {\n      shouldRemoveTabIndex.current = true;\n      target.setAttribute(\"tabIndex\", \"-1\");\n    }\n  };\n\n  const removeTabIndex = () => {\n    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n      target.removeAttribute(\"tabIndex\");\n    }\n  };\n\n  const handleFocusOnTarget = () => {\n    shouldRemoveTabIndex.current = false;\n    target.classList.add(targetClass);\n  };\n\n  const handleBlurFromTarget = () => {\n    shouldRemoveTabIndex.current = true;\n    removeTabIndex();\n    target.classList.remove(targetClass);\n  };\n\n  function moveToTarget() {\n    addTabIndex();\n    setTimeout(() => {\n      target?.focus();\n    }, FOCUS_TIMEOUT);\n\n    target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n    target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n  }\n\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      moveToTarget();\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    moveToTarget();\n    onClick?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n    setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n    onBlur?.(event);\n  };\n\n  return {\n    onBlur: handleBlur,\n    onClick: handleClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":["useState","useRef","useEffect"],"mappings":"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"}

package/dist-cjs/split-layout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<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.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReactElement | null;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","splitLayoutCss","jsxs","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAiC5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE,EAAE,OAAS,EAAA,SAAA,EAAW,WAAW,GAAG,IAAA,IACpC,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAAC,eAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<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.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\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?: FlexLayoutProps<ElementType>[\"margin\"];\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?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReactElement | null;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","splitLayoutCss","jsxs","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE,EAAE,OAAS,EAAA,SAAA,EAAW,WAAW,GAAG,IAAA,IACpC,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAAC,eAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/stack-layout/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.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  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<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?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","stackLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AA6BnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;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,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.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  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<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?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | 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?: FlexLayoutProps<ElementType>[\"margin\"];\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?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","stackLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;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,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}