@mailstep/design-system 0.6.73-beta.4 → 0.6.73

package/package.json

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

package/ui/Blocks/LoginPage/LoginPage.js

@@ -6,7 +6,7 @@ import { SocialLinks } from './components/SocialLinks';
 import { EMAIL_ADDRESS } from './utils/links';
 import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
-import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, CardBodyWithLanguage, Version } from './styles';
+import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from './styles';
 var Login = function (_a) {
     var onSubmit = _a.onSubmit, activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, children = _a.children, brand = _a.brand, brandVariant = _a.brandVariant, isSubmitting = _a.isSubmitting, isSubmitDisabled = _a.isSubmitDisabled, withDistributionCenterSelect = _a.withDistributionCenterSelect, distributionCenterOptions = _a.distributionCenterOptions, selectedDistributionCenter = _a.selectedDistributionCenter, onChangeDistributionCenter = _a.onChangeDistributionCenter, languageItems = _a.languageItems, version = _a.version, backgroundImage = _a.backgroundImage, _b = _a.hasSupport, hasSupport = _b === void 0 ? true : _b, _c = _a.hasSocialLinks, hasSocialLinks = _c === void 0 ? true : _c;
     return (_jsxs(Wrapper, { backgroundImage: backgroundImage, children: [_jsxs(CardBodyWithLanguage, { children: [_jsx(LogoWrapper, { children: _jsx(MainLogo, { brand: brand, variant: brandVariant }) }), _jsxs(LanguageBox, { children: [hasSupport && (_jsxs(x.div, { mr: 4, children: [_jsx(H6, { color: "gray1", variant: "bold", mt: "8px", mb: "8px", as: "h6", children: _jsx(Trans, { id: "form.heading.support", message: "Support:" }) }), _jsx(MailTo, { href: "mailto:mailstep@mailstep.cz", children: EMAIL_ADDRESS })] })), _jsx(LanguageSwitch, { activeLanguage: activeLanguage, onLanguageChange: onLanguageChange, languageItems: languageItems })] }), _jsx(LoginForm, { onSubmit: onSubmit, isSubmitDisabled: isSubmitDisabled, isSubmitting: isSubmitting, onChangeDistributionCenter: onChangeDistributionCenter, withDistributionCenterSelect: withDistributionCenterSelect, distributionCenterOptions: distributionCenterOptions, selectedDistributionCenter: selectedDistributionCenter })] }), children, version && _jsx(Version, { children: version }), hasSocialLinks && _jsx(SocialLinks, {})] }));

package/ui/Blocks/LoginPage/styles.d.ts

@@ -3,7 +3,7 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
     backgroundImage?: "mailship" | undefined;
 }, never>;
 export declare const LanguageBox: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<({ children, ...rest }: import("../../Elements/Card/types").PropsBody) => JSX.Element, import("@xstyled/system").Theme, {}, never>;
+export declare const CardBodyWithLanguage: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const MailTo: import("styled-components").StyledComponent<"a", import("@xstyled/system").Theme, {}, never>;
 export declare const LogoWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 export declare const MainLogo: import("styled-components").StyledComponent<({ brand, variant, size, width, height, ...rest }: import("../../Elements/Logo/types").LogoProps) => JSX.Element | null, import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/LoginPage/styles.js

@@ -2,7 +2,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { CardBody } from '../../Elements/Card/Card';
 import Logo from '../../Elements/Logo/Logo';
 import mailship from './assets/mailship.jpg';
 import styled, { th } from '@xstyled/styled-components';
@@ -14,7 +13,7 @@ export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTe
     return "transparent ".concat(backgroundImage && "url(".concat(backgroundImageMap[backgroundImage], ")"), " 50% 0% no-repeat padding-box;");
 });
 export var LanguageBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"], ["\n  display: flex;\n  margin: 15px 0;\n  align-items: flex-end;\n  justify-content: space-between;\n  @media (min-width: 1024px) {\n    justify-content: flex-end;\n    margin: 40px 0;\n  }\n"])));
-export var CardBodyWithLanguage = styled(CardBody)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"])));
+export var CardBodyWithLanguage = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: start;\n  padding: 0 32px 10px 32px;\n  flex-grow: 1;\n  margin: auto;\n  width: 500px;\n  @media (min-width: 1024px) {\n    display: block;\n    flex-grow: 0;\n  }\n"])));
 export var MailTo = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n"])), th.color('typoPrimary'), th.color('red1'));
 export var LogoWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin-top: 30px;\n  @media (min-width: 1024px) {\n    display: block;\n    margin-top: 0;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  margin-top: 30px;\n  @media (min-width: 1024px) {\n    display: block;\n    margin-top: 0;\n  }\n"])));
 export var MainLogo = styled(Logo)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 50%;\n  height: auto;\n"], ["\n  width: 50%;\n  height: auto;\n"])));

package/ui/Blocks/Stepper/Stepper.js

@@ -14,7 +14,7 @@ export var Stepper = function (_a) {
     if (!(items === null || items === void 0 ? void 0 : items.length))
         return null;
     return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { total: items.length, hasComponent: !!Component, children: items.map(function (_a, index) {
-                    var title = _a.title, disabled = _a.disabled, completed = _a.completed, icon = _a.icon;
-                    return (_jsx(StepItem, { onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
+                    var title = _a.title, disabled = _a.disabled, visible = _a.visible, completed = _a.completed, icon = _a.icon;
+                    return (_jsx(StepItem, { onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, visible: visible, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
                 }) }), Component && _jsx(Component, { handleGoToNextStep: handleGoToNextStep, isLoading: isLoading })] }));
 };

package/ui/Blocks/Stepper/components/StepItem/index.d.ts

@@ -5,6 +5,7 @@ type StepItemProps = {
     index: number;
     activeStep: number;
     disabled?: boolean;
+    visible?: boolean;
     completed?: boolean;
     icon?: string;
     hasStepNumbering?: boolean;

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -6,8 +6,8 @@ import { x } from '@xstyled/styled-components';
 import isBoolean from 'lodash/isBoolean';
 import { Line, StepItemContainer, ContentWrapper } from './styles';
 export var StepItem = function (_a) {
-    var title = _a.title, index = _a.index, disabled = _a.disabled, activeStep = _a.activeStep, completed = _a.completed, icon = _a.icon, _b = _a.hasStepNumbering, hasStepNumbering = _b === void 0 ? true : _b, total = _a.total, onClick = _a.onClick;
+    var title = _a.title, index = _a.index, disabled = _a.disabled, activeStep = _a.activeStep, completed = _a.completed, icon = _a.icon, _b = _a.hasStepNumbering, hasStepNumbering = _b === void 0 ? true : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, total = _a.total, onClick = _a.onClick;
     var isActiveStep = index === activeStep;
     var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
-    return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, total: total, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [_jsx(StepCircle, { icon: isCompletedStep ? 'check' : icon, isCompleted: isCompletedStep, isActiveStep: isActiveStep, children: index + 1 }), _jsxs(x.div, { alignSelf: "center", children: [hasStepNumbering && (_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: isCompletedStep ? 'red1' : 'gray1', variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) })), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
+    return (_jsxs(StepItemContainer, { onClick: !disabled && isCompletedStep ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, isVisible: visible, total: total, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [_jsx(StepCircle, { icon: isCompletedStep ? 'check' : icon, isCompleted: isCompletedStep, isActiveStep: isActiveStep, children: index + 1 }), _jsxs(x.div, { alignSelf: "center", children: [hasStepNumbering && (_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: isCompletedStep ? 'red1' : 'gray1', variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) })), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
 };

package/ui/Blocks/Stepper/components/StepItem/styles.d.ts

@@ -1,6 +1,7 @@
 export declare const StepItemContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isActiveStep: boolean;
     isDisabled?: boolean | undefined;
+    isVisible?: boolean | undefined;
     total: number;
     onClick?: (() => void) | undefined;
 }, never>;

package/ui/Blocks/Stepper/components/StepItem/styles.js

@@ -14,12 +14,15 @@ var responsiveCss = css(templateObject_1 || (templateObject_1 = __makeTemplateOb
     var total = _a.total;
     return total * 240;
 }, StepCircleContainer);
-export var StepItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  ", "\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  ", "\n"])), function (_a) {
+export var StepItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"])), function (_a) {
     var isActiveStep = _a.isActiveStep;
     return (isActiveStep ? th.color('bgLightGray1') : 'transparent');
 }, function (_a) {
     var isDisabled = _a.isDisabled, onClick = _a.onClick;
     return (isDisabled ? 'not-allowed' : onClick ? 'pointer' : 'auto');
+}, function (_a) {
+    var isVisible = _a.isVisible;
+    return (isVisible ? 'block' : 'none');
 }, responsiveCss);
 export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"], ["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (_a) {
     var isActiveStep = _a.isActiveStep, isCompletedStep = _a.isCompletedStep;

package/ui/Blocks/Stepper/stories/Stepper.stories.js

@@ -52,7 +52,7 @@ var iconItems = [
     },
     {
         title: 'Processed in stock',
-        icon: 'boxRamp'
+        icon: 'boxRamp',
     },
     {
         title: 'Log Processed in stock',

package/ui/Blocks/Stepper/types.d.ts

@@ -16,5 +16,6 @@ export type StepperItem = {
     icon?: string;
     completed?: boolean;
     disabled?: boolean;
+    visible?: boolean;
     component?: FC<StepperPassedDownProps>;
 };

package/ui/Elements/Card/Card.d.ts

@@ -1,6 +1,4 @@
-import { CardComponentProps, CardProps, PropsBody, PropsCardImage } from './types';
-export declare const Card: ({ children, block, hasBorder, backgroundColor, ...rest }: CardProps) => JSX.Element;
-export declare const CardBody: ({ children, ...rest }: PropsBody) => JSX.Element;
-export declare const CardImage: ({ children, color, ...rest }: PropsCardImage) => JSX.Element;
-declare const CardComponent: ({ img, body, children, color }: CardComponentProps) => import("react/jsx-runtime").JSX.Element;
-export default CardComponent;
+import { FC } from 'react';
+import { CardProps } from './types';
+declare const Card: FC<CardProps>;
+export default Card;

package/ui/Elements/Card/Card.js

@@ -1,45 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledCard } from './styles';
+var Card = function (_a) {
+    var children = _a.children, _b = _a.display, display = _b === void 0 ? 'block' : _b, bg = _a.bg, onClick = _a.onClick, maxWidth = _a.maxWidth;
+    return (_jsx(StyledCard, { onClick: onClick, bg: bg, display: display, maxWidth: maxWidth, hasOnClick: !!onClick, children: children }));
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { th } from '@xstyled/styled-components';
-import { useTheme } from '@xstyled/styled-components';
-import { StyledCard, CardWrapper, StyledBody, ImageWrapper, StyledImage } from './styles';
-export var Card = function (_a) {
-    var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = __rest(_a, ["children", "block", "hasBorder", "backgroundColor"]);
-    return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
-};
-export var CardBody = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return _jsx(StyledBody, __assign({}, rest, { children: children }));
-};
-export var CardImage = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, ["children", "color"]);
-    var theme = useTheme();
-    var themeColor = th.color(color)({ theme: theme });
-    return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));
-};
-var CardComponent = function (_a) {
-    var img = _a.img, body = _a.body, children = _a.children, color = _a.color;
-    return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx("img", { src: img, width: "300" }) })), _jsxs(CardBody, { children: [body, children] })] }));
-};
-export default CardComponent;
+export default Card;

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

@@ -1,3 +1,2 @@
-import CardComponent from './Card';
-export { Card, CardImage, CardBody } from './Card';
-export default CardComponent;
+import Card from './Card';
+export default Card;

package/ui/Elements/Card/index.js

@@ -1,3 +1,2 @@
-import CardComponent from './Card';
-export { Card, CardImage, CardBody } from './Card';
-export default CardComponent;
+import Card from './Card';
+export default Card;

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

@@ -2,14 +2,13 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ children, block, hasBorder, backgroundColor, ...rest }: import("../types").CardProps) => JSX.Element;
+    component: import("react").FC<import("../types").CardProps>;
     tags: string[];
     argTypes: {};
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const NoBorder: Story;
-export declare const WithPadding: Story;
-export declare const WithShadow: Story;
-export declare const WithBackground: Story;
+export declare const WithOnClick: Story;
+export declare const CustomBg: Story;
+export declare const WithMaxWidth: Story;

package/ui/Elements/Card/stories/Card.stories.js

@@ -1,43 +1,34 @@
-import { Card } from '../Card';
+import Card from '../Card';
 var longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 var meta = {
     title: 'Elements/Card',
     component: Card,
     tags: ['autodocs'],
-    argTypes: {},
+    argTypes: {}
 };
 export default meta;
 export var Default = {
     args: {
-        children: longText,
-    },
-};
-export var NoBorder = {
-    args: {
-        children: longText,
-        hasBorder: false,
-    },
+        children: longText
+    }
 };
-export var WithPadding = {
+export var WithOnClick = {
     args: {
         children: longText,
-        p: '20px',
-    },
+        onClick: function () {
+            console.log('click');
+        }
+    }
 };
-export var WithShadow = {
+export var CustomBg = {
     args: {
-        display: 'block',
-        shadow: true,
         children: longText,
-        p: '20px',
-    },
+        bg: 'green20'
+    }
 };
-export var WithBackground = {
+export var WithMaxWidth = {
     args: {
-        display: 'block',
-        shadow: true,
         children: longText,
-        p: '20px',
-        backgroundColor: 'red2'
-    },
+        maxWidth: '400px'
+    }
 };

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

@@ -1,14 +1,7 @@
-/// <reference types="react" />
-export declare const CardWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    block?: boolean | undefined;
-}, never>;
+import { Display } from './types';
 export declare const StyledCard: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    block?: boolean | undefined;
-    hasBorder?: boolean | undefined;
-    shadow?: boolean | undefined;
-    p?: string | undefined;
-    backgroundColor?: string | undefined;
+    display: Display;
+    bg?: string | undefined;
+    hasOnClick: boolean;
+    maxWidth?: string | undefined;
 }, never>;
-export declare const ImageWrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledImage: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
-export declare const StyledBody: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;

package/ui/Elements/Card/styles.js

@@ -2,33 +2,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { x, css, down } from '@xstyled/styled-components';
+import styled, { css } from '@xstyled/styled-components';
 import { th } from '@xstyled/styled-components';
-var wrapper = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  font-family: ", ";\n  :after {\n    box-sizing: border-box;\n  }\n"])), th('fonts.primary'));
-export var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"], ["\n  ", ";\n  display: ", ";\n  justify-content: center;\n  flex-wrap: wrap;\n"])), wrapper, function (_a) {
-    var block = _a.block;
-    return (block ? 'block' : 'inline-flex');
-});
-export var StyledCard = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"], ["\n  justify-content: space-between;\n  display: ", ";\n  padding: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  background-color: ", ";\n  border-color: lightGray3;\n  border-radius: 4px;\n"])), function (_a) {
-    var block = _a.block;
-    return (block ? 'block' : 'inline-flex');
-}, function (_a) {
-    var p = _a.p;
-    return p || 'initial';
-}, function (_a) {
-    var shadow = _a.shadow;
-    return (shadow ? th.shadow('smooth') : 'none');
+export var StyledCard = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  padding: 20px;\n  border: 1px solid;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: 12px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"], ["\n  display: ", ";\n  padding: 20px;\n  border: 1px solid;\n  background-color: ", ";\n  border-color: ", ";\n  border-radius: 12px;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var display = _a.display;
+    return display;
 }, function (_a) {
-    var hasBorder = _a.hasBorder;
-    return (hasBorder ? th.border('slim') : 'none');
+    var bg = _a.bg;
+    return (bg ? th.color(bg) : 'white');
+}, th.color('lightGray6'), function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth && "max-width: ".concat(maxWidth, ";");
 }, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return (backgroundColor ? th.color(backgroundColor) : 'initial');
+    var hasOnClick = _a.hasOnClick;
+    return hasOnClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      cursor: pointer;\n      &:hover {\n        border-color: ", ";\n      }\n    "], ["\n      cursor: pointer;\n      &:hover {\n        border-color: ", ";\n      }\n    "])), th.color('gray1'));
 });
-export var ImageWrapper = styled(x.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n  background-color: ", ";\n  ", "\n"])), wrapper, function (_a) {
-    var color = _a.color;
-    return color;
-}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])))));
-export var StyledImage = styled(x.div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"], ["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  object-fit: cover;\n"])));
-export var StyledBody = styled(x.div)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"], ["\n  ", ";\n  justify-content: center;\n  flex-direction: column;\n"])), wrapper);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2;

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

@@ -1,21 +1,9 @@
 /// <reference types="react" />
-import { StyledCard } from './styles';
 export type CardProps = {
     children: React.ReactNode;
-    shadow?: boolean;
-    block?: boolean;
-    hasBorder?: boolean;
-} & React.ComponentProps<typeof StyledCard>;
-export type PropsBody = {
-    children: React.ReactNode;
-};
-export type PropsCardImage = {
-    children: React.ReactNode;
-    color?: string;
-};
-export type CardComponentProps = {
-    img?: string;
-    children?: React.ReactNode;
-    body?: React.ReactNode;
-    color?: string;
+    display?: Display;
+    onClick?: () => void;
+    bg?: string;
+    maxWidth?: string;
 };
+export type Display = 'block' | 'flex';

package/ui/index.d.ts

@@ -55,7 +55,6 @@ export * from './Elements/Avatar';
 export * from './Elements/Badge';
 export * from './Elements/BorderedBox';
 export * from './Elements/Button';
-export * from './Elements/Card';
 export * from './Elements/Dropdown';
 export * from './Elements/ErrorMessage';
 export * from './Elements/Icon';