@veeqo/ui 14.10.0-beta-2 → 14.10.1

package/dist/components/DataTable/components/Wrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.cjs","sources":["../../../../src/components/DataTable/components/Wrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { BorderMode } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  borderMode?: BorderMode;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nconst borderModeClassMap: Record<BorderMode, string> = {\n  full: styles.borderFull,\n  vertical: styles.borderVertical,\n  none: styles.borderNone,\n};\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperProps>(\n  ({ borderMode = 'full', className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.wrapper, borderModeClassMap[borderMode], className])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nWrapper.displayName = 'Wrapper';\n"],"names":["styles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAWA,MAAM,kBAAkB,GAA+B;IACrD,IAAI,EAAEA,gBAAM,CAAC,UAAU;IACvB,QAAQ,EAAEA,gBAAM,CAAC,cAAc;IAC/B,IAAI,EAAEA,gBAAM,CAAC,UAAU;CACxB;AAEM,MAAM,OAAO,GAAGC,sBAAK,CAAC,UAAU,CACrC,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACzDA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACF,gBAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACnF,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Wrapper.cjs","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BorderMode } from '../types';\n\nconst borderModeStyles = {\n  full: `border-width: 1px; border-radius: ${theme.radius.base};`,\n  vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',\n  none: 'border-width: 0;',\n};\n\nexport interface WrapperProps {\n  borderMode?: BorderMode;\n}\n\nexport const Wrapper = styled.div<WrapperProps>`\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: ${theme.colors.neutral.grey.dark};\n\n  ${({ borderMode = 'full' }) => borderModeStyles[borderMode]}\n\n  &, & * {\n    box-sizing: border-box;\n  }\n\n  .hideHeaderDetails th {\n    > * {\n      opacity: 0.1;\n    }\n\n    .th-divider {\n      opacity: 1;\n    }\n  }\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAIA,MAAM,gBAAgB,GAAG;AACvB,IAAA,IAAI,EAAE,CAAA,kCAAA,EAAqCA,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,CAAA,CAAG;AAC/D,IAAA,QAAQ,EAAE,mEAAmE;AAC7E,IAAA,IAAI,EAAE,kBAAkB;CACzB;AAMM,MAAM,OAAO,GAAGC,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6DAAA,EAIfD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA,EAE5C,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,KAAK,gBAAgB,CAAC,UAAU,CAAC;;;;"}

package/dist/components/DataTable/components/Wrapper.d.ts

@@ -1,8 +1,5 @@
-import React from 'react';
 import { BorderMode } from '../types';
-export interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface WrapperProps {
     borderMode?: BorderMode;
-    children?: React.ReactNode;
-    className?: string;
 }
-export declare const Wrapper: React.ForwardRefExoticComponent<WrapperProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;

package/dist/components/DataTable/components/Wrapper.js

@@ -1,15 +1,12 @@
-import React__default from 'react';
-import { buildClassnames } from '../../../utils/buildClassnames.js';
-import 'uid/secure';
-import styles from './DataTable.module.scss.js';
+import styled from 'styled-components';
+import { theme } from '../../../theme/index.js';
 
-const borderModeClassMap = {
-    full: styles.borderFull,
-    vertical: styles.borderVertical,
-    none: styles.borderNone,
+const borderModeStyles = {
+    full: `border-width: 1px; border-radius: ${theme.radius.base};`,
+    vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',
+    none: 'border-width: 0;',
 };
-const Wrapper = React__default.forwardRef(({ borderMode = 'full', className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.wrapper, borderModeClassMap[borderMode], className]), ...rest }, children)));
-Wrapper.displayName = 'Wrapper';
+const Wrapper = styled.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--5gfhdd" }) `width:100%;position:relative;border-style:solid;border-color:${theme.colors.neutral.grey.dark};${({ borderMode = 'full' }) => borderModeStyles[borderMode]} &,& *{box-sizing:border-box;}.hideHeaderDetails th{> *{opacity:0.1;}.th-divider{opacity:1;}}`;
 
 export { Wrapper };
 //# sourceMappingURL=Wrapper.js.map

package/dist/components/DataTable/components/Wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.js","sources":["../../../../src/components/DataTable/components/Wrapper.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { BorderMode } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  borderMode?: BorderMode;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nconst borderModeClassMap: Record<BorderMode, string> = {\n  full: styles.borderFull,\n  vertical: styles.borderVertical,\n  none: styles.borderNone,\n};\n\nexport const Wrapper = React.forwardRef<HTMLDivElement, WrapperProps>(\n  ({ borderMode = 'full', className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.wrapper, borderModeClassMap[borderMode], className])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nWrapper.displayName = 'Wrapper';\n"],"names":["React"],"mappings":";;;;;AAWA,MAAM,kBAAkB,GAA+B;IACrD,IAAI,EAAE,MAAM,CAAC,UAAU;IACvB,QAAQ,EAAE,MAAM,CAAC,cAAc;IAC/B,IAAI,EAAE,MAAM,CAAC,UAAU;CACxB;AAEM,MAAM,OAAO,GAAGA,cAAK,CAAC,UAAU,CACrC,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACzDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACnF,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Wrapper.js","sources":["../../../../src/components/DataTable/components/Wrapper.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { BorderMode } from '../types';\n\nconst borderModeStyles = {\n  full: `border-width: 1px; border-radius: ${theme.radius.base};`,\n  vertical: 'border-width: 0; border-top-width: 1px; border-bottom-width: 1px;',\n  none: 'border-width: 0;',\n};\n\nexport interface WrapperProps {\n  borderMode?: BorderMode;\n}\n\nexport const Wrapper = styled.div<WrapperProps>`\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: ${theme.colors.neutral.grey.dark};\n\n  ${({ borderMode = 'full' }) => borderModeStyles[borderMode]}\n\n  &, & * {\n    box-sizing: border-box;\n  }\n\n  .hideHeaderDetails th {\n    > * {\n      opacity: 0.1;\n    }\n\n    .th-divider {\n      opacity: 1;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;AAIA,MAAM,gBAAgB,GAAG;AACvB,IAAA,IAAI,EAAE,CAAA,kCAAA,EAAqC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,CAAA,CAAG;AAC/D,IAAA,QAAQ,EAAE,mEAAmE;AAC7E,IAAA,IAAI,EAAE,kBAAkB;CACzB;AAMM,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6DAAA,EAIf,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,CAAA,EAE5C,CAAC,EAAE,UAAU,GAAG,MAAM,EAAE,KAAK,gBAAgB,CAAC,UAAU,CAAC;;;;"}

package/dist/components/DataTable/constants.cjs

@@ -2,7 +2,9 @@
 
 const defaultCellSpacing = 3;
 const headerCellHeight = '56px';
+const footerCellHeight = '56px';
 
 exports.defaultCellSpacing = defaultCellSpacing;
+exports.footerCellHeight = footerCellHeight;
 exports.headerCellHeight = headerCellHeight;
 //# sourceMappingURL=constants.cjs.map

package/dist/components/DataTable/constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":";;AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;;;;;"}
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":";;AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,gBAAgB,GAAG;;;;;;"}

package/dist/components/DataTable/constants.js

@@ -1,5 +1,6 @@
 const defaultCellSpacing = 3;
 const headerCellHeight = '56px';
+const footerCellHeight = '56px';
 
-export { defaultCellSpacing, headerCellHeight };
+export { defaultCellSpacing, footerCellHeight, headerCellHeight };
 //# sourceMappingURL=constants.js.map

package/dist/components/DataTable/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":"AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/DataTable/constants.ts"],"sourcesContent":["export const defaultCellSpacing = 3;\n\nexport const headerCellHeight = '56px';\nexport const footerCellHeight = '56px';\n"],"names":[],"mappings":"AAAO,MAAM,kBAAkB,GAAG;AAE3B,MAAM,gBAAgB,GAAG;AACzB,MAAM,gBAAgB,GAAG;;;;"}

package/dist/components/DataTable/utils/generateTableCss.cjs

@@ -5,50 +5,86 @@ var parseWidth = require('./parseWidth.cjs');
 var sumAll = require('./sumAll.cjs');
 
 function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
-    const rules = [];
-    // Pinned left columns
-    if (pinnedLeft.length > 0) {
-        pinnedLeft.forEach((_, index) => {
-            rules.push(`th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAll.sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`);
-        });
-    }
-    // Pinned right columns
-    if (pinnedRight.length > 0) {
-        pinnedRight.forEach((_, index) => {
-            rules.push(`th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAll.sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`);
-        });
-    }
-    // Pseudo-element transition (only needed when pinned columns have shadows)
-    if (pinnedLeft.length > 0 || pinnedRight.length > 0) {
-        rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);
-    }
-    // Left shadow
-    if (pinnedLeft.length > 0) {
-        const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
-        rules.push(`th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
-    }
-    // Right shadow
-    if (pinnedRight.length > 0) {
-        const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
-        rules.push(`th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
-    }
-    // Striping
-    if (stripingMode === 'nested') {
-        rules.push(`tbody:nth-of-type(odd) > tr > td { background-color: ${index.theme.colors.neutral.grey.lightest}; }`);
-        rules.push(`tbody + tbody > tr:first-child > td { border-top: 1px solid ${index.theme.colors.neutral.grey.base}; }`);
-    }
-    else {
-        rules.push(`tr:nth-child(odd) > td { background-color: ${index.theme.colors.neutral.grey.lightest}; }`);
-        rules.push(`tr + tr > td { border-top: 1px solid ${index.theme.colors.neutral.grey.base}; }`);
-    }
-    // Grid template columns (applied as a property on the table element)
-    const gridTemplateColumns = columns
-        .map((column) => { var _a; return parseWidth.parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); })
-        .join(' ');
-    return {
-        properties: `grid-template-columns: ${gridTemplateColumns};`,
-        rules,
-    };
+    const pinnedLeftStyles = pinnedLeft.map((_, index) => `
+    th:nth-child(${index + 1}),
+    td:nth-child(${index + 1}) {
+      position: sticky;
+      left: ${cellWidths ? sumAll.sumAllBeforeIndex(cellWidths, index + 1) : 0}px;
+      z-index: 2;
+    }
+  `);
+    const pinnedRightStyles = pinnedRight.map((_, index) => `
+    th:nth-last-child(${index + 1}),
+    td:nth-last-child(${index + 1}) {
+      position: sticky;
+      right: ${cellWidths ? sumAll.sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
+    }
+  `);
+    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
+    const leftShadow = `
+    th:nth-child(${pinnedLeft.length})::after,
+    td:nth-child(${pinnedLeft.length})::after {
+      position: absolute;
+      transform: translate(100%);
+      top: 0;
+      right: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
+    const rightShadow = `
+    th:nth-last-child(${pinnedRight.length})::after,
+    td:nth-last-child(${pinnedRight.length})::after {
+      position: absolute;
+      transform: translate(-100%);
+      top: 0;
+      left: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+    const stripingRow = `
+    tr:nth-child(odd) > td {
+      background-color: ${index.theme.colors.neutral.grey.lightest};
+    }
+
+    tr + tr > td {
+      border-top: 1px solid ${index.theme.colors.neutral.grey.base};
+    }
+  `;
+    const stripingNested = `
+    tbody:nth-of-type(odd) > tr > td {
+      background-color: ${index.theme.colors.neutral.grey.lightest};
+    }
+
+    tbody + tbody > tr:first-child > td {
+      border-top: 1px solid ${index.theme.colors.neutral.grey.base};
+    }
+  `;
+    return `
+    grid-template-columns: ${columns.map((column) => { var _a; return parseWidth.parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); }).join(' ')};
+
+    th::after, td::after {
+      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
+    }
+
+    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}
+    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}
+
+    ${leftShadow}
+    ${rightShadow}
+
+    ${stripingMode === 'nested' ? stripingNested : stripingRow}
+  `;
 }
 
 exports.generateTableCss = generateTableCss;

package/dist/components/DataTable/utils/generateTableCss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport type TableCssOutput = {\n  /** CSS declarations applied directly to the table element (e.g. grid-template-columns) */\n  properties: string;\n  /** Fully-formed CSS rule blocks to be scoped to the table instance */\n  rules: string[];\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs): TableCssOutput {\n  const rules: string[] = [];\n\n  // Pinned left columns\n  if (pinnedLeft.length > 0) {\n    pinnedLeft.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`,\n      );\n    });\n  }\n\n  // Pinned right columns\n  if (pinnedRight.length > 0) {\n    pinnedRight.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`,\n      );\n    });\n  }\n\n  // Pseudo-element transition (only needed when pinned columns have shadows)\n  if (pinnedLeft.length > 0 || pinnedRight.length > 0) {\n    rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);\n  }\n\n  // Left shadow\n  if (pinnedLeft.length > 0) {\n    const isLeftShadowVisible =\n      !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Right shadow\n  if (pinnedRight.length > 0) {\n    const isRightShadowVisible =\n      !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Striping\n  if (stripingMode === 'nested') {\n    rules.push(\n      `tbody:nth-of-type(odd) > tr > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tbody + tbody > tr:first-child > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  } else {\n    rules.push(\n      `tr:nth-child(odd) > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tr + tr > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  }\n\n  // Grid template columns (applied as a property on the table element)\n  const gridTemplateColumns = columns\n    .map((column) => parseWidth(columnWidths[column.id] ?? column.width))\n    .join(' ');\n\n  return {\n    properties: `grid-template-columns: ${gridTemplateColumns};`,\n    rules,\n  };\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":"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"}
+{"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs) {\n  const pinnedLeftStyles = pinnedLeft.map(\n    (_: any, index: number) => `\n    th:nth-child(${index + 1}),\n    td:nth-child(${index + 1}) {\n      position: sticky;\n      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n      z-index: 2;\n    }\n  `,\n  );\n\n  const pinnedRightStyles = pinnedRight.map(\n    (_: any, index: number) => `\n    th:nth-last-child(${index + 1}),\n    td:nth-last-child(${index + 1}) {\n      position: sticky;\n      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n    }\n  `,\n  );\n\n  const isLeftShadowVisible =\n    !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n  const leftShadow = `\n    th:nth-child(${pinnedLeft.length})::after,\n    td:nth-child(${pinnedLeft.length})::after {\n      position: absolute;\n      transform: translate(100%);\n      top: 0;\n      right: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const isRightShadowVisible =\n    !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n  const rightShadow = `\n    th:nth-last-child(${pinnedRight.length})::after,\n    td:nth-last-child(${pinnedRight.length})::after {\n      position: absolute;\n      transform: translate(-100%);\n      top: 0;\n      left: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const stripingRow = `\n    tr:nth-child(odd) > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tr + tr > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  const stripingNested = `\n    tbody:nth-of-type(odd) > tr > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tbody + tbody > tr:first-child > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  return `\n    grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n    th::after, td::after {\n      transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n    }\n\n    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n    ${leftShadow}\n    ${rightShadow}\n\n    ${stripingMode === 'nested' ? stripingNested : stripingRow}\n  `;\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":";;;;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAGA,wBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAGC,uBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAAC,qBAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}

package/dist/components/DataTable/utils/generateTableCss.d.ts

@@ -10,10 +10,4 @@ export type GenerateTableCssArgs = {
     columns: ColumnConfigs;
     enableTransition?: boolean;
 };
-export type TableCssOutput = {
-    /** CSS declarations applied directly to the table element (e.g. grid-template-columns) */
-    properties: string;
-    /** Fully-formed CSS rule blocks to be scoped to the table instance */
-    rules: string[];
-};
-export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): TableCssOutput;
+export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): string;

package/dist/components/DataTable/utils/generateTableCss.js

@@ -3,50 +3,86 @@ import { parseWidth } from './parseWidth.js';
 import { sumAllBeforeIndex, sumAllAfterIndex } from './sumAll.js';
 
 function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
-    const rules = [];
-    // Pinned left columns
-    if (pinnedLeft.length > 0) {
-        pinnedLeft.forEach((_, index) => {
-            rules.push(`th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`);
-        });
-    }
-    // Pinned right columns
-    if (pinnedRight.length > 0) {
-        pinnedRight.forEach((_, index) => {
-            rules.push(`th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`);
-        });
-    }
-    // Pseudo-element transition (only needed when pinned columns have shadows)
-    if (pinnedLeft.length > 0 || pinnedRight.length > 0) {
-        rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);
-    }
-    // Left shadow
-    if (pinnedLeft.length > 0) {
-        const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
-        rules.push(`th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
-    }
-    // Right shadow
-    if (pinnedRight.length > 0) {
-        const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
-        rules.push(`th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`);
-    }
-    // Striping
-    if (stripingMode === 'nested') {
-        rules.push(`tbody:nth-of-type(odd) > tr > td { background-color: ${theme.colors.neutral.grey.lightest}; }`);
-        rules.push(`tbody + tbody > tr:first-child > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`);
-    }
-    else {
-        rules.push(`tr:nth-child(odd) > td { background-color: ${theme.colors.neutral.grey.lightest}; }`);
-        rules.push(`tr + tr > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`);
-    }
-    // Grid template columns (applied as a property on the table element)
-    const gridTemplateColumns = columns
-        .map((column) => { var _a; return parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); })
-        .join(' ');
-    return {
-        properties: `grid-template-columns: ${gridTemplateColumns};`,
-        rules,
-    };
+    const pinnedLeftStyles = pinnedLeft.map((_, index) => `
+    th:nth-child(${index + 1}),
+    td:nth-child(${index + 1}) {
+      position: sticky;
+      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;
+      z-index: 2;
+    }
+  `);
+    const pinnedRightStyles = pinnedRight.map((_, index) => `
+    th:nth-last-child(${index + 1}),
+    td:nth-last-child(${index + 1}) {
+      position: sticky;
+      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
+    }
+  `);
+    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
+    const leftShadow = `
+    th:nth-child(${pinnedLeft.length})::after,
+    td:nth-child(${pinnedLeft.length})::after {
+      position: absolute;
+      transform: translate(100%);
+      top: 0;
+      right: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
+    const rightShadow = `
+    th:nth-last-child(${pinnedRight.length})::after,
+    td:nth-last-child(${pinnedRight.length})::after {
+      position: absolute;
+      transform: translate(-100%);
+      top: 0;
+      left: 0;
+      bottom: -1px;
+      width: 30px;
+      content: "";
+      pointer-events: none;
+      box-sizing: border-box;
+      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
+    }
+  `;
+    const stripingRow = `
+    tr:nth-child(odd) > td {
+      background-color: ${theme.colors.neutral.grey.lightest};
+    }
+
+    tr + tr > td {
+      border-top: 1px solid ${theme.colors.neutral.grey.base};
+    }
+  `;
+    const stripingNested = `
+    tbody:nth-of-type(odd) > tr > td {
+      background-color: ${theme.colors.neutral.grey.lightest};
+    }
+
+    tbody + tbody > tr:first-child > td {
+      border-top: 1px solid ${theme.colors.neutral.grey.base};
+    }
+  `;
+    return `
+    grid-template-columns: ${columns.map((column) => { var _a; return parseWidth((_a = columnWidths[column.id]) !== null && _a !== void 0 ? _a : column.width); }).join(' ')};
+
+    th::after, td::after {
+      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
+    }
+
+    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}
+    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}
+
+    ${leftShadow}
+    ${rightShadow}
+
+    ${stripingMode === 'nested' ? stripingNested : stripingRow}
+  `;
 }
 
 export { generateTableCss };

package/dist/components/DataTable/utils/generateTableCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport type TableCssOutput = {\n  /** CSS declarations applied directly to the table element (e.g. grid-template-columns) */\n  properties: string;\n  /** Fully-formed CSS rule blocks to be scoped to the table instance */\n  rules: string[];\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs): TableCssOutput {\n  const rules: string[] = [];\n\n  // Pinned left columns\n  if (pinnedLeft.length > 0) {\n    pinnedLeft.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-child(${index + 1}), td:nth-child(${index + 1}) { position: sticky; left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px; z-index: 2; }`,\n      );\n    });\n  }\n\n  // Pinned right columns\n  if (pinnedRight.length > 0) {\n    pinnedRight.forEach((_: any, index: number) => {\n      rules.push(\n        `th:nth-last-child(${index + 1}), td:nth-last-child(${index + 1}) { position: sticky; right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px; }`,\n      );\n    });\n  }\n\n  // Pseudo-element transition (only needed when pinned columns have shadows)\n  if (pinnedLeft.length > 0 || pinnedRight.length > 0) {\n    rules.push(`th::after, td::after { transition: box-shadow ${enableTransition ? '.3s' : '0s'}; }`);\n  }\n\n  // Left shadow\n  if (pinnedLeft.length > 0) {\n    const isLeftShadowVisible =\n      !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-child(${pinnedLeft.length})::after, td:nth-child(${pinnedLeft.length})::after { position: absolute; transform: translate(100%); top: 0; right: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Right shadow\n  if (pinnedRight.length > 0) {\n    const isRightShadowVisible =\n      !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n    rules.push(\n      `th:nth-last-child(${pinnedRight.length})::after, td:nth-last-child(${pinnedRight.length})::after { position: absolute; transform: translate(-100%); top: 0; left: 0; bottom: -1px; width: 30px; content: \"\"; pointer-events: none; box-sizing: border-box; box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'}; }`,\n    );\n  }\n\n  // Striping\n  if (stripingMode === 'nested') {\n    rules.push(\n      `tbody:nth-of-type(odd) > tr > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tbody + tbody > tr:first-child > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  } else {\n    rules.push(\n      `tr:nth-child(odd) > td { background-color: ${theme.colors.neutral.grey.lightest}; }`,\n    );\n    rules.push(\n      `tr + tr > td { border-top: 1px solid ${theme.colors.neutral.grey.base}; }`,\n    );\n  }\n\n  // Grid template columns (applied as a property on the table element)\n  const gridTemplateColumns = columns\n    .map((column) => parseWidth(columnWidths[column.id] ?? column.width))\n    .join(' ');\n\n  return {\n    properties: `grid-template-columns: ${gridTemplateColumns};`,\n    rules,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n  pinnedLeft: ColumnConfigs;\n  pinnedRight: ColumnConfigs;\n  cellWidths: Array<number>;\n  scrollPosition: ScrollPosition;\n  stripingMode?: StripingMode;\n  columnWidths: ColumnWidthsType;\n  columns: ColumnConfigs;\n  enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n  pinnedLeft,\n  pinnedRight,\n  cellWidths,\n  scrollPosition,\n  stripingMode,\n  columnWidths,\n  columns,\n  enableTransition = true,\n}: GenerateTableCssArgs) {\n  const pinnedLeftStyles = pinnedLeft.map(\n    (_: any, index: number) => `\n    th:nth-child(${index + 1}),\n    td:nth-child(${index + 1}) {\n      position: sticky;\n      left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n      z-index: 2;\n    }\n  `,\n  );\n\n  const pinnedRightStyles = pinnedRight.map(\n    (_: any, index: number) => `\n    th:nth-last-child(${index + 1}),\n    td:nth-last-child(${index + 1}) {\n      position: sticky;\n      right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n    }\n  `,\n  );\n\n  const isLeftShadowVisible =\n    !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n  const leftShadow = `\n    th:nth-child(${pinnedLeft.length})::after,\n    td:nth-child(${pinnedLeft.length})::after {\n      position: absolute;\n      transform: translate(100%);\n      top: 0;\n      right: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const isRightShadowVisible =\n    !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n  const rightShadow = `\n    th:nth-last-child(${pinnedRight.length})::after,\n    td:nth-last-child(${pinnedRight.length})::after {\n      position: absolute;\n      transform: translate(-100%);\n      top: 0;\n      left: 0;\n      bottom: -1px;\n      width: 30px;\n      content: \"\";\n      pointer-events: none;\n      box-sizing: border-box;\n      box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n    }\n  `;\n\n  const stripingRow = `\n    tr:nth-child(odd) > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tr + tr > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  const stripingNested = `\n    tbody:nth-of-type(odd) > tr > td {\n      background-color: ${theme.colors.neutral.grey.lightest};\n    }\n\n    tbody + tbody > tr:first-child > td {\n      border-top: 1px solid ${theme.colors.neutral.grey.base};\n    }\n  `;\n\n  return `\n    grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n    th::after, td::after {\n      transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n    }\n\n    ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n    ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n    ${leftShadow}\n    ${rightShadow}\n\n    ${stripingMode === 'nested' ? stripingNested : stripingRow}\n  `;\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA,CAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}

package/dist/components/DateInputField/DateInputField.cjs

@@ -6,7 +6,7 @@ var styled = require('./styled.cjs');
 var Button = require('../Button/Button.cjs');
 var Stack = require('../Stack/Stack.cjs');
 require('../Calendars/components/RangeCalendar/styled.cjs');
-require('../Grid/Grid.cjs');
+require('../Grid/index.cjs');
 require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
 require('@internationalized/date');
 require('../Calendars/types.cjs');

package/dist/components/DateInputField/DateInputField.js

@@ -4,7 +4,7 @@ import { DateRangeGroup } from './styled.js';
 import { Button } from '../Button/Button.js';
 import { Stack } from '../Stack/Stack.js';
 import '../Calendars/components/RangeCalendar/styled.js';
-import '../Grid/Grid.js';
+import '../Grid/index.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import '../Calendars/types.js';

package/dist/components/DatePicker/DatePicker.cjs

@@ -7,7 +7,7 @@ var index = require('../DateInputField/index.cjs');
 var Popover = require('../Popover/Popover.cjs');
 var Card = require('../Card/Card.cjs');
 require('../Calendars/components/RangeCalendar/styled.cjs');
-require('../Grid/Grid.cjs');
+require('../Grid/index.cjs');
 require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
 require('@internationalized/date');
 require('react-aria-components');

package/dist/components/DatePicker/DatePicker.js

@@ -5,7 +5,7 @@ import { DateInputField } from '../DateInputField/index.js';
 import { Popover } from '../Popover/Popover.js';
 import { Card } from '../Card/Card.js';
 import '../Calendars/components/RangeCalendar/styled.js';
-import '../Grid/Grid.js';
+import '../Grid/index.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import 'react-aria-components';

package/dist/components/DateRangePicker/DateRangePicker.cjs

@@ -6,7 +6,7 @@ var Select = require('../Select/Select.cjs');
 var index$1 = require('../DateInputField/index.cjs');
 var RangeCalendar = require('../Calendars/components/RangeCalendar/RangeCalendar.cjs');
 require('../Calendars/components/Calendar/styled.cjs');
-require('../Grid/Grid.cjs');
+require('../Grid/index.cjs');
 require('../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.cjs');
 require('@internationalized/date');
 require('react-aria-components');

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -4,7 +4,7 @@ import { Select } from '../Select/Select.js';
 import { DateInputField } from '../DateInputField/index.js';
 import { RangeCalendar } from '../Calendars/components/RangeCalendar/RangeCalendar.js';
 import '../Calendars/components/Calendar/styled.js';
-import '../Grid/Grid.js';
+import '../Grid/index.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import 'react-aria-components';

package/dist/components/Grid/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var styled = require('styled-components');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const Grid = styled__default.default(BaseContainer.BaseContainer).withConfig({
+    shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
+}) `
+  display: grid;
+  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
+  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes.sizes[spacing] : 0)};
+`;
+
+exports.Grid = Grid;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Grid/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":["styled","BaseContainer","sizes"],"mappings":";;;;;;;;;;AAOO,MAAM,IAAI,GAAGA,uBAAM,CAACC,2BAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}

package/dist/components/Grid/index.d.ts

@@ -1,2 +1,3 @@
-export { Grid } from './Grid';
-export type { GridProps } from './types';
+/// <reference types="react" />
+import { GridProps } from './types';
+export declare const Grid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../BaseContainer").BaseContainerProps & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, GridProps, never>;

package/dist/components/Grid/index.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { sizes } from '../../theme/modules/sizes.js';
+
+const Grid = styled(BaseContainer).withConfig({
+    shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),
+}) `
+  display: grid;
+  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
+  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};
+`;
+
+export { Grid };
+//# sourceMappingURL=index.js.map

package/dist/components/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Grid/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { BaseContainer } from '../BaseContainer';\nimport { sizes } from '../../theme/modules/sizes';\n\nimport { GridProps } from './types';\n\nexport const Grid = styled(BaseContainer).withConfig({\n  shouldForwardProp: (prop) => !['columns', 'spacing'].includes(prop),\n})<GridProps>`\n  display: grid;\n  grid-template-columns: repeat(${({ columns }) => columns}, 1fr);\n  grid-gap: ${({ spacing = 'base' }) => (spacing ? sizes[spacing] : 0)};\n`;\n"],"names":[],"mappings":";;;;AAOO,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC;AACnD,IAAA,iBAAiB,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;AACpE,CAAA,CAAC,CAAW;;AAEqB,gCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;cAC5C,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAA;;;;;"}

package/dist/components/LegacyDataTable/LegacyDataTable.d.ts

@@ -10,7 +10,7 @@ export declare const IconSortDesc: () => React.JSX.Element;
  */
 export declare const LegacyDataTable: {
     ({ borderless, striped, noWrap, showScrollbar, headers, rows, renderRow, renderNestedRow, expandedRowIds, renderLoadingRow, renderFooterRow, renderFooterLoadingRow, omitFooterSelectionCell, selectedRowIds, disabledSelectionInputRowIds, selectionMode, onChangeSelectedRowIds, sortColumnId, sortDirection, onChangeSort, isError, isLoading, skeletonRowsNumber, isHeaderSticky, stickyHeaderStyle, customSpecificState, bodyHeightInSpecificStates, startFixedColumnsNumber, endFixedColumnsNumber, }: LegacyDataTableProps): React.JSX.Element;
-    Cell: ({ align, grow, className, children, style, ...rest }: import("./styled").CellProps) => React.JSX.Element;
+    Cell: import("styled-components").StyledComponent<"td", any, import("./styled").CellProps, never>;
     ClickableCell: ({ onClick, children, ...otherProps }: import("./cells/ClickableCell").ClickableCellProps) => React.JSX.Element;
     EditableCell: ({ onClick, children, ...otherProps }: import("./cells/EditableCell").EditableCellProps) => React.JSX.Element;
     SkeletonCell: {