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

package/ui/Elements/Avatar/Avatar.js

@@ -1,3 +1,4 @@
+"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;
@@ -24,14 +25,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import { Profile } from '../Icon';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var styled_components_2 = require("@xstyled/styled-components");
+var Icon_1 = require("../Icon");
 var defaultDimension = 100;
-var StyledAvatarWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"])), function (props) { return (props.$colorFront ? th.color(props.$colorFront) : 'auto'); }, function (props) { return (props.$colorBack ? th.color(props.$colorBack) : 'auto'); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return (props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'); });
-export var Avatar = function (_a) {
+var StyledAvatarWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"])), function (props) { return (props.$colorFront ? styled_components_2.th.color(props.$colorFront) : 'auto'); }, function (props) { return (props.$colorBack ? styled_components_2.th.color(props.$colorBack) : 'auto'); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return (props.$hoverColorBack ? styled_components_2.th.color(props.$hoverColorBack) : 'auto'); });
+var Avatar = function (_a) {
     var src = _a.src, _b = _a.size, size = _b === void 0 ? defaultDimension : _b, colorFront = _a.colorFront, colorBack = _a.colorBack, className = _a.className, hoverColorBack = _a.hoverColorBack, rest = __rest(_a, ["src", "size", "colorFront", "colorBack", "className", "hoverColorBack"]);
-    return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size || 34, className: className, "$colorBack": colorBack || 'neutral20', "$colorFront": colorFront || 'blue2', "$hoverColorBack": hoverColorBack || 'lightGray7' }, rest, { children: src ? _jsx("img", { src: src, width: size, height: size }) : _jsx(Profile, {}) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(StyledAvatarWrap, __assign({ size: size || 34, className: className, "$colorBack": colorBack || 'neutral20', "$colorFront": colorFront || 'blue2', "$hoverColorBack": hoverColorBack || 'lightGray7' }, rest, { children: src ? (0, jsx_runtime_1.jsx)("img", { src: src, width: size, height: size }) : (0, jsx_runtime_1.jsx)(Icon_1.Profile, {}) })) }));
 };
+exports.Avatar = Avatar;
 var templateObject_1;

package/ui/Elements/Avatar/index.js

@@ -1,3 +1,7 @@
-import { Avatar } from './Avatar';
-export { Avatar } from './Avatar';
-export default Avatar;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var Avatar_1 = require("./Avatar");
+var Avatar_2 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_2.Avatar; } });
+exports.default = Avatar_1.Avatar;

package/ui/Elements/Avatar/stories/Avatar.stories.js

@@ -1,18 +1,21 @@
-import { Avatar } from '../Avatar';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithImage = exports.Default = void 0;
+var Avatar_1 = require("../Avatar");
 var image = 'data:image/png;base64,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';
 var meta = {
     title: 'Elements/Avatar',
-    component: Avatar,
+    component: Avatar_1.Avatar,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Default = {
+exports.default = meta;
+exports.Default = {
     args: {
         size: 100,
     },
 };
-export var WithImage = {
+exports.WithImage = {
     args: {
         size: 100,
         src: image,

package/ui/Elements/Avatar/types.js

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

package/ui/Elements/Badge/Badge.js

@@ -1,11 +1,36 @@
+"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;
 };
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { css, useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"])), function (_a) {
+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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var styled_components_2 = require("@xstyled/styled-components");
+var Circle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px;\n  color: white;\n  background-color: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\n  .label {\n    font-family: ", ";\n    font-weight: 600;\n    vertical-align: middle;\n    text-align: center;\n    font-size: ", ";\n  }\n\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(", ");\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
@@ -14,27 +39,27 @@ var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateOb
 }, function (_a) {
     var size = _a.size;
     return size;
-}, th('fonts.primary'), function (_a) {
+}, (0, styled_components_2.th)('fonts.primary'), function (_a) {
     var fontSize = _a.fontSize;
     return "".concat(fontSize, "px");
 }, function (_a) {
     var topPosition = _a.topPosition;
     return (topPosition ? '75%, -75%' : '50%, -50%');
 });
-var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
+var RelativeWrap = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
     var width = _a.width;
     return width
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : '';
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : '';
 });
 var Badge = function (_a) {
     var children = _a.children, _b = _a.color, color = _b === void 0 ? 'red2' : _b, _c = _a.size, size = _c === void 0 ? 6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 10 : _d, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition;
-    var theme = useTheme();
-    var themeColor = th.color(color)({ theme: theme });
-    var themeSize = th.fontSize(size)({ theme: theme });
+    var theme = (0, styled_components_1.useTheme)();
+    var themeColor = styled_components_2.th.color(color)({ theme: theme });
+    var themeSize = styled_components_2.th.fontSize(size)({ theme: theme });
     if (!label || (typeof label === 'number' && label <= 0)) {
-        return _jsx(_Fragment, { children: children });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
     }
-    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: _jsx("div", { className: "label", children: label }) }), children] }));
+    return ((0, jsx_runtime_1.jsxs)(RelativeWrap, { width: childWidth, children: [(0, jsx_runtime_1.jsx)(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: (0, jsx_runtime_1.jsx)("div", { className: "label", children: label }) }), children] }));
 };
-export default Badge;
+exports.default = Badge;
 var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Badge/index.js

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

package/ui/Elements/Badge/stories/Badge.stories.js

@@ -1,19 +1,25 @@
-import Badge from '../Badge';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Colored = exports.Primary = void 0;
+var Badge_1 = __importDefault(require("../Badge"));
 var meta = {
     title: 'Elements/Badge',
-    component: Badge,
+    component: Badge_1.default,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Primary = {
+exports.default = meta;
+exports.Primary = {
     args: {
         children: '😀',
         size: 1,
         childWidth: '30px',
     },
 };
-export var Colored = {
+exports.Colored = {
     args: {
         children: '😃',
         label: '10',

package/ui/Elements/BorderedBox/BorderedBox.d.ts

@@ -1,3 +1,3 @@
-import { BorderedBoxProps } from './types';
+import type { BorderedBoxProps } from './types';
 declare const BorderedBox: ({ children, className, id, ...rest }: BorderedBoxProps) => JSX.Element;
 export default BorderedBox;

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,3 +1,4 @@
+"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;
@@ -13,6 +14,29 @@ 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)
@@ -24,12 +48,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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"])));
+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"])));
 var BorderedBox = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, ["children", "className", "id"]);
-    return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
 };
-export default BorderedBox;
+exports.default = BorderedBox;
 var templateObject_1;

package/ui/Elements/BorderedBox/index.js

@@ -1,3 +1,9 @@
-import BorderedBox from './BorderedBox';
-export { BorderedBox };
-export default BorderedBox;
+"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;

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

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

package/ui/Elements/BorderedBox/types.js

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

package/ui/Elements/Button/Button.d.ts

@@ -1,3 +1,3 @@
-import { Props } from './types';
+import type { Props } from './types';
 declare const Button: ({ isLoading, loadingText, icon, appearance, disabled, sizing, buttonRef, onClick, fullWidth, ...props }: Props) => JSX.Element;
 export default Button;

package/ui/Elements/Button/Button.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,11 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
-import { Spinner } from '../Spinner';
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var Spinner_1 = require("../Spinner");
 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 (_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)] }) })));
+    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)] }) })));
 };
-export default Button;
+exports.default = Button;

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

@@ -1,5 +1,5 @@
 import Button from './Button';
-import { AppearanceValue } from './types';
+import type { AppearanceValue } from './types';
 export { Button };
 export type { AppearanceValue };
 export default Button;

package/ui/Elements/Button/index.js

@@ -1,3 +1,9 @@
-import Button from './Button';
-export { Button };
-export default Button;
+"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;

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

@@ -1,67 +1,70 @@
-import { Button } from '../';
+"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("../");
 var meta = {
     title: 'Elements/Button',
-    component: Button,
+    component: __1.Button,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Primary = {
+exports.default = meta;
+exports.Primary = {
     args: {
         children: 'Primary',
     },
 };
-export var PrimaryLight = {
+exports.PrimaryLight = {
     args: {
         children: 'Primary Light',
         appearance: 'primaryLight',
     },
 };
-export var Secondary = {
+exports.Secondary = {
     args: {
         children: 'Secondary',
         appearance: 'secondary',
     },
 };
-export var Success = {
+exports.Success = {
     args: {
         children: 'Success',
         appearance: 'success',
     },
 };
-export var Large = {
+exports.Large = {
     args: {
         children: 'Large',
         sizing: 'large',
     },
 };
-export var Small = {
+exports.Small = {
     args: {
         children: 'Small',
         sizing: 'normal',
     },
 };
-export var DisabledPrimary = {
+exports.DisabledPrimary = {
     args: {
         children: 'Disabled',
         disabled: true,
     },
 };
-export var DisabledSecondary = {
+exports.DisabledSecondary = {
     args: {
         children: 'Disabled',
         disabled: true,
         appearance: 'secondary',
     },
 };
-export var Loading = {
+exports.Loading = {
     args: {
         appearance: 'secondary',
         loadingText: 'Loading...',
         isLoading: true,
     },
 };
-export var WithIcon = {
+exports.WithIcon = {
     args: {
         label: 'Button',
         children: 'Small',

package/ui/Elements/Button/styles.js

@@ -1,20 +1,26 @@
+"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;
 };
-import { th } from '@xstyled/styled-components';
-import styled from '@xstyled/styled-components';
-import { Icon } from '../Icon';
-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 __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) {
     var $addMargin = _a.$addMargin;
     return ($addMargin ? '0.5em' : '0');
 });
-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) {
+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) {
     var $addMargin = _a.$addMargin;
     return ($addMargin ? '0.5em' : '0');
 });
-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) {
+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) {
     var fullWidth = _a.fullWidth;
     return (fullWidth ? '100%' : 'initial');
 }, function (_a) {
@@ -38,7 +44,7 @@ export var StyledButton = styled.button(templateObject_4 || (templateObject_4 =
 }, function (_a) {
     var columnAlign = _a.columnAlign;
     return (columnAlign ? 'center' : 'auto');
-}, th('fonts.primary'), function (_a) {
+}, (0, styled_components_1.th)('fonts.primary'), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'none' : 'auto');
 }, function (_a) {

package/ui/Elements/Button/types.js

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

package/ui/Elements/Card/Card.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,26 +21,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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) {
+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) {
     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 })) }));
+    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 })) }));
 };
-export var CardBody = function (_a) {
+exports.Card = Card;
+var CardBody = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return _jsx(StyledBody, __assign({}, rest, { children: children }));
+    return (0, jsx_runtime_1.jsx)(styles_1.StyledBody, __assign({}, rest, { children: children }));
 };
-export var CardImage = function (_a) {
+exports.CardBody = CardBody;
+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 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 })) }));
 };
+exports.CardImage = CardImage;
 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] })] }));
+    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] })] }));
 };
-export default CardComponent;
+exports.default = CardComponent;