@mailstep/design-system 0.1.4-beta.0 → 0.1.4-beta.1

package/build/packages/ui/Elements/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../packages/ui/Elements/Avatar/Avatar.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport styled from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nvar defaultDimension = 100;\nvar 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  svg {\\n    font-size: \", \";\\n  }\\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  svg {\\n    font-size: \", \";\\n  }\\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 \"\".concat(props.size / 2, \"px\"); }, function (props) { return props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'; });\nexport var Avatar = function (_a) {\n    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\"]);\n    return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size, className: className, \"$colorBack\": colorBack || 'red2', \"$colorFront\": colorFront || 'white', \"$hoverColorBack\": hoverColorBack }, rest, { children: src ? _jsx(\"img\", { src: src, width: size, height: size }) : _jsx(Icon, { icon: \"avatar\" }) })) }));\n};\nvar templateObject_1;\n//# sourceMappingURL=Avatar.js.map"],"names":["styled","__makeTemplateObject","th","__rest","_jsx","_Fragment","__assign","Icon"],"mappings":";;;;;;;;;;;AAKA,IAAI,gBAAgB,GAAG,GAAG,CAAC;AAC3B,IAAI,gBAAgB,GAAGA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,8BAAoB,CAAC,CAAC,+HAA+H,EAAE,yBAAyB,EAAE,cAAc,EAAE,eAAe,EAAE,6BAA6B,EAAE,4CAA4C,EAAE,UAAU,CAAC,EAAE,CAAC,+HAA+H,EAAE,yBAAyB,EAAE,cAAc,EAAE,eAAe,EAAE,6BAA6B,EAAE,4CAA4C,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,KAAK,CAAC,WAAW,GAAGC,SAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,KAAK,CAAC,UAAU,GAAGA,SAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,KAAK,CAAC,eAAe,GAAGA,SAAE,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;AACpkC,IAAC,MAAM,GAAG,UAAU,EAAE,EAAE;AAClC,IAAI,IAAI,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,gBAAgB,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,IAAI,GAAGC,gBAAM,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC;AACnS,IAAI,QAAQC,cAAI,CAACC,mBAAS,EAAE,EAAE,QAAQ,EAAED,cAAI,CAAC,gBAAgB,EAAEE,kBAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,IAAI,MAAM,EAAE,aAAa,EAAE,UAAU,IAAI,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,GAAGF,cAAI,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAGA,cAAI,CAACG,YAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAChV,EAAE;AACF,IAAI,gBAAgB;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../../packages/ui/Elements/Avatar/Avatar.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport styled from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nvar defaultDimension = 100;\nvar 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  svg {\\n    font-size: \", \";\\n  }\\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  svg {\\n    font-size: \", \";\\n  }\\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 \"\".concat(props.size / 2, \"px\"); }, function (props) { return props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'; });\nexport var Avatar = function (_a) {\n    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\"]);\n    return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size, className: className, \"$colorBack\": colorBack || 'red2', \"$colorFront\": colorFront || 'white', \"$hoverColorBack\": hoverColorBack }, rest, { children: src ? _jsx(\"img\", { src: src, width: size, height: size }) : _jsx(Icon, { icon: \"avatar\" }) })) }));\n};\nvar templateObject_1;\n//# sourceMappingURL=Avatar.js.map"],"names":["_jsx","_Fragment"],"mappings":";;;;;AAKA,IAAI,gBAAgB,GAAG,GAAG,CAAC;AAC3B,IAAI,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,+HAA+H,EAAE,yBAAyB,EAAE,cAAc,EAAE,eAAe,EAAE,6BAA6B,EAAE,4CAA4C,EAAE,UAAU,CAAC,EAAE,CAAC,+HAA+H,EAAE,yBAAyB,EAAE,cAAc,EAAE,eAAe,EAAE,6BAA6B,EAAE,4CAA4C,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,EAAE,UAAU,KAAK,EAAE,EAAE,OAAO,KAAK,CAAC,eAAe,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;AACpkC,IAAC,MAAM,GAAG,UAAU,EAAE,EAAE;AAClC,IAAI,IAAI,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,gBAAgB,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,IAAI,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,CAAC,CAAC,CAAC;AACnS,IAAI,QAAQA,GAAI,CAACC,QAAS,EAAE,EAAE,QAAQ,EAAED,GAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,IAAI,MAAM,EAAE,aAAa,EAAE,UAAU,IAAI,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,GAAGA,GAAI,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,GAAGA,GAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAChV,EAAE;AACF,IAAI,gBAAgB;;;;"}

package/build/packages/ui/Elements/Badge/Badge.js

@@ -1,14 +1,8 @@
-'use strict';
+import { __makeTemplateObject } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import styled, { th, css, useTheme } from '@xstyled/styled-components';
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('@xstyled/styled-components');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var Circle = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib_es6.__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 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 color = _a.color;
     return color;
 }, function (_a) {
@@ -17,29 +11,29 @@ var Circle = styled__default.default.div(templateObject_1 || (templateObject_1 =
 }, function (_a) {
     var size = _a.size;
     return size;
-}, styled.th('fonts.primary'), function (_a) {
+}, 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__default.default.div(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
+var RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", ";\n"], ["\n  position: relative;\n  ", ";\n"])), function (_a) {
     var width = _a.width;
     return width
-        ? styled.css(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : '';
+        ? 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 = styled.useTheme();
-    var themeColor = styled.th.color(color)({ theme: theme });
-    var themeSize = styled.th.fontSize(size)({ theme: theme });
+    var theme = useTheme();
+    var themeColor = th.color(color)({ theme: theme });
+    var themeSize = th.fontSize(size)({ theme: theme });
     if (!label || (typeof label === 'number' && label <= 0)) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+        return jsx(Fragment, { children: children });
     }
-    return (jsxRuntime.jsxs(RelativeWrap, { width: childWidth, children: [jsxRuntime.jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: jsxRuntime.jsx("div", { className: "label", children: label }) }), 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] }));
 };
 var templateObject_1, templateObject_2, templateObject_3;
 
-module.exports = Badge;
+export { Badge as default };
 //# sourceMappingURL=Badge.js.map

package/build/packages/ui/Elements/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../../packages/ui/Elements/Badge/Badge.tsx"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport styled, { css, useTheme } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar 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) {\n    var color = _a.color;\n    return color;\n}, function (_a) {\n    var size = _a.size;\n    return size;\n}, function (_a) {\n    var size = _a.size;\n    return size;\n}, th('fonts.primary'), function (_a) {\n    var fontSize = _a.fontSize;\n    return \"\".concat(fontSize, \"px\");\n}, function (_a) {\n    var topPosition = _a.topPosition;\n    return (topPosition ? '75%, -75%' : '50%, -50%');\n});\nvar RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n  position: relative;\\n  \", \";\\n\"], [\"\\n  position: relative;\\n  \", \";\\n\"])), function (_a) {\n    var width = _a.width;\n    return width\n        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n          width: \", \";\\n        \"], [\"\\n          width: \", \";\\n        \"])), width) : '';\n});\nvar Badge = function (_a) {\n    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;\n    var theme = useTheme();\n    var themeColor = th.color(color)({ theme: theme });\n    var themeSize = th.fontSize(size)({ theme: theme });\n    if (!label || (typeof label === 'number' && label <= 0)) {\n        return _jsx(_Fragment, { children: children });\n    }\n    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: _jsx(\"div\", { className: \"label\", children: label }) }), children] }));\n};\nexport default Badge;\nvar templateObject_1, templateObject_2, templateObject_3;\n//# sourceMappingURL=Badge.js.map"],"names":["styled","__makeTemplateObject","th","css","useTheme","_jsx","_Fragment","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Badge.js","sources":["../../../../../packages/ui/Elements/Badge/Badge.tsx"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport styled, { css, useTheme } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar 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) {\n    var color = _a.color;\n    return color;\n}, function (_a) {\n    var size = _a.size;\n    return size;\n}, function (_a) {\n    var size = _a.size;\n    return size;\n}, th('fonts.primary'), function (_a) {\n    var fontSize = _a.fontSize;\n    return \"\".concat(fontSize, \"px\");\n}, function (_a) {\n    var topPosition = _a.topPosition;\n    return (topPosition ? '75%, -75%' : '50%, -50%');\n});\nvar RelativeWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n  position: relative;\\n  \", \";\\n\"], [\"\\n  position: relative;\\n  \", \";\\n\"])), function (_a) {\n    var width = _a.width;\n    return width\n        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n          width: \", \";\\n        \"], [\"\\n          width: \", \";\\n        \"])), width) : '';\n});\nvar Badge = function (_a) {\n    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;\n    var theme = useTheme();\n    var themeColor = th.color(color)({ theme: theme });\n    var themeSize = th.fontSize(size)({ theme: theme });\n    if (!label || (typeof label === 'number' && label <= 0)) {\n        return _jsx(_Fragment, { children: children });\n    }\n    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: themeSize, topPosition: topPosition, fontSize: fontSize, children: _jsx(\"div\", { className: \"label\", children: label }) }), children] }));\n};\nexport default Badge;\nvar templateObject_1, templateObject_2, templateObject_3;\n//# sourceMappingURL=Badge.js.map"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}

package/build/packages/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,19 +1,13 @@
-'use strict';
+import { __makeTemplateObject, __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import styled, { x } from '@xstyled/styled-components';
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('@xstyled/styled-components');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledBox = styled__default.default(styled.x.div)(templateObject_1 || (templateObject_1 = tslib_es6.__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 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 = tslib_es6.__rest(_a, ["children", "className", "id"]);
-    return (jsxRuntime.jsx(StyledBox, tslib_es6.__assign({ id: id, className: className }, rest, { children: children })));
+    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 })));
 };
 var templateObject_1;
 
-module.exports = BorderedBox;
+export { BorderedBox as default };
 //# sourceMappingURL=BorderedBox.js.map

package/build/packages/ui/Elements/BorderedBox/BorderedBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderedBox.js","sources":["../../../../../packages/ui/Elements/BorderedBox/BorderedBox.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport styled, { x } from '@xstyled/styled-components';\nvar 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\"])));\nvar BorderedBox = function (_a) {\n    var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, [\"children\", \"className\", \"id\"]);\n    return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));\n};\nexport default BorderedBox;\nvar templateObject_1;\n//# sourceMappingURL=BorderedBox.js.map"],"names":["styled","x","__makeTemplateObject","__rest","_jsx","__assign"],"mappings":";;;;;;;;;;AAGA,IAAI,SAAS,GAAGA,uBAAM,CAACC,QAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,8BAAoB,CAAC,CAAC,+JAA+J,CAAC,EAAE,CAAC,+JAA+J,CAAC,CAAC,CAAC,CAAC,CAAC;AACha,IAAC,WAAW,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,GAAGC,gBAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;AACzH,IAAI,QAAQC,cAAI,CAAC,SAAS,EAAEC,kBAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE;AACvG,EAAE;AAEF,IAAI,gBAAgB;;;;"}
+{"version":3,"file":"BorderedBox.js","sources":["../../../../../packages/ui/Elements/BorderedBox/BorderedBox.tsx"],"sourcesContent":["import { __assign, __makeTemplateObject, __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport styled, { x } from '@xstyled/styled-components';\nvar 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\"])));\nvar BorderedBox = function (_a) {\n    var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, [\"children\", \"className\", \"id\"]);\n    return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));\n};\nexport default BorderedBox;\nvar templateObject_1;\n//# sourceMappingURL=BorderedBox.js.map"],"names":["_jsx"],"mappings":";;;;AAGA,IAAI,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,GAAG,oBAAoB,CAAC,CAAC,+JAA+J,CAAC,EAAE,CAAC,+JAA+J,CAAC,CAAC,CAAC,CAAC,CAAC;AACha,IAAC,WAAW,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;AACzH,IAAI,QAAQA,GAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE;AACvG,EAAE;AAEF,IAAI,gBAAgB;;;;"}

package/build/packages/ui/Elements/Button/Button.js

@@ -1,14 +1,12 @@
-'use strict';
-
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./styles.js');
-var Spinner = require('../Spinner/Spinner.js');
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { StyledButton, StyledWrapper, StyledIcon, LoadingIconWrapper } from './styles.js';
+import { Spinner } from '../Spinner/Spinner.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 = tslib_es6.__rest(_a, ["isLoading", "loadingText", "icon", "appearance", "disabled", "sizing", "buttonRef", "onClick", "fullWidth"]);
-    return (jsxRuntime.jsx(styles.StyledButton, tslib_es6.__assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-appearance": appearance, "data-sizing": sizing, disabled: disabled, ref: buttonRef, fullWidth: fullWidth, children: jsxRuntime.jsxs(styles.StyledWrapper, { children: [icon && (typeof icon === 'string' ? jsxRuntime.jsx(styles.StyledIcon, { "$addMargin": !!props.children, icon: icon }) : icon), isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(styles.LoadingIconWrapper, { "$addMargin": !!loadingText || !!props.children, children: jsxRuntime.jsx(Spinner.Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : (props.children)] }) })));
+    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)] }) })));
 };
 
-module.exports = Button;
+export { Button as default };
 //# sourceMappingURL=Button.js.map

package/build/packages/ui/Elements/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../packages/ui/Elements/Button/Button.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';\nimport { Spinner } from '../Spinner';\nvar Button = function (_a) {\n    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\"]);\n    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)] }) })));\n};\nexport default Button;\n//# sourceMappingURL=Button.js.map"],"names":["__rest","_jsx","StyledButton","__assign","_jsxs","StyledWrapper","StyledIcon","_Fragment","LoadingIconWrapper","Spinner"],"mappings":";;;;;;;AAIG,IAAC,MAAM,GAAG,UAAU,EAAE,EAAE;AAC3B,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,KAAK,GAAGA,gBAAM,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAC/e,IAAI,QAAQC,cAAI,CAACC,mBAAY,EAAEC,kBAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAEC,eAAK,CAACC,oBAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,GAAGJ,cAAI,CAACK,iBAAU,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,SAAS,IAAIF,eAAK,CAACG,mBAAS,EAAE,EAAE,QAAQ,EAAE,CAACN,cAAI,CAACO,yBAAkB,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAEP,cAAI,CAACQ,eAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,WAAW,IAAI,WAAW,KAAK,EAAE,GAAG,WAAW,GAAG,SAAS,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;AAC1nB;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../packages/ui/Elements/Button/Button.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';\nimport { Spinner } from '../Spinner';\nvar Button = function (_a) {\n    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\"]);\n    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)] }) })));\n};\nexport default Button;\n//# sourceMappingURL=Button.js.map"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAIG,IAAC,MAAM,GAAG,UAAU,EAAE,EAAE;AAC3B,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,EAAE,CAAC,WAAW,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,QAAQ,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAC/e,IAAI,QAAQA,GAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAEC,IAAK,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,GAAGD,GAAI,CAAC,UAAU,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,SAAS,IAAIC,IAAK,CAACC,QAAS,EAAE,EAAE,QAAQ,EAAE,CAACF,GAAI,CAAC,kBAAkB,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAEA,GAAI,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,WAAW,IAAI,WAAW,KAAK,EAAE,GAAG,WAAW,GAAG,SAAS,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;AAC1nB;;;;"}

package/build/packages/ui/Elements/Button/styles.js

@@ -1,24 +1,18 @@
-'use strict';
+import { __makeTemplateObject } from '../../../../node_modules/tslib/tslib.es6.js';
+import styled, { th } from '@xstyled/styled-components';
+import Icon from '../Icon/Icon.js';
+import 'react/jsx-runtime';
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var styled = require('@xstyled/styled-components');
-var Icon = require('../Icon/Icon.js');
-require('react/jsx-runtime');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledWrapper = styled__default.default.span(templateObject_1 || (templateObject_1 = tslib_es6.__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"])));
-var LoadingIconWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  & svg {\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    margin-right: ", ";\n  }\n"])), function (_a) {
+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"])));
+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');
 });
-var StyledIcon = styled__default.default(Icon.default)(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"], ["\n  & svg {\n    height: 1em;\n    margin-right: ", ";\n  }\n"])), function (_a) {
+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');
 });
-var StyledButton = styled__default.default.button(templateObject_4 || (templateObject_4 = tslib_es6.__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='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='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 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='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='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) {
@@ -42,7 +36,7 @@ var StyledButton = styled__default.default.button(templateObject_4 || (templateO
 }, function (_a) {
     var columnAlign = _a.columnAlign;
     return (columnAlign ? 'center' : 'auto');
-}, styled.th('fonts.primary'), function (_a) {
+}, th('fonts.primary'), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'none' : 'auto');
 }, function (_a) {
@@ -51,8 +45,5 @@ var StyledButton = styled__default.default.button(templateObject_4 || (templateO
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-exports.LoadingIconWrapper = LoadingIconWrapper;
-exports.StyledButton = StyledButton;
-exports.StyledIcon = StyledIcon;
-exports.StyledWrapper = StyledWrapper;
+export { LoadingIconWrapper, StyledButton, StyledIcon, StyledWrapper };
 //# sourceMappingURL=styles.js.map

package/build/packages/ui/Elements/Button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../packages/ui/Elements/Button/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { th } from '@xstyled/styled-components';\nimport styled from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nexport 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\"])));\nexport 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) {\n    var $addMargin = _a.$addMargin;\n    return ($addMargin ? '0.5em' : '0');\n});\nexport 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) {\n    var $addMargin = _a.$addMargin;\n    return ($addMargin ? '0.5em' : '0');\n});\nexport 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='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='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) {\n    var fullWidth = _a.fullWidth;\n    return (fullWidth ? '100%' : 'initial');\n}, function (_a) {\n    var mt = _a.mt;\n    return (mt ? mt : 0);\n}, function (_a) {\n    var mr = _a.mr;\n    return (mr ? mr : 0);\n}, function (_a) {\n    var mb = _a.mb;\n    return (mb ? mb : 0);\n}, function (_a) {\n    var ml = _a.ml;\n    return (ml ? ml : 0);\n}, function (_a) {\n    var columnAlign = _a.columnAlign;\n    return (columnAlign ? 'flex' : 'inline-flex');\n}, function (_a) {\n    var columnAlign = _a.columnAlign;\n    return (columnAlign ? 'column' : 'auto');\n}, function (_a) {\n    var columnAlign = _a.columnAlign;\n    return (columnAlign ? 'center' : 'auto');\n}, th('fonts.primary'), function (_a) {\n    var disabled = _a.disabled;\n    return (disabled ? 'none' : 'auto');\n}, function (_a) {\n    var disabled = _a.disabled;\n    return (disabled ? '0.6' : '1');\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject","Icon","th"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../../packages/ui/Elements/Button/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { th } from '@xstyled/styled-components';\nimport styled from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nexport 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\"])));\nexport 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) {\n    var $addMargin = _a.$addMargin;\n    return ($addMargin ? '0.5em' : '0');\n});\nexport 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) {\n    var $addMargin = _a.$addMargin;\n    return ($addMargin ? '0.5em' : '0');\n});\nexport 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='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='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) {\n    var fullWidth = _a.fullWidth;\n    return (fullWidth ? '100%' : 'initial');\n}, function (_a) {\n    var mt = _a.mt;\n    return (mt ? mt : 0);\n}, function (_a) {\n    var mr = _a.mr;\n    return (mr ? mr : 0);\n}, function (_a) {\n    var mb = _a.mb;\n    return (mb ? mb : 0);\n}, function (_a) {\n    var ml = _a.ml;\n    return (ml ? ml : 0);\n}, function (_a) {\n    var columnAlign = _a.columnAlign;\n    return (columnAlign ? 'flex' : 'inline-flex');\n}, function (_a) {\n    var columnAlign = _a.columnAlign;\n    return (columnAlign ? 'column' : 'auto');\n}, function (_a) {\n    var columnAlign = _a.columnAlign;\n    return (columnAlign ? 'center' : 'auto');\n}, th('fonts.primary'), function (_a) {\n    var disabled = _a.disabled;\n    return (disabled ? 'none' : 'auto');\n}, function (_a) {\n    var disabled = _a.disabled;\n    return (disabled ? '0.6' : '1');\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}

package/build/packages/ui/Elements/Card/Card.js

@@ -1,26 +1,22 @@
-'use strict';
-
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var jsxRuntime = require('react/jsx-runtime');
-var styled = require('@xstyled/styled-components');
-var styles = require('./styles.js');
+import { __rest, __assign } from '../../../../node_modules/tslib/tslib.es6.js';
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, th } from '@xstyled/styled-components';
+import { CardWrapper, StyledCard, StyledBody, ImageWrapper, StyledImage } from './styles.js';
 
 var Card = function (_a) {
-    var children = _a.children, block = _a.block, _b = _a.hasBorder, hasBorder = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, rest = tslib_es6.__rest(_a, ["children", "block", "hasBorder", "backgroundColor"]);
-    return (jsxRuntime.jsx(styles.CardWrapper, { block: block, children: jsxRuntime.jsx(styles.StyledCard, tslib_es6.__assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));
+    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 })) }));
 };
 var CardBody = function (_a) {
-    var children = _a.children, rest = tslib_es6.__rest(_a, ["children"]);
-    return jsxRuntime.jsx(styles.StyledBody, tslib_es6.__assign({}, rest, { children: children }));
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return jsx(StyledBody, __assign({}, rest, { children: children }));
 };
 var CardImage = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = tslib_es6.__rest(_a, ["children", "color"]);
-    var theme = styled.useTheme();
-    var themeColor = styled.th.color(color)({ theme: theme });
-    return (jsxRuntime.jsx(styles.ImageWrapper, { color: themeColor, children: jsxRuntime.jsx(styles.StyledImage, tslib_es6.__assign({}, rest, { children: children })) }));
+    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 })) }));
 };
 
-exports.Card = Card;
-exports.CardBody = CardBody;
-exports.CardImage = CardImage;
+export { Card, CardBody, CardImage };
 //# sourceMappingURL=Card.js.map

package/build/packages/ui/Elements/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../packages/ui/Elements/Card/Card.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { th } from '@xstyled/styled-components';\nimport { useTheme } from '@xstyled/styled-components';\nimport { StyledCard, CardWrapper, StyledBody, ImageWrapper, StyledImage } from './styles';\nexport var Card = function (_a) {\n    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\"]);\n    return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));\n};\nexport var CardBody = function (_a) {\n    var children = _a.children, rest = __rest(_a, [\"children\"]);\n    return _jsx(StyledBody, __assign({}, rest, { children: children }));\n};\nexport var CardImage = function (_a) {\n    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, [\"children\", \"color\"]);\n    var theme = useTheme();\n    var themeColor = th.color(color)({ theme: theme });\n    return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));\n};\nvar CardComponent = function (_a) {\n    var img = _a.img, body = _a.body, children = _a.children, color = _a.color;\n    return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx(\"img\", { src: img, width: \"300\" }) })), _jsxs(CardBody, { children: [body, children] })] }));\n};\nexport default CardComponent;\n//# sourceMappingURL=Card.js.map"],"names":["__rest","_jsx","CardWrapper","StyledCard","__assign","StyledBody","useTheme","th","ImageWrapper","StyledImage"],"mappings":";;;;;;;AAKU,IAAC,IAAI,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,IAAI,GAAGA,gBAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAC3N,IAAI,QAAQC,cAAI,CAACC,kBAAW,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAED,cAAI,CAACE,iBAAU,EAAEC,kBAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAC/L,EAAE;AACQ,IAAC,QAAQ,GAAG,UAAU,EAAE,EAAE;AACpC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAGJ,gBAAM,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AAChE,IAAI,OAAOC,cAAI,CAACI,iBAAU,EAAED,kBAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AACxE,EAAE;AACQ,IAAC,SAAS,GAAG,UAAU,EAAE,EAAE;AACrC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,EAAE,IAAI,GAAGJ,gBAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AAC9H,IAAI,IAAI,KAAK,GAAGM,eAAQ,EAAE,CAAC;AAC3B,IAAI,IAAI,UAAU,GAAGC,SAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AACvD,IAAI,QAAQN,cAAI,CAACO,mBAAY,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAEP,cAAI,CAACQ,kBAAW,EAAEL,kBAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAChI;;;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../../packages/ui/Elements/Card/Card.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { th } from '@xstyled/styled-components';\nimport { useTheme } from '@xstyled/styled-components';\nimport { StyledCard, CardWrapper, StyledBody, ImageWrapper, StyledImage } from './styles';\nexport var Card = function (_a) {\n    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\"]);\n    return (_jsx(CardWrapper, { block: block, children: _jsx(StyledCard, __assign({ block: block, hasBorder: hasBorder, backgroundColor: backgroundColor }, rest, { children: children })) }));\n};\nexport var CardBody = function (_a) {\n    var children = _a.children, rest = __rest(_a, [\"children\"]);\n    return _jsx(StyledBody, __assign({}, rest, { children: children }));\n};\nexport var CardImage = function (_a) {\n    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'white' : _b, rest = __rest(_a, [\"children\", \"color\"]);\n    var theme = useTheme();\n    var themeColor = th.color(color)({ theme: theme });\n    return (_jsx(ImageWrapper, { color: themeColor, children: _jsx(StyledImage, __assign({}, rest, { children: children })) }));\n};\nvar CardComponent = function (_a) {\n    var img = _a.img, body = _a.body, children = _a.children, color = _a.color;\n    return (_jsxs(Card, { children: [img && (_jsx(CardImage, { color: color, children: _jsx(\"img\", { src: img, width: \"300\" }) })), _jsxs(CardBody, { children: [body, children] })] }));\n};\nexport default CardComponent;\n//# sourceMappingURL=Card.js.map"],"names":["_jsx"],"mappings":";;;;;AAKU,IAAC,IAAI,GAAG,UAAU,EAAE,EAAE;AAChC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,SAAS,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,IAAI,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAC3N,IAAI,QAAQA,GAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAEA,GAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAC/L,EAAE;AACQ,IAAC,QAAQ,GAAG,UAAU,EAAE,EAAE;AACpC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;AAChE,IAAI,OAAOA,GAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;AACxE,EAAE;AACQ,IAAC,SAAS,GAAG,UAAU,EAAE,EAAE;AACrC,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,EAAE,IAAI,GAAG,MAAM,CAAC,EAAE,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;AAC9H,IAAI,IAAI,KAAK,GAAG,QAAQ,EAAE,CAAC;AAC3B,IAAI,IAAI,UAAU,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AACvD,IAAI,QAAQA,GAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAEA,GAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAChI;;;;"}

package/build/packages/ui/Elements/Card/styles.js

@@ -1,18 +1,12 @@
-'use strict';
+import { __makeTemplateObject } from '../../../../node_modules/tslib/tslib.es6.js';
+import styled, { css, th, x, down } from '@xstyled/styled-components';
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var styled = require('@xstyled/styled-components');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var wrapper = styled.css(templateObject_1 || (templateObject_1 = tslib_es6.__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"])), styled.th('fonts.primary'));
-var CardWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib_es6.__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 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'));
+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');
 });
-var StyledCard = styled__default.default.div(templateObject_3 || (templateObject_3 = tslib_es6.__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 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) {
@@ -20,25 +14,21 @@ var StyledCard = styled__default.default.div(templateObject_3 || (templateObject
     return p || 'initial';
 }, function (_a) {
     var shadow = _a.shadow;
-    return (shadow ? styled.th.shadow('smooth') : 'none');
+    return (shadow ? th.shadow('smooth') : 'none');
 }, function (_a) {
     var hasBorder = _a.hasBorder;
-    return (hasBorder ? styled.th.border('slim') : 'none');
+    return (hasBorder ? th.border('slim') : 'none');
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
-    return (backgroundColor ? styled.th.color(backgroundColor) : 'initial');
+    return (backgroundColor ? th.color(backgroundColor) : 'initial');
 });
-var ImageWrapper = styled__default.default(styled.x.div)(templateObject_5 || (templateObject_5 = tslib_es6.__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 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;
-}, styled.down('lg', styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n      display: none;\n    "], ["\n      display: none;\n    "])))));
-var StyledImage = styled__default.default(styled.x.div)(templateObject_6 || (templateObject_6 = tslib_es6.__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"])));
-var StyledBody = styled__default.default(styled.x.div)(templateObject_7 || (templateObject_7 = tslib_es6.__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    "])))));
+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"])));
+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;
 
-exports.CardWrapper = CardWrapper;
-exports.ImageWrapper = ImageWrapper;
-exports.StyledBody = StyledBody;
-exports.StyledCard = StyledCard;
-exports.StyledImage = StyledImage;
+export { CardWrapper, ImageWrapper, StyledBody, StyledCard, StyledImage };
 //# sourceMappingURL=styles.js.map

package/build/packages/ui/Elements/Card/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../packages/ui/Elements/Card/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { x, css, down } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar 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'));\nexport 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) {\n    var block = _a.block;\n    return (block ? 'block' : 'inline-flex');\n});\nexport 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) {\n    var block = _a.block;\n    return (block ? 'block' : 'inline-flex');\n}, function (_a) {\n    var p = _a.p;\n    return p || 'initial';\n}, function (_a) {\n    var shadow = _a.shadow;\n    return (shadow ? th.shadow('smooth') : 'none');\n}, function (_a) {\n    var hasBorder = _a.hasBorder;\n    return (hasBorder ? th.border('slim') : 'none');\n}, function (_a) {\n    var backgroundColor = _a.backgroundColor;\n    return (backgroundColor ? th.color(backgroundColor) : 'initial');\n});\nexport 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) {\n    var color = _a.color;\n    return color;\n}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n      display: none;\\n    \"], [\"\\n      display: none;\\n    \"])))));\nexport 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\"])));\nexport 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);\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;\n//# sourceMappingURL=styles.js.map"],"names":["css","__makeTemplateObject","th","styled","x","down"],"mappings":"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"}
+{"version":3,"file":"styles.js","sources":["../../../../../packages/ui/Elements/Card/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { x, css, down } from '@xstyled/styled-components';\nimport { th } from '@xstyled/styled-components';\nvar 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'));\nexport 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) {\n    var block = _a.block;\n    return (block ? 'block' : 'inline-flex');\n});\nexport 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) {\n    var block = _a.block;\n    return (block ? 'block' : 'inline-flex');\n}, function (_a) {\n    var p = _a.p;\n    return p || 'initial';\n}, function (_a) {\n    var shadow = _a.shadow;\n    return (shadow ? th.shadow('smooth') : 'none');\n}, function (_a) {\n    var hasBorder = _a.hasBorder;\n    return (hasBorder ? th.border('slim') : 'none');\n}, function (_a) {\n    var backgroundColor = _a.backgroundColor;\n    return (backgroundColor ? th.color(backgroundColor) : 'initial');\n});\nexport 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) {\n    var color = _a.color;\n    return color;\n}, down('lg', css(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n      display: none;\\n    \"], [\"\\n      display: none;\\n    \"])))));\nexport 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\"])));\nexport 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);\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}