@salt-ds/core 1.55.0 → 1.56.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @salt-ds/core
 
+## 1.56.0
+
+### Minor Changes
+
+- 972e37e: Added mobile density tokens.
+- 4507919: Added table components, `Table`, `TBody`, `TD`, `TFoot`, `TH`, `THead`, `TR`, `TableContainer`.
+
+  `Table` is a basic HTML table intended for simple data display.
+
+  ```tsx
+  <TableContainer>
+    <Table>
+      <caption>Table name</caption>
+      <THead>
+        <TR>
+          <TH>Header 1</TH>
+          <TH>Header 2</TH>
+        </TR>
+      </THead>
+      <TBody>
+        <TR>
+          <TD>Row 1, Col 1</TD>
+          <TD>Row 1, Col 2</TD>
+        </TR>
+        <TR>
+          <TD>Row 2, Col 1</TD>
+          <TD>Row 2, Col 2</TD>
+        </TR>
+      </TBody>
+      <TFoot>
+        <TR>
+          <TD>Footer 1</TD>
+          <TD>Footer 2</TD>
+        </TR>
+      </TFoot>
+    </Table>
+  </TableContainer>
+  ```
+
 ## 1.55.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -4107,6 +4107,186 @@ a:focus .saltCard-interactable.saltCard-disabled {
   padding-bottom: var(--salt-spacing-50);
 }
 
+/* src/table/Table.css */
+.saltTable {
+  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));
+}
+.saltTable-primary {
+  --table-background: var(--salt-container-primary-background);
+}
+.saltTable-secondary {
+  --table-background: var(--salt-container-secondary-background);
+}
+.saltTable-tertiary {
+  --table-background: var(--salt-container-tertiary-background);
+}
+.saltTable-divider-primary {
+  --table-divider-color: var(--salt-separable-primary-borderColor);
+}
+.saltTable-divider-secondary {
+  --table-divider-color: var(--salt-separable-secondary-borderColor);
+}
+.saltTable-divider-tertiary {
+  --table-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-tertiary-background);
+}
+table.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-secondary-background);
+}
+table.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-primary-background);
+}
+table.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-primary-background);
+}
+table.saltTable {
+  border-spacing: 0;
+  border-radius: var(--salt-palette-corner, 0);
+  border-collapse: collapse;
+  color: var(--salt-content-primary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+  width: 100%;
+}
+table.saltTable tr {
+  background: var(--table-background);
+}
+table.saltTable tbody tr {
+  height: var(--table-row-height);
+  min-height: var(--table-row-height);
+}
+table.saltTable tbody tr:not(:last-child) {
+  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable.saltTable-divider-none tbody tr {
+  --table-divider-color: transparent;
+}
+table.saltTable thead {
+  border-start-start-radius: var(--salt-palette-corner);
+  border-start-end-radius: var(--salt-palette-corner);
+  color: var(--salt-content-secondary-foreground);
+  height: var(--table-header-height);
+  min-height: var(--table-header-height);
+  font-size: var(--salt-text-label-fontSize);
+  font-weight: var(--salt-text-label-fontWeight-strong);
+  line-height: var(--salt-text-label-lineHeight);
+}
+table.saltTable thead.saltTable-thead-sticky {
+  position: sticky;
+  top: 0;
+}
+table.saltTable thead.saltTable-thead-primary tr {
+  background: var(--salt-container-primary-background);
+}
+table.saltTable thead.saltTable-thead-secondary tr {
+  background: var(--salt-container-secondary-background);
+}
+table.saltTable thead.saltTable-thead-tertiary tr {
+  background: var(--salt-container-tertiary-background);
+}
+table.saltTable thead.saltTable-thead tr {
+  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable thead.saltTable-thead-divider-primary {
+  --table-header-divider-color: var(--salt-separable-primary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-secondary {
+  --table-header-divider-color: var(--salt-separable-secondary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-tertiary {
+  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable thead.saltTable-thead-divider-none {
+  --table-header-divider-color: transparent;
+}
+table.saltTable tfoot {
+  border-end-start-radius: var(--salt-palette-corner);
+  border-end-end-radius: var(--salt-palette-corner);
+  color: var(--salt-content-primary-foreground);
+  height: var(--table-footer-height);
+  min-height: var(--table-footer-height);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
+  font-weight: var(--salt-text-fontWeight-strong);
+}
+table.saltTable tfoot.saltTable-tfoot-sticky {
+  position: sticky;
+  bottom: 0;
+}
+table.saltTable tfoot.saltTable-tfoot tr {
+  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);
+}
+table.saltTable tfoot.saltTable-tfoot-primary tr {
+  background: var(--salt-container-primary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-secondary tr {
+  background: var(--salt-container-secondary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-tertiary tr {
+  background: var(--salt-container-tertiary-background);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-primary tr {
+  --table-footer-divider-color: var(--salt-separable-primary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-secondary tr {
+  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {
+  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);
+}
+table.saltTable tfoot.saltTable-tfoot-divider-none tr {
+  --table-footer-divider-color: transparent;
+}
+table.saltTable th {
+  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
+  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));
+  position: relative;
+  text-align: start;
+  vertical-align: top;
+  font-weight: inherit;
+}
+table.saltTable th.saltTable-th-align-left {
+  text-align: start;
+}
+table.saltTable th.saltTable-th-align-right {
+  text-align: end;
+}
+table.saltTable tbody th[scope=row] {
+  font-weight: var(--salt-text-fontWeight-strong);
+  line-height: var(--salt-text-lineHeight);
+}
+table.saltTable th + th::before {
+  background: var(--salt-separable-tertiary-borderColor);
+  content: "";
+  position: absolute;
+  z-index: 1;
+  display: block;
+  width: var(--salt-size-fixed-100);
+  height: calc(100% - var(--salt-spacing-200));
+  left: 0;
+  top: var(--salt-spacing-100);
+}
+table.saltTable td {
+  height: 100%;
+  vertical-align: top;
+  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
+}
+table.saltTable td.saltTable-td-align-left {
+  text-align: start;
+}
+table.saltTable td.saltTable-td-align-right {
+  text-align: end;
+}
+.saltTable-container {
+  width: 100%;
+  overflow: auto;
+}
+
 /* src/tag/Tag.css */
 .saltTag {
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
@@ -5580,4 +5760,4 @@ label.saltText small,
   color: var(--salt-status-error-foreground-informative);
 }
 
-/* src/1463f447-906c-4b6c-9e48-a11d90979521.css */
+/* src/54a47adf-2206-4fc8-b932-3ebc87962e9a.css */

package/dist-cjs/index.js

@@ -105,6 +105,14 @@ var ValidationStatus = require('./status-indicator/ValidationStatus.js');
 var Step = require('./stepper/Step.js');
 var Stepper = require('./stepper/Stepper.js');
 var Switch = require('./switch/Switch.js');
+var Table = require('./table/Table.js');
+var TableContainer = require('./table/TableContainer.js');
+var TBody = require('./table/TBody.js');
+var TD = require('./table/TD.js');
+var TFoot = require('./table/TFoot.js');
+var TH = require('./table/TH.js');
+var THead = require('./table/THead.js');
+var TR = require('./table/TR.js');
 var Tag = require('./tag/Tag.js');
 var Code = require('./text/Code.js');
 var Display = require('./text/Display.js');
@@ -290,6 +298,15 @@ exports.VALIDATION_NAMED_STATUS = ValidationStatus.VALIDATION_NAMED_STATUS;
 exports.Step = Step.Step;
 exports.Stepper = Stepper.Stepper;
 exports.Switch = Switch.Switch;
+exports.Table = Table.Table;
+exports.withTableBaseName = Table.withTableBaseName;
+exports.TableContainer = TableContainer.TableContainer;
+exports.TBody = TBody.TBody;
+exports.TD = TD.TD;
+exports.TFoot = TFoot.TFoot;
+exports.TH = TH.TH;
+exports.THead = THead.THead;
+exports.TR = TR.TR;
 exports.Tag = Tag.Tag;
 exports.Code = Code.Code;
 exports.Display1 = Display.Display1;

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/salt-provider/ThemeApplicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeApplicator.js","sources":["../src/salt-provider/ThemeApplicator.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n} from \"react\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme/index\";\nimport { useId } from \"../utils/useId\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nexport interface ThemeApplicatorProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo: \"root\" | \"scope\" | \"child\";\n  /**\n   * Either \"high\", \"medium\", \"low\" or \"touch\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode: Mode;\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n  children?: ReactNode;\n}\n\nconst providerSymbol = Symbol.for(\"salt-provider\");\n\nexport function ThemeApplicator({\n  applyClassesTo,\n  children,\n  density,\n  mode,\n  theme,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: ThemeApplicatorProps) {\n  const targetWindow = useWindow();\n\n  const providerId = useId();\n\n  useIsomorphicLayoutEffect(() => {\n    if (applyClassesTo !== \"root\" || !targetWindow || !providerId) return;\n\n    const targetDocument: Document & { [providerSymbol]?: string } =\n      targetWindow.document;\n\n    // Claim the document if no other provider has already. The symbol is used so the lock isn't enumerable and guarantees it won't clash with anything else.\n    if (!targetDocument[providerSymbol]) {\n      targetDocument[providerSymbol] = providerId;\n    }\n\n    if (providerId !== targetDocument[providerSymbol]) {\n      console.warn(\n        \"Multiple providers targeting the same window. There can be only one level root level SaltProvider per window.\",\n      );\n      return;\n    }\n\n    const themeNames = theme.split(\" \");\n\n    // add the styles we want to apply\n    targetDocument.documentElement.classList.add(\n      ...themeNames,\n      `salt-density-${density}`,\n    );\n    targetDocument.documentElement.dataset.mode = mode;\n\n    // Theme Next\n    if (corner) targetDocument.documentElement.dataset.corner = corner;\n    if (headingFont)\n      targetDocument.documentElement.dataset.headingFont = headingFont;\n    if (accent) targetDocument.documentElement.dataset.accent = accent;\n    if (actionFont)\n      targetDocument.documentElement.dataset.actionFont = actionFont;\n\n    return () => {\n      // Delete lock\n      delete targetDocument[providerSymbol];\n\n      // When unmounting/remounting, remove the applied styles from the root\n      targetDocument.documentElement.classList.remove(\n        ...themeNames,\n        `salt-density-${density}`,\n      );\n      targetDocument.documentElement.dataset.mode = undefined;\n\n      // Theme Next\n      delete targetDocument.documentElement.dataset.corner;\n      delete targetDocument.documentElement.dataset.headingFont;\n      delete targetDocument.documentElement.dataset.accent;\n      delete targetDocument.documentElement.dataset.actionFont;\n    };\n  }, [\n    providerId,\n    applyClassesTo,\n    density,\n    mode,\n    theme,\n    targetWindow,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          theme,\n          `salt-density-${density}`,\n        ),\n        // @ts-expect-error\n        \"data-mode\": mode,\n        ...themeNextProps,\n      });\n    }\n    console.warn(\n      `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`,\n    );\n    return children;\n  }\n\n  if (applyClassesTo === \"scope\") {\n    return (\n      <div\n        className={clsx(\"salt-provider\", theme, `salt-density-${density}`)}\n        data-mode={mode}\n        {...themeNextProps}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return children;\n}\n"],"names":["useWindow","useId","useIsomorphicLayoutEffect","isValidElement","cloneElement","clsx","jsx"],"mappings":"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"}
+{"version":3,"file":"ThemeApplicator.js","sources":["../src/salt-provider/ThemeApplicator.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n} from \"react\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme/index\";\nimport { useId } from \"../utils/useId\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nexport interface ThemeApplicatorProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo: \"root\" | \"scope\" | \"child\";\n  /**\n   * Either \"high\", \"medium\", \"low\", \"touch\" or \"mobile\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode: Mode;\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n  children?: ReactNode;\n}\n\nconst providerSymbol = Symbol.for(\"salt-provider\");\n\nexport function ThemeApplicator({\n  applyClassesTo,\n  children,\n  density,\n  mode,\n  theme,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: ThemeApplicatorProps) {\n  const targetWindow = useWindow();\n\n  const providerId = useId();\n\n  useIsomorphicLayoutEffect(() => {\n    if (applyClassesTo !== \"root\" || !targetWindow || !providerId) return;\n\n    const targetDocument: Document & { [providerSymbol]?: string } =\n      targetWindow.document;\n\n    // Claim the document if no other provider has already. The symbol is used so the lock isn't enumerable and guarantees it won't clash with anything else.\n    if (!targetDocument[providerSymbol]) {\n      targetDocument[providerSymbol] = providerId;\n    }\n\n    if (providerId !== targetDocument[providerSymbol]) {\n      console.warn(\n        \"Multiple providers targeting the same window. There can be only one level root level SaltProvider per window.\",\n      );\n      return;\n    }\n\n    const themeNames = theme.split(\" \");\n\n    // add the styles we want to apply\n    targetDocument.documentElement.classList.add(\n      ...themeNames,\n      `salt-density-${density}`,\n    );\n    targetDocument.documentElement.dataset.mode = mode;\n\n    // Theme Next\n    if (corner) targetDocument.documentElement.dataset.corner = corner;\n    if (headingFont)\n      targetDocument.documentElement.dataset.headingFont = headingFont;\n    if (accent) targetDocument.documentElement.dataset.accent = accent;\n    if (actionFont)\n      targetDocument.documentElement.dataset.actionFont = actionFont;\n\n    return () => {\n      // Delete lock\n      delete targetDocument[providerSymbol];\n\n      // When unmounting/remounting, remove the applied styles from the root\n      targetDocument.documentElement.classList.remove(\n        ...themeNames,\n        `salt-density-${density}`,\n      );\n      targetDocument.documentElement.dataset.mode = undefined;\n\n      // Theme Next\n      delete targetDocument.documentElement.dataset.corner;\n      delete targetDocument.documentElement.dataset.headingFont;\n      delete targetDocument.documentElement.dataset.accent;\n      delete targetDocument.documentElement.dataset.actionFont;\n    };\n  }, [\n    providerId,\n    applyClassesTo,\n    density,\n    mode,\n    theme,\n    targetWindow,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          theme,\n          `salt-density-${density}`,\n        ),\n        // @ts-expect-error\n        \"data-mode\": mode,\n        ...themeNextProps,\n      });\n    }\n    console.warn(\n      `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`,\n    );\n    return children;\n  }\n\n  if (applyClassesTo === \"scope\") {\n    return (\n      <div\n        className={clsx(\"salt-provider\", theme, `salt-density-${density}`)}\n        data-mode={mode}\n        {...themeNextProps}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return children;\n}\n"],"names":["useWindow","useId","useIsomorphicLayoutEffect","isValidElement","cloneElement","clsx","jsx"],"mappings":"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"}

package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js

@@ -15,19 +15,22 @@ const sizeAndStrokeWidthMapping = {
     high: { width: 12, strokeWidth: 2 },
     medium: { width: 12, strokeWidth: 2 },
     low: { width: 14, strokeWidth: 2 },
-    touch: { width: 16, strokeWidth: 2 }
+    touch: { width: 16, strokeWidth: 2 },
+    mobile: { width: 16, strokeWidth: 2 }
   },
   medium: {
     high: { width: 20, strokeWidth: 2 },
     medium: { width: 28, strokeWidth: 4 },
     low: { width: 36, strokeWidth: 6 },
-    touch: { width: 44, strokeWidth: 8 }
+    touch: { width: 44, strokeWidth: 8 },
+    mobile: { width: 44, strokeWidth: 8 }
   },
   large: {
     high: { width: 40, strokeWidth: 2 },
     medium: { width: 56, strokeWidth: 4 },
     low: { width: 72, strokeWidth: 6 },
-    touch: { width: 88, strokeWidth: 8 }
+    touch: { width: 88, strokeWidth: 8 },
+    mobile: { width: 88, strokeWidth: 8 }
   }
 };
 const SpinnerSVG = ({

package/dist-cjs/spinner/svgSpinners/SpinnerSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { Density } from \"../../theme\";\nimport { makePrefixer } from \"../../utils\";\nimport type { SpinnerSVGSize } from \"../Spinner\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ninterface SpinnerProps {\n  id?: string;\n  rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n  size: SpinnerSVGSize;\n  density: Density;\n}\n\nconst sizeAndStrokeWidthMapping = {\n  small: {\n    high: { width: 12, strokeWidth: 2 },\n    medium: { width: 12, strokeWidth: 2 },\n    low: { width: 14, strokeWidth: 2 },\n    touch: { width: 16, strokeWidth: 2 },\n  },\n  medium: {\n    high: { width: 20, strokeWidth: 2 },\n    medium: { width: 28, strokeWidth: 4 },\n    low: { width: 36, strokeWidth: 6 },\n    touch: { width: 44, strokeWidth: 8 },\n  },\n  large: {\n    high: { width: 40, strokeWidth: 2 },\n    medium: { width: 56, strokeWidth: 4 },\n    low: { width: 72, strokeWidth: 6 },\n    touch: { width: 88, strokeWidth: 8 },\n  },\n};\n\nexport const SpinnerSVG = ({\n  id = \"svg-spinner\",\n  rest,\n  size,\n  density,\n}: SpinnerProps) => {\n  const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];\n  const radius = (width - strokeWidth) / 2;\n\n  return (\n    <svg\n      className={withBaseName(\"spinner\")}\n      viewBox={`0 0 ${width} ${width}`}\n      id={id}\n      {...rest}\n    >\n      <defs>\n        <linearGradient id={`${id}-1`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"15%\"\n            stopOpacity=\"1\"\n          />\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"100%\"\n            stopOpacity=\"0\"\n          />\n        </linearGradient>\n      </defs>\n      <g fill=\"none\">\n        {/* \n          This first path draws the top half of the circle without a gradient. \n          It starts from the right end, moves in a circular arc, and ends at the left end.\n        */}\n        <path\n          d={`M${width - strokeWidth / 2},${\n            width / 2\n          } a${radius},${radius} 0 1,0 -${width - strokeWidth},0`}\n          stroke=\"var(--saltSpinner-gradient-color, var(--salt-accent-background)\"\n          strokeWidth=\"var(--spinner-strokeWidth)\"\n          fill=\"none\"\n        />\n        {/* \n          This second path draws the left half of the circle with a gradient that transitions \n          from opaque on the left to transparent on the right.\n          It starts from the top-center, moves in a circular arc, and ends at the bottom-center.\n        */}\n        <path\n          d={`M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${\n            width - strokeWidth\n          }`}\n          stroke={`url(#${id}-1)`}\n          strokeWidth=\"var(--spinner-strokeWidth)\"\n          fill=\"none\"\n        />\n      </g>\n    </svg>\n  );\n};\n"],"names":["makePrefixer","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { Density } from \"../../theme\";\nimport { makePrefixer } from \"../../utils\";\nimport type { SpinnerSVGSize } from \"../Spinner\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\ninterface SpinnerProps {\n  id?: string;\n  rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n  size: SpinnerSVGSize;\n  density: Density;\n}\n\nconst sizeAndStrokeWidthMapping = {\n  small: {\n    high: { width: 12, strokeWidth: 2 },\n    medium: { width: 12, strokeWidth: 2 },\n    low: { width: 14, strokeWidth: 2 },\n    touch: { width: 16, strokeWidth: 2 },\n    mobile: { width: 16, strokeWidth: 2 },\n  },\n  medium: {\n    high: { width: 20, strokeWidth: 2 },\n    medium: { width: 28, strokeWidth: 4 },\n    low: { width: 36, strokeWidth: 6 },\n    touch: { width: 44, strokeWidth: 8 },\n    mobile: { width: 44, strokeWidth: 8 },\n  },\n  large: {\n    high: { width: 40, strokeWidth: 2 },\n    medium: { width: 56, strokeWidth: 4 },\n    low: { width: 72, strokeWidth: 6 },\n    touch: { width: 88, strokeWidth: 8 },\n    mobile: { width: 88, strokeWidth: 8 },\n  },\n};\n\nexport const SpinnerSVG = ({\n  id = \"svg-spinner\",\n  rest,\n  size,\n  density,\n}: SpinnerProps) => {\n  const { width, strokeWidth } = sizeAndStrokeWidthMapping[size][density];\n  const radius = (width - strokeWidth) / 2;\n\n  return (\n    <svg\n      className={withBaseName(\"spinner\")}\n      viewBox={`0 0 ${width} ${width}`}\n      id={id}\n      {...rest}\n    >\n      <defs>\n        <linearGradient id={`${id}-1`} x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"0\">\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"15%\"\n            stopOpacity=\"1\"\n          />\n          <stop\n            className={withBaseName(\"gradientStop\")}\n            offset=\"100%\"\n            stopOpacity=\"0\"\n          />\n        </linearGradient>\n      </defs>\n      <g fill=\"none\">\n        {/*\n          This first path draws the top half of the circle without a gradient.\n          It starts from the right end, moves in a circular arc, and ends at the left end.\n        */}\n        <path\n          d={`M${width - strokeWidth / 2},${\n            width / 2\n          } a${radius},${radius} 0 1,0 -${width - strokeWidth},0`}\n          stroke=\"var(--saltSpinner-gradient-color, var(--salt-accent-background)\"\n          strokeWidth=\"var(--spinner-strokeWidth)\"\n          fill=\"none\"\n        />\n        {/*\n          This second path draws the left half of the circle with a gradient that transitions\n          from opaque on the left to transparent on the right.\n          It starts from the top-center, moves in a circular arc, and ends at the bottom-center.\n        */}\n        <path\n          d={`M${width / 2},${strokeWidth / 2} a${radius},${radius} 0 1,0 0,${\n            width - strokeWidth\n          }`}\n          stroke={`url(#${id}-1)`}\n          strokeWidth=\"var(--spinner-strokeWidth)\"\n          fill=\"none\"\n        />\n      </g>\n    </svg>\n  );\n};\n"],"names":["makePrefixer","jsxs","jsx"],"mappings":"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"}

package/dist-cjs/table/TBody.js

@@ -0,0 +1,32 @@
+'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 Table$1 = require('./Table.js');
+var Table = require('./Table.css.js');
+
+const TBody = React.forwardRef(
+  function TBody2({ children, className, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-table-tbody",
+      css: Table,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tbody",
+      {
+        ref,
+        className: clsx.clsx(Table$1.withTableBaseName("tbody"), className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.TBody = TBody;
+//# sourceMappingURL=TBody.js.map

package/dist-cjs/table/TBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TBody.js","sources":["../src/table/TBody.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TBodyProps extends ComponentPropsWithoutRef<\"tbody\"> {}\n\nexport const TBody = forwardRef<HTMLTableSectionElement, TBodyProps>(\n  function TBody({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-table-tbody\",\n      css: tableCss,\n      window: targetWindow,\n    });\n\n    return (\n      <tbody\n        ref={ref}\n        className={clsx(withTableBaseName(\"tbody\"), className)}\n        {...rest}\n      >\n        {children}\n      </tbody>\n    );\n  },\n);\n"],"names":["forwardRef","TBody","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AAUO,MAAM,KAAA,GAAQA,gBAAA;AAAA,EACnB,SAASC,OAAM,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACpD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,KAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAKC,yBAAA,CAAkB,OAAO,GAAG,SAAS,CAAA;AAAA,QACpD,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/table/TD.js

@@ -0,0 +1,34 @@
+'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 Table$1 = require('./Table.js');
+var Table = require('./Table.css.js');
+
+const TD = React.forwardRef(function TD2({ children, className, textAlign = "left", ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-table-td",
+    css: Table,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: clsx(
+        Table$1.withTableBaseName("td"),
+        Table$1.withTableBaseName("td", "align", textAlign),
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.TD = TD;
+//# sourceMappingURL=TD.js.map

package/dist-cjs/table/TD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TD.js","sources":["../src/table/TD.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TDProps extends ComponentPropsWithoutRef<\"td\"> {\n  /**\n   * Specifies the alignment of the text within the `TD`.\n   *\n   * @default \"left\"\n   */\n  textAlign?: \"left\" | \"right\";\n}\n\nexport const TD = forwardRef<HTMLTableCellElement, TDProps>(function TD(\n  { children, className, textAlign = \"left\", ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-table-td\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  return (\n    <td\n      ref={ref}\n      className={clsx(\n        withTableBaseName(\"td\"),\n        withTableBaseName(\"td\", \"align\", textAlign),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </td>\n  );\n});\n"],"names":["forwardRef","TD","useWindow","useComponentCssInjection","tableCss","jsx","withTableBaseName"],"mappings":";;;;;;;;;;AAiBO,MAAM,EAAA,GAAKA,gBAAA,CAA0C,SAASC,GAAAA,CACnE,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,GAAY,MAAA,EAAQ,GAAG,IAAA,EAAK,EACnD,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKC,KAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACTC,0BAAkB,IAAI,CAAA;AAAA,QACtBA,yBAAA,CAAkB,IAAA,EAAM,OAAA,EAAS,SAAS,CAAA;AAAA,QAC1C;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/table/TFoot.js

@@ -0,0 +1,45 @@
+'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 Table$1 = require('./Table.js');
+var Table = require('./Table.css.js');
+
+const TFoot = React.forwardRef(
+  function TFoot2({
+    children,
+    className,
+    sticky = false,
+    variant,
+    divider = "primary",
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-table-tfoot",
+      css: Table,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "tfoot",
+      {
+        ref,
+        className: clsx.clsx(
+          Table$1.withTableBaseName("tfoot"),
+          { [Table$1.withTableBaseName(`tfoot-${variant}`)]: variant },
+          { [Table$1.withTableBaseName("tfoot-sticky")]: sticky },
+          { [Table$1.withTableBaseName(`tfoot-divider-${divider}`)]: divider },
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.TFoot = TFoot;
+//# sourceMappingURL=TFoot.js.map

package/dist-cjs/table/TFoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TFoot.js","sources":["../src/table/TFoot.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TFootProps extends ComponentPropsWithoutRef<\"tfoot\"> {\n  /**\n   * If footer is positioned with sticky styling.\n   * @default false\n   */\n  sticky?: boolean;\n  /**\n   * Divider styling variant. Defaults to \"primary\";\n   * @default primary\n   */\n  divider?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n  /**\n   * Styling variant for footer.\n   * If undefined, will match variant of parent Table component's variant.\n   * @default undefined\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const TFoot = forwardRef<HTMLTableSectionElement, TFootProps>(\n  function TFoot(\n    {\n      children,\n      className,\n      sticky = false,\n      variant,\n      divider = \"primary\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-table-tfoot\",\n      css: tableCss,\n      window: targetWindow,\n    });\n\n    return (\n      <tfoot\n        ref={ref}\n        className={clsx(\n          withTableBaseName(\"tfoot\"),\n          { [withTableBaseName(`tfoot-${variant}`)]: variant },\n          { [withTableBaseName(\"tfoot-sticky\")]: sticky },\n          { [withTableBaseName(`tfoot-divider-${divider}`)]: divider },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </tfoot>\n    );\n  },\n);\n"],"names":["forwardRef","TFoot","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AA2BO,MAAM,KAAA,GAAQA,gBAAA;AAAA,EACnB,SAASC,MAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA,GAAS,KAAA;AAAA,IACT,OAAA;AAAA,IACA,OAAA,GAAU,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,KAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA;AAAA,UACTC,0BAAkB,OAAO,CAAA;AAAA,UACzB,EAAE,CAACA,yBAAA,CAAkB,CAAA,MAAA,EAAS,OAAO,CAAA,CAAE,CAAC,GAAG,OAAA,EAAQ;AAAA,UACnD,EAAE,CAACA,yBAAA,CAAkB,cAAc,CAAC,GAAG,MAAA,EAAO;AAAA,UAC9C,EAAE,CAACA,yBAAA,CAAkB,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAE,CAAC,GAAG,OAAA,EAAQ;AAAA,UAC3D;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/table/TH.js

@@ -0,0 +1,34 @@
+'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 Table$1 = require('./Table.js');
+var Table = require('./Table.css.js');
+
+const TH = React.forwardRef(function TH2({ children, className, textAlign = "left", ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-table-th",
+    css: Table,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ref,
+      className: clsx.clsx(
+        Table$1.withTableBaseName("th"),
+        Table$1.withTableBaseName("th", "align", textAlign),
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.TH = TH;
+//# sourceMappingURL=TH.js.map

package/dist-cjs/table/TH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TH.js","sources":["../src/table/TH.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface THProps extends ComponentPropsWithoutRef<\"th\"> {\n  /**\n   * Specifies the alignment of the text within the `TH`.\n   *\n   * @default \"left\"\n   */\n  textAlign?: \"left\" | \"right\";\n}\n\nexport const TH = forwardRef<HTMLTableCellElement, THProps>(function TH(\n  { children, className, textAlign = \"left\", ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-table-th\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  return (\n    <th\n      ref={ref}\n      className={clsx(\n        withTableBaseName(\"th\"),\n        withTableBaseName(\"th\", \"align\", textAlign),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </th>\n  );\n});\n"],"names":["forwardRef","TH","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AAiBO,MAAM,EAAA,GAAKA,gBAAA,CAA0C,SAASC,GAAAA,CACnE,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,GAAY,MAAA,EAAQ,GAAG,IAAA,EAAK,EACnD,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKC,KAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA;AAAA,QACTC,0BAAkB,IAAI,CAAA;AAAA,QACtBA,yBAAA,CAAkB,IAAA,EAAM,OAAA,EAAS,SAAS,CAAA;AAAA,QAC1C;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/table/THead.js

@@ -0,0 +1,45 @@
+'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 Table$1 = require('./Table.js');
+var Table = require('./Table.css.js');
+
+const THead = React.forwardRef(
+  function THead2({
+    children,
+    className,
+    sticky = false,
+    variant,
+    divider = "primary",
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-table-thead",
+      css: Table,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "thead",
+      {
+        ref,
+        className: clsx.clsx(
+          Table$1.withTableBaseName("thead"),
+          { [Table$1.withTableBaseName(`thead-${variant}`)]: variant },
+          { [Table$1.withTableBaseName("thead-sticky")]: sticky },
+          { [Table$1.withTableBaseName(`thead-divider-${divider}`)]: divider },
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.THead = THead;
+//# sourceMappingURL=THead.js.map

package/dist-cjs/table/THead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"THead.js","sources":["../src/table/THead.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface THeadProps extends ComponentPropsWithoutRef<\"thead\"> {\n  /**\n   * If header is positioned with sticky styling.\n   * @default false\n   */\n  sticky?: boolean;\n  /**\n   * Divider styling variant. Defaults to \"primary\";\n   * @default primary\n   */\n  divider?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n  /**\n   * Styling variant for header.\n   * If undefined, will match variant of parent Table component's variant.\n   * @default undefined\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const THead = forwardRef<HTMLTableSectionElement, THeadProps>(\n  function THead(\n    {\n      children,\n      className,\n      sticky = false,\n      variant,\n      divider = \"primary\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-table-thead\",\n      css: tableCss,\n      window: targetWindow,\n    });\n\n    return (\n      <thead\n        ref={ref}\n        className={clsx(\n          withTableBaseName(\"thead\"),\n          { [withTableBaseName(`thead-${variant}`)]: variant },\n          { [withTableBaseName(\"thead-sticky\")]: sticky },\n          { [withTableBaseName(`thead-divider-${divider}`)]: divider },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </thead>\n    );\n  },\n);\n"],"names":["forwardRef","THead","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AA2BO,MAAM,KAAA,GAAQA,gBAAA;AAAA,EACnB,SAASC,MAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA,GAAS,KAAA;AAAA,IACT,OAAA;AAAA,IACA,OAAA,GAAU,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,KAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA;AAAA,UACTC,0BAAkB,OAAO,CAAA;AAAA,UACzB,EAAE,CAACA,yBAAA,CAAkB,CAAA,MAAA,EAAS,OAAO,CAAA,CAAE,CAAC,GAAG,OAAA,EAAQ;AAAA,UACnD,EAAE,CAACA,yBAAA,CAAkB,cAAc,CAAC,GAAG,MAAA,EAAO;AAAA,UAC9C,EAAE,CAACA,yBAAA,CAAkB,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAE,CAAC,GAAG,OAAA,EAAQ;AAAA,UAC3D;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/table/TR.js

@@ -0,0 +1,30 @@
+'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 Table$1 = require('./Table.js');
+var Table = require('./Table.css.js');
+
+const TR = React.forwardRef(function TR2({ children, className, ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-table-tr",
+    css: Table,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      ref,
+      className: clsx.clsx(Table$1.withTableBaseName("tr"), className),
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.TR = TR;
+//# sourceMappingURL=TR.js.map

package/dist-cjs/table/TR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TR.js","sources":["../src/table/TR.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { withTableBaseName } from \"./Table\";\n\nimport tableCss from \"./Table.css\";\n\nexport interface TRProps extends ComponentPropsWithoutRef<\"tr\"> {}\n\nexport const TR = forwardRef<HTMLTableRowElement, TRProps>(function TR(\n  { children, className, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-table-tr\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  return (\n    <tr\n      ref={ref}\n      className={clsx(withTableBaseName(\"tr\"), className)}\n      {...rest}\n    >\n      {children}\n    </tr>\n  );\n});\n"],"names":["forwardRef","TR","useWindow","useComponentCssInjection","tableCss","jsx","clsx","withTableBaseName"],"mappings":";;;;;;;;;;AAUO,MAAM,EAAA,GAAKA,gBAAA,CAAyC,SAASC,GAAAA,CAClE,EAAE,UAAU,SAAA,EAAW,GAAG,IAAA,EAAK,EAC/B,GAAA,EACA;AACA,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKC,KAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA,CAAKC,yBAAA,CAAkB,IAAI,GAAG,SAAS,CAAA;AAAA,MACjD,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}