@laerdal/life-react-components 1.7.0-dev.4 → 1.7.0-dev.6.full

package/dist/Table/TableStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: none !important;\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      outline: none;\n      box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n      z-index: ${Z_INDEXES.focus};\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    background-color: ${COLORS.primary_200};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n  }\n\n  &:active {\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_100};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    outline: none;\n    z-index: ${Z_INDEXES.focus};\n    color: ${COLORS.neutral_600};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n"],"file":"TableStyles.js"}
+{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(0, 0, 0, 0.5);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n"],"file":"TableStyles.js"}

package/dist/Tabs/HorizontalTabs.cjs

@@ -38,7 +38,7 @@ var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_
 
 var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
 
-var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ", ";\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected{\n    z-index: ", ";\n  }\n  \n  &:focus {\n    z-index: ", ";\n    outline: none;\n    \n    div {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected{\n    z-index: ", ";\n  }\n  \n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      ", "\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.focusStyles, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
 
 
 var HorizontalTabs = function HorizontalTabs(_ref) {

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","Z_INDEXES","hover","primary_20","primary_700","active","focus","primary_800","focus_25","primary_500","primary_100","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n    \n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.cjs"}
+{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","focusStyles","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      ${focusStyles}\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.cjs"}

package/dist/Tabs/HorizontalTabs.js

@@ -12,7 +12,7 @@ import { Size } from '../types';
  * Import custom styles.
  */
 
-import { COLORS, ComponentTextStyle } from '../styles';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 /**
  * Import third-party libraries.
  */
@@ -25,7 +25,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n"])));
 var TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.white);
-var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ", ";\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected{\n    z-index: ", ";\n  }\n  \n  &:focus {\n    z-index: ", ";\n    outline: none;\n    \n    div {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, COLORS.neutral_300, COLORS.neutral_300, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, Z_INDEXES.focus, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected{\n    z-index: ", ";\n  }\n  \n  &:focus {\n    ", "\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      ", "\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, focusStyles, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
   var size = _ref.size,

package/dist/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","hover","primary_20","primary_700","active","focus","primary_800","focus_25","primary_500","primary_100","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n    \n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
+{"version":3,"sources":["../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      ${focusStyles}\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/Tabs/TabLink.cjs

@@ -27,6 +27,8 @@ var _styles = require("../styles");
 
 var _zIndexes = require("../styles/z-indexes");
 
+var _common = require("../common");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -35,11 +37,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ", ";\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &.active:focus {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
+var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
   return props.disabled ? _styles.COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
-}, _zIndexes.Z_INDEXES.focus, _styles.COLORS.white, _styles.COLORS.white, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _styles.COLORS.white, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
+}, _styles.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
 
 var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
 
@@ -74,6 +76,7 @@ var TabLink = function TabLink(_ref) {
     to: to.toString(),
     activeClassName: "active",
     disabled: disabled,
+    onMouseDown: _common.defaultOnMouseDownHandler,
     exact: exact,
     role: "tab",
     "aria-selected": to === location.pathname,

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","Z_INDEXES","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","location","ref","React","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.cjs"}
+{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","location","ref","React","useRef","toString","defaultOnMouseDownHandler","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      onMouseDown={defaultOnMouseDownHandler}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.cjs"}

package/dist/Tabs/TabLink.js

@@ -8,16 +8,17 @@ import { NavLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 import { NotificationDot } from '../NotificationDot';
 import { Size } from '../types';
-import { COLORS } from '../styles';
+import { COLORS, focusStyles } from '../styles';
 import { Z_INDEXES } from '../styles/z-indexes';
+import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var StyledTabLink = styled(NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ", ";\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &.active:focus {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
+var StyledTabLink = styled(NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
   return props.disabled ? COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
-}, Z_INDEXES.focus, COLORS.white, COLORS.white, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, COLORS.white, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.white);
+}, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.white);
 var OptionalLineWrapperWithIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
 var TopWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
 var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
@@ -47,6 +48,7 @@ var TabLink = function TabLink(_ref) {
     to: to.toString(),
     activeClassName: "active",
     disabled: disabled,
+    onMouseDown: defaultOnMouseDownHandler,
     exact: exact,
     role: "tab",
     "aria-selected": to === location.pathname,

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","Z_INDEXES","StyledTabLink","neutral_600","props","disabled","neutral_100","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
+{"version":3,"sources":["../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","location","ref","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      onMouseDown={defaultOnMouseDownHandler}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/Tabs/VerticalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/VerticalTabs.tsx"],"names":["VerticalTabs","size","entries","Size","Large","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","onClick"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAkBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAA0C;AAAA,MAAvCC,IAAuC,QAAvCA,IAAuC;AAAA,MAAjCC,OAAiC,QAAjCA,OAAiC;AAC7D,sBACE,qBAAC,aAAD;AAAM,IAAA,IAAI,EAAED,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUE,YAAKC,KAAzB;AAAA,cACGF,OADH,aACGA,OADH,uBACGA,OAAO,CAAEG,GAAT,CAAa,UAACC,KAAD;AAAA,0BACZ,qBAAC,gBAAD;AAEE,QAAA,EAAE,EAAEA,KAAK,CAACC,EAFZ;AAGE,QAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,QAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,QAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,QAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,QAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,QAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,QAAA,IAAI,EAAEZ,IATR;AAUE,QAAA,OAAO,EAAEK,KAAK,CAACQ,OAVjB;AAWE,QAAA,WAAW,EAAE,uBAAM;AACjB,cAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,YAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,SACOT,KAAK,CAACC,EADb,CADY;AAAA,KAAb;AADH,IADF;AAsBD,CAvBD;;;AAHEL,EAAAA,O;AAZAO,IAAAA,Y;AACAC,IAAAA,Y;AAEAH,IAAAA,E;AACAK,IAAAA,Q;AACAG,IAAAA,O;AACAP,IAAAA,K;AACAK,IAAAA,mB;AACAC,IAAAA,O,4BAAU,U,EAAa,U;;;eAgCVd,Y","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}></TabLink>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.cjs"}
+{"version":3,"sources":["../../src/Tabs/VerticalTabs.tsx"],"names":["VerticalTabs","size","entries","Size","Large","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","onClick"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAkBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAA0C;AAAA,MAAvCC,IAAuC,QAAvCA,IAAuC;AAAA,MAAjCC,OAAiC,QAAjCA,OAAiC;AAC7D,sBACE,qBAAC,aAAD;AAAM,IAAA,IAAI,EAAED,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUE,YAAKC,KAAzB;AAAA,cACGF,OADH,aACGA,OADH,uBACGA,OAAO,CAAEG,GAAT,CAAa,UAACC,KAAD;AAAA,0BACZ,qBAAC,gBAAD;AAEE,QAAA,EAAE,EAAEA,KAAK,CAACC,EAFZ;AAGE,QAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,QAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,QAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,QAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,QAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,QAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,QAAA,IAAI,EAAEZ,IATR;AAUE,QAAA,OAAO,EAAEK,KAAK,CAACQ,OAVjB;AAWE,QAAA,WAAW,EAAE,uBAAM;AACjB,cAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,YAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,SACOT,KAAK,CAACC,EADb,CADY;AAAA,KAAb;AADH,IADF;AAsBD,CAvBD;;;AAHEL,EAAAA,O;AAZAO,IAAAA,Y;AACAC,IAAAA,Y;AAEAH,IAAAA,E;AACAK,IAAAA,Q;AACAG,IAAAA,O;AACAP,IAAAA,K;AACAK,IAAAA,mB;AACAC,IAAAA,O,4BAAU,U,EAAa,U;;;eAgCVd,Y","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.cjs"}

package/dist/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tabs/VerticalTabs.tsx"],"names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","onClick"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;AAEA,SAASC,IAAT,QAAqB,UAArB;;;AAkBA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA0C;AAAA,MAAvCC,IAAuC,QAAvCA,IAAuC;AAAA,MAAjCC,OAAiC,QAAjCA,OAAiC;AAC7D,sBACE,KAAC,IAAD;AAAM,IAAA,IAAI,EAAED,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUF,IAAI,CAACI,KAAzB;AAAA,cACGD,OADH,aACGA,OADH,uBACGA,OAAO,CAAEE,GAAT,CAAa,UAACC,KAAD;AAAA,0BACZ,KAAC,OAAD;AAEE,QAAA,EAAE,EAAEA,KAAK,CAACC,EAFZ;AAGE,QAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,QAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,QAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,QAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,QAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,QAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,QAAA,IAAI,EAAEX,IATR;AAUE,QAAA,OAAO,EAAEI,KAAK,CAACQ,OAVjB;AAWE,QAAA,WAAW,EAAE,uBAAM;AACjB,cAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,YAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,SACOT,KAAK,CAACC,EADb,CADY;AAAA,KAAb;AADH,IADF;AAsBD,CAvBD;;;AAHEJ,EAAAA,O;AAZAM,IAAAA,Y;AACAC,IAAAA,Y;AAEAH,IAAAA,E;AACAK,IAAAA,Q;AACAG,IAAAA,O;AACAP,IAAAA,K;AACAK,IAAAA,mB;AACAC,IAAAA,O,aAAU,U,EAAa,U;;;AAgCzB,eAAeb,YAAf","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}></TabLink>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}
+{"version":3,"sources":["../../src/Tabs/VerticalTabs.tsx"],"names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","onClick"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;AAEA,SAASC,IAAT,QAAqB,UAArB;;;AAkBA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA0C;AAAA,MAAvCC,IAAuC,QAAvCA,IAAuC;AAAA,MAAjCC,OAAiC,QAAjCA,OAAiC;AAC7D,sBACE,KAAC,IAAD;AAAM,IAAA,IAAI,EAAED,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUF,IAAI,CAACI,KAAzB;AAAA,cACGD,OADH,aACGA,OADH,uBACGA,OAAO,CAAEE,GAAT,CAAa,UAACC,KAAD;AAAA,0BACZ,KAAC,OAAD;AAEE,QAAA,EAAE,EAAEA,KAAK,CAACC,EAFZ;AAGE,QAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,QAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,QAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,QAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,QAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,QAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,QAAA,IAAI,EAAEX,IATR;AAUE,QAAA,OAAO,EAAEI,KAAK,CAACQ,OAVjB;AAWE,QAAA,WAAW,EAAE,uBAAM;AACjB,cAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,YAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,SACOT,KAAK,CAACC,EADb,CADY;AAAA,KAAb;AADH,IADF;AAsBD,CAvBD;;;AAHEJ,EAAAA,O;AAZAM,IAAAA,Y;AACAC,IAAAA,Y;AAEAH,IAAAA,E;AACAK,IAAAA,Q;AACAG,IAAAA,O;AACAP,IAAAA,K;AACAK,IAAAA,mB;AACAC,IAAAA,O,aAAU,U,EAAa,U;;;AAgCzB,eAAeb,YAAf","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.FunctionComponent<BaseProps>;\n  to: string;\n  disabled?: boolean;\n  onClick?: () => void;\n  exact?: boolean;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          exact={entry.exact}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={() => {\n            if (entry.onClick) {\n              entry.onClick();\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}

package/dist/Toasters/Toast.cjs

@@ -190,6 +190,7 @@ var Toast = function Toast(_ref) {
           size: _types.Size.Small,
           variant: action.type === _types.ToastActionType.SECONDARY ? 'secondary' : 'primary',
           colorTheme: opts.color !== _types.ToastColor.WHITE ? 'dark' : 'teal',
+          invertFocus: opts.color === _types.ToastColor.BLACK,
           onClick: function onClick() {
             setShouldRemove(true);
             action.handler();
@@ -204,6 +205,7 @@ var Toast = function Toast(_ref) {
         variant: 'secondary',
         shape: "circular",
         useTransparentBackground: true,
+        invertFocus: opts.color === _types.ToastColor.BLACK,
         action: function action(event) {
           return setShouldRemove(true);
         },

package/dist/Toasters/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","ComponentTextStyle","Regular","HyperLinkInvertedStyling","black","HyperLinkDefaultStyling","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Size","Small","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.cjs"}
+{"version":3,"sources":["../../src/Toasters/Toast.tsx"],"names":["LoaderAnimationKeyframes","keyframes","Loader","styled","div","props","duration","ToastColor","BLACK","COLORS","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOWS","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","ComponentTextStyle","Regular","HyperLinkInvertedStyling","black","HyperLinkDefaultStyling","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","ToastPosition","TOPLEFT","enterFrom","ToastEntryDirection","TOP","Toast","content","remove","options","testId","removeRef","React","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Size","Small","type","ToastActionType","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              invertFocus={opts.color === ToastColor.BLACK}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      invertFocus={opts.color === ToastColor.BLACK}\n                      action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.cjs"}

package/dist/Toasters/Toast.js

@@ -158,6 +158,7 @@ var Toast = function Toast(_ref) {
           size: Size.Small,
           variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
           colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
+          invertFocus: opts.color === ToastColor.BLACK,
           onClick: function onClick() {
             setShouldRemove(true);
             action.handler();
@@ -172,6 +173,7 @@ var Toast = function Toast(_ref) {
         variant: 'secondary',
         shape: "circular",
         useTransparentBackground: true,
+        invertFocus: opts.color === ToastColor.BLACK,
         action: function action(event) {
           return setShouldRemove(true);
         },