@veeqo/ui 14.9.0 → 14.10.0-beta-1

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_6f2bx_1 {\n  height: 16px;\n  width: 100%;\n}\n\n._shimmer_6f2bx_6 {\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeHolderShimmer_6f2bx_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_6f2bx_21 {\n  animation-duration: 1s;\n}\n\n._shimmerStatic_6f2bx_25 {\n  animation-duration: 0s;\n}\n\n@keyframes _placeHolderShimmer_6f2bx_1 {\n  0% {\n    background-position: -380px 0;\n  }\n  100% {\n    background-position: 380px 0;\n  }\n}");
+var styles = {"wrapper":"_wrapper_6f2bx_1","shimmer":"_shimmer_6f2bx_6","shimmerAnimated":"_shimmerAnimated_6f2bx_21","shimmerStatic":"_shimmerStatic_6f2bx_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: 4px;\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,+yBAAA;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_6f2bx_1 {\n  height: 16px;\n  width: 100%;\n}\n\n._shimmer_6f2bx_6 {\n  display: inline-block;\n  color: transparent;\n  border-radius: 4px;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: _placeHolderShimmer_6f2bx_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_6f2bx_21 {\n  animation-duration: 1s;\n}\n\n._shimmerStatic_6f2bx_25 {\n  animation-duration: 0s;\n}\n\n@keyframes _placeHolderShimmer_6f2bx_1 {\n  0% {\n    background-position: -380px 0;\n  }\n  100% {\n    background-position: 380px 0;\n  }\n}");
+var styles = {"wrapper":"_wrapper_6f2bx_1","shimmer":"_shimmer_6f2bx_6","shimmerAnimated":"_shimmerAnimated_6f2bx_21","shimmerStatic":"_shimmerStatic_6f2bx_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: 4px;\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,+yBAAA;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

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

@@ -1 +1 @@
-{"version":3,"file":"ClickableCell.js","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":["React"],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EAC/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA,iBAAA,EACX,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,CAAA,CAClD;MAOY,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;IAClBA,cAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EAAC,OAAO,EAAE,OAAO,IAAG,QAAQ,CAAmB,CAC1D;;;;"}
+{"version":3,"file":"ClickableCell.js","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"],"mappings":";;;;;;MAUa,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAsB,MACpFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;IAClBA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAA,EAC5G,QAAQ,CACF,CACJ;;;;"}

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

@@ -1,19 +1,16 @@
 'use strict';
 
 var React = require('react');
-var styled = require('styled-components');
-var styled$2 = require('./styled.cjs');
-var styled$1 = require('../styled.cjs');
+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 Content = styled__default.default.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
-const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled$1.Cell, { ...otherProps },
-    React__default.default.createElement(styled$2.CellButton, { onClick: onClick },
-        React__default.default.createElement(Content, null, children))));
+const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.default.createElement(styled.Cell, { ...otherProps },
+    React__default.default.createElement("button", { type: "button", className: cells_module.cellButton, onClick: onClick },
+        React__default.default.createElement("div", { className: cells_module.editableContent }, children))));
 
 exports.EditableCell = EditableCell;
 //# sourceMappingURL=EditableCell.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["styled","React","Cell","CellButton"],"mappings":";;;;;;;;;;;;AAKA,MAAM,OAAO,GAAGA,uBAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFC,sBAAA,CAAA,aAAA,CAACC,aAAI,OAAK,UAAU,EAAA;AAClB,IAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAF,sBAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACR;;;;"}
+{"version":3,"file":"EditableCell.cjs","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell, CellProps } from '../styled';\nimport styles from './cells.module.scss';\n\nexport interface EditableCellProps extends Omit<CellProps, 'onClick'> {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <button type=\"button\" className={styles.cellButton} onClick={onClick}>\n      <div className={styles.editableContent}>{children}</div>\n    </button>\n  </Cell>\n);\n"],"names":["React","Cell","styles"],"mappings":";;;;;;;;;;MASa,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,sBAAA,CAAA,aAAA,CAACC,WAAI,OAAK,UAAU,EAAA;AAClB,IAAAD,sBAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAEE,YAAM,CAAC,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA;QAClEF,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,YAAM,CAAC,eAAe,EAAA,EAAG,QAAQ,CAAO,CACjD,CACJ;;;;"}

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

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

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

@@ -1,12 +1,10 @@
 import React__default from 'react';
-import styled from 'styled-components';
-import { CellButton } from './styled.js';
 import { Cell } from '../styled.js';
+import styles from './cells.module.scss.js';
 
-const Content = styled.div.withConfig({ displayName: "vui--Content", componentId: "vui--n24x0f" }) `text-align:inherit;border-bottom:1px dotted black;`;
 const EditableCell = ({ onClick, children, ...otherProps }) => (React__default.createElement(Cell, { ...otherProps },
-    React__default.createElement(CellButton, { onClick: onClick },
-        React__default.createElement(Content, null, children))));
+    React__default.createElement("button", { type: "button", className: styles.cellButton, onClick: onClick },
+        React__default.createElement("div", { className: styles.editableContent }, children))));
 
 export { EditableCell };
 //# sourceMappingURL=EditableCell.js.map

package/dist/components/LegacyDataTable/cells/EditableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { CellButton } from './styled';\nimport { Cell, CellProps } from '../styled';\n\nconst Content = styled.div`\n  text-align: inherit;\n  border-bottom: 1px dotted black;\n`;\n\nexport interface EditableCellProps extends CellProps {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <CellButton onClick={onClick}>\n      <Content>{children}</Content>\n    </CellButton>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,6HAGzB;MAOY,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;AAClB,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA;AAC1B,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA,EAAE,QAAQ,CAAW,CAClB,CACR;;;;"}
+{"version":3,"file":"EditableCell.js","sources":["../../../../src/components/LegacyDataTable/cells/EditableCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell, CellProps } from '../styled';\nimport styles from './cells.module.scss';\n\nexport interface EditableCellProps extends Omit<CellProps, 'onClick'> {\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  children: React.ReactNode;\n}\n\nexport const EditableCell = ({ onClick, children, ...otherProps }: EditableCellProps) => (\n  <Cell {...otherProps}>\n    <button type=\"button\" className={styles.cellButton} onClick={onClick}>\n      <div className={styles.editableContent}>{children}</div>\n    </button>\n  </Cell>\n);\n"],"names":["React"],"mappings":";;;;MASa,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,MAClFA,cAAA,CAAA,aAAA,CAAC,IAAI,OAAK,UAAU,EAAA;AAClB,IAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAE,OAAO,EAAA;QAClEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA,EAAG,QAAQ,CAAO,CACjD,CACJ;;;;"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._cellButton_1h2ut_1 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + 1.5rem);\n  margin: -0.75rem;\n  padding: 0.75rem;\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n}\n._cellButton_1h2ut_1:hover {\n  cursor: pointer;\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._clickableButton_1h2ut_20 {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n._editableContent_1h2ut_25 {\n  text-align: inherit;\n  border-bottom: 1px dotted var(--colors-neutral-ink-base);\n}");
+var styles = {"cellButton":"_cellButton_1h2ut_1","clickableButton":"_clickableButton_1h2ut_20","editableContent":"_editableContent_1h2ut_25"};
+
+module.exports = styles;
+//# sourceMappingURL=cells.module.scss.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cells.module.scss.cjs","sources":["../../../../src/components/LegacyDataTable/cells/cells.module.scss"],"sourcesContent":[".cellButton {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + 1.5rem);\n  margin: -0.75rem;\n  padding: 0.75rem;\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n\n  &:hover {\n    cursor: pointer;\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.clickableButton {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n.editableContent {\n  text-align: inherit;\n  border-bottom: 1px dotted var(--colors-neutral-ink-base);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qrBAAA;AACA,aAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,2BAAA;;;;"}

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../../_virtual/____insertStyle.js';
+
+insertStyle("._cellButton_1h2ut_1 {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + 1.5rem);\n  margin: -0.75rem;\n  padding: 0.75rem;\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n}\n._cellButton_1h2ut_1:hover {\n  cursor: pointer;\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._clickableButton_1h2ut_20 {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n._editableContent_1h2ut_25 {\n  text-align: inherit;\n  border-bottom: 1px dotted var(--colors-neutral-ink-base);\n}");
+var styles = {"cellButton":"_cellButton_1h2ut_1","clickableButton":"_clickableButton_1h2ut_20","editableContent":"_editableContent_1h2ut_25"};
+
+export { styles as default };
+//# sourceMappingURL=cells.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cells.module.scss.js","sources":["../../../../src/components/LegacyDataTable/cells/cells.module.scss"],"sourcesContent":[".cellButton {\n  appearance: none;\n  border: 0;\n  background-color: transparent;\n  font: inherit;\n\n  display: inline-block;\n  box-sizing: border-box;\n  width: calc(100% + 1.5rem);\n  margin: -0.75rem;\n  padding: 0.75rem;\n  text-align: inherit;\n  line-height: var(--sizes-base);\n  border-radius: var(--radius-base);\n\n  &:hover {\n    cursor: pointer;\n    background-color: var(--colors-secondary-blue-lightest);\n  }\n}\n\n.clickableButton {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n.editableContent {\n  text-align: inherit;\n  border-bottom: 1px dotted var(--colors-neutral-ink-base);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qrBAAA;AACA,aAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,2BAAA;;;;"}