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

package/ui/Forms/TextArea/styles.d.ts

@@ -1,12 +1,12 @@
-export declare const IconWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledTextArea: import('styled-components').StyledComponent<"textarea", import('@xstyled/system').Theme, {
+export declare const IconWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("@xstyled/system").Theme, {
     $resize?: string;
     $isInvalid?: boolean;
     disabled?: boolean;
 }, never>;
-export declare const TextAreaWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const BorderWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const TextAreaWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const BorderWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     $isInvalid?: boolean;
     disabled?: boolean;
 }, never>;
-export declare const InnerWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const InnerWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Forms/TextArea/styles.js

@@ -0,0 +1,76 @@
+import styled$1, { css } from "@xstyled/styled-components";
+import { system as system$1, th as th$1 } from "/home/linomorfed/Projects/design-system/node_modules/@xstyled/system/dist/index.mjs";
+//#region packages/ui/Forms/TextArea/styles.ts
+const IconWrap = styled$1.div`
+  font-size: 12px;
+  color: ${th$1.color("lightGray5")};
+
+  & svg {
+    margin-top: 2;
+    margin-right: 1;
+  }
+`;
+const StyledTextArea = styled$1.textarea`
+  ${system$1};
+  display: block;
+  width: 100%;
+  font-size: 1;
+  font-family: ${th$1("fonts.primary")};
+  line-height: 0;
+  transition: inputTransition;
+  border: none;
+  font-weight: 800;
+  color: ${({ $isInvalid, disabled }) => $isInvalid ? th$1.color("red1") : disabled ? th$1.color("gray") : th$1.color("typoPrimary")};
+  background-color: transparent;
+  :focus {
+    outline: 0;
+    color: blue2;
+  }
+  ${({ $resize }) => $resize ? css`
+          resize: ${$resize};
+        ` : ""}
+
+  ::placeholder {
+    color: lightGray5;
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;
+const TextAreaWrap = styled$1.div`
+  position: relative;
+`;
+const BorderWrap = styled$1.div`
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  padding-top: 1;
+  padding-bottom: 1;
+  padding-right: 1;
+  padding-left: 12px;
+  border: slim;
+  border-color: ${({ $isInvalid }) => $isInvalid ? th$1.color("red1") : th$1.color("lightGray6")};
+  color: ${({ $isInvalid }) => $isInvalid ? th$1.color("red1") : th$1.color("gray")};
+  background-color: ${({ disabled }) => disabled ? th$1("colors.lightGray1") : "unset"};
+  background-clip: padding-box;
+  border-radius: lg;
+
+  :focus-within {
+    background-color: white;
+    border-color: blue2;
+    color: blue2;
+  }
+
+  :hover {
+    border-color: ${({ disabled }) => disabled ? th$1("colors.lightGray3") : th$1("colors.gray5")};
+  }
+
+  :disabled {
+    background-color: lightGray1;
+  }
+`;
+const InnerWrap = styled$1.div`
+  display: flex;
+  position: relative;
+`;
+//#endregion
+export { BorderWrap, IconWrap, InnerWrap, StyledTextArea, TextAreaWrap };

package/ui/System/Fonts/font.d.js

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

package/ui/System/Fonts/index.js

@@ -0,0 +1,54 @@
+import Inter_Light_mailstep_default from "../../packages/assets/fonts/Inter-Light_mailstep.js";
+import Inter_Regular_mailstep_default from "../../packages/assets/fonts/Inter-Regular_mailstep.js";
+import Inter_Medium_mailstep_default from "../../packages/assets/fonts/Inter-Medium_mailstep.js";
+import Inter_SemiBold_mailstep_default from "../../packages/assets/fonts/Inter-SemiBold_mailstep.js";
+import Inter_Bold_mailstep_default from "../../packages/assets/fonts/Inter-Bold_mailstep.js";
+import { jsx } from "react/jsx-runtime";
+import { Helmet } from "react-helmet";
+//#region packages/ui/System/Fonts/index.tsx
+const Fonts = () => /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("style", {
+	type: "text/css",
+	children: `
+        @font-face {
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 300;
+          font-display: swap;
+          src: url(${Inter_Light_mailstep_default}) format('woff2');
+        }
+
+        @font-face {
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 400;
+          font-display: swap;
+          src: url(${Inter_Regular_mailstep_default}) format('woff2');
+        }
+      
+        @font-face {
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 500;
+          font-display: swap;
+          src: url(${Inter_Medium_mailstep_default}) format('woff2');
+        }
+
+        @font-face {
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 600;
+          font-display: swap;
+          src: url(${Inter_SemiBold_mailstep_default}) format('woff2');
+        }
+      
+        @font-face {
+          font-family: 'Inter';
+          font-style: normal;
+          font-weight: 700;
+          font-display: swap;
+          src: url(${Inter_Bold_mailstep_default}) format('woff2');
+        }
+    `
+}) });
+//#endregion
+export { Fonts as default };

package/ui/ThemeProvider/ThemeProvider.d.js

@@ -0,0 +1 @@
+export { Color, Theme, Themes };

package/ui/ThemeProvider/ThemeProvider.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { Props } from './types';
-
-export declare const LanguageContext: import('react').Context<string>;
+import type { FC } from 'react';
+import type { Props } from './types';
+export declare const LanguageContext: import("react").Context<string>;
 declare const MailstepThemeProvider: FC<Props>;
 export default MailstepThemeProvider;

package/ui/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,17 @@
+import themes from "./themes/index.js";
+import { createContext } from "react";
+import { Preflight, ThemeProvider } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/ThemeProvider/ThemeProvider.tsx
+const LanguageContext = createContext("en");
+const MailstepThemeProvider = ({ children, theme = "default", preflight = true, language = "en" }) => {
+	return /* @__PURE__ */ jsx(LanguageContext.Provider, {
+		value: language,
+		children: /* @__PURE__ */ jsxs(ThemeProvider, {
+			theme: themes[theme],
+			children: [preflight && /* @__PURE__ */ jsx(Preflight, {}), children]
+		})
+	});
+};
+//#endregion
+export { LanguageContext, MailstepThemeProvider as default };

package/ui/ThemeProvider/index.d.js

@@ -0,0 +1 @@
+export { Color, Theme, Themes };

package/ui/ThemeProvider/index.d.ts

@@ -1,6 +1,5 @@
-import { default as ThemeProvider } from './ThemeProvider';
-import { default as themes } from './themes';
-
+import ThemeProvider from './ThemeProvider';
+import themes from './themes';
 export * from './types';
 export { themes };
 export default ThemeProvider;

package/ui/ThemeProvider/index.js

@@ -0,0 +1,6 @@
+import themes from "./themes/index.js";
+import MailstepThemeProvider from "./ThemeProvider.js";
+//#region packages/ui/ThemeProvider/index.ts
+var ThemeProvider_default = MailstepThemeProvider;
+//#endregion
+export { ThemeProvider_default as default, themes };

package/ui/ThemeProvider/themes/default.js

@@ -0,0 +1,186 @@
+//#region packages/ui/ThemeProvider/themes/default.ts
+const defaultTheme = {
+	breakpoints: ["0"],
+	colors: {
+		white: "#FFFFFF",
+		bgLightGray: "#FAFBFC",
+		bgLightGray1: "#F1F5F9",
+		lightGray1: "#F5F7FA",
+		lightGray2: "#EFF3F8",
+		lightGray3: "#D4D8DE",
+		lightGray4: "#B9BFC9",
+		lightGray5: "#A3B3C1",
+		lightGray6: "#D2D8DF",
+		lightGray7: "#E7EBEF",
+		neutral20: "#F1F5F9",
+		neutral300: "#5E6C84",
+		neutral500: "#42526E",
+		gray: "#8594A5",
+		gray1: "#7A90A1",
+		gray2: "#9AA1A7",
+		gray3: "#5F6C76",
+		gray4: "#455665",
+		gray5: "#647483",
+		blue1: "#2C4052",
+		blue2: "#22394E",
+		blue3: "#162C3F",
+		blue4: "#0C1F2F",
+		textPrimary: "#091E42",
+		textTertiary: "#7A869A",
+		typoPrimary: "#22394E",
+		blue10: "#F3F9FF",
+		blue20: "#DCEFFF",
+		blue30: "#BFE0FF",
+		blue40: "#6FADFF",
+		blue50: "#2684FF",
+		blue60: "#0065FF",
+		blue70: "#0052CC",
+		blue80: "#0747A6",
+		blue90: "#1d3557",
+		teal20: "#E6FCFF",
+		teal40: "#a8dadc",
+		teal50: "#1aa1a7",
+		teal60: "#00B1D0",
+		teal70: "#1aa1da",
+		teal80: "#06718C",
+		teal90: "#035361",
+		green10: "#F2FFF5",
+		green20: "#DEFBE6",
+		green30: "#b8ecb8",
+		green50: "#81dd91",
+		green60: "#00A445",
+		green70: "#198038",
+		green80: "#0E6027",
+		green90: "#067164",
+		green: "#13CE62",
+		successColor: "#24A148",
+		darkGreen: "#00A445",
+		orange20: "#FFF3E0",
+		orange30: "#FFE6CC",
+		orange50: "#ff9f43",
+		orange60: "#FF9800",
+		orange80: "#9E4800",
+		yellow10: "#FFFDE8",
+		yellow20: "#FFF9C4",
+		yellow60: "#FFE600",
+		yellow70: "#FFD702",
+		yellow1: "#FFD702",
+		yellow2: "#F2E871",
+		red10: "#FFF6F4",
+		red20: "#FFEBE6",
+		red30: "#FFDAD1",
+		red50: "#ff7c7b",
+		red70: "#CF2013",
+		red1: "#DB2B19",
+		red2: "#E94324",
+		red3: "#991E12",
+		red60: "#DB2B19",
+		red80: "#B71C1C",
+		dangerColor: "#E32C1E",
+		purple20: "#F0EDFF",
+		purple40: "#0072A0",
+		purple50: "#4573B3",
+		purple60: "#6554C0",
+		purple80: "#403294",
+		purple90: "#03235f",
+		magenta10: "#FFF7FB",
+		magenta20: "#FCF1F7",
+		magenta30: "#FFD6E8",
+		magenta40: "#FFAFD2",
+		magenta50: "#FF7EB6",
+		magenta60: "#EE5396",
+		magenta70: "#D12771",
+		magenta80: "#9F1853",
+		magenta90: "#7B1340"
+	},
+	fonts: {
+		primary: "Inter, sans-serif",
+		heading: "Inter, sans-serif"
+	},
+	fontLinks: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"],
+	fontSizes: [
+		"10px",
+		"12px",
+		"14px",
+		"16px",
+		"18px",
+		"21px",
+		"24px",
+		"32px"
+	],
+	lineHeights: [1.7],
+	fontWeights: {
+		light: 300,
+		normal: 400,
+		medium: 500,
+		semiBold: 600,
+		bold: 700
+	},
+	letterSpacings: {
+		default: null,
+		sm: "2px",
+		md: "4px",
+		lg: "8px"
+	},
+	borders: {
+		slim: "1px solid",
+		mediumSlim: "2px solid",
+		medium: "3px solid",
+		mediumThick: "6px solid",
+		thick: "10px solid"
+	},
+	radii: {
+		sm: "2px",
+		md: "4px",
+		ml: "6px",
+		lg: "8px",
+		xl: "16px"
+	},
+	shadows: {
+		boxShadow: "0px 5px 60px rgba(0, 0, 0, 0.1)",
+		dropShadow: "0px 5px 40px rgba(0, 0, 0, 0.1)",
+		inputFocusBoxShadow: "0 3px 10px 0 rgba(0, 0, 0, 0.15)",
+		dropdownMenuShadow: "0 5px 25px rgba(0, 0, 0, 0.1)",
+		tooltipBoxShadow: "0px 2px 20px rgba(0, 0, 0, 0.1)",
+		cardShadow: "0 3px 10px 0 rgba(0, 0, 0, 0.15)",
+		smooth: "0px 4px 25px 0px #0000001a",
+		dialogShadow: "0px 4px 23px 0px rgba(0, 0, 0, 0.08)",
+		headerShadow: "1px 2px 3px #00000029",
+		headerShadowB: "1px 1px 3px #00000029",
+		headerShadowNotifications: "1px 1px 2px #00000029",
+		cornerDialogShadow: "1px 1px 3px 1px #00000029",
+		gridShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.12)",
+		tooltipShadow: "0px 2px 20px 0px rgba(0, 0, 0, 0.10)"
+	},
+	space: [
+		0,
+		4,
+		8,
+		16,
+		24,
+		48,
+		96,
+		144,
+		192,
+		240
+	],
+	transitions: {
+		simpleLong: "all 2s",
+		inputTransition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+	},
+	zIndices: [
+		0,
+		1,
+		2,
+		3,
+		5,
+		30,
+		40,
+		100,
+		200,
+		300,
+		9999
+	]
+};
+//#endregion
+export { defaultTheme as default };

package/ui/ThemeProvider/themes/index.d.ts

@@ -150,7 +150,7 @@ declare const themes: {
         };
         zIndices: number[];
     };
-    light: import('..').Theme;
+    light: import("..").Theme;
     mailwise: {
         screens: {
             _: number;

package/ui/ThemeProvider/themes/index.js

@@ -0,0 +1,11 @@
+import defaultTheme from "./default.js";
+import lightTheme from "./light.js";
+import defaultTheme$1 from "./mailwise.js";
+//#region packages/ui/ThemeProvider/themes/index.ts
+const themes = {
+	default: defaultTheme,
+	light: lightTheme,
+	mailwise: defaultTheme$1
+};
+//#endregion
+export { themes as default };

package/ui/ThemeProvider/themes/light.d.ts

@@ -1,4 +1,3 @@
-import { Theme } from '../types';
-
+import { Theme } from "../types";
 declare const lightTheme: Theme;
 export default lightTheme;

package/ui/ThemeProvider/themes/light.js

@@ -0,0 +1,7 @@
+//#region packages/ui/ThemeProvider/themes/light.ts
+const lightTheme = { colors: {
+	primary: "#219615",
+	warning: "purple"
+} };
+//#endregion
+export { lightTheme as default };

package/ui/ThemeProvider/themes/mailwise.js

@@ -0,0 +1,230 @@
+//#region packages/ui/ThemeProvider/themes/mailwise.ts
+const defaultTheme = {
+	screens: {
+		_: 0,
+		xs: 479,
+		sm: 721,
+		md: 768,
+		lg: 1024,
+		xl: 1280,
+		"2xl": 1536
+	},
+	colors: {
+		white: "#fff",
+		bgLightGray: "#FAFBFC",
+		bgLightGray1: "#F1F5F9",
+		lightGray1: "#F5F7FA",
+		lightGray2: "#EFF3F8",
+		lightGray3: "#D4D8DE",
+		lightGray4: "#B9BFC9",
+		lightGray5: "#A3B3C1",
+		lightGray6: "#D2D8DF",
+		lightGray7: "#E7EBEF",
+		neutral20: "#F1F5F9",
+		gray: "#8594A5",
+		gray1: "#7A90A1",
+		gray2: "#9AA1A7",
+		gray3: "#5F6C76",
+		gray4: "#455665",
+		gray5: "#647483",
+		neutral300: "#5E6C84",
+		blue1: "#2C4052",
+		blue2: "#22394E",
+		blue3: "#162C3F",
+		blue4: "#0C1F2F",
+		textPrimary: "#091E42",
+		typoPrimary: "#22394E",
+		blue10: "#F3F9FF",
+		blue20: "#dcf2ff",
+		blue60: "#0065FF",
+		blue70: "#0052CC",
+		blue80: "#0747A6",
+		blue90: "#1d3557",
+		teal20: "#E6FCFF",
+		teal40: "#a8dadc",
+		teal50: "#1aa1a7",
+		teal60: "#00B1D0",
+		teal70: "#1aa1da",
+		teal80: "#06718C",
+		teal90: "#035361",
+		green10: "#F2FFF5",
+		green20: "#DEFBE6",
+		green30: "#b8ecb8",
+		green50: "#81dd91",
+		green60: "#00A445",
+		green70: "#06d6a0",
+		green80: "#0E6027",
+		green90: "#067164",
+		green: "#13CE62",
+		successColor: "#24A148",
+		darkGreen: "#00A445",
+		orange20: "#FFF3E0",
+		orange30: "#FFE6CC",
+		orange50: "#ff9f43",
+		orange60: "#FF9800",
+		orange80: "#9E4800",
+		yellow10: "#FFFDE8",
+		yellow20: "#FFF9C4",
+		yellow60: "#FFE600",
+		yellow70: "#FFD702",
+		yellow1: "#FFD702",
+		yellow2: "#F2E871",
+		red10: "#FFF6F4",
+		red20: "#FFEBE6",
+		red30: "#FFDAD1",
+		red50: "#ff7c7b",
+		red1: "#DB2B19",
+		red2: "#E94324",
+		red3: "#991E12",
+		red60: "#DB2B19",
+		red80: "#B71C1C",
+		dangerColor: "#E32C1E",
+		purple20: "#F0EDFF",
+		purple40: "#0072A0",
+		purple50: "#4573B3",
+		purple60: "#6554C0",
+		purple80: "#403294",
+		purple90: "#03235f",
+		magenta20: "#FCF1F7",
+		magenta60: "#EE5396",
+		magenta80: "#9F1853",
+		magenta90: "#872e8b",
+		primary: "#626262",
+		black: "#333333",
+		error: "#ea5455",
+		secondary: "#E15B63"
+	},
+	fonts: {
+		primary: "Inter, sans-serif",
+		heading: "Inter, sans-serif"
+	},
+	fontSizes: [
+		"0rem",
+		"0.87rem",
+		"1rem",
+		"1.25rem",
+		"1.5rem",
+		"1.8rem",
+		"2.0rem",
+		"2.4rem",
+		"2.8rem",
+		"3.5rem",
+		"4rem"
+	],
+	lineHeights: {
+		none: 1.2,
+		tight: 1.2,
+		snug: 1.2,
+		normal: 1.2,
+		relaxed: 1.2,
+		loose: 1.2,
+		3: "1.2",
+		4: "1.2",
+		5: "1.2",
+		6: "1.2",
+		7: "1.2",
+		8: "1.2",
+		9: "1.2",
+		10: "1.2"
+	},
+	fontWeights: {
+		normal: 400,
+		medium: 500,
+		semiBold: 600,
+		bold: 700
+	},
+	letterSpacings: {
+		tighter: "2",
+		tight: "2",
+		normal: "4",
+		wide: "8",
+		wider: "8",
+		widest: "8"
+	},
+	borders: {
+		slim: "1px solid",
+		mediumSlim: "2px solid",
+		medium: "3px solid",
+		mediumThick: "6px solid",
+		thick: "10px solid"
+	},
+	radii: {
+		sm: "2px",
+		md: "4px",
+		ml: "6px",
+		lg: "8px",
+		xl: "16px"
+	},
+	shadows: {
+		boxShadow: "0px 5px 60px rgba(0, 0, 0, 0.1)",
+		dropShadow: "0px 5px 40px rgba(0, 0, 0, 0.1)",
+		inputFocusBoxShadow: "0 3px 10px 0 rgba(0, 0, 0, 0.15)",
+		dropdownMenuShadow: "0 5px 25px rgba(0, 0, 0, 0.1)",
+		tooltipBoxShadow: "0px 2px 20px rgba(0, 0, 0, 0.1)",
+		cardShadow: "0 3px 10px 0 rgba(0, 0, 0, 0.15)",
+		smooth: "0px 4px 25px 0px #0000001a",
+		dialogShadow: "0px 4px 23px 0px rgba(0, 0, 0, 0.08)",
+		tooltipShadow: "0px 1px 4px 0 #B1B8C3",
+		headerShadow: "1px 2px 3px #00000029",
+		headerShadowB: "1px 1px 3px #00000029",
+		headerShadowNotifications: "1px 1px 2px #00000029",
+		gridShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.12)",
+		cornerDialogShadow: "1px 1px 3px 1px #00000029"
+	},
+	space: {
+		px: "1px",
+		0: "0",
+		.5: "0.125rem",
+		1: "0.25rem",
+		1.5: "0.375rem",
+		2: "0.5rem",
+		2.5: "0.625rem",
+		3: "0.75rem",
+		3.5: "0.875rem",
+		4: "1rem",
+		5: "1.25rem",
+		6: "1.5rem",
+		7: "1.75rem",
+		8: "2rem",
+		9: "2.25rem",
+		10: "2.5rem",
+		11: "2.75rem",
+		12: "3rem",
+		14: "3.5rem",
+		16: "4rem",
+		20: "5rem",
+		24: "6rem",
+		28: "7rem",
+		32: "8rem",
+		36: "9rem",
+		40: "10rem",
+		44: "11rem",
+		48: "12rem",
+		52: "13rem",
+		56: "14rem",
+		60: "15rem",
+		64: "16rem",
+		72: "18rem",
+		80: "20rem",
+		96: "24rem"
+	},
+	transitions: {
+		simpleLong: "all 2s",
+		inputTransition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"
+	},
+	zIndices: [
+		0,
+		1,
+		2,
+		3,
+		5,
+		30,
+		40,
+		100,
+		200,
+		300,
+		9999
+	]
+};
+//#endregion
+export { defaultTheme as default };

package/ui/ThemeProvider/types.d.ts

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import type { ReactNode } from 'react';
 export type Color = Record<string, string>;
 export type Theme = {
     breakpoints?: {

package/ui/ThemeProvider/types.js

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

package/ui/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };