@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/Toast/styles.js

@@ -1,106 +1,76 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+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)
     }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ",
-        ";\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ",
-        ";\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: space-between;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n    to {\n       transform: scaleX(0)\n    }\n"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css, keyframes, th } from "@xstyled/styled-components";
-var Title = styled.span(_templateObject(), th("colors.blue2"));
-var Text = styled.span(_templateObject1(), th("colors.gray1"));
-var ContentWrapper = styled.div(_templateObject2());
-var CloseWrapper = styled.span(_templateObject3());
-var timerAnimation = keyframes(_templateObject4());
-var after = function after(autoClose) {
-    return css(_templateObject5(), timerAnimation, autoClose, th.radius("lg"), th.color("lightGray5"));
-};
-var Container = styled.div(_templateObject6(), th.radius("lg"), th.shadow("cornerDialogShadow"), "(max-width: 576px)", function(param) {
-    var autoClose = param.autoClose;
-    return autoClose && "bottom: 8px";
-}, th.radius("lg"), function(param) {
-    var fill = param.fill;
-    return th.color(fill);
-}, function(param) {
-    var autoClose = param.autoClose;
-    return autoClose && after(autoClose);
-});
+`;
+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 };

package/ui/Elements/Toggle/Toggle.js

@@ -1,262 +1,124 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys, key, i;
-    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
-        sourceKeys = Reflect.ownKeys(Object(source));
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-        return target;
-    }
-    target = _object_without_properties_loose(source, excluded);
-    if (Object.getOwnPropertySymbols) {
-        sourceKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
+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;
     }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
+  }
+`;
+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;
     }
-    return target;
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+  }
+  &[data-appearance='grid'] {
+    width: 28px;
+    height: 16px;
+    ${StyledDot} {
+      height: 12px;
     }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: ",
-        ";\n  justify-content: ",
-        ";\n  ",
-        "\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  cursor: pointer;\n  ",
-        "\n  ",
-        "\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  opacity: 0.4;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FieldLabel } from "../Label";
-import { SpaceAroundWrap } from "../SpaceAround";
-import styled, { css } from "@xstyled/styled-components";
-var isHorizontal = function isHorizontal(position) {
-    return position && [
-        "left",
-        "right"
-    ].includes(position);
-};
-var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(_templateObject(), function(param) {
-    var labelPosition = param.labelPosition;
-    return labelPosition === "left" ? "row" : labelPosition === "right" ? "row-reverse" : "column";
-}, function(param) {
-    var labelPosition = param.labelPosition, labelJustify = param.labelJustify;
-    return labelPosition === "right" ? "flex-end" : labelJustify === "between" ? "space-between" : "flex-start";
-}, function(param) {
-    var labelPosition = param.labelPosition;
-    return isHorizontal(labelPosition) ? "margin-top: 1rem" : "";
-});
-var StyledFieldLabel = styled(FieldLabel)(_templateObject1(), function(param) {
-    var labelPosition = param.labelPosition;
-    return isHorizontal(labelPosition) ? "margin-bottom: 0;" : "";
-}, function(param) {
-    var labelPosition = param.labelPosition;
-    return labelPosition === "left" ? "margin-right: 1rem;" : labelPosition === "right" ? "margin-left: 1rem;" : "";
-});
-var disabledStyles = css(_templateObject2());
-var StyledToggle = styled.div(_templateObject3(), function(props) {
-    return props.disabled ? disabledStyles : "";
-});
-var StyledDot = styled.span(_templateObject4());
-var HiddenInput = styled.input(_templateObject5(), function(param) {
-    var $enabled = param.$enabled;
-    return $enabled ? "cursor: pointer;" : "";
-});
-var Wrapper = styled.div(_templateObject6(), StyledDot, StyledDot);
-var Toggle = function Toggle(_0) {
-    var onChange = _0.onChange, label = _0.label, name = _0.name, checked = _0.checked, defaultChecked = _0.defaultChecked, _0_spaceAround = _0.spaceAround, spaceAround = _0_spaceAround === void 0 ? false : _0_spaceAround, _0_disabled = _0.disabled, disabled = _0_disabled === void 0 ? false : _0_disabled, _0_labelPosition = _0.labelPosition, labelPosition = _0_labelPosition === void 0 ? "default" : _0_labelPosition, labelJustify = _0.labelJustify, _0_variant = _0.variant, variant = _0_variant === void 0 ? "primary" : _0_variant, _0_spaceBetween = _0.spaceBetween, spaceBetween = _0_spaceBetween === void 0 ? false : _0_spaceBetween, readOnly = _0.readOnly, rest = _object_without_properties(_0, [
-        "onChange",
-        "label",
-        "name",
-        "checked",
-        "defaultChecked",
-        "spaceAround",
-        "disabled",
-        "labelPosition",
-        "labelJustify",
-        "variant",
-        "spaceBetween",
-        "readOnly"
-    ]);
-    return /* @__PURE__ */ jsxs(StyledSpaceAroundWrap, {
-        spaceBetween: spaceBetween,
-        spaceAround: spaceAround,
-        labelPosition: labelPosition,
-        labelJustify: labelJustify,
-        children: [
-            label && /* @__PURE__ */ jsx(StyledFieldLabel, {
-                htmlFor: name,
-                labelPosition: labelPosition,
-                children: label
-            }),
-            /* @__PURE__ */ jsxs(Wrapper, {
-                "data-appearance": variant,
-                children: [
-                    /* @__PURE__ */ jsx(HiddenInput, {
-                        id: name,
-                        name: name,
-                        type: "checkbox",
-                        checked: checked,
-                        $enabled: !disabled,
-                        defaultChecked: defaultChecked,
-                        onChange: !disabled ? onChange : void 0,
-                        disabled: disabled,
-                        "data-cy": name ? "".concat(name, "Switch") : void 0,
-                        "data-testid": name ? "toggle-".concat(name) : void 0,
-                        readOnly: readOnly
-                    }),
-                    /* @__PURE__ */ jsx(StyledToggle, _object_spread_props(_object_spread({
-                        active: !!checked,
-                        disabled: disabled
-                    }, rest), {
-                        children: /* @__PURE__ */ jsx(StyledDot, {})
-                    }))
-                ]
-            })
-        ]
-    });
+  }
+`;
+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 Toggle_default = Toggle;
-export { Toggle_default as default };
+//#endregion
+export { Toggle as default };

package/ui/Elements/Toggle/index.js

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

package/ui/Elements/Toggle/types.js

@@ -0,0 +1 @@
+export {};