@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.17

package/dist/Table/TableStyles.cjs

@@ -23,7 +23,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
  * Table styles
  */
 
-var TableWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
+var TableWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
 exports.TableWrapper = TableWrapper;
 var StyledTable = _styledComponents["default"].table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
 exports.StyledTable = StyledTable;
@@ -31,21 +35,55 @@ var StyledTableHeader = _styledComponents["default"].div(_templateObject3 || (_t
 exports.StyledTableHeader = StyledTableHeader;
 var StyledTableHeaderTitle = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n"])));
 exports.StyledTableHeaderTitle = StyledTableHeaderTitle;
-var StyledTableHeaderTitleContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200, (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.black));
+var StyledTableHeaderTitleContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme));
+});
 exports.StyledTableHeaderTitleContent = StyledTableHeaderTitleContent;
 var StyledTableHeaderRow = _styledComponents["default"].thead(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n"])));
 exports.StyledTableHeaderRow = StyledTableHeaderRow;
 var StyledTableHeaderColumns = _styledComponents["default"].tr(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n"])));
 exports.StyledTableHeaderColumns = StyledTableHeaderColumns;
-var StyledTableHeaderColumnContent = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
+var StyledTableHeaderColumnContent = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
 exports.StyledTableHeaderColumnContent = StyledTableHeaderColumnContent;
 var StyledTableHeaderColumnSortDirection = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 24px;\n  height: 24px;\n"])));
 exports.StyledTableHeaderColumnSortDirection = StyledTableHeaderColumnSortDirection;
-var StyledTableHeaderColumn = _styledComponents["default"].th(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
+var StyledTableHeaderColumn = _styledComponents["default"].th(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, _zIndexes.Z_INDEXES.hover, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, function (props) {
+  return _styles.COLORS.getColor('neutral_20', props.theme);
+});
 exports.StyledTableHeaderColumn = StyledTableHeaderColumn;
-var StyledTableBodyRow = _styledComponents["default"].tr(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.primary_100, _styles.COLORS.primary_100, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _zIndexes.Z_INDEXES.active);
+var StyledTableBodyRow = _styledComponents["default"].tr(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _zIndexes.Z_INDEXES.active);
 exports.StyledTableBodyRow = StyledTableBodyRow;
-var StyledTableNoRowsLabelRow = _styledComponents["default"].tr(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), _styles.COLORS.neutral_50);
+var StyledTableNoRowsLabelRow = _styledComponents["default"].tr(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_50', props.theme);
+});
 exports.StyledTableNoRowsLabelRow = StyledTableNoRowsLabelRow;
 var StyledTableBody = _styledComponents["default"].tbody(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n"])));
 exports.StyledTableBody = StyledTableBody;
@@ -53,9 +91,15 @@ var StyledTableCell = _styledComponents["default"].td(_templateObject14 || (_tem
 exports.StyledTableCell = StyledTableCell;
 var StyledTableCellContent = _styledComponents["default"].div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: ", ";\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), function (props) {
   return props.withNote ? '64px' : '48px';
-}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _Checkbox.StyledCheckBox);
+}, function (props) {
+  return (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, _Checkbox.StyledCheckBox);
 exports.StyledTableCellContent = StyledTableCellContent;
-var StyledTableCellIcon = _styledComponents["default"].div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"])), _styles.COLORS.neutral_700, _styles.COLORS.neutral_700);
+var StyledTableCellIcon = _styledComponents["default"].div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_700', props.theme);
+});
 exports.StyledTableCellIcon = StyledTableCellIcon;
 var StyledTableCellText = _styledComponents["default"].span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n"])));
 exports.StyledTableCellText = StyledTableCellText;
@@ -63,13 +107,21 @@ var StyledTableCellTextWrapper = _styledComponents["default"].div(_templateObjec
   return !props.textWrap ? "\n  overflow: hidden;\n  text-overflow: ellipsis;\n  " : "";
 });
 exports.StyledTableCellTextWrapper = StyledTableCellTextWrapper;
-var StyledTableCellNoteText = _styledComponents["default"].span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  display: inline-block;\n  width: 100%;\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
+var StyledTableCellNoteText = _styledComponents["default"].span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  display: inline-block;\n  width: 100%;\n"])), function (props) {
+  return (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme));
+});
 exports.StyledTableCellNoteText = StyledTableCellNoteText;
 var StyledTableFooter = _styledComponents["default"].div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["\n"])));
 exports.StyledTableFooter = StyledTableFooter;
-var StyledTableFooterContent = _styledComponents["default"].div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
+var StyledTableFooterContent = _styledComponents["default"].div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+});
 exports.StyledTableFooterContent = StyledTableFooterContent;
-var StyledTableFooterCurrentInfo = _styledComponents["default"].span(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0 16px;\n  ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
+var StyledTableFooterCurrentInfo = _styledComponents["default"].span(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0 16px;\n  ", "\n"])), function (props) {
+  return (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+});
 exports.StyledTableFooterCurrentInfo = StyledTableFooterCurrentInfo;
 var StyledTableFooterControls = _styledComponents["default"].div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
 exports.StyledTableFooterControls = StyledTableFooterControls;
@@ -78,7 +130,23 @@ var StyledTableSpinner = _styledComponents["default"].div(_templateObject24 || (
   return (_props$zindex = props.zindex) !== null && _props$zindex !== void 0 ? _props$zindex : _zIndexes.Z_INDEXES.loader;
 });
 exports.StyledTableSpinner = StyledTableSpinner;
-var StyledTableFooterCollapseButton = _styledComponents["default"].button(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200, _styles.COLORS.white, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.focusStyles, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
+var StyledTableFooterCollapseButton = _styledComponents["default"].button(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme));
+}, _styles.focusStyles, _zIndexes.Z_INDEXES.hover, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, _zIndexes.Z_INDEXES.active, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+});
 exports.StyledTableFooterCollapseButton = StyledTableFooterCollapseButton;
 var StyledTableBodyWrapper = _styledComponents["default"].div(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
 exports.StyledTableBodyWrapper = StyledTableBodyWrapper;

package/dist/Table/TableStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableStyles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_typography","_zIndexes","_Checkbox","_types","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_templateObject19","_templateObject20","_templateObject21","_templateObject22","_templateObject23","_templateObject24","_templateObject25","_templateObject26","TableWrapper","styled","div","_taggedTemplateLiteral2","COLORS","neutral_200","exports","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","ComponentLStyling","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","props","withNote","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableCellTextWrapper","textWrap","StyledTableCellNoteText","ComponentXSStyling","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","_props$zindex","zindex","loader","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {StyledCheckBox} from '../InputFields/Checkbox';\r\nimport {Size} from \"../types\";\r\n\r\n/**\r\n * Table styles\r\n */\r\n\r\nexport const TableWrapper = styled.div`\r\n  position: relative;\r\n\r\n  &.border{\r\n    border-left: 1px solid ${COLORS.neutral_200};\r\n    border-right: 1px solid ${COLORS.neutral_200};\r\n  }\r\n`;\r\n\r\n\r\nexport const StyledTable = styled.table`\r\n  background: transparent;\r\n  border-collapse: collapse;\r\n  width: 100%;\r\n\r\n  &.fixed {\r\n    table-layout: fixed;\r\n  }\r\n\r\n  &.auto {\r\n    table-layout: auto;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeader = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitle = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitleContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  border-top: 2px solid ${COLORS.neutral_200};\r\n  padding: 0 16px;\r\n\r\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\r\n  .title-menu {\r\n    margin-right: -16px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeaderRow = styled.thead`\r\n`;\r\n\r\nexport const StyledTableHeaderColumns = styled.tr`\r\n`;\r\n\r\nexport const StyledTableHeaderColumnContent = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  padding: 0 16px;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  border-top: 1px solid ${COLORS.neutral_200};\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n`;\r\n\r\nexport const StyledTableHeaderColumnSortDirection = styled.span`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const StyledTableHeaderColumn = styled.th`\r\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n  position: relative;\r\n  text-align: unset;\r\n  background-color: ${COLORS.white};\r\n\r\n  //fixes header heights no idea why\r\n  height: 1px;\r\n\r\n  &.sortable {\r\n    cursor: pointer;\r\n\r\n    &:hover {\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_700};\r\n      z-index: ${Z_INDEXES.hover};\r\n    }\r\n\r\n    &:active {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n      z-index: ${Z_INDEXES.active};\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.left {\r\n    & > div {\r\n      justify-content: left;\r\n    }\r\n  }\r\n\r\n  &.right {\r\n    & > div {\r\n      justify-content: right;\r\n    }\r\n  }\r\n\r\n  &.center {\r\n    & > div {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 0;\r\n  }\r\n\r\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 1;\r\n  }\r\n\r\n  &.sorted {\r\n    background-color: ${COLORS.neutral_20};\r\n  }\r\n`;\r\n\r\nexport const StyledTableBodyRow = styled.tr`\r\n  cursor: pointer;\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${COLORS.white};\r\n  \r\n  &:not(:last-child) {\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  &.selected{\r\n    background-color: ${COLORS.primary_100};\r\n  }\r\n  \r\n  &:hover {\r\n    background-color: ${COLORS.primary_100};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n`;\r\n\r\nexport const StyledTableNoRowsLabelRow = styled.tr`\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${COLORS.neutral_50};\r\n`;\r\n\r\nexport const StyledTableBody = styled.tbody`\r\n`;\r\n\r\n\r\nexport const StyledTableCell = styled.td``;\r\n\r\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\r\n  min-height: ${props => props.withNote ? '64px' : '48px'};\r\n\r\n  padding: 0 16px;\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: left;\r\n  gap: 8px;\r\n\r\n  &.truncate-text,\r\n  &.truncate-text span {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  &.left {\r\n    justify-content: left;\r\n  }\r\n\r\n  &.right {\r\n    justify-content: right;\r\n  }\r\n\r\n  &.center {\r\n    justify-content: center;\r\n  }\r\n\r\n  a:first-letter,\r\n  span:first-letter {\r\n    text-transform: uppercase;\r\n  }\r\n  \r\n  ${StyledCheckBox}{\r\n    width: fit-content;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellIcon = styled.div`\r\n  color: ${COLORS.neutral_700};\r\n  width: 20px;\r\n  height: 20px;\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_700};\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellText = styled.span`\r\n  display: block;\r\n`;\r\n\r\nexport const StyledTableCellTextWrapper = styled.div<{ textWrap?: boolean }>`\r\n  padding: 12px 0px;\r\n  width: 100%;\r\n  ${props => !props.textWrap ? `\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  ` : ``}\r\n`;\r\n\r\nexport const StyledTableCellNoteText = styled.span`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  display: inline-block;\r\n  width: 100%;\r\n`;\r\n\r\n\r\nexport const StyledTableFooter = styled.div`\r\n`;\r\n\r\nexport const StyledTableFooterContent = styled.div`\r\n  border-top: 2px solid ${COLORS.neutral_200};\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: right;\r\n\r\n`;\r\n\r\nexport const StyledTableFooterCurrentInfo = styled.span`\r\n  padding: 0 16px;\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n`;\r\n\r\nexport const StyledTableFooterControls = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\r\n  height: 100%;\r\n  width: 100%;\r\n  position: absolute;\r\n  background-color: rgba(255, 255, 255, 0.75);\r\n  top: 0;\r\n  z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\r\n`;\r\n\r\nexport const StyledTableFooterCollapseButton = styled.button`\r\n  position: relative;\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  border-top: 1px solid ${COLORS.neutral_200};\r\n  border-left: none;\r\n  border-right: none;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  background: ${COLORS.white};\r\n\r\n  cursor: pointer;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n  \r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &:disabled {\r\n    display: none;\r\n  }\r\n\r\n`;\r\n\r\n\r\nexport const StyledTableBodyWrapper = styled.div`\r\n  overflow-x: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n\r\n  ::-webkit-scrollbar-track {\r\n    margin: 6px;\r\n  }\r\n\r\n  &.scrollable{\r\n    margin-bottom: 6px;\r\n    padding-bottom: 10px;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TableStyles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_typography","_zIndexes","_Checkbox","_types","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_templateObject19","_templateObject20","_templateObject21","_templateObject22","_templateObject23","_templateObject24","_templateObject25","_templateObject26","TableWrapper","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","ComponentLStyling","ComponentTextStyle","Bold","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","Z_INDEXES","hover","active","focusStyles","StyledTableBodyRow","StyledTableNoRowsLabelRow","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","withNote","Regular","StyledCheckBox","StyledTableCellIcon","StyledTableCellText","StyledTableCellTextWrapper","textWrap","StyledTableCellNoteText","ComponentXSStyling","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","_props$zindex","zindex","loader","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {StyledCheckBox} from '../InputFields/Checkbox';\r\nimport {Size} from \"../types\";\r\n\r\n/**\r\n * Table styles\r\n */\r\n\r\nexport const TableWrapper = styled.div`\r\n  position: relative;\r\n\r\n  &.border{\r\n    border-left: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    border-right: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const StyledTable = styled.table`\r\n  background: transparent;\r\n  border-collapse: collapse;\r\n  width: 100%;\r\n\r\n  &.fixed {\r\n    table-layout: fixed;\r\n  }\r\n\r\n  &.auto {\r\n    table-layout: auto;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeader = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitle = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitleContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-top: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  padding: 0 16px;\r\n\r\n  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n  .title-menu {\r\n    margin-right: -16px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeaderRow = styled.thead`\r\n`;\r\n\r\nexport const StyledTableHeaderColumns = styled.tr`\r\n`;\r\n\r\nexport const StyledTableHeaderColumnContent = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  padding: 0 16px;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nexport const StyledTableHeaderColumnSortDirection = styled.span`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const StyledTableHeaderColumn = styled.th`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  position: relative;\r\n  text-align: unset;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  //fixes header heights no idea why\r\n  height: 1px;\r\n\r\n  &.sortable {\r\n    cursor: pointer;\r\n\r\n    &:hover {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      z-index: ${Z_INDEXES.hover};\r\n    }\r\n\r\n    &:active {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      z-index: ${Z_INDEXES.active};\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.left {\r\n    & > div {\r\n      justify-content: left;\r\n    }\r\n  }\r\n\r\n  &.right {\r\n    & > div {\r\n      justify-content: right;\r\n    }\r\n  }\r\n\r\n  &.center {\r\n    & > div {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 0;\r\n  }\r\n\r\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 1;\r\n  }\r\n\r\n  &.sorted {\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const StyledTableBodyRow = styled.tr`\r\n  cursor: pointer;\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  &:not(:last-child) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n\r\n  &.selected{\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n  }\r\n  \r\n  &:hover {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n`;\r\n\r\nexport const StyledTableNoRowsLabelRow = styled.tr`\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${props => COLORS.getColor('neutral_50', props.theme)};\r\n`;\r\n\r\nexport const StyledTableBody = styled.tbody`\r\n`;\r\n\r\n\r\nexport const StyledTableCell = styled.td``;\r\n\r\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\r\n  min-height: ${props => props.withNote ? '64px' : '48px'};\r\n\r\n  padding: 0 16px;\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: left;\r\n  gap: 8px;\r\n\r\n  &.truncate-text,\r\n  &.truncate-text span {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  &.left {\r\n    justify-content: left;\r\n  }\r\n\r\n  &.right {\r\n    justify-content: right;\r\n  }\r\n\r\n  &.center {\r\n    justify-content: center;\r\n  }\r\n\r\n  a:first-letter,\r\n  span:first-letter {\r\n    text-transform: uppercase;\r\n  }\r\n  \r\n  ${StyledCheckBox}{\r\n    width: fit-content;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellIcon = styled.div`\r\n  color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n  width: 20px;\r\n  height: 20px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellText = styled.span`\r\n  display: block;\r\n`;\r\n\r\nexport const StyledTableCellTextWrapper = styled.div<{ textWrap?: boolean }>`\r\n  padding: 12px 0px;\r\n  width: 100%;\r\n  ${props => !props.textWrap ? `\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  ` : ``}\r\n`;\r\n\r\nexport const StyledTableCellNoteText = styled.span`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  display: inline-block;\r\n  width: 100%;\r\n`;\r\n\r\n\r\nexport const StyledTableFooter = styled.div`\r\n`;\r\n\r\nexport const StyledTableFooterContent = styled.div`\r\n  border-top: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: right;\r\n\r\n`;\r\n\r\nexport const StyledTableFooterCurrentInfo = styled.span`\r\n  padding: 0 16px;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n`;\r\n\r\nexport const StyledTableFooterControls = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\r\n  height: 100%;\r\n  width: 100%;\r\n  position: absolute;\r\n  background-color: rgba(255, 255, 255, 0.75);\r\n  top: 0;\r\n  z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\r\n`;\r\n\r\nexport const StyledTableFooterCollapseButton = styled.button`\r\n  position: relative;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-left: none;\r\n  border-right: none;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  cursor: pointer;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  \r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:disabled {\r\n    display: none;\r\n  }\r\n\r\n`;\r\n\r\n\r\nexport const StyledTableBodyWrapper = styled.div`\r\n  overflow-x: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n\r\n  ::-webkit-scrollbar-track {\r\n    margin: 6px;\r\n  }\r\n\r\n  &.scrollable{\r\n    margin-bottom: 6px;\r\n    padding-bottom: 10px;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Table/TableStyles.js

@@ -18,37 +18,105 @@ import { Size } from "../types";
  * Table styles
  */
 
-export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
 export var StyledTable = styled.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
 export var StyledTableHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableHeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableHeaderTitleContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black));
+export var StyledTableHeaderTitleContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme));
+});
 export var StyledTableHeaderRow = styled.thead(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableHeaderColumns = styled.tr(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableHeaderColumnContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var StyledTableHeaderColumnContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
 export var StyledTableHeaderColumnSortDirection = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
-export var StyledTableHeaderColumn = styled.th(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
-export var StyledTableBodyRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.white, COLORS.neutral_200, COLORS.primary_100, COLORS.primary_100, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
-export var StyledTableNoRowsLabelRow = styled.tr(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
+export var StyledTableHeaderColumn = styled.th(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, Z_INDEXES.hover, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+});
+export var StyledTableBodyRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
+export var StyledTableNoRowsLabelRow = styled.tr(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), function (props) {
+  return COLORS.getColor('neutral_50', props.theme);
+});
 export var StyledTableBody = styled.tbody(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableCell = styled.td(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([""])));
 export var StyledTableCellContent = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  min-height: ", ";\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), function (props) {
   return props.withNote ? '64px' : '48px';
-}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
-export var StyledTableCellIcon = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, StyledCheckBox);
+export var StyledTableCellIcon = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_700', props.theme);
+});
 export var StyledTableCellText = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: block;\n"])));
 export var StyledTableCellTextWrapper = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  padding: 12px 0px;\n  width: 100%;\n  ", "\n"])), function (props) {
   return !props.textWrap ? "\n  overflow: hidden;\n  text-overflow: ellipsis;\n  " : "";
 });
-export var StyledTableCellNoteText = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", "\n  display: inline-block;\n  width: 100%;\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+export var StyledTableCellNoteText = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", "\n  display: inline-block;\n  width: 100%;\n"])), function (props) {
+  return ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
+});
 export var StyledTableFooter = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableFooterContent = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
-export var StyledTableFooterCurrentInfo = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
+export var StyledTableFooterContent = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
+export var StyledTableFooterCurrentInfo = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), function (props) {
+  return ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+});
 export var StyledTableFooterControls = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 export var StyledTableSpinner = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), function (props) {
   var _props$zindex;
   return (_props$zindex = props.zindex) !== null && _props$zindex !== void 0 ? _props$zindex : Z_INDEXES.loader;
 });
-export var StyledTableFooterCollapseButton = styled.button(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), COLORS.neutral_200, COLORS.neutral_200, COLORS.white, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
+export var StyledTableFooterCollapseButton = styled.button(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
+}, focusStyles, Z_INDEXES.hover, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, Z_INDEXES.active, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+});
 export var StyledTableBodyWrapper = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), scrollBarStyling(Size.Small));
 //# sourceMappingURL=TableStyles.js.map

package/dist/Table/TableStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","_templateObject","_taggedTemplateLiteral","neutral_200","StyledTable","table","_templateObject2","StyledTableHeader","_templateObject3","StyledTableHeaderTitle","_templateObject4","StyledTableHeaderTitleContent","_templateObject5","Bold","black","StyledTableHeaderRow","thead","_templateObject6","StyledTableHeaderColumns","tr","_templateObject7","StyledTableHeaderColumnContent","_templateObject8","StyledTableHeaderColumnSortDirection","span","_templateObject9","StyledTableHeaderColumn","th","_templateObject10","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","_templateObject11","StyledTableNoRowsLabelRow","_templateObject12","neutral_50","StyledTableBody","tbody","_templateObject13","StyledTableCell","td","_templateObject14","StyledTableCellContent","_templateObject15","props","withNote","Regular","StyledTableCellIcon","_templateObject16","neutral_700","StyledTableCellText","_templateObject17","StyledTableCellTextWrapper","_templateObject18","textWrap","StyledTableCellNoteText","_templateObject19","StyledTableFooter","_templateObject20","StyledTableFooterContent","_templateObject21","StyledTableFooterCurrentInfo","_templateObject22","StyledTableFooterControls","_templateObject23","StyledTableSpinner","_templateObject24","_props$zindex","zindex","loader","StyledTableFooterCollapseButton","button","_templateObject25","StyledTableBodyWrapper","_templateObject26","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {StyledCheckBox} from '../InputFields/Checkbox';\r\nimport {Size} from \"../types\";\r\n\r\n/**\r\n * Table styles\r\n */\r\n\r\nexport const TableWrapper = styled.div`\r\n  position: relative;\r\n\r\n  &.border{\r\n    border-left: 1px solid ${COLORS.neutral_200};\r\n    border-right: 1px solid ${COLORS.neutral_200};\r\n  }\r\n`;\r\n\r\n\r\nexport const StyledTable = styled.table`\r\n  background: transparent;\r\n  border-collapse: collapse;\r\n  width: 100%;\r\n\r\n  &.fixed {\r\n    table-layout: fixed;\r\n  }\r\n\r\n  &.auto {\r\n    table-layout: auto;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeader = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitle = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitleContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  border-top: 2px solid ${COLORS.neutral_200};\r\n  padding: 0 16px;\r\n\r\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\r\n  .title-menu {\r\n    margin-right: -16px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeaderRow = styled.thead`\r\n`;\r\n\r\nexport const StyledTableHeaderColumns = styled.tr`\r\n`;\r\n\r\nexport const StyledTableHeaderColumnContent = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  padding: 0 16px;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  border-top: 1px solid ${COLORS.neutral_200};\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n`;\r\n\r\nexport const StyledTableHeaderColumnSortDirection = styled.span`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const StyledTableHeaderColumn = styled.th`\r\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n  position: relative;\r\n  text-align: unset;\r\n  background-color: ${COLORS.white};\r\n\r\n  //fixes header heights no idea why\r\n  height: 1px;\r\n\r\n  &.sortable {\r\n    cursor: pointer;\r\n\r\n    &:hover {\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_700};\r\n      z-index: ${Z_INDEXES.hover};\r\n    }\r\n\r\n    &:active {\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n      z-index: ${Z_INDEXES.active};\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.left {\r\n    & > div {\r\n      justify-content: left;\r\n    }\r\n  }\r\n\r\n  &.right {\r\n    & > div {\r\n      justify-content: right;\r\n    }\r\n  }\r\n\r\n  &.center {\r\n    & > div {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 0;\r\n  }\r\n\r\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 1;\r\n  }\r\n\r\n  &.sorted {\r\n    background-color: ${COLORS.neutral_20};\r\n  }\r\n`;\r\n\r\nexport const StyledTableBodyRow = styled.tr`\r\n  cursor: pointer;\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${COLORS.white};\r\n  \r\n  &:not(:last-child) {\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  &.selected{\r\n    background-color: ${COLORS.primary_100};\r\n  }\r\n  \r\n  &:hover {\r\n    background-color: ${COLORS.primary_100};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n`;\r\n\r\nexport const StyledTableNoRowsLabelRow = styled.tr`\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${COLORS.neutral_50};\r\n`;\r\n\r\nexport const StyledTableBody = styled.tbody`\r\n`;\r\n\r\n\r\nexport const StyledTableCell = styled.td``;\r\n\r\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\r\n  min-height: ${props => props.withNote ? '64px' : '48px'};\r\n\r\n  padding: 0 16px;\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: left;\r\n  gap: 8px;\r\n\r\n  &.truncate-text,\r\n  &.truncate-text span {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  &.left {\r\n    justify-content: left;\r\n  }\r\n\r\n  &.right {\r\n    justify-content: right;\r\n  }\r\n\r\n  &.center {\r\n    justify-content: center;\r\n  }\r\n\r\n  a:first-letter,\r\n  span:first-letter {\r\n    text-transform: uppercase;\r\n  }\r\n  \r\n  ${StyledCheckBox}{\r\n    width: fit-content;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellIcon = styled.div`\r\n  color: ${COLORS.neutral_700};\r\n  width: 20px;\r\n  height: 20px;\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_700};\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellText = styled.span`\r\n  display: block;\r\n`;\r\n\r\nexport const StyledTableCellTextWrapper = styled.div<{ textWrap?: boolean }>`\r\n  padding: 12px 0px;\r\n  width: 100%;\r\n  ${props => !props.textWrap ? `\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  ` : ``}\r\n`;\r\n\r\nexport const StyledTableCellNoteText = styled.span`\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n  display: inline-block;\r\n  width: 100%;\r\n`;\r\n\r\n\r\nexport const StyledTableFooter = styled.div`\r\n`;\r\n\r\nexport const StyledTableFooterContent = styled.div`\r\n  border-top: 2px solid ${COLORS.neutral_200};\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: right;\r\n\r\n`;\r\n\r\nexport const StyledTableFooterCurrentInfo = styled.span`\r\n  padding: 0 16px;\r\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n`;\r\n\r\nexport const StyledTableFooterControls = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\r\n  height: 100%;\r\n  width: 100%;\r\n  position: absolute;\r\n  background-color: rgba(255, 255, 255, 0.75);\r\n  top: 0;\r\n  z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\r\n`;\r\n\r\nexport const StyledTableFooterCollapseButton = styled.button`\r\n  position: relative;\r\n  border-bottom: 1px solid ${COLORS.neutral_200};\r\n  border-top: 1px solid ${COLORS.neutral_200};\r\n  border-left: none;\r\n  border-right: none;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  background: ${COLORS.white};\r\n\r\n  cursor: pointer;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n  \r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &:disabled {\r\n    display: none;\r\n  }\r\n\r\n`;\r\n\r\n\r\nexport const StyledTableBodyWrapper = styled.div`\r\n  overflow-x: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n\r\n  ::-webkit-scrollbar-track {\r\n    margin: 6px;\r\n  }\r\n\r\n  &.scrollable{\r\n    margin-bottom: 6px;\r\n    padding-bottom: 10px;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","StyledTable","table","_templateObject2","StyledTableHeader","_templateObject3","StyledTableHeaderTitle","_templateObject4","StyledTableHeaderTitleContent","_templateObject5","Bold","StyledTableHeaderRow","thead","_templateObject6","StyledTableHeaderColumns","tr","_templateObject7","StyledTableHeaderColumnContent","_templateObject8","StyledTableHeaderColumnSortDirection","span","_templateObject9","StyledTableHeaderColumn","th","_templateObject10","hover","active","StyledTableBodyRow","_templateObject11","StyledTableNoRowsLabelRow","_templateObject12","StyledTableBody","tbody","_templateObject13","StyledTableCell","td","_templateObject14","StyledTableCellContent","_templateObject15","withNote","Regular","StyledTableCellIcon","_templateObject16","StyledTableCellText","_templateObject17","StyledTableCellTextWrapper","_templateObject18","textWrap","StyledTableCellNoteText","_templateObject19","StyledTableFooter","_templateObject20","StyledTableFooterContent","_templateObject21","StyledTableFooterCurrentInfo","_templateObject22","StyledTableFooterControls","_templateObject23","StyledTableSpinner","_templateObject24","_props$zindex","zindex","loader","StyledTableFooterCollapseButton","button","_templateObject25","StyledTableBodyWrapper","_templateObject26","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  ComponentXSStyling\r\n} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\nimport {StyledCheckBox} from '../InputFields/Checkbox';\r\nimport {Size} from \"../types\";\r\n\r\n/**\r\n * Table styles\r\n */\r\n\r\nexport const TableWrapper = styled.div`\r\n  position: relative;\r\n\r\n  &.border{\r\n    border-left: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    border-right: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const StyledTable = styled.table`\r\n  background: transparent;\r\n  border-collapse: collapse;\r\n  width: 100%;\r\n\r\n  &.fixed {\r\n    table-layout: fixed;\r\n  }\r\n\r\n  &.auto {\r\n    table-layout: auto;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeader = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitle = styled.div`\r\n`;\r\n\r\nexport const StyledTableHeaderTitleContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-top: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  padding: 0 16px;\r\n\r\n  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n  .title-menu {\r\n    margin-right: -16px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableHeaderRow = styled.thead`\r\n`;\r\n\r\nexport const StyledTableHeaderColumns = styled.tr`\r\n`;\r\n\r\nexport const StyledTableHeaderColumnContent = styled.div`\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n  padding: 0 16px;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nexport const StyledTableHeaderColumnSortDirection = styled.span`\r\n  width: 24px;\r\n  height: 24px;\r\n`;\r\n\r\nexport const StyledTableHeaderColumn = styled.th`\r\n  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  position: relative;\r\n  text-align: unset;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  //fixes header heights no idea why\r\n  height: 1px;\r\n\r\n  &.sortable {\r\n    cursor: pointer;\r\n\r\n    &:hover {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      z-index: ${Z_INDEXES.hover};\r\n    }\r\n\r\n    &:active {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      z-index: ${Z_INDEXES.active};\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.left {\r\n    & > div {\r\n      justify-content: left;\r\n    }\r\n  }\r\n\r\n  &.right {\r\n    & > div {\r\n      justify-content: right;\r\n    }\r\n  }\r\n\r\n  &.center {\r\n    & > div {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 0;\r\n  }\r\n\r\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\r\n    opacity: 1;\r\n  }\r\n\r\n  &.sorted {\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const StyledTableBodyRow = styled.tr`\r\n  cursor: pointer;\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  \r\n  &:not(:last-child) {\r\n    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n\r\n  &.selected{\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n  }\r\n  \r\n  &:hover {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n`;\r\n\r\nexport const StyledTableNoRowsLabelRow = styled.tr`\r\n  position: relative;\r\n  outline: none;\r\n  background-color: ${props => COLORS.getColor('neutral_50', props.theme)};\r\n`;\r\n\r\nexport const StyledTableBody = styled.tbody`\r\n`;\r\n\r\n\r\nexport const StyledTableCell = styled.td``;\r\n\r\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\r\n  min-height: ${props => props.withNote ? '64px' : '48px'};\r\n\r\n  padding: 0 16px;\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: left;\r\n  gap: 8px;\r\n\r\n  &.truncate-text,\r\n  &.truncate-text span {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  &.left {\r\n    justify-content: left;\r\n  }\r\n\r\n  &.right {\r\n    justify-content: right;\r\n  }\r\n\r\n  &.center {\r\n    justify-content: center;\r\n  }\r\n\r\n  a:first-letter,\r\n  span:first-letter {\r\n    text-transform: uppercase;\r\n  }\r\n  \r\n  ${StyledCheckBox}{\r\n    width: fit-content;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellIcon = styled.div`\r\n  color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n  width: 20px;\r\n  height: 20px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n`;\r\n\r\nexport const StyledTableCellText = styled.span`\r\n  display: block;\r\n`;\r\n\r\nexport const StyledTableCellTextWrapper = styled.div<{ textWrap?: boolean }>`\r\n  padding: 12px 0px;\r\n  width: 100%;\r\n  ${props => !props.textWrap ? `\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  ` : ``}\r\n`;\r\n\r\nexport const StyledTableCellNoteText = styled.span`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  display: inline-block;\r\n  width: 100%;\r\n`;\r\n\r\n\r\nexport const StyledTableFooter = styled.div`\r\n`;\r\n\r\nexport const StyledTableFooterContent = styled.div`\r\n  border-top: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  box-sizing: border-box;\r\n  min-height: 56px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: right;\r\n\r\n`;\r\n\r\nexport const StyledTableFooterCurrentInfo = styled.span`\r\n  padding: 0 16px;\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n`;\r\n\r\nexport const StyledTableFooterControls = styled.div`\r\n  display: flex;\r\n`;\r\n\r\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\r\n  height: 100%;\r\n  width: 100%;\r\n  position: absolute;\r\n  background-color: rgba(255, 255, 255, 0.75);\r\n  top: 0;\r\n  z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\r\n`;\r\n\r\nexport const StyledTableFooterCollapseButton = styled.button`\r\n  position: relative;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  border-left: none;\r\n  border-right: none;\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 4px;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  cursor: pointer;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  \r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:disabled {\r\n    display: none;\r\n  }\r\n\r\n`;\r\n\r\n\r\nexport const StyledTableBodyWrapper = styled.div`\r\n  overflow-x: auto;\r\n  ${scrollBarStyling(Size.Small)}\r\n\r\n  ::-webkit-scrollbar-track {\r\n    margin: 6px;\r\n  }\r\n\r\n  &.scrollable{\r\n    margin-bottom: 6px;\r\n    padding-bottom: 10px;\r\n  }\r\n`;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAAQC,MAAM,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC/D,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,QACb,sBAAsB;AAC7B,SAAQC,SAAS,QAAO,qBAAqB;AAC7C,SAAQC,cAAc,QAAO,yBAAyB;AACtD,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;;AAEA,OAAO,IAAMC,YAAY,GAAGZ,MAAM,CAACa,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,2HAIT,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACnD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAEjF;AAGD,OAAO,IAAMC,WAAW,GAAGnB,MAAM,CAACoB,KAAK,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,8KAYtC;AAED,OAAO,IAAMO,iBAAiB,GAAGtB,MAAM,CAACa,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,sBAAA,UAC1C;AAED,OAAO,IAAMS,sBAAsB,GAAGxB,MAAM,CAACa,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAV,sBAAA,UAC/C;AAED,OAAO,IAAMW,6BAA6B,GAAG1B,MAAM,CAACa,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAZ,sBAAA,uSAO1B,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACvD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAG1E,UAAAF,KAAK;EAAA,OAAIZ,iBAAiB,CAACG,kBAAkB,CAACqB,IAAI,EAAE3B,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,EAI7F;AAED,OAAO,IAAMW,oBAAoB,GAAG7B,MAAM,CAAC8B,KAAK,CAAAC,gBAAA,KAAAA,gBAAA,GAAAhB,sBAAA,UAC/C;AAED,OAAO,IAAMiB,wBAAwB,GAAGhC,MAAM,CAACiC,EAAE,CAAAC,gBAAA,KAAAA,gBAAA,GAAAnB,sBAAA,UAChD;AAED,OAAO,IAAMoB,8BAA8B,GAAGnC,MAAM,CAACa,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAArB,sBAAA,8OAQ9B,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACjD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAChF;AAED,OAAO,IAAMmB,oCAAoC,GAAGrC,MAAM,CAACsC,IAAI,CAAAC,gBAAA,KAAAA,gBAAA,GAAAxB,sBAAA,2CAG9D;AAED,OAAO,IAAMyB,uBAAuB,GAAGxC,MAAM,CAACyC,EAAE,CAAAC,iBAAA,KAAAA,iBAAA,GAAA3B,sBAAA,iyBAC5C,UAAAC,KAAK;EAAA,OAAIV,iBAAiB,CAACC,kBAAkB,CAACqB,IAAI,EAAE3B,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAG9E,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAS1C,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC9D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAClDT,SAAS,CAACkC,KAAK,EAIN,UAAA3B,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC/D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAClDT,SAAS,CAACmC,MAAM,EAIzB1C,WAAW,EAsBJiC,8BAA8B,EAIvBA,8BAA8B,EAK5B,UAAAnB,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAE1E;AAED,OAAO,IAAM2B,kBAAkB,GAAG7C,MAAM,CAACiC,EAAE,CAAAa,iBAAA,KAAAA,iBAAA,GAAA/B,sBAAA,2WAIrB,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAGrC,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAI3D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIpD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAC7DT,SAAS,CAACkC,KAAK,EAIxBzC,WAAW,EAIFO,SAAS,CAACmC,MAAM,CAG9B;AAED,OAAO,IAAMG,yBAAyB,GAAG/C,MAAM,CAACiC,EAAE,CAAAe,iBAAA,KAAAA,iBAAA,GAAAjC,sBAAA,+EAG5B,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EACxE;AAED,OAAO,IAAM+B,eAAe,GAAGjD,MAAM,CAACkD,KAAK,CAAAC,iBAAA,KAAAA,iBAAA,GAAApC,sBAAA,UAC1C;AAGD,OAAO,IAAMqC,eAAe,GAAGpD,MAAM,CAACqD,EAAE,CAAAC,iBAAA,KAAAA,iBAAA,GAAAvC,sBAAA,QAAE;AAE1C,OAAO,IAAMwC,sBAAsB,GAAGvD,MAAM,CAACa,GAAG,CAAA2C,iBAAA,KAAAA,iBAAA,GAAAzC,sBAAA,oiBAChC,UAAAC,KAAK;EAAA,OAAIA,KAAK,CAACyC,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,GAGrD,UAAAzC,KAAK;EAAA,OAAIV,iBAAiB,CAACC,kBAAkB,CAACmD,OAAO,EAAEzD,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GA+B7FR,cAAc,CAGjB;AAED,OAAO,IAAMiD,mBAAmB,GAAG3D,MAAM,CAACa,GAAG,CAAA+C,iBAAA,KAAAA,iBAAA,GAAA7C,sBAAA,mIAClC,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKlD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAIhE;AAED,OAAO,IAAM2C,mBAAmB,GAAG7D,MAAM,CAACsC,IAAI,CAAAwB,iBAAA,KAAAA,iBAAA,GAAA/C,sBAAA,6BAE7C;AAED,OAAO,IAAMgD,0BAA0B,GAAG/D,MAAM,CAACa,GAAG,CAAAmD,iBAAA,KAAAA,iBAAA,GAAAjD,sBAAA,yDAGhD,UAAAC,KAAK;EAAA,OAAI,CAACA,KAAK,CAACiD,QAAQ,+DAGpB;AAAA,EACP;AAED,OAAO,IAAMC,uBAAuB,GAAGlE,MAAM,CAACsC,IAAI,CAAA6B,iBAAA,KAAAA,iBAAA,GAAApD,sBAAA,6DAC9C,UAAAC,KAAK;EAAA,OAAIR,kBAAkB,CAACD,kBAAkB,CAACmD,OAAO,EAAEzD,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,EAGvG;AAGD,OAAO,IAAMkD,iBAAiB,GAAGpE,MAAM,CAACa,GAAG,CAAAwD,iBAAA,KAAAA,iBAAA,GAAAtD,sBAAA,UAC1C;AAED,OAAO,IAAMuD,wBAAwB,GAAGtE,MAAM,CAACa,GAAG,CAAA0D,iBAAA,KAAAA,iBAAA,GAAAxD,sBAAA,qMACxB,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACjD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAQhF;AAED,OAAO,IAAMsD,4BAA4B,GAAGxE,MAAM,CAACsC,IAAI,CAAAmC,iBAAA,KAAAA,iBAAA,GAAA1D,sBAAA,uCAEnD,UAAAC,KAAK;EAAA,OAAIR,kBAAkB,CAACD,kBAAkB,CAACmD,OAAO,EAAEzD,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,EACjG;AAED,OAAO,IAAMwD,yBAAyB,GAAG1E,MAAM,CAACa,GAAG,CAAA8D,iBAAA,KAAAA,iBAAA,GAAA5D,sBAAA,4BAElD;AAED,OAAO,IAAM6D,kBAAkB,GAAG5E,MAAM,CAACa,GAAG,CAAAgE,iBAAA,KAAAA,iBAAA,GAAA9D,sBAAA,gJAM/B,UAACC,KAAK;EAAA,IAAA8D,aAAA;EAAA,QAAAA,aAAA,GAAM9D,KAAK,CAAC+D,MAAM,cAAAD,aAAA,cAAAA,aAAA,GAAIrE,SAAS,CAACuE,MAAM;AAAA,CAAC,CACzD;AAED,OAAO,IAAMC,+BAA+B,GAAGjF,MAAM,CAACkF,MAAM,CAAAC,iBAAA,KAAAA,iBAAA,GAAApE,sBAAA,wkBAE/B,UAAAC,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACvD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAU9D,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAI1D,UAAAF,KAAK;EAAA,OAAIX,iBAAiB,CAACE,kBAAkB,CAACqB,IAAI,EAAE3B,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAG9FhB,WAAW,EAIFO,SAAS,CAACkC,KAAK,EACZ,UAAA3B,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACxD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIlDT,SAAS,CAACmC,MAAM,EACb,UAAA5B,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACzD,UAAAF,KAAK;EAAA,OAAIf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAOhE;AAGD,OAAO,IAAMkE,sBAAsB,GAAGpF,MAAM,CAACa,GAAG,CAAAwE,iBAAA,KAAAA,iBAAA,GAAAtE,sBAAA,4KAE5CZ,gBAAgB,CAACQ,IAAI,CAAC2E,KAAK,CAAC,CAU/B","ignoreList":[]}

package/dist/Tabs/HorizontalTabs.cjs

@@ -35,8 +35,42 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Add custom styles
 var HorizontalTabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"])), _styles.focusStyles);
-var TabSideFill = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
-var TabButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), _styles.COLORS.neutral_600, _styles.Z_INDEXES.active, _styles.COLORS.white, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_500, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
+var TabSideFill = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
+var TabButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+}, _styles.Z_INDEXES.active, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, _types.Size.XSmall, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
 
 // Add component-specific types