@veeqo/ui 14.9.1 → 14.10.0-beta-2

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

@@ -3,86 +3,50 @@ import { parseWidth } from './parseWidth.js';
 import { sumAllBeforeIndex, sumAllAfterIndex } from './sumAll.js';
 
 function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
-    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}
-  `;
+    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,
+    };
 }
 
 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 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;;;;"}
+{"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":";;;;AAyBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;IACrB,MAAM,KAAK,GAAa,EAAE;;AAG1B,IAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;QACzB,UAAU,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,KAAa,KAAI;AAC3C,YAAA,KAAK,CAAC,IAAI,CACR,CAAA,aAAA,EAAgB,KAAK,GAAG,CAAC,CAAA,gBAAA,EAAmB,KAAK,GAAG,CAAC,CAAA,4BAAA,EAA+B,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA,iBAAA,CAAmB,CACjK;AACH,QAAA,CAAC,CAAC;AACH,IAAA;;AAGD,IAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1B,WAAW,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,KAAa,KAAI;AAC5C,YAAA,KAAK,CAAC,IAAI,CACR,CAAA,kBAAA,EAAqB,KAAK,GAAG,CAAC,CAAA,qBAAA,EAAwB,KAAK,GAAG,CAAC,CAAA,6BAAA,EAAgC,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA,KAAA,CAAO,CAC/K;AACH,QAAA,CAAC,CAAC;AACH,IAAA;;IAGD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AACnD,QAAA,KAAK,CAAC,IAAI,CAAC,CAAA,8CAAA,EAAiD,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA,GAAA,CAAK,CAAC;AAClG,IAAA;;AAGD,IAAA,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;AACzB,QAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;QAC7E,KAAK,CAAC,IAAI,CACR,CAAA,aAAA,EAAgB,UAAU,CAAC,MAAM,CAAA,uBAAA,EAA0B,UAAU,CAAC,MAAM,kLAAkL,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA,GAAA,CAAK,CAC5U;AACF,IAAA;;AAGD,IAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1B,QAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;QAC3E,KAAK,CAAC,IAAI,CACR,CAAA,kBAAA,EAAqB,WAAW,CAAC,MAAM,CAAA,4BAAA,EAA+B,WAAW,CAAC,MAAM,kLAAkL,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA,GAAA,CAAK,CAC1V;AACF,IAAA;;IAGD,IAAI,YAAY,KAAK,QAAQ,EAAE;AAC7B,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,qDAAA,EAAwD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,GAAA,CAAK,CAChG;AACD,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,4DAAA,EAA+D,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,GAAA,CAAK,CACnG;AACF,IAAA;AAAM,SAAA;AACL,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,2CAAA,EAA8C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,GAAA,CAAK,CACtF;AACD,QAAA,KAAK,CAAC,IAAI,CACR,CAAA,qCAAA,EAAwC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,GAAA,CAAK,CAC5E;AACF,IAAA;;IAGD,MAAM,mBAAmB,GAAG;SACzB,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;SACnE,IAAI,CAAC,GAAG,CAAC;IAEZ,OAAO;QACL,UAAU,EAAE,CAAA,uBAAA,EAA0B,mBAAmB,CAAA,CAAA,CAAG;QAC5D,KAAK;KACN;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/index.cjs');
+require('../Grid/Grid.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/index.js';
+import '../Grid/Grid.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/index.cjs');
+require('../Grid/Grid.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/index.js';
+import '../Grid/Grid.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/index.cjs');
+require('../Grid/Grid.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/index.js';
+import '../Grid/Grid.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import 'react-aria-components';

package/dist/components/Grid/Grid.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var Grid_module = require('./Grid.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Grid = React__default.default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Grid_module.grid, className]), style: {
+        ...assignCssVars.assignCssVars({
+            gridColumns: columns,
+            gridSpacing: spacing ? sizes.sizes[spacing] : '0',
+        }),
+        ...style,
+    }, ...rest }, children)));
+Grid.displayName = 'Grid';
+
+exports.Grid = Grid;
+//# sourceMappingURL=Grid.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.cjs","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React","buildClassnames","styles","assignCssVars","sizes"],"mappings":";;;;;;;;;;;;;MAMa,IAAI,GAAGA,sBAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,8CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GridProps } from './types';
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import styles from './Grid.module.scss.js';
+
+const Grid = React__default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.grid, className]), style: {
+        ...assignCssVars({
+            gridColumns: columns,
+            gridSpacing: spacing ? sizes[spacing] : '0',
+        }),
+        ...style,
+    }, ...rest }, children)));
+Grid.displayName = 'Grid';
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React"],"mappings":";;;;;;;MAMa,IAAI,GAAGA,cAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/Grid/Grid.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._grid_qdgts_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}");
+var styles = {"grid":"_grid_qdgts_1"};
+
+module.exports = styles;
+//# sourceMappingURL=Grid.module.scss.cjs.map

package/dist/components/Grid/Grid.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.scss.cjs","sources":["../../../src/components/Grid/Grid.module.scss"],"sourcesContent":[".grid {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+MAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

package/dist/components/Grid/Grid.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._grid_qdgts_1 {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}");
+var styles = {"grid":"_grid_qdgts_1"};
+
+export { styles as default };
+//# sourceMappingURL=Grid.module.scss.js.map

package/dist/components/Grid/Grid.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.scss.js","sources":["../../../src/components/Grid/Grid.module.scss"],"sourcesContent":[".grid {\n  box-sizing: border-box;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n  gap: var(--grid-spacing);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+MAAA;AACA,aAAA,CAAA,MAAA,CAAA,eAAA;;;;"}

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

@@ -1,3 +1,2 @@
-/// <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>;
+export { Grid } from './Grid';
+export type { GridProps } from './types';

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: import("styled-components").StyledComponent<"td", any, import("./styled").CellProps, never>;
+    Cell: ({ align, grow, className, children, style, ...rest }: import("./styled").CellProps) => React.JSX.Element;
     ClickableCell: ({ onClick, children, ...otherProps }: import("./cells/ClickableCell").ClickableCellProps) => React.JSX.Element;
     EditableCell: ({ onClick, children, ...otherProps }: import("./cells/EditableCell").EditableCellProps) => React.JSX.Element;
     SkeletonCell: {

package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_mmakt_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_mmakt_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_mmakt_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_mmakt_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n\n._wrapperShowScrollbar_mmakt_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_mmakt_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_mmakt_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_mmakt_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: var(--radius-base);\n}\n\n/* TooltipContent */\n._tooltipContent_mmakt_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_mmakt_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_mmakt_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_mmakt_53._body_mmakt_53._body_mmakt_53 tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\n}\n\n._bodyBorderTop_mmakt_62 + ._bodyBorderTop_mmakt_62 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_mmakt_67 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: 1.5rem 1rem;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_mmakt_74 {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._row_mmakt_74.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_mmakt_81 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_mmakt_92 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_mmakt_92 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_mmakt_108 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_mmakt_113 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._headerCell_mmakt_113 > * {\n  vertical-align: middle;\n}\n._headerCell_mmakt_113 span {\n  white-space: pre-line;\n}\n._headerCell_mmakt_113.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_mmakt_138 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_mmakt_138 > * + * {\n  margin-left: 0.25rem;\n}\n\n/* Table */\n._table_mmakt_148 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_mmakt_148 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_mmakt_156 {\n  table-layout: fixed;\n}\n\n._tableLoading_mmakt_160 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_mmakt_165 ._body_mmakt_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_mmakt_169 ._headerCell_mmakt_113, ._tableNoWrap_mmakt_169 ._headerCell_mmakt_113 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_mmakt_174 ._cell_mmakt_92 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_mmakt_183 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_mmakt_3","wrapperScrollDisabled":"_wrapperScrollDisabled_mmakt_11","wrapperScrollEnabled":"_wrapperScrollEnabled_mmakt_15","wrapperBordered":"_wrapperBordered_mmakt_19","wrapperShowScrollbar":"_wrapperShowScrollbar_mmakt_24","tooltipContent":"_tooltipContent_mmakt_41","head":"_head_mmakt_48","body":"_body_mmakt_53","bodyBorderTop":"_bodyBorderTop_mmakt_62","row":"_row_mmakt_74","rowAccentColor":"_rowAccentColor_mmakt_81","cell":"_cell_mmakt_92","cellGrow":"_cellGrow_mmakt_108","headerCell":"_headerCell_mmakt_113","headerCellLayout":"_headerCellLayout_mmakt_138","table":"_table_mmakt_148","tableFixedLayout":"_tableFixedLayout_mmakt_156","tableLoading":"_tableLoading_mmakt_160","tableStriped":"_tableStriped_mmakt_165","tableNoWrap":"_tableNoWrap_mmakt_169","footer":"_footer_mmakt_174","stickyHeaderWrapper":"_stickyHeaderWrapper_mmakt_183"};
+
+module.exports = styles;
+//# sourceMappingURL=LegacyDataTable.module.scss.cjs.map

package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyDataTable.module.scss.cjs","sources":["../../../src/components/LegacyDataTable/LegacyDataTable.module.scss"],"sourcesContent":["/* LegacyDataTable sub-component styles */\n\n/* Wrapper */\n.wrapper {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n.wrapperScrollDisabled {\n  overflow-x: hidden;\n}\n\n.wrapperScrollEnabled {\n  overflow-x: auto;\n}\n\n.wrapperBordered {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n\n.wrapperShowScrollbar {\n  scrollbar-width: auto;\n\n  &::-webkit-scrollbar {\n    margin-top: 10px;\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--colors-system-scrollbar-background);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--colors-system-scrollbar-thumb);\n    border-radius: var(--radius-base);\n  }\n}\n\n/* TooltipContent */\n.tooltipContent {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n.head {\n  background-color: white;\n}\n\n/* Body */\n.body {\n  & tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n}\n\n.body.body.body tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\n}\n\n.bodyBorderTop {\n  & + & > tr:first-child > td {\n    border-top: 1px solid var(--colors-neutral-grey-base);\n  }\n}\n\n/* Foot */\n.foot {\n  & td {\n    background-color: var(--colors-neutral-grey-lightest);\n    padding: 1.5rem 1rem;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.hidden) {\n    visibility: collapse;\n  }\n}\n\n.rowAccentColor > td:first-child::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n.cell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n\n  width: var(--cell-width, auto);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.cellGrow {\n  width: 100%;\n}\n\n/* HeaderCell */\n.headerCell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n\n  & > * {\n    vertical-align: middle;\n  }\n\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n\n  & span {\n    white-space: pre-line;\n  }\n\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.sortable):hover {\n    cursor: pointer;\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n/* HeaderCellLayout */\n.headerCellLayout {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n}\n\n/* Table */\n.table {\n  width: 100%;\n  border-spacing: 0;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tableFixedLayout {\n  table-layout: fixed;\n}\n\n.tableLoading {\n  & * {\n    user-select: none;\n    pointer-events: none;\n  }\n}\n\n.tableStriped .body:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.tableNoWrap {\n  & .headerCell,\n  & .headerCell span {\n    white-space: nowrap;\n  }\n}\n\n/* Footer */\n.footer .cell {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n.stickyHeaderWrapper {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,g6IAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,KAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,gCAAA;;;;"}

package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_mmakt_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_mmakt_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_mmakt_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_mmakt_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n\n._wrapperShowScrollbar_mmakt_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_mmakt_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_mmakt_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_mmakt_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: var(--radius-base);\n}\n\n/* TooltipContent */\n._tooltipContent_mmakt_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_mmakt_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_mmakt_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_mmakt_53._body_mmakt_53._body_mmakt_53 tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\n}\n\n._bodyBorderTop_mmakt_62 + ._bodyBorderTop_mmakt_62 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_mmakt_67 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: 1.5rem 1rem;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_mmakt_74 {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._row_mmakt_74.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_mmakt_81 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_mmakt_92 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_mmakt_92 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_mmakt_108 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_mmakt_113 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._headerCell_mmakt_113 > * {\n  vertical-align: middle;\n}\n._headerCell_mmakt_113 span {\n  white-space: pre-line;\n}\n._headerCell_mmakt_113.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_mmakt_138 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_mmakt_138 > * + * {\n  margin-left: 0.25rem;\n}\n\n/* Table */\n._table_mmakt_148 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_mmakt_148 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_mmakt_156 {\n  table-layout: fixed;\n}\n\n._tableLoading_mmakt_160 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_mmakt_165 ._body_mmakt_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_mmakt_169 ._headerCell_mmakt_113, ._tableNoWrap_mmakt_169 ._headerCell_mmakt_113 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_mmakt_174 ._cell_mmakt_92 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_mmakt_183 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_mmakt_3","wrapperScrollDisabled":"_wrapperScrollDisabled_mmakt_11","wrapperScrollEnabled":"_wrapperScrollEnabled_mmakt_15","wrapperBordered":"_wrapperBordered_mmakt_19","wrapperShowScrollbar":"_wrapperShowScrollbar_mmakt_24","tooltipContent":"_tooltipContent_mmakt_41","head":"_head_mmakt_48","body":"_body_mmakt_53","bodyBorderTop":"_bodyBorderTop_mmakt_62","row":"_row_mmakt_74","rowAccentColor":"_rowAccentColor_mmakt_81","cell":"_cell_mmakt_92","cellGrow":"_cellGrow_mmakt_108","headerCell":"_headerCell_mmakt_113","headerCellLayout":"_headerCellLayout_mmakt_138","table":"_table_mmakt_148","tableFixedLayout":"_tableFixedLayout_mmakt_156","tableLoading":"_tableLoading_mmakt_160","tableStriped":"_tableStriped_mmakt_165","tableNoWrap":"_tableNoWrap_mmakt_169","footer":"_footer_mmakt_174","stickyHeaderWrapper":"_stickyHeaderWrapper_mmakt_183"};
+
+export { styles as default };
+//# sourceMappingURL=LegacyDataTable.module.scss.js.map

package/dist/components/LegacyDataTable/LegacyDataTable.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegacyDataTable.module.scss.js","sources":["../../../src/components/LegacyDataTable/LegacyDataTable.module.scss"],"sourcesContent":["/* LegacyDataTable sub-component styles */\n\n/* Wrapper */\n.wrapper {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n.wrapperScrollDisabled {\n  overflow-x: hidden;\n}\n\n.wrapperScrollEnabled {\n  overflow-x: auto;\n}\n\n.wrapperBordered {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n\n.wrapperShowScrollbar {\n  scrollbar-width: auto;\n\n  &::-webkit-scrollbar {\n    margin-top: 10px;\n    width: 6px;\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--colors-system-scrollbar-background);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--colors-system-scrollbar-thumb);\n    border-radius: var(--radius-base);\n  }\n}\n\n/* TooltipContent */\n.tooltipContent {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n.head {\n  background-color: white;\n}\n\n/* Body */\n.body {\n  & tr:not(:first-child) > td {\n    border-top: 1px solid transparent;\n  }\n}\n\n.body.body.body tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\n}\n\n.bodyBorderTop {\n  & + & > tr:first-child > td {\n    border-top: 1px solid var(--colors-neutral-grey-base);\n  }\n}\n\n/* Foot */\n.foot {\n  & td {\n    background-color: var(--colors-neutral-grey-lightest);\n    padding: 1.5rem 1rem;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n  }\n}\n\n/* Row */\n.row {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.hidden) {\n    visibility: collapse;\n  }\n}\n\n.rowAccentColor > td:first-child::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n.cell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n\n  width: var(--cell-width, auto);\n\n  & > * {\n    vertical-align: middle;\n  }\n}\n\n.cellGrow {\n  width: 100%;\n}\n\n/* HeaderCell */\n.headerCell {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n\n  & > * {\n    vertical-align: middle;\n  }\n\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n\n  & span {\n    white-space: pre-line;\n  }\n\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n  &:global(.sortable):hover {\n    cursor: pointer;\n    background-color: var(--colors-neutral-grey-light);\n  }\n}\n\n/* HeaderCellLayout */\n.headerCellLayout {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n\n  & > * + * {\n    margin-left: 0.25rem;\n  }\n}\n\n/* Table */\n.table {\n  width: 100%;\n  border-spacing: 0;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tableFixedLayout {\n  table-layout: fixed;\n}\n\n.tableLoading {\n  & * {\n    user-select: none;\n    pointer-events: none;\n  }\n}\n\n.tableStriped .body:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.tableNoWrap {\n  & .headerCell,\n  & .headerCell span {\n    white-space: nowrap;\n  }\n}\n\n/* Footer */\n.footer .cell {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n.stickyHeaderWrapper {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,g6IAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,sBAAA,CAAA,gCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,KAAA,CAAA,eAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,UAAA,CAAA,qBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,kBAAA,CAAA,6BAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,cAAA,CAAA,yBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,QAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,gCAAA;;;;"}

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
-var index = require('../../../theme/index.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var SkeletonContent_module = require('./SkeletonContent.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const { grey } = index.theme.colors.neutral;
-const SkeletonContentWrapper = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--oakirc" }) `height:16px;width:100%;`;
-const SkeletonContentComponent = styled__default.default.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--dbfg3y" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
-const SkeletonContent = ({ isLoading, style }) => (React__default.default.createElement(SkeletonContentWrapper, { style: style },
-    React__default.default.createElement(SkeletonContentComponent, { isLoading: isLoading })));
+const SkeletonContent = ({ isLoading = true, style }) => (React__default.default.createElement("div", { className: SkeletonContent_module.wrapper, style: style },
+    React__default.default.createElement("div", { className: buildClassnames.buildClassnames([
+            SkeletonContent_module.shimmer,
+            isLoading ? SkeletonContent_module.shimmerAnimated : SkeletonContent_module.shimmerStatic,
+        ]) })));
 
 exports.SkeletonContent = SkeletonContent;
 //# sourceMappingURL=SkeletonContent.cjs.map

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonContent.cjs","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n  height: 16px;\n  width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -380px 0;\n    }\n    100% {\n      background-position: 380px 0;\n    }\n  }\n`;\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n  <SkeletonContentWrapper style={style}>\n    <SkeletonContentComponent isLoading={isLoading} />\n  </SkeletonContentWrapper>\n);\n"],"names":["theme","styled","React"],"mappings":";;;;;;;;;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAGC,uBAAM,CAAC,GAAG,iHAGxC;AAED,MAAM,wBAAwB,GAAGA,uBAAM,CAAC,GAAG,yKAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOM,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EC,sBAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA;IAClCA,sBAAA,CAAA,aAAA,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAA,CAAI,CAC3B;;;;"}
+{"version":3,"file":"SkeletonContent.cjs","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './SkeletonContent.module.scss';\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading = true, style }: SkeletonContentPropTypes) => (\n  <div className={styles.wrapper} style={style}>\n    <div\n      className={buildClassnames([\n        styles.shimmer,\n        isLoading ? styles.shimmerAnimated : styles.shimmerStatic,\n      ])}\n    />\n  </div>\n);\n"],"names":["React","styles","buildClassnames"],"mappings":";;;;;;;;;;;AASO,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAA4B,MACnFA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,sBAAM,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAA;IAC1CD,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEE,+BAAe,CAAC;AACzB,YAAAD,sBAAM,CAAC,OAAO;YACd,SAAS,GAAGA,sBAAM,CAAC,eAAe,GAAGA,sBAAM,CAAC,aAAa;SAC1D,CAAC,EAAA,CACF,CACE;;;;"}

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js

@@ -1,12 +1,13 @@
 import React__default from 'react';
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './SkeletonContent.module.scss.js';
 
-const { grey } = theme.colors.neutral;
-const SkeletonContentWrapper = styled.div.withConfig({ displayName: "vui--SkeletonContentWrapper", componentId: "vui--oakirc" }) `height:16px;width:100%;`;
-const SkeletonContentComponent = styled.div.withConfig({ displayName: "vui--SkeletonContentComponent", componentId: "vui--dbfg3y" }) `display:inline-block;color:transparent;border-radius:4px;animation-duration:${({ isLoading = true }) => (isLoading ? '1s' : 0)};animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;background:linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);background-size:800px 104px;border:0;width:100%;height:100%;@keyframes placeHolderShimmer{0%{background-position:-380px 0;}100%{background-position:380px 0;}}`;
-const SkeletonContent = ({ isLoading, style }) => (React__default.createElement(SkeletonContentWrapper, { style: style },
-    React__default.createElement(SkeletonContentComponent, { isLoading: isLoading })));
+const SkeletonContent = ({ isLoading = true, style }) => (React__default.createElement("div", { className: styles.wrapper, style: style },
+    React__default.createElement("div", { className: buildClassnames([
+            styles.shimmer,
+            isLoading ? styles.shimmerAnimated : styles.shimmerStatic,
+        ]) })));
 
 export { SkeletonContent };
 //# sourceMappingURL=SkeletonContent.js.map

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonContent.js","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nconst { grey } = theme.colors.neutral;\n\nconst SkeletonContentWrapper = styled.div`\n  height: 16px;\n  width: 100%;\n`;\n\nconst SkeletonContentComponent = styled.div<{ isLoading?: boolean }>`\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-duration: ${({ isLoading = true }) => (isLoading ? '1s' : 0)};\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, ${grey.base} 8%, ${grey.dark} 15%, ${grey.base} 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n\n  @keyframes placeHolderShimmer {\n    0% {\n      background-position: -380px 0;\n    }\n    100% {\n      background-position: 380px 0;\n    }\n  }\n`;\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading, style }: SkeletonContentPropTypes) => (\n  <SkeletonContentWrapper style={style}>\n    <SkeletonContentComponent isLoading={isLoading} />\n  </SkeletonContentWrapper>\n);\n"],"names":["React"],"mappings":";;;;AAIA,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AAErC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,iHAGxC;AAED,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,yKAInB,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA,yKAAA,EAK9B,IAAI,CAAC,IAAI,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,sKAcrF;AAOM,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAA4B,MAC5EA,cAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA;IAClCA,cAAA,CAAA,aAAA,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,EAAA,CAAI,CAC3B;;;;"}
+{"version":3,"file":"SkeletonContent.js","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './SkeletonContent.module.scss';\n\ntype SkeletonContentPropTypes = {\n  isLoading?: boolean;\n  style?: React.CSSProperties;\n};\n\nexport const SkeletonContent = ({ isLoading = true, style }: SkeletonContentPropTypes) => (\n  <div className={styles.wrapper} style={style}>\n    <div\n      className={buildClassnames([\n        styles.shimmer,\n        isLoading ? styles.shimmerAnimated : styles.shimmerStatic,\n      ])}\n    />\n  </div>\n);\n"],"names":["React"],"mappings":";;;;;AASO,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,EAAE,KAAK,EAA4B,MACnFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAA;IAC1CA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,OAAO;YACd,SAAS,GAAG,MAAM,CAAC,eAAe,GAAG,MAAM,CAAC,aAAa;SAC1D,CAAC,EAAA,CACF,CACE;;;;"}

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._wrapper_jjcrz_1 {\n  height: 16px;\n  width: 100%;\n}\n\n._shimmer_jjcrz_6 {\n  display: inline-block;\n  color: transparent;\n  border-radius: var(--radius-base);\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeHolderShimmer_jjcrz_1;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, var(--colors-neutral-grey-base) 8%, var(--colors-neutral-grey-dark) 15%, var(--colors-neutral-grey-base) 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n}\n\n._shimmerAnimated_jjcrz_21 {\n  animation-duration: 1s;\n}\n\n._shimmerStatic_jjcrz_25 {\n  animation-duration: 0s;\n}\n\n@keyframes _placeHolderShimmer_jjcrz_1 {\n  0% {\n    background-position: -380px 0;\n  }\n  100% {\n    background-position: 380px 0;\n  }\n}");
+var styles = {"wrapper":"_wrapper_jjcrz_1","shimmer":"_shimmer_jjcrz_6","shimmerAnimated":"_shimmerAnimated_jjcrz_21","shimmerStatic":"_shimmerStatic_jjcrz_25"};
+
+module.exports = styles;
+//# sourceMappingURL=SkeletonContent.module.scss.cjs.map

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonContent.module.scss.cjs","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss"],"sourcesContent":[".wrapper {\n  height: 16px;\n  width: 100%;\n}\n\n.shimmer {\n  display: inline-block;\n  color: transparent;\n  border-radius: var(--radius-base);\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(\n    to right,\n    var(--colors-neutral-grey-base) 8%,\n    var(--colors-neutral-grey-dark) 15%,\n    var(--colors-neutral-grey-base) 33%\n  );\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.shimmerAnimated {\n  animation-duration: 1s;\n}\n\n.shimmerStatic {\n  animation-duration: 0s;\n}\n\n@keyframes placeHolderShimmer {\n  0% {\n    background-position: -380px 0;\n  }\n  100% {\n    background-position: 380px 0;\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8zBAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._wrapper_jjcrz_1 {\n  height: 16px;\n  width: 100%;\n}\n\n._shimmer_jjcrz_6 {\n  display: inline-block;\n  color: transparent;\n  border-radius: var(--radius-base);\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeHolderShimmer_jjcrz_1;\n  animation-timing-function: linear;\n  background: linear-gradient(to right, var(--colors-neutral-grey-base) 8%, var(--colors-neutral-grey-dark) 15%, var(--colors-neutral-grey-base) 33%);\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n}\n\n._shimmerAnimated_jjcrz_21 {\n  animation-duration: 1s;\n}\n\n._shimmerStatic_jjcrz_25 {\n  animation-duration: 0s;\n}\n\n@keyframes _placeHolderShimmer_jjcrz_1 {\n  0% {\n    background-position: -380px 0;\n  }\n  100% {\n    background-position: 380px 0;\n  }\n}");
+var styles = {"wrapper":"_wrapper_jjcrz_1","shimmer":"_shimmer_jjcrz_6","shimmerAnimated":"_shimmerAnimated_jjcrz_21","shimmerStatic":"_shimmerStatic_jjcrz_25"};
+
+export { styles as default };
+//# sourceMappingURL=SkeletonContent.module.scss.js.map

package/dist/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonContent.module.scss.js","sources":["../../../../src/components/LegacyDataTable/SkeletonContent/SkeletonContent.module.scss"],"sourcesContent":[".wrapper {\n  height: 16px;\n  width: 100%;\n}\n\n.shimmer {\n  display: inline-block;\n  color: transparent;\n  border-radius: var(--radius-base);\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeHolderShimmer;\n  animation-timing-function: linear;\n  background: linear-gradient(\n    to right,\n    var(--colors-neutral-grey-base) 8%,\n    var(--colors-neutral-grey-dark) 15%,\n    var(--colors-neutral-grey-base) 33%\n  );\n  background-size: 800px 104px;\n  border: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.shimmerAnimated {\n  animation-duration: 1s;\n}\n\n.shimmerStatic {\n  animation-duration: 0s;\n}\n\n@keyframes placeHolderShimmer {\n  0% {\n    background-position: -380px 0;\n  }\n  100% {\n    background-position: 380px 0;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8zBAAA;AACA,aAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,SAAA,CAAA,kBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,eAAA,CAAA,yBAAA;;;;"}

package/dist/components/LegacyDataTable/SpecificState/SpecificState.cjs

@@ -1,16 +1,19 @@
 'use strict';
 
 var React = require('react');
-var styled = require('./styled.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
+var Text = require('../../Text/Text.cjs');
+var SpecificState_module = require('./SpecificState.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const SpecificState = ({ height, icon, title, subTitle }) => (React__default.default.createElement(styled.SpecificStateContainer, { height: height },
-    React__default.default.createElement(styled.EllipseContainer, null, icon),
-    React__default.default.createElement(styled.TitleText, { variant: "headingLarge" }, title),
-    subTitle && React__default.default.createElement(styled.SubTitleText, { variant: "subheadingMedium" }, subTitle)));
+const SpecificState = ({ height, icon, title, subTitle }) => (React__default.default.createElement("div", { className: SpecificState_module.container, style: assignCssVars.assignCssVars({ specificStateHeight: `${height}px` }) },
+    React__default.default.createElement("div", { className: SpecificState_module.ellipse }, icon),
+    React__default.default.createElement(Text.Text, { variant: "headingLarge", className: SpecificState_module.title }, title),
+    subTitle && React__default.default.createElement(Text.Text, { variant: "subheadingMedium", className: SpecificState_module.subTitle }, subTitle)));
 
 exports.SpecificState = SpecificState;
 //# sourceMappingURL=SpecificState.cjs.map

package/dist/components/LegacyDataTable/SpecificState/SpecificState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpecificState.cjs","sources":["../../../../src/components/LegacyDataTable/SpecificState/SpecificState.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText } from './styled';\n\nimport { SpecificStateType } from '../utils/types';\n\ntype SpecificStatePropTypes = SpecificStateType & {\n  height: number;\n};\n\nexport const SpecificState = ({ height, icon, title, subTitle }: SpecificStatePropTypes) => (\n  <SpecificStateContainer height={height}>\n    <EllipseContainer>{icon}</EllipseContainer>\n    <TitleText variant=\"headingLarge\">{title}</TitleText>\n    {subTitle && <SubTitleText variant=\"subheadingMedium\">{subTitle}</SubTitleText>}\n  </SpecificStateContainer>\n);\n"],"names":["React","SpecificStateContainer","EllipseContainer","TitleText","SubTitleText"],"mappings":";;;;;;;;;MAUa,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAA0B,MACrFA,qCAACC,6BAAsB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAA;IACpCD,sBAAA,CAAA,aAAA,CAACE,uBAAgB,EAAA,IAAA,EAAE,IAAI,CAAoB;AAC3C,IAAAF,sBAAA,CAAA,aAAA,CAACG,gBAAS,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAa;AACpD,IAAA,QAAQ,IAAIH,sBAAA,CAAA,aAAA,CAACI,mBAAY,EAAA,EAAC,OAAO,EAAC,kBAAkB,EAAA,EAAE,QAAQ,CAAgB,CACxD;;;;"}
+{"version":3,"file":"SpecificState.cjs","sources":["../../../../src/components/LegacyDataTable/SpecificState/SpecificState.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars } from '../../../utils';\nimport { Text } from '../../Text';\nimport { SpecificStateType } from '../utils/types';\nimport styles from './SpecificState.module.scss';\n\ntype SpecificStatePropTypes = SpecificStateType & {\n  height: number;\n};\n\nexport const SpecificState = ({ height, icon, title, subTitle }: SpecificStatePropTypes) => (\n  <div\n    className={styles.container}\n    style={assignCssVars({ specificStateHeight: `${height}px` })}\n  >\n    <div className={styles.ellipse}>{icon}</div>\n    <Text variant=\"headingLarge\" className={styles.title}>{title}</Text>\n    {subTitle && <Text variant=\"subheadingMedium\" className={styles.subTitle}>{subTitle}</Text>}\n  </div>\n);\n"],"names":["React","styles","assignCssVars","Text"],"mappings":";;;;;;;;;;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAA0B,MACrFA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,oBAAM,CAAC,SAAS,EAC3B,KAAK,EAAEC,2BAAa,CAAC,EAAE,mBAAmB,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA;AAE5D,IAAAF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,oBAAM,CAAC,OAAO,EAAA,EAAG,IAAI,CAAO;AAC5C,IAAAD,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAC,SAAS,EAAEF,oBAAM,CAAC,KAAK,EAAA,EAAG,KAAK,CAAQ;AACnE,IAAA,QAAQ,IAAID,sBAAA,CAAA,aAAA,CAACG,SAAI,IAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAEF,oBAAM,CAAC,QAAQ,EAAA,EAAG,QAAQ,CAAQ,CACvF;;;;"}