@veeqo/ui 14.10.1 → 14.10.3-beta-3

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

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

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

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

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

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

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

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

package/dist/components/DataTable/components/EmptyBodyContent.cjs

@@ -1,14 +1,22 @@
 '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 DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const EmptyBodyContent = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--grzgy2" }) `padding-top:${index.theme.sizes.lg};padding-bottom:${index.theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${index.theme.sizes.md};`;
-const EmptyBodyGlyphWrapper = styled__default.default.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--1uqall4" }) `padding:${index.theme.sizes.md};background-color:${index.theme.colors.neutral.grey.light};border-radius:${index.theme.radius.full};`;
+const EmptyBodyContent = React__default.default.forwardRef(({ columnCount, className, children, style, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.emptyBodyContent, className]), style: {
+        ...assignCssVars.assignCssVars({ columnSpan: columnCount }),
+        ...style,
+    }, ...rest }, children)));
+EmptyBodyContent.displayName = 'EmptyBodyContent';
+const EmptyBodyGlyphWrapper = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.emptyBodyGlyphWrapper, className]), ...rest }, children)));
+EmptyBodyGlyphWrapper.displayName = 'EmptyBodyGlyphWrapper';
 
 exports.EmptyBodyContent = EmptyBodyContent;
 exports.EmptyBodyGlyphWrapper = EmptyBodyGlyphWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAOO,MAAM,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzBC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gBAAA,EACXA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtDA,WAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAGD,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClCC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,kBAAA,EACLA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,eAAA,EAClCA,WAAK,CAAC,MAAM,CAAC,IAAI;;;;;"}
+{"version":3,"file":"EmptyBodyContent.cjs","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface EmptyBodyContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  columnCount: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const EmptyBodyContent = React.forwardRef<HTMLDivElement, EmptyBodyContentProps>(\n  ({ columnCount, className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.emptyBodyContent, className])}\n      style={{\n        ...assignCssVars({ columnSpan: columnCount }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nEmptyBodyContent.displayName = 'EmptyBodyContent';\n\nexport interface EmptyBodyGlyphWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const EmptyBodyGlyphWrapper = React.forwardRef<HTMLDivElement, EmptyBodyGlyphWrapperProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.emptyBodyGlyphWrapper, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nEmptyBodyGlyphWrapper.displayName = 'EmptyBodyGlyphWrapper';\n"],"names":["React","buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;;;;;;MAUa,gBAAgB,GAAGA,sBAAK,CAAC,UAAU,CAC9C,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACxDA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,EAChE,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAC7C,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;MAOpC,qBAAqB,GAAGH,sBAAK,CAAC,UAAU,CACnD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,8CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IAC3F,QAAQ,CACL,CACP;AAGH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;;"}

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

@@ -1,5 +1,12 @@
-export interface EmptyBodyContentProps {
+import React from 'react';
+export interface EmptyBodyContentProps extends React.HTMLAttributes<HTMLDivElement> {
     columnCount: number;
+    children?: React.ReactNode;
+    className?: string;
 }
-export declare const EmptyBodyContent: import("styled-components").StyledComponent<"div", any, EmptyBodyContentProps, never>;
-export declare const EmptyBodyGlyphWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EmptyBodyContent: React.ForwardRefExoticComponent<EmptyBodyContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface EmptyBodyGlyphWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const EmptyBodyGlyphWrapper: React.ForwardRefExoticComponent<EmptyBodyGlyphWrapperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/components/EmptyBodyContent.js

@@ -1,8 +1,16 @@
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
+import styles from './DataTable.module.scss.js';
 
-const EmptyBodyContent = styled.div.withConfig({ displayName: "vui--EmptyBodyContent", componentId: "vui--grzgy2" }) `padding-top:${theme.sizes.lg};padding-bottom:${theme.sizes.lg};grid-column:${({ columnCount }) => `1 / span ${columnCount}`};display:flex;flex-direction:column;align-items:center;justify-content:center;gap:${theme.sizes.md};`;
-const EmptyBodyGlyphWrapper = styled.div.withConfig({ displayName: "vui--EmptyBodyGlyphWrapper", componentId: "vui--1uqall4" }) `padding:${theme.sizes.md};background-color:${theme.colors.neutral.grey.light};border-radius:${theme.radius.full};`;
+const EmptyBodyContent = React__default.forwardRef(({ columnCount, className, children, style, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.emptyBodyContent, className]), style: {
+        ...assignCssVars({ columnSpan: columnCount }),
+        ...style,
+    }, ...rest }, children)));
+EmptyBodyContent.displayName = 'EmptyBodyContent';
+const EmptyBodyGlyphWrapper = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.emptyBodyGlyphWrapper, className]), ...rest }, children)));
+EmptyBodyGlyphWrapper.displayName = 'EmptyBodyGlyphWrapper';
 
 export { EmptyBodyContent, EmptyBodyGlyphWrapper };
 //# sourceMappingURL=EmptyBodyContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyBodyContent.js","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface EmptyBodyContentProps {\n  columnCount: number;\n}\n\nexport const EmptyBodyContent = styled.div<EmptyBodyContentProps>`\n  padding-top: ${theme.sizes.lg};\n  padding-bottom: ${theme.sizes.lg};\n  grid-column: ${({ columnCount }) => `1 / span ${columnCount}`};\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: ${theme.sizes.md};\n`;\n\nexport const EmptyBodyGlyphWrapper = styled.div`\n  padding: ${theme.sizes.md};\n  background-color: ${theme.colors.neutral.grey.light};\n  border-radius: ${theme.radius.full};\n`;\n"],"names":[],"mappings":";;;AAOO,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,YAAA,EACzB,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,gBAAA,EACX,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,aAAA,EACjB,CAAC,EAAE,WAAW,EAAE,KAAK,CAAA,SAAA,EAAY,WAAW,CAAA,CAAE,qFAKtD,KAAK,CAAC,KAAK,CAAC,EAAE;AAGhB,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,4BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,QAAA,EAClC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,kBAAA,EACL,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,eAAA,EAClC,KAAK,CAAC,MAAM,CAAC,IAAI;;;;"}
+{"version":3,"file":"EmptyBodyContent.js","sources":["../../../../src/components/DataTable/components/EmptyBodyContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface EmptyBodyContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  columnCount: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const EmptyBodyContent = React.forwardRef<HTMLDivElement, EmptyBodyContentProps>(\n  ({ columnCount, className, children, style, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.emptyBodyContent, className])}\n      style={{\n        ...assignCssVars({ columnSpan: columnCount }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n\nEmptyBodyContent.displayName = 'EmptyBodyContent';\n\nexport interface EmptyBodyGlyphWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const EmptyBodyGlyphWrapper = React.forwardRef<HTMLDivElement, EmptyBodyGlyphWrapperProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.emptyBodyGlyphWrapper, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nEmptyBodyGlyphWrapper.displayName = 'EmptyBodyGlyphWrapper';\n"],"names":["React"],"mappings":";;;;;;MAUa,gBAAgB,GAAGA,cAAK,CAAC,UAAU,CAC9C,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACxDA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,EAChE,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAC7C,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;AAGH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;MAOpC,qBAAqB,GAAGA,cAAK,CAAC,UAAU,CACnD,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,sCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IAC3F,QAAQ,CACL,CACP;AAGH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB;;;;"}

package/dist/components/DataTable/components/Header.cjs

@@ -1,18 +1,30 @@
 'use strict';
 
-var styled = require('styled-components');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var assignCssVars = require('../../../utils/assignCssVars.cjs');
 var index = require('../../../theme/index.cjs');
 var alignmentToFlex = require('../utils/alignmentToFlex.cjs');
 require('../types.cjs');
-require('react');
 require('../../../theme/modules/sizes.cjs');
 var constants = require('../constants.cjs');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Header = styled__default.default.th.withConfig({ displayName: "vui--Header", componentId: "vui--12e6ib8" }) `height:${constants.headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex.alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};padding-right:${({ spacing = constants.defaultCellSpacing }) => index.theme.sizes[spacing]};border-bottom:1px solid ${index.theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
+const Header = React__default.default.forwardRef(({ align = 'left', spacing = constants.defaultCellSpacing, span = 1, zIndex = 0, className, children, style, ...rest }, ref) => (React__default.default.createElement("th", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.header, className]), style: {
+        ...assignCssVars.assignCssVars({
+            cellAlign: alignmentToFlex.alignmentToFlex(align),
+            cellSpacing: index.theme.sizes[spacing],
+            cellSpan: span,
+            'header-z-index': zIndex,
+        }),
+        ...style,
+    }, ...rest }, children)));
+Header.displayName = 'Header';
 
 exports.Header = Header;
 //# sourceMappingURL=Header.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, headerCellHeight } from '../constants';\nimport { HeaderProps } from '../types';\n\nexport const Header = styled.th<HeaderProps>`\n  height: ${headerCellHeight};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n  z-index: ${({ zIndex = 0 }) => zIndex};\n\n  background-color: white;\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n`;\n"],"names":["styled","headerCellHeight","alignmentToFlex","defaultCellSpacing","theme"],"mappings":";;;;;;;;;;;;;;AAMO,MAAM,MAAM,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EACnBC,0BAAgB,sEAKP,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAKC,+BAAe,CAAC,KAAK,CAAC,CAAA,SAAA,EACtD,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,MAAM,CAAA,qCAAA,EAGrB,CAAC,EAAE,OAAO,GAAGC,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBACzD,CAAC,EAAE,OAAO,GAAGD,4BAAkB,EAAE,KAAKC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,yBAAA,EAChDA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iBAAA,EAEtC,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,QAAQ,IAAI,CAAA,CAAE;;;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../src/components/DataTable/components/Header.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { theme } from '../../../theme';\nimport { HeaderProps } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing } from '../constants';\nimport styles from './DataTable.module.scss';\n\nexport const Header = React.forwardRef<HTMLTableCellElement, HeaderProps>(\n  ({ align = 'left', spacing = defaultCellSpacing, span = 1, zIndex = 0, className, children, style, ...rest }, ref) => (\n    <th\n      ref={ref}\n      className={buildClassnames([styles.header, className])}\n      style={{\n        ...assignCssVars({\n          cellAlign: alignmentToFlex(align),\n          cellSpacing: theme.sizes[spacing],\n          cellSpan: span,\n          'header-z-index': zIndex,\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </th>\n  ),\n);\n\nHeader.displayName = 'Header';\n"],"names":["React","defaultCellSpacing","buildClassnames","styles","assignCssVars","alignmentToFlex","theme"],"mappings":";;;;;;;;;;;;;;;;;AAQO,MAAM,MAAM,GAAGA,sBAAK,CAAC,UAAU,CACpC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAGC,4BAAkB,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC/GD,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEE,+BAAe,CAAC,CAACC,gBAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC;AACf,YAAA,SAAS,EAAEC,+BAAe,CAAC,KAAK,CAAC;AACjC,YAAA,WAAW,EAAEC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,gBAAgB,EAAE,MAAM;SACzB,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACN,CACN;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

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

@@ -1,2 +1,3 @@
+import React from 'react';
 import { HeaderProps } from '../types';
-export declare const Header: import("styled-components").StyledComponent<"th", any, HeaderProps, never>;
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/DataTable/components/Header.js

@@ -1,12 +1,24 @@
-import styled from 'styled-components';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
 import { theme } from '../../../theme/index.js';
 import { alignmentToFlex } from '../utils/alignmentToFlex.js';
 import '../types.js';
-import 'react';
 import '../../../theme/modules/sizes.js';
-import { headerCellHeight, defaultCellSpacing } from '../constants.js';
+import { defaultCellSpacing } from '../constants.js';
+import styles from './DataTable.module.scss.js';
 
-const Header = styled.th.withConfig({ displayName: "vui--Header", componentId: "vui--12e6ib8" }) `height:${headerCellHeight};position:relative;display:flex;align-items:center;justify-content:${({ align = 'left' }) => alignmentToFlex(align)};z-index:${({ zIndex = 0 }) => zIndex};background-color:white;padding-left:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};padding-right:${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};border-bottom:1px solid ${theme.colors.neutral.grey.base};grid-column-end:${({ span = 1 }) => `span ${span}`};`;
+const Header = React__default.forwardRef(({ align = 'left', spacing = defaultCellSpacing, span = 1, zIndex = 0, className, children, style, ...rest }, ref) => (React__default.createElement("th", { ref: ref, className: buildClassnames([styles.header, className]), style: {
+        ...assignCssVars({
+            cellAlign: alignmentToFlex(align),
+            cellSpacing: theme.sizes[spacing],
+            cellSpan: span,
+            'header-z-index': zIndex,
+        }),
+        ...style,
+    }, ...rest }, children)));
+Header.displayName = 'Header';
 
 export { Header };
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/DataTable/components/Header.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing, headerCellHeight } from '../constants';\nimport { HeaderProps } from '../types';\n\nexport const Header = styled.th<HeaderProps>`\n  height: ${headerCellHeight};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ align = 'left' }) => alignmentToFlex(align)};\n  z-index: ${({ zIndex = 0 }) => zIndex};\n\n  background-color: white;\n  padding-left: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  padding-right: ${({ spacing = defaultCellSpacing }) => theme.sizes[spacing]};\n  border-bottom: 1px solid ${theme.colors.neutral.grey.base};\n\n  grid-column-end: ${({ span = 1 }) => `span ${span}`};\n`;\n"],"names":[],"mappings":";;;;;;;;AAMO,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EACnB,gBAAgB,sEAKP,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,eAAe,CAAC,KAAK,CAAC,CAAA,SAAA,EACtD,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,MAAM,CAAA,qCAAA,EAGrB,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,kBACzD,CAAC,EAAE,OAAO,GAAG,kBAAkB,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA,yBAAA,EAChD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,iBAAA,EAEtC,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,QAAQ,IAAI,CAAA,CAAE;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/DataTable/components/Header.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport { theme } from '../../../theme';\nimport { HeaderProps } from '../types';\nimport { alignmentToFlex } from '../utils';\nimport { defaultCellSpacing } from '../constants';\nimport styles from './DataTable.module.scss';\n\nexport const Header = React.forwardRef<HTMLTableCellElement, HeaderProps>(\n  ({ align = 'left', spacing = defaultCellSpacing, span = 1, zIndex = 0, className, children, style, ...rest }, ref) => (\n    <th\n      ref={ref}\n      className={buildClassnames([styles.header, className])}\n      style={{\n        ...assignCssVars({\n          cellAlign: alignmentToFlex(align),\n          cellSpacing: theme.sizes[spacing],\n          cellSpan: span,\n          'header-z-index': zIndex,\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </th>\n  ),\n);\n\nHeader.displayName = 'Header';\n"],"names":["React"],"mappings":";;;;;;;;;;;AAQO,MAAM,MAAM,GAAGA,cAAK,CAAC,UAAU,CACpC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,kBAAkB,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC/GA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EACtD,KAAK,EAAE;AACL,QAAA,GAAG,aAAa,CAAC;AACf,YAAA,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;AACjC,YAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,gBAAgB,EAAE,MAAM;SACzB,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACN,CACN;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/DataTable/components/LoadingCellContent.cjs

@@ -1,16 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
-var index = require('../../../theme/index.cjs');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/* Loading content shimmer animation */
-const shimmerLight = index.theme.colors.neutral.grey.base;
-const shimmerDark = index.theme.colors.neutral.grey.dark;
-const LoadingCellContent = styled__default.default.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${index.theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
+const LoadingCellContent = React__default.default.forwardRef(({ className, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.loadingCellContent, className]), ...rest })));
+LoadingCellContent.displayName = 'LoadingCellContent';
 
 exports.LoadingCellContent = LoadingCellContent;
 //# sourceMappingURL=LoadingCellContent.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingCellContent.cjs","sources":["../../../../src/components/DataTable/components/LoadingCellContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\n/* Loading content shimmer animation */\nconst shimmerLight = theme.colors.neutral.grey.base;\nconst shimmerDark = theme.colors.neutral.grey.dark;\n\nexport const LoadingCellContent = styled.div`\n  height: 20px;\n  width: 75%;\n  border-radius: ${theme.radius.base};\n\n  background: ${shimmerLight};\n  background-image: linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n\n  @keyframes placeholderShimmer {\n    0% {\n      background-position: -468px 0;\n    }\n\n    100% {\n      background-position: 468px 0;\n    }\n  }\n`;\n"],"names":["theme","styled"],"mappings":";;;;;;;;;AAGA;AACA,MAAM,YAAY,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AACnD,MAAM,WAAW,GAAGA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAE3C,MAAM,kBAAkB,GAAGC,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oCAAA,EAGzBD,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,YAAA,EAEpB,YAAY,CAAA,uDAAA,EAGtB,YAAY,CAAA,UAAA,EACZ,WAAW,cACX,YAAY,CAAA,WAAA,EACZ,YAAY,CAAA,8TAAA;;;;"}
+{"version":3,"file":"LoadingCellContent.cjs","sources":["../../../../src/components/DataTable/components/LoadingCellContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface LoadingCellContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nexport const LoadingCellContent = React.forwardRef<HTMLDivElement, LoadingCellContentProps>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.loadingCellContent, className])} {...rest} />\n  ),\n);\n\nLoadingCellContent.displayName = 'LoadingCellContent';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;AAQO,MAAM,kBAAkB,GAAGA,sBAAK,CAAC,UAAU,CAChD,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,8CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAChG;AAGH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

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

@@ -1 +1,5 @@
-export declare const LoadingCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+import React from 'react';
+export interface LoadingCellContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export declare const LoadingCellContent: React.ForwardRefExoticComponent<LoadingCellContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/components/LoadingCellContent.js

@@ -1,10 +1,10 @@
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './DataTable.module.scss.js';
 
-/* Loading content shimmer animation */
-const shimmerLight = theme.colors.neutral.grey.base;
-const shimmerDark = theme.colors.neutral.grey.dark;
-const LoadingCellContent = styled.div.withConfig({ displayName: "vui--LoadingCellContent", componentId: "vui--1mf4ayh" }) `height:20px;width:75%;border-radius:${theme.radius.base};background:${shimmerLight};background-image:linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );background-repeat:no-repeat;background-size:800px 104px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeholderShimmer;animation-timing-function:linear;@keyframes placeholderShimmer{0%{background-position:-468px 0;}100%{background-position:468px 0;}}`;
+const LoadingCellContent = React__default.forwardRef(({ className, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.loadingCellContent, className]), ...rest })));
+LoadingCellContent.displayName = 'LoadingCellContent';
 
 export { LoadingCellContent };
 //# sourceMappingURL=LoadingCellContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingCellContent.js","sources":["../../../../src/components/DataTable/components/LoadingCellContent.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\n/* Loading content shimmer animation */\nconst shimmerLight = theme.colors.neutral.grey.base;\nconst shimmerDark = theme.colors.neutral.grey.dark;\n\nexport const LoadingCellContent = styled.div`\n  height: 20px;\n  width: 75%;\n  border-radius: ${theme.radius.base};\n\n  background: ${shimmerLight};\n  background-image: linear-gradient(\n    to right,\n    ${shimmerLight} 0%,\n    ${shimmerDark} 20%,\n    ${shimmerLight} 40%,\n    ${shimmerLight} 100%\n  );\n  background-repeat: no-repeat;\n  background-size: 800px 104px;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: placeholderShimmer;\n  animation-timing-function: linear;\n\n  @keyframes placeholderShimmer {\n    0% {\n      background-position: -468px 0;\n    }\n\n    100% {\n      background-position: 468px 0;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;AAGA;AACA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AACnD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;AAE3C,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oCAAA,EAGzB,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,YAAA,EAEpB,YAAY,CAAA,uDAAA,EAGtB,YAAY,CAAA,UAAA,EACZ,WAAW,cACX,YAAY,CAAA,WAAA,EACZ,YAAY,CAAA,8TAAA;;;;"}
+{"version":3,"file":"LoadingCellContent.js","sources":["../../../../src/components/DataTable/components/LoadingCellContent.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface LoadingCellContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nexport const LoadingCellContent = React.forwardRef<HTMLDivElement, LoadingCellContentProps>(\n  ({ className, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.loadingCellContent, className])} {...rest} />\n  ),\n);\n\nLoadingCellContent.displayName = 'LoadingCellContent';\n"],"names":["React"],"mappings":";;;;;AAQO,MAAM,kBAAkB,GAAGA,cAAK,CAAC,UAAU,CAChD,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC1BA,sCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,CAAI,CAChG;AAGH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}

package/dist/components/DataTable/components/NoWrap.cjs

@@ -1,12 +1,16 @@
 'use strict';
 
-var styled = require('styled-components');
+var React = require('react');
+var buildClassnames = require('../../../utils/buildClassnames.cjs');
+require('uid/secure');
+var DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const NoWrap = styled__default.default.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--208yv4" }) `white-space:nowrap;`;
+const NoWrap = React__default.default.forwardRef(({ className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([DataTable_module.noWrap, className]), ...rest }, children)));
+NoWrap.displayName = 'NoWrap';
 
 exports.NoWrap = NoWrap;
 //# sourceMappingURL=NoWrap.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NoWrap.cjs","sources":["../../../../src/components/DataTable/components/NoWrap.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const NoWrap = styled.div`\n  white-space: nowrap;\n`;\n"],"names":["styled"],"mappings":";;;;;;;;MAEa,MAAM,GAAGA,uBAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"NoWrap.cjs","sources":["../../../../src/components/DataTable/components/NoWrap.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface NoWrapProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const NoWrap = React.forwardRef<HTMLDivElement, NoWrapProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.noWrap, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nNoWrap.displayName = 'NoWrap';\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;MASa,MAAM,GAAGA,sBAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,8CAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAEC,+BAAe,CAAC,CAACC,gBAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IAC5E,QAAQ,CACL,CACP;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

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

@@ -1 +1,6 @@
-export declare const NoWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+import React from 'react';
+export interface NoWrapProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const NoWrap: React.ForwardRefExoticComponent<NoWrapProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataTable/components/NoWrap.js

@@ -1,6 +1,10 @@
-import styled from 'styled-components';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import styles from './DataTable.module.scss.js';
 
-const NoWrap = styled.div.withConfig({ displayName: "vui--NoWrap", componentId: "vui--208yv4" }) `white-space:nowrap;`;
+const NoWrap = React__default.forwardRef(({ className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.noWrap, className]), ...rest }, children)));
+NoWrap.displayName = 'NoWrap';
 
 export { NoWrap };
 //# sourceMappingURL=NoWrap.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NoWrap.js","sources":["../../../../src/components/DataTable/components/NoWrap.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const NoWrap = styled.div`\n  white-space: nowrap;\n`;\n"],"names":[],"mappings":";;MAEa,MAAM,GAAG,MAAM,CAAC,GAAG;;;;"}
+{"version":3,"file":"NoWrap.js","sources":["../../../../src/components/DataTable/components/NoWrap.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface NoWrapProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const NoWrap = React.forwardRef<HTMLDivElement, NoWrapProps>(\n  ({ className, children, ...rest }, ref) => (\n    <div ref={ref} className={buildClassnames([styles.noWrap, className])} {...rest}>\n      {children}\n    </div>\n  ),\n);\n\nNoWrap.displayName = 'NoWrap';\n"],"names":["React"],"mappings":";;;;;MASa,MAAM,GAAGA,cAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MACpCA,sCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,IAC5E,QAAQ,CACL,CACP;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/DataTable/components/Row.cjs

@@ -1,33 +1,30 @@
 '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 DataTable_module = require('./DataTable.module.scss.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Row = styled__default.default.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
-    `
-    &&&& > td {
-      background-color: ${index.theme.colors.brand.blue.lightest};
-    }
-  `};${({ accentColor }) => accentColor &&
-    `
-    &> *:first-child {
-      position: relative;
-    }
-
-    & > *:first-child::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 4px;
-      background-color: ${accentColor};
-    }
-  `}`;
+const Row = React__default.default.forwardRef(
+// expanded and disabled are destructured to prevent them leaking to the DOM via ...rest.
+// They are used by parent components for state tracking.
+({ accentColor, selected, expanded: _expanded, disabled: _disabled, className, children, style, ...rest }, ref) => (React__default.default.createElement("tr", { ref: ref, className: buildClassnames.buildClassnames([
+        DataTable_module.row,
+        selected && DataTable_module.rowSelected,
+        accentColor && DataTable_module.rowAccentColor,
+        className,
+    ]), style: {
+        ...assignCssVars.assignCssVars({
+            rowAccentColor: accentColor,
+        }),
+        ...style,
+    }, ...rest }, children)));
+Row.displayName = 'Row';
 
 exports.Row = Row;
 //# sourceMappingURL=Row.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Row.cjs","sources":["../../../../src/components/DataTable/components/Row.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\n\nexport interface RowProps {\n  accentColor?: string;\n  selected?: boolean;\n  expanded?: boolean;\n  disabled?: boolean;\n}\n\nexport const Row = styled.tr<RowProps>`\n  display: contents;\n\n  ${({ selected }) =>\n    selected &&\n    `\n    &&&& > td {\n      background-color: ${theme.colors.brand.blue.lightest};\n    }\n  `};\n\n  ${({ accentColor }) =>\n    accentColor &&\n    `\n    &> *:first-child {\n      position: relative;\n    }\n\n    & > *:first-child::before {\n      content: \"\";\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      width: 4px;\n      background-color: ${accentColor};\n    }\n  `}\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAUO,MAAM,GAAG,GAAGA,uBAAM,CAAC,EAAE,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAGxB,CAAC,EAAE,QAAQ,EAAE,KACb,QAAQ;AACR,IAAA;;AAEsB,wBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAA;;AAEvD,EAAA,CAAA,CAAA,CAAA,EAEC,CAAC,EAAE,WAAW,EAAE,KAChB,WAAW;AACX,IAAA;;;;;;;;;;;;0BAYsB,WAAW,CAAA;;AAElC,EAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"Row.cjs","sources":["../../../../src/components/DataTable/components/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { buildClassnames, assignCssVars } from '../../../utils';\nimport styles from './DataTable.module.scss';\n\nexport interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  accentColor?: string;\n  selected?: boolean;\n  expanded?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const Row = React.forwardRef<HTMLTableRowElement, RowProps>(\n  // expanded and disabled are destructured to prevent them leaking to the DOM via ...rest.\n  // They are used by parent components for state tracking.\n  ({ accentColor, selected, expanded: _expanded, disabled: _disabled, className, children, style, ...rest }, ref) => (\n    <tr\n      ref={ref}\n      className={buildClassnames([\n        styles.row,\n        selected && styles.rowSelected,\n        accentColor && styles.rowAccentColor,\n        className,\n      ])}\n      style={{\n        ...assignCssVars({\n          rowAccentColor: accentColor,\n        }),\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </tr>\n  ),\n);\n\nRow.displayName = 'Row';\n"],"names":["React","buildClassnames","styles","assignCssVars"],"mappings":";;;;;;;;;;;;AAaO,MAAM,GAAG,GAAGA,sBAAK,CAAC,UAAU;AACjC;AACA;AACA,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAC5GA,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC;AACzB,QAAAC,gBAAM,CAAC,GAAG;QACV,QAAQ,IAAIA,gBAAM,CAAC,WAAW;QAC9B,WAAW,IAAIA,gBAAM,CAAC,cAAc;QACpC,SAAS;KACV,CAAC,EACF,KAAK,EAAE;AACL,QAAA,GAAGC,2BAAa,CAAC;AACf,YAAA,cAAc,EAAE,WAAW;SAC5B,CAAC;AACF,QAAA,GAAG,KAAK;AACT,KAAA,EAAA,GACG,IAAI,EAAA,EAEP,QAAQ,CACN,CACN;AAGH,GAAG,CAAC,WAAW,GAAG,KAAK;;;;"}

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

@@ -1,7 +1,10 @@
-export interface RowProps {
+import React from 'react';
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     accentColor?: string;
     selected?: boolean;
     expanded?: boolean;
     disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
 }
-export declare const Row: import("styled-components").StyledComponent<"tr", any, RowProps, never>;
+export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>>;

package/dist/components/DataTable/components/Row.js

@@ -1,27 +1,24 @@
-import styled from 'styled-components';
-import { theme } from '../../../theme/index.js';
+import React__default from 'react';
+import { buildClassnames } from '../../../utils/buildClassnames.js';
+import 'uid/secure';
+import { assignCssVars } from '../../../utils/assignCssVars.js';
+import styles from './DataTable.module.scss.js';
 
-const Row = styled.tr.withConfig({ displayName: "vui--Row", componentId: "vui--ryxbs1" }) `display:contents;${({ selected }) => selected &&
-    `
-    &&&& > td {
-      background-color: ${theme.colors.brand.blue.lightest};
-    }
-  `};${({ accentColor }) => accentColor &&
-    `
-    &> *:first-child {
-      position: relative;
-    }
-
-    & > *:first-child::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 4px;
-      background-color: ${accentColor};
-    }
-  `}`;
+const Row = React__default.forwardRef(
+// expanded and disabled are destructured to prevent them leaking to the DOM via ...rest.
+// They are used by parent components for state tracking.
+({ accentColor, selected, expanded: _expanded, disabled: _disabled, className, children, style, ...rest }, ref) => (React__default.createElement("tr", { ref: ref, className: buildClassnames([
+        styles.row,
+        selected && styles.rowSelected,
+        accentColor && styles.rowAccentColor,
+        className,
+    ]), style: {
+        ...assignCssVars({
+            rowAccentColor: accentColor,
+        }),
+        ...style,
+    }, ...rest }, children)));
+Row.displayName = 'Row';
 
 export { Row };
 //# sourceMappingURL=Row.js.map