@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/umd/Toggles/TogglerStyles.js

@@ -0,0 +1,174 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "../styles", "styled-components", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("../styles"), require("styled-components"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styles, global.styledComponents, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styles, _styledComponents, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ToggleSwitch = exports.ToggleSwitchContainer = exports.StyledSwitch = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  /**
+   * Import custom styles.
+   */
+
+  /**
+   * Import third-party libraries.
+   */
+  const StyledSwitch = exports.StyledSwitch = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+  width: max-content;
+  min-height: 48px;
+  min-width: 48px;
+  align-items: center;
+  cursor: pointer;
+  &.small {
+    ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  }
+
+  &.medium {
+    ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  }
+
+  &.large {
+    ${(0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+  }
+  &.disabled {
+    color: ${_styles.COLORS.neutral_300};
+
+    .label {
+      cursor: not-allowed;
+    }
+  }
+  .label {
+    cursor: inherit;
+    margin-left: 8px;
+  }
+
+  &:not(.disabled):active label:first-of-type span {
+    &:before {
+      background-color: ${_styles.COLORS.primary_100};
+    }
+  }
+
+  ${props => props.selected ? _styledComponents.css`
+          &.disabled label:first-of-type span {
+            background-color: ${_styles.COLORS.neutral_300} !important;
+            cursor: not-allowed;
+
+            &:before {
+              background-color: ${_styles.COLORS.neutral_200} !important;
+              cursor: not-allowed;
+            }
+          }
+          &:hover span {
+            &.semantic {
+              background-color: ${_styles.COLORS.correct_500};
+            }
+
+            &:before {
+              background-color: ${_styles.COLORS.primary_20};
+            }
+          }
+          label:first-of-type span {
+            background-color: ${_styles.COLORS.primary_500};
+
+            &.semantic {
+              background-color: ${_styles.COLORS.correct_500};
+            }
+
+            &:before {
+              -webkit-transform: translateX(20px);
+              -ms-transform: translateX(20px);
+              transform: translateX(20px);
+            }
+          }
+        ` : _styledComponents.css`
+          &.disabled label:first-of-type span {
+            background-color: ${_styles.COLORS.neutral_300} !important;
+            cursor: not-allowed;
+
+            &:before {
+              background-color: ${_styles.COLORS.neutral_100} !important;
+              cursor: not-allowed;
+            }
+          }
+          &:hover label:first-of-type span {
+            &.semantic {
+              background-color: ${_styles.COLORS.critical_500};
+            }
+
+            &:before {
+              background-color: ${_styles.COLORS.primary_20};
+            }
+          }
+        `}
+  &:not(.disabled):focus label:first-of-type span {
+    box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus};
+  }
+
+  &:not(.disabled) label:first-of-type {
+    cursor: inherit;
+  }
+`;
+  const ToggleSwitchContainer = exports.ToggleSwitchContainer = _styledComponents2.default.label`
+  position: relative;
+  align-items: center;
+  display: inline-flex;
+  height: 28px;
+  width: auto;
+  padding: 10px 6px;
+`;
+  const ToggleSwitch = exports.ToggleSwitch = _styledComponents2.default.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: ${_styles.COLORS.neutral_500};
+  border-radius: 100px;
+
+  &.semantic {
+    background-color: ${_styles.COLORS.critical_500};
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    top: calc(50% - 6px);
+    background-color: ${_styles.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/umd/Toggles/TogglerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","COLORS","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","props","css","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;;AAGA;AACA;AACA;AAIO,QAAMA,YAAY,WAAZA,YAAY,GAAGC,2BAAOC,GAAuC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,KAAjBF,CAA4D;AAClE;AACA;AACA;AACA,MAAMG,mCAAkBF,+BAAD,OAAjBE,EAA8CD,eAA7B,KAAjBC,CAA4D;AAClE;AACA;AACA;AACA,MAAMC,mCAAkBH,+BAAD,OAAjBG,EAA8CF,eAA7B,KAAjBE,CAA4D;AAClE;AACA;AACA,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BH,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,IAAKC,KAAD,IACA,KAAK,CAAL,QAAA,GACIC,qBAAI;AACZ;AACA,gCAAgCN,eAAOG,WAAY;AACnD;AACA;AACA;AACA,kCAAkCH,eAAOO,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCP,eAAOQ,WAAY;AACrD;AACA;AACA;AACA,kCAAkCR,eAAOS,UAAW;AACpD;AACA;AACA;AACA,gCAAgCT,eAAOU,WAAY;AACnD;AACA;AACA,kCAAkCV,eAAOQ,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAhCI,SAAA,GAkCIF,qBAAI;AACZ;AACA,gCAAgCN,eAAOG,WAAY;AACnD;AACA;AACA;AACA,kCAAkCH,eAAOW,WAAY;AACrD;AACA;AACA;AACA;AACA;AACA,kCAAkCX,eAAOY,YAAa;AACtD;AACA;AACA;AACA,kCAAkCZ,eAAOS,UAAW;AACpD;AACA;AACA,SAAU;AACV;AACA,+BAA+BT,eAAOa,QAAS,iBAAgBb,eAAOc,KAAM;AAC5E;AACA;AACA;AACA;AACA;AAlGO,CAAA;AAqGA,QAAMC,qBAAqB,WAArBA,qBAAqB,GAAGnB,2BAAOoB,KAAM;AAClD;AACA;AACA;AACA;AACA;AACA;AANO,CAAA;AASA,QAAMC,YAAY,WAAZA,YAAY,GAAGrB,2BAAOsB,IAAK;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBlB,eAAOmB,WAAY;AACzC;AACA;AACA;AACA,wBAAwBnB,eAAOY,YAAa;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,eAAOoB,KAAM;AACrC;AACA;AACA;AACA;AACA;AA9BO,CAAA","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/umd/Toggles/TogglerTypes.js

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});
+//# sourceMappingURL=TogglerTypes.js.map

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

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

package/dist/umd/Toggles/index.js

@@ -0,0 +1,31 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./ToggleSwitch"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./ToggleSwitch"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.ToggleSwitch);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _ToggleSwitch) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ToggleSwitch = undefined;
+
+  var _ToggleSwitch2 = _interopRequireDefault(_ToggleSwitch);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  exports.ToggleSwitch = _ToggleSwitch2.default;
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Toggles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAEA,Y,GAAA,sB","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\r\n\r\nexport { ToggleSwitch };\r\n"],"file":"index.js"}

package/dist/umd/Tooltips/Tooltip.js

@@ -0,0 +1,97 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./TooltipStyles", ".."], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./TooltipStyles"), require(".."));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.TooltipStyles, global._);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _react, _TooltipStyles, _) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var React = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  const Tooltip = ({
+    label,
+    children,
+    withArrow,
+    size = _.Size.Small,
+    height = 'auto',
+    width = 'auto',
+    align = 'center',
+    position = 'bottom'
+  }) => {
+    return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, {
+      align: align,
+      height: height,
+      size: size,
+      width: width,
+      withArrow: withArrow,
+      position: position,
+      className: "container"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "tooltip"
+    }, label), children);
+  };
+
+  exports.default = Tooltip;
+});
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/Tooltip.tsx"],"names":["Tooltip","size","Size","height","width","align","position"],"mappings":";;;;;;;;;;;;;;;;;;;MACA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOC,QAAMA,OAAO,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,QAAA;AAAA,IAAA,SAAA;AAGfC,IAAAA,IAAI,GAAGC,OAHQ,KAAA;AAIfC,IAAAA,MAAM,GAJS,MAAA;AAKfC,IAAAA,KAAK,GALU,MAAA;AAMfC,IAAAA,KAAK,GANU,QAAA;AAOfC,IAAAA,QAAQ,GAAG;AAPI,GAAD,KAO2B;AAExC,WAAA,aAAO,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAkB,MAAA,KAAK,EAAvB,KAAA;AACC,MAAA,MAAM,EADP,MAAA;AAEC,MAAA,IAAI,EAFL,IAAA;AAGC,MAAA,KAAK,EAHN,KAAA;AAIC,MAAA,SAAS,EAJV,SAAA;AAKC,MAAA,QAAQ,EALT,QAAA;AAKqB,MAAA,SAAS,EAAC;AAL/B,KAAA,EAAA,aAMC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,SAAS,EAAC;AAAf,KAAA,EAND,KAMC,CAND,EAAP,QAAO,CAAP;AATH,GAAA;;oBAsBA,O","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/umd/Tooltips/TooltipStyles.js

@@ -0,0 +1,103 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../types", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../types"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.types, global.styles, global.typography, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _types, _styles, _typography, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.TooltipContainer = exports.TooltipTrigger = exports.Tooltip = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const distanceToEdge = size => {
+    return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
+  };
+
+  const Tooltip = exports.Tooltip = _styledComponents2.default.div`
+
+    pointer-events: none;
+    ${props => props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : ''}
+    ${props => props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : ''}
+    ${props => props.size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : ''}
+    ${props => props.align == 'center' ? 'text-align: center;' : ''}
+    box-shadow: ${_styles.BOXSHADOWS.BOXSHADOW_L2};
+    
+    padding: ${props => props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px'};
+    border-radius: 2px;
+    width: max-content;
+    height: ${props => props.height};
+    max-width: 34em;
+    background: ${_styles.COLORS.primary_800};
+    position: absolute; 
+    opacity: 0; 
+    z-index: ${_zIndexes.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' ? _styles.COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'right' ? _styles.COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'bottom' ? _styles.COLORS.primary_800 : 'transparent'} 
+                    ${props => props.position == 'left' ? _styles.COLORS.primary_800 : 'transparent'};
+  }
+`;
+  Tooltip.defaultProps = {
+    withArrow: false,
+    size: _types.Size.Small,
+    height: 'auto',
+    align: 'center',
+    position: 'bottom'
+  };
+
+  const TooltipTrigger = exports.TooltipTrigger = delay => _styledComponents.css`
+  &:hover ${Tooltip}, &:focus-within ${Tooltip}, &:focus ${Tooltip} {
+    opacity: 1;
+    transition: 0.5s;
+    transition-delay: ${delay ?? '1s'};
+  }
+`;
+
+  const TooltipContainer = exports.TooltipContainer = _styledComponents2.default.div`
+  display: inline-block;
+  position: relative;
+
+  ${props => TooltipTrigger(props.delay)}
+`;
+});
+//# sourceMappingURL=TooltipStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/TooltipStyles.tsx"],"names":["distanceToEdge","size","Size","Tooltip","styled","div","props","ComponentSStyling","ComponentTextStyle","COLORS","ComponentXSStyling","ComponentMStyling","BOXSHADOWS","BOXSHADOW_L2","height","primary_800","Z_INDEXES","tooltip","withArrow","align","position","TooltipTrigger","delay","css","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/umd/Tooltips/TooltipTypes.js

@@ -0,0 +1,25 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  /**
+   * Types for the table.
+   */
+  ;
+});
+//# sourceMappingURL=TooltipTypes.js.map

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

@@ -0,0 +1 @@
+{"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/umd/Tooltips/TooltipWrapper.js

@@ -0,0 +1,95 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "./TooltipStyles", ".."], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("./TooltipStyles"), require(".."));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.TooltipStyles, global._);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _react, _TooltipStyles, _) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var React = _interopRequireWildcard(_react);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  const TooltipWrapper = ({
+    label,
+    children,
+    withArrow,
+    size = _.Size.Small,
+    height = 'auto',
+    delay = undefined,
+    align = 'center',
+    position = 'bottom'
+  }) => {
+    return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, {
+      delay: delay
+    }, /*#__PURE__*/React.createElement(_TooltipStyles.Tooltip, {
+      align: align,
+      height: height,
+      size: size,
+      withArrow: withArrow,
+      position: position
+    }, label), children);
+  };
+
+  exports.default = TooltipWrapper;
+});
+//# sourceMappingURL=TooltipWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/TooltipWrapper.tsx"],"names":["TooltipWrapper","size","Size","height","delay","align","position"],"mappings":";;;;;;;;;;;;;;;;;;;MACA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOC,QAAMA,cAAc,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,QAAA;AAAA,IAAA,SAAA;AAGtBC,IAAAA,IAAI,GAAGC,OAHe,KAAA;AAItBC,IAAAA,MAAM,GAJgB,MAAA;AAKtBC,IAAAA,KAAK,GALiB,SAAA;AAMtBC,IAAAA,KAAK,GANiB,QAAA;AAOtBC,IAAAA,QAAQ,GAAG;AAPW,GAAD,KAOoB;AAExC,WAAA,aAAO,KAAA,CAAA,aAAA,CAAA,+BAAA,EAAA;AAAkB,MAAA,KAAK,EAAEF;AAAzB,KAAA,EAAA,aACC,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAS,MAAA,KAAK,EAAd,KAAA;AACG,MAAA,MAAM,EADT,MAAA;AAEG,MAAA,IAAI,EAFP,IAAA;AAGG,MAAA,SAAS,EAHZ,SAAA;AAIG,MAAA,QAAQ,EAAEE;AAJb,KAAA,EADD,KACC,CADD,EAAP,QAAO,CAAP;AATH,GAAA;;oBAqBA,c","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/umd/Tooltips/index.js

@@ -0,0 +1,33 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "./TooltipWrapper", "./TooltipStyles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("./TooltipWrapper"), require("./TooltipStyles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.TooltipWrapper, global.TooltipStyles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _TooltipWrapper, _TooltipStyles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.TooltipContainer = exports.TooltipTrigger = exports.TooltipWrapper = undefined;
+
+  var _TooltipWrapper2 = _interopRequireDefault(_TooltipWrapper);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  exports.TooltipWrapper = _TooltipWrapper2.default;
+  exports.TooltipTrigger = _TooltipStyles.TooltipTrigger;
+  exports.TooltipContainer = _TooltipStyles.TooltipContainer;
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAGA,c,GAAA,wB;UAAA,c,GAAA,6B;UAAA,gB,GAAA,+B","sourcesContent":["import TooltipWrapper from './TooltipWrapper';\r\nimport {TooltipTrigger, TooltipContainer} from './TooltipStyles';\r\n\r\nexport { TooltipWrapper, TooltipTrigger, TooltipContainer };\r\n"],"file":"index.js"}