@mailstep/design-system 0.8.26 → 0.8.27-beta.1

package/ui/Elements/Spinner/styles.js

@@ -0,0 +1,36 @@
+import styled$1, { keyframes, th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Spinner/styles.ts
+const KeyframesCircularDash = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0px;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -125px;
+  }
+`;
+const KeyframesCircularRotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Svg = styled$1.svg`
+  width: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
+  height: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
+  animation: ${KeyframesCircularRotate} 1.4s linear infinite;
+`;
+const Circle = styled$1.circle`
+  animation: ${KeyframesCircularDash} 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px, 200px;
+  stroke-dashoffset: 0px;
+  stroke: ${({ color }) => color ? th.color(color) : th.color("blue2")};
+`;
+//#endregion
+export { Circle, Svg };

package/ui/Elements/Spinner/types.js

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

package/ui/Elements/Table/Table.d.ts

@@ -1,6 +1,6 @@
-export declare const Table: import('styled-components').StyledComponent<"table", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Tr: import('styled-components').StyledComponent<"tr", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Td: import('styled-components').StyledComponent<"td", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Th: import('styled-components').StyledComponent<"th", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Tbody: import('styled-components').StyledComponent<"tbody", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const Thead: import('styled-components').StyledComponent<"thead", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Table: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Tr: import("styled-components").StyledComponent<"tr", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Td: import("styled-components").StyledComponent<"td", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Th: import("styled-components").StyledComponent<"th", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Tbody: import("styled-components").StyledComponent<"tbody", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Thead: import("styled-components").StyledComponent<"thead", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;

package/ui/Elements/Table/Table.js

@@ -0,0 +1,45 @@
+import styled$1, { system } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Table/Table.tsx
+const Table = styled$1.table`
+  ${system};
+  width: 100%;
+  border-collapse: collapse;
+  color: blue2;
+`;
+const Tr = styled$1.tr`
+  ${system};
+  &:nth-child(even) {
+    background-color: bgLightGray;
+  }
+`;
+const Td = styled$1.td`
+  ${system};
+`;
+const Th = styled$1.th`
+  ${system};
+  font-weight: semiBold;
+  text-align: left;
+  border-top: 1px solid;
+  border-top-color: lightGray6;
+
+  &:not(:last-child) {
+    border-right: 1px dashed;
+    border-right-color: lightGray6;
+  }
+`;
+const Tbody = styled$1.tbody`
+  ${system};
+  td {
+    padding: 9px 4px;
+  }
+`;
+const Thead = styled$1.thead`
+  ${system};
+  background-color: bgLightGray1;
+
+  th {
+    padding: 10px 8px;
+  }
+`;
+//#endregion
+export { Table, Tbody, Td, Th, Thead, Tr };

package/ui/Elements/Table/index.js

@@ -0,0 +1,2 @@
+import { Table, Tbody, Td, Th, Thead, Tr } from "./Table.js";
+export { Table, Tbody, Td, Th, Thead, Tr };

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: import('styled-components').StyledComponent<"table", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+    component: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Tag/Tag.d.ts

@@ -1,4 +1,3 @@
-import { Props } from './types';
-
-declare const Tag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, Props, never>;
+import type { Props } from './types';
+declare const Tag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, Props, never>;
 export default Tag;

package/ui/Elements/Tag/Tag.js

@@ -0,0 +1,52 @@
+import styled$1, { th } from "@xstyled/styled-components";
+//#region packages/ui/Elements/Tag/Tag.tsx
+const fontSizeMap = {
+	small: "14px",
+	medium: "16px",
+	big: "20px"
+};
+const paddingMap = {
+	small: "2px 8px",
+	medium: "7px 10px",
+	big: "12px 12px"
+};
+const borderRadiusMap = {
+	small: "6px",
+	medium: "20px",
+	big: "20px"
+};
+const getTextColor = (isNotSelected, textColor) => {
+	if (textColor) return th.color(textColor);
+	return isNotSelected ? th.color("blue2") : "white";
+};
+const getBgColor = (color) => {
+	return color ? th.color(color) : "rgba(157, 163, 169, 0.2)";
+};
+const Tag = styled$1.div`
+  background-color: ${({ color }) => getBgColor(color)};
+  margin-right: ${({ marginRight }) => marginRight || "10px"};
+  color: ${({ isNotSelected, textColor }) => getTextColor(isNotSelected, textColor)};
+  width: fit-content;
+  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  text-align: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  ${({ size }) => `border-radius: ${borderRadiusMap[size || "medium"]}`};
+  ${({ size }) => `font-size: ${fontSizeMap[size || "medium"]}`};
+  ${({ size }) => `padding: ${paddingMap[size || "medium"]}`};
+  ${({ border }) => border && "border: 1px solid rgba(0, 0, 0, 0.65);"};
+  ${({ opacity }) => opacity && "opacity: 0.7"};
+  ${({ pointer }) => pointer && "cursor: pointer;"};
+  ${({ hover }) => hover && "&: hover { opacity: 0.7}"};
+
+  & span {
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+}
+`;
+//#endregion
+export { Tag as default };

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

@@ -1,5 +1,4 @@
-import { default as Tag } from './Tag';
-
+import Tag from './Tag';
 export { palettes } from './palettes';
 export { type Palette } from './types';
 export default Tag;

package/ui/Elements/Tag/index.js

@@ -0,0 +1,6 @@
+import Tag from "./Tag.js";
+import { palettes } from "./palettes.js";
+//#region packages/ui/Elements/Tag/index.ts
+var Tag_default = Tag;
+//#endregion
+export { Tag_default as default, palettes };

package/ui/Elements/Tag/palettes.d.ts

@@ -1,5 +1,4 @@
-import { Palette, PaletteNames } from './types';
-
+import type { Palette, PaletteNames } from './types';
 /**
  * [string, string]: [background, text]
  */

package/ui/Elements/Tag/palettes.js

@@ -0,0 +1,52 @@
+//#region packages/ui/Elements/Tag/palettes.ts
+/**
+* [string, string]: [background, text]
+*/
+const palettes = {
+	greenWhite: {
+		color: "green60",
+		textColor: "white"
+	},
+	greenGreen: {
+		color: "green30",
+		textColor: "green80"
+	},
+	blueBlue: {
+		color: "blue20",
+		textColor: "blue80"
+	},
+	magentaWhite: {
+		color: "magenta60",
+		textColor: "white"
+	},
+	magentaMagenta: {
+		color: "magenta20",
+		textColor: "magenta80"
+	},
+	tealTeal: {
+		color: "teal20",
+		textColor: "teal90"
+	},
+	orangeOrange: {
+		color: "orange20",
+		textColor: "orange80"
+	},
+	grayGray: {
+		color: "neutral20",
+		textColor: "typoPrimary"
+	},
+	redWhite: {
+		color: "red1",
+		textColor: "white"
+	},
+	redRed: {
+		color: "red30",
+		textColor: "red1"
+	},
+	purplePurple: {
+		color: "purple20",
+		textColor: "purple80"
+	}
+};
+//#endregion
+export { palettes };

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

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

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -0,0 +1,19 @@
+import Tag from "../../Tag.js";
+import { palettes } from "../../palettes.js";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Tag/stories/components/predefinedTags.tsx
+const PredefinedTags = () => {
+	return /* @__PURE__ */ jsx(x.div, {
+		display: "flex",
+		flexWrap: "wrap",
+		fontFamily: "monospace",
+		children: Object.keys(palettes).map((paletteName) => /* @__PURE__ */ jsx(Tag, {
+			color: palettes[paletteName].color,
+			textColor: palettes[paletteName].textColor,
+			children: paletteName
+		}, paletteName))
+	});
+};
+//#endregion
+export { PredefinedTags as default };

package/ui/Elements/Tag/types.js

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

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

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

package/ui/Elements/Text/Text.js

@@ -0,0 +1,10 @@
+import "react";
+import { x } from "@xstyled/styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Elements/Text/Text.tsx
+const Text = ({ as = "span", ...props }) => /* @__PURE__ */ jsx(x.div, {
+	as,
+	...props
+});
+//#endregion
+export { Text as default };

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

@@ -1,4 +1,3 @@
-import { default as Text } from './Text';
-
+import Text from './Text';
 export type { TextProps } from './types';
 export { Text };

package/ui/Elements/Text/index.js

@@ -0,0 +1,2 @@
+import Text from "./Text.js";
+export { Text };

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

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

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

@@ -1,6 +1,5 @@
 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/Text/types.js

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

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

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

package/ui/Elements/Toast/Toast.js

@@ -0,0 +1,36 @@
+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" })
+		}) })] })]
+	});
+};
+//#endregion
+export { Toast as default };

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

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
+import 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

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

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

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

package/ui/Elements/Toast/index.js

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

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

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { 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/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, {
+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;
     fill: string;
 }, never>;

package/ui/Elements/Toast/styles.js

@@ -0,0 +1,76 @@
+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 };

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

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