@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Elements/Button/Button.js

@@ -1,154 +1,44 @@
-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];
-        }
-    }
-    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];
-    }
-    return target;
-}
+import { Spinner } from "../Spinner/Spinner.js";
+import "../Spinner/index.js";
+import { LoadingIconWrapper, StyledButton, StyledIcon, StyledWrapper } from "./styles.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Spinner } from "../Spinner";
-import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from "./styles";
-var Button = function Button(_0) {
-    var isLoading = _0.isLoading, loadingText = _0.loadingText, icon = _0.icon, iconLeft = _0.iconLeft, iconRight = _0.iconRight, iconFillColor = _0.iconFillColor, iconStrokeColor = _0.iconStrokeColor, _0_variant = _0.variant, variant = _0_variant === void 0 ? "default" : _0_variant, _0_appearance = _0.appearance, appearance = _0_appearance === void 0 ? "primary" : _0_appearance, _0_disabled = _0.disabled, disabled = _0_disabled === void 0 ? false : _0_disabled, _0_fullWidth = _0.fullWidth, fullWidth = _0_fullWidth === void 0 ? false : _0_fullWidth, height = _0.height, buttonRef = _0.buttonRef, onClick = _0.onClick, props = _object_without_properties(_0, [
-        "isLoading",
-        "loadingText",
-        "icon",
-        "iconLeft",
-        "iconRight",
-        "iconFillColor",
-        "iconStrokeColor",
-        "variant",
-        "appearance",
-        "disabled",
-        "fullWidth",
-        "height",
-        "buttonRef",
-        "onClick"
-    ]);
-    return /* @__PURE__ */ jsx(StyledButton, _object_spread_props(_object_spread({}, props), {
-        onClick: !disabled && !isLoading ? onClick : void 0,
-        "data-variant": variant,
-        "data-appearance": appearance,
-        disabled: disabled,
-        iconPadding: !!icon && !props.children,
-        ref: buttonRef,
-        fullWidth: fullWidth,
-        height: height,
-        children: /* @__PURE__ */ jsxs(StyledWrapper, {
-            children: [
-                iconLeft && (typeof iconLeft === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
-                    $addMarginRight: !!iconLeft,
-                    icon: iconLeft,
-                    fill: iconFillColor,
-                    stroke: iconStrokeColor
-                }) : iconLeft),
-                isLoading && /* @__PURE__ */ jsxs(Fragment, {
-                    children: [
-                        /* @__PURE__ */ jsx(LoadingIconWrapper, {
-                            $addMarginRight: !!loadingText || !!props.children,
-                            children: /* @__PURE__ */ jsx(Spinner, {
-                                variant: "sm",
-                                appearance: "processing"
-                            })
-                        }),
-                        loadingText
-                    ]
-                }),
-                props.children || icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
-                    icon: icon,
-                    fill: iconFillColor,
-                    stroke: iconStrokeColor
-                }) : icon),
-                iconRight && (typeof iconRight === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
-                    $addMarginLeft: !!iconRight,
-                    icon: iconRight,
-                    fill: iconFillColor,
-                    stroke: iconStrokeColor
-                }) : iconRight)
-            ]
-        })
-    }));
-};
-var Button_default = Button;
-export { Button_default as default };
+//#region packages/ui/Elements/Button/Button.tsx
+const Button = ({ isLoading, loadingText, icon, iconLeft, iconRight, iconFillColor, iconStrokeColor, variant = "default", appearance = "primary", disabled = false, fullWidth = false, height, buttonRef, onClick, ...props }) => /* @__PURE__ */ jsx(StyledButton, {
+	...props,
+	onClick: !disabled && !isLoading ? onClick : void 0,
+	"data-variant": variant,
+	"data-appearance": appearance,
+	disabled,
+	iconPadding: !!icon && !props.children,
+	ref: buttonRef,
+	fullWidth,
+	height,
+	children: /* @__PURE__ */ jsxs(StyledWrapper, { children: [
+		iconLeft && (typeof iconLeft === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
+			$addMarginRight: !!iconLeft,
+			icon: iconLeft,
+			fill: iconFillColor,
+			stroke: iconStrokeColor
+		}) : iconLeft),
+		isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoadingIconWrapper, {
+			$addMarginRight: !!loadingText || !!props.children,
+			children: /* @__PURE__ */ jsx(Spinner, {
+				variant: "sm",
+				appearance: "processing"
+			})
+		}), loadingText] }),
+		props.children || icon && (typeof icon === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
+			icon,
+			fill: iconFillColor,
+			stroke: iconStrokeColor
+		}) : icon),
+		iconRight && (typeof iconRight === "string" ? /* @__PURE__ */ jsx(StyledIcon, {
+			$addMarginLeft: !!iconRight,
+			icon: iconRight,
+			fill: iconFillColor,
+			stroke: iconStrokeColor
+		}) : iconRight)
+	] })
+});
+//#endregion
+export { Button as default };

package/ui/Elements/Button/index.js

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

package/ui/Elements/Button/styles.js

@@ -1,98 +1,227 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
+import Icon from "../Icon/Icon.js";
+import "../Icon/index.js";
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Button/styles.ts
+const StyledWrapper = styled$1.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const LoadingIconWrapper = styled$1.div`
+  & svg {
+    margin-right: ${({ $addMarginRight }) => $addMarginRight ? "8px" : "0"};
+  }
+`;
+const StyledIcon = styled$1(Icon)`
+  & svg {
+    margin-right: ${({ $addMarginRight }) => $addMarginRight ? "8px" : "0"};
+    margin-left: ${({ $addMarginLeft }) => $addMarginLeft ? "8px" : "0"};
+  }
+`;
+const StyledButton = styled$1.button`
+  width: ${({ fullWidth }) => fullWidth ? "100%" : "initial"};
+  font-weight: semiBold;
+  font-size: 14px;
+  font-family: ${th("fonts.primary")};
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  height: ${({ height }) => height || "38px"};
+  border: none;
+  transition-duration: 0.1s;
+  transition: all 300ms ease-out;
+  gap: 8px;
+  padding: ${({ iconPadding }) => iconPadding ? "9px" : "7px 18px"};
+  opacity: ${({ disabled }) => disabled ? .6 : 1};
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+
+  :focus {
+    outline: none;
+  }
+
+  &[data-variant='default'] {
+    &[data-appearance='primary'] {
+      background-color: red1;
+      color: white;
+
+      :not(:disabled) {
+        @media (hover: hover) {
+          :hover {
+            background-color: red80;
+          }
+        }
+      }
+    }
+
+    &[data-appearance='secondary'] {
+      background-color: neutral20;
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: lightGray7;
+        }
+      }
+    }
+
+    &[data-appearance='tertiary'] {
+      background-color: red20;
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red30;
+        }
+      }
+    }
+  }
+
+  &[data-variant='success'] {
+    background-color: successColor;
+    color: white;
+
+    @media (hover: hover) {
+      :hover {
+        background-color: green70;
+      }
+    }
+  }
+  &[data-variant='outline'] {
+    background-color: white;
+    border: slim;
+    &[data-appearance='primary'] {
+      color: typoPrimary;
+      border-color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: neutral20;
+        }
+      }
+    }
+    &[data-appearance='secondary'] {
+      color: red1;
+      border-color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red20;
+        }
+      }
+    }
+  }
+  &[data-variant='ghost'] {
+    background-color: white;
+    &[data-appearance='primary'] {
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: neutral20;
+        }
+      }
+    }
+    &[data-appearance='secondary'] {
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red20;
+        }
+      }
     }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
+  }
+
+  &[data-variant='link'] {
+    background-color: transparent;
+    height: ${({ height }) => height || "20px"};
+    &[data-appearance='primary'] {
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          color: neutral500;
         }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  & svg {\n    margin-right: ",
-        ";\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  & svg {\n    margin-right: ",
-        ";\n    margin-left: ",
-        ";\n  }\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  width: ",
-        ";\n  font-weight: semiBold;\n  font-size: 14px;\n  font-family: ",
-        ";\n  display: flex;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  height: ",
-        ";\n  border: none;\n  transition-duration: 0.1s;\n  transition: all 300ms ease-out;\n  gap: 8px;\n  padding: ",
-        ";\n  opacity: ",
-        ";\n  cursor: ",
-        ";\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-variant='default'] {\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n\n      :not(:disabled) {\n        @media (hover: hover) {\n          :hover {\n            background-color: red80;\n          }\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n  }\n\n  &[data-variant='success'] {\n    background-color: successColor;\n    color: white;\n\n    @media (hover: hover) {\n      :hover {\n        background-color: green70;\n      }\n    }\n  }\n  &[data-variant='outline'] {\n    background-color: white;\n    border: slim;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      border-color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      border-color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n  &[data-variant='ghost'] {\n    background-color: white;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n\n  &[data-variant='link'] {\n    background-color: transparent;\n    height: ",
-        ";\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          color: red70;\n        }\n      }\n    }\n  }\n\n  &[data-variant='icon'] {\n    width: 38px;\n    height: ",
-        ";\n    gap: 10px;\n\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n\n    &[data-appearance='ghost'] {\n      background-color: transparent;\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n        }\n      }\n    }\n  }\n\n  &[data-variant='floating'] {\n    &[data-appearance='primary'] {\n      width: 56px;\n      height: ",
-        ";\n      background-color: red1;\n      color: white;\n      border-radius: 50%;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { Icon } from "../Icon";
-import styled, { th } from "@xstyled/styled-components";
-var StyledWrapper = styled.span(_templateObject());
-var LoadingIconWrapper = styled.div(_templateObject1(), function(param) {
-    var $addMarginRight = param.$addMarginRight;
-    return $addMarginRight ? "8px" : "0";
-});
-var StyledIcon = styled(Icon)(_templateObject2(), function(param) {
-    var $addMarginRight = param.$addMarginRight;
-    return $addMarginRight ? "8px" : "0";
-}, function(param) {
-    var $addMarginLeft = param.$addMarginLeft;
-    return $addMarginLeft ? "8px" : "0";
-});
-var StyledButton = styled.button(_templateObject3(), function(param) {
-    var fullWidth = param.fullWidth;
-    return fullWidth ? "100%" : "initial";
-}, th("fonts.primary"), function(param) {
-    var height = param.height;
-    return height || "38px";
-}, function(param) {
-    var iconPadding = param.iconPadding;
-    return iconPadding ? "9px" : "7px 18px";
-}, function(param) {
-    var disabled = param.disabled;
-    return disabled ? 0.6 : 1;
-}, function(param) {
-    var disabled = param.disabled;
-    return disabled ? "not-allowed" : "pointer";
-}, function(param) {
-    var height = param.height;
-    return height || "20px";
-}, function(param) {
-    var height = param.height;
-    return height || "38px";
-}, function(param) {
-    var height = param.height;
-    return height || "56px";
-});
+      }
+    }
+    &[data-appearance='secondary'] {
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          color: red70;
+        }
+      }
+    }
+  }
+
+  &[data-variant='icon'] {
+    width: 38px;
+    height: ${({ height }) => height || "38px"};
+    gap: 10px;
+
+    &[data-appearance='primary'] {
+      background-color: red1;
+      color: white;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red70;
+        }
+      }
+    }
+
+    &[data-appearance='secondary'] {
+      background-color: neutral20;
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: lightGray7;
+        }
+      }
+    }
+
+    &[data-appearance='tertiary'] {
+      background-color: red20;
+      color: red1;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red30;
+        }
+      }
+    }
+
+    &[data-appearance='ghost'] {
+      background-color: transparent;
+      color: typoPrimary;
+
+      @media (hover: hover) {
+        :hover {
+          color: neutral500;
+        }
+      }
+    }
+  }
+
+  &[data-variant='floating'] {
+    &[data-appearance='primary'] {
+      width: 56px;
+      height: ${({ height }) => height || "56px"};
+      background-color: red1;
+      color: white;
+      border-radius: 50%;
+
+      @media (hover: hover) {
+        :hover {
+          background-color: red70;
+        }
+      }
+    }
+  }
+`;
+//#endregion
 export { LoadingIconWrapper, StyledButton, StyledIcon, StyledWrapper };

package/ui/Elements/Button/types.js

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

package/ui/Elements/Card/Card.js

@@ -1,15 +1,15 @@
+import { StyledCard } from "./styles.js";
 import { jsx } from "react/jsx-runtime";
-import { StyledCard } from "./styles";
-var Card = function Card(param) {
-    var children = param.children, _param_display = param.display, display = _param_display === void 0 ? "block" : _param_display, bg = param.bg, onClick = param.onClick, maxWidth = param.maxWidth;
-    return /* @__PURE__ */ jsx(StyledCard, {
-        onClick: onClick,
-        bg: bg,
-        display: display,
-        maxWidth: maxWidth,
-        hasOnClick: !!onClick,
-        children: children
-    });
+//#region packages/ui/Elements/Card/Card.tsx
+const Card = ({ children, display = "block", bg, onClick, maxWidth }) => {
+	return /* @__PURE__ */ jsx(StyledCard, {
+		onClick,
+		bg,
+		display,
+		maxWidth,
+		hasOnClick: !!onClick,
+		children
+	});
 };
-var Card_default = Card;
-export { Card_default as default };
+//#endregion
+export { Card as default };

package/ui/Elements/Card/index.js

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

package/ui/Elements/Card/styles.js

@@ -1,50 +1,22 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n      cursor: pointer;\n      &:hover {\n        border-color: ",
-        ";\n      }\n    "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: ",
-        ";\n  padding: 20px;\n  border: 1px solid;\n  background-color: ",
-        ";\n  border-color: ",
-        ";\n  border-radius: 12px;\n  width: 100%;\n\n  ",
-        "\n\n  ",
-        "\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css } from "@xstyled/styled-components";
-import { th } from "@xstyled/styled-components";
-var StyledCard = styled.div(_templateObject1(), function(param) {
-    var display = param.display;
-    return display;
-}, function(param) {
-    var bg = param.bg;
-    return bg ? th.color(bg) : "white";
-}, th.color("lightGray6"), function(param) {
-    var maxWidth = param.maxWidth;
-    return maxWidth && "max-width: ".concat(maxWidth, ";");
-}, function(param) {
-    var hasOnClick = param.hasOnClick;
-    return hasOnClick && css(_templateObject(), th.color("gray1"));
-});
+import styled$1, { css, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Card/styles.ts
+const StyledCard = styled$1.div`
+  display: ${({ display }) => display};
+  padding: 20px;
+  border: 1px solid;
+  background-color: ${({ bg }) => bg ? th.color(bg) : "white"};
+  border-color: ${th.color("lightGray6")};
+  border-radius: 12px;
+  width: 100%;
+
+  ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth};`}
+
+  ${({ hasOnClick }) => hasOnClick && css`
+      cursor: pointer;
+      &:hover {
+        border-color: ${th.color("gray1")};
+      }
+    `}
+`;
+//#endregion
 export { StyledCard };

package/ui/Elements/Card/types.js

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