@laerdal/life-react-components 1.4.1-dev.7.full → 1.4.1-dev.9.full

package/dist/Toasters/Toast.js

@@ -0,0 +1,256 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _enter, _leave;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
+import { BOXSHADOWS, COLORS } from '../styles';
+import { Close } from '../icons/systemicons/SystemIcons';
+import { Size } from '../types';
+import { Button, IconButton } from '../Button';
+import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var LoaderAnimationKeyframes = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n"])));
+var Loader = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);
+var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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);
+var ActionButtons = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n"])));
+var CloseButton = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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);
+var TextContainer = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n"])));
+var IconContainer = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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 Toast(_ref) {
+  var _opts$enterFrom, _opts$color, _opts$delay;
+
+  var content = _ref.content,
+      remove = _ref.remove,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? DEFAULT_OPTIONS : _ref$options,
+      testId = _ref.testId;
+  var removeRef = React.useRef();
+  removeRef.current = remove;
+  var elementRef = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      shouldRemove = _React$useState2[0],
+      setShouldRemove = _React$useState2[1];
+
+  var _React$useState3 = React.useState({
+    width: 0,
+    height: 0
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      dimensions = _React$useState4[0],
+      setDimensions = _React$useState4[1];
+
+  var opts = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options);
+
+  React.useEffect(function () {
+    if (opts !== null && opts !== void 0 && opts.autoClose) {
+      // @ts-ignore
+      var id = setTimeout(function () {
+        return setShouldRemove(true);
+      }, opts.delay);
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+
+    return undefined;
+  }, []);
+  React.useEffect(function () {
+    if (shouldRemove) {
+      // @ts-ignore
+      var id = setTimeout(function () {
+        return removeRef.current();
+      }, 200);
+      return function () {
+        return clearTimeout(id);
+      };
+    }
+  }, [shouldRemove]);
+  React.useEffect(function () {
+    var _elementRef$current, _elementRef$current2;
+
+    setDimensions({
+      height: (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.clientHeight,
+      width: (_elementRef$current2 = elementRef.current) === null || _elementRef$current2 === void 0 ? void 0 : _elementRef$current2.clientWidth
+    });
+  }, []);
+  var animation = animations[shouldRemove ? 'leave' : 'enter'];
+  var direction = animation[(_opts$enterFrom = opts.enterFrom) !== null && _opts$enterFrom !== void 0 ? _opts$enterFrom : 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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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 = _objectSpread(_objectSpread({}, prop), {
+      transform: 'translateY(-1000vh) translateX(-1000vw)',
+      keyframes: keyframes(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""])))
+    });
+  }
+
+  var theme = ToastColor[(_opts$color = opts.color) !== null && _opts$color !== void 0 ? _opts$color : ToastColor.BLACK];
+
+  if (!shouldRemove) {
+    setTimeout(function () {
+      var _elementRef$current3;
+
+      return elementRef === null || elementRef === void 0 ? void 0 : (_elementRef$current3 = elementRef.current) === null || _elementRef$current3 === void 0 ? void 0 : _elementRef$current3.focus();
+    });
+  }
+
+  return /*#__PURE__*/_jsxs(Container, {
+    "data-testid": testId,
+    animation: prop,
+    ref: elementRef,
+    withLoader: !!opts.autoClose,
+    className: theme,
+    withClose: !!opts.showCloseButton,
+    tabIndex: -1,
+    children: [opts.icon && /*#__PURE__*/_jsx(IconContainer, {
+      children: opts.icon
+    }), /*#__PURE__*/_jsx(TextContainer, {
+      className: 'description',
+      children: content
+    }), opts.action && /*#__PURE__*/_jsx(ActionButtons, {
+      children: opts.action.map(function (action, i) {
+        return /*#__PURE__*/_jsx(Button, {
+          size: Size.Small,
+          variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
+          colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
+          onClick: function onClick() {
+            setShouldRemove(true);
+            action.handler();
+          },
+          className: 'action',
+          children: action.label
+        }, i);
+      })
+    }), opts.showCloseButton && /*#__PURE__*/_jsx(CloseButton, {
+      className: "close-button ".concat(theme),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        variant: 'secondary',
+        shape: "circular",
+        useTransparentBackground: true,
+        action: function action(event) {
+          return setShouldRemove(true);
+        },
+        children: /*#__PURE__*/_jsx(Close, {
+          size: "24px",
+          color: COLORS.neutral_600
+        })
+      })
+    }), !!opts.autoClose && /*#__PURE__*/_jsx(Loader, {
+      className: "loader ".concat(theme),
+      duration: (_opts$delay = opts.delay) !== null && _opts$delay !== void 0 ? _opts$delay : 0
+    })]
+  });
+};
+
+Toast.propTypes = {
+  remove: _pt.any,
+  content: _pt.any.isRequired,
+  options: _pt.shape({
+    autoClose: _pt.bool,
+    delay: _pt.number,
+    showCloseButton: _pt.bool,
+    action: _pt.arrayOf(_pt.shape({
+      label: _pt.string.isRequired,
+      handler: _pt.func.isRequired
+    })),
+    icon: _pt.node
+  }),
+  testId: _pt.string
+};
+export default Toast;
+var animations = {
+  enter: (_enter = {
+    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
+    duration: '300ms'
+  }, _defineProperty(_enter, ToastEntryDirection.TOP, {
+    fromHeight: -1,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.BOTTOM, {
+    fromHeight: 1,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.LEFT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: -1,
+    toWidth: 0
+  }), _defineProperty(_enter, ToastEntryDirection.RIGHT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 1,
+    toWidth: 0
+  }), _enter),
+  leave: (_leave = {
+    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
+    duration: '205ms'
+  }, _defineProperty(_leave, ToastEntryDirection.TOP, {
+    fromHeight: 0,
+    toHeight: -1,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_leave, ToastEntryDirection.BOTTOM, {
+    fromHeight: 0,
+    toHeight: 1,
+    fromWidth: 0,
+    toWidth: 0
+  }), _defineProperty(_leave, ToastEntryDirection.LEFT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: -1
+  }), _defineProperty(_leave, ToastEntryDirection.RIGHT, {
+    fromHeight: 0,
+    toHeight: 0,
+    fromWidth: 0,
+    toWidth: 1
+  }), _leave)
+};
+//# sourceMappingURL=Toast.js.map

package/dist/Toasters/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","useState","shouldRemove","setShouldRemove","width","height","dimensions","setDimensions","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\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: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  button svg path{\n    fill: ${COLORS.white} !important;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    button svg path {\n      fill: ${COLORS.neutral_600} !important;\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant={'secondary'}\n                      shape=\"circular\"\n                      useTransparentBackground={true}\n                      action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}

package/dist/Toasters/ToastContext.js

@@ -0,0 +1,148 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
+export var ToastContext = /*#__PURE__*/React.createContext({});
+var ToastBucket = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), Z_INDEXES.toast);
+var ToastBucketTopLeft = styled(ToastBucket)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 5%;\n"])));
+var ToastBucketTopMiddle = styled(ToastBucket)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketTopRight = styled(ToastBucket)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  top: 16px;\n  right: 5%;\n"])));
+var ToastBucketBottomLeft = styled(ToastBucket)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 5%;\n"])));
+var ToastBucketBottomMiddle = styled(ToastBucket)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketBottomRight = styled(ToastBucket)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  right: 5%;\n"])));
+export var ToastProvider = function ToastProvider(_ref) {
+  var children = _ref.children;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      toasts = _React$useState2[0],
+      setToasts = _React$useState2[1];
+
+  var add = function add(content, options) {
+    var id = createUUID();
+    setToasts(function (prev) {
+      return [].concat(_toConsumableArray(prev), [{
+        id: id,
+        content: content,
+        options: options
+      }]);
+    });
+  };
+
+  var _remove = function remove(id) {
+    return setToasts(toasts.filter(function (t) {
+      return t.id !== id;
+    }));
+  };
+
+  var functions = React.useMemo(function () {
+    return {
+      addToast: add,
+      removeToast: _remove
+    };
+  }, [toasts]);
+  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
+    value: _objectSpread({
+      toasts: toasts
+    }, functions),
+    children: [/*#__PURE__*/_jsx(ToastBucketTopLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketTopMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketTopRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.TOPRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomLeft, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMLEFT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomMiddle, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMMIDDLE;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), /*#__PURE__*/_jsx(ToastBucketBottomRight, {
+      children: toasts.filter(function (t) {
+        return t.options.position === ToastPosition.BOTTOMRIGHT;
+      }).map(function (t) {
+        return /*#__PURE__*/_jsx(Toast, {
+          content: t.content,
+          remove: function remove() {
+            return _remove(t.id);
+          },
+          options: t.options
+        }, t.id);
+      })
+    }), children]
+  });
+};
+export function useToast() {
+  var _React$useContext = React.useContext(ToastContext),
+      addToast = _React$useContext.addToast;
+
+  return {
+    addToast: addToast
+  };
+}
+//# sourceMappingURL=ToastContext.js.map

package/dist/Toasters/ToastContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toasters/ToastContext.tsx"],"names":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","ToastContext","createContext","ToastBucket","div","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","useState","toasts","setToasts","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype ProviderProps = {\n  children?: any;\n};\n\ninterface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: ${Z_INDEXES.toast};\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, ...functions }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n  };\n}\n"],"file":"ToastContext.js"}

package/dist/Toasters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toasters/index.tsx"],"names":["Toast","ToastProvider","useToast","ToastContext"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,SAAlB;AACA,SAASC,aAAT,EAAwBC,QAAxB,EAAkCC,YAAlC,QAAsD,gBAAtD;AAEA,SAASH,KAAT,EAAgBC,aAAhB,EAA+BC,QAA/B,EAAyCC,YAAzC","sourcesContent":["import Toast from './Toast';\nimport { ToastProvider, useToast, ToastContext } from './ToastContext';\n\nexport { Toast, ToastProvider, useToast, ToastContext };\n"],"file":"index.js"}

package/dist/Toggles/ToggleSwitch.js

@@ -0,0 +1,60 @@
+/**
+ * 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 '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var ToggleSwitch = function ToggleSwitch(_ref) {
+  var _size;
+
+  var id = _ref.id,
+      disabled = _ref.disabled,
+      selected = _ref.selected,
+      label = _ref.label,
+      isSemantic = _ref.isSemantic,
+      size = _ref.size,
+      onToggle = _ref.onToggle;
+
+  /**
+   * Does all required pre-requisites and toggles the switcher state.
+   */
+  var handleClick = function handleClick() {
+    // If disabled, don't do anything
+    if (disabled) {
+      return;
+    } // Toggle state change
+
+
+    onToggle(!selected);
+  };
+
+  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
+  return /*#__PURE__*/_jsxs(StyledSwitch, {
+    onClick: handleClick,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    selected: selected,
+    tabIndex: disabled ? -1 : 0,
+    children: [/*#__PURE__*/_jsx(ToggleSwitchContainer, {
+      children: /*#__PURE__*/_jsx(Switch, {
+        className: isSemantic ? 'semantic' : ''
+      })
+    }), label && /*#__PURE__*/_jsx("label", {
+      className: 'label',
+      htmlFor: id,
+      children: label
+    })]
+  });
+};
+
+export default ToggleSwitch;
+//# sourceMappingURL=ToggleSwitch.js.map

package/dist/Toggles/ToggleSwitch.js.map

@@ -0,0 +1 @@
+{"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,IAAMH,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFI,EAAmF,QAAnFA,EAAmF;AAAA,MAA/EC,QAA+E,QAA/EA,QAA+E;AAAA,MAArEC,QAAqE,QAArEA,QAAqE;AAAA,MAA3DC,KAA2D,QAA3DA,KAA2D;AAAA,MAApDC,UAAoD,QAApDA,UAAoD;AAAA,MAAxCC,IAAwC,QAAxCA,IAAwC;AAAA,MAAlCC,QAAkC,QAAlCA,QAAkC;;AACzG;AACF;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA,QAAIN,QAAJ,EAAc;AACZ;AACD,KAJuB,CAMxB;;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GARD;;AAUAG,EAAAA,IAAI,YAAGA,IAAH,yCAAWN,IAAI,CAACS,MAApB;AAEA,sBACE,MAAC,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,CAP5B;AAAA,4BAQE,KAAC,qBAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MARF,EAWGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAZJ;AAAA,IADF;AAmBD,CAnCD;;AAqCA,eAAeP,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport { ToggleSwitchProps } from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\nimport { Size } from '..';\n\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const handleClick = () => {\n    // If disabled, don't do anything\n    if (disabled) {\n      return;\n    }\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      onClick={handleClick}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}>\n      <ToggleSwitchContainer>\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n};\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}

package/dist/Toggles/TogglerStyles.js

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+/**
+ * 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 var StyledSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  ", "\n  &:not(.disabled):focus label:first-of-type span {\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\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, function (props) {
+  return props.selected ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          &.disabled 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          &:hover span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n          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        "])), COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          &.disabled 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          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n        "])), COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20);
+}, COLORS.focus_25, COLORS.focus);
+export var ToggleSwitchContainer = styled.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\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);
+//# sourceMappingURL=TogglerStyles.js.map

package/dist/Toggles/TogglerStyles.js.map

@@ -0,0 +1 @@
+{"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,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAV,mwBASnBH,iBAAiB,CAACC,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CATE,EAanBN,iBAAiB,CAACE,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAbE,EAiBnBP,iBAAiB,CAACG,kBAAkB,CAACG,OAApB,EAA6BT,MAAM,CAACU,KAApC,CAjBE,EAoBZV,MAAM,CAACW,WApBK,EAiCCX,MAAM,CAACY,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,GACIZ,GADJ,24BAG4BF,MAAM,CAACW,WAHnC,EAO8BX,MAAM,CAACe,WAPrC,EAa8Bf,MAAM,CAACgB,WAbrC,EAiB8BhB,MAAM,CAACiB,UAjBrC,EAqB4BjB,MAAM,CAACkB,WArBnC,EAwB8BlB,MAAM,CAACgB,WAxBrC,IAkCId,GAlCJ,4jBAoC4BF,MAAM,CAACW,WApCnC,EAwC8BX,MAAM,CAACmB,WAxCrC,EA8C8BnB,MAAM,CAACoB,YA9CrC,EAkD8BpB,MAAM,CAACiB,UAlDrC,CADA;AAAA,CArCqB,EA6FMjB,MAAM,CAACqB,QA7Fb,EA6FsCrB,MAAM,CAACsB,KA7F7C,CAAlB;AAqGP,OAAO,IAAMC,qBAAqB,GAAGtB,MAAM,CAACuB,KAAV,wMAA3B;AASP,OAAO,IAAMC,YAAY,GAAGxB,MAAM,CAACyB,IAAV,grBAWH1B,MAAM,CAAC2B,WAXJ,EAeD3B,MAAM,CAACoB,YAfN,EAyBDpB,MAAM,CAAC4B,KAzBN,CAAlB","sourcesContent":["/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\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    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\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: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled):focus label:first-of-type span {\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\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: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\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: ${COLORS.white};\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"],"file":"TogglerStyles.js"}

package/dist/Toggles/index.js.map

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

package/dist/Tooltips/TooltipStyles.d.ts

@@ -0,0 +1,12 @@
+import { Size } from '../types';
+export declare const Tooltip: import("styled-components").StyledComponent<"div", any, {
+    withArrow?: boolean | undefined;
+    size?: Size | undefined;
+    height?: string | undefined;
+    align?: 'start' | 'end' | 'center' | undefined;
+    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+}, never>;
+export declare const TooltipTrigger: (delay?: string | undefined) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TooltipContainer: import("styled-components").StyledComponent<"div", any, {
+    delay?: string | undefined;
+}, never>;