@mailstep/design-system 0.6.77 → 0.6.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.77",
+  "version": "0.6.78",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ closeToast, title, text, type, autoClose }: import("../Toast").CustomToastProps) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Info: Story;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Warning: Story;

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.js

@@ -6,7 +6,7 @@ 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: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\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) {

package/ui/index.es.js

@@ -52785,7 +52785,7 @@ const WSe = /* @__PURE__ */ Ra(jSe), HSe = ct`
   justify-content: space-between;
 `, TEe = $.span`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   margin-left: 15px;
 
   svg {

package/ui/index.umd.js

@@ -4273,7 +4273,7 @@ ${q.current.stack}
   justify-content: space-between;
 `,WIe=$.span`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   margin-left: 15px;
 
   svg {