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

package/dist/Table/TableStyles.js

@@ -1,54 +1,46 @@
-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;
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 /**
  * 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 || (_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
+ */
+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;

package/dist/Table/TableTypes.d.ts

@@ -7,32 +7,119 @@ import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
 export interface TableProps {
+    /**
+     * Optional. The title of the table. If provided, a header row will be rendered.
+     */
     title?: string;
+    /**
+     * Required. An array of TableColumn objects, each representing a column in the table.
+     */
     columns: TableColumn[];
+    /**
+     * Required. An array of objects, each representing a row in the table.
+     */
     rows: any[];
+    /**
+     * Optional. A boolean indicating whether the table should have borders.
+     */
     border?: boolean;
+    /**
+     * Optional. A boolean indicating whether the table should be rendered as an accordion table.
+     * If set to 'true' then there will be no pagination, and all rows will be shown on the first page without pagination controls.
+     */
     accordion?: boolean;
+    /**
+     * Optional. A boolean indicating initial state of the table if it is shown in 'accordion' mode, if set to true, it will be collapsed.
+     */
     collapsed?: boolean;
+    /**
+     * Optional. The number of rows to show when the table is shown in accordion mode and collapsed.
+     */
     collapsedRows?: number;
+    /**
+     * Optional. An object of type TableSortProps, representing the properties for sorting the table.
+     */
     sortProps?: TableSortProps;
+    /**
+     * Optional. A boolean indicating whether pagination should be done remotely.
+     */
     remoteOperations?: boolean;
+    /**
+     * Optional. An object of type TablePagination, representing the properties for paginating the table.
+     * Required only if 'remoteOperations' is set to true.
+     */
     pagination?: TablePagination;
+    /**
+     * Optional. A function to be called when the previous page button is clicked.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onPreviousPageClick?: () => void;
+    /**
+     * Optional. A function to be called when the next page button is clicked.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onNextPageClick?: () => void;
+    /**
+     * Optional. A function to be called when the number of rows per page changes.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onRowsPerPageChange?: (count: number) => void;
+    /**
+     * Optional. A function to be called when the sorting direction changes.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void;
+    /**
+     * Optional. A boolean indicating whether a loading indicator should be shown.
+     */
     showLoadingIndicator?: boolean;
+    /**
+     * Optional. The label to be shown next to the rows per page selector.
+     * Defaults to 'Rows per page'.
+     */
     rowsPerPageLabel?: string;
+    /**
+     * Optional. The label to be shown when there are no rows in the grid.
+     * Defaults to 'There are no rows to display'
+     */
     noRowsLabel?: string;
+    /**
+     * Optional. The label to be shown for 'accordion' grid when table is in collapsed state.
+     * Defaults to 'Show more'
+     */
     showMoreLabel?: string;
+    /**
+     * Optional. The label to be shown for 'accordion' grid when user can 'collapse' some of the rows.
+     * Defaults to 'Show more'
+     */
     showFewerLabel?: string;
+    /**
+     * Optional. An object representing the properties for a dropdown menu shown in the header of table.
+     */
     menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;
+    /**
+     * Optional. A boolean indicating whether the rows in the table should be selectable.
+     */
     selectable?: boolean;
+    /**
+     * Optional. A function to be called when some of the rows get selected or unselected.
+     */
     onSelectionChange?: (value: any | any[]) => void;
+    /**
+     * Optional. A boolean indicating whether multiple rows can be selected at once.
+     */
     multiSelect?: boolean;
+    /**
+     * Optional. The key to be used as the unique identifier for each row.
+     */
     keyExpr?: string;
+    /** Optional. Defines initial state of rows (selected/unselected). */
     selectedRows?: any[];
+    /** Optional. Z-Index html attribute to be set to loading indicator. */
     loaderZIndex?: string;
+    /** Optional. Sets value for 'table-layout' css props of Table tag.
+     * If not provided then 'table-layout' will not be set.
+      */
     layout?: TableLayout;
 }
 export interface TableSortProps {
@@ -41,25 +128,68 @@ export interface TableSortProps {
     allowClearingSort?: boolean;
 }
 export interface TableColumn {
+    /**
+     * Required. The key of the column. This should match a key in the row data.
+     */
     key: string;
+    /**
+     * Optional. The key of the note to be displayed in the column.
+     */
     noteKey?: string;
+    /**
+     * Required. The name of the column. This will be displayed in the column header.
+     */
     name: string;
+    /**
+     * Optional. The value to be used for filtering the column.
+     */
     filterValue?: string;
+    /**
+     * Optional. The icon to be displayed in the column.
+     */
     icon?: React.ReactNode;
+    /**
+     * Optional. The width of the column. Can be specified as a string (e.g., '100px') or a number (e.g., 100).
+     */
     width?: string | number;
+    /**
+     * Optional. A function that returns the color for a cell in the column.
+     */
     colorFn?: (row: any, key: string) => string;
+    /**
+     * Optional. The text alignment for the column. Can be 'right', 'left', or 'center'.
+     */
     justify?: TableJustification;
+    /**
+     * Optional. A boolean indicating whether the text in the column should be shortened.
+     */
     shortenText?: boolean;
+    /**
+     * Optional. A function to be called when an action is performed on a cell in the column.
+     */
     action?: (row: any, event: any) => void;
+    /**
+     * Optional. The type of the column. Can be 'text', 'boolean', 'number', 'custom', 'button', 'icon', or 'link'.
+     */
     type?: TableColumnTypes;
+    /**
+     * Optional. Additional properties for the column.
+     */
     additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;
+    /**
+     * Optional. A function that returns custom content for a cell in the column.
+     * Will be used only for button of type 'custom'
+     */
     customContent?: (row: any, key: string) => any;
+    /**
+     * Optional. A boolean indicating whether the column is sortable.
+     */
     sortable?: boolean;
 }
-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 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 interface TablePagination {
     from: number;
     to: number;

package/dist/Table/TableTypes.js

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

package/dist/Table/index.js

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

package/dist/Tabs/HorizontalTabs.d.ts

@@ -3,18 +3,29 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
-    size: Size;
+export interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Required. Size of the Tabs */
+    size: Size.XSmall | Size.Small | Size.Medium | Size.Large;
+    /** Required: Array of Tabs to show */
     tabs: HorizontalTab[];
+    /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */
     sideFill?: boolean;
+    /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width
+     * required for its content.
+     */
     fullWidth?: boolean;
+    /** Required. Handler to be called when user tries to change the tab */
     onTabChange: (to: string) => void;
+    /** Optional. Display variant of the tabs. If not set, then 'default' is used */
     variant?: 'default' | 'floating';
 }
 export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {
+    /** Required. Value of the tab */
     value: string;
+    /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */
     selected: boolean;
+    /** Required. URL related with the Tab */
     to: string;
 }
-declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
+declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => React.JSX.Element;
 export default HorizontalTabs;