@laerdal/life-react-components 1.4.1-dev.1.full → 1.4.1-dev.13

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.cjs

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function get() {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "ToastContext", {
+  enumerable: true,
+  get: function get() {
+    return _ToastContext.ToastContext;
+  }
+});
+Object.defineProperty(exports, "ToastProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ToastContext.ToastProvider;
+  }
+});
+Object.defineProperty(exports, "useToast", {
+  enumerable: true,
+  get: function get() {
+    return _ToastContext.useToast;
+  }
+});
+
+var _Toast = _interopRequireDefault(require("./Toast"));
+
+var _ToastContext = require("./ToastContext");
+//# sourceMappingURL=index.cjs.map

package/dist/Toasters/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toasters/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import Toast from './Toast';\nimport { ToastProvider, useToast, ToastContext } from './ToastContext';\n\nexport { Toast, ToastProvider, useToast, ToastContext };\n"],"file":"index.cjs"}

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.cjs

@@ -0,0 +1,73 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _TogglerStyles = require("./TogglerStyles");
+
+var _ = require("..");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Import React libraries.
+ */
+
+/**
+ * Import custom styles.
+ */
+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__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, {
+    onClick: handleClick,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    selected: selected,
+    tabIndex: disabled ? -1 : 0,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitchContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitch, {
+        className: isSemantic ? 'semantic' : ''
+      })
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: 'label',
+      htmlFor: id,
+      children: label
+    })]
+  });
+};
+
+var _default = ToggleSwitch;
+exports.default = _default;
+//# sourceMappingURL=ToggleSwitch.cjs.map

package/dist/Toggles/ToggleSwitch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","handleClick","Size","Medium","toString","toLowerCase","concat"],"mappings":";;;;;;;;;AAGA;;AAUA;;AACA;;;;;;;;AAdA;AACA;AACA;;AAQA;AACA;AACA;AAIA,IAAMA,YAAY,GAAG,SAAfA,YAAe,OAAsF;AAAA;;AAAA,MAAnFC,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,yCAAWG,OAAKC,MAApB;AAEA,sBACE,sBAAC,2BAAD;AACE,IAAA,OAAO,EAAEF,WADX;AAEE,IAAA,SAAS,EAAEF,IAAI,CACZK,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDX,QAAQ,GAAG,WAAH,GAAiB,EAHxB,CAFb;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;AAAA,4BAQE,qBAAC,oCAAD;AAAA,6BACE,qBAAC,2BAAD;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;;eAqCeJ,Y","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.cjs"}

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.cjs

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleSwitchContainer = exports.ToggleSwitch = exports.StyledSwitch = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styles = require("../styles");
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _typography = require("../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.neutral_300, _styles.COLORS.primary_100, function (props) {
+  return props.selected ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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        "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_200, _styles.COLORS.correct_500, _styles.COLORS.primary_20, _styles.COLORS.primary_500, _styles.COLORS.correct_500) : (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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        "])), _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.critical_500, _styles.COLORS.primary_20);
+}, _styles.COLORS.focus_25, _styles.COLORS.focus);
+
+exports.StyledSwitch = StyledSwitch;
+
+var ToggleSwitchContainer = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
+
+exports.ToggleSwitchContainer = ToggleSwitchContainer;
+
+var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
+
+exports.ToggleSwitch = ToggleSwitch;
+//# sourceMappingURL=TogglerStyles.cjs.map

package/dist/Toggles/TogglerStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Toggles/TogglerStyles.ts"],"names":["StyledSwitch","styled","div","ComponentTextStyle","Regular","COLORS","black","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focus_25","focus","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,ixBASnB,mCAAkBC,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CATmB,EAanB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAbmB,EAiBnB,mCAAkBH,+BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAjBmB,EAoBZD,eAAOE,WApBK,EAiCCF,eAAOG,WAjCR,EAqCrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,OACIC,qBADJ,05BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,2kBAoC4BN,eAAOE,WApCnC,EAwC8BF,eAAOW,WAxCrC,EA8C8BX,eAAOY,YA9CrC,EAkD8BZ,eAAOS,UAlDrC,CADA;AAAA,CArCqB,EA6FMT,eAAOa,QA7Fb,EA6FsCb,eAAOc,KA7F7C,CAAlB;;;;AAqGA,IAAMC,qBAAqB,GAAGnB,0BAAOoB,KAAV,sNAA3B;;;;AASA,IAAMC,YAAY,GAAGrB,0BAAOsB,IAAV,8rBAWHlB,eAAOmB,WAXJ,EAeDnB,eAAOY,YAfN,EAyBDZ,eAAOoB,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.cjs"}

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/TogglerTypes.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=TogglerTypes.cjs.map

package/dist/Toggles/TogglerTypes.cjs.map

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

package/dist/Toggles/index.cjs

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function get() {
+    return _ToggleSwitch.default;
+  }
+});
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+//# sourceMappingURL=index.cjs.map

package/dist/Toggles/index.cjs.map

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

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.cjs

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipTrigger = exports.TooltipContainer = exports.Tooltip = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _types = require("../types");
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var distanceToEdge = function distanceToEdge(size) {
+  return size == _types.Size.XSmall ? '8px' : !size || size == _types.Size.Small ? '12px' : '16px';
+};
+
+var Tooltip = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34em;\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  }\n"])), function (props) {
+  return props.size == _types.Size.Small || props.size != _types.Size.Medium ? (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
+}, function (props) {
+  return props.size == _types.Size.XSmall ? (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
+}, function (props) {
+  return props.size == _types.Size.Medium ? (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.white) : '';
+}, function (props) {
+  return props.align == 'center' ? 'text-align: center;' : '';
+}, _styles.BOXSHADOWS.BOXSHADOW_L2, function (props) {
+  return props.size == _types.Size.XSmall ? '4px 8px' : props.size == _types.Size.Medium ? '8px 12px' : '6px 10px';
+}, function (props) {
+  return props.height;
+}, _styles.COLORS.primary_800, _zIndexes.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' ? _styles.COLORS.primary_800 : 'transparent';
+}, function (props) {
+  return props.position == 'right' ? _styles.COLORS.primary_800 : 'transparent';
+}, function (props) {
+  return props.position == 'bottom' ? _styles.COLORS.primary_800 : 'transparent';
+}, function (props) {
+  return props.position == 'left' ? _styles.COLORS.primary_800 : 'transparent';
+});
+
+exports.Tooltip = Tooltip;
+Tooltip.defaultProps = {
+  withArrow: false,
+  size: _types.Size.Small,
+  height: 'auto',
+  align: 'center',
+  position: 'bottom'
+};
+
+var TooltipTrigger = function TooltipTrigger(delay) {
+  return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:hover ", ", &:focus-within ", ", &:focus ", " {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ", ";\n  }\n"])), Tooltip, Tooltip, Tooltip, delay !== null && delay !== void 0 ? delay : '1s');
+};
+
+exports.TooltipTrigger = TooltipTrigger;
+
+var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (props) {
+  return TooltipTrigger(props.delay);
+});
+
+exports.TooltipContainer = TooltipContainer;
+//# sourceMappingURL=TooltipStyles.cjs.map

package/dist/Tooltips/TooltipStyles.cjs.map

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

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>;

package/dist/Tooltips/TooltipStyles.js

@@ -0,0 +1,69 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import styled, { css } from 'styled-components';
+import { Size } from '../types';
+import { BOXSHADOWS, COLORS, ComponentTextStyle } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+
+var distanceToEdge = function distanceToEdge(size) {
+  return size == Size.XSmall ? '8px' : !size || size == Size.Small ? '12px' : '16px';
+};
+
+export var Tooltip = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n    pointer-events: none;\n    ", "\n    ", "\n    ", "\n    ", "\n    box-shadow: ", ";\n    \n    padding: ", ";\n    border-radius: 2px;\n    width: max-content;\n    height: ", ";\n    max-width: 34em;\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  }\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.height;
+}, 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 TooltipTrigger(delay) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:hover ", ", &:focus-within ", ", &:focus ", " {\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: ", ";\n  }\n"])), Tooltip, Tooltip, Tooltip, delay !== null && delay !== void 0 ? delay : '1s');
+};
+export var TooltipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (props) {
+  return TooltipTrigger(props.delay);
+});
+//# sourceMappingURL=TooltipStyles.js.map

package/dist/Tooltips/TooltipStyles.js.map

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