@veeqo/ui 14.9.1 → 14.10.0-beta-1

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -4,7 +4,7 @@ import { Select } from '../Select/Select.js';
 import { DateInputField } from '../DateInputField/index.js';
 import { RangeCalendar } from '../Calendars/components/RangeCalendar/RangeCalendar.js';
 import '../Calendars/components/Calendar/styled.js';
-import '../Grid/index.js';
+import '../Grid/Grid.js';
 import '../Calendars/components/subcomponents/CalendarGrid/subCalendars/styled.js';
 import '@internationalized/date';
 import 'react-aria-components';

package/dist/components/Grid/Grid.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var buildClassnames = require('../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../utils/assignCssVars.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
+var Grid_module = require('./Grid.module.scss.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Grid = React__default.default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Grid_module.grid, className]), style: {
+        ...assignCssVars.assignCssVars({
+            gridColumns: columns,
+            gridSpacing: spacing ? sizes.sizes[spacing] : '0',
+        }),
+        ...style,
+    }, ...rest }, children)));
+Grid.displayName = 'Grid';
+
+exports.Grid = Grid;
+//# sourceMappingURL=Grid.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.cjs","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React","buildClassnames","styles","assignCssVars","sizes"],"mappings":";;;;;;;;;;;;;MAMa,IAAI,GAAGA,sBAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,8CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,WAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAGC,WAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GridProps } from './types';
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../utils/assignCssVars.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import styles from './Grid.module.scss.js';
+
+const Grid = React__default.forwardRef(({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.grid, className]), style: {
+        ...assignCssVars({
+            gridColumns: columns,
+            gridSpacing: spacing ? sizes[spacing] : '0',
+        }),
+        ...style,
+    }, ...rest }, children)));
+Grid.displayName = 'Grid';
+
+export { Grid };
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { sizes } from '../../theme/modules/sizes';\nimport { GridProps } from './types';\nimport styles from './Grid.module.scss';\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps & React.HTMLAttributes<HTMLDivElement>>(\n  ({ columns, spacing = 'base', className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.grid, className])}\n      style={{\n        ...assignCssVars({\n          gridColumns: columns,\n          gridSpacing: spacing ? sizes[spacing] : '0',\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nGrid.displayName = 'Grid';\n"],"names":["React"],"mappings":";;;;;;;MAMa,IAAI,GAAGA,cAAK,CAAC,UAAU,CAClC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACtEA,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EACpD,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC;AACf,YAAA,WAAW,EAAE,OAAO;AACpB,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG;SAC5C,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_14cvc_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_14cvc_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_14cvc_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_14cvc_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: 4px;\n}\n\n._wrapperShowScrollbar_14cvc_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: 4px;\n}\n\n/* TooltipContent */\n._tooltipContent_14cvc_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_14cvc_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_14cvc_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_14cvc_53._body_14cvc_53._body_14cvc_53 tr:hover td {\n  background-color: var(--colors-brand-blue-lightest); /* TODO: verify exact shade matches design */\n}\n\n._bodyBorderTop_14cvc_61 + ._bodyBorderTop_14cvc_61 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_14cvc_66 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: 1.5rem 1rem;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_14cvc_73 {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._row_14cvc_73.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_14cvc_80 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_14cvc_91 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_14cvc_91 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_14cvc_107 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_14cvc_112 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._headerCell_14cvc_112 > * {\n  vertical-align: middle;\n}\n._headerCell_14cvc_112 span {\n  white-space: pre-line;\n}\n._headerCell_14cvc_112.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_14cvc_137 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_14cvc_137 > * + * {\n  margin-left: 0.25rem;\n}\n\n/* Table */\n._table_14cvc_147 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_14cvc_147 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_14cvc_155 {\n  table-layout: fixed;\n}\n\n._tableLoading_14cvc_159 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_14cvc_164 ._body_14cvc_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_14cvc_168 ._headerCell_14cvc_112, ._tableNoWrap_14cvc_168 ._headerCell_14cvc_112 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_14cvc_173 ._cell_14cvc_91 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_14cvc_182 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_14cvc_3","wrapperScrollDisabled":"_wrapperScrollDisabled_14cvc_11","wrapperScrollEnabled":"_wrapperScrollEnabled_14cvc_15","wrapperBordered":"_wrapperBordered_14cvc_19","wrapperShowScrollbar":"_wrapperShowScrollbar_14cvc_24","tooltipContent":"_tooltipContent_14cvc_41","head":"_head_14cvc_48","body":"_body_14cvc_53","bodyBorderTop":"_bodyBorderTop_14cvc_61","row":"_row_14cvc_73","rowAccentColor":"_rowAccentColor_14cvc_80","cell":"_cell_14cvc_91","cellGrow":"_cellGrow_14cvc_107","headerCell":"_headerCell_14cvc_112","headerCellLayout":"_headerCellLayout_14cvc_137","table":"_table_14cvc_147","tableFixedLayout":"_tableFixedLayout_14cvc_155","tableLoading":"_tableLoading_14cvc_159","tableStriped":"_tableStriped_14cvc_164","tableNoWrap":"_tableNoWrap_14cvc_168","footer":"_footer_14cvc_173","stickyHeaderWrapper":"_stickyHeaderWrapper_14cvc_182"};
+
+module.exports = styles;
+//# sourceMappingURL=LegacyDataTable.module.scss.cjs.map

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

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

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

@@ -0,0 +1,7 @@
+import insertStyle from '../../_virtual/____insertStyle.js';
+
+insertStyle("/* LegacyDataTable sub-component styles */\n/* Wrapper */\n._wrapper_14cvc_3 {\n  width: 100%;\n  overflow-y: hidden;\n  position: relative;\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n}\n\n._wrapperScrollDisabled_14cvc_11 {\n  overflow-x: hidden;\n}\n\n._wrapperScrollEnabled_14cvc_15 {\n  overflow-x: auto;\n}\n\n._wrapperBordered_14cvc_19 {\n  border: 1px solid var(--colors-neutral-grey-dark);\n  border-radius: 4px;\n}\n\n._wrapperShowScrollbar_14cvc_24 {\n  scrollbar-width: auto;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar {\n  margin-top: 10px;\n  width: 6px;\n  height: 6px;\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-track {\n  background: var(--colors-system-scrollbar-background);\n}\n._wrapperShowScrollbar_14cvc_24::-webkit-scrollbar-thumb {\n  background: var(--colors-system-scrollbar-thumb);\n  border-radius: 4px;\n}\n\n/* TooltipContent */\n._tooltipContent_14cvc_41 {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n/* Head */\n._head_14cvc_48 {\n  background-color: white;\n}\n\n/* Body */\n._body_14cvc_53 tr:not(:first-child) > td {\n  border-top: 1px solid transparent;\n}\n\n._body_14cvc_53._body_14cvc_53._body_14cvc_53 tr:hover td {\n  background-color: var(--colors-brand-blue-lightest); /* TODO: verify exact shade matches design */\n}\n\n._bodyBorderTop_14cvc_61 + ._bodyBorderTop_14cvc_61 > tr:first-child > td {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n\n/* Foot */\n._foot_14cvc_66 td {\n  background-color: var(--colors-neutral-grey-lightest);\n  padding: 1.5rem 1rem;\n  border-top: 1px solid var(--colors-secondary-blue-base);\n}\n\n/* Row */\n._row_14cvc_73 {\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._row_14cvc_73.hidden {\n  visibility: collapse;\n}\n\n._rowAccentColor_14cvc_80 > td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  background-color: var(--row-accent-color);\n}\n\n/* Cell */\n._cell_14cvc_91 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  text-align: var(--cell-align, left);\n  background-color: white;\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  color: var(--text-body-small-color);\n  line-height: var(--sizes-base);\n  width: var(--cell-width, auto);\n}\n._cell_14cvc_91 > * {\n  vertical-align: middle;\n}\n\n._cellGrow_14cvc_107 {\n  width: 100%;\n}\n\n/* HeaderCell */\n._headerCell_14cvc_112 {\n  position: relative;\n  padding: 1.25rem 1rem;\n  background-color: white;\n  line-height: var(--sizes-base);\n  user-select: none;\n  border-bottom: 1px solid var(--colors-neutral-grey-dark);\n  font-family: var(--text-body-small-bold-font-family);\n  font-size: var(--text-body-small-bold-font-size);\n  font-weight: var(--text-body-small-bold-font-weight);\n  color: var(--text-body-small-bold-color);\n  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n}\n._headerCell_14cvc_112 > * {\n  vertical-align: middle;\n}\n._headerCell_14cvc_112 span {\n  white-space: pre-line;\n}\n._headerCell_14cvc_112.sortable:hover {\n  cursor: pointer;\n  background-color: var(--colors-neutral-grey-light);\n}\n\n/* HeaderCellLayout */\n._headerCellLayout_14cvc_137 {\n  display: flex;\n  align-items: center;\n  justify-content: var(--layout-align, flex-start);\n}\n._headerCellLayout_14cvc_137 > * + * {\n  margin-left: 0.25rem;\n}\n\n/* Table */\n._table_14cvc_147 {\n  width: 100%;\n  border-spacing: 0;\n}\n._table_14cvc_147 * {\n  box-sizing: border-box;\n}\n\n._tableFixedLayout_14cvc_155 {\n  table-layout: fixed;\n}\n\n._tableLoading_14cvc_159 * {\n  user-select: none;\n  pointer-events: none;\n}\n\n._tableStriped_14cvc_164 ._body_14cvc_53:nth-child(even) td {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n._tableNoWrap_14cvc_168 ._headerCell_14cvc_112, ._tableNoWrap_14cvc_168 ._headerCell_14cvc_112 span {\n  white-space: nowrap;\n}\n\n/* Footer */\n._footer_14cvc_173 ._cell_14cvc_91 {\n  border-top: 1px solid var(--colors-neutral-grey-dark);\n  background-color: var(--colors-neutral-grey-lightest);\n  padding-top: var(--sizes-base);\n  padding-bottom: var(--sizes-base);\n  line-height: 2rem;\n}\n\n/* StickyHeaderWrapper */\n._stickyHeaderWrapper_14cvc_182 {\n  position: fixed;\n  top: 0;\n  z-index: 2;\n  overflow-x: hidden;\n}");
+var styles = {"wrapper":"_wrapper_14cvc_3","wrapperScrollDisabled":"_wrapperScrollDisabled_14cvc_11","wrapperScrollEnabled":"_wrapperScrollEnabled_14cvc_15","wrapperBordered":"_wrapperBordered_14cvc_19","wrapperShowScrollbar":"_wrapperShowScrollbar_14cvc_24","tooltipContent":"_tooltipContent_14cvc_41","head":"_head_14cvc_48","body":"_body_14cvc_53","bodyBorderTop":"_bodyBorderTop_14cvc_61","row":"_row_14cvc_73","rowAccentColor":"_rowAccentColor_14cvc_80","cell":"_cell_14cvc_91","cellGrow":"_cellGrow_14cvc_107","headerCell":"_headerCell_14cvc_112","headerCellLayout":"_headerCellLayout_14cvc_137","table":"_table_14cvc_147","tableFixedLayout":"_tableFixedLayout_14cvc_155","tableLoading":"_tableLoading_14cvc_159","tableStriped":"_tableStriped_14cvc_164","tableNoWrap":"_tableNoWrap_14cvc_168","footer":"_footer_14cvc_173","stickyHeaderWrapper":"_stickyHeaderWrapper_14cvc_182"};
+
+export { styles as default };
+//# sourceMappingURL=LegacyDataTable.module.scss.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ___$insertStyle = require('../../../_virtual/____insertStyle.cjs');
+
+___$insertStyle("._wrapper_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;;;;"}