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

package/dist/Toasters/ToastContext.js

@@ -1,145 +1,69 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-import * as React from 'react';
-import styled from 'styled-components';
-import { createUUID } from '../Services/functions';
-import Toast from './Toast';
-import { ToastPosition } from '../types';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
-
-export var ToastContext = /*#__PURE__*/React.createContext({});
-var ToastBucket = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), Z_INDEXES.toast);
-var ToastBucketTopLeft = styled(ToastBucket)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 5%;\n"])));
-var ToastBucketTopMiddle = styled(ToastBucket)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
-var ToastBucketTopRight = styled(ToastBucket)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  top: 16px;\n  right: 5%;\n"])));
-var ToastBucketBottomLeft = styled(ToastBucket)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 5%;\n"])));
-var ToastBucketBottomMiddle = styled(ToastBucket)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
-var ToastBucketBottomRight = styled(ToastBucket)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  bottom: 16px;\n  right: 5%;\n"])));
-export var ToastProvider = function ToastProvider(_ref) {
-  var children = _ref.children;
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    toasts = _React$useState2[0],
-    setToasts = _React$useState2[1];
-  var add = function add(content, options) {
-    var id = createUUID();
-    setToasts(function (prev) {
-      return [].concat(_toConsumableArray(prev), [{
-        id: id,
-        content: content,
-        options: options
-      }]);
-    });
-    return id;
-  };
-  var _remove = function remove(id) {
-    return setToasts(toasts.filter(function (t) {
-      return t.id !== id;
-    }));
-  };
-  var functions = React.useMemo(function () {
-    return {
-      addToast: add,
-      removeToast: _remove
-    };
-  }, [toasts]);
-  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
-    value: {
-      toasts: toasts,
-      addToast: add,
-      removeToast: _remove
-    },
-    children: [/*#__PURE__*/_jsx(ToastBucketTopLeft, {
-      children: toasts.filter(function (t) {
-        return t.options.position === ToastPosition.TOPLEFT;
-      }).map(function (t) {
-        return /*#__PURE__*/_jsx(Toast, {
-          content: t.content,
-          remove: function remove() {
-            return _remove(t.id);
-          },
-          options: t.options
-        }, t.id);
-      })
-    }), /*#__PURE__*/_jsx(ToastBucketTopMiddle, {
-      children: toasts.filter(function (t) {
-        return t.options.position === ToastPosition.TOPMIDDLE;
-      }).map(function (t) {
-        return /*#__PURE__*/_jsx(Toast, {
-          content: t.content,
-          remove: function remove() {
-            return _remove(t.id);
-          },
-          options: t.options
-        }, t.id);
-      })
-    }), /*#__PURE__*/_jsx(ToastBucketTopRight, {
-      children: toasts.filter(function (t) {
-        return t.options.position === ToastPosition.TOPRIGHT;
-      }).map(function (t) {
-        return /*#__PURE__*/_jsx(Toast, {
-          content: t.content,
-          remove: function remove() {
-            return _remove(t.id);
-          },
-          options: t.options
-        }, t.id);
-      })
-    }), /*#__PURE__*/_jsx(ToastBucketBottomLeft, {
-      children: toasts.filter(function (t) {
-        return t.options.position === ToastPosition.BOTTOMLEFT;
-      }).map(function (t) {
-        return /*#__PURE__*/_jsx(Toast, {
-          content: t.content,
-          remove: function remove() {
-            return _remove(t.id);
-          },
-          options: t.options
-        }, t.id);
-      })
-    }), /*#__PURE__*/_jsx(ToastBucketBottomMiddle, {
-      children: toasts.filter(function (t) {
-        return t.options.position === ToastPosition.BOTTOMMIDDLE;
-      }).map(function (t) {
-        return /*#__PURE__*/_jsx(Toast, {
-          content: t.content,
-          remove: function remove() {
-            return _remove(t.id);
-          },
-          options: t.options
-        }, t.id);
-      })
-    }), /*#__PURE__*/_jsx(ToastBucketBottomRight, {
-      children: toasts.filter(function (t) {
-        return t.options.position === ToastPosition.BOTTOMRIGHT;
-      }).map(function (t) {
-        return /*#__PURE__*/_jsx(Toast, {
-          content: t.content,
-          remove: function remove() {
-            return _remove(t.id);
-          },
-          options: t.options
-        }, t.id);
-      })
-    }), children]
-  });
-};
-ToastProvider.propTypes = {
-  children: _pt.any
-};
-export function useToast() {
-  var _React$useContext = React.useContext(ToastContext),
-    addToast = _React$useContext.addToast,
-    removeToast = _React$useContext.removeToast;
-  return {
-    addToast: addToast,
-    removeToast: removeToast
-  };
-}
-//# sourceMappingURL=ToastContext.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { createUUID } from '../Services/functions';
+import Toast from './Toast';
+import { ToastPosition } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
+/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
+export var ToastContext = React.createContext({});
+var ToastBucket = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"], ["\n  position: fixed;\n  z-index: ", ";\n  display: flex;\n  flex-direction: column-reverse;\n"])), Z_INDEXES.toast);
+var ToastBucketTopLeft = styled(ToastBucket)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  top: 16px;\n  left: 5%;\n"], ["\n  top: 16px;\n  left: 5%;\n"])));
+var ToastBucketTopMiddle = styled(ToastBucket)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"], ["\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketTopRight = styled(ToastBucket)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  top: 16px;\n  right: 5%;\n"], ["\n  top: 16px;\n  right: 5%;\n"])));
+var ToastBucketBottomLeft = styled(ToastBucket)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  bottom: 16px;\n  left: 5%;\n"], ["\n  bottom: 16px;\n  left: 5%;\n"])));
+var ToastBucketBottomMiddle = styled(ToastBucket)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"], ["\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
+var ToastBucketBottomRight = styled(ToastBucket)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  bottom: 16px;\n  right: 5%;\n"], ["\n  bottom: 16px;\n  right: 5%;\n"])));
+export var ToastProvider = function (_a) {
+    var children = _a.children;
+    var _b = React.useState([]), toasts = _b[0], setToasts = _b[1];
+    var add = function (content, options) {
+        var id = createUUID();
+        setToasts(function (prev) { return __spreadArray(__spreadArray([], prev, true), [{ id: id, content: content, options: options }], false); });
+        return id;
+    };
+    var remove = function (id) { return setToasts(toasts.filter(function (t) { return t.id !== id; })); };
+    var functions = React.useMemo(function () {
+        return { addToast: add, removeToast: remove };
+    }, [toasts]);
+    return (React.createElement(ToastContext.Provider, { value: { toasts: toasts, addToast: add, removeToast: remove } },
+        React.createElement(ToastBucketTopLeft, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.TOPLEFT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketTopMiddle, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.TOPMIDDLE; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketTopRight, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.TOPRIGHT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketBottomLeft, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMLEFT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketBottomMiddle, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMMIDDLE; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        React.createElement(ToastBucketBottomRight, null, toasts
+            .filter(function (t) { return t.options.position === ToastPosition.BOTTOMRIGHT; })
+            .map(function (t) { return (React.createElement(Toast, { key: t.id, content: t.content, remove: function () { return remove(t.id); }, options: t.options })); })),
+        children));
+};
+export function useToast() {
+    var _a = React.useContext(ToastContext), addToast = _a.addToast, removeToast = _a.removeToast;
+    return {
+        addToast: addToast,
+        removeToast: removeToast
+    };
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/Toasters/index.js

@@ -1,5 +1,4 @@
-import Toast from './Toast';
-import { ToastProvider, useToast, ToastContext } from './ToastContext';
-export * from './Toast';
-export { Toast, ToastProvider, useToast, ToastContext };
-//# sourceMappingURL=index.js.map
+import Toast from './Toast';
+import { ToastProvider, useToast, ToastContext } from './ToastContext';
+export * from './Toast';
+export { Toast, ToastProvider, useToast, ToastContext };

package/dist/Toggles/ToggleButton.d.ts

@@ -4,10 +4,15 @@ export interface ToggleButtonState {
     color?: string;
 }
 export interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {
+    /** Required. Initial state of the toggle. */
     active: boolean;
+    /** Optional. Handler to be called when toggle state changes. */
     onChange?: (value: boolean) => void;
+    /** Optional. If set user can not interact with ToggleButton. */
     disabled?: boolean;
+    /** Required. Icon and color of toggle in default state. */
     defaultState: ToggleButtonState;
+    /** Optional. Icon and color of toggle in active state. */
     activeState?: ToggleButtonState;
 }
 export declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/Toggles/ToggleButton.js

@@ -1,71 +1,48 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["id", "active", "onChange", "disabled", "defaultState", "activeState", "className"];
-var _templateObject;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
-import { IconButton } from '../Button';
-import styled from 'styled-components';
-import { IconButtonContentStyles } from '../Button/Iconbutton';
-import { COLORS } from '../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_500, IconButtonContentStyles, COLORS.neutral_300);
-export var ToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _activeState$color, _activeState$icon;
-  var id = _ref.id,
-    active = _ref.active,
-    onChange = _ref.onChange,
-    disabled = _ref.disabled,
-    defaultState = _ref.defaultState,
-    activeState = _ref.activeState,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isActive = _React$useState2[0],
-    setIsActive = _React$useState2[1];
-  React.useEffect(function () {
-    return setIsActive(active);
-  }, [active]);
-  var cls = "".concat(className || '', " ").concat(isActive ? 'active' : '', " ").concat(activeState ? 'state-change' : '', " ").concat(disabled ? 'disabled' : '');
-  return /*#__PURE__*/_jsx(Wrapper, {
-    className: cls,
-    children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
-      variant: 'secondary',
-      ref: ref,
-      useTransparentBackground: true,
-      shape: 'circular',
-      action: function action() {
-        setIsActive(!isActive);
-        if (onChange) {
-          onChange(!isActive);
-        }
-      },
-      id: id,
-      iconColor: isActive ? (_activeState$color = activeState === null || activeState === void 0 ? void 0 : activeState.color) !== null && _activeState$color !== void 0 ? _activeState$color : defaultState.color : defaultState.color,
-      disabled: disabled,
-      "aria-pressed": isActive
-    }, rest), {}, {
-      children: isActive ? (_activeState$icon = activeState === null || activeState === void 0 ? void 0 : activeState.icon) !== null && _activeState$icon !== void 0 ? _activeState$icon : defaultState.icon : defaultState.icon
-    }))
-  });
-});
-ToggleButton.propTypes = {
-  active: _pt.bool.isRequired,
-  onChange: _pt.func,
-  disabled: _pt.bool,
-  defaultState: _pt.shape({
-    icon: _pt.node.isRequired,
-    color: _pt.string
-  }).isRequired,
-  activeState: _pt.shape({
-    icon: _pt.node.isRequired,
-    color: _pt.string
-  })
-};
-export default ToggleButton;
-//# sourceMappingURL=ToggleButton.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { IconButton } from '../Button';
+import styled from 'styled-components';
+import { IconButtonContentStyles } from '../Button/Iconbutton';
+import { COLORS } from '../styles';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"], ["\n  ", " {\n    transition: all 0.1s ease-in-out;\n  }\n\n  &.disabled,\n  &.active:not(.state-change) {\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &.active:not(.state-change) {\n    ", ":after {\n      content: '';\n      position: absolute;\n      left: 12px;\n      bottom: 1px;\n      background-color: ", ";\n      border-radius: 4px;\n      height: 4px;\n      width: 24px;\n    }\n  }\n\n  &.disabled:not(.state-change) {\n    ", ":after {\n      background: ", ";\n    }\n  }\n"])), IconButtonContentStyles, IconButtonContentStyles, COLORS.white, IconButtonContentStyles, COLORS.primary_500, IconButtonContentStyles, COLORS.neutral_300);
+export var ToggleButton = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var id = _a.id, active = _a.active, onChange = _a.onChange, disabled = _a.disabled, defaultState = _a.defaultState, activeState = _a.activeState, className = _a.className, rest = __rest(_a, ["id", "active", "onChange", "disabled", "defaultState", "activeState", "className"]);
+    var _d = React.useState(false), isActive = _d[0], setIsActive = _d[1];
+    React.useEffect(function () { return setIsActive(active); }, [active]);
+    var cls = "".concat(className || '', " ").concat(isActive ? 'active' : '', " ").concat(activeState ? 'state-change' : '', " ").concat(disabled ? 'disabled' : '');
+    return (React.createElement(Wrapper, { className: cls },
+        React.createElement(IconButton, __assign({ variant: 'secondary', ref: ref, useTransparentBackground: true, shape: 'circular', action: function () {
+                setIsActive(!isActive);
+                if (onChange) {
+                    onChange(!isActive);
+                }
+            }, id: id, iconColor: isActive ? (_b = activeState === null || activeState === void 0 ? void 0 : activeState.color) !== null && _b !== void 0 ? _b : defaultState.color : defaultState.color, disabled: disabled, "aria-pressed": isActive }, rest), isActive ? (_c = activeState === null || activeState === void 0 ? void 0 : activeState.icon) !== null && _c !== void 0 ? _c : defaultState.icon : defaultState.icon)));
+});
+export default ToggleButton;
+var templateObject_1;

package/dist/Toggles/ToggleSwitch.js

@@ -1,87 +1,65 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
-var _templateObject;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-
-/**
- * Import custom types.
- */
-
+ */
+import * as React from 'react';
 /**
  * Import custom styles.
- */
-import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
-import { COLORS, Size, SystemIcons } from '..';
-import { useFocusVisibleRef } from '../common';
-import styled from "styled-components";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var CheckmarkContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
-var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, 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,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * Does all required pre-requisites and toggles the switcher state.
-   */
-  var toggle = function toggle() {
-    // If disabled, don't do anything
-    if (disabled) return;
-
-    // Toggle state change
-    onToggle(!selected);
-  };
-  var focusVisibleRef = useFocusVisibleRef([]);
-  React.useImperativeHandle(ref, function () {
-    return focusVisibleRef.current;
-  }, [focusVisibleRef]);
-  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
-  return /*#__PURE__*/_jsxs(StyledSwitch, _objectSpread(_objectSpread({
-    ref: focusVisibleRef,
-    onClick: function onClick(e) {
-      return toggle();
-    },
-    onKeyDown: function onKeyDown(e) {
-      return (e.key === 'Enter' || e.key === ' ') && toggle();
-    },
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? " ".concat(className) : ''),
-    selected: selected,
-    id: id,
-    role: "switch",
-    "aria-pressed": selected,
-    tabIndex: disabled ? -1 : 0
-  }, rest), {}, {
-    children: [/*#__PURE__*/_jsx(ToggleSwitchContainer, {
-      id: "switchContainer",
-      children: /*#__PURE__*/_jsx(Switch, {
-        className: isSemantic ? 'semantic' : '',
-        children: selected && /*#__PURE__*/_jsx(CheckmarkContainer, {
-          children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-            size: '14px',
-            color: COLORS.white
-          })
-        })
-      })
-    }), label && /*#__PURE__*/_jsx("label", {
-      className: 'label',
-      htmlFor: id,
-      children: label
-    })]
-  }));
-});
-export default ToggleSwitch;
-//# sourceMappingURL=ToggleSwitch.js.map
+ */
+import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
+import { COLORS, Size, SystemIcons } from '..';
+import { useFocusVisibleRef } from '../common';
+import styled from "styled-components";
+var CheckmarkContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"], ["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
+var ToggleSwitch = React.forwardRef(function (_a, ref) {
+    var id = _a.id, disabled = _a.disabled, selected = _a.selected, label = _a.label, isSemantic = _a.isSemantic, size = _a.size, onToggle = _a.onToggle, className = _a.className, rest = __rest(_a, ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"]);
+    /**
+     * Does all required pre-requisites and toggles the switcher state.
+     */
+    var toggle = function () {
+        // If disabled, don't do anything
+        if (disabled)
+            return;
+        // Toggle state change
+        onToggle(!selected);
+    };
+    var focusVisibleRef = useFocusVisibleRef([]);
+    React.useImperativeHandle(ref, function () { return focusVisibleRef.current; }, [focusVisibleRef]);
+    size = size !== null && size !== void 0 ? size : Size.Medium;
+    return (React.createElement(StyledSwitch, __assign({ ref: focusVisibleRef, onClick: function (e) { return toggle(); }, onKeyDown: function (e) { return (e.key === 'Enter' || e.key === ' ') && toggle(); }, className: size
+            .toString()
+            .toLowerCase()
+            .concat(disabled ? ' disabled' : '')
+            .concat(className ? " ".concat(className) : ''), selected: selected, id: id, role: "switch", "aria-pressed": selected, tabIndex: disabled ? -1 : 0 }, rest),
+        React.createElement(ToggleSwitchContainer, { id: "switchContainer" },
+            React.createElement(Switch, { className: isSemantic ? 'semantic' : '' }, selected && React.createElement(CheckmarkContainer, null,
+                React.createElement(SystemIcons.CheckMark, { size: '14px', color: COLORS.white })))),
+        label && (React.createElement("label", { className: 'label', htmlFor: id }, label))));
+});
+export default ToggleSwitch;
+var templateObject_1;

package/dist/Toggles/TogglerStyles.js

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

package/dist/Toggles/TogglerTypes.d.ts

@@ -4,11 +4,18 @@ import { Size } from '..';
  * Types for the table.
  */
 export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'> {
+    /** Required. Id of the ToggleSwitch will be set to top level StyledSwitch div component. */
     id: string;
+    /** Optional. Label to be shown on the right side of the toggle. */
     label?: string;
+    /** Optional. If set user can not interact with Toggle. */
     disabled?: boolean;
+    /** Optional. Initial state of the Toggle, defaults to 'false' */
     selected?: boolean;
+    /** Optional. If set then 'critical_500' will be used as color for unselected state.*/
     isSemantic?: boolean;
+    /** Optional. Defaults to 'medium' */
     size?: Size;
+    /** Required. Handler to handle toggle state change. */
     onToggle: (selected: boolean) => void;
 }

package/dist/Toggles/TogglerTypes.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=TogglerTypes.js.map
+export {};

package/dist/Toggles/index.js

@@ -1,4 +1,3 @@
-import ToggleSwitch from './ToggleSwitch';
-import ToggleButton from './ToggleButton';
-export { ToggleSwitch, ToggleButton };
-//# sourceMappingURL=index.js.map
+import ToggleSwitch from './ToggleSwitch';
+import ToggleButton from './ToggleButton';
+export { ToggleSwitch, ToggleButton };

package/dist/Tooltips/TooltipOverflow.d.ts

@@ -6,5 +6,5 @@ interface TooltipOverflowProps extends TooltipProps {
     width?: string;
     value?: string;
 }
-declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => JSX.Element;
+declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => React.JSX.Element;
 export default TooltipOverflow;