@mailstep/design-system 0.7.56 → 0.7.58-beta.0

package/package.json

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

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

@@ -1,2 +1,7 @@
 import { type FC } from 'react';
-export declare const CheckedCircle: FC;
+type CheckedCircleProps = {
+    checked?: boolean;
+    color?: string;
+};
+export declare const CheckedCircle: FC<CheckedCircleProps>;
+export {};

package/ui/Elements/CheckedCircle/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Icon from '../Icon';
 import { CheckedCircleContainer } from './styles';
-export var CheckedCircle = function () {
-    return (_jsx(CheckedCircleContainer, { children: _jsx(Icon, { icon: "check", size: "12px" }) }));
+export var CheckedCircle = function (_a) {
+    var _b = _a.checked, checked = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'red1' : _c;
+    return _jsx(CheckedCircleContainer, { color: color, children: checked && _jsx(Icon, { icon: "check", size: "12px" }) });
 };

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.d.ts

@@ -2,10 +2,16 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC;
+    component: import("react").FC<{
+        checked?: boolean | undefined;
+        color?: string | undefined;
+    }>;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Checked: Story;
+export declare const CheckedGreen: Story;
+export declare const Unchecked: Story;

package/ui/Elements/CheckedCircle/storries/CheckedCircle.stories.js

@@ -9,3 +9,19 @@ export default meta;
 export var Default = {
     args: {}
 };
+export var Checked = {
+    args: {
+        checked: true
+    }
+};
+export var CheckedGreen = {
+    args: {
+        checked: true,
+        color: 'green60'
+    }
+};
+export var Unchecked = {
+    args: {
+        checked: false
+    }
+};

package/ui/Elements/CheckedCircle/styles.d.ts

@@ -1 +1,3 @@
-export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    color: string;
+}, never>;

package/ui/Elements/CheckedCircle/styles.js

@@ -3,5 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])), th.color('red1'), th.color('red1'));
+export var CheckedCircleContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"], ["\n  border-radius: 50%;\n  border: 8px solid ", ";\n  color: ", ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"])), function (_a) {
+    var color = _a.color;
+    return th.color(color);
+}, function (_a) {
+    var color = _a.color;
+    return th.color(color);
+});
 var templateObject_1;

package/ui/Elements/Tag/palletes.js

@@ -3,8 +3,8 @@
  */
 export var palletes = {
     greenWhite: { color: 'green60', textColor: 'white' },
-    greenGreen: { color: 'green60', textColor: 'white' },
-    blueBlue: { color: 'green30', textColor: 'green90' },
+    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' },

package/ui/index.es.js

@@ -14031,12 +14031,12 @@ const Hse = _.div`
     textColor: "white"
   },
   greenGreen: {
-    color: "green60",
-    textColor: "white"
+    color: "green30",
+    textColor: "green80"
   },
   blueBlue: {
-    color: "green30",
-    textColor: "green90"
+    color: "blue20",
+    textColor: "blue80"
   },
   magentaWhite: {
     color: "magenta60",

package/ui/index.umd.js

@@ -1386,7 +1386,7 @@ Message: ${e}`),e}}const Va=e=>typeof e=="string",zg=e=>typeof e=="function",nO=
     }
   }
 }
-`,qA={greenWhite:{color:"green60",textColor:"white"},greenGreen:{color:"green60",textColor:"white"},blueBlue:{color:"green30",textColor:"green90"},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"}},Gg=({as:e="span",...t})=>p.jsx(Re.div,{as:e,...t}),Ts=({as:e="p",fontFamily:t="primary",fontSize:n="10px",variant:r,...i})=>p.jsx(Gg,{as:e,fontFamily:t,fontSize:n,fontWeight:r,...i}),Ll=({fontFamily:e="heading",mb:t=2,mt:n=2,...r})=>p.jsx(Ts,{fontFamily:e,mt:n,mb:t,...r}),qle=e=>p.jsx(Ts,{fontSize:"18px",...e}),cO=e=>p.jsx(Ts,{fontSize:"16px",...e}),_g=e=>p.jsx(Ts,{fontSize:"14px",...e}),Zg=e=>p.jsx(Ts,{fontSize:"12px",...e}),uO=e=>p.jsx(Ts,{fontSize:"10px",...e}),$le=e=>p.jsx(Ll,{fontSize:"32px",as:"h1",...e}),dO=e=>p.jsx(Ll,{fontSize:"24px",as:"h2",...e}),ece=e=>p.jsx(Ll,{fontSize:"21px",as:"h3",...e}),tce=e=>p.jsx(Ll,{fontSize:"18px",as:"h4",...e}),fO=e=>p.jsx(Ll,{fontSize:"16px",as:"h5",...e}),Dl=e=>p.jsx(Ll,{fontSize:"14px",as:"h6",...e}),AO=e=>p.jsx(Ll,{fontSize:"12px",as:"h6",...e}),nce=()=>{const[e,t]=C.useState(!1);return C.useEffect(()=>{const n=()=>{window.innerWidth<1024?t==null||t(!0):t(!1)};return window.addEventListener("resize",n),n(),()=>window.removeEventListener("resize",n)},[]),{isMobile:e}},hO=e=>{var t,n,r,i;return e&&$Z(e==null?void 0:e.title)?"props"in e.title&&((t=e.title)==null?void 0:t.props)&&Fe._({id:(r=(n=e.title)==null?void 0:n.props)==null?void 0:r.id,message:(i=e.title)==null?void 0:i.props.message}):e==null?void 0:e.title},Ug=Z.div`
+`,qA={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"}},Gg=({as:e="span",...t})=>p.jsx(Re.div,{as:e,...t}),Ts=({as:e="p",fontFamily:t="primary",fontSize:n="10px",variant:r,...i})=>p.jsx(Gg,{as:e,fontFamily:t,fontSize:n,fontWeight:r,...i}),Ll=({fontFamily:e="heading",mb:t=2,mt:n=2,...r})=>p.jsx(Ts,{fontFamily:e,mt:n,mb:t,...r}),qle=e=>p.jsx(Ts,{fontSize:"18px",...e}),cO=e=>p.jsx(Ts,{fontSize:"16px",...e}),_g=e=>p.jsx(Ts,{fontSize:"14px",...e}),Zg=e=>p.jsx(Ts,{fontSize:"12px",...e}),uO=e=>p.jsx(Ts,{fontSize:"10px",...e}),$le=e=>p.jsx(Ll,{fontSize:"32px",as:"h1",...e}),dO=e=>p.jsx(Ll,{fontSize:"24px",as:"h2",...e}),ece=e=>p.jsx(Ll,{fontSize:"21px",as:"h3",...e}),tce=e=>p.jsx(Ll,{fontSize:"18px",as:"h4",...e}),fO=e=>p.jsx(Ll,{fontSize:"16px",as:"h5",...e}),Dl=e=>p.jsx(Ll,{fontSize:"14px",as:"h6",...e}),AO=e=>p.jsx(Ll,{fontSize:"12px",as:"h6",...e}),nce=()=>{const[e,t]=C.useState(!1);return C.useEffect(()=>{const n=()=>{window.innerWidth<1024?t==null||t(!0):t(!1)};return window.addEventListener("resize",n),n(),()=>window.removeEventListener("resize",n)},[]),{isMobile:e}},hO=e=>{var t,n,r,i;return e&&$Z(e==null?void 0:e.title)?"props"in e.title&&((t=e.title)==null?void 0:t.props)&&Fe._({id:(r=(n=e.title)==null?void 0:n.props)==null?void 0:r.id,message:(i=e.title)==null?void 0:i.props.message}):e==null?void 0:e.title},Ug=Z.div`
   width: ${({size:e})=>e};
   min-width: ${({size:e})=>e};
   height: ${({size:e})=>e};