@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.5.full

package/dist/Table/TableStyles.js

@@ -20,8 +20,14 @@ export const TableWrapper = styled.div`
   position: relative;
 
   &.border{
-    border-left: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
-    border-right: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+    border-left: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+    border-right: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 export const StyledTable = styled.table`
@@ -48,11 +54,20 @@ export const StyledTableHeaderTitleContent = styled.div`
   width: 100%;
   box-sizing: border-box;
   min-height: 56px;
-  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
-  border-top: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  border-top: 2px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   padding: 0 16px;
 
-  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}
+  ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   .title-menu {
     margin-right: -16px;
   }
@@ -69,18 +84,30 @@ export const StyledTableHeaderColumnContent = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
-  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  border-top: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
 `;
 export const StyledTableHeaderColumnSortDirection = styled.span`
   width: 24px;
   height: 24px;
 `;
 export const StyledTableHeaderColumn = styled.th`
-  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   position: relative;
   text-align: unset;
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'high'
+}, props.theme)};
 
   //fixes header heights no idea why
   height: 1px;
@@ -89,14 +116,26 @@ export const StyledTableHeaderColumn = styled.th`
     cursor: pointer;
 
     &:hover {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
-      color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
       z-index: ${Z_INDEXES.hover};
     }
 
     &:active {
-      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-      color: ${props => COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
       z-index: ${Z_INDEXES.active};
     }
 
@@ -139,18 +178,30 @@ export const StyledTableBodyRow = styled.tr`
   cursor: pointer;
   position: relative;
   outline: none;
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   
   &:not(:last-child) {
-    border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+    border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &.selected{
-    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
   }
   
   &:hover {
-    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     z-index: ${Z_INDEXES.hover};
   }
 
@@ -166,7 +217,10 @@ export const StyledTableBodyRow = styled.tr`
 export const StyledTableNoRowsLabelRow = styled.tr`
   position: relative;
   outline: none;
-  background-color: ${props => COLORS.getColor('neutral_50', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'high'
+}, props.theme)};
 `;
 export const StyledTableBody = styled.tbody`
 `;
@@ -175,7 +229,10 @@ export const StyledTableCellContent = styled.div`
   min-height: ${props => props.$withNote ? '64px' : '48px'};
 
   padding: 0 16px;
-  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
 
   display: flex;
   align-items: center;
@@ -211,12 +268,18 @@ export const StyledTableCellContent = styled.div`
   }
 `;
 export const StyledTableCellIcon = styled.div`
-  color: ${props => COLORS.getColor('neutral_700', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'default'
+}, props.theme)};
   width: 20px;
   height: 20px;
 
   svg {
-    color: ${props => COLORS.getColor('neutral_700', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'default'
+}, props.theme)};
     width: 20px;
     height: 20px;
   }
@@ -233,15 +296,24 @@ export const StyledTableCellTextWrapper = styled.div`
   ` : ``}
 `;
 export const StyledTableCellNoteText = styled.span`
-  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   display: inline-block;
   width: 100%;
 `;
 export const StyledTableFooter = styled.div`
 `;
 export const StyledTableFooterContent = styled.div`
-  border-top: 2px solid ${props => COLORS.getColor('neutral_200', props.theme)};
-  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  border-top: 2px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   box-sizing: border-box;
   min-height: 56px;
 
@@ -252,7 +324,10 @@ export const StyledTableFooterContent = styled.div`
 `;
 export const StyledTableFooterCurrentInfo = styled.span`
   padding: 0 16px;
-  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
 `;
 export const StyledTableFooterControls = styled.div`
   display: flex;
@@ -267,8 +342,14 @@ export const StyledTableSpinner = styled.div`
 `;
 export const StyledTableFooterCollapseButton = styled.button`
   position: relative;
-  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
-  border-top: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  border-top: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-left: none;
   border-right: none;
   box-sizing: border-box;
@@ -278,11 +359,17 @@ export const StyledTableFooterCollapseButton = styled.button`
   align-items: center;
   justify-content: center;
   gap: 4px;
-  background: ${props => COLORS.getColor('white', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'high'
+}, props.theme)};
 
   cursor: pointer;
 
-  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme))}
   
   &:focus {
     ${focusStyles}
@@ -290,14 +377,26 @@ export const StyledTableFooterCollapseButton = styled.button`
 
   &:hover {
     z-index: ${Z_INDEXES.hover};
-    background: ${props => COLORS.getColor('primary_20', props.theme)};
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:active {
     z-index: ${Z_INDEXES.active};
-    background: ${props => COLORS.getColor('primary_100', props.theme)};
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
 
   &:disabled {

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

package/dist/Tabs/HorizontalTabs.cjs

@@ -43,16 +43,25 @@ const HorizontalTabContainer = _styledComponents.default.div`
 `;
 const TabSideFill = _styledComponents.default.div`
   position: absolute;
-  border-bottom: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  border-bottom: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   bottom: 0;
   width: 100%;
 
   &.fill {
-    background: ${props => _styles.COLORS.getColor('white', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   }
 `;
 const TabButton = _styledComponents.default.button`
-  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border: none;
   background-color: transparent;
   position: relative;
@@ -72,12 +81,21 @@ const TabButton = _styledComponents.default.button`
   }
   
   &.selected {
-    background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
-    color: ${props => _styles.COLORS.getColor('neutral_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
   }
 
   &.selected.floating {
-    background-color: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'selected'
+}, props.theme)};
   }
 
   &.default {
@@ -86,8 +104,14 @@ const TabButton = _styledComponents.default.button`
   }
   
   &.default.selected {
-    border-left: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
-    border-right: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border-left: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+    border-right: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &.selected:after {
@@ -97,7 +121,10 @@ const TabButton = _styledComponents.default.button`
     left: -1px;
     right: -1px;
     height: 2px;
-    background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'selected'
+}, props.theme)};
   }
 
   &.selected.floating:after {
@@ -107,31 +134,54 @@ const TabButton = _styledComponents.default.button`
     right: 1px;
     height: 2px;
     border-radius: 2px;
-    background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'selected'
+}, props.theme)};
   }
 
-
   &:hover, &:hover.selected {
-    background: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:hover:after {
-    background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:active, &:active.selected {
-    background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     outline: none;
   }
 
   &:active:after {
-    background-color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &:disabled {
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     background: transparent;
     cursor: not-allowed;
   }

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_styledComponents","_interopRequireDefault","_common","_jsxRuntime","_excluded","_excluded2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","HorizontalTabContainer","styled","div","focusStyles","TabSideFill","props","COLORS","getColor","theme","TabButton","button","Z_INDEXES","active","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","_ref","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","_objectWithoutProperties2","doTabChange","to","document","activeElement","HTMLElement","blur","focused","setFocused","useState","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","changeTabInternal","tab","tabListKeyDown","key","preventDefault","j","nextIndex","jsxs","tabIndex","onBlur","onFocus","onKeyDown","role","children","jsx","className","map","index","value","onMouseDown","defaultOnMouseDownHandler","style","width","onClick","propTypes","_propTypes","arrayOf","shape","oneOfType","string","node","isRequired","bool","func","oneOf","_default","exports"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    border-right: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\nexport interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Required. Size of the Tabs */\r\n  size: Size.XSmall | Size.Small | Size.Medium | Size.Large;\r\n  /** Required: Array of Tabs to show */\r\n  tabs: HorizontalTab[];\r\n  /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */\r\n  sideFill?: boolean;\r\n  /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width \r\n   * required for its content.\r\n   */\r\n  fullWidth?: boolean;\r\n  /** Required. Handler to be called when user tries to change the tab */\r\n  onTabChange: (to: string) => void;\r\n  /** Optional. Display variant of the tabs. If not set, then 'default' is used */\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  /** Required. Value of the tab */\r\n  value: string | React.ReactNode;\r\n  /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */\r\n  selected: boolean;\r\n  /** Required. URL related with the Tab */\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalTabs.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_styledComponents","_interopRequireDefault","_common","_jsxRuntime","_excluded","_excluded2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","HorizontalTabContainer","styled","div","focusStyles","TabSideFill","props","COLORS","generateToken","componentType","defaultVariant","theme","TabButton","button","Z_INDEXES","active","state","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","_ref","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","_objectWithoutProperties2","doTabChange","to","document","activeElement","HTMLElement","blur","focused","setFocused","useState","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","changeTabInternal","tab","tabListKeyDown","key","preventDefault","j","nextIndex","jsxs","tabIndex","onBlur","onFocus","onKeyDown","role","children","jsx","className","map","index","value","onMouseDown","defaultOnMouseDownHandler","style","width","onClick","propTypes","_propTypes","arrayOf","shape","oneOfType","string","node","isRequired","bool","func","oneOf","_default","exports"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'subtle' }, props.theme)};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant:'default' }, props.theme)};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'subtle'}, props.theme)};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'default'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant: 'selected'}, props.theme)};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n    border-right: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'selected' }, props.theme)};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'selected' }, props.theme)};\r\n  }\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${props => COLORS.generateToken({ componentType:'border', state:'hover' }, props.theme)};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\nexport interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Required. Size of the Tabs */\r\n  size: Size.XSmall | Size.Small | Size.Medium | Size.Large;\r\n  /** Required: Array of Tabs to show */\r\n  tabs: HorizontalTab[];\r\n  /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */\r\n  sideFill?: boolean;\r\n  /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width \r\n   * required for its content.\r\n   */\r\n  fullWidth?: boolean;\r\n  /** Required. Handler to be called when user tries to change the tab */\r\n  onTabChange: (to: string) => void;\r\n  /** Optional. Display variant of the tabs. If not set, then 'default' is used */\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  /** Required. Value of the tab */\r\n  value: string | React.ReactNode;\r\n  /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */\r\n  selected: boolean;\r\n  /** Required. URL related with the Tab */\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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","ignoreList":[]}