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

package/ui/Elements/Spinner/stories/Spinner.stories.js

@@ -1,58 +1,55 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppearanceWaiting = exports.AppearanceWarning = exports.AppearanceSuccess = exports.AppearanceProcessing = exports.AppearanceInfo = exports.AppearanceError = exports.AppearanceDone = exports.AppearanceConcept = exports.Sm = exports.Default = void 0;
-var __1 = require("../");
+import { Spinner } from '../index.js';
 var meta = {
     title: 'Elements/Spinner',
-    component: __1.Spinner,
+    component: Spinner,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {},
 };
-exports.Sm = {
+export var Sm = {
     args: {
         variant: 'sm',
     },
 };
-exports.AppearanceConcept = {
+export var AppearanceConcept = {
     args: {
         appearance: 'concept',
     },
 };
-exports.AppearanceDone = {
+export var AppearanceDone = {
     args: {
         appearance: 'done',
     },
 };
-exports.AppearanceError = {
+export var AppearanceError = {
     args: {
         appearance: 'error',
     },
 };
-exports.AppearanceInfo = {
+export var AppearanceInfo = {
     args: {
         appearance: 'info',
     },
 };
-exports.AppearanceProcessing = {
+export var AppearanceProcessing = {
     args: {
         appearance: 'processing',
     },
 };
-exports.AppearanceSuccess = {
+export var AppearanceSuccess = {
     args: {
         appearance: 'success',
     },
 };
-exports.AppearanceWarning = {
+export var AppearanceWarning = {
     args: {
         appearance: 'warning',
     },
 };
-exports.AppearanceWaiting = {
+export var AppearanceWaiting = {
     args: {
         appearance: 'waiting',
     },

package/ui/Elements/Spinner/styles.js

@@ -1,46 +1,20 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __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.Circle = exports.Svg = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var styled_components_2 = require("styled-components");
-var KeyframesCircularDash = (0, styled_components_2.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
-var KeyframesCircularRotate = (0, styled_components_2.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
-exports.Svg = styled_components_1.default.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"])), function (_a) {
+import styled, { th } from '@xstyled/styled-components';
+import { keyframes } from 'styled-components';
+var KeyframesCircularDash = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
+var KeyframesCircularRotate = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+export var Svg = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"])), function (_a) {
     var $variant = _a.$variant;
     return ($variant === 'sm' ? '16' : '40');
 }, function (_a) {
     var $variant = _a.$variant;
     return ($variant === 'sm' ? '16' : '40');
 }, KeyframesCircularRotate);
-exports.Circle = styled_components_1.default.circle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"], ["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"])), KeyframesCircularDash, function (_a) {
+export var Circle = styled.circle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"], ["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"])), KeyframesCircularDash, function (_a) {
     var color = _a.color;
-    return (color ? styled_components_1.th.color(color) : styled_components_1.th.color('blue2'));
+    return (color ? th.color(color) : th.color('blue2'));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/Spinner/types.js

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

package/ui/Elements/Tag/Tag.js

@@ -1,33 +1,8 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
+import styled, { th } from '@xstyled/styled-components';
 var fontSizeMap = {
     small: '14px',
     medium: '16px',
@@ -45,14 +20,14 @@ var borderRadiusMap = {
 };
 var getTextColor = function (isNotSelected, textColor) {
     if (textColor) {
-        return styled_components_1.th.color(textColor);
+        return th.color(textColor);
     }
-    return isNotSelected ? styled_components_1.th.color('blue2') : 'white';
+    return isNotSelected ? th.color('blue2') : 'white';
 };
 var getBgColor = function (color) {
-    return color ? styled_components_1.th.color(color) : 'rgba(157, 163, 169, 0.2)';
+    return color ? th.color(color) : 'rgba(157, 163, 169, 0.2)';
 };
-var Tag = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"], ["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"])), function (_a) {
+var Tag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"], ["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"])), function (_a) {
     var color = _a.color;
     return getBgColor(color);
 }, function (_a) {
@@ -80,5 +55,5 @@ var Tag = styled_components_1.default.div(templateObject_1 || (templateObject_1
     var hover = _a.hover;
     return hover && '&: hover { opacity: 0.7}';
 });
-exports.default = Tag;
+export default Tag;
 var templateObject_1;

package/ui/Elements/Tag/index.js

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

package/ui/Elements/Tag/palletes.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.palletes = void 0;
 /**
  * [string, string]: [background, text]
  */
-exports.palletes = {
+export var palletes = {
     greenWhite: { color: 'green60', textColor: 'white' },
     blueBlue: { color: 'blue20', textColor: 'blue80' },
     magentaWhite: { color: 'magenta60', textColor: 'white' },

package/ui/Elements/Tag/stories/Tag.stories.js

@@ -1,75 +1,69 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Big = exports.Small = exports.Border = exports.Opacity = exports.Hover = exports.Pointer = exports.NotSelected = exports.RedTag = exports.Default = exports.AllPalletes = void 0;
-var predefinedTags_1 = __importDefault(require("./components/predefinedTags"));
-var __1 = __importDefault(require("../"));
+import PredefinedTags from './components/predefinedTags.js';
+import Tag from '../index.js';
 var meta = {
     title: 'Elements/Tag',
-    component: __1.default,
+    component: Tag,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.AllPalletes = {
-    decorators: [predefinedTags_1.default],
+export default meta;
+export var AllPalletes = {
+    decorators: [PredefinedTags],
 };
-exports.Default = {
+export var Default = {
     args: {
         children: 'Label',
     },
 };
-exports.RedTag = {
+export var RedTag = {
     args: {
         color: 'red1',
         children: 'This tag has color red1',
     },
 };
-exports.NotSelected = {
+export var NotSelected = {
     args: {
         isNotSelected: true,
         children: 'This tag is not selected',
         color: 'red1',
     },
 };
-exports.Pointer = {
+export var Pointer = {
     args: {
         pointer: true,
         children: 'This tag has pointer',
         color: 'red1',
     },
 };
-exports.Hover = {
+export var Hover = {
     args: {
         hover: true,
         children: 'This tag has hover effect',
         color: 'red1',
     },
 };
-exports.Opacity = {
+export var Opacity = {
     args: {
         opacity: true,
         children: 'This tag has opacity 0.7',
         color: 'red1',
     },
 };
-exports.Border = {
+export var Border = {
     args: {
         border: true,
         children: 'This tag has border',
         color: 'red1',
     },
 };
-exports.Small = {
+export var Small = {
     args: {
         children: 'Small',
         color: 'teal60',
         size: 'small',
     },
 };
-exports.Big = {
+export var Big = {
     args: {
         children: 'Big',
         color: 'teal60',

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,13 +1,8 @@
-"use strict";
-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 = require("@xstyled/styled-components");
-var __1 = __importDefault(require("../../"));
-var palletes_1 = require("../../palletes");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { x } from '@xstyled/styled-components';
+import Tag from '../../index.js';
+import { palletes } from '../../palletes.js';
 var PredefinedTags = function () {
-    return ((0, jsx_runtime_1.jsx)(styled_components_1.x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palletes_1.palletes).map(function (pallete, i) { return ((0, jsx_runtime_1.jsx)(__1.default, { color: palletes_1.palletes[pallete].color, textColor: palletes_1.palletes[pallete].textColor, children: pallete })); }) }));
+    return (_jsx(x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palletes).map(function (pallete, i) { return (_jsx(Tag, { color: palletes[pallete].color, textColor: palletes[pallete].textColor, children: pallete })); }) }));
 };
-exports.default = PredefinedTags;
+export default PredefinedTags;

package/ui/Elements/Tag/types.js

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

package/ui/Elements/Text/Text.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,8 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = require("@xstyled/styled-components");
-var Text = function (props) { return (0, jsx_runtime_1.jsx)(styled_components_1.x.div, __assign({ as: "span" }, props)); };
-exports.default = Text;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { x } from '@xstyled/styled-components';
+var Text = function (props) { return _jsx(x.div, __assign({ as: "span" }, props)); };
+export default Text;

package/ui/Elements/Text/index.js

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

package/ui/Elements/Text/stories/Text.stories.js

@@ -1,47 +1,41 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariantBold = exports.VariantSemibold = exports.VariantMedium = exports.FontWeight = exports.FontSize = exports.Default = void 0;
-var Text_1 = __importDefault(require("../Text"));
+import Text from '../Text.js';
 var meta = {
     title: 'Elements/Text',
-    component: Text_1.default,
+    component: Text,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         children: 'This is a text',
     },
 };
-exports.FontSize = {
+export var FontSize = {
     args: {
         children: 'This is a text font-size 10',
         fontSize: 10,
     },
 };
-exports.FontWeight = {
+export var FontWeight = {
     args: {
         children: 'This is a text font-weight bold',
         fontWeight: 'bold',
     },
 };
-exports.VariantMedium = {
+export var VariantMedium = {
     args: {
         children: 'This is a text font-weight bold',
         variant: 'medium',
     },
 };
-exports.VariantSemibold = {
+export var VariantSemibold = {
     args: {
         children: 'This is a text font-weight bold',
         variant: 'semiBold',
     },
 };
-exports.VariantBold = {
+export var VariantBold = {
     args: {
         children: 'This is a text font-weight bold',
         variant: 'bold',

package/ui/Elements/Text/types.js

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

package/ui/Elements/Toast/Toast.js

@@ -1,29 +1,24 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var styled_components_2 = require("@xstyled/styled-components");
-var Icon_1 = require("../Icon");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { Icon } from '../Icon/index.js';
 var toastTitleMap = {
     info: 'Info',
     success: 'Success',
     error: 'Error',
     warning: 'Warning',
 };
-var Title = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), (0, styled_components_2.th)('colors.blue2'));
-var Text = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), (0, styled_components_2.th)('colors.gray1'));
-var ContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-var CloseWrapper = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
+var Title = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  line-height: 18px;\n  font-weight: 700;\n  color: ", ";\n"])), th('colors.blue2'));
+var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: 12px;\n  line-height: 18px;\n  font-weight: 500;\n  color: ", ";\n"])), th('colors.gray1'));
+var ContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
 var Toast = function (_a) {
     var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type;
-    return ((0, jsx_runtime_1.jsxs)(ContentWrapper, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Title, { children: title || toastTitleMap[type] }), text && (0, jsx_runtime_1.jsx)(Text, { children: text })] }), (0, jsx_runtime_1.jsx)(CloseWrapper, { children: (0, jsx_runtime_1.jsx)("div", { onClick: closeToast, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "close" }) }) })] }));
+    return (_jsxs(ContentWrapper, { children: [_jsxs("div", { children: [_jsx(Title, { children: title || toastTitleMap[type] }), text && _jsx(Text, { children: text })] }), _jsx(CloseWrapper, { children: _jsx("div", { onClick: closeToast, children: _jsx(Icon, { icon: "close" }) }) })] }));
 };
-exports.default = Toast;
+export default Toast;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/Toast/index.js

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

package/ui/Elements/Toggle/Toggle.js

@@ -1,4 +1,3 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -14,29 +13,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -48,30 +24,29 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var Label_1 = require("../Label");
-var SpaceAround_1 = require("../SpaceAround");
-var StyledSpaceAroundWrap = (0, styled_components_1.default)(SpaceAround_1.SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from '@xstyled/styled-components';
+import { FieldLabel } from '../Label/index.js';
+import { SpaceAroundWrap } from '../SpaceAround/index.js';
+var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var $labelPosition = _a.$labelPosition;
     return ($labelPosition === 'left' ? 'display: flex; align-items: center; margin-top: 1rem' : '');
 });
-var StyledFieldLabel = (0, styled_components_1.default)(Label_1.FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
     var labelPosition = _a.labelPosition;
     return (labelPosition === 'left' ? 'margin-bottom: 0; margin-right: 1rem;' : '');
 });
-var disabledStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.4;\n"], ["\n  opacity: 0.4;\n"])));
-var StyledToggle = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"], ["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"])), function (props) { return (props.disabled ? disabledStyles : ''); });
-var StyledDot = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"], ["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"])));
-var HiddenInput = styled_components_1.default.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"], ["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"])), function (_a) {
+var disabledStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.4;\n"], ["\n  opacity: 0.4;\n"])));
+var StyledToggle = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"], ["\n  aspect-ratio: 1 / 1;\n  width: 100%;\n  height: 100%;\n  border-radius: 7px;\n  background-color: lightGray5;\n  border: 3px solid;\n  border-color: lightGray5;\n  position: relative;\n  transition: all 100ms ease-out;\n\n  ", "\n\n  input:checked + & {\n    background-color: red1;\n    border-color: red1;\n\n    & > span {\n      transform: translate(75%, -50%);\n      background-color: white;\n    }\n  }\n"])), function (props) { return (props.disabled ? disabledStyles : ''); });
+var StyledDot = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"], ["\n  aspect-ratio: 1 / 1;\n  background-color: white;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 10%;\n  transform: translate(-20%, -50%);\n  transition: all 100ms ease-out;\n"])));
+var HiddenInput = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"], ["\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 7px;\n  z-index: 1;\n  margin: 0;\n\n  ", "\n"])), function (_a) {
     var $enabled = _a.$enabled;
     return ($enabled ? 'cursor: pointer;' : '');
 });
-var Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
+var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"], ["\n  position: relative;\n  border-radius: 8px;\n  overflow: hidden;\n  flex-shrink: 0;\n  &[data-appearance='primary'] {\n    width: 24px;\n    height: 14px;\n    ", " {\n      height: 10px;\n    }\n  }\n  &[data-appearance='grid'] {\n    width: 28px;\n    height: 16px;\n    ", " {\n      height: 12px;\n    }\n  }\n"])), StyledDot, StyledDot);
 var Toggle = function (_a) {
     var onChange = _a.onChange, label = _a.label, name = _a.name, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? 'default' : _d, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.spaceBetween, spaceBetween = _f === void 0 ? false : _f, readOnly = _a.readOnly, rest = __rest(_a, ["onChange", "label", "name", "checked", "defaultChecked", "spaceAround", "disabled", "labelPosition", "variant", "spaceBetween", "readOnly"]);
-    return ((0, jsx_runtime_1.jsxs)(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, "$labelPosition": labelPosition, children: [label && ((0, jsx_runtime_1.jsx)(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), (0, jsx_runtime_1.jsxs)(Wrapper, { "data-appearance": variant, children: [(0, jsx_runtime_1.jsx)(HiddenInput, { name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), (0, jsx_runtime_1.jsx)(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: (0, jsx_runtime_1.jsx)(StyledDot, {}) }))] })] }));
+    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, "$labelPosition": labelPosition, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": "".concat(name, "Switch"), readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
 };
-exports.default = Toggle;
+export default Toggle;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Toggle/index.js

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