@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/Toasters/__tests__/Toast.test.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _index = require("../index");
+
+require("jest-styled-components");
+
+var _types = require("../../types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<Toast />', function () {
+  it('Renders black toast', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, queryByText, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Toast, {
+              key: "a",
+              options: {
+                color: _types.ToastColor.BLACK,
+                position: _types.ToastPosition.TOPMIDDLE
+              },
+              content: "This is a warning",
+              testId: "TestToast"
+            })), queryByText = _render.queryByText, getByTestId = _render.getByTestId;
+            expect(queryByText('This is a warning')).toBeDefined();
+            expect(getByTestId('TestToast').classList.contains('BLACK')).toBe(true);
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('Renders white toast', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, queryByText, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Toast, {
+              key: "a",
+              options: {
+                color: _types.ToastColor.WHITE,
+                position: _types.ToastPosition.TOPMIDDLE
+              },
+              content: "This is a warning",
+              testId: "TestToast"
+            })), queryByText = _render2.queryByText, getByTestId = _render2.getByTestId;
+            expect(queryByText('This is a warning')).toBeDefined();
+            expect(getByTestId('TestToast').classList.contains('WHITE')).toBe(true);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('Renders warning toast', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var _render3, queryByText, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Toast, {
+              key: "a",
+              options: {
+                color: _types.ToastColor.ORANGE,
+                position: _types.ToastPosition.TOPMIDDLE
+              },
+              content: "This is a warning",
+              testId: "TestToast"
+            })), queryByText = _render3.queryByText, getByTestId = _render3.getByTestId;
+            expect(queryByText('This is a warning')).toBeDefined();
+            expect(getByTestId('TestToast').classList.contains('ORANGE')).toBe(true);
+
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('Renders error toast', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var _render4, queryByText, getByTestId;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Toast, {
+              key: "a",
+              options: {
+                color: _types.ToastColor.RED,
+                position: _types.ToastPosition.TOPMIDDLE
+              },
+              content: "This is a warning",
+              testId: "TestToast"
+            })), queryByText = _render4.queryByText, getByTestId = _render4.getByTestId;
+            expect(queryByText('This is a warning')).toBeDefined();
+            expect(getByTestId('TestToast').classList.contains('RED')).toBe(true);
+
+          case 3:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});
+//# sourceMappingURL=Toast.test.js.map

package/dist/js/Toasters/__tests__/Toast.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Toasters/__tests__/Toast.test.tsx"],"names":["describe","it","color","ToastColor","BLACK","position","ToastPosition","TOPMIDDLE","queryByText","getByTestId","expect","toBeDefined","classList","contains","toBe","WHITE","ORANGE","RED"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport { Toast } from '../index';\r\nimport 'jest-styled-components';\r\nimport { ToastColor, ToastPosition } from '../../types';\r\n\r\ndescribe('<Toast />', () => {\r\n  it('Renders black toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.BLACK,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('BLACK')).toBe(true);\r\n  });\r\n  it('Renders white toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.WHITE,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('WHITE')).toBe(true);\r\n  });\r\n  it('Renders warning toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.ORANGE,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('ORANGE')).toBe(true);\r\n  });\r\n  it('Renders error toast', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Toast\r\n        key=\"a\"\r\n        options={{\r\n          color: ToastColor.RED,\r\n          position: ToastPosition.TOPMIDDLE,\r\n        }}\r\n        content=\"This is a warning\"\r\n        testId=\"TestToast\"\r\n      />,\r\n    );\r\n    expect(queryByText('This is a warning')).toBeDefined();\r\n    expect(getByTestId('TestToast').classList.contains('RED')).toBe(true);\r\n  });\r\n});\r\n"],"file":"Toast.test.js"}

package/dist/js/Toasters/index.d.ts

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

package/dist/js/Toasters/index.js

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

package/dist/js/Toasters/index.js.map

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

package/dist/js/Toggles/ToggleSwitch.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Import custom types.
+ */
+import { ToggleSwitchProps } from './TogglerTypes';
+declare const ToggleSwitch: ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => JSX.Element;
+export default ToggleSwitch;

package/dist/js/Toggles/ToggleSwitch.js

@@ -0,0 +1,67 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _TogglerStyles = require("./TogglerStyles");
+
+var _ = require("..");
+
+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__*/React.createElement(_TogglerStyles.StyledSwitch, {
+    onClick: handleClick,
+    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    selected: selected,
+    tabIndex: disabled ? -1 : 0
+  }, /*#__PURE__*/React.createElement(_TogglerStyles.ToggleSwitchContainer, null, /*#__PURE__*/React.createElement(_TogglerStyles.ToggleSwitch, {
+    className: isSemantic ? 'semantic' : ''
+  })), label && /*#__PURE__*/React.createElement("label", {
+    className: 'label',
+    htmlFor: id
+  }, label));
+};
+
+var _default = ToggleSwitch;
+exports.default = _default;
+//# sourceMappingURL=ToggleSwitch.js.map

package/dist/js/Toggles/ToggleSwitch.js.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,oBAAC,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;AAP5B,kBAQE,oBAAC,oCAAD,qBACE,oBAAC,2BAAD;AAAQ,IAAA,SAAS,EAAEG,UAAU,GAAG,UAAH,GAAgB;AAA7C,IADF,CARF,EAWGD,KAAK,iBACJ;AAAO,IAAA,SAAS,EAAE,OAAlB;AAA2B,IAAA,OAAO,EAAEH;AAApC,KACGG,KADH,CAZJ,CADF;AAmBD,CAnCD;;eAqCeJ,Y","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport { ToggleSwitchProps } from './TogglerTypes';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';\r\nimport { Size } from '..';\r\n\r\nconst ToggleSwitch = ({ id, disabled, selected, label, isSemantic, size, onToggle }: ToggleSwitchProps) => {\r\n  /**\r\n   * Does all required pre-requisites and toggles the switcher state.\r\n   */\r\n  const handleClick = () => {\r\n    // If disabled, don't do anything\r\n    if (disabled) {\r\n      return;\r\n    }\r\n\r\n    // Toggle state change\r\n    onToggle(!selected);\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledSwitch\r\n      onClick={handleClick}\r\n      className={size\r\n        .toString()\r\n        .toLowerCase()\r\n        .concat(disabled ? ' disabled' : '')}\r\n      selected={selected}\r\n      tabIndex={disabled ? -1 : 0}>\r\n      <ToggleSwitchContainer>\r\n        <Switch className={isSemantic ? 'semantic' : ''} />\r\n      </ToggleSwitchContainer>\r\n      {label && (\r\n        <label className={'label'} htmlFor={id}>\r\n          {label}\r\n        </label>\r\n      )}\r\n    </StyledSwitch>\r\n  );\r\n};\r\n\r\nexport default ToggleSwitch;\r\n"],"file":"ToggleSwitch.js"}

package/dist/js/Toggles/TogglerStyles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, {
+    selected: boolean | undefined;
+}, never>;
+export declare const ToggleSwitchContainer: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const ToggleSwitch: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/js/Toggles/TogglerStyles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleSwitch = exports.ToggleSwitchContainer = exports.StyledSwitch = void 0;
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledSwitch = _styledComponents.default.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"])), (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 = _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        "])), _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 = _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        "])), _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 = _taggedTemplateLiteral(["\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 = _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"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
+
+exports.ToggleSwitch = ToggleSwitch;
+//# sourceMappingURL=TogglerStyles.js.map

package/dist/js/Toggles/TogglerStyles.js.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,mwBASnB,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,44BAG4BN,eAAOE,WAHnC,EAO8BF,eAAOO,WAPrC,EAa8BP,eAAOQ,WAbrC,EAiB8BR,eAAOS,UAjBrC,EAqB4BT,eAAOU,WArBnC,EAwB8BV,eAAOQ,WAxBrC,QAkCIF,qBAlCJ,6jBAoC4BN,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,wMAA3B;;;;AASA,IAAMC,YAAY,GAAGrB,0BAAOsB,IAAV,grBAWHlB,eAAOmB,WAXJ,EAeDnB,eAAOY,YAfN,EAyBDZ,eAAOoB,KAzBN,CAAlB","sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: max-content;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n  &.disabled {\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .label {\r\n      cursor: not-allowed;\r\n    }\r\n  }\r\n  .label {\r\n    cursor: inherit;\r\n    margin-left: 8px;\r\n  }\r\n\r\n  &:not(.disabled):active label:first-of-type span {\r\n    &:before {\r\n      background-color: ${COLORS.primary_100};\r\n    }\r\n  }\r\n\r\n  ${(props) =>\r\n    props.selected\r\n      ? css`\r\n          &.disabled label:first-of-type span {\r\n            background-color: ${COLORS.neutral_300} !important;\r\n            cursor: not-allowed;\r\n\r\n            &:before {\r\n              background-color: ${COLORS.neutral_200} !important;\r\n              cursor: not-allowed;\r\n            }\r\n          }\r\n          &:hover span {\r\n            &.semantic {\r\n              background-color: ${COLORS.correct_500};\r\n            }\r\n\r\n            &:before {\r\n              background-color: ${COLORS.primary_20};\r\n            }\r\n          }\r\n          label:first-of-type span {\r\n            background-color: ${COLORS.primary_500};\r\n\r\n            &.semantic {\r\n              background-color: ${COLORS.correct_500};\r\n            }\r\n\r\n            &:before {\r\n              -webkit-transform: translateX(20px);\r\n              -ms-transform: translateX(20px);\r\n              transform: translateX(20px);\r\n            }\r\n          }\r\n        `\r\n      : css`\r\n          &.disabled label:first-of-type span {\r\n            background-color: ${COLORS.neutral_300} !important;\r\n            cursor: not-allowed;\r\n\r\n            &:before {\r\n              background-color: ${COLORS.neutral_100} !important;\r\n              cursor: not-allowed;\r\n            }\r\n          }\r\n          &:hover label:first-of-type span {\r\n            &.semantic {\r\n              background-color: ${COLORS.critical_500};\r\n            }\r\n\r\n            &:before {\r\n              background-color: ${COLORS.primary_20};\r\n            }\r\n          }\r\n        `}\r\n  &:not(.disabled):focus label:first-of-type span {\r\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\r\n  }\r\n\r\n  &:not(.disabled) label:first-of-type {\r\n    cursor: inherit;\r\n  }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n  position: relative;\r\n  align-items: center;\r\n  display: inline-flex;\r\n  height: 28px;\r\n  width: auto;\r\n  padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n  position: relative;\r\n  display: inline-block;\r\n  vertical-align: middle;\r\n  cursor: pointer;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 36px;\r\n  height: 16px;\r\n  background-color: ${COLORS.neutral_500};\r\n  border-radius: 100px;\r\n\r\n  &.semantic {\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n\r\n  &:before {\r\n    position: absolute;\r\n    content: '';\r\n    height: 12px;\r\n    width: 12px;\r\n    left: 2px;\r\n    top: calc(50% - 6px);\r\n    background-color: ${COLORS.white};\r\n    -webkit-transition: background-color 0.1s, transform 0.1s;\r\n    transition: 0.1s;\r\n    transition-timing-function: ease-in-out;\r\n    border-radius: 50%;\r\n  }\r\n`;\r\n"],"file":"TogglerStyles.js"}

package/dist/js/Toggles/TogglerTypes.d.ts

@@ -0,0 +1,13 @@
+import { Size } from '..';
+/**
+ * Types for the table.
+ */
+export interface ToggleSwitchProps {
+    id: string;
+    label?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    isSemantic?: boolean;
+    size?: Size;
+    onToggle: (selected: boolean) => void;
+}

package/dist/js/Toggles/TogglerTypes.js

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

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

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

package/dist/js/Toggles/index.d.ts

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

package/dist/js/Toggles/index.js

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

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

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

package/dist/js/Tooltips/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './TooltipTypes';
+declare const Tooltip: ({ label, children, withArrow, size, height, width, align, position }: TooltipProps) => JSX.Element;
+export default Tooltip;

package/dist/js/Tooltips/Tooltip.js

@@ -0,0 +1,49 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _TooltipStyles = require("./TooltipStyles");
+
+var _ = require("..");
+
+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 Tooltip = function Tooltip(_ref) {
+  var label = _ref.label,
+      children = _ref.children,
+      withArrow = _ref.withArrow,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _.Size.Small : _ref$size,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 'auto' : _ref$height,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'center' : _ref$align,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'bottom' : _ref$position;
+  return /*#__PURE__*/React.createElement(_TooltipStyles.TooltipContainer, {
+    align: align,
+    height: height,
+    size: size,
+    width: width,
+    withArrow: withArrow,
+    position: position,
+    className: "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tooltip"
+  }, label), children);
+};
+
+var _default = Tooltip;
+exports.default = _default;
+//# sourceMappingURL=Tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tooltips/Tooltip.tsx"],"names":["Tooltip","label","children","withArrow","size","Size","Small","height","width","align","position"],"mappings":";;;;;;;;;AACA;;AAIA;;AACA;;;;;;AAEC,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAO2B;AAAA,MANzCC,KAMyC,QANzCA,KAMyC;AAAA,MANlCC,QAMkC,QANlCA,QAMkC;AAAA,MALzCC,SAKyC,QALzCA,SAKyC;AAAA,uBAJzCC,IAIyC;AAAA,MAJzCA,IAIyC,0BAJlCC,OAAKC,KAI6B;AAAA,yBAHzCC,MAGyC;AAAA,MAHzCA,MAGyC,4BAHhC,MAGgC;AAAA,wBAFzCC,KAEyC;AAAA,MAFzCA,KAEyC,2BAFjC,MAEiC;AAAA,wBADzCC,KACyC;AAAA,MADzCA,KACyC,2BADjC,QACiC;AAAA,2BAAzCC,QAAyC;AAAA,MAAzCA,QAAyC,8BAA9B,QAA8B;AAExC,sBAAO,oBAAC,+BAAD;AAAkB,IAAA,KAAK,EAAED,KAAzB;AACC,IAAA,MAAM,EAAEF,MADT;AAEC,IAAA,IAAI,EAAEH,IAFP;AAGC,IAAA,KAAK,EAAEI,KAHR;AAIC,IAAA,SAAS,EAAEL,SAJZ;AAKC,IAAA,QAAQ,EAAEO,QALX;AAKqB,IAAA,SAAS,EAAC;AAL/B,kBAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACIT,KADJ,CAND,EASDC,QATC,CAAP;AAWF,CApBD;;eAsBeF,O","sourcesContent":["\r\nimport * as React from 'react';\r\n\r\nimport { TooltipProps } from './TooltipTypes';\r\n\r\nimport { TooltipContainer } from './TooltipStyles';\r\nimport { Size } from '..';\r\n \r\n const Tooltip = ({\r\n   label, children,\r\n   withArrow,\r\n   size = Size.Small,\r\n   height = 'auto',\r\n   width = 'auto',\r\n   align = 'center', \r\n   position = 'bottom' } : TooltipProps) => {\r\n \r\n    return <TooltipContainer align={align} \r\n            height={height} \r\n            size={size}\r\n            width={width} \r\n            withArrow={withArrow} \r\n            position={position} className=\"container\">\r\n            <div className=\"tooltip\">\r\n               {label}\r\n            </div>\r\n         {children}\r\n       </TooltipContainer>;\r\n };\r\n \r\n export default Tooltip;"],"file":"Tooltip.js"}

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

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

package/dist/js/Tooltips/TooltipStyles.js

@@ -0,0 +1,94 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipContainer = exports.TooltipTrigger = exports.Tooltip = void 0;
+
+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; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+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 = _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 == _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 = _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');
+};
+
+exports.TooltipTrigger = TooltipTrigger;
+
+var TooltipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n\n  ", "\n"])), function (props) {
+  return TooltipTrigger(props.delay);
+});
+
+exports.TooltipContainer = TooltipContainer;
+//# sourceMappingURL=TooltipStyles.js.map

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

package/dist/js/Tooltips/TooltipTypes.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Size } from "../types";
+/**
+ * Types for the table.
+ */
+export interface TooltipProps {
+    label?: string;
+    withArrow?: boolean;
+    width?: string;
+    size?: Size;
+    delay?: string;
+    height?: string;
+    align?: 'start' | 'end' | 'center' | undefined;
+    position?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    children?: React.ReactNode;
+}

package/dist/js/Tooltips/TooltipTypes.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+/**
+ * Types for the table.
+ */
+;
+//# sourceMappingURL=TooltipTypes.js.map

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

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

package/dist/js/Tooltips/TooltipWrapper.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './TooltipTypes';
+declare const TooltipWrapper: ({ label, children, withArrow, size, height, delay, align, position }: TooltipProps) => JSX.Element;
+export default TooltipWrapper;