@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,4 +1,3 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -14,29 +13,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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)
@@ -48,13 +24,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var StyledBox = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"])));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { x } from '@xstyled/styled-components';
+var StyledBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"])));
 var BorderedBox = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, ["children", "className", "id"]);
-    return ((0, jsx_runtime_1.jsx)(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
+    return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
 };
-exports.default = BorderedBox;
+export default BorderedBox;
 var templateObject_1;

package/ui/Elements/BorderedBox/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderedBox = void 0;
-var BorderedBox_1 = __importDefault(require("./BorderedBox"));
-exports.BorderedBox = BorderedBox_1.default;
-exports.default = BorderedBox_1.default;
+import BorderedBox from './BorderedBox.js';
+export { BorderedBox };
+export default BorderedBox;

package/ui/Elements/BorderedBox/stories/BorderedBox.stories.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-var __1 = require("../");
+import { BorderedBox } from '../index.js';
 var meta = {
     title: 'Elements/BorderedBox',
-    component: __1.BorderedBox,
+    component: BorderedBox,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         children: 'content of inner box with border <br /> and new line',
     },

package/ui/Elements/BorderedBox/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/Button/Button.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,12 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("./styles");
-var Spinner_1 = require("../Spinner");
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles.js';
+import { Spinner } from '../Spinner/index.js';
 var Button = function (_a) {
     var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.sizing, sizing = _d === void 0 ? 'normal' : _d, buttonRef = _a.buttonRef, onClick = _a.onClick, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, props = __rest(_a, ["isLoading", "loadingText", "icon", "appearance", "disabled", "sizing", "buttonRef", "onClick", "fullWidth"]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-appearance": appearance, "data-sizing": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledWrapper, { children: [icon && (typeof icon === 'string' ? (0, jsx_runtime_1.jsx)(styles_1.StyledIcon, { "$addMargin": !!props.children, icon: icon }) : icon), isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.LoadingIconWrapper, { "$addMargin": !!loadingText || !!props.children, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));
+    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-appearance": appearance, "data-sizing": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: _jsxs(StyledWrapper, { children: [icon && (typeof icon === 'string' ? _jsx(StyledIcon, { "$addMargin": !!props.children, icon: icon }) : icon), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMargin": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));
 };
-exports.default = Button;
+export default Button;

package/ui/Elements/Button/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var Button_1 = __importDefault(require("./Button"));
-exports.Button = Button_1.default;
-exports.default = Button_1.default;
+import Button from './Button.js';
+export { Button };
+export default Button;

package/ui/Elements/Button/stories/Button.stories.js

@@ -1,70 +1,67 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithIcon = exports.Loading = exports.DisabledSecondary = exports.DisabledPrimary = exports.Small = exports.Large = exports.Success = exports.Secondary = exports.PrimaryLight = exports.Primary = void 0;
-var __1 = require("../");
+import { Button } from '../index.js';
 var meta = {
     title: 'Elements/Button',
-    component: __1.Button,
+    component: Button,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Primary = {
+export default meta;
+export var Primary = {
     args: {
         children: 'Primary',
     },
 };
-exports.PrimaryLight = {
+export var PrimaryLight = {
     args: {
         children: 'Primary Light',
         appearance: 'primaryLight',
     },
 };
-exports.Secondary = {
+export var Secondary = {
     args: {
         children: 'Secondary',
         appearance: 'secondary',
     },
 };
-exports.Success = {
+export var Success = {
     args: {
         children: 'Success',
         appearance: 'success',
     },
 };
-exports.Large = {
+export var Large = {
     args: {
         children: 'Large',
         sizing: 'large',
     },
 };
-exports.Small = {
+export var Small = {
     args: {
         children: 'Small',
         sizing: 'normal',
     },
 };
-exports.DisabledPrimary = {
+export var DisabledPrimary = {
     args: {
         children: 'Disabled',
         disabled: true,
     },
 };
-exports.DisabledSecondary = {
+export var DisabledSecondary = {
     args: {
         children: 'Disabled',
         disabled: true,
         appearance: 'secondary',
     },
 };
-exports.Loading = {
+export var Loading = {
     args: {
         appearance: 'secondary',
         loadingText: 'Loading...',
         isLoading: true,
     },
 };
-exports.WithIcon = {
+export var WithIcon = {
     args: {
         label: 'Button',
         children: 'Small',

package/ui/Elements/Button/styles.js

@@ -1,26 +1,20 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledButton = exports.StyledIcon = exports.LoadingIconWrapper = exports.StyledWrapper = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
-var styled_components_2 = __importDefault(require("@xstyled/styled-components"));
-var Icon_1 = require("../Icon");
-exports.StyledWrapper = styled_components_2.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-exports.LoadingIconWrapper = styled_components_2.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & svg {\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+import { th } from '@xstyled/styled-components';
+import styled from '@xstyled/styled-components';
+import { Icon } from '../Icon/index.js';
+export var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+export var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & svg {\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var $addMargin = _a.$addMargin;
     return ($addMargin ? '0.5em' : '0');
 });
-exports.StyledIcon = (0, styled_components_2.default)(Icon_1.Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"])), function (_a) {
+export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"])), function (_a) {
     var $addMargin = _a.$addMargin;
     return ($addMargin ? '0.5em' : '0');
 });
-exports.StyledButton = styled_components_2.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='ghost'] {\n    background-color: transparent;\n    color: typoPrimary;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='ghostDanger'] {\n    background-color: transparent;\n    color: red1;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"], ["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='ghost'] {\n    background-color: transparent;\n    color: typoPrimary;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='ghostDanger'] {\n    background-color: transparent;\n    color: red1;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"])), function (_a) {
+export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='ghost'] {\n    background-color: transparent;\n    color: typoPrimary;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='ghostDanger'] {\n    background-color: transparent;\n    color: red1;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"], ["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='ghost'] {\n    background-color: transparent;\n    color: typoPrimary;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='ghostDanger'] {\n    background-color: transparent;\n    color: red1;\n    border-color: transparent;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: neutral20;\n      }\n    }\n\n    :disabled {\n      opacity: 60%;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"])), function (_a) {
     var fullWidth = _a.fullWidth;
     return (fullWidth ? '100%' : 'initial');
 }, function (_a) {
@@ -44,7 +38,7 @@ exports.StyledButton = styled_components_2.default.button(templateObject_4 || (t
 }, function (_a) {
     var columnAlign = _a.columnAlign;
     return (columnAlign ? 'center' : 'auto');
-}, (0, styled_components_1.th)('fonts.primary'), function (_a) {
+}, th('fonts.primary'), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'none' : 'auto');
 }, function (_a) {

package/ui/Elements/Button/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/Card/Card.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,31 +20,26 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardImage = exports.CardBody = exports.Card = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = require("@xstyled/styled-components");
-var styled_components_2 = require("@xstyled/styled-components");
-var styles_1 = require("./styles");
-var Card = function (_a) {
+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.js';
+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 ((0, jsx_runtime_1.jsx)(styles_1.CardWrapper, { block: block, children: (0, jsx_runtime_1.jsx)(styles_1.StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
+    return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
 };
-exports.Card = Card;
-var CardBody = function (_a) {
+export var CardBody = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return (0, jsx_runtime_1.jsx)(styles_1.StyledBody, __assign({}, rest, { children: children }));
+    return _jsx(StyledBody, __assign({}, rest, { children: children }));
 };
-exports.CardBody = CardBody;
-var CardImage = function (_a) {
+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 = (0, styled_components_2.useTheme)();
-    var themeColor = styled_components_1.th.color(color)({ theme: theme });
-    return ((0, jsx_runtime_1.jsx)(styles_1.ImageWrapper, { color: themeColor, children: (0, jsx_runtime_1.jsx)(styles_1.StyledImage, __assign({}, rest, { children: children })) }));
+    var theme = useTheme();
+    var themeColor = th.color(color)({ theme: theme });
+    return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));
 };
-exports.CardImage = CardImage;
 var CardComponent = function (_a) {
     var img = _a.img, body = _a.body, children = _a.children, color = _a.color;
-    return ((0, jsx_runtime_1.jsxs)(exports.Card, { children: [img && ((0, jsx_runtime_1.jsx)(exports.CardImage, { color: color, children: (0, jsx_runtime_1.jsx)("img", { src: img, width: "300" }) })), (0, jsx_runtime_1.jsxs)(exports.CardBody, { children: [body, children] })] }));
+    return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx("img", { src: img, width: "300" }) })), _jsxs(CardBody, { children: [body, children] })] }));
 };
-exports.default = CardComponent;
+export default CardComponent;

package/ui/Elements/Card/index.js

@@ -1,12 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardBody = exports.CardImage = exports.Card = void 0;
-var Card_1 = __importDefault(require("./Card"));
-var Card_2 = require("./Card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_2.Card; } });
-Object.defineProperty(exports, "CardImage", { enumerable: true, get: function () { return Card_2.CardImage; } });
-Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return Card_2.CardBody; } });
-exports.default = Card_1.default;
+import CardComponent from './Card.js';
+export { Card, CardImage, CardBody } from './Card.js';
+export default CardComponent;

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

@@ -1,33 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithBackground = exports.WithShadow = exports.WithPadding = exports.NoBorder = exports.Default = void 0;
-var Card_1 = require("../Card");
+import { Card } from '../Card.js';
 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_1.Card,
+    component: Card,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         children: longText,
     },
 };
-exports.NoBorder = {
+export var NoBorder = {
     args: {
         children: longText,
         hasBorder: false,
     },
 };
-exports.WithPadding = {
+export var WithPadding = {
     args: {
         children: longText,
         p: '20px',
     },
 };
-exports.WithShadow = {
+export var WithShadow = {
     args: {
         display: 'block',
         shadow: true,
@@ -35,7 +32,7 @@ exports.WithShadow = {
         p: '20px',
     },
 };
-exports.WithBackground = {
+export var WithBackground = {
     args: {
         display: 'block',
         shadow: true,

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

@@ -1,31 +1,25 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardWithoutImage = exports.ColoredCard = exports.Default = void 0;
-var Card_1 = __importDefault(require("../Card"));
+import CardComponent from '../Card.js';
 var meta = {
     title: 'Elements/CardComponent',
-    component: Card_1.default,
+    component: CardComponent,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         img: 'http://via.placeholder.com/640x360',
         body: "Card body"
     },
 };
-exports.ColoredCard = {
+export var ColoredCard = {
     args: {
         img: 'http://via.placeholder.com/640x360',
         body: "Card body",
         color: "success"
     },
 };
-exports.CardWithoutImage = {
+export var CardWithoutImage = {
     args: {
         body: "Card body",
         color: "success"

package/ui/Elements/Card/styles.js

@@ -1,41 +1,15 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledBody = exports.StyledImage = exports.ImageWrapper = exports.StyledCard = exports.CardWrapper = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var styled_components_2 = require("@xstyled/styled-components");
-var wrapper = (0, styled_components_1.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"])), (0, styled_components_2.th)('fonts.primary'));
-exports.CardWrapper = styled_components_1.default.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) {
+import styled, { x, css, down } 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');
 });
-exports.StyledCard = styled_components_1.default.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) {
+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) {
@@ -43,18 +17,18 @@ exports.StyledCard = styled_components_1.default.div(templateObject_3 || (templa
     return p || 'initial';
 }, function (_a) {
     var shadow = _a.shadow;
-    return (shadow ? styled_components_2.th.shadow('smooth') : 'none');
+    return (shadow ? th.shadow('smooth') : 'none');
 }, function (_a) {
     var hasBorder = _a.hasBorder;
-    return (hasBorder ? styled_components_2.th.border('slim') : 'none');
+    return (hasBorder ? th.border('slim') : 'none');
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
-    return (backgroundColor ? styled_components_2.th.color(backgroundColor) : 'initial');
+    return (backgroundColor ? th.color(backgroundColor) : 'initial');
 });
-exports.ImageWrapper = (0, styled_components_1.default)(styled_components_1.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) {
+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;
-}, (0, styled_components_1.down)('lg', (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])))));
-exports.StyledImage = (0, styled_components_1.default)(styled_components_1.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"])));
-exports.StyledBody = (0, styled_components_1.default)(styled_components_1.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);
+}, 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;

package/ui/Elements/Card/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};