@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/src/Toasters/Toast.js

@@ -0,0 +1,166 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var _a, _b;
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
+import { BOXSHADOWS, COLORS } from '../styles';
+import { Size } from '../types';
+import { Button, IconButton } from '../Button';
+import { ComponentSStyling, ComponentTextStyle } from '../styles';
+import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
+import { SystemIcons } from '../icons';
+var LoaderAnimationKeyframes = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"], ["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
+var Loader = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ", " ", "ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.", " {\n    background: linear-gradient(to right, ", " 50%, ", " 50%) left;\n    background-size: 200% 100%;\n  }\n"])), LoaderAnimationKeyframes, function (props) { return props.duration; }, ToastColor[ToastColor.BLACK], COLORS.neutral_200, COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.neutral_400, COLORS.white, ToastColor[ToastColor.BLUE], COLORS.accent1_200, COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_200, COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_200, COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_200, COLORS.critical_500);
+export var ToastContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"], ["\n  box-shadow: ", ";\n  border-radius: 4px;\n\n  animation: ", " ", " ", ";\n  transform: ", ";\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ", " ", " 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ", "\n\n  & a {\n    display: inline;\n    ", "\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n    color: ", ";\n\n    & a {\n      ", "\n    }\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n\n  &.", " {\n    background-color: ", ";\n  }\n"])), BOXSHADOWS.BOXSHADOW_L2, function (props) { return props.animation.keyframes; }, function (props) { return props.animation.duration; }, function (props) { return props.animation.bezier; }, function (props) { return props.animation.transform; }, function (props) { return (props.withClose ? '0' : '16px'); }, function (props) { return (props.withLoader ? '4px' : '0'); }, ComponentSStyling(ComponentTextStyle.Regular, COLORS.white), HyperLinkInvertedStyling, ToastColor[ToastColor.BLACK], COLORS.neutral_800, ToastColor[ToastColor.WHITE], COLORS.white, COLORS.black, HyperLinkDefaultStyling, ToastColor[ToastColor.BLUE], COLORS.accent1_600, ToastColor[ToastColor.GREEN], COLORS.correct_500, ToastColor[ToastColor.ORANGE], COLORS.warning_500, ToastColor[ToastColor.RED], COLORS.critical_500);
+export var ToastActionButtons = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
+export var ToastCloseButton = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"], ["\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ", " !important;\n  }\n\n  &.", " {\n    button svg path {\n      fill: ", " !important;\n    }\n  }\n"])), COLORS.white, ToastColor[ToastColor.WHITE], COLORS.neutral_600);
+export var ToastTextContainer = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"], ["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
+export var ToastIconContainer = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: -8px;\n"], ["\n  margin-right: -8px;\n"])));
+var DEFAULT_OPTIONS = {
+    color: ToastColor.BLACK,
+    autoClose: true,
+    delay: 5000,
+    showCloseButton: false,
+    position: ToastPosition.TOPLEFT,
+    enterFrom: ToastEntryDirection.TOP,
+};
+var Toast = function (_a) {
+    var _b, _c, _d;
+    var content = _a.content, remove = _a.remove, _e = _a.options, options = _e === void 0 ? DEFAULT_OPTIONS : _e, testId = _a.testId;
+    if (!remove)
+        throw new Error('remove function is required when rendering Toast. Make sure that you are using useToast hook and ToastProvider for rendering Toasts');
+    var removeRef = React.useRef();
+    removeRef.current = remove;
+    var elementRef = React.useRef(null);
+    var _f = React.useState(false), shouldRemove = _f[0], setShouldRemove = _f[1];
+    var _g = React.useState({ width: 0, height: 0 }), dimensions = _g[0], setDimensions = _g[1];
+    var opts = __assign(__assign({}, DEFAULT_OPTIONS), options);
+    React.useEffect(function () {
+        if (opts === null || opts === void 0 ? void 0 : opts.autoClose) {
+            // @ts-ignore
+            var id_1 = setTimeout(function () { return setShouldRemove(true); }, opts.delay);
+            return function () { return clearTimeout(id_1); };
+        }
+        return undefined;
+    }, []);
+    React.useEffect(function () {
+        if (shouldRemove) {
+            // @ts-ignore
+            var id_2 = setTimeout(function () { return removeRef.current(); }, 200);
+            return function () { return clearTimeout(id_2); };
+        }
+    }, [shouldRemove]);
+    React.useEffect(function () {
+        var _a, _b;
+        setDimensions({ height: (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight, width: (_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth });
+    }, []);
+    var animation = animations[shouldRemove ? 'leave' : 'enter'];
+    var direction = animation[(_b = opts.enterFrom) !== null && _b !== void 0 ? _b : ToastEntryDirection.TOP];
+    var fromY = dimensions.height * direction.fromHeight;
+    var toY = dimensions.height * direction.toHeight;
+    var fromX = dimensions.width * direction.fromWidth;
+    var toX = dimensions.width * direction.toWidth;
+    var prop = {
+        duration: animation.duration,
+        bezier: animation.bezier,
+        transform: "translateY(".concat(toY, ") translateX(").concat(toX, ")"),
+        keyframes: keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"], ["\n        0% {\n          transform: translateY(", "px) translateX(", "px);\n        }\n        100% {\n          transform: translateY(", "px) translateX(", "px);\n        }"])), fromY, fromX, toY, toX),
+    };
+    if (!dimensions.height) {
+        prop = __assign(__assign({}, prop), {
+            transform: 'translateY(-1000vh) translateX(-1000vw)',
+            keyframes: keyframes(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
+        });
+    }
+    var theme = ToastColor[(_c = opts.color) !== null && _c !== void 0 ? _c : ToastColor.BLACK];
+    if (!shouldRemove) {
+        setTimeout(function () { var _a; return (_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    }
+    return (React.createElement(ToastContainer, { "data-testid": testId, animation: prop, ref: elementRef, withLoader: !!opts.autoClose, className: theme, withClose: !!opts.showCloseButton, tabIndex: -1 },
+        opts.icon && React.createElement(ToastIconContainer, null, opts.icon),
+        React.createElement(ToastTextContainer, { className: 'description' }, content),
+        opts.action && (React.createElement(ToastActionButtons, null, opts.action.map(function (action, i) { return (React.createElement(Button, { size: Size.Small, variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary', colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal', invertFocus: opts.color === ToastColor.BLACK, key: i, onClick: function () {
+                setShouldRemove(true);
+                action.handler();
+            }, className: 'action' }, action.label)); }))),
+        opts.showCloseButton && (React.createElement(ToastCloseButton, { className: "close-button ".concat(theme) },
+            React.createElement(IconButton, { variant: 'secondary', shape: "circular", useTransparentBackground: true, invertFocus: opts.color === ToastColor.BLACK, action: function (event) { return setShouldRemove(true); } },
+                React.createElement(SystemIcons.Close, { size: "24px", color: COLORS.neutral_600 })))),
+        !!opts.autoClose && React.createElement(Loader, { className: "loader ".concat(theme), duration: (_d = opts.delay) !== null && _d !== void 0 ? _d : 0 })));
+};
+export default Toast;
+var animations = {
+    enter: (_a = {
+            bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
+            duration: '300ms'
+        },
+        _a[ToastEntryDirection.TOP] = {
+            fromHeight: -1,
+            toHeight: 0,
+            fromWidth: 0,
+            toWidth: 0,
+        },
+        _a[ToastEntryDirection.BOTTOM] = {
+            fromHeight: 1,
+            toHeight: 0,
+            fromWidth: 0,
+            toWidth: 0,
+        },
+        _a[ToastEntryDirection.LEFT] = {
+            fromHeight: 0,
+            toHeight: 0,
+            fromWidth: -1,
+            toWidth: 0,
+        },
+        _a[ToastEntryDirection.RIGHT] = {
+            fromHeight: 0,
+            toHeight: 0,
+            fromWidth: 1,
+            toWidth: 0,
+        },
+        _a),
+    leave: (_b = {
+            bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
+            duration: '205ms'
+        },
+        _b[ToastEntryDirection.TOP] = {
+            fromHeight: 0,
+            toHeight: -1,
+            fromWidth: 0,
+            toWidth: 0,
+        },
+        _b[ToastEntryDirection.BOTTOM] = {
+            fromHeight: 0,
+            toHeight: 1,
+            fromWidth: 0,
+            toWidth: 0,
+        },
+        _b[ToastEntryDirection.LEFT] = {
+            fromHeight: 0,
+            toHeight: 0,
+            fromWidth: 0,
+            toWidth: -1,
+        },
+        _b[ToastEntryDirection.RIGHT] = {
+            fromHeight: 0,
+            toHeight: 0,
+            fromWidth: 0,
+            toWidth: 1,
+        },
+        _b),
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/Toasters/ToastContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ToastOptions } from './Toast';
-export type ToastProviderProps = {
+export declare type ToastProviderProps = {
     children?: any;
 };
 export interface toast {
@@ -8,7 +8,7 @@ export interface toast {
     id: string;
     content: any;
 }
-export type ToasterValueProps = {
+export declare type ToasterValueProps = {
     toasts: toast[];
     addToast: (content: any, options: ToastOptions) => string;
     removeToast: (id: string) => void;

package/dist/src/Toasters/ToastContext.js

@@ -0,0 +1,69 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+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 var ToastContext = React.createContext({});
+var ToastBucket = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"], ["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), Z_INDEXES.toast);
+var ToastBucketTopLeft = styled(ToastBucket)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  top: 16px;\n  left: 5%;\n"], ["\n  top: 16px;\n  left: 5%;\n"])));
+var ToastBucketTopMiddle = styled(ToastBucket)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"], ["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketTopRight = styled(ToastBucket)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  top: 16px;\n  right: 5%;\n"], ["\n  top: 16px;\n  right: 5%;\n"])));
+var ToastBucketBottomLeft = styled(ToastBucket)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  bottom: 16px;\n  left: 5%;\n"], ["\n  bottom: 16px;\n  left: 5%;\n"])));
+var ToastBucketBottomMiddle = styled(ToastBucket)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"], ["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketBottomRight = styled(ToastBucket)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: 16px;\n  right: 5%;\n"], ["\n  bottom: 16px;\n  right: 5%;\n"])));
+export var ToastProvider = function (_a) {
+    var children = _a.children;
+    var _b = React.useState([]), toasts = _b[0], setToasts = _b[1];
+    var add = function (content, options) {
+        var id = createUUID();
+        setToasts(function (prev) { return __spreadArray(__spreadArray([], prev, true), [{ id: id, content: content, options: options }], false); });
+        return id;
+    };
+    var remove = function (id) { return setToasts(toasts.filter(function (t) { return t.id !== id; })); };
+    var functions = React.useMemo(function () {
+        return { addToast: add, removeToast: remove };
+    }, [toasts]);
+    return (React.createElement(ToastContext.Provider, { value: { toasts: toasts, addToast: add, removeToast: remove } },
+        React.createElement(ToastBucketTopLeft, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.TOPLEFT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketTopMiddle, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.TOPMIDDLE; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketTopRight, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.TOPRIGHT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketBottomLeft, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMLEFT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketBottomMiddle, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMMIDDLE; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketBottomRight, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMRIGHT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        children));
+};
+export function useToast() {
+    var _a = React.useContext(ToastContext), addToast = _a.addToast, removeToast = _a.removeToast;
+    return {
+        addToast: addToast,
+        removeToast: removeToast
+    };
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/Toasters/index.js

@@ -0,0 +1,4 @@
+import Toast from './Toast';
+import { ToastProvider, useToast, ToastContext } from './ToastContext';
+export * from './Toast';
+export { Toast, ToastProvider, useToast, ToastContext };

package/dist/src/Toggles/ToggleButton.js

@@ -0,0 +1,48 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { IconButton } from '../Button';
+import styled from 'styled-components';
+import { IconButtonContentStyles } from '../Button/Iconbutton';
+import { COLORS } from '../styles';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"], ["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_500, IconButtonContentStyles, COLORS.neutral_300);
+export var ToggleButton = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var id = _a.id, active = _a.active, onChange = _a.onChange, disabled = _a.disabled, defaultState = _a.defaultState, activeState = _a.activeState, className = _a.className, rest = __rest(_a, ["id", "active", "onChange", "disabled", "defaultState", "activeState", "className"]);
+    var _d = React.useState(false), isActive = _d[0], setIsActive = _d[1];
+    React.useEffect(function () { return setIsActive(active); }, [active]);
+    var cls = "".concat(className || '', " ").concat(isActive ? 'active' : '', " ").concat(activeState ? 'state-change' : '', " ").concat(disabled ? 'disabled' : '');
+    return (React.createElement(Wrapper, { className: cls },
+        React.createElement(IconButton, __assign({ variant: 'secondary', ref: ref, useTransparentBackground: true, shape: 'circular', action: function () {
+                setIsActive(!isActive);
+                if (onChange) {
+                    onChange(!isActive);
+                }
+            }, id: id, iconColor: isActive ? (_b = activeState === null || activeState === void 0 ? void 0 : activeState.color) !== null && _b !== void 0 ? _b : defaultState.color : defaultState.color, disabled: disabled, "aria-pressed": isActive }, rest), isActive ? (_c = activeState === null || activeState === void 0 ? void 0 : activeState.icon) !== null && _c !== void 0 ? _c : defaultState.icon : defaultState.icon)));
+});
+export default ToggleButton;
+var templateObject_1;

package/dist/src/Toggles/ToggleSwitch.js

@@ -0,0 +1,65 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom styles.
+ */
+import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
+import { COLORS, Size, SystemIcons } from '..';
+import { useFocusVisibleRef } from '../common';
+import styled from "styled-components";
+var CheckmarkContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"], ["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
+var ToggleSwitch = React.forwardRef(function (_a, ref) {
+    var id = _a.id, disabled = _a.disabled, selected = _a.selected, label = _a.label, isSemantic = _a.isSemantic, size = _a.size, onToggle = _a.onToggle, className = _a.className, rest = __rest(_a, ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"]);
+    /**
+     * Does all required pre-requisites and toggles the switcher state.
+     */
+    var toggle = function () {
+        // If disabled, don't do anything
+        if (disabled)
+            return;
+        // Toggle state change
+        onToggle(!selected);
+    };
+    var focusVisibleRef = useFocusVisibleRef([]);
+    React.useImperativeHandle(ref, function () { return focusVisibleRef.current; }, [focusVisibleRef]);
+    size = size !== null && size !== void 0 ? size : Size.Medium;
+    return (React.createElement(StyledSwitch, __assign({ ref: focusVisibleRef, onClick: function (e) { return toggle(); }, onKeyDown: function (e) { return (e.key === 'Enter' || e.key === ' ') && toggle(); }, className: size
+            .toString()
+            .toLowerCase()
+            .concat(disabled ? ' disabled' : '')
+            .concat(className ? " ".concat(className) : ''), selected: selected, id: id, role: "switch", "aria-pressed": selected, tabIndex: disabled ? -1 : 0 }, rest),
+        React.createElement(ToggleSwitchContainer, { id: "switchContainer" },
+            React.createElement(Switch, { className: isSemantic ? 'semantic' : '' }, selected && React.createElement(CheckmarkContainer, null,
+                React.createElement(SystemIcons.CheckMark, { size: '14px', color: COLORS.white })))),
+        label && (React.createElement("label", { className: 'label', htmlFor: id }, label))));
+});
+export default ToggleSwitch;
+var templateObject_1;

package/dist/src/Toggles/TogglerStyles.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/**
+ * Import custom styles.
+ */
+import { COLORS, focusStyles } from '../styles';
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+export var StyledSwitch = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled[aria-pressed='true'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] label:first-of-type span {\n    background-color: ", ";\n\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      -webkit-transform: translateX(20px);\n      -ms-transform: translateX(20px);\n      transform: translateX(20px);\n    }\n  }\n\n  &.disabled[aria-pressed='false'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n  &.disabled {\n    color: ", ";\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled[aria-pressed='true'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='true']:hover span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &[aria-pressed='true'] label:first-of-type span {\n    background-color: ", ";\n\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      -webkit-transform: translateX(20px);\n      -ms-transform: translateX(20px);\n      transform: translateX(20px);\n    }\n  }\n\n  &.disabled[aria-pressed='false'] label:first-of-type span {\n    background-color: ", " !important;\n    cursor: not-allowed;\n\n    &:before {\n      background-color: ", " !important;\n      cursor: not-allowed;\n    }\n  }\n\n  &[aria-pressed='false']:hover label:first-of-type span {\n    &.semantic {\n      background-color: ", ";\n    }\n\n    &:before {\n      background-color: ", ";\n    }\n  }\n\n  &:not(.disabled).focus-visible {\n    ", "\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.neutral_300, COLORS.primary_100, COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500, COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20, focusStyles);
+export var ToggleSwitchContainer = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"], ["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
+export var ToggleSwitch = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/Toggles/TogglerTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Toggles/index.js

@@ -0,0 +1,3 @@
+import ToggleSwitch from './ToggleSwitch';
+import ToggleButton from './ToggleButton';
+export { ToggleSwitch, ToggleButton };

package/dist/src/Tooltips/TooltipOverflow.js

@@ -0,0 +1,71 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import { Tooltip } from './TooltipStyles';
+import { Size } from '..';
+var TooltipOverflow = function (_a) {
+    var label = _a.label, children = _a.children, input = _a.input, withArrow = _a.withArrow, maxWidth = _a.maxWidth, width = _a.width, value = _a.value, _b = _a.size, size = _b === void 0 ? Size.Small : _b, _c = _a.height, height = _c === void 0 ? 'auto' : _c, _d = _a.align, align = _d === void 0 ? 'center' : _d, _e = _a.position, position = _e === void 0 ? 'top' : _e, props = __rest(_a, ["label", "children", "input", "withArrow", "maxWidth", "width", "value", "size", "height", "align", "position"]);
+    var _f = React.useState(false), textOverflowed = _f[0], setTextOverflowed = _f[1];
+    var _g = React.useState(false), focused = _g[0], setFocused = _g[1];
+    var _h = useResizeDetector({ targetRef: input }), customW = _h.width, customH = _h.height;
+    React.useEffect(function () {
+        checkIfOverflowed();
+    }, [customW, customH]);
+    var checkIfOverflowed = function () {
+        var _a;
+        //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
+        var over = (_a = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth)) !== null && _a !== void 0 ? _a : false;
+        setTextOverflowed(over);
+    };
+    React.useEffect(function () {
+        checkIfOverflowed();
+    });
+    var onFocus = function () {
+        checkIfOverflowed();
+        setFocused(true);
+    };
+    var onBlur = function () {
+        setFocused(false);
+    };
+    React.useEffect(function () {
+        return function () {
+            if (input === null || input === void 0 ? void 0 : input.current) {
+                input === null || input === void 0 ? void 0 : input.current.removeEventListener("focus", onFocus);
+                input === null || input === void 0 ? void 0 : input.current.removeEventListener("blur", onBlur);
+            }
+        };
+    }, []);
+    var renderedCallback = React.useCallback(function () {
+        if (input && input.current) {
+            input.current.addEventListener("focus", onFocus);
+            input.current.addEventListener("blur", onBlur);
+            checkIfOverflowed();
+        }
+    }, []);
+    return React.createElement("div", { ref: renderedCallback }, textOverflowed && React.createElement(Tooltip, __assign({ align: align, height: height, role: "tooltip", maxWidth: maxWidth, width: width, size: size, withArrow: withArrow, position: position }, props),
+        React.createElement("span", null,
+            children,
+            " ")));
+};
+export default TooltipOverflow;

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

@@ -8,7 +8,7 @@ export declare const Tooltip: import("styled-components").StyledComponent<"div",
     position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
     width?: string | undefined;
 }, never>;
-export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TooltipTrigger: (triggerType: 'hover' | 'click', delay?: string | undefined) => import("styled-components").FlattenSimpleInterpolation;
 export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
     triggerType: 'hover' | 'click';
     delay?: string | undefined;

package/dist/src/Tooltips/TooltipStyles.js

@@ -0,0 +1,41 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { Size } from '../types';
+import { BOXSHADOWS, COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+var distanceToEdge = function (size) {
+    return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
+};
+export var Tooltip = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n  ", "\n  ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n  box-sizing: border-box;\n\n  padding: ", ";\n  border-radius: 2px;\n  ", "\n  height: ", ";\n  max-width: ", ";\n  background: ", ";\n  position: absolute;\n  opacity: 0;\n  z-index: ", ";\n  ", "\n\n  ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " ", "\n      ", " ", ";\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n"], ["\n  pointer-events: none;\n  ", "\n  ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n  box-sizing: border-box;\n\n  padding: ", ";\n  border-radius: 2px;\n  ", "\n  height: ", ";\n  max-width: ", ";\n  background: ", ";\n  position: absolute;\n  opacity: 0;\n  z-index: ", ";\n  ", "\n\n  ", "\n    ", "\n            \n    ", "\n\n\n&::after {\n    ", "\n    content: \"\";\n    position: absolute;\n    ", "\n\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n    margin: -0.5px;\n    border-width: 4px;\n    border-style: solid;\n    border-color: ", " ", "\n      ", " ", ";\n  }\n\n  & > span {\n    word-wrap: break-word;\n    color: white;\n  }\n"])), function (props) { return (props.size == Size.Small || props.size != Size.Medium ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.white) : ''); }, function (props) { return (props.size == Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Regular, COLORS.white) : ''); }, function (props) { return (props.size == Size.Medium ? ComponentMStyling(ComponentTextStyle.Regular, COLORS.white) : ''); }, function (props) { return (props.align == 'center' ? 'text-align: center;' : ''); }, BOXSHADOWS.BOXSHADOW_L2, function (props) { return (props.size == Size.XSmall ? '4px 8px' : props.size == Size.Medium ? '8px 12px' : '6px 10px'); }, function (props) { return (props.width ? "width: ".concat(props.width, ";") : 'width: max-content;'); }, function (props) { return props.height; }, function (props) { var _a; return (_a = props.maxWidth) !== null && _a !== void 0 ? _a : '34em'; }, COLORS.primary_800, Z_INDEXES.tooltip, function (props) { return (props.position == 'top' ? 'bottom: 110%;' : props.position == 'bottom' ? 'top: 110%;' : ''); }, function (props) { return (props.position == 'left' ? 'bottom: 50%; transform: translateX(-110%) translateY(50%);' : ''); }, function (props) { return (props.position == 'right' ? 'bottom: 50%;left: 110%; transform: translateY(50%);' : ''); }, function (props) {
+    return props.position == 'left' || props.position == 'right'
+        ? ''
+        : props.align == 'start'
+            ? 'left: 0%;'
+            : props.align == 'end'
+                ? 'right: 0%;'
+                : 'left: 50%; transform: translateX(-50%);';
+}, function (props) { return (!props.withArrow ? 'display: none;' : ''); }, function (props) { return (props.position == 'top' ? 'top: 100%;' : props.position == 'bottom' ? 'bottom: 100%;' : ''); }, function (props) { return (props.position == 'right' ? 'right: 100%; bottom: 50%; transform: translateY(50%);' : ''); }, function (props) { return (props.position == 'left' ? 'left: 100%; bottom: 50%; transform: translateY(50%);' : ''); }, function (props) {
+    return props.position == 'left' || props.position == 'right'
+        ? ''
+        : props.align == 'start'
+            ? "left: ".concat(distanceToEdge(props.size), ";")
+            : props.align == 'end'
+                ? "right: ".concat(distanceToEdge(props.size), ";")
+                : 'left: 50%;';
+}, function (props) { return (props.position == 'left' ? '' : 'margin-left: -5px;'); }, function (props) { return (props.position == 'top' ? COLORS.primary_800 : 'transparent'); }, function (props) { return (props.position == 'right' ? COLORS.primary_800 : 'transparent'); }, function (props) { return (props.position == 'bottom' ? COLORS.primary_800 : 'transparent'); }, function (props) { return (props.position == 'left' ? COLORS.primary_800 : 'transparent'); });
+Tooltip.defaultProps = {
+    withArrow: false,
+    size: Size.Small,
+    height: 'auto',
+    align: 'center',
+    position: 'bottom',
+};
+export var TooltipTrigger = function (triggerType, delay) { return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), triggerType == 'hover'
+    ? "&:hover ".concat(Tooltip, ", &:focus-within ").concat(Tooltip, ", &:focus ").concat(Tooltip, " {\n      opacity: 1;\n      transition: 0.5s;\n    transition-delay: ").concat(delay !== null && delay !== void 0 ? delay : '0.7s', ";\n    }")
+    : "& ".concat(Tooltip, " {\n      transition: 0.5s;\n      transition-delay: ").concat(delay !== null && delay !== void 0 ? delay : '0s', ";\n    }\n  \n    &.show ").concat(Tooltip, " {\n      opacity: 1;\n    }\n  \n    &.hide ").concat(Tooltip, " {\n      opacity: 0;\n    }")); };
+export var TooltipContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n\n  ", "\n\n  &:focus {\n    ", "\n  }\n"])), function (props) { return TooltipTrigger(props.triggerType, props.delay); }, focusStyles);
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/Tooltips/TooltipTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Tooltips/TooltipWrapper.js

@@ -0,0 +1,65 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { TooltipContainer, Tooltip } from './TooltipStyles';
+import { useClickOutsideRef } from '../common';
+import { useEffect, useRef } from "react";
+import { Size } from "../types";
+var TooltipWrapper = function (_a) {
+    var label = _a.label, children = _a.children, withArrow = _a.withArrow, tabIndex = _a.tabIndex, _b = _a.size, size = _b === void 0 ? Size.Small : _b, _c = _a.height, height = _c === void 0 ? 'auto' : _c, _d = _a.delay, delay = _d === void 0 ? undefined : _d, _e = _a.align, align = _e === void 0 ? 'center' : _e, _f = _a.position, position = _f === void 0 ? 'bottom' : _f, _g = _a.trigger, trigger = _g === void 0 ? 'hover' : _g, _h = _a.hideAfter, hideAfter = _h === void 0 ? 5000 : _h, props = __rest(_a, ["label", "children", "withArrow", "tabIndex", "size", "height", "delay", "align", "position", "trigger", "hideAfter"]);
+    var _j = React.useState(false), showTooltip = _j[0], setShowTooltip = _j[1];
+    var timeoutRef = useRef();
+    var ref = useClickOutsideRef(function () { return setShowTooltip(false); });
+    var handleClick = function (e) {
+        var _a;
+        if ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e === null || e === void 0 ? void 0 : e.target)) {
+            setShowTooltip(true);
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(function () { return setShowTooltip(false); }, hideAfter);
+        }
+    };
+    var handleButtonDown = function (e) {
+        if ((e === null || e === void 0 ? void 0 : e.key) === 'Enter' || (e === null || e === void 0 ? void 0 : e.key) === ' ') {
+            setShowTooltip(true);
+            timeoutRef.current && clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(function () { return setShowTooltip(false); }, hideAfter);
+        }
+    };
+    useEffect(function () {
+        var _a;
+        if (trigger == 'click') {
+            document.addEventListener('mousedown', handleClick);
+            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', handleButtonDown);
+            return function () {
+                var _a;
+                document.removeEventListener('mousedown', handleClick);
+                (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleButtonDown);
+            };
+        }
+    }, [trigger]);
+    var cls = "".concat(trigger === 'click' ? showTooltip ? 'show' : 'hide' : '');
+    return React.createElement(TooltipContainer, { ref: ref, delay: delay, tabIndex: tabIndex, triggerType: trigger, className: cls },
+        React.createElement(Tooltip, __assign({ align: align, height: height, role: "tooltip", size: size, withArrow: withArrow, position: position }, props), label),
+        children);
+};
+export default TooltipWrapper;