@veeqo/ui 9.9.3 → 9.10.0

package/dist/components/Anchor/utils/urlUtils.js

@@ -0,0 +1,42 @@
+/**
+ * Utility functions for URL processing
+ */
+/**
+ * Checks if the URL should have a prefix added based on the current context
+ * @returns {boolean} Whether a prefix should be added
+ */
+const shouldAddPrefix = () => !!(window.veeqoContext &&
+    window.veeqoContext.vqHost !== 'standalone' &&
+    window.veeqoContext.baseUrl);
+/**
+ * Checks if a URL is relative (not starting with http://, https://, or //)
+ * @param {string} url - The URL to check
+ * @returns {boolean} Whether the URL is relative
+ */
+const isRelativeUrl = (url) => !url.match(/^(https?:\/\/|\/\/)/);
+/**
+ * Checks if a URL is an anchor link (starts with #)
+ * @param {string} url - The URL to check
+ * @returns {boolean} Whether the URL is an anchor link
+ */
+const isAnchorUrl = (url) => url.startsWith('#');
+/**
+ * Adds the appropriate prefix to a URL based on the current context
+ * @param {string} url - The URL to add a prefix to
+ * @returns {string} The URL with prefix added if needed
+ */
+const addPrefixToUrl = (url) => { var _a; return `${((_a = window.veeqoContext) === null || _a === undefined ? undefined : _a.baseUrl) || ''}${url.startsWith('/') ? '' : '/'}${url}`; };
+/**
+ * Processes a URL by adding the appropriate prefix if needed
+ * @param {string} url - The URL to process
+ * @returns {string} The processed URL
+ */
+const createContextAwareUrl = (url) => {
+    // Don't modify anchor URLs (they should be treated as absolute)
+    if (isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url))
+        return url;
+    return addPrefixToUrl(url);
+};
+
+export { addPrefixToUrl, createContextAwareUrl, isAnchorUrl, isRelativeUrl, shouldAddPrefix };
+//# sourceMappingURL=urlUtils.js.map

package/dist/components/Anchor/utils/urlUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"urlUtils.js","sources":["../../../../src/components/Anchor/utils/urlUtils.ts"],"sourcesContent":["/**\n * Utility functions for URL processing\n */\n\n/**\n * Checks if the URL should have a prefix added based on the current context\n * @returns {boolean} Whether a prefix should be added\n */\nexport const shouldAddPrefix = (): boolean =>\n  !!(\n    window.veeqoContext &&\n    window.veeqoContext.vqHost !== 'standalone' &&\n    window.veeqoContext.baseUrl\n  );\n\n/**\n * Checks if a URL is relative (not starting with http://, https://, or //)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is relative\n */\nexport const isRelativeUrl = (url: string): boolean => !url.match(/^(https?:\\/\\/|\\/\\/)/);\n\n/**\n * Checks if a URL is an anchor link (starts with #)\n * @param {string} url - The URL to check\n * @returns {boolean} Whether the URL is an anchor link\n */\nexport const isAnchorUrl = (url: string): boolean => url.startsWith('#');\n\n/**\n * Adds the appropriate prefix to a URL based on the current context\n * @param {string} url - The URL to add a prefix to\n * @returns {string} The URL with prefix added if needed\n */\nexport const addPrefixToUrl = (url: string): string =>\n  `${window.veeqoContext?.baseUrl || ''}${url.startsWith('/') ? '' : '/'}${url}`;\n\n/**\n * Processes a URL by adding the appropriate prefix if needed\n * @param {string} url - The URL to process\n * @returns {string} The processed URL\n */\nexport const createContextAwareUrl = (url: string): string => {\n  // Don't modify anchor URLs (they should be treated as absolute)\n  if (isAnchorUrl(url) || !shouldAddPrefix() || !isRelativeUrl(url)) return url;\n\n  return addPrefixToUrl(url);\n};\n"],"names":[],"mappings":"AAAA;;AAEG;AAEH;;;AAGG;AACI,MAAM,eAAe,GAAG,MAC7B,CAAC,EACC,MAAM,CAAC,YAAY;AACnB,IAAA,MAAM,CAAC,YAAY,CAAC,MAAM,KAAK,YAAY;AAC3C,IAAA,MAAM,CAAC,YAAY,CAAC,OAAO;AAG/B;;;;AAIG;AACU,MAAA,aAAa,GAAG,CAAC,GAAW,KAAc,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB;AAEvF;;;;AAIG;AACI,MAAM,WAAW,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,GAAG;AAEvE;;;;AAIG;AACU,MAAA,cAAc,GAAG,CAAC,GAAW,KAAY,EAAA,IAAA,EAAA,CAAA,CACpD,OAAA,CAAA,EAAG,CAAA,CAAA,EAAA,GAAA,MAAM,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,OAAO,KAAI,EAAE,CAAG,EAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,EAAG,GAAG,CAAE,CAAA,CAAA;AAEhF;;;;AAIG;AACU,MAAA,qBAAqB,GAAG,CAAC,GAAW,KAAY;;AAE3D,IAAA,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;AAAE,QAAA,OAAO,GAAG;AAE7E,IAAA,OAAO,cAAc,CAAC,GAAG,CAAC;AAC5B;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._baseCell_t7iek_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_t7iek_1:focus, ._baseCell_t7iek_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_t7iek_10::after, ._pinnedColumnRight_t7iek_10::after, ._pinnedColumnLeft_t7iek_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_t7iek_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_t7iek_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}");
+var styles = {"baseCell":"_baseCell_t7iek_1","pinnedColumnBase":"_pinnedColumnBase_t7iek_10","pinnedColumnRight":"_pinnedColumnRight_t7iek_10","pinnedColumnLeft":"_pinnedColumnLeft_t7iek_10"};
+
+module.exports = styles;
+//# sourceMappingURL=DataGrid.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,k4BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._baseCell_t7iek_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_t7iek_1:focus, ._baseCell_t7iek_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_t7iek_10::after, ._pinnedColumnRight_t7iek_10::after, ._pinnedColumnLeft_t7iek_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_t7iek_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_t7iek_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}");
+var styles = {"baseCell":"_baseCell_t7iek_1","pinnedColumnBase":"_pinnedColumnBase_t7iek_10","pinnedColumnRight":"_pinnedColumnRight_t7iek_10","pinnedColumnLeft":"_pinnedColumnLeft_t7iek_10"};
+
+export { styles as default };
+//# sourceMappingURL=DataGrid.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,k4BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs

@@ -6,7 +6,7 @@ var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var CellContent = require('../../CellContent/CellContent.cjs');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
-var BodyCell_module = require('./BodyCell.module.css.cjs');
+var BodyCell_module = require('./BodyCell.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -19,7 +19,11 @@ const BodyCell = ({ cell, ariaRoles }) => {
     const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({ column: cell.column });
-    const bodyCellClassname = buildClassnames.buildClassnames([BodyCell_module.bodyCell, pinnedCellClassName, 'data-grid-cell']);
+    const bodyCellClassname = buildClassnames.buildClassnames([
+        BodyCell_module.bodyCell,
+        pinnedCellClassName,
+        'data-grid-cell',
+    ]);
     return (React__default.default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
         React__default.default.createElement(CellContent.CellContent, { contentStyle: {
                 justifyContent,

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { bodyCell } from './BodyCell.module.css';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const bodyCellClassname = buildClassnames([bodyCell, pinnedCellClassName, 'data-grid-cell']);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","bodyCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,iBAAiB,GAAGC,+BAAe,CAAC,CAACC,wBAAQ,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;IAE5F,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzBC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAEhG,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,sBAAC,CAAA,aAAA,CAAAC,uBAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzBC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js

@@ -4,7 +4,7 @@ import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { CellContent } from '../../CellContent/CellContent.js';
 import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
-import { bodyCell } from './BodyCell.module.css.js';
+import styles from './BodyCell.module.scss.js';
 
 /**
  * Renders a cell element, and its content, for a given column and row, within the grid body.
@@ -13,7 +13,11 @@ const BodyCell = ({ cell, ariaRoles }) => {
     const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta;
     const CellElement = rowHeader ? 'th' : 'td';
     const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });
-    const bodyCellClassname = buildClassnames([bodyCell, pinnedCellClassName, 'data-grid-cell']);
+    const bodyCellClassname = buildClassnames([
+        styles.bodyCell,
+        pinnedCellClassName,
+        'data-grid-cell',
+    ]);
     return (React__default.createElement(CellElement, { className: bodyCellClassname, "aria-colindex": cell.column.getIndex() + 1, scope: rowHeader ? 'row' : undefined, role: rowHeader ? 'rowheader' : ariaRoles.cell, style: pinnedCellStyles },
         React__default.createElement(CellContent, { contentStyle: {
                 justifyContent,

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { bodyCell } from './BodyCell.module.css';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const bodyCellClassname = buildClassnames([bodyCell, pinnedCellClassName, 'data-grid-cell']);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,iBAAiB,GAAG,eAAe,CAAC,CAAC,QAAQ,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;IAE5F,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}
+{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n  /**\n   * Cell within the TanStack Table instance.\n   */\n  cell: Cell<any, any>;\n\n  /**\n   * ARIA roles for the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({ cell, ariaRoles }: ColumnCellProps) => {\n  const { justifyContent, textAlign, rowHeader } = cell.column.columnDef.meta!;\n  const CellElement = rowHeader ? 'th' : 'td';\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n  const bodyCellClassname = buildClassnames([\n    styles.bodyCell,\n    pinnedCellClassName,\n    'data-grid-cell',\n  ]);\n\n  return (\n    <CellElement\n      className={bodyCellClassname}\n      aria-colindex={cell.column.getIndex() + 1}\n      scope={rowHeader ? 'row' : undefined}\n      role={rowHeader ? 'rowheader' : ariaRoles.cell}\n      style={pinnedCellStyles}\n    >\n      <CellContent\n        contentStyle={\n          {\n            justifyContent,\n            textAlign,\n          } as React.CSSProperties\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </CellContent>\n    </CellElement>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAwBA;;AAEG;AACU,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB,KAAI;AAC/D,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAC5E,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAEhG,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;IAEF,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA;QAEvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EACV,EAAA,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA,EAGzB,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAC9C,CACF;AAElB;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._baseCell_1r4wp_1, ._bodyCell_1r4wp_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1r4wp_1:focus, ._bodyCell_1r4wp_1:focus, ._baseCell_1r4wp_1:focus-visible, ._bodyCell_1r4wp_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1r4wp_10::after, ._pinnedColumnRight_1r4wp_10::after, ._pinnedColumnLeft_1r4wp_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1r4wp_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1r4wp_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1r4wp_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\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  line-height: var(--text-body-small-line-height);\n}\n\n.data-grid-row.striped:nth-of-type(odd) > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.data-grid-row.selected > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.data-grid-row + .data-grid-row > ._bodyCell_1r4wp_1 {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}");
+var styles = {"baseCell":"_baseCell_1r4wp_1","bodyCell":"_bodyCell_1r4wp_1","pinnedColumnBase":"_pinnedColumnBase_1r4wp_10","pinnedColumnRight":"_pinnedColumnRight_1r4wp_10","pinnedColumnLeft":"_pinnedColumnLeft_1r4wp_10"};
+
+module.exports = styles;
+//# sourceMappingURL=BodyCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\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  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,gmDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._baseCell_1r4wp_1, ._bodyCell_1r4wp_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1r4wp_1:focus, ._bodyCell_1r4wp_1:focus, ._baseCell_1r4wp_1:focus-visible, ._bodyCell_1r4wp_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1r4wp_10::after, ._pinnedColumnRight_1r4wp_10::after, ._pinnedColumnLeft_1r4wp_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1r4wp_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1r4wp_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1r4wp_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\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  line-height: var(--text-body-small-line-height);\n}\n\n.data-grid-row.striped:nth-of-type(odd) > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n.data-grid-row.selected > ._bodyCell_1r4wp_1 {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.data-grid-row + .data-grid-row > ._bodyCell_1r4wp_1 {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}");
+var styles = {"baseCell":"_baseCell_1r4wp_1","bodyCell":"_bodyCell_1r4wp_1","pinnedColumnBase":"_pinnedColumnBase_1r4wp_10","pinnedColumnRight":"_pinnedColumnRight_1r4wp_10","pinnedColumnLeft":"_pinnedColumnLeft_1r4wp_10"};
+
+export { styles as default };
+//# sourceMappingURL=BodyCell.module.scss.js.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\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  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,gmDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/CellContent/CellContent.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 require('uid/secure');
-var CellContent_module = require('./CellContent.module.css.cjs');
+var CellContent_module = require('./CellContent.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/dist/components/DataGrid/components/CellContent/CellContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport { cellContent } from './CellContent.module.css';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["buildClassnames","cellContent","React"],"mappings":";;;;;;;;;;;AAkBA,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,8BAAW,EAAE,wBAAwB,CAAC,CAAC;AAErF;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
+{"version":3,"file":"CellContent.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["buildClassnames","styles","React"],"mappings":";;;;;;;;;;;AAkBA,MAAM,oBAAoB,GAAGA,+BAAe,CAAC,CAACC,kBAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}

package/dist/components/DataGrid/components/CellContent/CellContent.js

@@ -1,9 +1,9 @@
 import React__default from 'react';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import { cellContent } from './CellContent.module.css.js';
+import styles from './CellContent.module.scss.js';
 
-const cellContentClassname = buildClassnames([cellContent, 'data-grid-cell-content']);
+const cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);
 /**
  * Wrapper for content displayed within a non-header cell in the grid.
  */

package/dist/components/DataGrid/components/CellContent/CellContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport { cellContent } from './CellContent.module.css';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAErF;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}
+{"version":3,"file":"CellContent.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../utils';\n\nimport styles from './CellContent.module.scss';\n\nexport interface CellContentProps {\n  /**\n   * Styles to be applied to the cell content wrapper.\n   */\n  contentStyle: Pick<React.CSSProperties, 'marginLeft' | 'justifyContent' | 'textAlign'>;\n\n  /**\n   * Child elements.\n   */\n  children?: React.ReactNode;\n}\n\nconst cellContentClassname = buildClassnames([styles.cellContent, 'data-grid-cell-content']);\n\n/**\n * Wrapper for content displayed within a non-header cell in the grid.\n */\nexport const CellContent = ({ contentStyle, children }: CellContentProps) => {\n  return (\n    <div data-testid=\"data-grid-cell-content\" className={cellContentClassname} style={contentStyle}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAkBA,MAAM,oBAAoB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,WAAW,EAAE,wBAAwB,CAAC,CAAC;AAE5F;;AAEG;AACU,MAAA,WAAW,GAAG,CAAC,EAAE,YAAY,EAAE,QAAQ,EAAoB,KAAI;AAC1E,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAiB,wBAAwB,EAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,YAAY,EAAA,EAC3F,QAAQ,CACL;AAEV;;;;"}

package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._cellContent_un8dp_1 {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}");
+var styles = {"cellContent":"_cellContent_un8dp_1"};
+
+module.exports = styles;
+//# sourceMappingURL=CellContent.module.scss.cjs.map

package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellContent.module.scss.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,2HAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}

package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._cellContent_un8dp_1 {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}");
+var styles = {"cellContent":"_cellContent_un8dp_1"};
+
+export { styles as default };
+//# sourceMappingURL=CellContent.module.scss.js.map

package/dist/components/DataGrid/components/CellContent/CellContent.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellContent.module.scss.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.scss"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2HAAA;AACA,aAAA,CAAA,aAAA,CAAA,sBAAA;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs

@@ -6,7 +6,7 @@ var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
 var CellContent = require('../../CellContent/CellContent.cjs');
-var FooterCell_module = require('./FooterCell.module.css.cjs');
+var FooterCell_module = require('./FooterCell.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","footerCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAGC,+BAAe,CAAC;QAC1CC,4BAAU;QACV,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEC,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5EC,qBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
+{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport styles from './FooterCell.module.scss';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    styles.footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAGC,+BAAe,CAAC;AAC1C,QAAAC,iBAAM,CAAC,UAAU;QACjB,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEC,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5EC,qBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js

@@ -4,7 +4,7 @@ import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
 import { CellContent } from '../../CellContent/CellContent.js';
-import { footerCell } from './FooterCell.module.css.js';
+import styles from './FooterCell.module.scss.js';
 
 /**
  * Renders a footer cell element, and its content, for a given column.
@@ -15,7 +15,7 @@ const FooterCell = ({ header, ariaRoles }) => {
         column: header.column,
     });
     const footerCellClassname = buildClassnames([
-        footerCell,
+        styles.footerCell,
         pinnedCellClassName,
         'data-grid-footer-cell',
     ]);

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;QAC1C,UAAU;QACV,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5E,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
+{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport styles from './FooterCell.module.scss';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    styles.footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;AAC1C,QAAA,MAAM,CAAC,UAAU;QACjB,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5E,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1v1wo_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1v1wo_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._footerCell_1v1wo_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
+
+module.exports = styles;
+//# sourceMappingURL=FooterCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1v1wo_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1v1wo_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._footerCell_1v1wo_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
+
+export { styles as default };
+//# sourceMappingURL=FooterCell.module.scss.js.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
-var Container_module = require('./Container.module.css.cjs');
+var Container_module = require('./Container.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport {\n  container,\n  borderModeFull,\n  borderModeVertical,\n  borderModeNone,\n} from './Container.module.css';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: borderModeFull,\n  vertical: borderModeVertical,\n  none: borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["borderModeFull","borderModeVertical","borderModeNone","React","buildClassnames","container"],"mappings":";;;;;;;;;;;AA6BA,MAAM,kBAAkB,GAAG;AACzB,IAAA,IAAI,EAAEA,+BAAc;AACpB,IAAA,QAAQ,EAAEC,mCAAkB;AAC5B,IAAA,IAAI,EAAEC,+BAAc;CACrB;AAED;;AAEG;MACU,SAAS,GAAGC,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,0BAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EACvE,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: styles.borderModeFull,\n  vertical: styles.borderModeVertical,\n  none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["styles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAEA,gBAAM,CAAC,cAAc;IAC3B,QAAQ,EAAEA,gBAAM,CAAC,kBAAkB;IACnC,IAAI,EAAEA,gBAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGC,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACF,gBAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}

package/dist/components/DataGrid/components/GridContainer/Container/Container.js

@@ -1,17 +1,17 @@
 import React__default from 'react';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
-import { container, borderModeFull, borderModeVertical, borderModeNone } from './Container.module.css.js';
+import styles from './Container.module.scss.js';
 
 const borderModeClassMap = {
-    full: borderModeFull,
-    vertical: borderModeVertical,
-    none: borderModeNone,
+    full: styles.borderModeFull,
+    vertical: styles.borderModeVertical,
+    none: styles.borderModeNone,
 };
 /**
  * A container element, which wraps the grid and applies a border and overflow.
  */
-const Container = React__default.forwardRef(({ borderMode, style, children }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([container, borderModeClassMap[borderMode]]), style: style }, children)));
+const Container = React__default.forwardRef(({ borderMode, style, children }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.container, borderModeClassMap[borderMode]]), style: style }, children)));
 
 export { Container };
 //# sourceMappingURL=Container.js.map

package/dist/components/DataGrid/components/GridContainer/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport {\n  container,\n  borderModeFull,\n  borderModeVertical,\n  borderModeNone,\n} from './Container.module.css';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: borderModeFull,\n  vertical: borderModeVertical,\n  none: borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["React"],"mappings":";;;;;AA6BA,MAAM,kBAAkB,GAAG;AACzB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,QAAQ,EAAE,kBAAkB;AAC5B,IAAA,IAAI,EAAE,cAAc;CACrB;AAED;;AAEG;MACU,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EACvE,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
+{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: styles.borderModeFull,\n  vertical: styles.borderModeVertical,\n  none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["React"],"mappings":";;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAC,kBAAkB;IACnC,IAAI,EAAE,MAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_1grno_1 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n._container_1grno_1._borderModeFull_1grno_9 {\n  border-width: var(--sizes-line);\n  border-radius: var(--radius-base);\n}\n._container_1grno_1._borderModeVertical_1grno_13 {\n  border-width: var(--sizes-none);\n  border-left-width: var(--sizes-line);\n  border-right-width: var(--sizes-line);\n}\n._container_1grno_1._borderModeNone_1grno_18 {\n  border-width: var(--sizes-none);\n}");
+var styles = {"container":"_container_1grno_1","borderModeFull":"_borderModeFull_1grno_9","borderModeVertical":"_borderModeVertical_1grno_13","borderModeNone":"_borderModeNone_1grno_18"};
+
+module.exports = styles;
+//# sourceMappingURL=Container.module.scss.cjs.map

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.scss"],"sourcesContent":[".container {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  &.borderModeFull {\n    border-width: var(--sizes-line);\n    border-radius: var(--radius-base);\n  }\n\n  &.borderModeVertical {\n    border-width: var(--sizes-none);\n    border-left-width: var(--sizes-line);\n    border-right-width: var(--sizes-line);\n  }\n\n  &.borderModeNone {\n    border-width: var(--sizes-none);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,wjBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../../_virtual/____insertStyle.js';
+
+insertStyle("._container_1grno_1 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n._container_1grno_1._borderModeFull_1grno_9 {\n  border-width: var(--sizes-line);\n  border-radius: var(--radius-base);\n}\n._container_1grno_1._borderModeVertical_1grno_13 {\n  border-width: var(--sizes-none);\n  border-left-width: var(--sizes-line);\n  border-right-width: var(--sizes-line);\n}\n._container_1grno_1._borderModeNone_1grno_18 {\n  border-width: var(--sizes-none);\n}");
+var styles = {"container":"_container_1grno_1","borderModeFull":"_borderModeFull_1grno_9","borderModeVertical":"_borderModeVertical_1grno_13","borderModeNone":"_borderModeNone_1grno_18"};
+
+export { styles as default };
+//# sourceMappingURL=Container.module.scss.js.map

package/dist/components/DataGrid/components/GridContainer/Container/Container.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.module.scss"],"sourcesContent":[".container {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  overflow-x: auto;\n  overflow-y: hidden;\n\n  &.borderModeFull {\n    border-width: var(--sizes-line);\n    border-radius: var(--radius-base);\n  }\n\n  &.borderModeVertical {\n    border-width: var(--sizes-none);\n    border-left-width: var(--sizes-line);\n    border-right-width: var(--sizes-line);\n  }\n\n  &.borderModeNone {\n    border-width: var(--sizes-none);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,wjBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs

@@ -4,7 +4,7 @@ var React = require('react');
 var index = require('../../../../theme/index.cjs');
 var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 var Container = require('./Container/Container.cjs');
-var GridContainer_module = require('./GridContainer.module.css.cjs');
+var GridContainer_module = require('./GridContainer.module.scss.cjs');
 var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport { dataGridStyle } from './GridContainer.module.css';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","dataGridStyle","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,kCAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEE,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEE,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.js

@@ -2,10 +2,10 @@ import React__default from 'react';
 import { theme } from '../../../../theme/index.js';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import { Container } from './Container/Container.js';
-import { dataGridStyle } from './GridContainer.module.css.js';
+import styles from './GridContainer.module.scss.js';
 import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
 
-const gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);
+const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);
 /**
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).

package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport { dataGridStyle } from './GridContainer.module.css';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AA8DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AA8DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._dataGridStyle_1irlp_1 {\n  position: relative;\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n  inline-size: 100%;\n}");
+var styles = {"dataGridStyle":"_dataGridStyle_1irlp_1"};
+
+module.exports = styles;
+//# sourceMappingURL=GridContainer.module.scss.cjs.map

package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.module.scss.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.scss"],"sourcesContent":[".dataGridStyle {\n  position: relative;\n\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n\n  inline-size: 100%;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4IAAA;AAEA,aAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.js

@@ -0,0 +1,7 @@
+import insertStyle from '../../../../_virtual/____insertStyle.js';
+
+insertStyle("._dataGridStyle_1irlp_1 {\n  position: relative;\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n  inline-size: 100%;\n}");
+var styles = {"dataGridStyle":"_dataGridStyle_1irlp_1"};
+
+export { styles as default };
+//# sourceMappingURL=GridContainer.module.scss.js.map

package/dist/components/DataGrid/components/GridContainer/GridContainer.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.module.scss.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.module.scss"],"sourcesContent":[".dataGridStyle {\n  position: relative;\n\n  border-spacing: var(--sizes-none);\n  box-sizing: border-box;\n\n  inline-size: 100%;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4IAAA;AAEA,aAAA,CAAA,eAAA,CAAA,wBAAA;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs

@@ -7,7 +7,7 @@ require('uid/secure');
 var isLastColumn = require('../../../utils/isLastColumn.cjs');
 var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
 var Resizer = require('../Resizer/Resizer.cjs');
-var HeaderCell_module = require('./HeaderCell.module.css.cjs');
+var HeaderCell_module = require('./HeaderCell.module.scss.cjs');
 var SortIcon = require('./SortIcon/SortIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }