@laerdal/life-react-components 3.0.1-dev.13.full → 3.0.1-dev.14.full

package/dist/Table/TableStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableStyles.cjs","names":["TableWrapper","styled","div","COLORS","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","ComponentLStyling","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} 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';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ${COLORS.neutral_200};\n    border-right: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const StyledTable = styled.table`\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\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\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 StyledTableHeaderRow = styled.thead`\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 StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\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  &.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 ${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  background-color: ${COLORS.white};\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ${COLORS.neutral_200};\n  }\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_100};\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`;\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.div`\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\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TableStyles.cjs","names":["TableWrapper","styled","div","COLORS","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","ComponentLStyling","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner","props","zindex","loader","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} 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';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ${COLORS.neutral_200};\n    border-right: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const StyledTable = styled.table`\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\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\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 StyledTableHeaderRow = styled.thead`\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 StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\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  &.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 ${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  background-color: ${COLORS.white};\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ${COLORS.neutral_200};\n  }\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_100};\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`;\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.div`\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<{zindex?: string}>`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\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\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":"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"}

package/dist/Table/TableStyles.d.ts

@@ -22,6 +22,8 @@ export declare const StyledTableFooter: import("styled-components").StyledCompon
 export declare const StyledTableFooterContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledTableFooterCurrentInfo: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledTableFooterControls: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTableSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTableSpinner: import("styled-components").StyledComponent<"div", any, {
+    zindex?: string | undefined;
+}, never>;
 export declare const StyledTableFooterCollapseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const StyledTableBodyWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Table/TableStyles.js

@@ -39,7 +39,10 @@ export var StyledTableFooter = styled.div(_templateObject18 || (_templateObject1
 export var StyledTableFooterContent = styled.div(_templateObject19 || (_templateObject19 = _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(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  padding: 0 16px;\n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
 export var StyledTableFooterControls = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var StyledTableSpinner = styled.div(_templateObject22 || (_templateObject22 = _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 StyledTableSpinner = styled.div(_templateObject22 || (_templateObject22 = _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(_templateObject23 || (_templateObject23 = _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(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n"])), scrollBarStyling(Size.Small));
 //# sourceMappingURL=TableStyles.js.map

package/dist/Table/TableStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} 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';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ${COLORS.neutral_200};\n    border-right: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const StyledTable = styled.table`\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\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\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 StyledTableHeaderRow = styled.thead`\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 StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\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  &.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 ${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  background-color: ${COLORS.white};\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ${COLORS.neutral_200};\n  }\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_100};\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`;\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.div`\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\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","props","zindex","loader","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} 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';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n\n  &.border{\n    border-left: 1px solid ${COLORS.neutral_200};\n    border-right: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\n\nexport const StyledTable = styled.table`\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\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\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 StyledTableHeaderRow = styled.thead`\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 StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\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  &.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 ${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  background-color: ${COLORS.white};\n  \n  &:not(:last-child) {\n    border-bottom: 1px solid ${COLORS.neutral_200};\n  }\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_100};\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`;\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.div`\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<{zindex?: string}>`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\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\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAAQC,MAAM,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC/D,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,QACb,sBAAsB;AAC7B,SAAQC,SAAS,QAAO,qBAAqB;AAC7C,SAAQC,cAAc,QAAO,yBAAyB;AACtD,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;;AAEA,OAAO,IAAMC,YAAY,GAAGZ,MAAM,CAACa,GAAG,wLAITZ,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,CAE/C;AAGD,OAAO,IAAMC,WAAW,GAAGf,MAAM,CAACgB,KAAK,6OAYtC;AAED,OAAO,IAAMC,iBAAiB,GAAGjB,MAAM,CAACa,GAAG,yEAC1C;AAED,OAAO,IAAMK,sBAAsB,GAAGlB,MAAM,CAACa,GAAG,yEAC/C;AAED,OAAO,IAAMM,6BAA6B,GAAGnB,MAAM,CAACa,GAAG,sWAO1BZ,MAAM,CAACa,WAAW,EACrBb,MAAM,CAACa,WAAW,EAGxCV,iBAAiB,CAACG,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAACoB,KAAK,CAAC,CAI3D;AAED,OAAO,IAAMC,oBAAoB,GAAGtB,MAAM,CAACuB,KAAK,yEAC/C;AAED,OAAO,IAAMC,wBAAwB,GAAGxB,MAAM,CAACyB,EAAE,yEAChD;AAED,OAAO,IAAMC,8BAA8B,GAAG1B,MAAM,CAACa,GAAG,6SAQ9BZ,MAAM,CAACa,WAAW,EACfb,MAAM,CAACa,WAAW,CAC9C;AAED,OAAO,IAAMa,oCAAoC,GAAG3B,MAAM,CAAC4B,IAAI,0GAG9D;AAED,OAAO,IAAMC,uBAAuB,GAAG7B,MAAM,CAAC8B,EAAE,k2BAC5CxB,iBAAiB,CAACC,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAAC8B,WAAW,CAAC,EAG5C9B,MAAM,CAAC+B,KAAK,EASR/B,MAAM,CAACgC,UAAU,EAC5BhC,MAAM,CAACiC,WAAW,EAChBzB,SAAS,CAAC0B,KAAK,EAINlC,MAAM,CAACmC,WAAW,EAC7BnC,MAAM,CAACoC,WAAW,EAChB5B,SAAS,CAAC6B,MAAM,EAIzBpC,WAAW,EAsBJwB,8BAA8B,EAIvBA,8BAA8B,EAK5BzB,MAAM,CAACsC,UAAU,CAExC;AAED,OAAO,IAAMC,kBAAkB,GAAGxC,MAAM,CAACyB,EAAE,4aAIrBxB,MAAM,CAAC+B,KAAK,EAGH/B,MAAM,CAACa,WAAW,EAIzBb,MAAM,CAACmC,WAAW,EAIlBnC,MAAM,CAACmC,WAAW,EAC3B3B,SAAS,CAAC0B,KAAK,EAIxBjC,WAAW,EAIFO,SAAS,CAAC6B,MAAM,CAG9B;AAED,OAAO,IAAMG,yBAAyB,GAAGzC,MAAM,CAACyB,EAAE,gJAG5BxB,MAAM,CAACyC,UAAU,CACtC;AAED,OAAO,IAAMC,eAAe,GAAG3C,MAAM,CAAC4C,KAAK,2EAC1C;AAGD,OAAO,IAAMC,eAAe,GAAG7C,MAAM,CAAC8C,EAAE,yEAAE;AAE1C,OAAO,IAAMC,sBAAsB,GAAG/C,MAAM,CAACa,GAAG,qmBAI5CP,iBAAiB,CAACC,kBAAkB,CAACyC,OAAO,EAAE/C,MAAM,CAACoB,KAAK,CAAC,EA+B3DX,cAAc,CAGjB;AAED,OAAO,IAAMuC,mBAAmB,GAAGjD,MAAM,CAACa,GAAG,oMAClCZ,MAAM,CAACiD,WAAW,EAKhBjD,MAAM,CAACiD,WAAW,CAI9B;AAED,OAAO,IAAMC,mBAAmB,GAAGnD,MAAM,CAAC4B,IAAI,+FAE7C;AAGD,OAAO,IAAMwB,iBAAiB,GAAGpD,MAAM,CAACa,GAAG,2EAC1C;AAED,OAAO,IAAMwC,wBAAwB,GAAGrD,MAAM,CAACa,GAAG,sQACxBZ,MAAM,CAACa,WAAW,EACfb,MAAM,CAACa,WAAW,CAQ9C;AAED,OAAO,IAAMwC,4BAA4B,GAAGtD,MAAM,CAAC4B,IAAI,wGAEnDpB,kBAAkB,CAACD,kBAAkB,CAACyC,OAAO,EAAE/C,MAAM,CAACoB,KAAK,CAAC,CAC/D;AAED,OAAO,IAAMkC,yBAAyB,GAAGvD,MAAM,CAACa,GAAG,6FAElD;AAED,OAAO,IAAM2C,kBAAkB,GAAGxD,MAAM,CAACa,GAAG,iNAM/B,UAAC4C,KAAK;EAAA;EAAA,wBAAMA,KAAK,CAACC,MAAM,yDAAIjD,SAAS,CAACkD,MAAM;AAAA,CAAC,CACzD;AAED,OAAO,IAAMC,+BAA+B,GAAG5D,MAAM,CAAC6D,MAAM,yoBAE/B5D,MAAM,CAACa,WAAW,EACrBb,MAAM,CAACa,WAAW,EAU5Bb,MAAM,CAAC+B,KAAK,EAIxB3B,iBAAiB,CAACE,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAAC8B,WAAW,CAAC,EAG5D7B,WAAW,EAIFO,SAAS,CAAC0B,KAAK,EACZlC,MAAM,CAACgC,UAAU,EACtBhC,MAAM,CAACiC,WAAW,EAIhBzB,SAAS,CAAC6B,MAAM,EACbrC,MAAM,CAACmC,WAAW,EACvBnC,MAAM,CAACoC,WAAW,CAO9B;AAGD,OAAO,IAAMyB,sBAAsB,GAAG9D,MAAM,CAACa,GAAG,6OAE5CV,gBAAgB,CAACQ,IAAI,CAACoD,KAAK,CAAC,CAU/B"}

package/dist/Table/TableTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableTypes.cjs","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  border?: boolean;\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}
+{"version":3,"file":"TableTypes.cjs","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  border?: boolean;\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n  loaderZIndex?: string;\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n  allowClearingSort?: boolean;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}

package/dist/Table/TableTypes.d.ts

@@ -32,11 +32,13 @@ export interface TableProps {
     multiSelect?: boolean;
     keyExpr?: string;
     selectedRows?: any[];
+    loaderZIndex?: string;
     layout?: TableLayout;
 }
 export interface TableSortProps {
     column: string;
     direction: TableSortingDirection;
+    allowClearingSort?: boolean;
 }
 export interface TableColumn {
     key: string;

package/dist/Table/TableTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  border?: boolean;\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}
+{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  border?: boolean;\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n  loaderZIndex?: string;\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n  allowClearingSort?: boolean;\n}\n\nexport interface TableColumn {\n  key: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}

package/dist/Toggles/ToggleButton.cjs

@@ -20,7 +20,7 @@ var _excluded = ["id", "active", "onChange", "disabled", "defaultState", "active
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), _Iconbutton.IconButtonContent, _Iconbutton.IconButtonContent, _styles.COLORS.white, _Iconbutton.IconButtonContent, _styles.COLORS.primary_500, _Iconbutton.IconButtonContent, _styles.COLORS.neutral_300);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), _Iconbutton.IconButtonContentStyles, _Iconbutton.IconButtonContentStyles, _styles.COLORS.white, _Iconbutton.IconButtonContentStyles, _styles.COLORS.primary_500, _Iconbutton.IconButtonContentStyles, _styles.COLORS.neutral_300);
 var ToggleButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _activeState$color, _activeState$icon;
   var id = _ref.id,

package/dist/Toggles/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","names":["Wrapper","styled","div","IconButtonContent","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContent } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAEnC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,okBACtBC,6BAAiB,EAMfA,6BAAiB,EACHC,cAAM,CAACC,KAAK,EAK1BF,6BAAiB,EAKGC,cAAM,CAACE,WAAW,EAQtCH,6BAAiB,EACHC,cAAM,CAACG,WAAW,CAGrC;AAgBM,IAAMC,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCV,cAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5Bb,cAAK,CAACc,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,qBAAC,kBAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;AAAA;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAAA,eAoDQjB,YAAY;AAAA"}
+{"version":3,"file":"ToggleButton.cjs","names":["Wrapper","styled","div","IconButtonContentStyles","COLORS","white","primary_500","neutral_300","ToggleButton","React","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContentStyles} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAEnC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,okBACtBC,mCAAuB,EAMrBA,mCAAuB,EACTC,cAAM,CAACC,KAAK,EAK1BF,mCAAuB,EAKHC,cAAM,CAACE,WAAW,EAQtCH,mCAAuB,EACTC,cAAM,CAACG,WAAW,CAGrC;AAgBM,IAAMC,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCV,cAAK,CAACW,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5Bb,cAAK,CAACc,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,qBAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,qBAAC,kBAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;AAAA;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAAA,eAoDQjB,YAAY;AAAA"}

package/dist/Toggles/ToggleButton.js

@@ -10,10 +10,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { IconButton } from '../Button';
 import styled from 'styled-components';
-import { IconButtonContent } from '../Button/Iconbutton';
+import { IconButtonContentStyles } from '../Button/Iconbutton';
 import { COLORS } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.primary_500, IconButtonContent, COLORS.neutral_300);
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_500, IconButtonContentStyles, COLORS.neutral_300);
 export var ToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _activeState$color, _activeState$icon;
   var id = _ref.id,

package/dist/Toggles/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContent","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContent } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContent} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContent} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContent}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContent}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,MAAM,QAAQ,WAAW;AAAC;AAEnC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,sjBACtBH,iBAAiB,EAMfA,iBAAiB,EACHC,MAAM,CAACG,KAAK,EAK1BJ,iBAAiB,EAKGC,MAAM,CAACI,WAAW,EAQtCL,iBAAiB,EACHC,MAAM,CAACK,WAAW,CAGrC;AAgBD,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCpB,KAAK,CAACqB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5BvB,KAAK,CAACwB,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,KAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,KAAC,UAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAoDP,eAAehB,YAAY"}
+{"version":3,"file":"ToggleButton.js","names":["React","IconButton","styled","IconButtonContentStyles","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","forwardRef","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","useState","isActive","setIsActive","useEffect","cls","color","icon"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\nimport { IconButton } from '../Button';\nimport styled from 'styled-components';\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\nimport { COLORS } from '../styles';\n\nconst Wrapper = styled.div`\n  ${IconButtonContentStyles} {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles} {\n      background: ${COLORS.white};\n    }\n  }\n\n  &.active:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ${COLORS.primary_500};\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ${IconButtonContentStyles}:after {\n      background: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface ToggleButtonState {\n  icon: React.ReactNode;\n  color?: string;\n}\n\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\n  active: boolean;\n  onChange?: (value: boolean) => void;\n  disabled?: boolean;\n\n  defaultState: ToggleButtonState;\n  activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton = React.forwardRef(({\n                                                id,\n                                                active,\n                                                onChange,\n                                                disabled,\n                                                defaultState,\n                                                activeState,\n                                                className,\n                                                ...rest\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => setIsActive(active), [active]);\n\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper className={cls}>\n      <IconButton\n        variant={'secondary'}\n        ref={ref}\n        useTransparentBackground={true}\n        shape={'circular'}\n        action={() => {\n          setIsActive(!isActive);\n          if (onChange) {\n            onChange(!isActive);\n          }\n        }}\n        id={id}\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\n        disabled={disabled}\n        aria-pressed={isActive}\n        {...rest}>\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\n      </IconButton>\n    </Wrapper>\n  );\n});\n\nexport default ToggleButton;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,WAAW;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,uBAAuB,QAAQ,sBAAsB;AAC9D,SAASC,MAAM,QAAQ,WAAW;AAAC;AAEnC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,sjBACtBH,uBAAuB,EAMrBA,uBAAuB,EACTC,MAAM,CAACG,KAAK,EAK1BJ,uBAAuB,EAKHC,MAAM,CAACI,WAAW,EAQtCL,uBAAuB,EACTC,MAAM,CAACK,WAAW,CAGrC;AAgBD,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAAC,gBASuBC,GAAiC,EAAK;EAAA;EAAA,IAR1DC,EAAE,QAAFA,EAAE;IACFC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,SAAS,QAATA,SAAS;IACNC,IAAI;EAErD,sBAAgCpB,KAAK,CAACqB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA9CC,QAAQ;IAAEC,WAAW;EAE5BvB,KAAK,CAACwB,SAAS,CAAC;IAAA,OAAMD,WAAW,CAACT,MAAM,CAAC;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEpD,IAAMW,GAAG,aAAMN,SAAS,IAAI,EAAE,cAAIG,QAAQ,GAAG,QAAQ,GAAG,EAAE,cAAIJ,WAAW,GAAG,cAAc,GAAG,EAAE,cAAIF,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE;EAE/H,oBACE,KAAC,OAAO;IAAC,SAAS,EAAES,GAAI;IAAA,uBACtB,KAAC,UAAU;MACT,OAAO,EAAE,WAAY;MACrB,GAAG,EAAEb,GAAI;MACT,wBAAwB,EAAE,IAAK;MAC/B,KAAK,EAAE,UAAW;MAClB,MAAM,EAAE,kBAAM;QACZW,WAAW,CAAC,CAACD,QAAQ,CAAC;QACtB,IAAIP,QAAQ,EAAE;UACZA,QAAQ,CAAC,CAACO,QAAQ,CAAC;QACrB;MACF,CAAE;MACF,EAAE,EAAET,EAAG;MACP,SAAS,EAAES,QAAQ,yBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEQ,KAAK,mEAAIT,YAAY,CAACS,KAAK,GAAGT,YAAY,CAACS,KAAM;MACpF,QAAQ,EAAEV,QAAS;MACnB,gBAAcM;IAAS,GACnBF,IAAI;MAAA,UACPE,QAAQ,wBAAGJ,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAES,IAAI,iEAAIV,YAAY,CAACU,IAAI,GAAGV,YAAY,CAACU;IAAI;EAC3D,EACL;AAEd,CAAC,CAAC;AAAC;EA9CDb,MAAM;EACNC,QAAQ;EACRC,QAAQ;EAERC,YAAY;IATZU,IAAI;IACJD,KAAK;EAAA;EASLR,WAAW;IAVXS,IAAI;IACJD,KAAK;EAAA;AAAA;AAoDP,eAAehB,YAAY"}

package/dist/styles/z-indexes.cjs

@@ -9,6 +9,7 @@ var Z_INDEXES = {
   active: '2',
   focus: '3',
   badge: '10',
+  loader: '990',
   dropdown: '1000',
   sticky_menu: '1020',
   fixed_menu: '1030',

package/dist/styles/z-indexes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"z-indexes.cjs","names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip","popover"],"sources":["../../src/styles/z-indexes.ts"],"sourcesContent":["export const Z_INDEXES = {\n  hover: '1',\n  active: '2',\n  focus: '3',\n\n  badge: '10',\n\n\n  dropdown: '1000',\n  sticky_menu: '1020',\n  fixed_menu: '1030',\n  backdrop: '1040',\n  off_canvas: '1050',\n  modal: '1060',\n  toast: '1070',\n  tooltip: '1080',\n  popover: '1070'\n}\n"],"mappings":";;;;;;AAAO,IAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,GAAG;EAEVC,KAAK,EAAE,IAAI;EAGXC,QAAQ,EAAE,MAAM;EAChBC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,MAAM;EAClBC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,OAAO,EAAE;AACX,CAAC;AAAA"}
+{"version":3,"file":"z-indexes.cjs","names":["Z_INDEXES","hover","active","focus","badge","loader","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip","popover"],"sources":["../../src/styles/z-indexes.ts"],"sourcesContent":["export const Z_INDEXES = {\n  hover: '1',\n  active: '2',\n  focus: '3',\n\n  badge: '10',\n\n  loader: '990',  \n  dropdown: '1000',\n  sticky_menu: '1020',\n  fixed_menu: '1030',\n  backdrop: '1040',\n  off_canvas: '1050',\n  modal: '1060',\n  toast: '1070',\n  tooltip: '1080',\n  popover: '1070'\n}\n"],"mappings":";;;;;;AAAO,IAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,GAAG;EAEVC,KAAK,EAAE,IAAI;EAEXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,MAAM;EAChBC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,MAAM;EAClBC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,OAAO,EAAE;AACX,CAAC;AAAA"}

package/dist/styles/z-indexes.d.ts

@@ -3,6 +3,7 @@ export declare const Z_INDEXES: {
     active: string;
     focus: string;
     badge: string;
+    loader: string;
     dropdown: string;
     sticky_menu: string;
     fixed_menu: string;

package/dist/styles/z-indexes.js

@@ -3,6 +3,7 @@ export var Z_INDEXES = {
   active: '2',
   focus: '3',
   badge: '10',
+  loader: '990',
   dropdown: '1000',
   sticky_menu: '1020',
   fixed_menu: '1030',

package/dist/styles/z-indexes.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-indexes.js","names":["Z_INDEXES","hover","active","focus","badge","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip","popover"],"sources":["../../src/styles/z-indexes.ts"],"sourcesContent":["export const Z_INDEXES = {\n  hover: '1',\n  active: '2',\n  focus: '3',\n\n  badge: '10',\n\n\n  dropdown: '1000',\n  sticky_menu: '1020',\n  fixed_menu: '1030',\n  backdrop: '1040',\n  off_canvas: '1050',\n  modal: '1060',\n  toast: '1070',\n  tooltip: '1080',\n  popover: '1070'\n}\n"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,GAAG;EAEVC,KAAK,EAAE,IAAI;EAGXC,QAAQ,EAAE,MAAM;EAChBC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,MAAM;EAClBC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,OAAO,EAAE;AACX,CAAC"}
+{"version":3,"file":"z-indexes.js","names":["Z_INDEXES","hover","active","focus","badge","loader","dropdown","sticky_menu","fixed_menu","backdrop","off_canvas","modal","toast","tooltip","popover"],"sources":["../../src/styles/z-indexes.ts"],"sourcesContent":["export const Z_INDEXES = {\n  hover: '1',\n  active: '2',\n  focus: '3',\n\n  badge: '10',\n\n  loader: '990',  \n  dropdown: '1000',\n  sticky_menu: '1020',\n  fixed_menu: '1030',\n  backdrop: '1040',\n  off_canvas: '1050',\n  modal: '1060',\n  toast: '1070',\n  tooltip: '1080',\n  popover: '1070'\n}\n"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,GAAG;EAEVC,KAAK,EAAE,IAAI;EAEXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,MAAM;EAChBC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,MAAM;EAClBC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,OAAO,EAAE;AACX,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "3.0.1-dev.13.full",
+  "version": "3.0.1-dev.14.full",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],