@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/esm/Toggles/ToggleSwitch.js

@@ -1,52 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-
-/**
- * Import custom styles.
- */
-import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
-import { Size } from '..';
-
-const ToggleSwitch = ({
-  id,
-  disabled,
-  selected,
-  label,
-  isSemantic,
-  size,
-  onToggle
-}) => {
-  /**
-   * Does all required pre-requisites and toggles the switcher state.
-   */
-  const handleClick = () => {
-    // If disabled, don't do anything
-    if (disabled) {
-      return;
-    } // Toggle state change
-
-
-    onToggle(!selected);
-  };
-
-  size = size ?? Size.Medium;
-  return /*#__PURE__*/React.createElement(StyledSwitch, {
-    onClick: handleClick,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
-    selected: selected,
-    tabIndex: disabled ? -1 : 0
-  }, /*#__PURE__*/React.createElement(ToggleSwitchContainer, null, /*#__PURE__*/React.createElement(Switch, {
-    className: isSemantic ? 'semantic' : ''
-  })), label && /*#__PURE__*/React.createElement("label", {
-    className: 'label',
-    htmlFor: id
-  }, label));
-};
-
-export default ToggleSwitch;
-//# sourceMappingURL=ToggleSwitch.js.map

package/dist/esm/Toggles/ToggleSwitch.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","id","disabled","selected","label","isSemantic","size","onToggle","handleClick","Medium","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASC,qBAAT,EAAgCC,YAAY,IAAIC,MAAhD,EAAwDC,YAAxD,QAA4E,iBAA5E;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEA,MAAMH,YAAY,GAAG,CAAC;AAAEI,EAAAA,EAAF;AAAMC,EAAAA,QAAN;AAAgBC,EAAAA,QAAhB;AAA0BC,EAAAA,KAA1B;AAAiCC,EAAAA,UAAjC;AAA6CC,EAAAA,IAA7C;AAAmDC,EAAAA;AAAnD,CAAD,KAAsF;AACzG;AACF;AACA;AACE,QAAMC,WAAW,GAAG,MAAM;AACxB;AACA,QAAIN,QAAJ,EAAc;AACZ;AACD,KAJuB,CAMxB;;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GARD;;AAUAG,EAAAA,IAAI,GAAGA,IAAI,IAAIN,IAAI,CAACS,MAApB;AAEA,sBACE,oBAAC,YAAD;AACE,IAAA,OAAO,EAAED,WADX;AAEE,IAAA,SAAS,EAAEF,IAAI,CACZI,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDV,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAFb;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ;AAP5B,kBAQE,oBAAC,qBAAD,qBACE,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C,IADF,CARF,EAWGD,KAAK,iBACJ;AAAO,IAAA,SAAS,EAAE,OAAlB;AAA2B,IAAA,OAAO,EAAEH;AAApC,KACGG,KADH,CAZJ,CADF;AAmBD,CAnCD;;AAqCA,eAAeP,YAAf","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { ToggleSwitchProps } from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\r\nimport { Size } from '..';\r\n\r\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const handleClick = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) {\r\n      return;\r\n    }\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      onClick={handleClick}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')}\r\n      selected={selected}\r\n      tabIndex={disabled ? -1 : 0}>\r\n      <ToggleSwitchContainer>\r\n        <Switch className={isSemantic ? 'semantic' : ''} />\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n};\r\n\r\nexport default ToggleSwitch;\r\n"],"file":"ToggleSwitch.js"}

package/dist/esm/Toggles/TogglerStyles.js

@@ -1,148 +0,0 @@
-/**
- * Import custom styles.
- */
-import { COLORS } from '../styles';
-/**
- * Import third-party libraries.
- */
-
-import styled, { css } from 'styled-components';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-export const StyledSwitch = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: max-content;
-  min-height: 48px;
-  min-width: 48px;
-  align-items: center;
-  cursor: pointer;
-  &.small {
-    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
-  }
-
-  &.medium {
-    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-  }
-
-  &.large {
-    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
-  }
-  &.disabled {
-    color: ${COLORS.neutral_300};
-
-    .label {
-      cursor: not-allowed;
-    }
-  }
-  .label {
-    cursor: inherit;
-    margin-left: 8px;
-  }
-
-  &:not(.disabled):active label:first-of-type span {
-    &:before {
-      background-color: ${COLORS.primary_100};
-    }
-  }
-
-  ${props => props.selected ? css`
-          &.disabled label:first-of-type span {
-            background-color: ${COLORS.neutral_300} !important;
-            cursor: not-allowed;
-
-            &:before {
-              background-color: ${COLORS.neutral_200} !important;
-              cursor: not-allowed;
-            }
-          }
-          &:hover span {
-            &.semantic {
-              background-color: ${COLORS.correct_500};
-            }
-
-            &:before {
-              background-color: ${COLORS.primary_20};
-            }
-          }
-          label:first-of-type span {
-            background-color: ${COLORS.primary_500};
-
-            &.semantic {
-              background-color: ${COLORS.correct_500};
-            }
-
-            &:before {
-              -webkit-transform: translateX(20px);
-              -ms-transform: translateX(20px);
-              transform: translateX(20px);
-            }
-          }
-        ` : css`
-          &.disabled label:first-of-type span {
-            background-color: ${COLORS.neutral_300} !important;
-            cursor: not-allowed;
-
-            &:before {
-              background-color: ${COLORS.neutral_100} !important;
-              cursor: not-allowed;
-            }
-          }
-          &:hover label:first-of-type span {
-            &.semantic {
-              background-color: ${COLORS.critical_500};
-            }
-
-            &:before {
-              background-color: ${COLORS.primary_20};
-            }
-          }
-        `}
-  &:not(.disabled):focus label:first-of-type span {
-    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};
-  }
-
-  &:not(.disabled) label:first-of-type {
-    cursor: inherit;
-  }
-`;
-export const ToggleSwitchContainer = styled.label`
-  position: relative;
-  align-items: center;
-  display: inline-flex;
-  height: 28px;
-  width: auto;
-  padding: 10px 6px;
-`;
-export const ToggleSwitch = styled.span`
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 36px;
-  height: 16px;
-  background-color: ${COLORS.neutral_500};
-  border-radius: 100px;
-
-  &.semantic {
-    background-color: ${COLORS.critical_500};
-  }
-
-  &:before {
-    position: absolute;
-    content: '';
-    height: 12px;
-    width: 12px;
-    left: 2px;
-    top: calc(50% - 6px);
-    background-color: ${COLORS.white};
-    -webkit-transition: background-color 0.1s, transform 0.1s;
-    transition: 0.1s;
-    transition-timing-function: ease-in-out;
-    border-radius: 50%;
-  }
-`;
-//# sourceMappingURL=TogglerStyles.js.map

package/dist/esm/Toggles/TogglerStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["COLORS","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,WAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,EAA+CC,iBAA/C,EAAkEC,kBAAlE,QAA4F,sBAA5F;AAEA,OAAO,MAAMC,YAAY,GAAGN,MAAM,CAACO,GAAuC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA;AACA,MAAMN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA;AACA,MAAMP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAA2C;AAClE;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BX,MAAM,CAACY,WAAY;AAC7C;AACA;AACA;AACA,IAAKC,KAAD,IACAA,KAAK,CAACC,QAAN,GACIZ,GAAI;AACZ;AACA,gCAAgCF,MAAM,CAACW,WAAY;AACnD;AACA;AACA;AACA,kCAAkCX,MAAM,CAACe,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCf,MAAM,CAACgB,WAAY;AACrD;AACA;AACA;AACA,kCAAkChB,MAAM,CAACiB,UAAW;AACpD;AACA;AACA;AACA,gCAAgCjB,MAAM,CAACkB,WAAY;AACnD;AACA;AACA,kCAAkClB,MAAM,CAACgB,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAjCI,GAkCId,GAAI;AACZ;AACA,gCAAgCF,MAAM,CAACW,WAAY;AACnD;AACA;AACA;AACA,kCAAkCX,MAAM,CAACmB,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCnB,MAAM,CAACoB,YAAa;AACtD;AACA;AACA;AACA,kCAAkCpB,MAAM,CAACiB,UAAW;AACpD;AACA;AACA,SAAU;AACV;AACA,+BAA+BjB,MAAM,CAACqB,QAAS,iBAAgBrB,MAAM,CAACsB,KAAM;AAC5E;AACA;AACA;AACA;AACA;AACA,CAnGO;AAqGP,OAAO,MAAMC,qBAAqB,GAAGtB,MAAM,CAACuB,KAAM;AAClD;AACA;AACA;AACA;AACA;AACA;AACA,CAPO;AASP,OAAO,MAAMC,YAAY,GAAGxB,MAAM,CAACyB,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB1B,MAAM,CAAC2B,WAAY;AACzC;AACA;AACA;AACA,wBAAwB3B,MAAM,CAACoB,YAAa;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBpB,MAAM,CAAC4B,KAAM;AACrC;AACA;AACA;AACA;AACA;AACA,CA/BO","sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n\r\n  ${(props) =>\r\n    props.selected\r\n      ? css`\r\n          &.disabled label:first-of-type span {\r\n            background-color: ${COLORS.neutral_300} !important;\r\n            cursor: not-allowed;\r\n\r\n            &:before {\r\n              background-color: ${COLORS.neutral_200} !important;\r\n              cursor: not-allowed;\r\n            }\r\n          }\r\n          &:hover span {\r\n            &.semantic {\r\n              background-color: ${COLORS.correct_500};\r\n            }\r\n\r\n            &:before {\r\n              background-color: ${COLORS.primary_20};\r\n            }\r\n          }\r\n          label:first-of-type span {\r\n            background-color: ${COLORS.primary_500};\r\n\r\n            &.semantic {\r\n              background-color: ${COLORS.correct_500};\r\n            }\r\n\r\n            &:before {\r\n              -webkit-transform: translateX(20px);\r\n              -ms-transform: translateX(20px);\r\n              transform: translateX(20px);\r\n            }\r\n          }\r\n        `\r\n      : css`\r\n          &.disabled label:first-of-type span {\r\n            background-color: ${COLORS.neutral_300} !important;\r\n            cursor: not-allowed;\r\n\r\n            &:before {\r\n              background-color: ${COLORS.neutral_100} !important;\r\n              cursor: not-allowed;\r\n            }\r\n          }\r\n          &:hover label:first-of-type span {\r\n            &.semantic {\r\n              background-color: ${COLORS.critical_500};\r\n            }\r\n\r\n            &:before {\r\n              background-color: ${COLORS.primary_20};\r\n            }\r\n          }\r\n        `}\r\n  &:not(.disabled):focus label:first-of-type span {\r\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${COLORS.neutral_500};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${COLORS.white};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"file":"TogglerStyles.js"}

package/dist/esm/Toggles/TogglerTypes.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=TogglerTypes.js.map

package/dist/esm/Toggles/TogglerTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"TogglerTypes.js"}

package/dist/esm/Toggles/index.js

@@ -1,3 +0,0 @@
-import ToggleSwitch from './ToggleSwitch';
-export { ToggleSwitch };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Toggles/index.ts"],"names":["ToggleSwitch"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AAEA,SAASA,YAAT","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\r\n\r\nexport { ToggleSwitch };\r\n"],"file":"index.js"}

package/dist/esm/Tooltips/Tooltip.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { TooltipContainer } from './TooltipStyles';
-import { Size } from '..';
-
-const Tooltip = ({
-  label,
-  children,
-  withArrow,
-  size = Size.Small,
-  height = 'auto',
-  width = 'auto',
-  align = 'center',
-  position = 'bottom'
-}) => {
-  return /*#__PURE__*/React.createElement(TooltipContainer, {
-    align: align,
-    height: height,
-    size: size,
-    width: width,
-    withArrow: withArrow,
-    position: position,
-    className: "container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "tooltip"
-  }, label), children);
-};
-
-export default Tooltip;
-//# sourceMappingURL=Tooltip.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Tooltips/Tooltip.tsx"],"names":["React","TooltipContainer","Size","Tooltip","label","children","withArrow","size","Small","height","width","align","position"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAIA,SAASC,gBAAT,QAAiC,iBAAjC;AACA,SAASC,IAAT,QAAqB,IAArB;;AAEC,MAAMC,OAAO,GAAG,CAAC;AACfC,EAAAA,KADe;AACRC,EAAAA,QADQ;AAEfC,EAAAA,SAFe;AAGfC,EAAAA,IAAI,GAAGL,IAAI,CAACM,KAHG;AAIfC,EAAAA,MAAM,GAAG,MAJM;AAKfC,EAAAA,KAAK,GAAG,MALO;AAMfC,EAAAA,KAAK,GAAG,QANO;AAOfC,EAAAA,QAAQ,GAAG;AAPI,CAAD,KAO2B;AAExC,sBAAO,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAED,KAAzB;AACC,IAAA,MAAM,EAAEF,MADT;AAEC,IAAA,IAAI,EAAEF,IAFP;AAGC,IAAA,KAAK,EAAEG,KAHR;AAIC,IAAA,SAAS,EAAEJ,SAJZ;AAKC,IAAA,QAAQ,EAAEM,QALX;AAKqB,IAAA,SAAS,EAAC;AAL/B,kBAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACIR,KADJ,CAND,EASDC,QATC,CAAP;AAWF,CApBD;;AAsBA,eAAeF,OAAf","sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\n\r\nimport { TooltipContainer } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\n const Tooltip = ({\r\n   label, children,\r\n   withArrow,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   width = 'auto',\r\n   align = 'center', \r\n   position = 'bottom' } : TooltipProps) => {\r\n \r\n    return <TooltipContainer align={align} \r\n            height={height} \r\n            size={size}\r\n            width={width} \r\n            withArrow={withArrow} \r\n            position={position} className=\"container\">\r\n            <div className=\"tooltip\">\r\n               {label}\r\n            </div>\r\n         {children}\r\n       </TooltipContainer>;\r\n };\r\n \r\n export default Tooltip;"],"file":"Tooltip.js"}

package/dist/esm/Tooltips/TooltipStyles.js

@@ -1,78 +0,0 @@
-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';
-};
-
-export const Tooltip = styled.div`
-
-    pointer-events: none;
-    ${props => props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : ''}
-    ${props => props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : ''}
-    ${props => props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : ''}
-    ${props => props.align == 'center' ? 'text-align: center;' : ''}
-    box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
-    
-    padding: ${props => props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'};
-    border-radius: 2px;
-    width: max-content;
-    height: ${props => props.height};
-    max-width: 34em;
-    background: ${COLORS.primary_800};
-    position: absolute; 
-    opacity: 0; 
-    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%);' : ''}
-    ${props => props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : ''}
-            
-    ${props => props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? 'left: 0%;' : props.align == 'end' ? 'right: 0%;' : 'left: 50%; transform: translateX(-50%);'}
-
-
-&::after {
-    ${props => !props.withArrow ? 'display: none;' : ''}
-    content: "";
-    position: absolute;
-    ${props => props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : ''}
-    
-    ${props => props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : ''}
-    ${props => props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : ''}
-
-    ${props => props.position == 'left' || props.position == 'right' ? '' : props.align == 'start' ? `left: ${distanceToEdge(props.size)};` : props.align == 'end' ? `right: ${distanceToEdge(props.size)};` : 'left: 50%;'}
-
-    ${props => props.position == 'left' ? '' : 'margin-left: -5px;'}
-    margin: -0.5px;
-    border-width: 4px;
-    border-style: solid;
-    border-color: ${props => props.position == 'top' ? COLORS.primary_800 : 'transparent'} 
-                    ${props => props.position == 'right' ? COLORS.primary_800 : 'transparent'} 
-                    ${props => props.position == 'bottom' ? COLORS.primary_800 : 'transparent'} 
-                    ${props => props.position == 'left' ? COLORS.primary_800 : 'transparent'};
-  }
-`;
-Tooltip.defaultProps = {
-  withArrow: false,
-  size: Size.Small,
-  height: 'auto',
-  align: 'center',
-  position: 'bottom'
-};
-export const TooltipTrigger = delay => css`
-  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
-    opacity: 1;
-    transition: 0.5s;
-    transition-delay: ${delay ?? '1s'};
-  }
-`;
-export const TooltipContainer = styled.div`
-  display: inline-block;
-  position: relative;
-
-  ${props => TooltipTrigger(props.delay)}
-`;
-//# sourceMappingURL=TooltipStyles.js.map

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

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

package/dist/esm/Tooltips/TooltipTypes.js

@@ -1,6 +0,0 @@
-/**
- * Types for the table.
- */
-;
-export {};
-//# sourceMappingURL=TooltipTypes.js.map

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

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

package/dist/esm/Tooltips/TooltipWrapper.js

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { TooltipContainer, Tooltip } from './TooltipStyles';
-import { Size } from '..';
-
-const TooltipWrapper = ({
-  label,
-  children,
-  withArrow,
-  size = Size.Small,
-  height = 'auto',
-  delay = undefined,
-  align = 'center',
-  position = 'bottom'
-}) => {
-  return /*#__PURE__*/React.createElement(TooltipContainer, {
-    delay: delay
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    align: align,
-    height: height,
-    size: size,
-    withArrow: withArrow,
-    position: position
-  }, label), children);
-};
-
-export default TooltipWrapper;
-//# sourceMappingURL=TooltipWrapper.js.map

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

@@ -1 +0,0 @@
-{"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":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\n\r\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\n const TooltipWrapper = ({\r\n   label, children,\r\n   withArrow,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   delay = undefined,\r\n   align = 'center', \r\n   position = 'bottom' } : TooltipProps) => {\r\n \r\n    return <TooltipContainer delay={delay}>\r\n            <Tooltip align={align}\r\n               height={height}\r\n               size={size}\r\n               withArrow={withArrow}\r\n               position={position}>\r\n               {label}\r\n            </Tooltip>\r\n         {children}\r\n       </TooltipContainer>;\r\n };\r\n \r\n export default TooltipWrapper;"],"file":"TooltipWrapper.js"}

package/dist/esm/Tooltips/index.js

@@ -1,4 +0,0 @@
-import TooltipWrapper from './TooltipWrapper';
-import { TooltipTrigger, TooltipContainer } from './TooltipStyles';
-export { TooltipWrapper, TooltipTrigger, TooltipContainer };
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Tooltips/index.ts"],"names":["TooltipWrapper","TooltipTrigger","TooltipContainer"],"mappings":"AAAA,OAAOA,cAAP,MAA2B,kBAA3B;AACA,SAAQC,cAAR,EAAwBC,gBAAxB,QAA+C,iBAA/C;AAEA,SAASF,cAAT,EAAyBC,cAAzB,EAAyCC,gBAAzC","sourcesContent":["import TooltipWrapper from './TooltipWrapper';\r\nimport {TooltipTrigger, TooltipContainer} from './TooltipStyles';\r\n\r\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer };\r\n"],"file":"index.js"}