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

package/dist/Toasters/ToastContext.js

@@ -1,69 +1,145 @@
-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;
+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

package/dist/Toasters/index.js

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

package/dist/Toggles/ToggleButton.js

@@ -1,48 +1,71 @@
-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;
+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

package/dist/Toggles/ToggleSwitch.js

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

package/dist/Toggles/TogglerStyles.js

@@ -1,17 +1,16 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
 /**
  * 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_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;
+ */
+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

package/dist/Toggles/TogglerTypes.js

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

package/dist/Toggles/index.js

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