@laerdal/life-react-components 6.0.0-dev.24.full → 6.0.0-dev.26

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","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":[]}
+{"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","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.generateToken({componentType:'bg-surface', defaultVariant:'selected'}, 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/Tag/Tag.cjs

@@ -30,28 +30,64 @@ const Container = _styledComponents.default.div`
   box-sizing: border-box;
 
   &.neutral {
-    background-color: ${props => _.COLORS.getColor('neutral_100', props.theme)};
-    color: ${props => _.COLORS.getColor('neutral_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'neutral'
+}, props.theme)};
   }
   &.positive {
-    background-color: ${props => _.COLORS.getColor('positive_100', props.theme)};
-    color: ${props => _.COLORS.getColor('positive_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'positive'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
   &.warning {
-    background-color: ${props => _.COLORS.getColor('warning_100', props.theme)};
-    color: ${props => _.COLORS.getColor('warning_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'warning'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'warning'
+}, props.theme)};
   }
   &.critical {
-    background-color: ${props => _.COLORS.getColor('critical_100', props.theme)};
-    color: ${props => _.COLORS.getColor('critical_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
   &.accent1 {
-    background-color: ${props => _.COLORS.getColor('accent1_100', props.theme)};
-    color: ${props => _.COLORS.getColor('accent1_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent1'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent1'
+}, props.theme)};
   }
   &.accent2 {
-    background-color: ${props => _.COLORS.getColor('accent2_100', props.theme)};
-    color: ${props => _.COLORS.getColor('accent2_600', props.theme)};
+    background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent2'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent2'
+}, props.theme)};
   }
 
 `;

package/dist/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_","_jsxRuntime","_excluded","_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","Container","styled","div","props","$isLabelPresent","COLORS","getColor","theme","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties2","cls","jsxs","$variant","children","jsx","$icon","propTypes","_propTypes","string","node","oneOf","_default","exports"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('positive_100', props.theme)};\r\n    color: ${props => COLORS.getColor('positive_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tag.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_","_jsxRuntime","_excluded","_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","Container","styled","div","props","$isLabelPresent","COLORS","generateToken","componentType","defaultVariant","theme","IconContainer","TextContainer","ComponentXSStyling","ComponentTextStyle","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties2","cls","jsxs","$variant","children","jsx","$icon","propTypes","_propTypes","string","node","oneOf","_default","exports"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'neutral' }, props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'positive' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'positive' }, props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'warning' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'warning' }, props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent1' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent1' }, props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent2' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent2' }, props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tag/Tag.js

@@ -21,28 +21,64 @@ const Container = styled.div`
   box-sizing: border-box;
 
   &.neutral {
-    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'neutral'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'neutral'
+}, props.theme)};
   }
   &.positive {
-    background-color: ${props => COLORS.getColor('positive_100', props.theme)};
-    color: ${props => COLORS.getColor('positive_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'positive'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
   &.warning {
-    background-color: ${props => COLORS.getColor('warning_100', props.theme)};
-    color: ${props => COLORS.getColor('warning_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'warning'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'warning'
+}, props.theme)};
   }
   &.critical {
-    background-color: ${props => COLORS.getColor('critical_100', props.theme)};
-    color: ${props => COLORS.getColor('critical_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'critical'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
   &.accent1 {
-    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};
-    color: ${props => COLORS.getColor('accent1_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent1'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent1'
+}, props.theme)};
   }
   &.accent2 {
-    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};
-    color: ${props => COLORS.getColor('accent2_600', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'accent2'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'accent2'
+}, props.theme)};
   }
 
 `;

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","props","$isLabelPresent","getColor","theme","IconContainer","TextContainer","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties","_excluded","cls","_objectSpread","$variant","children","$icon","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.getColor('positive_100', props.theme)};\r\n    color: ${props => COLORS.getColor('positive_600', props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.getColor('warning_100', props.theme)};\r\n    color: ${props => COLORS.getColor('warning_600', props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.getColor('critical_100', props.theme)};\r\n    color: ${props => COLORS.getColor('critical_600', props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.getColor('accent2_100', props.theme)};\r\n    color: ${props => COLORS.getColor('accent2_600', props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tag.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","jsx","_jsx","jsxs","_jsxs","Container","div","props","$isLabelPresent","generateToken","componentType","defaultVariant","theme","IconContainer","TextContainer","Bold","Tag","_ref","label","icon","variant","className","rest","_objectWithoutProperties","_excluded","cls","_objectSpread","$variant","children","$icon","propTypes","_pt","string","node","oneOf"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\r\n\r\nconst Container = styled.div<{$variant: TagVariants, $isLabelPresent: boolean}>`\r\n  display: flex;\r\n  padding: 4px;\r\n  height: 24px;\r\n  width: calc(100%);\r\n  max-width: fit-content;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-width: ${props=>props.$isLabelPresent ? '64px' : ''};\r\n  border-radius: 2px;\r\n  box-sizing: border-box;\r\n\r\n  &.neutral {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'neutral' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'neutral' }, props.theme)};\r\n  }\r\n  &.positive {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'positive' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'positive' }, props.theme)};\r\n  }\r\n  &.warning {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'warning' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'warning' }, props.theme)};\r\n  }\r\n  &.critical {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'critical' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n  &.accent1 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent1' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent1' }, props.theme)};\r\n  }\r\n  &.accent2 {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'accent2' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'accent2' }, props.theme)};\r\n  }\r\n\r\n`;\r\n\r\nconst IconContainer = styled.div<{$variant: TagVariants}>`\r\n  display: flex;\r\n  width: 16px;\r\n  height: 16px;\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div<{$variant: TagVariants, $icon: React.ReactNode}>`\r\n  height: 16px;\r\n  padding: 0 4px;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  overflow: hidden;  \r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n`;\r\n\r\n\r\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\r\n\r\nexport type TagProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /** Optional. Label to be shown in the Tag. */\r\n  label?: string;\r\n  /** Optional. Icon to be shown in the tag. */\r\n  icon?: React.ReactNode;\r\n  /** Optional. Style Variant of the Tag. Defaults to 'neutral' */\r\n  variant?: TagVariants;\r\n}\r\n\r\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\r\n  const cls = `${className ?? ''} ${variant}`;\r\n  return (   \r\n    <Container $variant={variant} $isLabelPresent={!!label} className={cls} {...rest}>\r\n      {icon && <IconContainer $variant={variant} data-testid={'iconContainer'}>\r\n          {icon}\r\n        </IconContainer>\r\n      }\r\n      {label && <TextContainer $variant={variant} $icon={icon}>\r\n          {label}\r\n        </TextContainer>\r\n      }\r\n    </Container>\r\n  );\r\n};\r\n\r\nexport default Tag;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/common/NavigationHelper.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=NavigationHelper.cjs.map

package/dist/common/NavigationHelper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationHelper.cjs","names":[],"sources":["../../src/common/NavigationHelper.ts"],"sourcesContent":[""],"mappings":"","ignoreList":[]}

package/dist/common/NavigationHelper.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=NavigationHelper.js.map

package/dist/common/NavigationHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationHelper.js","names":[],"sources":["../../src/common/NavigationHelper.ts"],"sourcesContent":[""],"mappings":"","ignoreList":[]}

package/dist/styles/colors.cjs

@@ -180,6 +180,12 @@ const COLORS = {
   /* Use for overlays, for example behind modals. */
   bg_overlay_darker: 'var(--life-color-bg-overlay-darker)',
   /* Use for overlays, for example behind modals. */
+  bg_surface_accent1_active: 'var(--life-color-bg-surface-accent1-active)',
+  bg_surface_accent1_hover: 'var(--life-color-bg-surface-accent1-hover)',
+  bg_surface_accent2_active: 'var(--life-color-bg-surface-accent2-active)',
+  bg_surface_accent2_hover: 'var(--life-color-bg-surface-accent2-hover)',
+  bg_surface_critical_active: 'var(--life-color-bg-surface-critical-active)',
+  bg_surface_critical_hover: 'var(--life-color-bg-surface-critical-hover)',
   bg_surface_accent1: 'var(--life-color-bg-surface-accent1)',
   /* Use for surfaces that need accentuation. */
   bg_surface_accent2: 'var(--life-color-bg-surface-accent2)',