@laerdal/life-react-components 1.9.9 → 1.10.1-dev.3

package/dist/Table/TableFooter.js

@@ -12,6 +12,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 
 var TableFooter = function TableFooter(props) {
+  var _props$rowsPerPageLab, _props$showMoreLabel, _props$showFewerLabel;
+
   var rowsPerPageValues = [{
     value: '10'
   }, {
@@ -21,7 +23,7 @@ var TableFooter = function TableFooter(props) {
   }, {
     value: '100'
   }];
-  var dropDownText = "Rows per page: ".concat(props.rowsPerPage);
+  var dropDownText = "".concat((_props$rowsPerPageLab = props.rowsPerPageLabel) !== null && _props$rowsPerPageLab !== void 0 ? _props$rowsPerPageLab : 'Rows per page', " : ").concat(props.rowsPerPage);
   return /*#__PURE__*/_jsx(StyledTableFooter, {
     children: /*#__PURE__*/_jsx("tr", {
       children: /*#__PURE__*/_jsxs("td", {
@@ -35,11 +37,11 @@ var TableFooter = function TableFooter(props) {
           disabled: props.isCollapsed && props.rows.length <= props.rowsPerPage,
           children: [props.isCollapsed && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsxs("span", {
-              children: ["Show more (", props.rows.length - props.rowsPerPage, ")"]
+              children: [(_props$showMoreLabel = props.showMoreLabel) !== null && _props$showMoreLabel !== void 0 ? _props$showMoreLabel : 'Show more', " (", props.rows.length - props.rowsPerPage, ")"]
             }), /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {})]
           }), !props.isCollapsed && /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx("span", {
-              children: "Show fewer"
+              children: (_props$showFewerLabel = props.showFewerLabel) !== null && _props$showFewerLabel !== void 0 ? _props$showFewerLabel : 'Show fewer'
             }), /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {})]
           })]
         }), !props.accordion && /*#__PURE__*/_jsxs(StyledTableFooterContent, {

package/dist/Table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableFooter.tsx"],"names":["React","DropdownButton","IconButton","ChevronLeft","ChevronRight","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","SystemIcons","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPage","columns","length","multiSelect","accordion","setIsCollapsed","isCollapsed","rows","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {SystemIcons} from '../icons';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `Rows per page: ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter>\n      <tr>\n        <td colSpan={props.columns.length + (props.multiSelect ? 1 : 0)} data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>Show more ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>Show fewer</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n        </td>\n      </tr>\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"file":"TableFooter.js"}
+{"version":3,"sources":["../../src/Table/TableFooter.tsx"],"names":["React","DropdownButton","IconButton","ChevronLeft","ChevronRight","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","SystemIcons","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","columns","length","multiSelect","accordion","setIsCollapsed","isCollapsed","rows","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport {ChevronLeft, ChevronRight} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {SystemIcons} from '../icons';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter>\n      <tr>\n        <td colSpan={props.columns.length + (props.multiSelect ? 1 : 0)} data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n        </td>\n      </tr>\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"file":"TableFooter.js"}

package/dist/Table/TableStyles.cjs

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableWrapper = exports.StyledTableSpinner = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeaderColumns = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumn = exports.StyledTableHeader = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterControls = exports.StyledTableFooterContent = exports.StyledTableFooterCollapseButton = exports.StyledTableFooter = exports.StyledTableCellText = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledTable = void 0;
+exports.TableWrapper = exports.StyledTableSpinner = exports.StyledTableNoRowsLabelRow = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeaderColumns = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumn = exports.StyledTableHeader = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterControls = exports.StyledTableFooterContent = exports.StyledTableFooterCollapseButton = exports.StyledTableFooter = exports.StyledTableCellText = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledTable = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var _zIndexes = require("../styles/z-indexes");
 
 var _Checkbox = require("../InputFields/Checkbox");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 /**
  * Table styles
@@ -60,47 +60,51 @@ var StyledTableBodyRow = _styledComponents.default.tr(_templateObject9 || (_temp
 
 exports.StyledTableBodyRow = StyledTableBodyRow;
 
-var StyledTableBody = _styledComponents.default.tbody(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var StyledTableNoRowsLabelRow = _styledComponents.default.tr(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), _styles.COLORS.neutral_50);
+
+exports.StyledTableNoRowsLabelRow = StyledTableNoRowsLabelRow;
+
+var StyledTableBody = _styledComponents.default.tbody(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, _styles.COLORS.neutral_50, StyledTableBodyRow, _styles.COLORS.neutral_20);
 
 exports.StyledTableBody = StyledTableBody;
 
-var StyledTableCell = _styledComponents.default.td(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([""])));
+var StyledTableCell = _styledComponents.default.td(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)([""])));
 
 exports.StyledTableCell = StyledTableCell;
 
-var StyledTableCellContent = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 48px;\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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _Checkbox.StyledCheckBox);
+var StyledTableCellContent = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 48px;\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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _Checkbox.StyledCheckBox);
 
 exports.StyledTableCellContent = StyledTableCellContent;
 
-var StyledTableCellIcon = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), _styles.COLORS.neutral_700, _styles.COLORS.neutral_700);
+var StyledTableCellIcon = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), _styles.COLORS.neutral_700, _styles.COLORS.neutral_700);
 
 exports.StyledTableCellIcon = StyledTableCellIcon;
 
-var StyledTableCellText = _styledComponents.default.span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 12px 0;\n"])));
+var StyledTableCellText = _styledComponents.default.span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 12px 0;\n"])));
 
 exports.StyledTableCellText = StyledTableCellText;
 
-var StyledTableFooter = _styledComponents.default.tfoot(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n"])));
+var StyledTableFooter = _styledComponents.default.tfoot(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n"])));
 
 exports.StyledTableFooter = StyledTableFooter;
 
-var StyledTableFooterContent = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (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(_templateObject17 || (_templateObject17 = (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);
 
 exports.StyledTableFooterContent = StyledTableFooterContent;
 
-var StyledTableFooterCurrentInfo = _styledComponents.default.span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 16px;\n  ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
+var StyledTableFooterCurrentInfo = _styledComponents.default.span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 16px;\n  ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
 
 exports.StyledTableFooterCurrentInfo = StyledTableFooterCurrentInfo;
 
-var StyledTableFooterControls = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var StyledTableFooterControls = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 exports.StyledTableFooterControls = StyledTableFooterControls;
 
-var StyledTableSpinner = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.backdrop);
+var StyledTableSpinner = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\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"])), _zIndexes.Z_INDEXES.backdrop);
 
 exports.StyledTableSpinner = StyledTableSpinner;
 
-var StyledTableFooterCollapseButton = _styledComponents.default.button(_templateObject20 || (_templateObject20 = (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(_templateObject21 || (_templateObject21 = (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);
 
 exports.StyledTableFooterCollapseButton = StyledTableFooterCollapseButton;
 //# sourceMappingURL=TableStyles.cjs.map

package/dist/Table/TableStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAOA;;AACA;;;;AAEA;AACA;AACA;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,4GAAlB;;;;AAKA,IAAMC,WAAW,GAAGF,0BAAOG,KAAV,6NAAjB;;;;AAaA,IAAMC,iBAAiB,GAAGJ,0BAAOK,KAAV,uFAAvB;;;;AAGA,IAAMC,sBAAsB,GAAGN,0BAAOO,EAAV,uFAA5B;;;;AAGA,IAAMC,6BAA6B,GAAGR,0BAAOC,GAAV,oXAObQ,eAAOC,WAPM,EAQhBD,eAAOC,WARS,EAWtC,mCAAkBC,+BAAmBC,IAArC,EAA2CH,eAAOI,KAAlD,CAXsC,CAAnC;;;;AAiBA,IAAMC,wBAAwB,GAAGd,0BAAOO,EAAV,uFAA9B;;;;AAGA,IAAMQ,8BAA8B,GAAGf,0BAAOC,GAAV,2TAQjBQ,eAAOC,WARU,EASdD,eAAOC,WATO,CAApC;;;;AAYA,IAAMM,uBAAuB,GAAGhB,0BAAOiB,EAAV,mpBAChC,mCAAkBN,+BAAmBC,IAArC,EAA2CH,eAAOS,WAAlD,CADgC,EAIdT,eAAOU,KAJO,EAaVV,eAAOW,UAbG,EAcrBX,eAAOY,WAdc,EAenBC,oBAAUC,KAfS,EAmBVd,eAAOe,WAnBG,EAoBrBf,eAAOgB,WApBc,EAqBnBH,oBAAUI,MArBS,EAyB5BC,mBAzB4B,EA6BrBZ,8BA7BqB,EAiCdA,8BAjCc,EAsCZN,eAAOmB,UAtCK,CAA7B;;;;AA0CA,IAAMC,kBAAkB,GAAG7B,0BAAOO,EAAV,wVAMPE,eAAOe,WANA,EAUPf,eAAOqB,WAVA,EAWhBR,oBAAUC,KAXM,EAezBI,mBAfyB,EAmBhBL,oBAAUI,MAnBM,CAAxB;;;;AAwBA,IAAMK,eAAe,GAAG/B,0BAAOgC,KAAV,yFAArB;;;;AAIA,IAAMC,eAAe,GAAGjC,0BAAOkC,EAAV,uFAArB;;;;AAEA,IAAMC,sBAAsB,GAAGnC,0BAAOC,GAAV,mnBAI/B,mCAAkBU,+BAAmByB,OAArC,EAA8C3B,eAAOI,KAArD,CAJ+B,EAmC/BwB,wBAnC+B,CAA5B;;;;AAwCA,IAAMC,mBAAmB,GAAGtC,0BAAOC,GAAV,kNACrBQ,eAAO8B,WADc,EAMnB9B,eAAO8B,WANY,CAAzB;;;;AAYA,IAAMC,mBAAmB,GAAGxC,0BAAOyC,IAAV,6GAAzB;;;;AAKA,IAAMC,iBAAiB,GAAG1C,0BAAO2C,KAAV,yFAAvB;;;;AAGA,IAAMC,wBAAwB,GAAG5C,0BAAOC,GAAV,oRACXQ,eAAOC,WADI,EAERD,eAAOC,WAFC,CAA9B;;;;AAYA,IAAMmC,4BAA4B,GAAG7C,0BAAOyC,IAAV,sHAErC,oCAAmB9B,+BAAmByB,OAAtC,EAA+C3B,eAAOI,KAAtD,CAFqC,CAAlC;;;;AAKA,IAAMiC,yBAAyB,GAAG9C,0BAAOC,GAAV,2GAA/B;;;;AAIA,IAAM8C,kBAAkB,GAAG/C,0BAAOC,GAAV,wNAMlBqB,oBAAU0B,QANQ,CAAxB;;;;AASA,IAAMC,+BAA+B,GAAGjD,0BAAOkD,MAAV,upBAEfzC,eAAOC,WAFQ,EAGlBD,eAAOC,WAHW,EAa5BD,eAAOU,KAbqB,EAiBxC,mCAAkBR,+BAAmBC,IAArC,EAA2CH,eAAOS,WAAlD,CAjBwC,EAoBtCS,mBApBsC,EAwB7BL,oBAAUC,KAxBmB,EAyB1Bd,eAAOW,UAzBmB,EA0B/BX,eAAOY,WA1BwB,EA8B7BC,oBAAUI,MA9BmB,EA+B1BjB,eAAOe,WA/BmB,EAgC/Bf,eAAOgB,WAhCwB,CAArC","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\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 ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\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 ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\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  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\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: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n"],"file":"TableStyles.cjs"}
+{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\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 ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\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 ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\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  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\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: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n"],"file":"TableStyles.cjs"}

package/dist/Table/TableStyles.d.ts

@@ -10,6 +10,7 @@ export declare const StyledTableHeaderColumns: import("styled-components").Style
 export declare const StyledTableHeaderColumnContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableHeaderColumn: import("styled-components").StyledComponent<"th", any, {}, never>;
 export declare const StyledTableBodyRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledTableNoRowsLabelRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
 export declare const StyledTableBody: import("styled-components").StyledComponent<"tbody", any, {}, never>;
 export declare const StyledTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const StyledTableCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/TableStyles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 /**
  * Import third-party libraries.
@@ -27,15 +27,16 @@ export var StyledTableHeaderColumns = styled.tr(_templateObject6 || (_templateOb
 export var StyledTableHeaderColumnContent = styled.div(_templateObject7 || (_templateObject7 = _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 StyledTableHeaderColumn = styled.th(_templateObject8 || (_templateObject8 = _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  &.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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\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.primary_100, COLORS.primary_200, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
-export var StyledTableBody = styled.tbody(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableCell = styled.td(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([""])));
-export var StyledTableCellContent = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  min-height: 48px;\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"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
-export var StyledTableCellIcon = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
-export var StyledTableCellText = styled.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  padding: 12px 0;\n"])));
-export var StyledTableFooter = styled.tfoot(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n"])));
-export var StyledTableFooterContent = styled.div(_templateObject16 || (_templateObject16 = _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(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
-export var StyledTableFooterControls = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var StyledTableSpinner = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  z-index: ", ";\n"])), Z_INDEXES.backdrop);
-export var StyledTableFooterCollapseButton = styled.button(_templateObject20 || (_templateObject20 = _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 StyledTableNoRowsLabelRow = styled.tr(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
+export var StyledTableBody = styled.tbody(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, COLORS.neutral_50, StyledTableBodyRow, COLORS.neutral_20);
+export var StyledTableCell = styled.td(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral([""])));
+export var StyledTableCellContent = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  min-height: 48px;\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"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
+export var StyledTableCellIcon = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
+export var StyledTableCellText = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  padding: 12px 0;\n"])));
+export var StyledTableFooter = styled.tfoot(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableFooterContent = styled.div(_templateObject17 || (_templateObject17 = _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(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
+export var StyledTableFooterControls = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var StyledTableSpinner = styled.div(_templateObject20 || (_templateObject20 = _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"])), Z_INDEXES.backdrop);
+export var StyledTableFooterCollapseButton = styled.button(_templateObject21 || (_templateObject21 = _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);
 //# sourceMappingURL=TableStyles.js.map

package/dist/Table/TableStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\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 ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\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 ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\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  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\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: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n"],"file":"TableStyles.js"}
+{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,kBALF,QAMO,sBANP;AAOA,SAAQC,SAAR,QAAwB,qBAAxB;AACA,SAAQC,cAAR,QAA6B,yBAA7B;AAEA;AACA;AACA;;AAEA,OAAO,IAAMC,YAAY,GAAGV,MAAM,CAACW,GAAV,8FAAlB;AAKP,OAAO,IAAMC,WAAW,GAAGZ,MAAM,CAACa,KAAV,+MAAjB;AAaP,OAAO,IAAMC,iBAAiB,GAAGd,MAAM,CAACe,KAAV,yEAAvB;AAGP,OAAO,IAAMC,sBAAsB,GAAGhB,MAAM,CAACiB,EAAV,yEAA5B;AAGP,OAAO,IAAMC,6BAA6B,GAAGlB,MAAM,CAACW,GAAV,sWAObV,MAAM,CAACkB,WAPM,EAQhBlB,MAAM,CAACkB,WARS,EAWtChB,iBAAiB,CAACG,kBAAkB,CAACc,IAApB,EAA0BnB,MAAM,CAACoB,KAAjC,CAXqB,CAAnC;AAiBP,OAAO,IAAMC,wBAAwB,GAAGtB,MAAM,CAACiB,EAAV,yEAA9B;AAGP,OAAO,IAAMM,8BAA8B,GAAGvB,MAAM,CAACW,GAAV,6SAQjBV,MAAM,CAACkB,WARU,EASdlB,MAAM,CAACkB,WATO,CAApC;AAYP,OAAO,IAAMK,uBAAuB,GAAGxB,MAAM,CAACyB,EAAV,qoBAChCpB,iBAAiB,CAACC,kBAAkB,CAACc,IAApB,EAA0BnB,MAAM,CAACyB,WAAjC,CADe,EAIdzB,MAAM,CAAC0B,KAJO,EAaV1B,MAAM,CAAC2B,UAbG,EAcrB3B,MAAM,CAAC4B,WAdc,EAenBrB,SAAS,CAACsB,KAfS,EAmBV7B,MAAM,CAAC8B,WAnBG,EAoBrB9B,MAAM,CAAC+B,WApBc,EAqBnBxB,SAAS,CAACyB,MArBS,EAyB5B/B,WAzB4B,EA6BrBqB,8BA7BqB,EAiCdA,8BAjCc,EAsCZtB,MAAM,CAACiC,UAtCK,CAA7B;AA0CP,OAAO,IAAMC,kBAAkB,GAAGnC,MAAM,CAACiB,EAAV,0UAMPhB,MAAM,CAAC8B,WANA,EAUP9B,MAAM,CAACmC,WAVA,EAWhB5B,SAAS,CAACsB,KAXM,EAezB5B,WAfyB,EAmBhBM,SAAS,CAACyB,MAnBM,CAAxB;AAwBP,OAAO,IAAMI,yBAAyB,GAAGrC,MAAM,CAACiB,EAAV,gJAGhBhB,MAAM,CAACqC,UAHS,CAA/B;AAMP,OAAO,IAAMC,eAAe,GAAGvC,MAAM,CAACwC,KAAV,6SACxBL,kBADwB,EAEJlC,MAAM,CAACqC,UAFH,EAKxBH,kBALwB,EAMJlC,MAAM,CAACiC,UANH,CAArB;AAWP,OAAO,IAAMO,eAAe,GAAGzC,MAAM,CAAC0C,EAAV,yEAArB;AAEP,OAAO,IAAMC,sBAAsB,GAAG3C,MAAM,CAACW,GAAV,qmBAI/BN,iBAAiB,CAACC,kBAAkB,CAACsC,OAApB,EAA6B3C,MAAM,CAACoB,KAApC,CAJc,EAmC/BZ,cAnC+B,CAA5B;AAwCP,OAAO,IAAMoC,mBAAmB,GAAG7C,MAAM,CAACW,GAAV,oMACrBV,MAAM,CAAC6C,WADc,EAMnB7C,MAAM,CAAC6C,WANY,CAAzB;AAYP,OAAO,IAAMC,mBAAmB,GAAG/C,MAAM,CAACgD,IAAV,+FAAzB;AAKP,OAAO,IAAMC,iBAAiB,GAAGjD,MAAM,CAACkD,KAAV,2EAAvB;AAGP,OAAO,IAAMC,wBAAwB,GAAGnD,MAAM,CAACW,GAAV,sQACXV,MAAM,CAACkB,WADI,EAERlB,MAAM,CAACkB,WAFC,CAA9B;AAYP,OAAO,IAAMiC,4BAA4B,GAAGpD,MAAM,CAACgD,IAAV,wGAErCzC,kBAAkB,CAACD,kBAAkB,CAACsC,OAApB,EAA6B3C,MAAM,CAACoB,KAApC,CAFmB,CAAlC;AAKP,OAAO,IAAMgC,yBAAyB,GAAGrD,MAAM,CAACW,GAAV,6FAA/B;AAIP,OAAO,IAAM2C,kBAAkB,GAAGtD,MAAM,CAACW,GAAV,iNAMlBH,SAAS,CAAC+C,QANQ,CAAxB;AASP,OAAO,IAAMC,+BAA+B,GAAGxD,MAAM,CAACyD,MAAV,yoBAEfxD,MAAM,CAACkB,WAFQ,EAGlBlB,MAAM,CAACkB,WAHW,EAa5BlB,MAAM,CAAC0B,KAbqB,EAiBxCvB,iBAAiB,CAACE,kBAAkB,CAACc,IAApB,EAA0BnB,MAAM,CAACyB,WAAjC,CAjBuB,EAoBtCxB,WApBsC,EAwB7BM,SAAS,CAACsB,KAxBmB,EAyB1B7B,MAAM,CAAC2B,UAzBmB,EA0B/B3B,MAAM,CAAC4B,WA1BwB,EA8B7BrB,SAAS,CAACyB,MA9BmB,EA+B1BhC,MAAM,CAAC8B,WA/BmB,EAgC/B9B,MAAM,CAAC+B,WAhCwB,CAArC","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\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 ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\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 ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\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  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\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: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n"],"file":"TableStyles.js"}

package/dist/Table/TableTypes.d.ts

@@ -19,6 +19,10 @@ export interface TableProps {
     onRowsPerPageChange?: (count: number) => void;
     onTriggerSortingChange?: (key: string, direction: TableSortingDirection) => void;
     showLoadingIndicator?: boolean;
+    rowsPerPageLabel?: string;
+    noRowsLabel?: string;
+    showMoreLabel?: string;
+    showFewerLabel?: string;
     menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;
     selectable?: boolean;
     onSelectionChange?: (value: any | any[]) => void;

package/dist/Tabs/HorizontalTabs.cjs

@@ -40,7 +40,7 @@ var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_
 
 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  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected{\n    z-index: ", ";\n  }\n  \n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      ", "\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.focusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected {\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.focusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
 
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
@@ -64,10 +64,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalTabContainer, {
+    "data-testid": 'horizontal-tabs-container',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
       className: "".concat(sideFill ? 'fill' : '')
     }), tabs.map(function (tab, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, {
+        "data-testid": "tab_".concat(tab.value),
         tabIndex: tab.disabled ? -1 : 0,
         onMouseDown: _common.defaultOnMouseDownHandler,
         style: fullWidth ? {

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","disabled","defaultOnMouseDownHandler","width","length","selected","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      ${focusStyles}\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          tabIndex={tab.disabled ? -1 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.cjs"}
+{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","disabled","defaultOnMouseDownHandler","width","length","selected"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer data-testid={'horizontal-tabs-container'}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          data-testid={`tab_${tab.value}`}\n          key={`${tab}_${index}`}\n          tabIndex={tab.disabled ? -1 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.cjs"}

package/dist/Tabs/HorizontalTabs.js

@@ -26,7 +26,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n"])));
 var TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.white);
-var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected{\n    z-index: ", ";\n  }\n  \n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      ", "\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, focusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected {\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, focusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
   var size = _ref.size,
@@ -49,10 +49,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
   };
 
   return /*#__PURE__*/_jsxs(HorizontalTabContainer, {
+    "data-testid": 'horizontal-tabs-container',
     children: [/*#__PURE__*/_jsx(TabSideFill, {
       className: "".concat(sideFill ? 'fill' : '')
     }), tabs.map(function (tab, index) {
       return /*#__PURE__*/_jsx(TabButton, {
+        "data-testid": "tab_".concat(tab.value),
         tabIndex: tab.disabled ? -1 : 0,
         onMouseDown: defaultOnMouseDownHandler,
         style: fullWidth ? {

package/dist/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","disabled","width","length","selected","value"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,EAAoCC,WAApC,QAAsD,WAAtD;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AACA,SAAQC,yBAAR,QAAwC,WAAxC,C,CAEA;;;;AACA,IAAMC,sBAAsB,GAAGP,MAAM,CAACQ,GAAV,wJAA5B;AAOA,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,2MAEYX,MAAM,CAACa,WAFnB,EAOCb,MAAM,CAACc,KAPR,CAAjB;AAWA,IAAMC,SAAS,GAAGZ,MAAM,CAACa,MAAV,0iEACJhB,MAAM,CAACiB,WADH,EAQAT,SAAS,CAACU,KARV,EAUKlB,MAAM,CAACmB,UAVZ,EAWAnB,MAAM,CAACoB,WAXP,EAciBpB,MAAM,CAACoB,WAdxB,EAgBkBpB,MAAM,CAACa,WAhBzB,EAiBmBb,MAAM,CAACa,WAjB1B,EAsBAL,SAAS,CAACa,MAtBV,EA0BTnB,WA1BS,EAmCKF,MAAM,CAACmB,UAnCZ,EAoCAnB,MAAM,CAACoB,WApCP,EAuCiBpB,MAAM,CAACoB,WAvCxB,EAyCkBpB,MAAM,CAACa,WAzCzB,EA0CmBb,MAAM,CAACa,WA1C1B,EA+CWb,MAAM,CAACc,KA/ClB,EAgDed,MAAM,CAACsB,WAhDtB,EAkDgBtB,MAAM,CAACa,WAlDvB,EAmDiBb,MAAM,CAACa,WAnDxB,EAuDPX,WAvDO,EA2DKF,MAAM,CAACuB,WA3DZ,EA4DAvB,MAAM,CAACwB,WA5DP,EA6DkBxB,MAAM,CAACyB,QA7DzB,EA6DkDzB,MAAM,CAAC0B,KA7DzD,EAiEiB1B,MAAM,CAACwB,WAjExB,EAmEkBxB,MAAM,CAACa,WAnEzB,EAoEmBb,MAAM,CAACa,WApE1B,EAyEAb,MAAM,CAAC2B,WAzEP,EA+EE3B,MAAM,CAAC2B,WA/ET,EAmFF5B,IAAI,CAAC6B,MAnFH,EAoFPrB,kBAAkB,CAACN,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CApFX,EA0FF9B,IAAI,CAAC+B,KA1FH,EA2FPxB,iBAAiB,CAACL,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CA3FV,EAiGF9B,IAAI,CAACgC,MAjGH,EAkGP1B,iBAAiB,CAACJ,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAlGV,EAwGF9B,IAAI,CAACiC,KAxGH,EAyGP5B,iBAAiB,CAACH,kBAAkB,CAAC4B,OAApB,EAA6B,IAA7B,CAzGV,CAAf,C,CAiHA;;AAgBA,IAAMI,cAAc,GAAG,SAAjBA,cAAiB,OAA0E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,IAAiE,QAAjEA,IAAiE;AAAA,MAA3DC,QAA2D,QAA3DA,QAA2D;AAAA,MAAjDC,SAAiD,QAAjDA,SAAiD;AAAA,MAAtCC,WAAsC,QAAtCA,WAAsC;;AAC/F;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,EAAD,EAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,MAAC,sBAAD;AAAA,4BACE,KAAC,WAAD;AAAa,MAAA,SAAS,YAAKR,QAAQ,GAAG,MAAH,GAAY,EAAzB;AAAtB,MADF,EAEGD,IAAI,CAACU,GAAL,CAAS,UAACC,GAAD,EAAqBC,KAArB;AAAA,0BACR,KAAC,SAAD;AAEE,QAAA,QAAQ,EAAED,GAAG,CAACE,QAAJ,GAAe,CAAC,CAAhB,GAAoB,CAFhC;AAGE,QAAA,WAAW,EAAEvC,yBAHf;AAIE,QAAA,KAAK,EAAE4B,SAAS,GAAG;AAAEY,UAAAA,KAAK,YAAK,MAAMd,IAAI,CAACe,MAAhB;AAAP,SAAH,GAAwC,EAJ1D;AAKE,QAAA,SAAS,iBAAUhB,IAAV,cAAkBY,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAA9C,cAAoDL,GAAG,CAACE,QAAJ,GAAe,UAAf,GAA4B,EAAhF,CALX;AAME,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACF,GAAG,CAACE,QAAL,IAAiBT,WAAW,CAACO,GAAG,CAACN,EAAL,CAAlC;AAAA,SANX;AAAA,+BAOE;AAAK,UAAA,SAAS,iBAAUN,IAAV,cAAkBY,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAA9C,cAAoDL,GAAG,CAACE,QAAJ,GAAe,UAAf,GAA4B,EAAhF,CAAd;AAAA,oBACGF,GAAG,CAACM;AADP;AAPF,mBACUN,GADV,cACiBC,KADjB,EADQ;AAAA,KAAT,CAFH;AAAA,IADF;AAkBD,CAjCD;;;AAbEZ,EAAAA,I;AAOAiB,IAAAA,K;AACAD,IAAAA,Q;AACAX,IAAAA,E;AACAQ,IAAAA,Q;;AATAZ,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;AA6CF,eAAeL,cAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      ${focusStyles}\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          tabIndex={tab.disabled ? -1 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
+{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","value","disabled","width","length","selected"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer data-testid={'horizontal-tabs-container'}>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          data-testid={`tab_${tab.value}`}\n          key={`${tab}_${index}`}\n          tabIndex={tab.disabled ? -1 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/Tabs/__tests__/Tablist.tests.d.ts

@@ -0,0 +1,2 @@
+import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';

package/dist/Toasters/Toast.cjs

@@ -29,8 +29,6 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _Button = require("../Button");
 
-var _typography = require("../styles/typography");
-
 var _HyperLink = require("../HyperLink");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -63,7 +61,7 @@ var Container = _styledComponents.default.div(_templateObject3 || (_templateObje
   return props.withClose ? '0' : '16px';
 }, function (props) {
   return props.withLoader ? '4px' : '0';
-}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.white), _HyperLink.HyperLinkInvertedStyling, _types.ToastColor[_types.ToastColor.BLACK], _styles.COLORS.neutral_800, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.white, _styles.COLORS.black, _HyperLink.HyperLinkDefaultStyling, _types.ToastColor[_types.ToastColor.BLUE], _styles.COLORS.accent1_600, _types.ToastColor[_types.ToastColor.GREEN], _styles.COLORS.correct_500, _types.ToastColor[_types.ToastColor.ORANGE], _styles.COLORS.warning_500, _types.ToastColor[_types.ToastColor.RED], _styles.COLORS.critical_500);
+}, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white), _HyperLink.HyperLinkInvertedStyling, _types.ToastColor[_types.ToastColor.BLACK], _styles.COLORS.neutral_800, _types.ToastColor[_types.ToastColor.WHITE], _styles.COLORS.white, _styles.COLORS.black, _HyperLink.HyperLinkDefaultStyling, _types.ToastColor[_types.ToastColor.BLUE], _styles.COLORS.accent1_600, _types.ToastColor[_types.ToastColor.GREEN], _styles.COLORS.correct_500, _types.ToastColor[_types.ToastColor.ORANGE], _styles.COLORS.warning_500, _types.ToastColor[_types.ToastColor.RED], _styles.COLORS.critical_500);
 
 var ActionButtons = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));