@laerdal/life-react-components 1.2.2-dev.7 → 1.3.0

package/dist/esm/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["React","Size","COLORS","ComponentTextStyle","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","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":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,EAA8CC,iBAA9C,EAAiEC,kBAAjE,QAA0F,sBAA1F,C,CAEA;;AACA,MAAMC,sBAAsB,GAAGL,MAAM,CAACM,GAAI;AAC1C;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMC,WAAW,GAAGP,MAAM,CAACM,GAAI;AAC/B;AACA,6BAA6BR,MAAM,CAACU,WAAY;AAChD;AACA;AACA;AACA;AACA;AACA,kBAAkBV,MAAM,CAACW,KAAM;AAC/B;AACA,CAVA;AAYA,MAAMC,SAAS,GAAGV,MAAM,CAACW,MAAO;AAChC,WAAWb,MAAM,CAACc,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBd,MAAM,CAACe,WAAY;AACpC;AACA;AACA,iBAAiBf,MAAM,CAACe,WAAY;AACpC;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBf,MAAM,CAACgB,UAAW;AACtC,eAAehB,MAAM,CAACiB,WAAY;AAClC;AACA;AACA,gCAAgCjB,MAAM,CAACiB,WAAY;AACnD;AACA,iCAAiCjB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,eAAeV,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBV,MAAM,CAACgB,UAAW;AACtC,eAAehB,MAAM,CAACiB,WAAY;AAClC;AACA;AACA,gCAAgCjB,MAAM,CAACiB,WAAY;AACnD;AACA,iCAAiCjB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,KAAM;AACvC,8BAA8BX,MAAM,CAACqB,WAAY;AACjD;AACA,+BAA+BrB,MAAM,CAACU,WAAY;AAClD,gCAAgCV,MAAM,CAACU,WAAY;AACnD;AACA;AACA;AACA,eAAeV,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,oBAAoBV,MAAM,CAACsB,WAAY;AACvC,eAAetB,MAAM,CAACkB,WAAY;AAClC,iCAAiClB,MAAM,CAACmB,QAAS,iBAAgBnB,MAAM,CAACoB,KAAM;AAC9E;AACA;AACA;AACA,gCAAgCpB,MAAM,CAACkB,WAAY;AACnD;AACA,iCAAiClB,MAAM,CAACU,WAAY;AACpD,kCAAkCV,MAAM,CAACU,WAAY;AACrD;AACA;AACA;AACA;AACA,eAAeV,MAAM,CAACe,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,iBAAiBf,MAAM,CAACe,WAAY;AACpC;AACA;AACA;AACA,aAAahB,IAAI,CAACwB,MAAO;AACzB,QAAQjB,kBAAkB,CAACL,kBAAkB,CAACuB,OAApB,EAA6B,IAA7B,CAAmC;AAC7D;AACA;AACA;AACA;AACA;AACA,aAAazB,IAAI,CAAC0B,KAAM;AACxB,QAAQpB,iBAAiB,CAACJ,kBAAkB,CAACuB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA,aAAazB,IAAI,CAAC2B,MAAO;AACzB,QAAQtB,iBAAiB,CAACH,kBAAkB,CAACuB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA,aAAazB,IAAI,CAAC4B,KAAM;AACxB,QAAQxB,iBAAiB,CAACF,kBAAkB,CAACuB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA,CA7IA,C,CA+IA;;AAgBA,MAAMI,cAAc,GAAG,CAAC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,IAAR;AAAcC,EAAAA,QAAd;AAAwBC,EAAAA,SAAxB;AAAmCC,EAAAA;AAAnC,CAAD,KAA0E;AAC/F;AACF;AACA;AACA;AACE,QAAMC,WAAW,GAAIC,EAAD,IAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,sBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,SAAS,EAAG,GAAER,QAAQ,GAAG,MAAH,GAAY,EAAG;AAAlD,IADF,EAEGD,IAAI,CAACU,GAAL,CAAS,CAACC,GAAD,EAAqBC,KAArB,kBACR,oBAAC,SAAD;AACE,IAAA,GAAG,EAAG,GAAED,GAAI,IAAGC,KAAM,EADvB;AAEE,IAAA,KAAK,EAAEV,SAAS,GAAG;AAAEW,MAAAA,KAAK,EAAG,GAAE,MAAMb,IAAI,CAACc,MAAO;AAA9B,KAAH,GAAwC,EAF1D;AAGE,IAAA,SAAS,EAAG,QAAOf,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG,EAH9F;AAIE,IAAA,OAAO,EAAE,MAAM,CAACL,GAAG,CAACK,QAAL,IAAiBZ,WAAW,CAACO,GAAG,CAACN,EAAL;AAJ7C,kBAKE;AAAK,IAAA,SAAS,EAAG,QAAON,IAAK,IAAGY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAAG,IAAGJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAG;AAAjG,KACGL,GAAG,CAACM,KADP,CALF,CADD,CAFH,CADF;AAgBD,CA/BD;;;AAbEjB,EAAAA,I;AAOAiB,IAAAA,K;AACAF,IAAAA,Q;AACAV,IAAAA,E;AACAW,IAAAA,Q;;AATAf,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;AA2CF,eAAeL,cAAf","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';\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-${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"}
+{"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\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/esm/Tabs/TabLink.js

@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { NotificationDot } from '../NotificationDot';
 import { Size } from '../types';
 import { COLORS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
 const StyledTabLink = styled(NavLink)`
   display: flex;
   flex-direction: row;
@@ -26,6 +27,7 @@ const StyledTabLink = styled(NavLink)`
   }
 
   &:focus {
+    z-index: ${Z_INDEXES.focus};
     background-color: ${COLORS.white};
     box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
     outline: none;
@@ -36,24 +38,31 @@ const StyledTabLink = styled(NavLink)`
   }
 
   &.active {
+    z-index: ${Z_INDEXES.active};
     background-color: ${COLORS.neutral_20};
   }
+
   &.active:hover {
     background-color: ${COLORS.primary_20};
   }
+
   &.active:focus {
     background-color: ${COLORS.white};
   }
 
   &:hover {
+    z-index: ${Z_INDEXES.hover};
     background-color: ${COLORS.primary_20};
     color: ${COLORS.primary_600};
   }
+
   &:active {
+    z-index: ${Z_INDEXES.active};
     box-shadow: none;
     background-color: ${COLORS.primary_100};
     color: ${COLORS.primary_800};
   }
+
   &.active {
     &::after {
       position: absolute;
@@ -64,17 +73,16 @@ const StyledTabLink = styled(NavLink)`
       left: -1px;
       background-color: ${COLORS.primary_500};
 
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
+      border-radius: 2px;
     }
   }
+
   &.active:hover {
     &::after {
       background-color: ${COLORS.primary_600};
     }
   }
+
   &.active:active {
     background-color: ${COLORS.primary_100};
 
@@ -82,12 +90,15 @@ const StyledTabLink = styled(NavLink)`
       background-color: ${COLORS.primary_800};
     }
   }
+
   &:disabled {
     box-shadow: none;
     background-color: ${COLORS.white};
+
     span {
       color: ${COLORS.neutral_300};
     }
+
     &::after {
       background-color: ${COLORS.white};
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["React","NavLink","useLocation","styled","NotificationDot","Size","COLORS","StyledTabLink","neutral_600","props","disabled","neutral_100","white","neutral_20","primary_20","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';\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    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 = 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","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`;\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/esm/Toasters/ToastContext.js

@@ -9,12 +9,13 @@ import styled from 'styled-components';
 import { createUUID } from '../Services/functions';
 import Toast from './Toast';
 import { ToastPosition } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
 
 /*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
 export const ToastContext = /*#__PURE__*/React.createContext({});
 const ToastBucket = styled.div`
   position: fixed;
-  z-index: 9999;
+  z-index: ${Z_INDEXES.toast};
   display: flex;
   flex-direction: column-reverse;
 `;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["React","styled","createUUID","Toast","ToastPosition","ToastContext","createContext","ToastBucket","div","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","toasts","setToasts","useState","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","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';\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":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","ToastContext","createContext","ToastBucket","div","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","toasts","setToasts","useState","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","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/esm/Tooltips/TooltipStyles.js

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import { Size } from '../types';
 import { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';
 import { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
 
 const distanceToEdge = size => {
   return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
@@ -20,11 +21,11 @@ export const Tooltip = styled.div`
     border-radius: 2px;
     width: max-content;
     height: ${props => props.height};
-    max-width: 34ems;
+    max-width: 34em;
     background: ${COLORS.primary_800};
     position: absolute; 
     opacity: 0; 
-    z-index: 1;
+    z-index: ${Z_INDEXES.tooltip};
     ${props => props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : ''}
 
     ${props => props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''}
@@ -61,17 +62,17 @@ Tooltip.defaultProps = {
   align: 'center',
   position: 'bottom'
 };
-export const TooltipTrigger = css`
+export const TooltipTrigger = delay => css`
   &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
     opacity: 1;
     transition: 0.5s;
-    transition-delay: 1s;
+    transition-delay: ${delay ?? '1s'};
   }
 `;
 export const TooltipContainer = styled.div`
   display: inline-block;
   position: relative;
 
-  ${TooltipTrigger}
+  ${props => TooltipTrigger(props.delay)}
 `;
 //# sourceMappingURL=TooltipStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","position","withArrow","defaultProps","TooltipTrigger","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":["styled","css","Size","BOXSHADOWS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","distanceToEdge","size","XSmall","Small","Tooltip","div","props","Medium","Regular","white","align","BOXSHADOW_L2","height","primary_800","tooltip","position","withArrow","defaultProps","TooltipTrigger","delay","TooltipContainer"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,UAAT,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAuD,WAAvD;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,kBAA/C,QAAyE,sBAAzE;AACA,SAAQC,SAAR,QAAwB,qBAAxB;;AAEA,MAAMC,cAAc,GAAIC,IAAD,IAA4B;AACjD,SAAOA,IAAI,IAAIT,IAAI,CAACU,MAAb,GAAsB,KAAtB,GAA+B,CAACD,IAAD,IAASA,IAAI,IAAIT,IAAI,CAACW,KAAvB,GAAgC,MAAhC,GAAyC,MAA9E;AACD,CAFD;;AAIA,OAAO,MAAMC,OAAO,GAAGd,MAAM,CAACe,GAM3B;AACH;AACA;AACA,MAAMC,KAAK,IAAKA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACW,KAAnB,IAA4BG,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACe,MAA/C,GAAwDV,iBAAiB,CAACF,kBAAkB,CAACa,OAApB,EAA6Bd,MAAM,CAACe,KAApC,CAAzE,GAAsH,EAAI;AAC1I,MAAMH,KAAK,IAAKA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACU,MAAnB,GAA6BJ,kBAAkB,CAACH,kBAAkB,CAACa,OAApB,EAA6Bd,MAAM,CAACe,KAApC,CAA/C,GAA4F,EAAI;AAChH,MAAMH,KAAK,IAAKA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACe,MAAnB,GAA4BX,iBAAiB,CAACD,kBAAkB,CAACa,OAApB,EAA6Bd,MAAM,CAACe,KAApC,CAA7C,GAA0F,EAAI;AAC9G,MAAMH,KAAK,IAAKA,KAAK,CAACI,KAAN,IAAe,QAAf,GAA0B,qBAA1B,GAAkD,EAAI;AACtE,kBAAkBjB,UAAU,CAACkB,YAAa;AAC1C;AACA,eAAeL,KAAK,IAAIA,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACU,MAAnB,GAA4B,SAA5B,GAAwCI,KAAK,CAACL,IAAN,IAAcT,IAAI,CAACe,MAAnB,GAA4B,UAA5B,GAAyC,UAAW;AACpH;AACA;AACA,cAAcD,KAAK,IAAIA,KAAK,CAACM,MAAO;AACpC;AACA,kBAAkBlB,MAAM,CAACmB,WAAY;AACrC;AACA;AACA,eAAed,SAAS,CAACe,OAAQ;AACjC,MAAMR,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0B,eAA1B,GAA4CT,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6B,YAA7B,GAA4C,EAAI;AAC5G;AACA,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,4DAA3B,GAA0F,EAAI;AAC9G,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4B,qDAA5B,GAAoF,EAAI;AACxG;AACA,MAAMT,KAAK,IACLA,KAAK,CAACS,QAAN,IAAkB,MAAlB,IAA4BT,KAAK,CAACS,QAAN,IAAkB,OAA9C,GACI,EADJ,GAEIT,KAAK,CAACI,KAAN,IAAe,OAAf,GACA,WADA,GAEAJ,KAAK,CAACI,KAAN,IAAe,KAAf,GACA,YADA,GAEA,yCAA0C;AACpD;AACA;AACA;AACA,MAAMJ,KAAK,IAAK,CAACA,KAAK,CAACU,SAAP,GAAmB,gBAAnB,GAAsC,EAAI;AAC1D;AACA;AACA,MAAMV,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0B,YAA1B,GAAyCT,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6B,eAA7B,GAA+C,EAAI;AAC5G;AACA,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4B,uDAA5B,GAAsF,EAAI;AAC1G,MAAMT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,sDAA3B,GAAoF,EAAI;AACxG;AACA,MAAMT,KAAK,IACLA,KAAK,CAACS,QAAN,IAAkB,MAAlB,IAA4BT,KAAK,CAACS,QAAN,IAAkB,OAA9C,GAAwD,EAAxD,GACAT,KAAK,CAACI,KAAN,IAAe,OAAf,GAA0B,SAAQV,cAAc,CAACM,KAAK,CAACL,IAAP,CAAa,GAA7D,GAAkEK,KAAK,CAACI,KAAN,IAAe,KAAf,GAAwB,UAASV,cAAc,CAACM,KAAK,CAACL,IAAP,CAAa,GAA5D,GAAiE,YAAa;AACtJ;AACA,MAAMK,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2B,EAA3B,GAAgC,oBAAsB;AACtE;AACA;AACA;AACA,oBAAoBT,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,KAAlB,GAA0BrB,MAAM,CAACmB,WAAjC,GAA+C,aAAe;AAC5F,sBAAsBP,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,OAAlB,GAA4BrB,MAAM,CAACmB,WAAnC,GAAiD,aAAe;AAChG,sBAAsBP,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,QAAlB,GAA6BrB,MAAM,CAACmB,WAApC,GAAkD,aAAe;AACjG,sBAAsBP,KAAK,IAAKA,KAAK,CAACS,QAAN,IAAkB,MAAlB,GAA2BrB,MAAM,CAACmB,WAAlC,GAAgD,aAAe;AAC/F;AACA,CA7DO;AA+DPT,OAAO,CAACa,YAAR,GAAuB;AACrBD,EAAAA,SAAS,EAAE,KADU;AAErBf,EAAAA,IAAI,EAAET,IAAI,CAACW,KAFU;AAGrBS,EAAAA,MAAM,EAAE,MAHa;AAIrBF,EAAAA,KAAK,EAAE,QAJc;AAKrBK,EAAAA,QAAQ,EAAE;AALW,CAAvB;AAQA,OAAO,MAAMG,cAAc,GAAIC,KAAD,IAAoB5B,GAAI;AACtD,YAAYa,OAAQ,oBAAmBA,OAAQ,aAAYA,OAAQ;AACnE;AACA;AACA,wBAAwBe,KAAK,IAAI,IAAK;AACtC;AACA,CANO;AAQP,OAAO,MAAMC,gBAAgB,GAAG9B,MAAM,CAACe,GAAsB;AAC7D;AACA;AACA;AACA,IAAIC,KAAK,IAAIY,cAAc,CAACZ,KAAK,CAACa,KAAP,CAAc;AACzC,CALO","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/esm/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"}

package/dist/esm/Tooltips/TooltipWrapper.js

@@ -8,10 +8,13 @@ const TooltipWrapper = ({
   withArrow,
   size = Size.Small,
   height = 'auto',
+  delay = undefined,
   align = 'center',
   position = 'bottom'
 }) => {
-  return /*#__PURE__*/React.createElement(TooltipContainer, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return /*#__PURE__*/React.createElement(TooltipContainer, {
+    delay: delay
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     align: align,
     height: height,
     size: size,

package/dist/esm/Tooltips/TooltipWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEC,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,KADsB;AACfC,EAAAA,QADe;AAEtBC,EAAAA,SAFsB;AAGtBC,EAAAA,IAAI,GAAGL,IAAI,CAACM,KAHU;AAItBC,EAAAA,MAAM,GAAG,MAJa;AAKtBC,EAAAA,KAAK,GAAG,QALc;AAMtBC,EAAAA,QAAQ,GAAG;AANW,CAAD,KAMoB;AAExC,sBAAO,oBAAC,gBAAD,qBACC,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAED,KAAhB;AACG,IAAA,MAAM,EAAED,MADX;AAEG,IAAA,IAAI,EAAEF,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEK;AAJb,KAKIP,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAlBD;;AAoBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer>\n            <Tooltip align={align} \n               height={height} \n               size={size}\n               withArrow={withArrow} \n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}
+{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["React","TooltipContainer","Tooltip","Size","TooltipWrapper","label","children","withArrow","size","Small","height","delay","undefined","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,iBAA1C;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEC,MAAMC,cAAc,GAAG,CAAC;AACtBC,EAAAA,KADsB;AACfC,EAAAA,QADe;AAEtBC,EAAAA,SAFsB;AAGtBC,EAAAA,IAAI,GAAGL,IAAI,CAACM,KAHU;AAItBC,EAAAA,MAAM,GAAG,MAJa;AAKtBC,EAAAA,KAAK,GAAGC,SALc;AAMtBC,EAAAA,KAAK,GAAG,QANc;AAOtBC,EAAAA,QAAQ,GAAG;AAPW,CAAD,KAOoB;AAExC,sBAAO,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEH;AAAzB,kBACC,oBAAC,OAAD;AAAS,IAAA,KAAK,EAAEE,KAAhB;AACG,IAAA,MAAM,EAAEH,MADX;AAEG,IAAA,IAAI,EAAEF,IAFT;AAGG,IAAA,SAAS,EAAED,SAHd;AAIG,IAAA,QAAQ,EAAEO;AAJb,KAKIT,KALJ,CADD,EAQDC,QARC,CAAP;AAUF,CAnBD;;AAqBA,eAAeF,cAAf","sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \n const TooltipWrapper = ({\n   label, children,\n   withArrow,\n   size = Size.Small,\n   height = 'auto',\n   delay = undefined,\n   align = 'center', \n   position = 'bottom' } : TooltipProps) => {\n \n    return <TooltipContainer delay={delay}>\n            <Tooltip align={align}\n               height={height}\n               size={size}\n               withArrow={withArrow}\n               position={position}>\n               {label}\n            </Tooltip>\n         {children}\n       </TooltipContainer>;\n };\n \n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}

package/dist/esm/icons/index.js

@@ -19,7 +19,7 @@ export const getSize = size => {
 };
 const Container = styled.div`
   position: relative;
-  ${TooltipTrigger}
+  ${TooltipTrigger()}
 `;
 const IconComponent = styled.svg`
   width: ${props => props.width};

package/dist/esm/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["React","styled","Tooltip","TooltipTrigger","ContentIcons","SystemIcons","getSize","size","indexOf","Container","div","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/icons/index.tsx"],"names":["React","styled","Tooltip","TooltipTrigger","ContentIcons","SystemIcons","getSize","size","indexOf","Container","div","IconComponent","svg","props","width","height","renderIcon","children","viewBox","tooltip","className","BaseIcon","SystemIcon","ContentIcon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport * as ContentIcons from './contenticons/ContentIcons';\nimport * as SystemIcons from './systemicons/SystemIcons';\n\nexport type BaseProps = {\n  className?: string;\n  children?: any;\n  size?: string;\n  viewBox?: string;\n  tooltip?: string;\n};\n\nexport type IconProps = {\n  label?: string;\n  className?: string;\n  color?: string;\n  size?: string;\n  viewBox?: string;\n};\n\n/**\n * Retrieves the size of the icon.\n * @param size - Original size which was passed to the icon.\n * @returns Numeric value indicating the size of the icon.\n */\nexport const getSize = (size: string) => {\n  if (typeof size === 'string' && size.indexOf('px') === -1) {\n    return `${size}px`;\n  } else {\n    return size;\n  }\n};\n\nconst Container = styled.div`\n  position: relative;\n  ${TooltipTrigger()}\n`;\nconst IconComponent = styled.svg<{ width: string; height: string }>`\n  width: ${props => props.width};\n  height: ${props => props.height};\n`;\n\nconst renderIcon = (children: React.ReactNode, width: string, height: string, viewBox: string, tooltip?: string, className?: string) => {\n  return tooltip ? (\n    <Container>\n      <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        {children}\n      </IconComponent>\n      <Tooltip>{tooltip}</Tooltip>\n    </Container>\n  ) : (\n    <IconComponent className={className} width={width} height={height} viewBox={viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      {children}\n    </IconComponent>\n  );\n};\n\nexport const BaseIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '16px', viewBox = '0 0 25 25', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const SystemIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '24px', viewBox = '0 0 24 24', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport const ContentIcon: React.FunctionComponent<BaseProps> = ({ className, children, size = '48px', viewBox = '0 0 48 48', tooltip = '' }) => {\n  return renderIcon(children, getSize(size), getSize(size), viewBox, tooltip, className);\n};\n\nexport { SystemIcons };\nexport { ContentIcons };\n"],"file":"index.js"}

package/dist/esm/index.js

@@ -26,4 +26,5 @@ export * from './Table';
 export * from './Toggles';
 export * from './HyperLink';
 export * from './NotificationDot';
+export * from './Accordion';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AAEA,cAAc,YAAd;AAEA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AAEA,cAAc,YAAd;AAEA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\n\nexport * from './AuthPage';\n\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\n"],"file":"index.js"}

package/dist/esm/styles/typography.js

@@ -363,11 +363,13 @@ const ComponentXLStyling = (textStyle, color) => ComponentStyling('24px', '28px'
 const ComponentXL = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 28,
     fontSize: 24,
@@ -378,6 +380,7 @@ const ComponentXL = ({
 
 ComponentXL.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -386,11 +389,13 @@ const ComponentLStyling = (textStyle, color) => ComponentStyling('20px', '24px',
 const ComponentL = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 24,
     fontSize: 20,
@@ -401,6 +406,7 @@ const ComponentL = ({
 
 ComponentL.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -409,11 +415,13 @@ const ComponentMStyling = (textStyle, color) => ComponentStyling('18px', '24px',
 const ComponentM = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 24,
     fontSize: 18,
@@ -424,6 +432,7 @@ const ComponentM = ({
 
 ComponentM.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -432,11 +441,13 @@ const ComponentSStyling = (textStyle, color) => ComponentStyling('16px', '20px',
 const ComponentS = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 20,
     fontSize: 16,
@@ -447,6 +458,7 @@ const ComponentS = ({
 
 ComponentS.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -455,12 +467,14 @@ const ComponentXSStyling = (textStyle, color) => ComponentStyling('14px', '16px'
 const ComponentXS = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   let textTransform = componentTextTransformation(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 16,
     fontSize: 14,
@@ -472,6 +486,7 @@ const ComponentXS = ({
 
 ComponentXS.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -480,12 +495,14 @@ const ComponentXXSStyling = (textStyle, color) => ComponentStyling('12px', '16px
 const ComponentXXS = ({
   color,
   textStyle,
-  children
+  children,
+  className
 }) => {
   let fontWeight = componentFontWeight(textStyle);
   let fontStyle = componentFontStyle(textStyle);
   let textTransform = componentTextTransformation(textStyle);
   return /*#__PURE__*/React.createElement(TypographyBase, {
+    className: className,
     color: color,
     lineHeight: 16,
     fontSize: 12,
@@ -497,6 +514,7 @@ const ComponentXXS = ({
 
 ComponentXXS.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 
@@ -560,6 +578,7 @@ const ComponentResponsive = ({
 
 ComponentResponsive.propTypes = {
   color: _pt.string,
+  className: _pt.string,
   textStyle: _pt.oneOf([1, 2, 3, 4])
 };
 export { TYPOGRAPHY };