@veeqo/ui 14.10.2 → 14.10.3-beta-3

package/dist/components/DataTable/components/ActionBar.cjs

@@ -1,18 +1,13 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
-var index = require('../../../theme/index.cjs');
 var renderHeader = require('../renderers/renderHeader.cjs');
-var constants = require('../constants.cjs');
+var DataTable_module = require('./DataTable.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 Container = styled__default.default.div.withConfig({ displayName: "vui--Container", componentId: "vui--1feqxrw" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${constants.headerCellHeight};background-color:white;`;
-const Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--dbz7t3" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${index.theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = React.useState(false);
@@ -44,9 +39,9 @@ function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, child
         width: containerRect === null || containerRect === void 0 ? void 0 : containerRect.width,
     };
     const style = isSticky ? stickyPositionStyles : defaultPositionStyles;
-    return (React__default.default.createElement(Container, { style: style },
+    return (React__default.default.createElement("div", { className: DataTable_module.actionBarContainer, style: style },
         renderHeader.renderHeader({ column: selectionColumn }),
-        React__default.default.createElement(Content, null, children)));
+        React__default.default.createElement("div", { className: DataTable_module.actionBarContent }, children)));
 }
 
 exports.ActionBar = ActionBar;

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["styled","headerCellHeight","theme","useState","useEffect","React","renderHeader"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAShBC,0BAAgB,0BAE3B;AAED,MAAM,OAAO,GAAGD,uBAAM,CAAC,GAAG,4KAMGE,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA;AACpB,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAD,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CACnB;AAEhB;;;;"}
+{"version":3,"file":"ActionBar.cjs","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <div className={styles.actionBarContainer} style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <div className={styles.actionBarContent}>{children}</div>\n    </div>\n  );\n}\n"],"names":["useState","useEffect","React","styles","renderHeader"],"mappings":";;;;;;;;;;AAYM,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAE/CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;IAErE,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,gBAAM,CAAC,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAA;AACpD,QAAAC,yBAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;QAC1CF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,gBAAM,CAAC,gBAAgB,IAAG,QAAQ,CAAO,CACrD;AAEV;;;;"}

package/dist/components/DataTable/components/ActionBar.js

@@ -1,11 +1,7 @@
 import React__default, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
 import { renderHeader } from '../renderers/renderHeader.js';
-import { headerCellHeight } from '../constants.js';
+import styles from './DataTable.module.scss.js';
 
-const Container = styled.div.withConfig({ displayName: "vui--Container", componentId: "vui--1feqxrw" }) `display:grid;grid-template-columns:auto 1fr;align-items:center;position:absolute;top:0;left:0;right:0;z-index:50;height:${headerCellHeight};background-color:white;`;
-const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--dbz7t3" }) `width:100%;height:100%;display:flex;align-items:center;padding:0 0.5rem;border-bottom:1px solid ${theme.colors.neutral.grey.base};& > *{flex:1;}`;
 function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, children, }) {
     var _a;
     const [isSticky, setIsSticky] = useState(false);
@@ -37,9 +33,9 @@ function ActionBar({ selectionColumn, intersectionTargetRef, containerRef, child
         width: containerRect === null || containerRect === void 0 ? void 0 : containerRect.width,
     };
     const style = isSticky ? stickyPositionStyles : defaultPositionStyles;
-    return (React__default.createElement(Container, { style: style },
+    return (React__default.createElement("div", { className: styles.actionBarContainer, style: style },
         renderHeader({ column: selectionColumn }),
-        React__default.createElement(Content, null, children)));
+        React__default.createElement("div", { className: styles.actionBarContent }, children)));
 }
 
 export { ActionBar };

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport { headerCellHeight } from '../constants';\n\nconst Container = styled.div`\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: ${headerCellHeight};\n  background-color: white;\n`;\n\nconst Content = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 0.5rem;\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  & > * {\n    flex: 1;\n  }\n`;\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <Container style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <Content>{children}</Content>\n    </Container>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,wHAAA,EAShB,gBAAgB,0BAE3B;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,4KAMG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,iBAK1D;AASK,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA;AACpB,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAC1C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CACnB;AAEhB;;;;"}
+{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/DataTable/components/ActionBar.tsx"],"sourcesContent":["import React, { useEffect, useState, RefObject, CSSProperties, ReactNode } from 'react';\nimport { renderHeader } from '../renderers/renderHeader';\nimport { ColumnConfig } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport interface ActionBarProps {\n  children: ReactNode;\n  selectionColumn: ColumnConfig;\n  intersectionTargetRef: RefObject<HTMLElement>;\n  containerRef: RefObject<HTMLElement>;\n}\n\nexport function ActionBar({\n  selectionColumn,\n  intersectionTargetRef,\n  containerRef,\n  children,\n}: ActionBarProps) {\n  const [isSticky, setIsSticky] = useState(false);\n\n  useEffect(() => {\n    if (!intersectionTargetRef.current) return;\n    const callback: IntersectionObserverCallback = (entries) => {\n      entries.forEach((entry) => {\n        setIsSticky(!entry.isIntersecting);\n      });\n    };\n    const intersectionObserver = new IntersectionObserver(callback);\n    intersectionObserver.observe(intersectionTargetRef.current);\n    /* eslint-disable-next-line consistent-return */\n    return () => intersectionObserver.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [intersectionTargetRef.current]);\n\n  const containerRect = containerRef.current?.getBoundingClientRect();\n\n  const defaultPositionStyles: CSSProperties = {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n  };\n\n  const stickyPositionStyles: CSSProperties = {\n    position: 'fixed',\n    top: 0,\n    left: containerRect?.left,\n    width: containerRect?.width,\n  };\n\n  const style = isSticky ? stickyPositionStyles : defaultPositionStyles;\n\n  return (\n    <div className={styles.actionBarContainer} style={style}>\n      {renderHeader({ column: selectionColumn })}\n      <div className={styles.actionBarContent}>{children}</div>\n    </div>\n  );\n}\n"],"names":["React"],"mappings":";;;;AAYM,SAAU,SAAS,CAAC,EACxB,eAAe,EACf,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACO,EAAA;;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE/C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,qBAAqB,CAAC,OAAO;YAAE;AACpC,QAAA,MAAM,QAAQ,GAAiC,CAAC,OAAO,KAAI;AACzD,YAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACxB,gBAAA,WAAW,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC;AACpC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC;AACD,QAAA,MAAM,oBAAoB,GAAG,IAAI,oBAAoB,CAAC,QAAQ,CAAC;AAC/D,QAAA,oBAAoB,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC;;AAE3D,QAAA,OAAO,MAAM,oBAAoB,CAAC,UAAU,EAAE;;AAEhD,IAAA,CAAC,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,EAAE;AAEnE,IAAA,MAAM,qBAAqB,GAAkB;AAC3C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,CAAC;KACT;AAED,IAAA,MAAM,oBAAoB,GAAkB;AAC1C,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,IAAI;AACzB,QAAA,KAAK,EAAE,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,KAAK;KAC5B;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,oBAAoB,GAAG,qBAAqB;IAErE,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAA;AACpD,QAAA,YAAY,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;QAC1CA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,IAAG,QAAQ,CAAO,CACrD;AAEV;;;;"}

package/dist/components/DataTable/components/Cell.cjs

@@ -1,18 +1,29 @@
 'use strict';
 
-var styled = require('styled-components');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
 var index = require('../../../theme/index.cjs');
 var alignmentToFlex = require('../utils/alignmentToFlex.cjs');
 require('../types.cjs');
-require('react');
 require('../../../theme/modules/sizes.cjs');
 var constants = require('../constants.cjs');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1oz46st" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};color:${index.theme.text.bodySmall.color};font-family:${index.theme.text.bodySmall.fontFamily};font-size:${index.theme.text.bodySmall.fontSize};font-style:${index.theme.text.bodySmall.fontStyle};font-weight:${index.theme.text.bodySmall.fontWeight};line-height:${index.theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${constants.footerCellHeight};border-top:1px solid ${index.theme.colors.secondary.blue.base};background-color:${index.theme.colors.neutral.grey.lightest};}`;
+const Cell = React__default.default.forwardRef(({ align = 'left', spacing = constants.defaultCellSpacing, span = 1, className, children, style, ...rest }, ref) => (React__default.default.createElement("td", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.cell, className]), style: {
+        ...assignCssVars.assignCssVars({
+            cellAlign: alignmentToFlex.alignmentToFlex(align),
+            cellSpacing: index.theme.sizes[spacing],
+            cellSpan: span,
+        }),
+        ...style,
+    }, ...rest }, children)));
+Cell.displayName = 'Cell';
 
 exports.Cell = Cell;
 //# sourceMappingURL=Cell.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n  /* Styling */\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n  /* Content */\n  color: ${theme.text.bodySmall.color};\n  font-family: ${theme.text.bodySmall.fontFamily};\n  font-size: ${theme.text.bodySmall.fontSize};\n  font-style: ${theme.text.bodySmall.fontStyle};\n  font-weight: ${theme.text.bodySmall.fontWeight};\n  line-height: ${theme.text.bodySmall.lineHeight};\n\n  /* Grid */\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n  tfoot & {\n    min-height: ${footerCellHeight};\n    border-top: 1px solid ${theme.colors.secondary.blue.base};\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n`;\n"],"names":["styled","alignmentToFlex","defaultCellSpacing","theme","footerCellHeight"],"mappings":";;;;;;;;;;;;;;AAYO,MAAM,IAAI,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAKC,+BAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAGC,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,eAAA,EACzD,CAAC,EAAE,OAAO,GAAGD,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlEA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA,aAAA,EACpBA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjCA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAA,aAAA,EAC7BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/BA,WAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,iBAAA,EAG3B,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA,oBAAA,EAGnCC,0BAAgB,CAAA,sBAAA,EACND,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}
+{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/DataTable/components/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing } from '../constants';\nimport styles from './DataTable.module.scss';\n\nexport interface CellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'onChange'> {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const Cell = React.forwardRef<HTMLTableCellElement, CellProps>(\n  ({ align = 'left', spacing = defaultCellSpacing, span = 1, className, children, style, ...rest }, ref) => (\n    <td\n      ref={ref}\n      className={buildClassnames([styles.cell, className])}\n      style={{\n        ...assignCssVars({\n          cellAlign: alignmentToFlex(align),\n          cellSpacing: theme.sizes[spacing],\n          cellSpan: span,\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </td>\n  ),\n);\n\nCell.displayName = 'Cell';\n"],"names":["React","defaultCellSpacing","buildClassnames","styles","assignCssVars","alignmentToFlex","theme"],"mappings":";;;;;;;;;;;;;;;;;AAiBO,MAAM,IAAI,GAAGA,sBAAK,CAAC,UAAU,CAClC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAGC,4BAAkB,EAAE,IAAI,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACnGD,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEE,+BAAe,CAAC,CAACC,gBAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC;AACf,YAAA,SAAS,EAAEC,+BAAe,CAAC,KAAK,CAAC;AACjC,YAAA,WAAW,EAAEC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACN,CACN;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -1,7 +1,11 @@
+import React from 'react';
 import { ColumnAlignment, ColumnSpacing } from '../types';
-export interface CellProps {
+export interface CellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'onChange'> {
     align?: ColumnAlignment;
     spacing?: ColumnSpacing;
     span?: number;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
 }
-export declare const Cell: import("styled-components").StyledComponent<"td", any, CellProps, never>;
+export declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/DataTable/components/Cell.js

@@ -1,12 +1,23 @@
-import styled from 'styled-components';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
 import { theme } from '../../../theme/index.js';
 import { alignmentToFlex } from '../utils/alignmentToFlex.js';
 import '../types.js';
-import 'react';
 import '../../../theme/modules/sizes.js';
-import { footerCellHeight, defaultCellSpacing } from '../constants.js';
+import { defaultCellSpacing } from '../constants.js';
+import styles from './DataTable.module.scss.js';
 
-const Cell = styled.td.withConfig({ displayName: "vui--Cell", componentId: "vui--1oz46st" }) `display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};background-color:white;padding-bottom:var(--density);padding-top:var(--density);padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};color:${theme.text.bodySmall.color};font-family:${theme.text.bodySmall.fontFamily};font-size:${theme.text.bodySmall.fontSize};font-style:${theme.text.bodySmall.fontStyle};font-weight:${theme.text.bodySmall.fontWeight};line-height:${theme.text.bodySmall.lineHeight};grid-column-end:${({ span = 1 }) => `span ${span}`};tfoot &{min-height:${footerCellHeight};border-top:1px solid ${theme.colors.secondary.blue.base};background-color:${theme.colors.neutral.grey.lightest};}`;
+const Cell = React__default.forwardRef(({ align = 'left', spacing = defaultCellSpacing, span = 1, className, children, style, ...rest }, ref) => (React__default.createElement("td", { ref: ref, className: buildClassnames([styles.cell, className]), style: {
+        ...assignCssVars({
+            cellAlign: alignmentToFlex(align),
+            cellSpacing: theme.sizes[spacing],
+            cellSpan: span,
+        }),
+        ...style,
+    }, ...rest }, children)));
+Cell.displayName = 'Cell';
 
 export { Cell };
 //# sourceMappingURL=Cell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../src/components/DataTable/components/Cell.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, footerCellHeight } from '../constants';\n\nexport interface CellProps {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n}\n\nexport const Cell = styled.td<CellProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n\n  /* Styling */\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n\n  /* Content */\n  color: ${theme.text.bodySmall.color};\n  font-family: ${theme.text.bodySmall.fontFamily};\n  font-size: ${theme.text.bodySmall.fontSize};\n  font-style: ${theme.text.bodySmall.fontStyle};\n  font-weight: ${theme.text.bodySmall.fontWeight};\n  line-height: ${theme.text.bodySmall.lineHeight};\n\n  /* Grid */\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n\n  tfoot & {\n    min-height: ${footerCellHeight};\n    border-top: 1px solid ${theme.colors.secondary.blue.base};\n    background-color: ${theme.colors.neutral.grey.lightest};\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gDAAA,EAGR,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,iGAMjD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,eAAA,EACzD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,OAAA,EAGlE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAA,aAAA,EACpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,WAAA,EACjC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAA,YAAA,EAC5B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAA,aAAA,EAC7B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,aAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAA,iBAAA,EAG3B,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA,oBAAA,EAGnC,gBAAgB,CAAA,sBAAA,EACN,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACpC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;;;;"}
+{"version":3,"file":"Cell.js","sources":["../../../../src/components/DataTable/components/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { theme } from '../../../theme';\nimport { ColumnAlignment, ColumnSpacing } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing } from '../constants';\nimport styles from './DataTable.module.scss';\n\nexport interface CellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'onChange'> {\n  align?: ColumnAlignment;\n  spacing?: ColumnSpacing;\n  span?: number;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport const Cell = React.forwardRef<HTMLTableCellElement, CellProps>(\n  ({ align = 'left', spacing = defaultCellSpacing, span = 1, className, children, style, ...rest }, ref) => (\n    <td\n      ref={ref}\n      className={buildClassnames([styles.cell, className])}\n      style={{\n        ...assignCssVars({\n          cellAlign: alignmentToFlex(align),\n          cellSpacing: theme.sizes[spacing],\n          cellSpan: span,\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </td>\n  ),\n);\n\nCell.displayName = 'Cell';\n"],"names":["React"],"mappings":";;;;;;;;;;;AAiBO,MAAM,IAAI,GAAGA,cAAK,CAAC,UAAU,CAClC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,kBAAkB,EAAE,IAAI,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACnGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,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,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;AACjC,YAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,YAAA,QAAQ,EAAE,IAAI;SACf,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACN,CACN;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/components/DataTable/components/ColumnDivider.cjs

@@ -1,15 +1,14 @@
 '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 DataTable_module = require('./DataTable.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 ResizerBar = styled__default.default.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--115ilx" }) `position:absolute;right:0;top:37.5%;width:1px;background:${index.theme.colors.neutral.grey.dark};min-height:25%;cursor:col-resize;user-select:none;&::before{content:'';position:absolute;top:-150%;left:0;width:12px;min-height:400%;z-index:1;transform:translateX(-6px);}`;
 const ColumnDivider = ({ columnId, setColumnWidth, minWidth }) => {
     const ref = React.createRef();
     const padding = 24;
@@ -65,9 +64,8 @@ const ColumnDivider = ({ columnId, setColumnWidth, minWidth }) => {
         window.addEventListener('mousemove', mouseMove);
         window.addEventListener('drag', mouseMove);
     };
-    return (React__default.default.createElement(ResizerBar, { ref: ref, className: "th-divider", onMouseDown: trackMouseStart, onDragStart: trackMouseStart }));
+    return (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.resizerBar, 'th-divider']), onMouseDown: trackMouseStart, onDragStart: trackMouseStart }));
 };
 
 exports.ColumnDivider = ColumnDivider;
-exports.ResizerBar = ResizerBar;
 //# sourceMappingURL=ColumnDivider.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnDivider.cjs","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from 'styled-components';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport { theme } from '../../../theme';\n\nexport type ColumnDividerProps = {\n  columnId: ColumnId;\n  setColumnWidth?: ColumnWidthHandler;\n  minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n  event: MouseEvent;\n};\n\nexport const ResizerBar = styled.div`\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: ${theme.colors.neutral.grey.dark};\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: 0;\n    width: 12px;\n    min-height: 400%;\n    z-index: 1;\n    transform: translateX(-6px);\n  }\n`;\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n  const ref = createRef<HTMLDivElement>();\n  const padding = 24;\n\n  const mouseMove = (event: MouseEvent) => {\n    const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n    const translate = Math.max(event.clientX - (dragInitX || 0), minTranslate || 0);\n\n    dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n    dragDivider!.style.transform = `translateX(${translate}px)`;\n  };\n\n  const minTranslate = () => {\n    const { parentElement } = window.tableHeaders.dragDivider!;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const currWidth = parentElement!.getBoundingClientRect().width;\n\n    return contentWidth - currWidth + padding;\n  };\n\n  const calculateWidth = ({ event }: CalculateWidthProps) => {\n    const { dragInitX, dragDivider } = window.tableHeaders;\n    const { parentElement } = dragDivider!;\n    const initWidth = parentElement?.getBoundingClientRect().width;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n    const deltaX = (event.clientX || 0) - (dragInitX || 0);\n\n    return Math.max((initWidth || 0) + deltaX, finalWidth + padding);\n  };\n\n  const mouseUp = (event: MouseEvent) => {\n    window.removeEventListener('mouseup', mouseUp);\n    window.removeEventListener('dragend', mouseUp);\n    window.removeEventListener('mousemove', mouseMove);\n    window.removeEventListener('drag', mouseMove);\n    setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n    if (window.tableHeaders) {\n      window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n      window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n      window.tableHeaders.dragInitX = undefined;\n      window.tableHeaders.minTranslate = undefined;\n      window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n        'hideHeaderDetails',\n      );\n    }\n  };\n\n  const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n    if (event.button !== 0 && event.type !== 'dragstart') return;\n    window.tableHeaders = {\n      dragInitX: event.clientX, // Using global prop instead of react prop for performance\n      dragDivider: ref.current,\n    };\n    window.tableHeaders.minTranslate = minTranslate();\n\n    window.addEventListener('mouseup', mouseUp);\n    window.addEventListener('dragend', mouseUp);\n    window.addEventListener('mousemove', mouseMove);\n    window.addEventListener('drag', mouseMove);\n  };\n\n  return (\n    <ResizerBar\n      ref={ref}\n      className=\"th-divider\"\n      onMouseDown={trackMouseStart}\n      onDragStart={trackMouseStart}\n    />\n  );\n};\n"],"names":["styled","theme","createRef","React"],"mappings":"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"}
+{"version":3,"file":"ColumnDivider.cjs","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport type ColumnDividerProps = {\n  columnId: ColumnId;\n  setColumnWidth?: ColumnWidthHandler;\n  minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n  event: MouseEvent;\n};\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n  const ref = createRef<HTMLDivElement>();\n  const padding = 24;\n\n  const mouseMove = (event: MouseEvent) => {\n    const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n    const translate = Math.max(event.clientX - (dragInitX || 0), minTranslate || 0);\n\n    dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n    dragDivider!.style.transform = `translateX(${translate}px)`;\n  };\n\n  const minTranslate = () => {\n    const { parentElement } = window.tableHeaders.dragDivider!;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const currWidth = parentElement!.getBoundingClientRect().width;\n\n    return contentWidth - currWidth + padding;\n  };\n\n  const calculateWidth = ({ event }: CalculateWidthProps) => {\n    const { dragInitX, dragDivider } = window.tableHeaders;\n    const { parentElement } = dragDivider!;\n    const initWidth = parentElement?.getBoundingClientRect().width;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n    const deltaX = (event.clientX || 0) - (dragInitX || 0);\n\n    return Math.max((initWidth || 0) + deltaX, finalWidth + padding);\n  };\n\n  const mouseUp = (event: MouseEvent) => {\n    window.removeEventListener('mouseup', mouseUp);\n    window.removeEventListener('dragend', mouseUp);\n    window.removeEventListener('mousemove', mouseMove);\n    window.removeEventListener('drag', mouseMove);\n    setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n    if (window.tableHeaders) {\n      window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n      window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n      window.tableHeaders.dragInitX = undefined;\n      window.tableHeaders.minTranslate = undefined;\n      window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n        'hideHeaderDetails',\n      );\n    }\n  };\n\n  const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n    if (event.button !== 0 && event.type !== 'dragstart') return;\n    window.tableHeaders = {\n      dragInitX: event.clientX, // Using global prop instead of react prop for performance\n      dragDivider: ref.current,\n    };\n    window.tableHeaders.minTranslate = minTranslate();\n\n    window.addEventListener('mouseup', mouseUp);\n    window.addEventListener('dragend', mouseUp);\n    window.addEventListener('mousemove', mouseMove);\n    window.addEventListener('drag', mouseMove);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.resizerBar, 'th-divider'])}\n      onMouseDown={trackMouseStart}\n      onDragStart={trackMouseStart}\n    />\n  );\n};\n"],"names":["createRef","React","buildClassnames","styles"],"mappings":"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"}

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

@@ -8,5 +8,4 @@ export type ColumnDividerProps = {
 export type CalculateWidthProps = {
     event: MouseEvent;
 };
-export declare const ResizerBar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ColumnDivider: ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => React.JSX.Element;

package/dist/components/DataTable/components/ColumnDivider.js

@@ -1,8 +1,8 @@
 import React__default, { createRef } 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 './DataTable.module.scss.js';
 
-const ResizerBar = styled.div.withConfig({ displayName: "vui--ResizerBar", componentId: "vui--115ilx" }) `position:absolute;right:0;top:37.5%;width:1px;background:${theme.colors.neutral.grey.dark};min-height:25%;cursor:col-resize;user-select:none;&::before{content:'';position:absolute;top:-150%;left:0;width:12px;min-height:400%;z-index:1;transform:translateX(-6px);}`;
 const ColumnDivider = ({ columnId, setColumnWidth, minWidth }) => {
     const ref = createRef();
     const padding = 24;
@@ -58,8 +58,8 @@ const ColumnDivider = ({ columnId, setColumnWidth, minWidth }) => {
         window.addEventListener('mousemove', mouseMove);
         window.addEventListener('drag', mouseMove);
     };
-    return (React__default.createElement(ResizerBar, { ref: ref, className: "th-divider", onMouseDown: trackMouseStart, onDragStart: trackMouseStart }));
+    return (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.resizerBar, 'th-divider']), onMouseDown: trackMouseStart, onDragStart: trackMouseStart }));
 };
 
-export { ColumnDivider, ResizerBar };
+export { ColumnDivider };
 //# sourceMappingURL=ColumnDivider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnDivider.js","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport styled from 'styled-components';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport { theme } from '../../../theme';\n\nexport type ColumnDividerProps = {\n  columnId: ColumnId;\n  setColumnWidth?: ColumnWidthHandler;\n  minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n  event: MouseEvent;\n};\n\nexport const ResizerBar = styled.div`\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: ${theme.colors.neutral.grey.dark};\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: 0;\n    width: 12px;\n    min-height: 400%;\n    z-index: 1;\n    transform: translateX(-6px);\n  }\n`;\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n  const ref = createRef<HTMLDivElement>();\n  const padding = 24;\n\n  const mouseMove = (event: MouseEvent) => {\n    const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n    const translate = Math.max(event.clientX - (dragInitX || 0), minTranslate || 0);\n\n    dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n    dragDivider!.style.transform = `translateX(${translate}px)`;\n  };\n\n  const minTranslate = () => {\n    const { parentElement } = window.tableHeaders.dragDivider!;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const currWidth = parentElement!.getBoundingClientRect().width;\n\n    return contentWidth - currWidth + padding;\n  };\n\n  const calculateWidth = ({ event }: CalculateWidthProps) => {\n    const { dragInitX, dragDivider } = window.tableHeaders;\n    const { parentElement } = dragDivider!;\n    const initWidth = parentElement?.getBoundingClientRect().width;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n    const deltaX = (event.clientX || 0) - (dragInitX || 0);\n\n    return Math.max((initWidth || 0) + deltaX, finalWidth + padding);\n  };\n\n  const mouseUp = (event: MouseEvent) => {\n    window.removeEventListener('mouseup', mouseUp);\n    window.removeEventListener('dragend', mouseUp);\n    window.removeEventListener('mousemove', mouseMove);\n    window.removeEventListener('drag', mouseMove);\n    setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n    if (window.tableHeaders) {\n      window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n      window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n      window.tableHeaders.dragInitX = undefined;\n      window.tableHeaders.minTranslate = undefined;\n      window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n        'hideHeaderDetails',\n      );\n    }\n  };\n\n  const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n    if (event.button !== 0 && event.type !== 'dragstart') return;\n    window.tableHeaders = {\n      dragInitX: event.clientX, // Using global prop instead of react prop for performance\n      dragDivider: ref.current,\n    };\n    window.tableHeaders.minTranslate = minTranslate();\n\n    window.addEventListener('mouseup', mouseUp);\n    window.addEventListener('dragend', mouseUp);\n    window.addEventListener('mousemove', mouseMove);\n    window.addEventListener('drag', mouseMove);\n  };\n\n  return (\n    <ResizerBar\n      ref={ref}\n      className=\"th-divider\"\n      onMouseDown={trackMouseStart}\n      onDragStart={trackMouseStart}\n    />\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ColumnDivider.js","sources":["../../../../src/components/DataTable/components/ColumnDivider.tsx"],"sourcesContent":["import React, { createRef } from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { ColumnId, ColumnWidthHandler } from '../types';\nimport styles from './DataTable.module.scss';\n\nexport type ColumnDividerProps = {\n  columnId: ColumnId;\n  setColumnWidth?: ColumnWidthHandler;\n  minWidth?: number;\n};\n\nexport type CalculateWidthProps = {\n  event: MouseEvent;\n};\n\nexport const ColumnDivider = ({ columnId, setColumnWidth, minWidth }: ColumnDividerProps) => {\n  const ref = createRef<HTMLDivElement>();\n  const padding = 24;\n\n  const mouseMove = (event: MouseEvent) => {\n    const { minTranslate, dragDivider, dragInitX } = window.tableHeaders;\n    const translate = Math.max(event.clientX - (dragInitX || 0), minTranslate || 0);\n\n    dragDivider!.parentElement!.parentElement!.classList.add('hideHeaderDetails');\n    dragDivider!.style.transform = `translateX(${translate}px)`;\n  };\n\n  const minTranslate = () => {\n    const { parentElement } = window.tableHeaders.dragDivider!;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const currWidth = parentElement!.getBoundingClientRect().width;\n\n    return contentWidth - currWidth + padding;\n  };\n\n  const calculateWidth = ({ event }: CalculateWidthProps) => {\n    const { dragInitX, dragDivider } = window.tableHeaders;\n    const { parentElement } = dragDivider!;\n    const initWidth = parentElement?.getBoundingClientRect().width;\n    const contentWidth = parentElement!\n      .querySelector('.headerContent')!\n      .getBoundingClientRect().width;\n\n    const finalWidth = minWidth && contentWidth < minWidth ? minWidth : contentWidth;\n\n    const deltaX = (event.clientX || 0) - (dragInitX || 0);\n\n    return Math.max((initWidth || 0) + deltaX, finalWidth + padding);\n  };\n\n  const mouseUp = (event: MouseEvent) => {\n    window.removeEventListener('mouseup', mouseUp);\n    window.removeEventListener('dragend', mouseUp);\n    window.removeEventListener('mousemove', mouseMove);\n    window.removeEventListener('drag', mouseMove);\n    setColumnWidth?.({ columnId, width: calculateWidth({ event }) });\n    if (window.tableHeaders) {\n      window.tableHeaders.dragDivider!.style.transform = 'translateX(0)';\n      window.tableHeaders.dragDivider!.parentElement!.style.justifyContent = '';\n      window.tableHeaders.dragInitX = undefined;\n      window.tableHeaders.minTranslate = undefined;\n      window.tableHeaders.dragDivider!.parentElement!.parentElement!.classList.remove(\n        'hideHeaderDetails',\n      );\n    }\n  };\n\n  const trackMouseStart: React.MouseEventHandler<HTMLDivElement> = (event) => {\n    if (event.button !== 0 && event.type !== 'dragstart') return;\n    window.tableHeaders = {\n      dragInitX: event.clientX, // Using global prop instead of react prop for performance\n      dragDivider: ref.current,\n    };\n    window.tableHeaders.minTranslate = minTranslate();\n\n    window.addEventListener('mouseup', mouseUp);\n    window.addEventListener('dragend', mouseUp);\n    window.addEventListener('mousemove', mouseMove);\n    window.addEventListener('drag', mouseMove);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.resizerBar, 'th-divider'])}\n      onMouseDown={trackMouseStart}\n      onDragStart={trackMouseStart}\n    />\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataTable/components/ColumnHeader.cjs

@@ -1,18 +1,17 @@
 'use strict';
 
-var styled = require('styled-components');
-var index = require('../../../theme/index.cjs');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const SortIndicator = styled__default.default.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--o7masx" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${index.theme.colors.neutral.ink.lightest};`;
-const HeaderContent = styled__default.default.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--vlccds" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${index.theme.text.headingTable.color};font-family:${index.theme.text.headingTable.fontFamily};font-size:${index.theme.text.headingTable.fontSize};font-style:${index.theme.text.headingTable.fontStyle};font-weight:${index.theme.text.headingTable.fontWeight};line-height:${index.theme.text.headingTable.lineHeight};`;
-const ClickableHeaderContent = styled__default.default(HeaderContent).attrs(() => ({
-    as: 'button',
-    type: 'button',
-})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--xbox8h" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${index.theme.colors.neutral.grey.light};color:${index.theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${index.theme.colors.secondary.blue.light};}`;
+const SortIndicator = ({ className, children, ...rest }) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([DataTable_module.sortIndicator, className]), ...rest }, children));
+const HeaderContent = ({ className, children, ...rest }) => (React__default.default.createElement("span", { className: buildClassnames.buildClassnames([DataTable_module.headerContent, className]), ...rest }, children));
+const ClickableHeaderContent = ({ className, children, ...rest }) => (React__default.default.createElement("button", { ...rest, type: "button", className: buildClassnames.buildClassnames([DataTable_module.clickableHeaderContent, className]) }, children));
 
 exports.ClickableHeaderContent = ClickableHeaderContent;
 exports.HeaderContent = HeaderContent;

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGO,MAAM,aAAa,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2GAAA,EAO5BC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAGrC,MAAM,aAAa,GAAGD,uBAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAO7BC,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvBA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAA,YAAA,EAC/BA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAA,aAAA,EAChCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClCA,WAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAGD,uBAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACDC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1CA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKRA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;"}
+{"version":3,"file":"ColumnHeader.cjs","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface SortIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const SortIndicator = ({ className, children, ...rest }: SortIndicatorProps) => (\n  <div className={buildClassnames([styles.sortIndicator, className])} {...rest}>\n    {children}\n  </div>\n);\n\nexport interface HeaderContentProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const HeaderContent = ({ className, children, ...rest }: HeaderContentProps) => (\n  <span className={buildClassnames([styles.headerContent, className])} {...rest}>\n    {children}\n  </span>\n);\n\nexport interface ClickableHeaderContentProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const ClickableHeaderContent = ({\n  className,\n  children,\n  ...rest\n}: ClickableHeaderContentProps) => (\n  <button\n    {...rest}\n    type=\"button\"\n    className={buildClassnames([styles.clickableHeaderContent, className])}\n  >\n    {children}\n  </button>\n);\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;AASO,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAsB,MAChFA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,KAAM,IAAI,EAAA,EACzE,QAAQ,CACL;AAQD,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAsB,MAChFF,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,KAAM,IAAI,EAAA,EAC1E,QAAQ,CACJ;AASF,MAAM,sBAAsB,GAAG,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACqB,MAC5BF,oDACM,IAAI,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,IAErE,QAAQ,CACF;;;;;;"}

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

@@ -1,6 +1,16 @@
-export declare const SortIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderContent: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ClickableHeaderContent: import("styled-components").StyledComponent<"span", any, {
-    as: string;
-    type: string;
-}, "as" | "type">;
+import React from 'react';
+export interface SortIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const SortIndicator: ({ className, children, ...rest }: SortIndicatorProps) => React.JSX.Element;
+export interface HeaderContentProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const HeaderContent: ({ className, children, ...rest }: HeaderContentProps) => React.JSX.Element;
+export interface ClickableHeaderContentProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const ClickableHeaderContent: ({ className, children, ...rest }: ClickableHeaderContentProps) => React.JSX.Element;

package/dist/components/DataTable/components/ColumnHeader.js

@@ -1,12 +1,11 @@
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './DataTable.module.scss.js';
 
-const SortIndicator = styled.div.withConfig({ displayName: "vui--SortIndicator", componentId: "vui--o7masx" }) `width:20px;height:20px;display:flex;align-items:center;justify-content:center;background-color:white;color:${theme.colors.neutral.ink.lightest};`;
-const HeaderContent = styled.span.withConfig({ displayName: "vui--HeaderContent", componentId: "vui--vlccds" }) `display:flex;height:28px;align-items:center;gap:4px;white-space:nowrap;color:${theme.text.headingTable.color};font-family:${theme.text.headingTable.fontFamily};font-size:${theme.text.headingTable.fontSize};font-style:${theme.text.headingTable.fontStyle};font-weight:${theme.text.headingTable.fontWeight};line-height:${theme.text.headingTable.lineHeight};`;
-const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({
-    as: 'button',
-    type: 'button',
-})).withConfig({ displayName: "vui--ClickableHeaderContent", componentId: "vui--xbox8h" }) `appearance:none;padding:0;border:0;border-radius:4px;background-color:transparent;&:not(:disabled):hover{cursor:pointer;}&:hover ${SortIndicator}{background-color:${theme.colors.neutral.grey.light};color:${theme.colors.neutral.ink.base};}&:focus-visible{outline:0;box-shadow:0px 0px 0px 2px ${theme.colors.secondary.blue.light};}`;
+const SortIndicator = ({ className, children, ...rest }) => (React__default.createElement("div", { className: buildClassnames([styles.sortIndicator, className]), ...rest }, children));
+const HeaderContent = ({ className, children, ...rest }) => (React__default.createElement("span", { className: buildClassnames([styles.headerContent, className]), ...rest }, children));
+const ClickableHeaderContent = ({ className, children, ...rest }) => (React__default.createElement("button", { ...rest, type: "button", className: buildClassnames([styles.clickableHeaderContent, className]) }, children));
 
 export { ClickableHeaderContent, HeaderContent, SortIndicator };
 //# sourceMappingURL=ColumnHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport const SortIndicator = styled.div`\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ${theme.colors.neutral.ink.lightest};\n`;\n\nexport const HeaderContent = styled.span`\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n\n  color: ${theme.text.headingTable.color};\n  font-family: ${theme.text.headingTable.fontFamily};\n  font-size: ${theme.text.headingTable.fontSize};\n  font-style: ${theme.text.headingTable.fontStyle};\n  font-weight: ${theme.text.headingTable.fontWeight};\n  line-height: ${theme.text.headingTable.lineHeight};\n`;\n\nexport const ClickableHeaderContent = styled(HeaderContent).attrs(() => ({\n  as: 'button',\n  type: 'button',\n}))`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover ${SortIndicator} {\n    background-color: ${theme.colors.neutral.grey.light};\n    color: ${theme.colors.neutral.ink.base};\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2GAAA,EAO5B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ;AAGrC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,6EAAA,EAO7B,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAA,aAAA,EACvB,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,WAAA,EACpC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAA,YAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAA,aAAA,EAChC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,aAAA,EAClC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAA,CAAA;AAG5C,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,OAAO;AACvE,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,IAAI,EAAE,QAAQ;AACf,CAAA,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,6BAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iIAAA,EAWS,aAAa,CAAA,kBAAA,EACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,OAAA,EAC1C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,0DAKR,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}
+{"version":3,"file":"ColumnHeader.js","sources":["../../../../src/components/DataTable/components/ColumnHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface SortIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const SortIndicator = ({ className, children, ...rest }: SortIndicatorProps) => (\n  <div className={buildClassnames([styles.sortIndicator, className])} {...rest}>\n    {children}\n  </div>\n);\n\nexport interface HeaderContentProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const HeaderContent = ({ className, children, ...rest }: HeaderContentProps) => (\n  <span className={buildClassnames([styles.headerContent, className])} {...rest}>\n    {children}\n  </span>\n);\n\nexport interface ClickableHeaderContentProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const ClickableHeaderContent = ({\n  className,\n  children,\n  ...rest\n}: ClickableHeaderContentProps) => (\n  <button\n    {...rest}\n    type=\"button\"\n    className={buildClassnames([styles.clickableHeaderContent, className])}\n  >\n    {children}\n  </button>\n);\n"],"names":["React"],"mappings":";;;;;AASO,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAsB,MAChFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,KAAM,IAAI,EAAA,EACzE,QAAQ,CACL;AAQD,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAsB,MAChFA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,KAAM,IAAI,EAAA,EAC1E,QAAQ,CACJ;AASF,MAAM,sBAAsB,GAAG,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACqB,MAC5BA,4CACM,IAAI,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,IAErE,QAAQ,CACF;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_jzi05_3 {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_jzi05_11 {\n  white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_jzi05_16 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_jzi05_23 {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeholderShimmer_jzi05_1;\n  animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_jzi05_1 {\n  0% {\n    background-position: -468px 0;\n  }\n  100% {\n    background-position: 468px 0;\n  }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_jzi05_47 {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1/span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_jzi05_58 {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_jzi05_65 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\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-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  grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_jzi05_65 {\n  min-height: 56px;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_jzi05_89 {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_jzi05_104 {\n  display: contents;\n}\n\n._rowSelected_jzi05_108 > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_jzi05_112 > *:first-child {\n  position: relative;\n}\n\n._rowAccentColor_jzi05_112 > *: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/* Wrapper */\n._wrapper_jzi05_127 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n}\n._wrapper_jzi05_127, ._wrapper_jzi05_127 * {\n  box-sizing: border-box;\n}\n._wrapper_jzi05_127 .hideHeaderDetails th > * {\n  opacity: 0.1;\n}\n._wrapper_jzi05_127 .hideHeaderDetails th .th-divider {\n  opacity: 1;\n}\n\n._borderFull_jzi05_143 {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n._borderVertical_jzi05_148 {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n._borderNone_jzi05_154 {\n  border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_jzi05_159 {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n  --density: var(--sizes-base);\n}\n._tableGrid_jzi05_159 thead, ._tableGrid_jzi05_159 tbody, ._tableGrid_jzi05_159 tfoot {\n  display: contents;\n}\n\n._tableGrid_jzi05_159._tableGrid_jzi05_159 tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n._sortIndicator_jzi05_175 {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_jzi05_185 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_jzi05_199 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n}\n._clickableHeaderContent_jzi05_199:not(:disabled):hover {\n  cursor: pointer;\n}\n._clickableHeaderContent_jzi05_199:hover ._sortIndicator_jzi05_175 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_jzi05_199:focus-visible {\n  outline: 0;\n  box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_jzi05_230 {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n}\n._resizerBar_jzi05_230::before {\n  content: \"\";\n  position: absolute;\n  top: -150%;\n  left: 0;\n  width: 12px;\n  min-height: 400%;\n  z-index: 1;\n  transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_jzi05_252 {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n._actionBarContent_jzi05_265 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_jzi05_265 > * {\n  flex: 1;\n}");
+var styles = {"scrollContainer":"_scrollContainer_jzi05_3","noWrap":"_noWrap_jzi05_11","truncate":"_truncate_jzi05_16","loadingCellContent":"_loadingCellContent_jzi05_23","emptyBodyContent":"_emptyBodyContent_jzi05_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_jzi05_58","cell":"_cell_jzi05_65","header":"_header_jzi05_89","row":"_row_jzi05_104","rowSelected":"_rowSelected_jzi05_108","rowAccentColor":"_rowAccentColor_jzi05_112","wrapper":"_wrapper_jzi05_127","borderFull":"_borderFull_jzi05_143","borderVertical":"_borderVertical_jzi05_148","borderNone":"_borderNone_jzi05_154","tableGrid":"_tableGrid_jzi05_159","sortIndicator":"_sortIndicator_jzi05_175","headerContent":"_headerContent_jzi05_185","clickableHeaderContent":"_clickableHeaderContent_jzi05_199","resizerBar":"_resizerBar_jzi05_230","actionBarContainer":"_actionBarContainer_jzi05_252","actionBarContent":"_actionBarContent_jzi05_265"};
+
+module.exports = styles;
+//# sourceMappingURL=DataTable.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.module.scss.cjs","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n  white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(\n    to right,\n    var(--colors-neutral-grey-base) 0%,\n    var(--colors-neutral-grey-dark) 20%,\n    var(--colors-neutral-grey-base) 40%,\n    var(--colors-neutral-grey-base) 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n  0% {\n    background-position: -468px 0;\n  }\n\n  100% {\n    background-position: 468px 0;\n  }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1 / span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\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-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  grid-column-end: span var(--cell-span, 1);\n\n  tfoot & {\n    min-height: 56px;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n/* Header */\n.header {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n  display: contents;\n}\n\n.rowSelected > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n  position: relative;\n}\n\n.rowAccentColor > *: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/* Wrapper */\n.wrapper {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  &,\n  & * {\n    box-sizing: border-box;\n  }\n\n  :global(.hideHeaderDetails) th {\n    > * {\n      opacity: 0.1;\n    }\n\n    :global(.th-divider) {\n      opacity: 1;\n    }\n  }\n}\n\n.borderFull {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n.borderVertical {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.borderNone {\n  border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover .sortIndicator {\n    background-color: var(--colors-neutral-grey-light);\n    color: var(--colors-neutral-ink-base);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n  }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: 0;\n    width: 12px;\n    min-height: 400%;\n    z-index: 1;\n    transform: translateX(-6px);\n  }\n}\n\n/* ActionBar */\n.actionBarContainer {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n.actionBarContent {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  & > * {\n    flex: 1;\n  }\n}\n"],"names":[],"mappings":";;;;AAEA,eAAA,CAAA,mxNAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("/* DataTable sub-component styles */\n/* ScrollContainer */\n._scrollContainer_jzi05_3 {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n._noWrap_jzi05_11 {\n  white-space: nowrap;\n}\n\n/* Truncate */\n._truncate_jzi05_16 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n._loadingCellContent_jzi05_23 {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(to right, var(--colors-neutral-grey-base) 0%, var(--colors-neutral-grey-dark) 20%, var(--colors-neutral-grey-base) 40%, var(--colors-neutral-grey-base) 100%);\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeholderShimmer_jzi05_1;\n  animation-timing-function: linear;\n}\n\n@keyframes _placeholderShimmer_jzi05_1 {\n  0% {\n    background-position: -468px 0;\n  }\n  100% {\n    background-position: 468px 0;\n  }\n}\n/* EmptyBodyContent */\n._emptyBodyContent_jzi05_47 {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1/span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n._emptyBodyGlyphWrapper_jzi05_58 {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n._cell_jzi05_65 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\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-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  grid-column-end: span var(--cell-span, 1);\n}\ntfoot ._cell_jzi05_65 {\n  min-height: 56px;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n/* Header */\n._header_jzi05_89 {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n._row_jzi05_104 {\n  display: contents;\n}\n\n._rowSelected_jzi05_108 > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n._rowAccentColor_jzi05_112 > *:first-child {\n  position: relative;\n}\n\n._rowAccentColor_jzi05_112 > *: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/* Wrapper */\n._wrapper_jzi05_127 {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n}\n._wrapper_jzi05_127, ._wrapper_jzi05_127 * {\n  box-sizing: border-box;\n}\n._wrapper_jzi05_127 .hideHeaderDetails th > * {\n  opacity: 0.1;\n}\n._wrapper_jzi05_127 .hideHeaderDetails th .th-divider {\n  opacity: 1;\n}\n\n._borderFull_jzi05_143 {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n._borderVertical_jzi05_148 {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n._borderNone_jzi05_154 {\n  border-width: 0;\n}\n\n/* TableGrid */\n._tableGrid_jzi05_159 {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n  --density: var(--sizes-base);\n}\n._tableGrid_jzi05_159 thead, ._tableGrid_jzi05_159 tbody, ._tableGrid_jzi05_159 tfoot {\n  display: contents;\n}\n\n._tableGrid_jzi05_159._tableGrid_jzi05_159 tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n._sortIndicator_jzi05_175 {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n._headerContent_jzi05_185 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._clickableHeaderContent_jzi05_199 {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n}\n._clickableHeaderContent_jzi05_199:not(:disabled):hover {\n  cursor: pointer;\n}\n._clickableHeaderContent_jzi05_199:hover ._sortIndicator_jzi05_175 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n._clickableHeaderContent_jzi05_199:focus-visible {\n  outline: 0;\n  box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n}\n\n/* ColumnDivider ResizerBar */\n._resizerBar_jzi05_230 {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n}\n._resizerBar_jzi05_230::before {\n  content: \"\";\n  position: absolute;\n  top: -150%;\n  left: 0;\n  width: 12px;\n  min-height: 400%;\n  z-index: 1;\n  transform: translateX(-6px);\n}\n\n/* ActionBar */\n._actionBarContainer_jzi05_252 {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n._actionBarContent_jzi05_265 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n}\n._actionBarContent_jzi05_265 > * {\n  flex: 1;\n}");
+var styles = {"scrollContainer":"_scrollContainer_jzi05_3","noWrap":"_noWrap_jzi05_11","truncate":"_truncate_jzi05_16","loadingCellContent":"_loadingCellContent_jzi05_23","emptyBodyContent":"_emptyBodyContent_jzi05_47","emptyBodyGlyphWrapper":"_emptyBodyGlyphWrapper_jzi05_58","cell":"_cell_jzi05_65","header":"_header_jzi05_89","row":"_row_jzi05_104","rowSelected":"_rowSelected_jzi05_108","rowAccentColor":"_rowAccentColor_jzi05_112","wrapper":"_wrapper_jzi05_127","borderFull":"_borderFull_jzi05_143","borderVertical":"_borderVertical_jzi05_148","borderNone":"_borderNone_jzi05_154","tableGrid":"_tableGrid_jzi05_159","sortIndicator":"_sortIndicator_jzi05_175","headerContent":"_headerContent_jzi05_185","clickableHeaderContent":"_clickableHeaderContent_jzi05_199","resizerBar":"_resizerBar_jzi05_230","actionBarContainer":"_actionBarContainer_jzi05_252","actionBarContent":"_actionBarContent_jzi05_265"};
+
+export { styles as default };
+//# sourceMappingURL=DataTable.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.module.scss.js","sources":["../../../../src/components/DataTable/components/DataTable.module.scss"],"sourcesContent":["/* DataTable sub-component styles */\n\n/* ScrollContainer */\n.scrollContainer {\n  position: relative;\n  width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n/* NoWrap */\n.noWrap {\n  white-space: nowrap;\n}\n\n/* Truncate */\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* LoadingCellContent */\n.loadingCellContent {\n  height: 20px;\n  width: 75%;\n  border-radius: var(--radius-base);\n\n  background: var(--colors-neutral-grey-base);\n  background-image: linear-gradient(\n    to right,\n    var(--colors-neutral-grey-base) 0%,\n    var(--colors-neutral-grey-dark) 20%,\n    var(--colors-neutral-grey-base) 40%,\n    var(--colors-neutral-grey-base) 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n}\n\n@keyframes placeholderShimmer {\n  0% {\n    background-position: -468px 0;\n  }\n\n  100% {\n    background-position: 468px 0;\n  }\n}\n\n/* EmptyBodyContent */\n.emptyBodyContent {\n  padding-top: var(--sizes-lg);\n  padding-bottom: var(--sizes-lg);\n  grid-column: 1 / span var(--column-span);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sizes-md);\n}\n\n.emptyBodyGlyphWrapper {\n  padding: var(--sizes-md);\n  background-color: var(--colors-neutral-grey-light);\n  border-radius: var(--radius-full);\n}\n\n/* Cell */\n.cell {\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n\n  background-color: white;\n  padding-bottom: var(--density);\n  padding-top: var(--density);\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\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-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  grid-column-end: span var(--cell-span, 1);\n\n  tfoot & {\n    min-height: 56px;\n    border-top: 1px solid var(--colors-secondary-blue-base);\n    background-color: var(--colors-neutral-grey-lightest);\n  }\n}\n\n/* Header */\n.header {\n  height: 56px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: var(--cell-align, flex-start);\n  z-index: var(--header-z-index, 0);\n\n  background-color: white;\n  padding-left: var(--cell-spacing, var(--sizes-3));\n  padding-right: var(--cell-spacing, var(--sizes-3));\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  grid-column-end: span var(--cell-span, 1);\n}\n\n/* Row */\n.row {\n  display: contents;\n}\n\n.rowSelected > td {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n.rowAccentColor > *:first-child {\n  position: relative;\n}\n\n.rowAccentColor > *: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/* Wrapper */\n.wrapper {\n  width: 100%;\n  position: relative;\n  border-style: solid;\n  border-color: var(--colors-neutral-grey-dark);\n\n  &,\n  & * {\n    box-sizing: border-box;\n  }\n\n  :global(.hideHeaderDetails) th {\n    > * {\n      opacity: 0.1;\n    }\n\n    :global(.th-divider) {\n      opacity: 1;\n    }\n  }\n}\n\n.borderFull {\n  border-width: 1px;\n  border-radius: var(--radius-base);\n}\n\n.borderVertical {\n  border-width: 0;\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.borderNone {\n  border-width: 0;\n}\n\n/* TableGrid */\n.tableGrid {\n  min-width: 100%;\n  width: max-content;\n  display: grid;\n\n  & thead,\n  & tbody,\n  & tfoot {\n    display: contents;\n  }\n\n  --density: var(--sizes-base);\n}\n\n.tableGrid.tableGrid tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #f2f8fc;\n}\n\n/* ColumnHeader */\n.sortIndicator {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n\n.headerContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.clickableHeaderContent {\n  display: flex;\n  height: 28px;\n  align-items: center;\n  gap: var(--sizes-xs);\n  white-space: nowrap;\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-style: var(--text-heading-table-font-style);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n\n  appearance: none;\n  padding: 0;\n  border: 0;\n  border-radius: var(--radius-base);\n  background-color: transparent;\n\n  &:not(:disabled):hover {\n    cursor: pointer;\n  }\n\n  &:hover .sortIndicator {\n    background-color: var(--colors-neutral-grey-light);\n    color: var(--colors-neutral-ink-base);\n  }\n\n  &:focus-visible {\n    outline: 0;\n    box-shadow: 0px 0px 0px 2px var(--colors-secondary-blue-light);\n  }\n}\n\n/* ColumnDivider ResizerBar */\n.resizerBar {\n  position: absolute;\n  right: 0;\n  top: 37.5%;\n  width: 1px;\n  background: var(--colors-neutral-grey-dark);\n  min-height: 25%;\n  cursor: col-resize;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: -150%;\n    left: 0;\n    width: 12px;\n    min-height: 400%;\n    z-index: 1;\n    transform: translateX(-6px);\n  }\n}\n\n/* ActionBar */\n.actionBarContainer {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 50;\n  height: 56px;\n  background-color: white;\n}\n\n.actionBarContent {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 var(--sizes-sm);\n  border-bottom: 1px solid var(--colors-neutral-grey-base);\n\n  & > * {\n    flex: 1;\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AAEAA,WAAA,CAAA,mxNAAA;AACA,aAAA,CAAA,iBAAA,CAAA,0BAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,uBAAA,CAAA,iCAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,QAAA,CAAA,kBAAA,CAAA,KAAA,CAAA,gBAAA,CAAA,aAAA,CAAA,wBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,gBAAA,CAAA,2BAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,WAAA,CAAA,sBAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,eAAA,CAAA,0BAAA,CAAA,wBAAA,CAAA,mCAAA,CAAA,YAAA,CAAA,uBAAA,CAAA,oBAAA,CAAA,+BAAA,CAAA,kBAAA,CAAA,6BAAA;;;;"}