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

package/ui/Blocks/Modal/styles.js

@@ -1,9 +1,35 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { css, th } from '@xstyled/styled-components';
-import { createRgba } from '../../utils';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButton = exports.ButtonsWrapper = exports.ButtonsContainer = exports.TitleContainer = exports.ContentContainer = exports.HeaderContainer = exports.DialogWindow = exports.DialogOverlay = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+var utils_1 = require("../../utils");
 var Component;
 (function (Component) {
     Component["Header"] = "header";
@@ -15,28 +41,28 @@ var variantStyles = function (component, variant) {
     if (variant === void 0) { variant = 'default'; }
     return ({
         header: {
-            default: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "], ["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "])), th.color('lightGray6')),
-            compact: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "], ["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "])), th.color('lightGray6')),
-            mobileFullscreen: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "]))),
+            default: (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "], ["\n        padding: 20px;\n        border-bottom: 1px solid ", ";\n        @media (min-width: 576px) {\n          padding: 30px;\n          border-bottom: 0;\n        }\n      "])), styled_components_1.th.color('lightGray6')),
+            compact: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "], ["\n        padding: 20px 20px;\n        border-bottom: 1px solid ", ";\n      "])), styled_components_1.th.color('lightGray6')),
+            mobileFullscreen: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        padding: 20px;\n      "], ["\n        padding: 20px;\n      "]))),
         },
         dialogWindow: {
-            default: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
-            compact: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
-            mobileFullscreen: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "]))),
+            default: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
+            compact: (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "], ["\n        border-radius: 10px;\n        max-width: calc(100% - 32px);\n      "]))),
+            mobileFullscreen: (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-radius: 0;\n        max-width: 100% !important;\n      "], ["\n        border-radius: 0;\n        max-width: 100% !important;\n      "]))),
         },
         contentContainer: {
-            default: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "], ["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "]))),
-            compact: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n      "], ["\n        padding: 20px 20px 15px;\n      "]))),
-            mobileFullscreen: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "]))),
+            default: (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "], ["\n        padding: 20px 20px 15px;\n        @media (min-width: 576px) {\n          padding: 30px;\n        }\n      "]))),
+            compact: (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        padding: 20px 20px 15px;\n      "], ["\n        padding: 20px 20px 15px;\n      "]))),
+            mobileFullscreen: (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        padding: 0;\n      "], ["\n        padding: 0;\n      "]))),
         },
         title: {},
     }[component][variant]);
 };
-export var DialogOverlay = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
+exports.DialogOverlay = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed;\n  z-index: 9;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: ", ";\n  text-align: center;\n\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
-    return createRgba(backgroundColor, 0.6);
+    return (0, utils_1.createRgba)(backgroundColor, 0.6);
 });
-export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"], ["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"])), function (_a) {
+exports.DialogWindow = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"], ["\n  background-color: ", ";\n  margin: auto;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n\n  ", "\n  ", ";\n\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (min-width: 576px) {\n    margin: ", " auto 0 auto;\n  }\n"])), function (_a) {
     var $backgroundColor = _a.$backgroundColor;
     return $backgroundColor || '#fefefe';
 }, function (_a) {
@@ -58,25 +84,25 @@ export var DialogWindow = styled.div(templateObject_11 || (templateObject_11 = _
     var _b = _a.top, top = _b === void 0 ? '100px' : _b;
     return top;
 });
-export var HeaderContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (_a) {
+exports.HeaderContainer = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"], ["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (_a) {
     var variant = _a.variant;
     return variantStyles(Component.Header, variant);
 });
-export var ContentContainer = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  min-height: 50px;\n  ", "\n"], ["\n  min-height: 50px;\n  ", "\n"])), function (_a) {
+exports.ContentContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  min-height: 50px;\n  ", "\n"], ["\n  min-height: 50px;\n  ", "\n"])), function (_a) {
     var variant = _a.variant;
     return variantStyles(Component.ContentContainer, variant);
 });
-export var TitleContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
-export var ButtonsContainer = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])), th.color('lightGray6'), function (_a) {
+exports.TitleContainer = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  color: typoPrimary;\n  padding-right: 34px;\n\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
+exports.ButtonsContainer = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n  border-top: 1px solid ", ";\n  text-align: right;\n  justify-content: ", ";\n\n  @media (max-width: 576px) {\n    display: flex;\n    justify-content: space-around;\n    padding: 32px 18px 18px;\n\n    > * {\n      margin: 0;\n    }\n  }\n"])), styled_components_1.th.color('lightGray6'), function (_a) {
     var hasSpaceBetween = _a.hasSpaceBetween;
     return (hasSpaceBetween ? 'space-between' : 'flex-end');
 });
-export var ButtonsWrapper = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
+exports.ButtonsWrapper = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  display: flex;\n  justify-content: inherit;\n  column-gap: 8px;\n\n  @media (max-width: 576px) {\n    & > button {\n      width: ", ";\n    }\n  }\n"])), function (_a) {
     var hasExtraAction = _a.hasExtraAction;
     return (hasExtraAction ? 'auto' : '100%');
 }, function (_a) {
     var hasBothButtons = _a.hasBothButtons;
     return (hasBothButtons ? '50%' : 'auto');
 });
-export var CloseButton = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
+exports.CloseButton = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"], ["\n  position: absolute;\n  z-index: 2;\n  background-color: bgLightGray1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 11px;\n  right: 20px;\n  width: 34px;\n  height: 34px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;

package/ui/Blocks/Modal/types.js

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

package/ui/Blocks/Modal/utils.js

@@ -1,4 +1,7 @@
-export var widthMap = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.widthMap = void 0;
+exports.widthMap = {
     wide: '1450px',
     mediumLarge: '1200px',
     medium: '900px',

package/ui/Blocks/Popover/index.js

@@ -1,21 +1,26 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from '@xstyled/styled-components';
-import { Popper } from 'react-popper';
-import { useClickOutside } from '../Modal/hooks/useClickOutside';
-import Portal from '../../Elements/Portal';
-var PopoverWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
+var react_popper_1 = require("react-popper");
+var useClickOutside_1 = require("../Modal/hooks/useClickOutside");
+var Portal_1 = __importDefault(require("../../Elements/Portal"));
+var PopoverWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 5;\n"], ["\n  z-index: 5;\n"])));
 var Popover = function (_a) {
     var placement = _a.placement, wrapper = _a.wrapper, children = _a.children, onClose = _a.onClose, parentRef = _a.parentRef;
-    var popperRef = useClickOutside({ onClose: onClose, parentRef: parentRef });
+    var popperRef = (0, useClickOutside_1.useClickOutside)({ onClose: onClose, parentRef: parentRef });
     var Wrapper = wrapper || PopoverWrapper;
-    return (_jsx(Portal, { children: _jsx("div", { ref: popperRef, children: _jsx(Popper, { innerRef: popperRef, referenceElement: parentRef.current, placement: placement, children: function (_a) {
+    return ((0, jsx_runtime_1.jsx)(Portal_1.default, { children: (0, jsx_runtime_1.jsx)("div", { ref: popperRef, children: (0, jsx_runtime_1.jsx)(react_popper_1.Popper, { innerRef: popperRef, referenceElement: parentRef.current, placement: placement, children: function (_a) {
                     var ref = _a.ref, style = _a.style;
-                    return (_jsx(Wrapper, { ref: ref, style: style, children: children }));
+                    return ((0, jsx_runtime_1.jsx)(Wrapper, { ref: ref, style: style, children: children }));
                 } }) }) }));
 };
-export default Popover;
+exports.default = Popover;
 var templateObject_1;

package/ui/Blocks/Tabs/TabContent.js

@@ -1,4 +1,8 @@
-export var TabContent = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContent = void 0;
+var TabContent = function (_a) {
     var activeTab = _a.activeTab, value = _a.value, children = _a.children;
     return activeTab === value ? children : null;
 };
+exports.TabContent = TabContent;

package/ui/Blocks/Tabs/Tabs.js

@@ -1,19 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
-import { Text } from '../../Elements/Text';
-import { Icon } from '../../Elements/Icon';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var Text_1 = require("../../Elements/Text");
+var Icon_1 = require("../../Elements/Icon");
 var Tab = function (_a) {
     var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch;
     var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount;
-    var handleOnClick = useCallback(function () {
+    var handleOnClick = (0, react_1.useCallback)(function () {
         onTabSwitch(value);
     }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTabWrapper, { children: (0, jsx_runtime_1.jsxs)(styles_1.Tab, { onClick: handleOnClick, active: isActive, children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.StyledImageBox, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon }) })), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: label }), isActive && badgeCount && badgeCount > 0 && ((0, jsx_runtime_1.jsx)(styles_1.RoundedWrap, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "medium", children: badgeCount }) }))] }) }));
 };
-export var Tabs = function (_a) {
+var Tabs = function (_a) {
     var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;
-    return (_jsx(TabPanel, { "$mb": mb, children: tabsDefinition.map(function (item, index) {
-            return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
+    return ((0, jsx_runtime_1.jsx)(styles_1.TabPanel, { "$mb": mb, children: tabsDefinition.map(function (item, index) {
+            return (0, jsx_runtime_1.jsx)(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
         }) }));
 };
+exports.Tabs = Tabs;

package/ui/Blocks/Tabs/hooks/useTabs.js

@@ -1,10 +1,14 @@
-import { useCallback, useState } from 'react';
-export var useTabs = function (tabDefinitions) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = void 0;
+var react_1 = require("react");
+var useTabs = function (tabDefinitions) {
     var index = tabDefinitions.map(function (item) { return item.default; }).indexOf(true);
     var initialValue = index === -1 ? 0 : index;
-    var _a = useState(initialValue), activeTab = _a[0], setActiveTab = _a[1];
-    var onTabSwitch = useCallback(function (value) {
+    var _a = (0, react_1.useState)(initialValue), activeTab = _a[0], setActiveTab = _a[1];
+    var onTabSwitch = (0, react_1.useCallback)(function (value) {
         setActiveTab(value);
     }, []);
     return { activeTab: activeTab, onTabSwitch: onTabSwitch };
 };
+exports.useTabs = useTabs;

package/ui/Blocks/Tabs/index.js

@@ -1,4 +1,9 @@
-import { Tabs } from './Tabs';
-export { TabContent } from './TabContent';
-export { useTabs } from './hooks/useTabs';
-export default Tabs;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = exports.TabContent = void 0;
+var Tabs_1 = require("./Tabs");
+var TabContent_1 = require("./TabContent");
+Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return TabContent_1.TabContent; } });
+var useTabs_1 = require("./hooks/useTabs");
+Object.defineProperty(exports, "useTabs", { enumerable: true, get: function () { return useTabs_1.useTabs; } });
+exports.default = Tabs_1.Tabs;

package/ui/Blocks/Tabs/stories/Tabs.stories.js

@@ -1,11 +1,14 @@
-import { Tabs } from '../Tabs';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActiveTabWithIcon = exports.ActiveTabWithBadge = exports.ActiveTabWithBadgeAndIcon = void 0;
+var Tabs_1 = require("../Tabs");
 var meta = {
     title: 'Blocks/Tabs',
-    component: Tabs,
+    component: Tabs_1.Tabs,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
+exports.default = meta;
 var tabs = [
     {
         label: 'Main Tab',
@@ -21,21 +24,21 @@ var tabs = [
         icon: 'box',
     },
 ];
-export var ActiveTabWithBadgeAndIcon = {
+exports.ActiveTabWithBadgeAndIcon = {
     args: {
         tabsDefinition: tabs,
         onTabSwitch: console.log,
         activeTab: 0,
     },
 };
-export var ActiveTabWithBadge = {
+exports.ActiveTabWithBadge = {
     args: {
         tabsDefinition: tabs,
         onTabSwitch: console.log,
         activeTab: 1,
     },
 };
-export var ActiveTabWithIcon = {
+exports.ActiveTabWithIcon = {
     args: {
         tabsDefinition: tabs,
         onTabSwitch: console.log,

package/ui/Blocks/Tabs/styles.js

@@ -1,18 +1,44 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import styled, { css, th, x } from '@xstyled/styled-components';
-export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 1em;\n"], ["\n  margin-right: 1em;\n"])));
-export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
-export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), th.color('lightGray7'));
-var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
-export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), th.color('gray'), th.color('typoPrimary'), activeTab, function (_a) {
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.Tab = exports.RoundedWrap = exports.StyledTabWrapper = exports.StyledImageBox = void 0;
+var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+exports.StyledImageBox = (0, styled_components_1.default)(styled_components_1.x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 1em;\n"], ["\n  margin-right: 1em;\n"])));
+exports.StyledTabWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
+exports.RoundedWrap = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), styled_components_1.th.color('lightGray7'));
+var activeTab = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), styled_components_1.th.color('red1'), styled_components_1.th.color('red1'), styled_components_1.th.color('typoPrimary'));
+exports.Tab = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), styled_components_1.th.color('gray'), styled_components_1.th.color('typoPrimary'), activeTab, function (_a) {
     var active = _a.active;
     return (active ? activeTab : '');
 });
-export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
+exports.TabPanel = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
     var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
     return $mb;
-}, th.color('bgLightGray1'));
+}, styled_components_1.th.color('bgLightGray1'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Blocks/Tabs/types.js

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

package/ui/Elements/Alert/Alert.d.ts

@@ -1,3 +1,3 @@
-import { IAlert } from './types';
+import type { IAlert } from './types';
 declare const Alert: IAlert;
 export default Alert;

package/ui/Elements/Alert/Alert.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { x, useTheme } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import { Icon } from '../Icon';
-import { IconWrap, LinkWrapper, StyledAlert, VerticalSeparator, Text, Title, CloseBtn, ActionButton, Description } from './styles';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = require("@xstyled/styled-components");
+var styled_components_2 = require("@xstyled/styled-components");
+var Icon_1 = require("../Icon");
+var styles_1 = require("./styles");
 var alertBackgroundColor = {
     success: 'green10',
     info: 'blue10',
@@ -23,10 +25,10 @@ var alertIconMap = {
 };
 var Alert = function (props) {
     var intent = props.intent, inline = props.inline, onClick = props.onClick, onClose = props.onClose, title = props.title, text = props.text, href = props.href, actionLabel = props.actionLabel, actionType = props.actionType, desc = props.desc, _a = props.closeAnywhere, closeAnywhere = _a === void 0 ? false : _a;
-    var theme = useTheme();
-    var bgColor = th.color(intent ? alertBackgroundColor[intent] : 'transparent')({ theme: theme });
-    var colorFill = th.color(intent ? alertColorFill[intent] : 'transparent')({ theme: theme });
+    var theme = (0, styled_components_1.useTheme)();
+    var bgColor = styled_components_2.th.color(intent ? alertBackgroundColor[intent] : 'transparent')({ theme: theme });
+    var colorFill = styled_components_2.th.color(intent ? alertColorFill[intent] : 'transparent')({ theme: theme });
     var icon = intent && alertIconMap[intent];
-    return (_jsxs(StyledAlert, { "$bgColor": bgColor, "$colorFill": colorFill, "$inline": inline, onClick: closeAnywhere ? onClose : undefined, children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [inline && _jsx(VerticalSeparator, { "$colorFill": colorFill }), icon && (_jsx(IconWrap, { children: _jsx(Icon, { icon: icon, size: "20px", fill: colorFill }) })), _jsxs("div", { children: [_jsx(Title, { children: title }), _jsxs(Text, { children: [" ", text] })] })] }), _jsxs(x.div, { display: "flex", alignItems: "center", children: [href && actionType === 'link' && (_jsx(LinkWrapper, { "$colorFill": colorFill, to: href, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Link' })), onClick && actionType === 'button' && (_jsx(ActionButton, { "$colorFill": colorFill, onClick: onClick, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Submit' })), onClose && !closeAnywhere && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "15px", fill: "gray" }) })), desc && _jsx(Description, { children: desc })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledAlert, { "$bgColor": bgColor, "$colorFill": colorFill, "$inline": inline, onClick: closeAnywhere ? onClose : undefined, children: [(0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", alignItems: "center", children: [inline && (0, jsx_runtime_1.jsx)(styles_1.VerticalSeparator, { "$colorFill": colorFill }), icon && ((0, jsx_runtime_1.jsx)(styles_1.IconWrap, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: icon, size: "20px", fill: colorFill }) })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(styles_1.Title, { children: title }), (0, jsx_runtime_1.jsxs)(styles_1.Text, { children: [" ", text] })] })] }), (0, jsx_runtime_1.jsxs)(styled_components_1.x.div, { display: "flex", alignItems: "center", children: [href && actionType === 'link' && ((0, jsx_runtime_1.jsx)(styles_1.LinkWrapper, { "$colorFill": colorFill, to: href, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Link' })), onClick && actionType === 'button' && ((0, jsx_runtime_1.jsx)(styles_1.ActionButton, { "$colorFill": colorFill, onClick: onClick, children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'Submit' })), onClose && !closeAnywhere && ((0, jsx_runtime_1.jsx)(styles_1.CloseBtn, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close", size: "15px", fill: "gray" }) })), desc && (0, jsx_runtime_1.jsx)(styles_1.Description, { children: desc })] })] }));
 };
-export default Alert;
+exports.default = Alert;

package/ui/Elements/Alert/index.js

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

package/ui/Elements/Alert/stories/Alert.stories.js

@@ -1,40 +1,43 @@
-import { Alert } from '../';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithCloseAnywhere = exports.WithDescription = exports.DangerWithMessage = exports.DangerInline = exports.Danger = exports.Info = exports.Warning = exports.Success = void 0;
+var __1 = require("../");
 var meta = {
     title: 'Elements/Alert',
-    component: Alert,
+    component: __1.Alert,
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var Success = {
+exports.default = meta;
+exports.Success = {
     args: {
         intent: 'success',
         title: 'alert',
         text: 'text',
     },
 };
-export var Warning = {
+exports.Warning = {
     args: {
         intent: 'warning',
         title: 'alert',
         text: 'warning',
     },
 };
-export var Info = {
+exports.Info = {
     args: {
         intent: 'info',
         title: 'alert',
         text: 'info',
     },
 };
-export var Danger = {
+exports.Danger = {
     args: {
         intent: 'danger',
         title: 'alert',
         text: 'danger',
     },
 };
-export var DangerInline = {
+exports.DangerInline = {
     args: {
         intent: 'danger',
         title: 'alert',
@@ -42,7 +45,7 @@ export var DangerInline = {
         inline: true,
     },
 };
-export var DangerWithMessage = {
+exports.DangerWithMessage = {
     args: {
         intent: 'danger',
         title: 'alert',
@@ -51,7 +54,7 @@ export var DangerWithMessage = {
         inline: true,
     },
 };
-export var WithDescription = {
+exports.WithDescription = {
     args: {
         intent: 'danger',
         title: 'alert',
@@ -61,7 +64,7 @@ export var WithDescription = {
         desc: "This is an extra description."
     },
 };
-export var WithCloseAnywhere = {
+exports.WithCloseAnywhere = {
     args: {
         intent: 'danger',
         title: 'alert',

package/ui/Elements/Alert/styles.js

@@ -1,33 +1,39 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-import { Link } from '../Link';
-import { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import styled from 'styled-components';
-export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"], ["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"])), function (_a) {
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = exports.CloseBtn = exports.ActionButton = exports.LinkWrapper = exports.Text = exports.Title = exports.IconWrap = exports.VerticalSeparator = exports.StyledAlert = void 0;
+var Link_1 = require("../Link");
+var styled_components_1 = require("@xstyled/styled-components");
+var styled_components_2 = require("@xstyled/styled-components");
+var styled_components_3 = __importDefault(require("styled-components"));
+exports.StyledAlert = (0, styled_components_3.default)(styled_components_1.x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"], ["\n  width: 100%;\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ", ";\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: relative;\n"])), function (_a) {
     var $inline = _a.$inline, $colorFill = _a.$colorFill;
     return ($inline ? "solid 1px ".concat($colorFill) : 'none');
 }, function (_a) {
     var $bgColor = _a.$bgColor;
     return $bgColor;
-}, th('colors.textPrimary'), th('fonts.primary'));
-export var VerticalSeparator = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"], ["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"])), function (_a) {
+}, (0, styled_components_2.th)('colors.textPrimary'), (0, styled_components_2.th)('fonts.primary'));
+exports.VerticalSeparator = (0, styled_components_3.default)(styled_components_1.x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"], ["\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ", ";\n"])), function (_a) {
     var $colorFill = _a.$colorFill;
     return $colorFill;
 });
-export var IconWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 13px 0 9px;\n"], ["\n  margin: 0 13px 0 9px;\n"])));
-export var Title = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"])));
-export var Text = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"], ["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
-export var LinkWrapper = styled(Link)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"])), function (_a) {
+exports.IconWrap = (0, styled_components_3.default)(styled_components_1.x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0 13px 0 9px;\n"], ["\n  margin: 0 13px 0 9px;\n"])));
+exports.Title = styled_components_3.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"], ["\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"])));
+exports.Text = styled_components_3.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"], ["\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"])));
+exports.LinkWrapper = (0, styled_components_3.default)(Link_1.Link)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"], ["\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 10px;\n"])), function (_a) {
     var $colorFill = _a.$colorFill;
     return $colorFill;
 });
-export var ActionButton = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"], ["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"])), function (_a) {
+exports.ActionButton = styled_components_3.default.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"], ["\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"])), function (_a) {
     var $colorFill = _a.$colorFill;
     return $colorFill;
 });
-export var CloseBtn = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"], ["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"])));
-export var Description = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"], ["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"])), th('colors.gray'));
+exports.CloseBtn = styled_components_3.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"], ["\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"])));
+exports.Description = styled_components_3.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"], ["\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ", ";\n  font-size: 10px;\n"])), (0, styled_components_2.th)('colors.gray'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/ui/Elements/Alert/types.js

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