@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.13

package/dist/Table/TableStyles.js

@@ -1,46 +1,54 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+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, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
+ */
+import styled from 'styled-components';
+
 /**
  * Import custom style properties.
- */
-import { COLORS, focusStyles, scrollBarStyling } from '../styles';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { StyledCheckBox } from '../InputFields/Checkbox';
-import { Size } from "../types";
+ */
+import { COLORS, focusStyles, scrollBarStyling } from '../styles';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { StyledCheckBox } from '../InputFields/Checkbox';
+import { Size } from "../types";
+
 /**
  * Table styles
- */
-export var TableWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200);
-export var StyledTable = styled.table(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"], ["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
-export var StyledTableHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderTitle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderTitleContent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black));
-export var StyledTableHeaderRow = styled.thead(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderColumns = styled.tr(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableHeaderColumnContent = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\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"], ["\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 StyledTableHeaderColumnSortDirection = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
-export var StyledTableHeaderColumn = styled.th(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
-export var StyledTableBodyRow = styled.tr(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"], ["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.white, COLORS.neutral_200, COLORS.primary_100, COLORS.primary_100, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
-export var StyledTableNoRowsLabelRow = styled.tr(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"], ["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
-export var StyledTableBody = styled.tbody(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableCell = styled.td(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""])));
-export var StyledTableCellContent = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  min-height: ", ";\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"], ["\n  min-height: ", ";\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), function (props) { return props.withNote ? '64px' : '48px'; }, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
-export var StyledTableCellIcon = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"], ["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
-export var StyledTableCellText = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-export var StyledTableCellTextWrapper = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  padding: 12px 0px;\n  width: 100%;\n  ", "\n"], ["\n  padding: 12px 0px;\n  width: 100%;\n  ", "\n"])), function (props) { return !props.textWrap ? "\n  overflow: hidden;\n  text-overflow: ellipsis;\n  " : ""; });
-export var StyledTableCellNoteText = styled.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", "\n  display: inline-block;\n  width: 100%;\n"], ["\n  ", "\n  display: inline-block;\n  width: 100%;\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
-export var StyledTableFooter = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n"], ["\n"])));
-export var StyledTableFooterContent = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\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"], ["\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(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  padding: 0 16px;\n  ", "\n"], ["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
-export var StyledTableFooterControls = styled.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var StyledTableSpinner = styled.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\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"], ["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), function (props) { var _a; return ((_a = props.zindex) !== null && _a !== void 0 ? _a : Z_INDEXES.loader); });
-export var StyledTableFooterCollapseButton = styled.button(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\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"], ["\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 StyledTableBodyWrapper = styled.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"], ["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), scrollBarStyling(Size.Small));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
+ */
+
+export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var StyledTable = styled.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: transparent;\n  border-collapse: collapse;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n"])));
+export var StyledTableHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeaderTitleContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ", ";\n  border-top: 2px solid ", ";\n  padding: 0 16px;\n\n  ", "\n  .title-menu {\n    margin-right: -16px;\n  }\n"])), COLORS.neutral_200, COLORS.neutral_200, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black));
+export var StyledTableHeaderRow = styled.thead(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeaderColumns = styled.tr(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableHeaderColumnContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var StyledTableHeaderColumnSortDirection = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
+export var StyledTableHeaderColumn = styled.th(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
+export var StyledTableBodyRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  background-color: ", ";\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.white, COLORS.neutral_200, COLORS.primary_100, COLORS.primary_100, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
+export var StyledTableNoRowsLabelRow = styled.tr(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
+export var StyledTableBody = styled.tbody(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableCell = styled.td(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([""])));
+export var StyledTableCellContent = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  min-height: ", ";\n\n  padding: 0 16px;\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ", "{\n    width: fit-content;\n  }\n"])), function (props) {
+  return props.withNote ? '64px' : '48px';
+}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
+export var StyledTableCellIcon = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 20px;\n  height: 20px;\n\n  svg {\n    color: ", ";\n    width: 20px;\n    height: 20px;\n  }\n"])), COLORS.neutral_700, COLORS.neutral_700);
+export var StyledTableCellText = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: block;\n"])));
+export var StyledTableCellTextWrapper = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  padding: 12px 0px;\n  width: 100%;\n  ", "\n"])), function (props) {
+  return !props.textWrap ? "\n  overflow: hidden;\n  text-overflow: ellipsis;\n  " : "";
+});
+export var StyledTableCellNoteText = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  ", "\n  display: inline-block;\n  width: 100%;\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
+export var StyledTableFooter = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n"])));
+export var StyledTableFooterContent = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  border-top: 2px solid ", ";\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
+export var StyledTableFooterCurrentInfo = styled.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
+export var StyledTableFooterControls = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var StyledTableSpinner = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ", ";\n"])), function (props) {
+  var _props$zindex;
+  return (_props$zindex = props.zindex) !== null && _props$zindex !== void 0 ? _props$zindex : Z_INDEXES.loader;
+});
+export var StyledTableFooterCollapseButton = styled.button(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n  position: relative;\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ", ";\n\n  cursor: pointer;\n\n  ", "\n  \n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background: ", ";\n    color: ", ";\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n"])), COLORS.neutral_200, COLORS.neutral_200, COLORS.white, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
+export var StyledTableBodyWrapper = styled.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), scrollBarStyling(Size.Small));
+//# sourceMappingURL=TableStyles.js.map

package/dist/Table/TableTypes.d.ts

@@ -186,10 +186,10 @@ export interface TableColumn {
      */
     sortable?: boolean;
 }
-export declare type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
-export declare type TableJustification = 'right' | 'left' | 'center';
-export declare type TableSortingDirection = 'asc' | 'desc';
-export declare type TableLayout = 'auto' | 'fixed';
+export type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
+export type TableJustification = 'right' | 'left' | 'center';
+export type TableSortingDirection = 'asc' | 'desc';
+export type TableLayout = 'auto' | 'fixed';
 export interface TablePagination {
     from: number;
     to: number;

package/dist/Table/TableTypes.js

@@ -1,2 +1,2 @@
-export {};
-// will override component properties in case of button, icon and link
+export {};
+//# sourceMappingURL=TableTypes.js.map

package/dist/Table/index.js

@@ -1,3 +1,4 @@
-export * from './TableTypes';
-export * from './TableStyles';
-export { default as Table } from './Table';
+export * from './TableTypes';
+export * from './TableStyles';
+export { default as Table } from './Table';
+//# sourceMappingURL=index.js.map

package/dist/Tabs/HorizontalTabs.js

@@ -1,122 +1,167 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
+  _excluded2 = ["value", "selected", "to", "disabled", "className"];
+var _templateObject, _templateObject2, _templateObject3;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
+ */
+import * as React from 'react';
+import { Size } from '../types';
+
 /**
  * Import custom styles.
- */
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+ */
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
-import { Z_INDEXES } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-// Add custom styles
-var HorizontalTabContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"], ["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"])), focusStyles);
-var TabSideFill = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"], ["\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(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"], ["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), COLORS.neutral_600, Z_INDEXES.active, COLORS.white, COLORS.neutral_800, COLORS.neutral_20, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, 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));
-var HorizontalTabs = function (_a) {
-    var size = _a.size, tabs = _a.tabs, sideFill = _a.sideFill, fullWidth = _a.fullWidth, onTabChange = _a.onTabChange, variant = _a.variant, rest = __rest(_a, ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"]);
-    /**
-     * Informs parent component of tab change and clears focus.
-     * @param to - A link to which user should be navigated.
-     */
-    var doTabChange = function (to) {
-        // Let's inform parent component
-        onTabChange(to);
-        // Let's clear focus
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-        }
-    };
-    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
-    var _c = React.useState(), currentTab = _c[0], setCurrentTab = _c[1];
-    React.useEffect(function () {
-        var selectedTab = tabs.find(function (x) { return x.selected && !x.disabled; });
-        if (selectedTab)
-            setCurrentTab(selectedTab.to);
-    }, [tabs]);
-    var tabListBlur = function () { return setFocused(false); };
-    var tabListFocus = function (e) { return setFocused(true); };
-    var changeTabInternal = function (tab) {
-        tab.selected = true;
-        tabs.forEach(function (x) {
-            if (x.to != tab.to)
-                x.selected = false;
-        });
-        setCurrentTab(tab.to);
-        onTabChange(tab.to);
-    };
-    var tabListKeyDown = function (e) {
-        if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
-            e.preventDefault();
-            if (e.key === 'ArrowRight') {
-                tabs.forEach(function (x, i) {
-                    if (x.to != currentTab)
-                        return;
-                    for (var j = 1; j < tabs.length - 1; j++) {
-                        var nextIndex = j + i;
-                        if (nextIndex > tabs.length - 1)
-                            nextIndex = nextIndex - tabs.length;
-                        if (tabs[nextIndex].disabled)
-                            continue;
-                        changeTabInternal(tabs[nextIndex]);
-                        break;
-                    }
-                });
-            }
-            if (e.key === 'ArrowLeft') {
-                tabs.forEach(function (x, i) {
-                    if (x.to != currentTab)
-                        return;
-                    for (var j = 1; j < tabs.length - 1; j++) {
-                        var nextIndex = i - j;
-                        if (nextIndex < 0)
-                            nextIndex = nextIndex + tabs.length;
-                        if (tabs[nextIndex].disabled)
-                            continue;
-                        changeTabInternal(tabs[nextIndex]);
-                        break;
-                    }
-                });
-            }
-        }
-    };
-    return (React.createElement(HorizontalTabContainer, __assign({ tabIndex: 0, onBlur: tabListBlur, onFocus: tabListFocus, onKeyDown: tabListKeyDown, role: "tablist", "data-testid": 'horizontal-tabs-container' }, rest),
-        variant !== 'floating' && React.createElement(TabSideFill, { tabIndex: -1, className: "".concat(sideFill ? 'fill' : '') }),
-        tabs.map(function (tab, index) {
-            var value = tab.value, selected = tab.selected, to = tab.to, disabled = tab.disabled, className = tab.className, rest = __rest(tab, ["value", "selected", "to", "disabled", "className"]);
-            return (React.createElement(TabButton, __assign({ role: "tab", "data-testid": "tab_".concat(value), key: "".concat(tab, "_").concat(index), "aria-selected": selected, "aria-expanded": selected, tabIndex: -1, onMouseDown: defaultOnMouseDownHandler, style: fullWidth ? { width: "".concat(100 / tabs.length, "%") } : {}, disabled: disabled, className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''), onClick: function () { return !disabled && changeTabInternal(tab); } }, rest), tab.value));
-        })));
-};
-export default HorizontalTabs;
-var templateObject_1, templateObject_2, templateObject_3;
+ */
+import styled from 'styled-components';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
+import { Z_INDEXES } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// Add custom styles
+var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"])), focusStyles);
+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  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), COLORS.neutral_600, Z_INDEXES.active, COLORS.white, COLORS.neutral_800, COLORS.neutral_20, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, 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,
+    tabs = _ref.tabs,
+    sideFill = _ref.sideFill,
+    fullWidth = _ref.fullWidth,
+    onTabChange = _ref.onTabChange,
+    variant = _ref.variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * Informs parent component of tab change and clears focus.
+   * @param to - A link to which user should be navigated.
+   */
+  var doTabChange = function doTabChange(to) {
+    // Let's inform parent component
+    onTabChange(to);
+
+    // Let's clear focus
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  };
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    currentTab = _React$useState4[0],
+    setCurrentTab = _React$useState4[1];
+  React.useEffect(function () {
+    var selectedTab = tabs.find(function (x) {
+      return x.selected && !x.disabled;
+    });
+    if (selectedTab) setCurrentTab(selectedTab.to);
+  }, [tabs]);
+  var tabListBlur = function tabListBlur() {
+    return setFocused(false);
+  };
+  var tabListFocus = function tabListFocus(e) {
+    return setFocused(true);
+  };
+  var changeTabInternal = function changeTabInternal(tab) {
+    tab.selected = true;
+    tabs.forEach(function (x) {
+      if (x.to != tab.to) x.selected = false;
+    });
+    setCurrentTab(tab.to);
+    onTabChange(tab.to);
+  };
+  var tabListKeyDown = function tabListKeyDown(e) {
+    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+      e.preventDefault();
+      if (e.key === 'ArrowRight') {
+        tabs.forEach(function (x, i) {
+          if (x.to != currentTab) return;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = j + i;
+            if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
+            if (tabs[nextIndex].disabled) continue;
+            changeTabInternal(tabs[nextIndex]);
+            break;
+          }
+        });
+      }
+      if (e.key === 'ArrowLeft') {
+        tabs.forEach(function (x, i) {
+          if (x.to != currentTab) return;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = i - j;
+            if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
+            if (tabs[nextIndex].disabled) continue;
+            changeTabInternal(tabs[nextIndex]);
+            break;
+          }
+        });
+      }
+    }
+  };
+  return /*#__PURE__*/_jsxs(HorizontalTabContainer, _objectSpread(_objectSpread({
+    tabIndex: 0,
+    onBlur: tabListBlur,
+    onFocus: tabListFocus,
+    onKeyDown: tabListKeyDown,
+    role: "tablist",
+    "data-testid": 'horizontal-tabs-container'
+  }, rest), {}, {
+    children: [variant !== 'floating' && /*#__PURE__*/_jsx(TabSideFill, {
+      tabIndex: -1,
+      className: "".concat(sideFill ? 'fill' : '')
+    }), tabs.map(function (tab, index) {
+      var value = tab.value,
+        selected = tab.selected,
+        to = tab.to,
+        disabled = tab.disabled,
+        className = tab.className,
+        rest = _objectWithoutProperties(tab, _excluded2);
+      return /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
+        role: "tab",
+        "data-testid": "tab_".concat(value),
+        "aria-selected": selected,
+        "aria-expanded": selected,
+        tabIndex: -1,
+        onMouseDown: defaultOnMouseDownHandler,
+        style: fullWidth ? {
+          width: "".concat(100 / tabs.length, "%")
+        } : {},
+        disabled: disabled,
+        className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
+        onClick: function onClick() {
+          return !disabled && changeTabInternal(tab);
+        }
+      }, rest), {}, {
+        children: tab.value
+      }), "".concat(tab, "_").concat(index));
+    })]
+  }));
+};
+HorizontalTabs.propTypes = {
+  tabs: _pt.arrayOf(_pt.shape({
+    value: _pt.string.isRequired,
+    selected: _pt.bool.isRequired,
+    to: _pt.string.isRequired
+  })).isRequired,
+  sideFill: _pt.bool,
+  fullWidth: _pt.bool,
+  onTabChange: _pt.func.isRequired,
+  variant: _pt.oneOf(['default', 'floating'])
+};
+export default HorizontalTabs;
+//# sourceMappingURL=HorizontalTabs.js.map