@laerdal/life-react-components 1.2.2-dev.9 → 1.3.1-dev.10

package/dist/js/Tabs/HorizontalTabs.js

@@ -11,12 +11,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
+var _types = require("../types");
+
 var _styles = require("../styles");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -30,9 +34,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 // Add custom styles
 var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n"])));
 
-var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
+var TabSideFill = _styledComponents.default.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"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
 
-var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  z-index: 2;\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    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  \n  &:focus {\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-XS {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\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, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _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_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, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = _styledComponents.default.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"])), _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 HorizontalTabs = function HorizontalTabs(_ref) {
@@ -74,7 +78,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
 };
 
 HorizontalTabs.propTypes = {
-  size: _propTypes.default.oneOf(['XS', 'S', 'M', 'L']).isRequired,
   tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
     value: _propTypes.default.string.isRequired,
     selected: _propTypes.default.bool.isRequired,

package/dist/js/Tabs/HorizontalTabs.js.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","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","ComponentTextStyle","Regular","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';\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';\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  height: Calc(100% - 1px);\n  z-index: 1;\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  z-index: 2;\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    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  \n  &:focus {\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-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\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: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\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":["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\ninterface 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/js/Tabs/TabLink.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavLinkProps } from 'react-router-dom';
 import { BaseProps } from '../icons';
+import { Size } from '../types';
 declare type TabLinkProps = {
     disabled?: boolean;
     requiredLine: string;
@@ -9,7 +10,7 @@ declare type TabLinkProps = {
     onLinkClick?: () => void;
     testId?: string;
     showNotificationDot?: boolean;
-    size?: string;
+    size?: Size.Small | Size.Medium | Size.Large;
     variant?: 'positive' | 'critical';
 } & NavLinkProps;
 declare const TabLink: ({ to, disabled, exact, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot, size, variant }: TabLinkProps) => JSX.Element;

package/dist/js/Tabs/TabLink.js

@@ -17,8 +17,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _NotificationDot = require("../NotificationDot");
 
+var _types = require("../types");
+
 var _styles = require("../styles");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,11 +33,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.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    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    background-color: ", ";\n  }\n  &.active:hover {\n    background-color: ", ";\n  }\n  &.active:focus {\n    background-color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\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-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
+var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.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"])), _styles.COLORS.neutral_600, function (props) {
   return props.disabled ? _styles.COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
-}, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _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);
+}, _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);
 
 var OptionalLineWrapperWithIcon = _styledComponents.default.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"])));
 
@@ -59,7 +63,7 @@ var TabLink = function TabLink(_ref) {
       _ref$showNotification = _ref.showNotificationDot,
       showNotificationDot = _ref$showNotification === void 0 ? false : _ref$showNotification,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size,
+      size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
   var location = (0, _reactRouterDom.useLocation)();
@@ -98,7 +102,6 @@ TabLink.propTypes = {
   onLinkClick: _propTypes.default.func,
   testId: _propTypes.default.string,
   showNotificationDot: _propTypes.default.bool,
-  size: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['positive', 'critical'])
 };
 var _default = TabLink;

package/dist/js/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","white","neutral_20","primary_20","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","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 { COLORS } from '../styles';\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?: string;\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    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    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\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-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n    span {\n      color: ${COLORS.neutral_300};\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`;\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 = '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":["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`;\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"}

package/dist/js/Tabs/Tabs.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { Size } from '../types';
 declare type TabsProps = {
     children?: any;
-    size: string;
+    size: Size;
 };
 declare const Tabs: React.FunctionComponent<TabsProps>;
 export default Tabs;

package/dist/js/Tabs/Tabs.js

@@ -13,6 +13,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _types = require("../types");
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -25,13 +27,13 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var getHeight = function getHeight(size) {
   switch (size) {
-    case 'small':
+    case _types.Size.Small:
       return '48px';
 
-    case 'medium':
+    case _types.Size.Medium:
       return '56px';
 
-    case 'large':
+    case _types.Size.Large:
       return '64px';
 
     default:
@@ -41,13 +43,13 @@ var getHeight = function getHeight(size) {
 
 var getFontSize = function getFontSize(size) {
   switch (size) {
-    case 'small':
+    case _types.Size.Small:
       return '16px';
 
-    case 'medium':
+    case _types.Size.Medium:
       return '18px';
 
-    case 'large':
+    case _types.Size.Large:
       return '20px';
 
     default:
@@ -57,13 +59,13 @@ var getFontSize = function getFontSize(size) {
 
 var getTopMargin = function getTopMargin(size) {
   switch (size) {
-    case 'small':
+    case _types.Size.Small:
       return '6px';
 
-    case 'medium':
+    case _types.Size.Medium:
       return '10px';
 
-    case 'large':
+    case _types.Size.Large:
       return '12px';
 
     default:
@@ -73,13 +75,13 @@ var getTopMargin = function getTopMargin(size) {
 
 var getBottomMargin = function getBottomMargin(size) {
   switch (size) {
-    case 'small':
+    case _types.Size.Small:
       return '2px';
 
-    case 'medium':
+    case _types.Size.Medium:
       return '3px';
 
-    case 'large':
+    case _types.Size.Large:
       return '4px';
 
     default:
@@ -109,8 +111,7 @@ var Tabs = function Tabs(_ref) {
 };
 
 Tabs.propTypes = {
-  children: _propTypes.default.any,
-  size: _propTypes.default.string.isRequired
+  children: _propTypes.default.any
 };
 var _default = Tabs;
 exports.default = _default;

package/dist/js/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["getHeight","size","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;;;;;;;;;AAOA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,IAAD,EAAkB;AAClC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACD,IAAD,EAAkB;AACpC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,MAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACF,IAAD,EAAkB;AACrC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,MAAP;;AACF,SAAK,OAAL;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMG,eAAe,GAAG,SAAlBA,eAAkB,CAACH,IAAD,EAAkB;AACxC,UAAQA,IAAR;AACE,SAAK,OAAL;AACE,aAAO,KAAP;;AACF,SAAK,QAAL;AACE,aAAO,KAAP;;AACF,SAAK,OAAL;AACE,aAAO,KAAP;;AACF;AACE,aAAO,KAAP;AARJ;AAUD,CAXD;;AAaA,IAAMI,GAAG,GAAGC,0BAAOC,GAAV,4bAKK,UAACC,KAAD;AAAA,SAAWR,SAAS,CAACQ,KAAK,CAACP,IAAP,CAApB;AAAA,CALL,EAaQ,UAACO,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACP,IAAP,CAAtB;AAAA,CAbR,EAcK,UAACO,KAAD;AAAA,SAAWL,YAAY,CAACK,KAAK,CAACP,IAAP,CAAvB;AAAA,CAdL,EAc8C,UAACO,KAAD;AAAA,SAAWJ,eAAe,CAACI,KAAK,CAACP,IAAP,CAA1B;AAAA,CAd9C,EAiBQ,UAACO,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACP,IAAP,CAAtB;AAAA,CAjBR,CAAT;;AA0BA,IAAMQ,IAAwC,GAAG,SAA3CA,IAA2C;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAaT,IAAb,QAAaA,IAAb;AAAA,sBAC/C,oBAAC,GAAD;AAAK,IAAA,IAAI,EAAC,SAAV;AAAoB,IAAA,IAAI,EAAEA;AAA1B,KACGS,QADH,CAD+C;AAAA,CAAjD;;;AAlFEA,EAAAA,Q;AACAT,EAAAA,I;;eAuFaQ,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\ntype TabsProps = {\n  children?: any;\n  size: string;\n};\n\nconst getHeight = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '48px';\n    case 'medium':\n      return '56px';\n    case 'large':\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '16px';\n    case 'medium':\n      return '18px';\n    case 'large':\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '6px';\n    case 'medium':\n      return '10px';\n    case 'large':\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: string) => {\n  switch (size) {\n    case 'small':\n      return '2px';\n    case 'medium':\n      return '3px';\n    case 'large':\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["getHeight","size","Size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAOA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,IAAD,EAAgB;AAChC,UAAQA,IAAR;AACE,SAAKC,YAAKC,KAAV;AACE,aAAO,MAAP;;AACF,SAAKD,YAAKE,MAAV;AACE,aAAO,MAAP;;AACF,SAAKF,YAAKG,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACL,IAAD,EAAgB;AAClC,UAAQA,IAAR;AACE,SAAKC,YAAKC,KAAV;AACE,aAAO,MAAP;;AACF,SAAKD,YAAKE,MAAV;AACE,aAAO,MAAP;;AACF,SAAKF,YAAKG,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAME,YAAY,GAAG,SAAfA,YAAe,CAACN,IAAD,EAAgB;AACnC,UAAQA,IAAR;AACE,SAAKC,YAAKC,KAAV;AACE,aAAO,KAAP;;AACF,SAAKD,YAAKE,MAAV;AACE,aAAO,MAAP;;AACF,SAAKF,YAAKG,KAAV;AACE,aAAO,MAAP;;AACF;AACE,aAAO,MAAP;AARJ;AAUD,CAXD;;AAaA,IAAMG,eAAe,GAAG,SAAlBA,eAAkB,CAACP,IAAD,EAAgB;AACtC,UAAQA,IAAR;AACE,SAAKC,YAAKC,KAAV;AACE,aAAO,KAAP;;AACF,SAAKD,YAAKE,MAAV;AACE,aAAO,KAAP;;AACF,SAAKF,YAAKG,KAAV;AACE,aAAO,KAAP;;AACF;AACE,aAAO,KAAP;AARJ;AAUD,CAXD;;AAaA,IAAMI,GAAG,GAAGC,0BAAOC,GAAV,4bAKK,UAACC,KAAD;AAAA,SAAWZ,SAAS,CAACY,KAAK,CAACX,IAAP,CAApB;AAAA,CALL,EAaQ,UAACW,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACX,IAAP,CAAtB;AAAA,CAbR,EAcK,UAACW,KAAD;AAAA,SAAWL,YAAY,CAACK,KAAK,CAACX,IAAP,CAAvB;AAAA,CAdL,EAc8C,UAACW,KAAD;AAAA,SAAWJ,eAAe,CAACI,KAAK,CAACX,IAAP,CAA1B;AAAA,CAd9C,EAiBQ,UAACW,KAAD;AAAA,SAAWN,WAAW,CAACM,KAAK,CAACX,IAAP,CAAtB;AAAA,CAjBR,CAAT;;AA0BA,IAAMY,IAAwC,GAAG,SAA3CA,IAA2C;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,MAAab,IAAb,QAAaA,IAAb;AAAA,sBAC/C,oBAAC,GAAD;AAAK,IAAA,IAAI,EAAC,SAAV;AAAoB,IAAA,IAAI,EAAEA;AAA1B,KACGa,QADH,CAD+C;AAAA,CAAjD;;;AAlFEA,EAAAA,Q;;eAwFaD,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\n\ntype TabsProps = {\n  children?: any;\n  size: Size;\n};\n\nconst getHeight = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '48px';\n    case Size.Medium:\n      return '56px';\n    case Size.Large:\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '16px';\n    case Size.Medium:\n      return '18px';\n    case Size.Large:\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '6px';\n    case Size.Medium:\n      return '10px';\n    case Size.Large:\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '2px';\n    case Size.Medium:\n      return '3px';\n    case Size.Large:\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}

package/dist/js/Tabs/VerticalTabs.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BaseProps } from '../icons';
+import { Size } from '../types';
 export interface VerticalTabEntry {
     requiredLine: string;
     optionalLine?: string;
@@ -12,7 +13,7 @@ export interface VerticalTabEntry {
     variant?: 'critical' | 'positive';
 }
 interface VerticalTabsProps {
-    size?: string;
+    size?: Size.Small | Size.Medium | Size.Large;
     entries: VerticalTabEntry[];
 }
 declare const VerticalTabs: ({ size, entries }: VerticalTabsProps) => JSX.Element;

package/dist/js/Tabs/VerticalTabs.js

@@ -15,6 +15,8 @@ var _Tabs = _interopRequireDefault(require("./Tabs"));
 
 var _TabLink = _interopRequireDefault(require("./TabLink"));
 
+var _types = require("../types");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -25,7 +27,7 @@ var VerticalTabs = function VerticalTabs(_ref) {
   var size = _ref.size,
       entries = _ref.entries;
   return /*#__PURE__*/React.createElement(_Tabs.default, {
-    size: size || 'large'
+    size: size !== null && size !== void 0 ? size : _types.Size.Large
   }, entries === null || entries === void 0 ? void 0 : entries.map(function (entry) {
     return /*#__PURE__*/React.createElement(_TabLink.default, {
       key: entry.to,
@@ -48,7 +50,6 @@ var VerticalTabs = function VerticalTabs(_ref) {
 };
 
 VerticalTabs.propTypes = {
-  size: _propTypes.default.string,
   entries: _propTypes.default.arrayOf(_propTypes.default.shape({
     requiredLine: _propTypes.default.string.isRequired,
     optionalLine: _propTypes.default.string,

package/dist/js/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/VerticalTabs.tsx"],"names":["VerticalTabs","size","entries","map","entry","to","exact","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","onClick"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAmBA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAA0C;AAAA,MAAvCC,IAAuC,QAAvCA,IAAuC;AAAA,MAAjCC,OAAiC,QAAjCA,OAAiC;AAC7D,sBACE,oBAAC,aAAD;AAAM,IAAA,IAAI,EAAED,IAAI,IAAI;AAApB,KACGC,OADH,aACGA,OADH,uBACGA,OAAO,CAAEC,GAAT,CAAa,UAACC,KAAD;AAAA,wBACZ,oBAAC,gBAAD;AACE,MAAA,GAAG,EAAEA,KAAK,CAACC,EADb;AAEE,MAAA,EAAE,EAAED,KAAK,CAACC,EAFZ;AAGE,MAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,MAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,MAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,MAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,MAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,MAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,MAAA,IAAI,EAAEV,IATR;AAUE,MAAA,OAAO,EAAEG,KAAK,CAACQ,OAVjB;AAWE,MAAA,WAAW,EAAE,uBAAM;AACjB,YAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,UAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,MADY;AAAA,GAAb,CADH,CADF;AAsBD,CAvBD;;;AAJEZ,EAAAA,I;AACAC,EAAAA,O;AAZAK,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;;;eAgCVZ,Y","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\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?: string;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs 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":["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,oBAAC,aAAD;AAAM,IAAA,IAAI,EAAED,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUE,YAAKC;AAAzB,KACGF,OADH,aACGA,OADH,uBACGA,OAAO,CAAEG,GAAT,CAAa,UAACC,KAAD;AAAA,wBACZ,oBAAC,gBAAD;AACE,MAAA,GAAG,EAAEA,KAAK,CAACC,EADb;AAEE,MAAA,EAAE,EAAED,KAAK,CAACC,EAFZ;AAGE,MAAA,KAAK,EAAED,KAAK,CAACE,KAHf;AAIE,MAAA,YAAY,EAAEF,KAAK,CAACG,YAJtB;AAKE,MAAA,YAAY,EAAEH,KAAK,CAACI,YALtB;AAME,MAAA,gBAAgB,EAAEJ,KAAK,CAACK,gBAN1B;AAOE,MAAA,QAAQ,EAAEL,KAAK,CAACM,QAPlB;AAQE,MAAA,mBAAmB,EAAEN,KAAK,CAACO,mBAR7B;AASE,MAAA,IAAI,EAAEZ,IATR;AAUE,MAAA,OAAO,EAAEK,KAAK,CAACQ,OAVjB;AAWE,MAAA,WAAW,EAAE,uBAAM;AACjB,YAAIR,KAAK,CAACS,OAAV,EAAmB;AACjBT,UAAAA,KAAK,CAACS,OAAN;AACD;AACF;AAfH,MADY;AAAA,GAAb,CADH,CADF;AAsBD,CAvBD;;;AAHEb,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.js"}

package/dist/js/Toasters/ToastContext.js

@@ -18,6 +18,8 @@ var _Toast = _interopRequireDefault(require("./Toast"));
 
 var _types = require("../types");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +60,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ToastContext = /*#__PURE__*/React.createContext({});
 exports.ToastContext = ToastContext;
 
-var ToastBucket = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column-reverse;\n"])));
+var ToastBucket = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), _zIndexes.Z_INDEXES.toast);
 
 var ToastBucketTopLeft = (0, _styledComponents.default)(ToastBucket)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 5%;\n"])));
 var ToastBucketTopMiddle = (0, _styledComponents.default)(ToastBucket)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));

package/dist/js/Toasters/ToastContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","createContext","ToastBucket","styled","div","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","ToastPosition","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":";;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;AAEO,IAAMA,YAAY,gBAAGC,KAAK,CAACC,aAAN,CAAoB,EAApB,CAArB;;;AAEP,IAAMC,WAAW,GAAGC,0BAAOC,GAAV,kKAAjB;;AAOA,IAAMC,kBAAkB,GAAG,+BAAOH,WAAP,CAAH,oGAAxB;AAKA,IAAMI,oBAAoB,GAAG,+BAAOJ,WAAP,CAAH,qIAA1B;AAMA,IAAMK,mBAAmB,GAAG,+BAAOL,WAAP,CAAH,qGAAzB;AAKA,IAAMM,qBAAqB,GAAG,+BAAON,WAAP,CAAH,uGAA3B;AAKA,IAAMO,uBAAuB,GAAG,+BAAOP,WAAP,CAAH,wIAA7B;AAMA,IAAMQ,sBAAsB,GAAG,+BAAOR,WAAP,CAAH,wGAA5B;;AAKO,IAAMS,aAAuB,GAAG,SAA1BA,aAA0B,OAAiC;AAAA,MAA9BC,QAA8B,QAA9BA,QAA8B;;AACtE,wBAA4BZ,KAAK,CAACa,QAAN,CAAwB,EAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEA,MAAMC,GAAG,GAAG,SAANA,GAAM,CAACC,OAAD,EAAeC,OAAf,EAAyC;AACnD,QAAMC,EAAE,GAAG,4BAAX;AACAJ,IAAAA,SAAS,CAAC,UAAAK,IAAI;AAAA,0CAAQA,IAAR,IAAc;AAAED,QAAAA,EAAE,EAAFA,EAAF;AAAMF,QAAAA,OAAO,EAAPA,OAAN;AAAeC,QAAAA,OAAO,EAAPA;AAAf,OAAd;AAAA,KAAL,CAAT;AACD,GAHD;;AAKA,MAAMG,OAAM,GAAG,SAATA,MAAS,CAACF,EAAD;AAAA,WAAgBJ,SAAS,CAACD,MAAM,CAACQ,MAAP,CAAc,UAAAC,CAAC;AAAA,aAAIA,CAAC,CAACJ,EAAF,KAASA,EAAb;AAAA,KAAf,CAAD,CAAzB;AAAA,GAAf;;AAEA,MAAMK,SAAS,GAAGxB,KAAK,CAACyB,OAAN,CAAc,YAAM;AACpC,WAAO;AAAEC,MAAAA,QAAQ,EAAEV,GAAZ;AAAiBW,MAAAA,WAAW,EAAEN;AAA9B,KAAP;AACD,GAFiB,EAEf,CAACP,MAAD,CAFe,CAAlB;AAIA,sBACE,oBAAC,YAAD,CAAc,QAAd;AAAuB,IAAA,KAAK;AAAIA,MAAAA,MAAM,EAANA;AAAJ,OAAeU,SAAf;AAA5B,kBACE,oBAAC,kBAAD,QACGV,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcC,OAAzC;AAAA,GADV,EAEEC,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CADF,eAQE,oBAAC,oBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcG,SAAzC;AAAA,GADV,EAEED,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CARF,eAeE,oBAAC,mBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcI,QAAzC;AAAA,GADV,EAEEF,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CAfF,eAsBE,oBAAC,qBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcK,UAAzC;AAAA,GADV,EAEEH,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CAtBF,eA6BE,oBAAC,uBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcM,YAAzC;AAAA,GADV,EAEEJ,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CA7BF,eAoCE,oBAAC,sBAAD,QACGJ,MAAM,CACJQ,MADF,CACS,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACL,OAAF,CAAUU,QAAV,KAAuBC,qBAAcO,WAAzC;AAAA,GADV,EAEEL,GAFF,CAEM,UAAAR,CAAC;AAAA,wBACJ,oBAAC,cAAD;AAAO,MAAA,GAAG,EAAEA,CAAC,CAACJ,EAAd;AAAkB,MAAA,OAAO,EAAEI,CAAC,CAACN,OAA7B;AAAsC,MAAA,MAAM,EAAE;AAAA,eAAMI,OAAM,CAACE,CAAC,CAACJ,EAAH,CAAZ;AAAA,OAA9C;AAAkE,MAAA,OAAO,EAAEI,CAAC,CAACL;AAA7E,MADI;AAAA,GAFP,CADH,CApCF,EA2CGN,QA3CH,CADF;AA+CD,CA7DM;;;;AA+DA,SAASyB,QAAT,GAAoB;AACzB,0BAAqBrC,KAAK,CAACsC,UAAN,CAAiBvC,YAAjB,CAArB;AAAA,MAAQ2B,QAAR,qBAAQA,QAAR;;AACA,SAAO;AACLA,IAAAA,QAAQ,EAARA;AADK,GAAP;AAGD","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\n\ntype ProviderProps = {\n  children?: any;\n};\n\ninterface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, ...functions }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n  };\n}\n"],"file":"ToastContext.js"}
+{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["ToastContext","React","createContext","ToastBucket","styled","div","Z_INDEXES","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","ToastPosition","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype ProviderProps = {\n  children?: any;\n};\n\ninterface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: ${Z_INDEXES.toast};\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, ...functions }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n  };\n}\n"],"file":"ToastContext.js"}

package/dist/js/Tooltips/TooltipStyles.d.ts

@@ -6,5 +6,7 @@ export declare const Tooltip: import("styled-components").StyledComponent<"div",
     align?: 'start' | 'end' | 'center' | undefined;
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
 }, never>;
-export declare const TooltipTrigger: import("styled-components").FlattenSimpleInterpolation;
-export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipTrigger: (delay?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
+    delay?: string;
+}, never>;

package/dist/js/Tooltips/TooltipStyles.js

@@ -15,6 +15,8 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,7 +29,7 @@ var distanceToEdge = function distanceToEdge(size) {
   return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
 };
 
-var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34ems;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: 1;\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
+var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34em;\n    background: ", ";\n    position: absolute; \n    opacity: 0; \n    z-index: ", ";\n    ", "\n\n    ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n    \n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " \n                    ", " \n                    ", " \n                    ", ";\n  }\n"])), function (props) {
   return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
 }, function (props) {
   return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
@@ -39,7 +41,7 @@ var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject
   return props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px';
 }, function (props) {
   return props.height;
-}, _styles.COLORS.primary_800, function (props) {
+}, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.tooltip, function (props) {
   return props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '';
 }, function (props) {
   return props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '';
@@ -77,10 +79,16 @@ Tooltip.defaultProps = {
   align: 'center',
   position: 'bottom'
 };
-var TooltipTrigger = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover ", ", &:focus-within ", ", &:focus ", " {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n"])), Tooltip, Tooltip, Tooltip);
+
+var TooltipTrigger = function TooltipTrigger(delay) {
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover ", ", &:focus-within ", ", &:focus ", " {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ", ";\n  }\n"])), Tooltip, Tooltip, Tooltip, delay !== null && delay !== void 0 ? delay : '1s');
+};
+
 exports.TooltipTrigger = TooltipTrigger;
 
-var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), TooltipTrigger);
+var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (props) {
+  return TooltipTrigger(props.delay);
+});
 
 exports.TooltipContainer = TooltipContainer;
 //# sourceMappingURL=TooltipStyles.js.map

package/dist/js/Tooltips/TooltipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","position","withArrow","defaultProps","TooltipTrigger","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34ems;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: 1;\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 1s;\n  }\n`;\n\nexport const TooltipContainer = styled.div`\n  display: inline-block;\n  position: relative;\n\n  ${TooltipTrigger}\n`;\n"],"file":"TooltipStyles.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","XSmall","Small","Tooltip","styled","div","props","Medium","ComponentTextStyle","Regular","COLORS","white","align","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","css","TooltipContainer"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { Size } from '../types';\nimport { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst distanceToEdge = (size: Size | undefined) => {\n  return size == Size.XSmall ? '8px' : (!size || size == Size.Small) ? '12px' : '16px';\n}\n\nexport const Tooltip = styled.div<{\n  withArrow?: boolean;\n  size?: Size;\n  height?: string;\n  align?: 'start' | 'end' | 'center' | undefined;\n  position?: 'top' | 'right' | 'bottom' | 'left' | undefined;\n}>`\n\n    pointer-events: none;\n    ${props => (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.XSmall  ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : '')}\n    ${props => (props.align == 'center' ? 'text-align: center;' : '')}\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n    \n    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};\n    border-radius: 2px;\n    width: max-content;\n    height: ${props => props.height};\n    max-width: 34em;\n    background: ${COLORS.primary_800};\n    position: absolute; \n    opacity: 0; \n    z-index: ${Z_INDEXES.tooltip};\n    ${props => (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : '')}\n\n    ${props => (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : '')}\n    ${props => (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : '')}\n            \n    ${props =>\n      props.position == 'left' || props.position == 'right'\n        ? ''\n        : props.align == 'start'\n        ? 'left: 0%;'\n        : props.align == 'end'\n        ? 'right: 0%;'\n        : 'left: 50%; transform: translateX(-50%);'}\n\n\n&::after {\n    ${props => (!props.withArrow ? 'display: none;' : '')}\n    content: \"\";\n    position: absolute;\n    ${props => (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : '')}\n    \n    ${props => (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n    ${props => (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : '')}\n\n    ${props =>\n      props.position == 'left' || props.position == 'right' ? '' : \n      props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}\n\n    ${props => (props.position == 'left' ? '' : 'margin-left: -5px;')}\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ${props => (props.position == 'top' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'right' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'bottom' ? COLORS.primary_800 : 'transparent')} \n                    ${props => (props.position == 'left' ? COLORS.primary_800 : 'transparent')};\n  }\n`;\n\nTooltip.defaultProps = {\n  withArrow: false,\n  size: Size.Small,\n  height: 'auto',\n  align: 'center',\n  position: 'bottom'\n}\n\nexport const TooltipTrigger = (delay?: string) => css`\n  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ${delay ?? '1s'};\n  }\n`;\n\nexport const TooltipContainer = styled.div<{delay?: string}>`\n  display: inline-block;\n  position: relative;\n\n  ${props => TooltipTrigger(props.delay)}\n`;\n"],"file":"TooltipStyles.js"}

package/dist/js/Tooltips/TooltipTypes.d.ts

@@ -7,6 +7,7 @@ export interface TooltipProps {
     withArrow?: boolean;
     width?: string;
     size?: Size;
+    delay?: string;
     height?: string;
     align?: 'start' | 'end' | 'center' | undefined;
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;

package/dist/js/Tooltips/TooltipTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAUG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipTypes.tsx"],"names":[],"mappings":";;;;;;AAEA;AACA;AACA;AAWG","sourcesContent":["import { Size } from \"../types\";\n\n/**\n * Types for the table.\n */\n export interface TooltipProps {\n    label?: string;\n    withArrow?: boolean;\n    width?: string;\n    size?: Size;\n    delay?: string;\n    height?: string;\n    align? : 'start' | 'end' | 'center' | undefined;\n    position? : 'top' | 'right' | 'bottom' | 'left' | undefined;\n    children?: React.ReactNode;\n  };\n  "],"file":"TooltipTypes.js"}