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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.57",
+  "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;