@veeqo/ui 14.11.0-beta-4 → 14.11.1-beta-3

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

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

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

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

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

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

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

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

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

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

package/dist/components/Indicator/Indicator.cjs

@@ -1,16 +1,23 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../theme/index.cjs');
-var styled = require('./styled.cjs');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var Indicator_module = require('./Indicator.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
-    const backgroundColor = color || index.theme.colors.neutral.grey.base;
-    return (React__default.default.createElement(styled.Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
+    return (React__default.default.createElement("div", { role: "status", className: buildClassnames.buildClassnames([Indicator_module.indicator, Indicator_module[`${size}-size`], className]), style: {
+            ...assignCssVars.assignCssVars({
+                indicatorColor: color,
+                indicatorTextColor: textColour,
+            }),
+            ...style,
+        }, ...otherProps }));
 };
 
 exports.Indicator = Indicator;

package/dist/components/Indicator/Indicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Wrapper } from './styled';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  ...otherProps\n}: IndicatorProps) => {\n  const backgroundColor = color || theme.colors.neutral.grey.base;\n  return (\n    <Wrapper\n      role=\"status\"\n      style={{ backgroundColor, color: textColour, ...style }}\n      size={size}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["theme","React","Wrapper"],"mappings":";;;;;;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;AACnB,IAAA,MAAM,eAAe,GAAG,KAAK,IAAIA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,cAAO,EAAA,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACvD,IAAI,EAAE,IAAI,EAAA,GACN,UAAU,EAAA,CACd;AAEN;;;;"}
+{"version":3,"file":"Indicator.cjs","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  className,\n  ...otherProps\n}: IndicatorProps) => {\n  return (\n    <div\n      role=\"status\"\n      className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n      style={{\n        ...assignCssVars({\n          indicatorColor: color,\n          indicatorTextColor: textColour,\n        }),\n        ...style,\n      }}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React","buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,SAAS,EAAEA,gBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAGC,2BAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}

package/dist/components/Indicator/Indicator.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IndicatorProps } from './types';
-export declare const Indicator: ({ color, style, textColour, size, ...otherProps }: IndicatorProps) => React.JSX.Element;
+export declare const Indicator: ({ color, style, textColour, size, className, ...otherProps }: IndicatorProps) => React.JSX.Element;

package/dist/components/Indicator/Indicator.js

@@ -1,10 +1,17 @@
 import React__default from 'react';
-import { theme } from '../../theme/index.js';
-import { Wrapper } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import styles from './Indicator.module.scss.js';
 
-const Indicator = ({ color, style, textColour, size = 'base', ...otherProps }) => {
-    const backgroundColor = color || theme.colors.neutral.grey.base;
-    return (React__default.createElement(Wrapper, { role: "status", style: { backgroundColor, color: textColour, ...style }, size: size, ...otherProps }));
+const Indicator = ({ color, style, textColour, size = 'base', className, ...otherProps }) => {
+    return (React__default.createElement("div", { role: "status", className: buildClassnames([styles.indicator, styles[`${size}-size`], className]), style: {
+            ...assignCssVars({
+                indicatorColor: color,
+                indicatorTextColor: textColour,
+            }),
+            ...style,
+        }, ...otherProps }));
 };
 
 export { Indicator };

package/dist/components/Indicator/Indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { theme } from 'Theme';\nimport { Wrapper } from './styled';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  ...otherProps\n}: IndicatorProps) => {\n  const backgroundColor = color || theme.colors.neutral.grey.base;\n  return (\n    <Wrapper\n      role=\"status\"\n      style={{ backgroundColor, color: textColour, ...style }}\n      size={size}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,GAAG,UAAU,EACE,KAAI;AACnB,IAAA,MAAM,eAAe,GAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAC/D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACvD,IAAI,EAAE,IAAI,EAAA,GACN,UAAU,EAAA,CACd;AAEN;;;;"}
+{"version":3,"file":"Indicator.js","sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars, buildClassnames } from '../../utils';\nimport styles from './Indicator.module.scss';\nimport { IndicatorProps } from './types';\n\nexport const Indicator = ({\n  color,\n  style,\n  textColour,\n  size = 'base',\n  className,\n  ...otherProps\n}: IndicatorProps) => {\n  return (\n    <div\n      role=\"status\"\n      className={buildClassnames([styles.indicator, styles[`${size}-size`], className])}\n      style={{\n        ...assignCssVars({\n          indicatorColor: color,\n          indicatorTextColor: textColour,\n        }),\n        ...style,\n      }}\n      {...otherProps}\n    />\n  );\n};\n"],"names":["React"],"mappings":";;;;;;MAKa,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,IAAI,GAAG,MAAM,EACb,SAAS,EACT,GAAG,UAAU,EACE,KAAI;IACnB,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EACjF,KAAK,EAAE;AACL,YAAA,GAAG,aAAa,CAAC;AACf,gBAAA,cAAc,EAAE,KAAK;AACrB,gBAAA,kBAAkB,EAAE,UAAU;aAC/B,CAAC;AACF,YAAA,GAAG,KAAK;SACT,EAAA,GACG,UAAU,EAAA,CACd;AAEN;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._indicator_1oemz_1 {\n  position: absolute;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n._base-size_1oemz_15 {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n._sm-size_1oemz_23 {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n._xs-size_1oemz_31 {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}");
+var styles = {"indicator":"_indicator_1oemz_1","base-size":"_base-size_1oemz_15","sm-size":"_sm-size_1oemz_23","xs-size":"_xs-size_1oemz_31"};
+
+module.exports = styles;
+//# sourceMappingURL=Indicator.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.module.scss.cjs","sources":["../../../src/components/Indicator/Indicator.module.scss"],"sourcesContent":[".indicator {\n  position: absolute;\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n.base-size {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n.sm-size {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n.xs-size {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g5BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("._indicator_1oemz_1 {\n  position: absolute;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n._base-size_1oemz_15 {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n._sm-size_1oemz_23 {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n._xs-size_1oemz_31 {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}");
+var styles = {"indicator":"_indicator_1oemz_1","base-size":"_base-size_1oemz_15","sm-size":"_sm-size_1oemz_23","xs-size":"_xs-size_1oemz_31"};
+
+export { styles as default };
+//# sourceMappingURL=Indicator.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.module.scss.js","sources":["../../../src/components/Indicator/Indicator.module.scss"],"sourcesContent":[".indicator {\n  position: absolute;\n  box-sizing: border-box;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 0 var(--sizes-xs);\n  background-color: var(--indicator-color, var(--colors-neutral-grey-base));\n  color: var(--indicator-text-color);\n  border: 2px solid white;\n  font-weight: bold;\n  font-size: var(--text-body-small-font-size);\n}\n\n.base-size {\n  height: var(--sizes-7);\n  min-width: var(--sizes-7);\n  border-radius: 18px;\n  top: calc(-1 * var(--sizes-3));\n  right: calc(-1 * var(--sizes-3));\n}\n\n.sm-size {\n  height: var(--sizes-5);\n  min-width: var(--sizes-5);\n  border-radius: 10px;\n  top: calc(-1 * var(--sizes-sm));\n  right: calc(-1 * var(--sizes-sm));\n}\n\n.xs-size {\n  height: var(--sizes-base);\n  min-width: var(--sizes-base);\n  border-radius: var(--radius-md);\n  top: -6px;\n  right: -6px;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g5BAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,WAAA,CAAA,qBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}

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

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_16nff_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_16nff_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_16nff_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_16nff_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n\n._wrapperShowScrollbar_16nff_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_16nff_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_16nff_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_16nff_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: var(--radius-base);\n}\n\n/* TooltipContent */\n._tooltipContent_16nff_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_16nff_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_16nff_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_16nff_53._body_16nff_53._body_16nff_53 tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\n}\n\n._bodyBorderTop_16nff_62 + ._bodyBorderTop_16nff_62 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_16nff_67 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: var(--sizes-md) var(--sizes-base);\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_16nff_74.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_16nff_78 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_16nff_89 {\n  position: relative;\n  padding: var(--sizes-5) var(--sizes-base);\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_16nff_89 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_16nff_105 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_16nff_110 {\n  position: relative;\n  padding: var(--sizes-5) var(--sizes-base);\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n}\n._headerCell_16nff_110 > * {\n  vertical-align: middle;\n}\n._headerCell_16nff_110 span {\n  white-space: pre-line;\n}\n._headerCell_16nff_110.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_16nff_134 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_16nff_134 > * + * {\n  margin-left: var(--sizes-xs);\n}\n\n/* Table */\n._table_16nff_144 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_16nff_144 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_16nff_152 {\n  table-layout: fixed;\n}\n\n._tableLoading_16nff_156 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_16nff_161 ._body_16nff_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_16nff_165 ._headerCell_16nff_110, ._tableNoWrap_16nff_165 ._headerCell_16nff_110 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_16nff_170 ._cell_16nff_89 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: var(--sizes-lg);\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_16nff_179 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_16nff_3","wrapperScrollDisabled":"_wrapperScrollDisabled_16nff_11","wrapperScrollEnabled":"_wrapperScrollEnabled_16nff_15","wrapperBordered":"_wrapperBordered_16nff_19","wrapperShowScrollbar":"_wrapperShowScrollbar_16nff_24","tooltipContent":"_tooltipContent_16nff_41","head":"_head_16nff_48","body":"_body_16nff_53","bodyBorderTop":"_bodyBorderTop_16nff_62","row":"_row_16nff_74","rowAccentColor":"_rowAccentColor_16nff_78","cell":"_cell_16nff_89","cellGrow":"_cellGrow_16nff_105","headerCell":"_headerCell_16nff_110","headerCellLayout":"_headerCellLayout_16nff_134","table":"_table_16nff_144","tableFixedLayout":"_tableFixedLayout_16nff_152","tableLoading":"_tableLoading_16nff_156","tableStriped":"_tableStriped_16nff_161","tableNoWrap":"_tableNoWrap_16nff_165","footer":"_footer_16nff_170","stickyHeaderWrapper":"_stickyHeaderWrapper_16nff_179"};
+
+module.exports = styles;
+//# sourceMappingURL=LegacyDataTable.module.scss.cjs.map

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

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

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_16nff_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_16nff_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_16nff_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_16nff_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: var(--radius-base);\n}\n\n._wrapperShowScrollbar_16nff_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_16nff_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_16nff_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_16nff_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: var(--radius-base);\n}\n\n/* TooltipContent */\n._tooltipContent_16nff_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_16nff_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_16nff_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_16nff_53._body_16nff_53._body_16nff_53 tr:hover td {\n  /* No 1:1 theme token exists for this shade */\n  background-color: #ebf4fb;\n}\n\n._bodyBorderTop_16nff_62 + ._bodyBorderTop_16nff_62 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_16nff_67 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: var(--sizes-md) var(--sizes-base);\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_16nff_74.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_16nff_78 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_16nff_89 {\n  position: relative;\n  padding: var(--sizes-5) var(--sizes-base);\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_16nff_89 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_16nff_105 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_16nff_110 {\n  position: relative;\n  padding: var(--sizes-5) var(--sizes-base);\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n}\n._headerCell_16nff_110 > * {\n  vertical-align: middle;\n}\n._headerCell_16nff_110 span {\n  white-space: pre-line;\n}\n._headerCell_16nff_110.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_16nff_134 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_16nff_134 > * + * {\n  margin-left: var(--sizes-xs);\n}\n\n/* Table */\n._table_16nff_144 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_16nff_144 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_16nff_152 {\n  table-layout: fixed;\n}\n\n._tableLoading_16nff_156 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_16nff_161 ._body_16nff_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_16nff_165 ._headerCell_16nff_110, ._tableNoWrap_16nff_165 ._headerCell_16nff_110 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_16nff_170 ._cell_16nff_89 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: var(--sizes-lg);\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_16nff_179 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_16nff_3","wrapperScrollDisabled":"_wrapperScrollDisabled_16nff_11","wrapperScrollEnabled":"_wrapperScrollEnabled_16nff_15","wrapperBordered":"_wrapperBordered_16nff_19","wrapperShowScrollbar":"_wrapperShowScrollbar_16nff_24","tooltipContent":"_tooltipContent_16nff_41","head":"_head_16nff_48","body":"_body_16nff_53","bodyBorderTop":"_bodyBorderTop_16nff_62","row":"_row_16nff_74","rowAccentColor":"_rowAccentColor_16nff_78","cell":"_cell_16nff_89","cellGrow":"_cellGrow_16nff_105","headerCell":"_headerCell_16nff_110","headerCellLayout":"_headerCellLayout_16nff_134","table":"_table_16nff_144","tableFixedLayout":"_tableFixedLayout_16nff_152","tableLoading":"_tableLoading_16nff_156","tableStriped":"_tableStriped_16nff_161","tableNoWrap":"_tableNoWrap_16nff_165","footer":"_footer_16nff_170","stickyHeaderWrapper":"_stickyHeaderWrapper_16nff_179"};
+
+export { styles as default };
+//# sourceMappingURL=LegacyDataTable.module.scss.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/LegacyDataTable/SpecificState/SpecificState.js

@@ -1,10 +1,13 @@
 import React__default from 'react';
-import { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText } from './styled.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
+import { Text } from '../../Text/Text.js';
+import styles from './SpecificState.module.scss.js';
 
-const SpecificState = ({ height, icon, title, subTitle }) => (React__default.createElement(SpecificStateContainer, { height: height },
-    React__default.createElement(EllipseContainer, null, icon),
-    React__default.createElement(TitleText, { variant: "headingLarge" }, title),
-    subTitle && React__default.createElement(SubTitleText, { variant: "subheadingMedium" }, subTitle)));
+const SpecificState = ({ height, icon, title, subTitle }) => (React__default.createElement("div", { className: styles.container, style: assignCssVars({ specificStateHeight: `${height}px` }) },
+    React__default.createElement("div", { className: styles.ellipse }, icon),
+    React__default.createElement(Text, { variant: "headingLarge", className: styles.title }, title),
+    subTitle && React__default.createElement(Text, { variant: "subheadingMedium", className: styles.subTitle }, subTitle)));
 
 export { SpecificState };
 //# sourceMappingURL=SpecificState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SpecificState.js","sources":["../../../../src/components/LegacyDataTable/SpecificState/SpecificState.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SpecificStateContainer, EllipseContainer, TitleText, SubTitleText } from './styled';\n\nimport { SpecificStateType } from '../utils/types';\n\ntype SpecificStatePropTypes = SpecificStateType & {\n  height: number;\n};\n\nexport const SpecificState = ({ height, icon, title, subTitle }: SpecificStatePropTypes) => (\n  <SpecificStateContainer height={height}>\n    <EllipseContainer>{icon}</EllipseContainer>\n    <TitleText variant=\"headingLarge\">{title}</TitleText>\n    {subTitle && <SubTitleText variant=\"subheadingMedium\">{subTitle}</SubTitleText>}\n  </SpecificStateContainer>\n);\n"],"names":["React"],"mappings":";;;MAUa,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAA0B,MACrFA,6BAAC,sBAAsB,EAAA,EAAC,MAAM,EAAE,MAAM,EAAA;IACpCA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,IAAA,EAAE,IAAI,CAAoB;AAC3C,IAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAa;AACpD,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,OAAO,EAAC,kBAAkB,EAAA,EAAE,QAAQ,CAAgB,CACxD;;;;"}
+{"version":3,"file":"SpecificState.js","sources":["../../../../src/components/LegacyDataTable/SpecificState/SpecificState.tsx"],"sourcesContent":["import React from 'react';\nimport { assignCssVars } from '../../../utils';\nimport { Text } from '../../Text';\nimport { SpecificStateType } from '../utils/types';\nimport styles from './SpecificState.module.scss';\n\ntype SpecificStatePropTypes = SpecificStateType & {\n  height: number;\n};\n\nexport const SpecificState = ({ height, icon, title, subTitle }: SpecificStatePropTypes) => (\n  <div\n    className={styles.container}\n    style={assignCssVars({ specificStateHeight: `${height}px` })}\n  >\n    <div className={styles.ellipse}>{icon}</div>\n    <Text variant=\"headingLarge\" className={styles.title}>{title}</Text>\n    {subTitle && <Text variant=\"subheadingMedium\" className={styles.subTitle}>{subTitle}</Text>}\n  </div>\n);\n"],"names":["React"],"mappings":";;;;;;AAUO,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAA0B,MACrFA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,aAAa,CAAC,EAAE,mBAAmB,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI,EAAE,CAAC,EAAA;AAE5D,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,EAAG,IAAI,CAAO;AAC5C,IAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAA,EAAG,KAAK,CAAQ;AACnE,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,IAAC,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,EAAG,QAAQ,CAAQ,CACvF;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._container_692aj_1 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: var(--specific-state-height);\n  background: white;\n}\n\n._ellipse_692aj_10 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 120px;\n  height: 120px;\n  border-radius: 100px;\n  background: var(--colors-neutral-grey-base);\n  /* !important required to override inline width/height attributes on SVG elements passed by consumers */\n}\n._ellipse_692aj_10 svg {\n  width: 64px !important;\n  height: 64px !important;\n}\n\n._title_692aj_25 {\n  margin-top: var(--sizes-md);\n}\n\n._subTitle_692aj_29 {\n  margin-top: var(--sizes-sm);\n}");
+var styles = {"container":"_container_692aj_1","ellipse":"_ellipse_692aj_10","title":"_title_692aj_25","subTitle":"_subTitle_692aj_29"};
+
+module.exports = styles;
+//# sourceMappingURL=SpecificState.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpecificState.module.scss.cjs","sources":["../../../../src/components/LegacyDataTable/SpecificState/SpecificState.module.scss"],"sourcesContent":[".container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: var(--specific-state-height);\n  background: white;\n}\n\n.ellipse {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 120px;\n  height: 120px;\n  border-radius: 100px;\n  background: var(--colors-neutral-grey-base);\n\n  /* !important required to override inline width/height attributes on SVG elements passed by consumers */\n  svg {\n    width: 64px !important;\n    height: 64px !important;\n  }\n}\n\n.title {\n  margin-top: var(--sizes-md);\n}\n\n.subTitle {\n  margin-top: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4rBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._container_692aj_1 {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: var(--specific-state-height);\n  background: white;\n}\n\n._ellipse_692aj_10 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 120px;\n  height: 120px;\n  border-radius: 100px;\n  background: var(--colors-neutral-grey-base);\n  /* !important required to override inline width/height attributes on SVG elements passed by consumers */\n}\n._ellipse_692aj_10 svg {\n  width: 64px !important;\n  height: 64px !important;\n}\n\n._title_692aj_25 {\n  margin-top: var(--sizes-md);\n}\n\n._subTitle_692aj_29 {\n  margin-top: var(--sizes-sm);\n}");
+var styles = {"container":"_container_692aj_1","ellipse":"_ellipse_692aj_10","title":"_title_692aj_25","subTitle":"_subTitle_692aj_29"};
+
+export { styles as default };
+//# sourceMappingURL=SpecificState.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpecificState.module.scss.js","sources":["../../../../src/components/LegacyDataTable/SpecificState/SpecificState.module.scss"],"sourcesContent":[".container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: var(--specific-state-height);\n  background: white;\n}\n\n.ellipse {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 120px;\n  height: 120px;\n  border-radius: 100px;\n  background: var(--colors-neutral-grey-base);\n\n  /* !important required to override inline width/height attributes on SVG elements passed by consumers */\n  svg {\n    width: 64px !important;\n    height: 64px !important;\n  }\n}\n\n.title {\n  margin-top: var(--sizes-md);\n}\n\n.subTitle {\n  margin-top: var(--sizes-sm);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4rBAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.cjs","sources":["../../../src/components/LegacyDataTable/StickyHeader.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useScroll } from 'react-use';\nimport { FakeHeaderTable, StickyHeaderWrapper } from './styled';\nimport { useStickyHeader } from './utils/hooks';\n\ntype StickyHeaderPropTypes = {\n  tableRef: React.RefObject<HTMLTableElement>;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  isFixedLayout: boolean;\n  renderHeader: (offset?: number) => React.ReactNode;\n  wrapperStyle?: React.CSSProperties;\n};\n\nexport const StickyHeader = ({\n  renderHeader,\n  tableRef,\n  wrapperRef,\n  isFixedLayout,\n  wrapperStyle,\n}: StickyHeaderPropTypes) => {\n  const [headerWrapperRef, setHeaderWrapperRef] = useState<HTMLDivElement | null>(null);\n  const { isSticky } = useStickyHeader(\n    tableRef,\n    parseInt(\n      typeof wrapperStyle?.top === 'string' ? wrapperStyle?.top : `${wrapperStyle?.top}`,\n      10,\n    ),\n  );\n\n  // here we use 2, because we also have borders on each side by 1 px\n  const wrapperWidth = (wrapperRef.current?.getBoundingClientRect().width || 0) - 2;\n\n  // we use it just to re-render header to update scroll\n  // so we don't need to get any value from this hook\n  useScroll(wrapperRef);\n\n  const updateScroll = (ref?: HTMLDivElement | null) => {\n    const scrollLeft = wrapperRef.current?.scrollLeft || 0;\n\n    if (ref) {\n      // eslint-disable-next-line no-param-reassign\n      ref.scrollLeft = scrollLeft;\n      return;\n    }\n\n    if (headerWrapperRef) headerWrapperRef.scrollLeft = scrollLeft;\n  };\n\n  updateScroll();\n\n  return isSticky ? (\n    <StickyHeaderWrapper\n      ref={(ref) => {\n        setHeaderWrapperRef(ref);\n        updateScroll(ref);\n      }}\n      style={{ width: wrapperWidth, ...wrapperStyle }}\n    >\n      <FakeHeaderTable style={{ tableLayout: isFixedLayout ? 'fixed' : 'auto' }}>\n        {renderHeader()}\n      </FakeHeaderTable>\n    </StickyHeaderWrapper>\n  ) : null;\n};\n"],"names":["useState","useStickyHeader","useScroll","React","StickyHeaderWrapper","FakeHeaderTable"],"mappings":";;;;;;;;;;;AAaO,MAAM,YAAY,GAAG,CAAC,EAC3B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,aAAa,EACb,YAAY,GACU,KAAI;;IAC1B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;IACrF,MAAM,EAAE,QAAQ,EAAE,GAAGC,qBAAe,CAClC,QAAQ,EACR,QAAQ,CACN,QAAO,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,CAAA,KAAK,QAAQ,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,GAAG,CAAA,EAAG,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EAAE,EAClF,EAAE,CACH,CACF;;AAGD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,IAAI,CAAC;;;IAIjFC,kBAAS,CAAC,UAAU,CAAC;AAErB,IAAA,MAAM,YAAY,GAAG,CAAC,GAA2B,KAAI;;QACnD,MAAM,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,KAAI,CAAC;AAEtD,QAAA,IAAI,GAAG,EAAE;;AAEP,YAAA,GAAG,CAAC,UAAU,GAAG,UAAU;YAC3B;AACD,QAAA;AAED,QAAA,IAAI,gBAAgB;AAAE,YAAA,gBAAgB,CAAC,UAAU,GAAG,UAAU;AAChE,IAAA,CAAC;AAED,IAAA,YAAY,EAAE;AAEd,IAAA,OAAO,QAAQ,IACbC,sBAAA,CAAA,aAAA,CAACC,0BAAmB,EAAA,EAClB,GAAG,EAAE,CAAC,GAAG,KAAI;YACX,mBAAmB,CAAC,GAAG,CAAC;YACxB,YAAY,CAAC,GAAG,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,EAAA;QAE/CD,sBAAA,CAAA,aAAA,CAACE,sBAAe,EAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EACtE,YAAY,EAAE,CACC,CACE,IACpB,IAAI;AACV;;;;"}
+{"version":3,"file":"StickyHeader.cjs","sources":["../../../src/components/LegacyDataTable/StickyHeader.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useScroll } from 'react-use';\nimport { FakeHeaderTable, StickyHeaderWrapper } from './styled';\nimport { useStickyHeader } from './utils/hooks';\n\ntype StickyHeaderPropTypes = {\n  tableRef: React.RefObject<HTMLTableElement>;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  isFixedLayout: boolean;\n  renderHeader: (offset?: number) => React.ReactNode;\n  wrapperStyle?: React.CSSProperties;\n};\n\nexport const StickyHeader = ({\n  renderHeader,\n  tableRef,\n  wrapperRef,\n  isFixedLayout,\n  wrapperStyle,\n}: StickyHeaderPropTypes) => {\n  const [headerWrapperRef, setHeaderWrapperRef] = useState<HTMLDivElement | null>(null);\n  const { isSticky } = useStickyHeader(\n    tableRef,\n    parseInt(\n      typeof wrapperStyle?.top === 'string' ? wrapperStyle?.top : `${wrapperStyle?.top}`,\n      10,\n    ),\n  );\n\n  // here we use 2, because we also have borders on each side by 1 px\n  const wrapperWidth = (wrapperRef.current?.getBoundingClientRect().width || 0) - 2;\n\n  // we use it just to re-render header to update scroll\n  // so we don't need to get any value from this hook\n  useScroll(wrapperRef);\n\n  const updateScroll = (ref?: HTMLDivElement | null) => {\n    const scrollLeft = wrapperRef.current?.scrollLeft || 0;\n\n    if (ref) {\n      // eslint-disable-next-line no-param-reassign\n      ref.scrollLeft = scrollLeft;\n      return;\n    }\n\n    if (headerWrapperRef) headerWrapperRef.scrollLeft = scrollLeft;\n  };\n\n  updateScroll();\n\n  return isSticky ? (\n    <StickyHeaderWrapper\n      ref={(ref: HTMLDivElement | null) => {\n        setHeaderWrapperRef(ref);\n        updateScroll(ref);\n      }}\n      style={{ width: wrapperWidth, ...wrapperStyle }}\n    >\n      <FakeHeaderTable style={{ tableLayout: isFixedLayout ? 'fixed' : 'auto' }}>\n        {renderHeader()}\n      </FakeHeaderTable>\n    </StickyHeaderWrapper>\n  ) : null;\n};\n"],"names":["useState","useStickyHeader","useScroll","React","StickyHeaderWrapper","FakeHeaderTable"],"mappings":";;;;;;;;;;;AAaO,MAAM,YAAY,GAAG,CAAC,EAC3B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,aAAa,EACb,YAAY,GACU,KAAI;;IAC1B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC;IACrF,MAAM,EAAE,QAAQ,EAAE,GAAGC,qBAAe,CAClC,QAAQ,EACR,QAAQ,CACN,QAAO,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,CAAA,KAAK,QAAQ,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,GAAG,CAAA,EAAG,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EAAE,EAClF,EAAE,CACH,CACF;;AAGD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,IAAI,CAAC;;;IAIjFC,kBAAS,CAAC,UAAU,CAAC;AAErB,IAAA,MAAM,YAAY,GAAG,CAAC,GAA2B,KAAI;;QACnD,MAAM,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,KAAI,CAAC;AAEtD,QAAA,IAAI,GAAG,EAAE;;AAEP,YAAA,GAAG,CAAC,UAAU,GAAG,UAAU;YAC3B;AACD,QAAA;AAED,QAAA,IAAI,gBAAgB;AAAE,YAAA,gBAAgB,CAAC,UAAU,GAAG,UAAU;AAChE,IAAA,CAAC;AAED,IAAA,YAAY,EAAE;AAEd,IAAA,OAAO,QAAQ,IACbC,sBAAA,CAAA,aAAA,CAACC,0BAAmB,EAAA,EAClB,GAAG,EAAE,CAAC,GAA0B,KAAI;YAClC,mBAAmB,CAAC,GAAG,CAAC;YACxB,YAAY,CAAC,GAAG,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,EAAA;QAE/CD,sBAAA,CAAA,aAAA,CAACE,sBAAe,EAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EACtE,YAAY,EAAE,CACC,CACE,IACpB,IAAI;AACV;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"StickyHeader.js","sources":["../../../src/components/LegacyDataTable/StickyHeader.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useScroll } from 'react-use';\nimport { FakeHeaderTable, StickyHeaderWrapper } from './styled';\nimport { useStickyHeader } from './utils/hooks';\n\ntype StickyHeaderPropTypes = {\n  tableRef: React.RefObject<HTMLTableElement>;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  isFixedLayout: boolean;\n  renderHeader: (offset?: number) => React.ReactNode;\n  wrapperStyle?: React.CSSProperties;\n};\n\nexport const StickyHeader = ({\n  renderHeader,\n  tableRef,\n  wrapperRef,\n  isFixedLayout,\n  wrapperStyle,\n}: StickyHeaderPropTypes) => {\n  const [headerWrapperRef, setHeaderWrapperRef] = useState<HTMLDivElement | null>(null);\n  const { isSticky } = useStickyHeader(\n    tableRef,\n    parseInt(\n      typeof wrapperStyle?.top === 'string' ? wrapperStyle?.top : `${wrapperStyle?.top}`,\n      10,\n    ),\n  );\n\n  // here we use 2, because we also have borders on each side by 1 px\n  const wrapperWidth = (wrapperRef.current?.getBoundingClientRect().width || 0) - 2;\n\n  // we use it just to re-render header to update scroll\n  // so we don't need to get any value from this hook\n  useScroll(wrapperRef);\n\n  const updateScroll = (ref?: HTMLDivElement | null) => {\n    const scrollLeft = wrapperRef.current?.scrollLeft || 0;\n\n    if (ref) {\n      // eslint-disable-next-line no-param-reassign\n      ref.scrollLeft = scrollLeft;\n      return;\n    }\n\n    if (headerWrapperRef) headerWrapperRef.scrollLeft = scrollLeft;\n  };\n\n  updateScroll();\n\n  return isSticky ? (\n    <StickyHeaderWrapper\n      ref={(ref) => {\n        setHeaderWrapperRef(ref);\n        updateScroll(ref);\n      }}\n      style={{ width: wrapperWidth, ...wrapperStyle }}\n    >\n      <FakeHeaderTable style={{ tableLayout: isFixedLayout ? 'fixed' : 'auto' }}>\n        {renderHeader()}\n      </FakeHeaderTable>\n    </StickyHeaderWrapper>\n  ) : null;\n};\n"],"names":["React"],"mappings":";;;;;AAaO,MAAM,YAAY,GAAG,CAAC,EAC3B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,aAAa,EACb,YAAY,GACU,KAAI;;IAC1B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IACrF,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,CAClC,QAAQ,EACR,QAAQ,CACN,QAAO,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,CAAA,KAAK,QAAQ,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,GAAG,CAAA,EAAG,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EAAE,EAClF,EAAE,CACH,CACF;;AAGD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,IAAI,CAAC;;;IAIjF,SAAS,CAAC,UAAU,CAAC;AAErB,IAAA,MAAM,YAAY,GAAG,CAAC,GAA2B,KAAI;;QACnD,MAAM,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,KAAI,CAAC;AAEtD,QAAA,IAAI,GAAG,EAAE;;AAEP,YAAA,GAAG,CAAC,UAAU,GAAG,UAAU;YAC3B;AACD,QAAA;AAED,QAAA,IAAI,gBAAgB;AAAE,YAAA,gBAAgB,CAAC,UAAU,GAAG,UAAU;AAChE,IAAA,CAAC;AAED,IAAA,YAAY,EAAE;AAEd,IAAA,OAAO,QAAQ,IACbA,cAAA,CAAA,aAAA,CAAC,mBAAmB,EAAA,EAClB,GAAG,EAAE,CAAC,GAAG,KAAI;YACX,mBAAmB,CAAC,GAAG,CAAC;YACxB,YAAY,CAAC,GAAG,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,EAAA;QAE/CA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EACtE,YAAY,EAAE,CACC,CACE,IACpB,IAAI;AACV;;;;"}
+{"version":3,"file":"StickyHeader.js","sources":["../../../src/components/LegacyDataTable/StickyHeader.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useScroll } from 'react-use';\nimport { FakeHeaderTable, StickyHeaderWrapper } from './styled';\nimport { useStickyHeader } from './utils/hooks';\n\ntype StickyHeaderPropTypes = {\n  tableRef: React.RefObject<HTMLTableElement>;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  isFixedLayout: boolean;\n  renderHeader: (offset?: number) => React.ReactNode;\n  wrapperStyle?: React.CSSProperties;\n};\n\nexport const StickyHeader = ({\n  renderHeader,\n  tableRef,\n  wrapperRef,\n  isFixedLayout,\n  wrapperStyle,\n}: StickyHeaderPropTypes) => {\n  const [headerWrapperRef, setHeaderWrapperRef] = useState<HTMLDivElement | null>(null);\n  const { isSticky } = useStickyHeader(\n    tableRef,\n    parseInt(\n      typeof wrapperStyle?.top === 'string' ? wrapperStyle?.top : `${wrapperStyle?.top}`,\n      10,\n    ),\n  );\n\n  // here we use 2, because we also have borders on each side by 1 px\n  const wrapperWidth = (wrapperRef.current?.getBoundingClientRect().width || 0) - 2;\n\n  // we use it just to re-render header to update scroll\n  // so we don't need to get any value from this hook\n  useScroll(wrapperRef);\n\n  const updateScroll = (ref?: HTMLDivElement | null) => {\n    const scrollLeft = wrapperRef.current?.scrollLeft || 0;\n\n    if (ref) {\n      // eslint-disable-next-line no-param-reassign\n      ref.scrollLeft = scrollLeft;\n      return;\n    }\n\n    if (headerWrapperRef) headerWrapperRef.scrollLeft = scrollLeft;\n  };\n\n  updateScroll();\n\n  return isSticky ? (\n    <StickyHeaderWrapper\n      ref={(ref: HTMLDivElement | null) => {\n        setHeaderWrapperRef(ref);\n        updateScroll(ref);\n      }}\n      style={{ width: wrapperWidth, ...wrapperStyle }}\n    >\n      <FakeHeaderTable style={{ tableLayout: isFixedLayout ? 'fixed' : 'auto' }}>\n        {renderHeader()}\n      </FakeHeaderTable>\n    </StickyHeaderWrapper>\n  ) : null;\n};\n"],"names":["React"],"mappings":";;;;;AAaO,MAAM,YAAY,GAAG,CAAC,EAC3B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,aAAa,EACb,YAAY,GACU,KAAI;;IAC1B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;IACrF,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,CAClC,QAAQ,EACR,QAAQ,CACN,QAAO,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,CAAA,KAAK,QAAQ,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,GAAG,CAAA,EAAG,YAAY,aAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EAAE,EAClF,EAAE,CACH,CACF;;AAGD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,IAAI,CAAC;;;IAIjF,SAAS,CAAC,UAAU,CAAC;AAErB,IAAA,MAAM,YAAY,GAAG,CAAC,GAA2B,KAAI;;QACnD,MAAM,UAAU,GAAG,CAAA,CAAA,EAAA,GAAA,UAAU,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,KAAI,CAAC;AAEtD,QAAA,IAAI,GAAG,EAAE;;AAEP,YAAA,GAAG,CAAC,UAAU,GAAG,UAAU;YAC3B;AACD,QAAA;AAED,QAAA,IAAI,gBAAgB;AAAE,YAAA,gBAAgB,CAAC,UAAU,GAAG,UAAU;AAChE,IAAA,CAAC;AAED,IAAA,YAAY,EAAE;AAEd,IAAA,OAAO,QAAQ,IACbA,cAAA,CAAA,aAAA,CAAC,mBAAmB,EAAA,EAClB,GAAG,EAAE,CAAC,GAA0B,KAAI;YAClC,mBAAmB,CAAC,GAAG,CAAC;YACxB,YAAY,CAAC,GAAG,CAAC;QACnB,CAAC,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,YAAY,EAAE,EAAA;QAE/CA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EACtE,YAAY,EAAE,CACC,CACE,IACpB,IAAI;AACV;;;;"}

package/dist/components/LegacyDataTable/cells/ClickableCell.cjs

@@ -1,19 +1,17 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
-var index = require('../../../theme/index.cjs');
-var styled$1 = require('./styled.cjs');
-var styled$2 = require('../styled.cjs');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var styled = require('../styled.cjs');
+var cells_module = require('./cells.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 ClickableButton = styled__default.default(styled$1.CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1b7t5il" }) `color:${index.theme.text.link.color};text-decoration:${index.theme.text.link.textDecoration};`;
-const ClickableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled$2.Cell, { ...otherProps },
-    React__default.default.createElement(ClickableButton, { onClick: onClick }, children)));
+const ClickableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled.Cell, { ...otherProps },
+    React__default.default.createElement("button", { type: "button", className: buildClassnames.buildClassnames([cells_module.cellButton, cells_module.clickableButton]), onClick: onClick }, children)));
 
 exports.ClickableCell = ClickableCell;
 //# sourceMappingURL=ClickableCell.cjs.map

package/dist/components/LegacyDataTable/cells/ClickableCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ClickableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst ClickableButton = styled(CellButton)`\n  color: ${theme.text.link.color};\n  text-decoration: ${theme.text.link.textDecoration};\n`;\n\nexport interface ClickableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n  <Cell {...otherProps}>\n    <ClickableButton onClick={onClick}>{children}</ClickableButton>\n  </Cell>\n);\n"],"names":["styled","CellButton","theme","React","Cell"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,eAAe,GAAGA,uBAAM,CAACC,mBAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/BC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,iBAAA,EACXA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFC,sBAAA,CAAA,aAAA,CAACC,aAAI,OAAK,UAAU,EAAA;IAClBD,sBAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}
+{"version":3,"file":"ClickableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/ClickableCell.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport { Cell, CellProps } from '../styled';\nimport styles from './cells.module.scss';\n\nexport interface ClickableCellProps extends Omit<CellProps, 'onClick'> {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const ClickableCell = ({ onClick, children, ...otherProps }: ClickableCellProps) => (\n  <Cell {...otherProps}>\n    <button type=\"button\" className={buildClassnames([styles.cellButton, styles.clickableButton])} onClick={onClick}>\n      {children}\n    </button>\n  </Cell>\n);\n"],"names":["React","Cell","buildClassnames","styles"],"mappings":";;;;;;;;;;;;MAUa,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,sBAAA,CAAA,aAAA,CAACC,WAAI,OAAK,UAAU,EAAA;IAClBD,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAEE,+BAAe,CAAC,CAACC,YAAM,CAAC,UAAU,EAAEA,YAAM,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAA,EAC5G,QAAQ,CACF,CACJ;;;;"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CellProps } from '../styled';
-export interface ClickableCellProps extends CellProps {
+export interface ClickableCellProps extends Omit<CellProps, 'onClick'> {
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     children: React.ReactNode;
 }

package/dist/components/LegacyDataTable/cells/ClickableCell.js

@@ -1,12 +1,11 @@
 import React__default from 'react';
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
-import { CellButton } from './styled.js';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
 import { Cell } from '../styled.js';
+import styles from './cells.module.scss.js';
 
-const ClickableButton = styled(CellButton).withConfig({ displayName: "vui--ClickableButton", componentId: "vui--1b7t5il" }) `color:${theme.text.link.color};text-decoration:${theme.text.link.textDecoration};`;
 const ClickableCell = ({ onClick, children, ...otherProps }) => (React__default.createElement(Cell, { ...otherProps },
-    React__default.createElement(ClickableButton, { onClick: onClick }, children)));
+    React__default.createElement("button", { type: "button", className: buildClassnames([styles.cellButton, styles.clickableButton]), onClick: onClick }, children)));
 
 export { ClickableCell };
 //# sourceMappingURL=ClickableCell.js.map