@veeqo/ui 14.9.1 → 14.10.0-beta-2

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_gl2ug_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_gl2ug_1:hover {\n  cursor: pointer;\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._clickableButton_gl2ug_20 {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n._editableContent_gl2ug_25 {\n  text-align: inherit;\n  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}");
+var styles = {"cellButton":"_cellButton_gl2ug_1","clickableButton":"_clickableButton_gl2ug_20","editableContent":"_editableContent_gl2ug_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  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8sBAAA;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_gl2ug_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_gl2ug_1:hover {\n  cursor: pointer;\n  background-color: var(--colors-secondary-blue-lightest);\n}\n\n._clickableButton_gl2ug_20 {\n  color: var(--text-link-color);\n  text-decoration: var(--text-link-text-decoration);\n}\n\n._editableContent_gl2ug_25 {\n  text-align: inherit;\n  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}");
+var styles = {"cellButton":"_cellButton_gl2ug_1","clickableButton":"_clickableButton_gl2ug_20","editableContent":"_editableContent_gl2ug_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  /* No 1:1 theme token exists for this shade */\n  border-bottom: 1px dotted black;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8sBAAA;AACA,aAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,iBAAA,CAAA,2BAAA;;;;"}

package/dist/components/LegacyDataTable/styled.cjs

@@ -1,122 +1,139 @@
 'use strict';
 
-var styled = require('styled-components');
-var index = require('../../theme/index.cjs');
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var LegacyDataTable_module = require('./LegacyDataTable.module.scss.cjs');
 var constants = require('./utils/constants.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const { text, sizes } = index.theme;
-const { blue } = index.theme.colors.secondary;
-const { grey } = index.theme.colors.neutral;
-const { scrollbar } = index.theme.colors.system;
-const fixedColumnShadow = `
-  position: absolute;
-  top: 0;
-  bottom: -1px;
-  width: 30px;
-  content: "";
-  pointer-events: none;
-  box-sizing: border-box;
-  transition: box-shadow .3s;
-`;
-const startFixedColumnShadow = `
-  box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);
-`;
-const endFixedColumnShadow = `
-  box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);
-`;
-const TooltipContent = styled__default.default.div.withConfig({ displayName: "vui--TooltipContent", componentId: "vui--11ytygc" }) `display:flex;flex-direction:row;align-items:center;`;
-const Wrapper = styled__default.default.div.withConfig({ displayName: "vui--Wrapper", componentId: "vui--1g4i0cu" }) `width:100%;overflow-x:${(props) => (props.scrollDisabled ? 'hidden' : 'auto')};overflow-y:hidden;position:relative;border-top:1px solid ${grey.dark};border-bottom:1px solid ${grey.dark};${({ showScrollbar }) => showScrollbar
-    ? `
-    scrollbar-width: auto;
-
-    &::-webkit-scrollbar {
-      margin-top: 10px;
-      width: 6px;
-      height: 6px;
-    }
-    
-    &::-webkit-scrollbar-track {
-      background: ${scrollbar.background}; 
+/* --- Instance ID for scoped styles --- */
+let legacyTableIdCounter = 0;
+function useLegacyTableId() {
+    const idRef = React.useRef(null);
+    if (idRef.current === null) {
+        legacyTableIdCounter += 1;
+        idRef.current = `ldt-${legacyTableIdCounter}`;
     }
-    
-    &::-webkit-scrollbar-thumb {
-      background: ${scrollbar.thumb};
-      border-radius: 4px; 
+    return idRef.current;
+}
+const TableIdContext = React.createContext('');
+function getScopedShadowRules({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, }) {
+    if (scrollDisabled)
+        return [];
+    if (!lastStartFixedColumnsIndex && !firstEndFixedColumnsIndex)
+        return [];
+    const fixedColumnShadow = 'position: absolute; top: 0; bottom: -1px; width: 30px; content: ""; pointer-events: none; box-sizing: border-box; transition: box-shadow .3s;';
+    const startShadowVisible = scrollPosition === constants.ScrollPosition.middle || scrollPosition === constants.ScrollPosition.end;
+    const endShadowVisible = scrollPosition === constants.ScrollPosition.start || scrollPosition === constants.ScrollPosition.middle;
+    const startShadow = startShadowVisible
+        ? 'box-shadow: inset 10px 0 10px -8px rgb(0 0 0 / 25%);'
+        : '';
+    const endShadow = endShadowVisible
+        ? 'box-shadow: inset -10px 0 10px -8px rgb(0 0 0 / 25%);'
+        : '';
+    const rules = [];
+    if (lastStartFixedColumnsIndex) {
+        rules.push(`td:nth-child(${lastStartFixedColumnsIndex}):after, th:nth-child(${lastStartFixedColumnsIndex}):after { right: 0; transform: translate(100%); ${fixedColumnShadow} ${startShadow} }`);
     }
-    `
-    : ''} ${({ scrollDisabled, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, scrollPosition }) => scrollDisabled
-    ? ''
-    : `
-    td:nth-child(${lastStartFixedColumnsIndex}):after,
-    th:nth-child(${lastStartFixedColumnsIndex}):after {
-      right: 0;
-      transform: translate(100%);
-      ${fixedColumnShadow};
-
-      ${scrollPosition === constants.ScrollPosition.middle || scrollPosition === constants.ScrollPosition.end
-        ? startFixedColumnShadow
-        : ''};
-    };
-
-    td:nth-last-child(${firstEndFixedColumnsIndex}):after,
-    th:nth-last-child(${firstEndFixedColumnsIndex}):after {
-      left: 0;
-      transform: translate(-100%);
-      ${fixedColumnShadow};
-
-      ${scrollPosition === constants.ScrollPosition.start || scrollPosition === constants.ScrollPosition.middle
-        ? endFixedColumnShadow
-        : ''};
-    };
-  `}`;
-const WrapperBordered = styled__default.default(Wrapper).withConfig({ displayName: "vui--WrapperBordered", componentId: "vui--wtdkab" }) `border:1px solid ${grey.dark};border-radius:4px;`;
-const Head = styled__default.default.thead.withConfig({ displayName: "vui--Head", componentId: "vui--1j5avrf" }) `background-color:white;`;
-const Body = styled__default.default.tbody.withConfig({ displayName: "vui--Body", componentId: "vui--n8uysg" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& + & > tr:first-child > td{border-top:1px solid ${grey.base};}tr:not(:first-child)> td{border-top:1px solid transparent;}&&& tr:hover td{background-color:#ebf4fb;}`;
-styled__default.default.tfoot.withConfig({ displayName: "vui--Foot", componentId: "vui--qckqty" }) `& td{background-color:${grey.lightest};padding:1.5rem 1rem;border-top:1px solid ${blue.base};}`;
-const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--10drh9k" }) `&.hidden{visibility:collapse;}${({ accentColor }) => accentColor &&
-    `
-    & > td:first-child::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 4px;
-      background-color: ${accentColor};  
+    if (firstEndFixedColumnsIndex) {
+        rules.push(`td:nth-last-child(${firstEndFixedColumnsIndex}):after, th:nth-last-child(${firstEndFixedColumnsIndex}):after { left: 0; transform: translate(-100%); ${fixedColumnShadow} ${endShadow} }`);
     }
-  `}`;
-const Cell = styled__default.default.td.withConfig({ displayName: "vui--Cell", componentId: "vui--tljl4p" }) `position:relative;padding:1.25rem 1rem;text-align:${({ align }) => align || 'left'};background-color:white;font-family:${text.bodySmall.fontFamily};font-size:${text.bodySmall.fontSize};font-weight:${text.bodySmall.fontWeight};color:${text.bodySmall.color};line-height:${sizes.base};width:${({ grow }) => (grow ? '100%' : 'auto')};& > *{vertical-align:middle;}`;
-const HeaderCell = styled__default.default(Cell).attrs({
-    as: 'th',
-}).withConfig({ displayName: "vui--HeaderCell", componentId: "vui--10p2duv" }) `user-select:none;border-bottom:1px solid ${grey.dark};font-family:${text.bodySmallBold.fontFamily};font-size:${text.bodySmallBold.fontSize};font-weight:${text.bodySmallBold.fontWeight};color:${text.bodySmallBold.color};& span{white-space:pre-line;}&.sortable:hover{cursor:pointer;background-color:${grey.light};}`;
+    return rules;
+}
+const Wrapper = React__default.default.forwardRef(({ scrollDisabled, scrollPosition, lastStartFixedColumnsIndex, firstEndFixedColumnsIndex, showScrollbar, className, children, ...rest }, ref) => {
+    const tableId = useLegacyTableId();
+    const shadowRules = getScopedShadowRules({
+        scrollDisabled,
+        scrollPosition,
+        lastStartFixedColumnsIndex,
+        firstEndFixedColumnsIndex,
+    });
+    const scopeSelector = `[data-legacy-table-id="${tableId}"]`;
+    const scopedStyle = shadowRules.length > 0
+        ? shadowRules.map((rule) => {
+            const braceIndex = rule.indexOf('{');
+            if (braceIndex === -1)
+                return `${scopeSelector} ${rule}`;
+            const selectorPart = rule.slice(0, braceIndex).trim();
+            const bodyPart = rule.slice(braceIndex);
+            const scopedSelectors = selectorPart
+                .split(',')
+                .map((sel) => `${scopeSelector} ${sel.trim()}`)
+                .join(', ');
+            return `${scopedSelectors} ${bodyPart}`;
+        }).join('\n')
+        : '';
+    return (React__default.default.createElement("div", { ref: ref, "data-legacy-table-id": tableId, className: buildClassnames.buildClassnames([
+            LegacyDataTable_module.wrapper,
+            scrollDisabled ? LegacyDataTable_module.wrapperScrollDisabled : LegacyDataTable_module.wrapperScrollEnabled,
+            showScrollbar && LegacyDataTable_module.wrapperShowScrollbar,
+            className,
+        ]), ...rest },
+        scopedStyle && React__default.default.createElement("style", null, scopedStyle),
+        React__default.default.createElement(TableIdContext.Provider, { value: tableId }, children)));
+});
+Wrapper.displayName = 'Wrapper';
+const WrapperBordered = React__default.default.forwardRef((props, ref) => (React__default.default.createElement(Wrapper, { ref: ref, ...props, className: buildClassnames.buildClassnames([LegacyDataTable_module.wrapperBordered, props.className]) })));
+WrapperBordered.displayName = 'WrapperBordered';
+/* --- TooltipContent --- */
+const TooltipContent = ({ children, ...rest }) => (React__default.default.createElement("div", { className: LegacyDataTable_module.tooltipContent, ...rest }, children));
+/* --- Head --- */
+const Head = ({ children, ...rest }) => (React__default.default.createElement("thead", { className: LegacyDataTable_module.head, ...rest }, children));
+const Body = ({ fixedColumnsStyle, className, children, ...rest }) => {
+    const tableId = React.useContext(TableIdContext);
+    const shouldRenderStyle = fixedColumnsStyle && tableId;
+    return (React__default.default.createElement("tbody", { className: buildClassnames.buildClassnames([LegacyDataTable_module.body, LegacyDataTable_module.bodyBorderTop, className]), ...rest },
+        shouldRenderStyle && React__default.default.createElement("style", null, `[data-legacy-table-id="${tableId}"] .${LegacyDataTable_module.body} tr { ${fixedColumnsStyle} }`),
+        children));
+};
+const Row = ({ accentColor, className, children, style, ...rest }) => (React__default.default.createElement("tr", { className: buildClassnames.buildClassnames([LegacyDataTable_module.row, accentColor && LegacyDataTable_module.rowAccentColor, className]), style: {
+        ...assignCssVars.assignCssVars({ rowAccentColor: accentColor }),
+        ...style,
+    }, ...rest }, children));
+const Cell = ({ align, grow, className, children, style, ...rest }) => (React__default.default.createElement("td", { className: buildClassnames.buildClassnames([LegacyDataTable_module.cell, grow && LegacyDataTable_module.cellGrow, className]), style: {
+        ...assignCssVars.assignCssVars({ cellAlign: align }),
+        ...style,
+    }, ...rest }, children));
+const HeaderCell = ({ align, grow, className, children, style, ...rest }) => (React__default.default.createElement("th", { className: buildClassnames.buildClassnames([LegacyDataTable_module.headerCell, grow && LegacyDataTable_module.cellGrow, className]), style: {
+        ...assignCssVars.assignCssVars({ cellAlign: align }),
+        ...style,
+    }, ...rest }, children));
+/* --- HeaderCellLayout --- */
 const alignmentMap = {
     left: 'flex-start',
     center: 'center',
     right: 'flex-end',
 };
-const HeaderCellLayout = styled__default.default.div.withConfig({ displayName: "vui--HeaderCellLayout", componentId: "vui--13i0t50" }) `display:flex;align-items:center;justify-content:${({ align }) => (align ? alignmentMap[align] : 'flex-start')};& > * + *{margin-left:0.25rem;}`;
-const Table = styled__default.default.table.withConfig({ displayName: "vui--Table", componentId: "vui--1bp83gy" }) `width:100%;border-spacing:0;table-layout:${({ isFixedLayout }) => (isFixedLayout ? 'fixed' : 'auto')};${({ striped }) => striped &&
-    `
-    & ${Body}:nth-child(even) td {
-      background-color: ${grey.lightest};
-    }
-  `} & *{box-sizing:border-box;${({ tableLoading }) => tableLoading &&
-    `
-      user-select: none;
-      pointer-events: none;
-    `}}${({ noWrap }) => noWrap &&
-    `
-    & ${HeaderCell}, & ${HeaderCell} span {
-      white-space: nowrap;
-    }
-  `}`;
-const Footer = styled__default.default.tfoot.withConfig({ displayName: "vui--Footer", componentId: "vui--44p3gi" }) `tr{${({ fixedColumnsStyle }) => fixedColumnsStyle};}& ${Cell}{border-top:1px solid ${grey.dark};background-color:${grey.lightest};padding-top:${sizes.base};padding-bottom:${sizes.base};line-height:2rem;}`;
-const StickyHeaderWrapper = styled__default.default.div.withConfig({ displayName: "vui--StickyHeaderWrapper", componentId: "vui--wokb93" }) `position:fixed;top:0;z-index:2;overflow-x:hidden;`;
-const FakeHeaderTable = styled__default.default(Table).withConfig({ displayName: "vui--FakeHeaderTable", componentId: "vui--6s4d56" }) ``;
+const HeaderCellLayout = ({ align, className, children, style, ...rest }) => (React__default.default.createElement("div", { className: buildClassnames.buildClassnames([LegacyDataTable_module.headerCellLayout, className]), style: {
+        ...assignCssVars.assignCssVars({ layoutAlign: align ? alignmentMap[align] : undefined }),
+        ...style,
+    }, ...rest }, children));
+const Table = React__default.default.forwardRef(({ striped, noWrap, tableLoading, isFixedLayout, className, children, ...rest }, ref) => (React__default.default.createElement("table", { ref: ref, className: buildClassnames.buildClassnames([
+        LegacyDataTable_module.table,
+        isFixedLayout && LegacyDataTable_module.tableFixedLayout,
+        tableLoading && LegacyDataTable_module.tableLoading,
+        striped && LegacyDataTable_module.tableStriped,
+        noWrap && LegacyDataTable_module.tableNoWrap,
+        className,
+    ]), ...rest }, children)));
+Table.displayName = 'Table';
+const Footer = ({ fixedColumnsStyle, className, children, ...rest }) => {
+    const tableId = React.useContext(TableIdContext);
+    const shouldRenderStyle = fixedColumnsStyle && tableId;
+    return (React__default.default.createElement("tfoot", { className: buildClassnames.buildClassnames([LegacyDataTable_module.footer, className]), ...rest },
+        shouldRenderStyle && React__default.default.createElement("style", null, `[data-legacy-table-id="${tableId}"] .${LegacyDataTable_module.footer} tr { ${fixedColumnsStyle} }`),
+        children));
+};
+/* --- StickyHeaderWrapper --- */
+const StickyHeaderWrapper = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([LegacyDataTable_module.stickyHeaderWrapper, className]), ...rest }, children)));
+StickyHeaderWrapper.displayName = 'StickyHeaderWrapper';
+/* --- FakeHeaderTable (same as Table) --- */
+const FakeHeaderTable = Table;
 
 exports.Body = Body;
 exports.Cell = Cell;