@mailstep/design-system 0.8.29 → 0.8.31-beta.1

package/ui/Elements/Text/stories/Text.stories.js

@@ -0,0 +1,43 @@
+import Text from '../Text';
+var meta = {
+    title: 'Elements/Text',
+    component: Text,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        children: 'This is a text',
+    },
+};
+export var FontSize = {
+    args: {
+        children: 'This is a text font-size 10',
+        fontSize: 10,
+    },
+};
+export var FontWeight = {
+    args: {
+        children: 'This is a text font-weight bold',
+        fontWeight: 'bold',
+    },
+};
+export var VariantMedium = {
+    args: {
+        children: 'This is a text font-weight bold',
+        variant: 'medium',
+    },
+};
+export var VariantSemibold = {
+    args: {
+        children: 'This is a text font-weight bold',
+        variant: 'semiBold',
+    },
+};
+export var VariantBold = {
+    args: {
+        children: 'This is a text font-weight bold',
+        variant: 'bold',
+    },
+};

package/ui/Elements/Text/types.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, ReactNode } from 'react';
 import { SystemProps } from '@xstyled/system';
+
 export type TextVariant = 'normal' | 'medium' | 'semiBold' | 'bold';
 export type TextProps = SystemProps & {
     children?: ReactNode | ReactNode[];

package/ui/Elements/Toast/Toast.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
+
 export type ToastType = 'info' | 'success' | 'error' | 'warning';
 export type CustomToastProps = {
     closeToast?: () => void;

package/ui/Elements/Toast/Toast.js

@@ -1,36 +1,21 @@
-import Icon from "../Icon/Icon.js";
-import "../Icon/index.js";
-import { toastIconFill, toastIconMap, toastTitleMap } from "./constants.js";
-import { CloseWrapper, Container, ContentWrapper, Text, Title } from "./styles.js";
-import { useEffect } from "react";
-import { x } from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/Toast/Toast.tsx
-const Toast = ({ closeToast, title, text, type, autoClose }) => {
-	const icon = toastIconMap[type];
-	const fill = toastIconFill[type];
-	useEffect(() => {
-		if (!autoClose) return;
-		const timer = setTimeout(() => closeToast?.(), autoClose);
-		return () => {
-			clearTimeout(timer);
-		};
-	}, []);
-	return /* @__PURE__ */ jsxs(Container, {
-		autoClose,
-		fill,
-		children: [/* @__PURE__ */ jsx(x.div, {
-			mx: "12px",
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon,
-				fill,
-				size: "20px"
-			})
-		}), /* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Title, { children: title || toastTitleMap[type] }), text && /* @__PURE__ */ jsx(Text, { children: text })] }), /* @__PURE__ */ jsx(CloseWrapper, { children: /* @__PURE__ */ jsx("div", {
-			onClick: closeToast,
-			children: /* @__PURE__ */ jsx(Icon, { icon: "close" })
-		}) })] })]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Icon } from '../Icon';
+import { x } from '@xstyled/styled-components';
+import { toastTitleMap, toastIconMap, toastIconFill } from './constants';
+import { Title, Text, ContentWrapper, CloseWrapper, Container } from './styles';
+var Toast = function (_a) {
+    var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type, autoClose = _a.autoClose;
+    var icon = toastIconMap[type];
+    var fill = toastIconFill[type];
+    useEffect(function () {
+        if (!autoClose)
+            return;
+        var timer = setTimeout(function () { return closeToast === null || closeToast === void 0 ? void 0 : closeToast(); }, autoClose);
+        return function () {
+            clearTimeout(timer);
+        };
+    }, []);
+    return (_jsxs(Container, { autoClose: autoClose, fill: fill, children: [_jsx(x.div, { mx: "12px", children: _jsx(Icon, { icon: icon, fill: fill, size: "20px" }) }), _jsxs(ContentWrapper, { children: [_jsxs("div", { children: [_jsx(Title, { children: title || toastTitleMap[type] }), text && _jsx(Text, { children: text })] }), _jsx(CloseWrapper, { children: _jsx("div", { onClick: closeToast, children: _jsx(Icon, { icon: "close" }) }) })] })] }));
 };
-//#endregion
-export { Toast as default };
+export default Toast;

package/ui/Elements/Toast/constants.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ToastType } from './Toast';
+
 export declare const toastIconMap: Record<ToastType, string>;
 export declare const toastIconFill: Record<ToastType, string>;
 export declare const toastTitleMap: Record<ToastType, React.ReactElement | string>;

package/ui/Elements/Toast/constants.js

@@ -1,21 +1,18 @@
-//#region packages/ui/Elements/Toast/constants.ts
-const toastIconMap = {
-	info: "info",
-	success: "circleCheck",
-	error: "circleX",
-	warning: "circleTriangle"
+export var toastIconMap = {
+    info: 'info',
+    success: 'circleCheck',
+    error: 'circleX',
+    warning: 'circleTriangle',
 };
-const toastIconFill = {
-	info: "blue2",
-	success: "darkGreen",
-	error: "red1",
-	warning: "yellow1"
+export var toastIconFill = {
+    info: 'blue2',
+    success: 'darkGreen',
+    error: 'red1',
+    warning: 'yellow1',
 };
-const toastTitleMap = {
-	info: "Info",
-	success: "Success",
-	error: "Error",
-	warning: "Warning"
+export var toastTitleMap = {
+    info: 'Info',
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
 };
-//#endregion
-export { toastIconFill, toastIconMap, toastTitleMap };

package/ui/Elements/Toast/index.d.ts

@@ -1,4 +1,5 @@
-import Toast from './Toast';
+import { default as Toast } from './Toast';
+
 export type { ToastType } from './Toast';
 export { Toast };
 export default Toast;

package/ui/Elements/Toast/index.js

@@ -1,5 +1,3 @@
-import Toast from "./Toast.js";
-//#region packages/ui/Elements/Toast/index.ts
-var Toast_default = Toast;
-//#endregion
-export { Toast, Toast_default as default };
+import Toast from './Toast';
+export { Toast };
+export default Toast;

package/ui/Elements/Toast/stories/Toast.stories.d.ts

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../Toast").CustomToastProps>;
+    component: import('react').FC<import('../Toast').CustomToastProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Toast/stories/Toast.stories.js

@@ -0,0 +1,36 @@
+import Toast from '../Toast';
+var meta = {
+    title: 'Elements/Toast',
+    component: Toast,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Info = {
+    args: {
+        type: 'info',
+        title: 'Title of info toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};
+export var Success = {
+    args: {
+        type: 'success',
+        title: 'Title of success toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};
+export var Error = {
+    args: {
+        type: 'error',
+        title: 'Title of error toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};
+export var Warning = {
+    args: {
+        type: 'warning',
+        title: 'Title of warning toast',
+        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
+    }
+};

package/ui/Elements/Toast/styles.d.ts

@@ -1,8 +1,8 @@
-export declare const Title: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const Text: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const CloseWrapper: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    autoClose?: number;
+export declare const Title: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const Text: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const ContentWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const CloseWrapper: import('styled-components').StyledComponent<"span", import('@xstyled/system').Theme, {}, never>;
+export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    autoClose?: number | undefined;
     fill: string;
 }, never>;

package/ui/Elements/Toast/styles.js

@@ -1,76 +1,22 @@
-import styled$1, { css, keyframes, th } from "@xstyled/styled-components";
-//#region packages/ui/Elements/Toast/styles.ts
-const Title = styled$1.span`
-  display: block;
-  margin-bottom: 5px;
-  line-height: 18px;
-  font-weight: 700;
-  color: ${th("colors.blue2")};
-`;
-const Text = styled$1.span`
-  display: block;
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 500;
-  color: ${th("colors.gray1")};
-`;
-const ContentWrapper = styled$1.div`
-  display: flex;
-  justify-content: space-between;
-`;
-const CloseWrapper = styled$1.span`
-  display: flex;
-  align-items: flex-start;
-  margin-left: 15px;
-
-  svg {
-    cursor: pointer;
-  }
-`;
-const timerAnimation = keyframes`
-    to {
-       transform: scaleX(0)
-    }
-`;
-const after = (autoClose) => css`
-  &:after {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    content: '';
-    height: 4px;
-    width: 100%;
-    transform-origin: left center;
-    animation: ${timerAnimation} ${autoClose}ms linear;
-    border-radius: ${th.radius("lg")};
-    background-color: ${th.color("lightGray5")};
-  }
-`;
-const Container = styled$1.div`
-  display: flex;
-  position: relative;
-  background-color: white;
-  border-radius: ${th.radius("lg")};
-  box-shadow: ${th.shadow("cornerDialogShadow")};
-  padding: 10px;
-
-  @media ${"(max-width: 576px)"} {
-    font-size: 14px;
-  }
-
-  &:before {
-    position: absolute;
-    top: 5px;
-    bottom: 5px;
-    left: 5px;
-    content: '';
-    width: 4px;
-    ${({ autoClose }) => autoClose && "bottom: 8px"};
-    border-radius: ${th.radius("lg")};
-    background-color: ${({ fill }) => th.color(fill)};
-  }
-
-  ${({ autoClose }) => autoClose && after(autoClose)};
-`;
-//#endregion
-export { CloseWrapper, Container, ContentWrapper, Text, Title };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css, keyframes, th } from '@xstyled/styled-components';
+export var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), th('colors.blue2'));
+export var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), th('colors.gray1'));
+export var ContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+export var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var timerAnimation = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    to {\n       transform: scaleX(0)\n    }\n"], ["\n    to {\n       transform: scaleX(0)\n    }\n"])));
+var after = function (autoClose) { return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"])), timerAnimation, autoClose, th.radius('lg'), th.color('lightGray5')); };
+export var Container = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"])), th.radius('lg'), th.shadow('cornerDialogShadow'), '(max-width: 576px)', function (_a) {
+    var autoClose = _a.autoClose;
+    return autoClose && 'bottom: 8px';
+}, th.radius('lg'), function (_a) {
+    var fill = _a.fill;
+    return th.color(fill);
+}, function (_a) {
+    var autoClose = _a.autoClose;
+    return autoClose && after(autoClose);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Toggle/Toggle.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
-import { type Props } from './types';
+import { FC } from 'react';
+import { Props } from './types';
+
 declare const Toggle: FC<Props>;
 export default Toggle;

package/ui/Elements/Toggle/Toggle.js

@@ -1,124 +1,62 @@
-import { FieldLabel } from "../Label/Label.js";
-import "../Label/index.js";
-import SpaceAroundWrap from "../SpaceAround/SpaceAround.js";
-import "../SpaceAround/index.js";
-import "react";
-import styled$1, { css } from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/Toggle/Toggle.tsx
-const isHorizontal = (position) => position && ["left", "right"].includes(position);
-const StyledSpaceAroundWrap = styled$1(SpaceAroundWrap)`
-  display: flex;
-  flex-direction: ${({ labelPosition }) => labelPosition === "left" ? "row" : labelPosition === "right" ? "row-reverse" : "column"};
-  justify-content: ${({ labelPosition, labelJustify }) => labelPosition === "right" ? "flex-end" : labelJustify === "between" ? "space-between" : "flex-start"};
-  ${({ labelPosition }) => isHorizontal(labelPosition) ? "margin-top: 1rem" : ""}
-`;
-const StyledFieldLabel = styled$1(FieldLabel)`
-  cursor: pointer;
-  ${({ labelPosition }) => isHorizontal(labelPosition) ? "margin-bottom: 0;" : ""}
-  ${({ labelPosition }) => labelPosition === "left" ? "margin-right: 1rem;" : labelPosition === "right" ? "margin-left: 1rem;" : ""}
-`;
-const disabledStyles = css`
-  opacity: 0.4;
-`;
-const StyledToggle = styled$1.div`
-  aspect-ratio: 1 / 1;
-  width: 100%;
-  height: 100%;
-  border-radius: 7px;
-  background-color: lightGray5;
-  border: 3px solid;
-  border-color: lightGray5;
-  position: relative;
-  transition: all 100ms ease-out;
-
-  ${(props) => props.disabled ? disabledStyles : ""}
-
-  input:checked + & {
-    background-color: red1;
-    border-color: red1;
-
-    & > span {
-      transform: translate(75%, -50%);
-      background-color: white;
-    }
-  }
-`;
-const StyledDot = styled$1.span`
-  aspect-ratio: 1 / 1;
-  background-color: white;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
-  left: 10%;
-  transform: translate(-20%, -50%);
-  transition: all 100ms ease-out;
-`;
-const HiddenInput = styled$1.input`
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  border-radius: 7px;
-  z-index: 1;
-  margin: 0;
-
-  ${({ $enabled }) => $enabled ? "cursor: pointer;" : ""}
-`;
-const Wrapper = styled$1.div`
-  position: relative;
-  border-radius: 8px;
-  overflow: hidden;
-  flex-shrink: 0;
-  &[data-appearance='primary'] {
-    width: 24px;
-    height: 14px;
-    ${StyledDot} {
-      height: 10px;
-    }
-  }
-  &[data-appearance='grid'] {
-    width: 28px;
-    height: 16px;
-    ${StyledDot} {
-      height: 12px;
-    }
-  }
-`;
-const Toggle = ({ onChange, label, name, checked, defaultChecked, spaceAround = false, disabled = false, labelPosition = "default", labelJustify, variant = "primary", spaceBetween = false, readOnly, ...rest }) => {
-	return /* @__PURE__ */ jsxs(StyledSpaceAroundWrap, {
-		spaceBetween,
-		spaceAround,
-		labelPosition,
-		labelJustify,
-		children: [label && /* @__PURE__ */ jsx(StyledFieldLabel, {
-			htmlFor: name,
-			labelPosition,
-			children: label
-		}), /* @__PURE__ */ jsxs(Wrapper, {
-			"data-appearance": variant,
-			children: [/* @__PURE__ */ jsx(HiddenInput, {
-				id: name,
-				name,
-				type: "checkbox",
-				checked,
-				$enabled: !disabled,
-				defaultChecked,
-				onChange: !disabled ? onChange : void 0,
-				disabled,
-				"data-cy": name ? `${name}Switch` : void 0,
-				"data-testid": name ? `toggle-${name}` : void 0,
-				readOnly
-			}), /* @__PURE__ */ jsx(StyledToggle, {
-				active: !!checked,
-				disabled,
-				...rest,
-				children: /* @__PURE__ */ jsx(StyledDot, {})
-			})]
-		})]
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { Toggle as default };
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldLabel } from '../Label';
+import { SpaceAroundWrap } from '../SpaceAround';
+import styled, { css } from '@xstyled/styled-components';
+var isHorizontal = function (position) { return position && ['left', 'right'].includes(position); };
+var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"])), function (_a) {
+    var labelPosition = _a.labelPosition;
+    return labelPosition === 'left' ? 'row' : labelPosition === 'right' ? 'row-reverse' : 'column';
+}, function (_a) {
+    var labelPosition = _a.labelPosition, labelJustify = _a.labelJustify;
+    return labelPosition === 'right' ? 'flex-end' : labelJustify === 'between' ? 'space-between' : 'flex-start';
+}, function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (isHorizontal(labelPosition) ? 'margin-top: 1rem' : '');
+});
+var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  ", "\n  ", "\n"], ["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (_a) {
+    var labelPosition = _a.labelPosition;
+    return (isHorizontal(labelPosition) ? 'margin-bottom: 0;' : '');
+}, function (_a) {
+    var labelPosition = _a.labelPosition;
+    return labelPosition === 'left' ? 'margin-right: 1rem;' : labelPosition === 'right' ? 'margin-left: 1rem;' : '';
+});
+var disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.4;\n"], ["\n  opacity: 0.4;\n"])));
+var StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"], ["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"])), function (props) { return (props.disabled ? disabledStyles : ''); });
+var StyledDot = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"], ["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"])));
+var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"], ["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"])), function (_a) {
+    var $enabled = _a.$enabled;
+    return ($enabled ? 'cursor: pointer;' : '');
+});
+var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
+var Toggle = function (_a) {
+    var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, labelJustify = _a.labelJustify, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "labelJustify", "variant", "spaceBetween", "readOnly"]);
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, labelJustify: labelJustify, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { id: name, name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": name ? "".concat(name, "Switch") : undefined, "data-testid": name ? "toggle-".concat(name) : undefined, readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
+};
+export default Toggle;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Toggle/index.d.ts

@@ -1,3 +1,4 @@
-import Toggle from './Toggle';
+import { default as Toggle } from './Toggle';
+
 export { Toggle };
 export default Toggle;

package/ui/Elements/Toggle/index.js

@@ -1,5 +1,3 @@
-import Toggle from "./Toggle.js";
-//#region packages/ui/Elements/Toggle/index.ts
-var Toggle_default = Toggle;
-//#endregion
-export { Toggle, Toggle_default as default };
+import Toggle from './Toggle';
+export { Toggle };
+export default Toggle;

package/ui/Elements/Toggle/stories/Toggle.stories.d.ts

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../types").Props>;
+    component: import('react').FC<import('../types').Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Toggle/stories/Toggle.stories.js

@@ -0,0 +1,64 @@
+import Toggle from '../Toggle';
+var meta = {
+    title: 'Elements/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        onChange: console.log
+    }
+};
+export var Checked = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        onChange: console.log
+    }
+};
+export var Disabled = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        disabled: true
+    }
+};
+export var LabelRight = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'right'
+    }
+};
+export var LabelLeft = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'left'
+    }
+};
+export var LabelJustifyBetween = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        labelPosition: 'left',
+        labelJustify: 'between'
+    }
+};
+export var VariantGrid = {
+    args: {
+        name: 'name',
+        label: 'Label',
+        checked: true,
+        variant: 'grid'
+    }
+};

package/ui/Elements/Toggle/types.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEvent } from 'react';
+
 type SpaceAroundProps = {
     marginTop?: number;
     marginRight?: number;