@mailstep/design-system 0.8.24 → 0.8.26-beta.0

package/ui/Blocks/Tabs/index.js

@@ -1,4 +0,0 @@
-import { Tabs } from './Tabs';
-export { TabContent } from './TabContent';
-export { useTabs } from './hooks/useTabs';
-export default Tabs;

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

@@ -1,44 +0,0 @@
-import { Tabs } from '../Tabs';
-var meta = {
-    title: 'Blocks/Tabs',
-    component: Tabs,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-var tabs = [
-    {
-        label: 'Main Tab',
-        icon: 'product',
-        badgeCount: 55,
-    },
-    {
-        label: 'Main Tab',
-        badgeCount: 55,
-    },
-    {
-        label: 'Side Tab',
-        icon: 'box',
-    },
-];
-export var ActiveTabWithBadgeAndIcon = {
-    args: {
-        tabsDefinition: tabs,
-        onTabSwitch: console.log,
-        activeTab: 0,
-    },
-};
-export var ActiveTabWithBadge = {
-    args: {
-        tabsDefinition: tabs,
-        onTabSwitch: console.log,
-        activeTab: 1,
-    },
-};
-export var ActiveTabWithIcon = {
-    args: {
-        tabsDefinition: tabs,
-        onTabSwitch: console.log,
-        activeTab: 2,
-    },
-};

package/ui/Blocks/Tabs/styles.js

@@ -1,36 +0,0 @@
-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: center;\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\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\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\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: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\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  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  padding: 0 12px 12px;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  letter-spacing: 0.03em;\n  min-width: ", ";\n\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  @media (min-width: 400px) {\n    min-width: ", ";\n  }\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'auto' : 'pointer');
-}, th.color('gray'), function (_a) {
-    var minWidth = _a.minWidth;
-    return minWidth ? (Array.isArray(minWidth) ? minWidth[0] : minWidth) : '100px';
-}, function (_a) {
-    var disabled = _a.disabled;
-    return th.color(disabled ? 'gray' : 'typoPrimary');
-}, function (_a) {
-    var disabled = _a.disabled;
-    return !disabled && activeTab;
-}, function (_a) {
-    var active = _a.active;
-    return (active ? activeTab : '');
-}, function (_a) {
-    var minWidth = _a.minWidth;
-    return minWidth ? (Array.isArray(minWidth) ? minWidth[1] : minWidth) : '120px';
-});
-export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\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  display: flex;\n  align-items: center;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  margin-top: ", ";\n  align-items: stretch;\n\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;
-}, function (_a) {
-    var _b = _a.$mt, $mt = _b === void 0 ? 0 : _b;
-    return $mt;
-}, th.color('bgLightGray1'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Blocks/Tabs/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Elements/Alert/Alert.js

@@ -1,32 +0,0 @@
-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';
-var alertBackgroundColor = {
-    success: 'green10',
-    info: 'blue10',
-    warning: 'yellow10',
-    danger: 'red10',
-};
-var alertColorFill = {
-    success: 'successColor',
-    info: 'blue60',
-    warning: 'yellow70',
-    danger: 'dangerColor',
-};
-var alertIconMap = {
-    success: 'circleCheck',
-    info: 'info',
-    warning: 'circleTriangle',
-    danger: 'circleTriangle',
-};
-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 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 })] })] }));
-};
-export default Alert;

package/ui/Elements/Alert/index.js

@@ -1,3 +0,0 @@
-import Alert from './Alert';
-export { Alert };
-export default Alert;

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

@@ -1,73 +0,0 @@
-import { Alert } from '../';
-var meta = {
-    title: 'Elements/Alert',
-    component: Alert,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var Success = {
-    args: {
-        intent: 'success',
-        title: 'alert',
-        text: 'text',
-    },
-};
-export var Warning = {
-    args: {
-        intent: 'warning',
-        title: 'alert',
-        text: 'warning',
-    },
-};
-export var Info = {
-    args: {
-        intent: 'info',
-        title: 'alert',
-        text: 'info',
-    },
-};
-export var Danger = {
-    args: {
-        intent: 'danger',
-        title: 'alert',
-        text: 'danger',
-    },
-};
-export var DangerInline = {
-    args: {
-        intent: 'danger',
-        title: 'alert',
-        text: 'danger',
-        inline: true,
-    },
-};
-export var DangerWithMessage = {
-    args: {
-        intent: 'danger',
-        title: 'alert',
-        text: 'This is a text content',
-        onClick: console.log,
-        inline: true,
-    },
-};
-export var WithDescription = {
-    args: {
-        intent: 'danger',
-        title: 'alert',
-        text: 'This is a text content',
-        onClick: console.log,
-        inline: true,
-        desc: "This is an extra description."
-    },
-};
-export var WithCloseAnywhere = {
-    args: {
-        intent: 'danger',
-        title: 'alert',
-        text: 'This is a text content',
-        closeAnywhere: true,
-        onClose: function () { return console.log('Close'); },
-        inline: true,
-    },
-};

package/ui/Elements/Alert/styles.js

@@ -1,32 +0,0 @@
-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 from 'styled-components';
-import { Link } from '../Link';
-import { x, th } from '@xstyled/styled-components';
-export var StyledAlert = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: calc(100vw - 20px);\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: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"], ["\n  width: calc(100vw - 20px);\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: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\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) {
-    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) {
-    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) {
-    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'));
-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 +0,0 @@
-export {};

package/ui/Elements/AsyncSelect/AsyncSelect.js

@@ -1,34 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import ErrorMessage from '../ErrorMessage/ErrorMessage';
-import { FieldLabel } from '../Label';
-import { StyledAsyncSelect, Wrapper } from '../Select/styles';
-import { useStylesAndComponents } from '../Select/themes';
-import SpaceAroundWrap from '../SpaceAround';
-import { i18n } from '@lingui/core';
-export var AsyncSelect = function (_a) {
-    var error = _a.error, label = _a.label, className = _a.className, spaceAround = _a.spaceAround, name = _a.name, placeholder = _a.placeholder, _b = _a.style, style = _b === void 0 ? 'form' : _b, _c = _a.optionVariant, optionVariant = _c === void 0 ? 'checkbox' : _c, _d = _a.multiLabelVariant, multiLabelVariant = _d === void 0 ? 'count' : _d, props = __rest(_a, ["error", "label", "className", "spaceAround", "name", "placeholder", "style", "optionVariant", "multiLabelVariant"]);
-    var _e = useStylesAndComponents(style, optionVariant, multiLabelVariant), customComponents = _e[0], customTheme = _e[1], customStyles = _e[2];
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(StyledAsyncSelect, __assign({ id: name, name: name, theme: customTheme, components: customComponents, styles: customStyles, classNamePrefix: "react-select", placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }) }, props))] }), error && _jsx(ErrorMessage, { children: error })] }));
-};

package/ui/Elements/AsyncSelect/index.js

@@ -1,2 +0,0 @@
-import { AsyncSelect } from './AsyncSelect';
-export default AsyncSelect;

package/ui/Elements/AsyncSelect/stories/AsyncSelect.stories.js

@@ -1,89 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AsyncSelect } from '../AsyncSelect';
-var colors = [
-    'red',
-    'blue',
-    'green',
-    'yellow',
-    'purple',
-    'orange',
-    'pink',
-    'brown',
-    'black',
-    'white',
-    'gray',
-    'cyan',
-    'magenta',
-    'teal',
-    'lime',
-    'indigo',
-    'violet',
-    'gold',
-    'silver',
-    'beige'
-];
-var filterColors = function (inputValue) { return colors.filter(function (value) { return value.includes(inputValue.toLowerCase()); }); };
-var loadOptions = function (inputValue) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, new Promise(function (resolve) {
-                    setTimeout(function () {
-                        resolve(filterColors(inputValue).map(function (color) { return ({ value: color, label: color }); }));
-                    }, 1000);
-                })];
-            case 1: return [2 /*return*/, _a.sent()];
-        }
-    });
-}); };
-var meta = {
-    title: 'Elements/AsyncSelect',
-    component: AsyncSelect,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var Multi = function () {
-    return _jsx(AsyncSelect, { loadOptions: loadOptions, isMulti: true, defaultOptions: true, cacheOptions: true });
-};
-export var Single = function () {
-    return _jsx(AsyncSelect, { loadOptions: loadOptions, defaultOptions: true, cacheOptions: true });
-};
-export var Disabled = function () {
-    return _jsx(AsyncSelect, { loadOptions: loadOptions, isDisabled: true, defaultOptions: true, cacheOptions: true });
-};

package/ui/Elements/Avatar/Avatar.js

@@ -1,36 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Profile } from '../Icon';
-import styled, { th } from '@xstyled/styled-components';
-var defaultDimension = 100;
-var StyledAvatarWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ", ";\n  background-color: ", ";\n  width: ", ";\n  height: ", ";\n  :hover {\n    background-color: ", ";\n  }\n"])), function (props) { return (props.$colorFront ? th.color(props.$colorFront) : 'auto'); }, function (props) { return (props.$colorBack ? th.color(props.$colorBack) : 'auto'); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return "".concat(props.size, "px"); }, function (props) { return (props.$hoverColorBack ? th.color(props.$hoverColorBack) : 'auto'); });
-export var Avatar = function (_a) {
-    var src = _a.src, _b = _a.size, size = _b === void 0 ? defaultDimension : _b, colorFront = _a.colorFront, colorBack = _a.colorBack, className = _a.className, hoverColorBack = _a.hoverColorBack, rest = __rest(_a, ["src", "size", "colorFront", "colorBack", "className", "hoverColorBack"]);
-    return (_jsx(_Fragment, { children: _jsx(StyledAvatarWrap, __assign({ size: size || 34, className: className, "$colorBack": colorBack || 'neutral20', "$colorFront": colorFront || 'blue2', "$hoverColorBack": hoverColorBack || 'lightGray7' }, rest, { children: src ? _jsx("img", { src: src, width: size, height: size }) : _jsx(Profile, {}) })) }));
-};
-var templateObject_1;

package/ui/Elements/Avatar/index.js

@@ -1,3 +0,0 @@
-import { Avatar } from './Avatar';
-export { Avatar } from './Avatar';
-export default Avatar;

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

@@ -1,20 +0,0 @@
-import { Avatar } from '../Avatar';
-var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAGHgAABh4BYKUDGAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAfMSURBVHja5VtrUFNHFM5MZ/qj05+d6Y/+6ONPZ6oEFUSrlJbWqq1K0WnahBASeSsgJEFKIBVBFIjljUG0KhQES2XQolitINZWsTrUR+3g1OogViwqxSePQE733DxMyOsG7mKwd+abZG72nD3ny97ds+fs5QEAjyamCVa/yBcqgvgiRRJfJNd4ixQ15LOVoJPgvhH4vdX4m4ZpS2RQlrZ9VJR6C+SveAvlsXyhvJlgkADGCZRtRl2o06MJ8FkW/QJfmJRMDD5DoJ+A046gN+hOSsa+PIYAgUDwHF+UFEkM+5uC0w5A+iJ9Yt9PlQDvzxVLvUTyS5PnuDWwb7Rh0gmYGaJ8lRjQ9rQct4M2tGlSCPAWKf1Jh70e5LwJvWgbVQK8hUnhpKMhD3TehCG0kXMCcLIhS1GBBztuBbSV7QTJbpYXyvdNFectsI8NCSyG/dT55+2NhAkRYHzmYSrD1ZzgarYfmuoEMBOjk9XB2Trf+ww4b14iHcUJdgnwsCCHs2CJFQEYWj6DzhvmAzths82SRyO2nyFMggWicBCKP4UQ8QqnwDbYFmVo7B3GLo3WQ5/Z1XHXoZ8wHhSSQCiQ8qFYOt0toAzKog5OiSA+2iXAuJ/nbEvrI0yADWF+bjs+FqgDdXG5lbbMJ1hMfEwyg7OOPgkJsXGmNNIXKmIdk7I12he0Ub4291EXx/mEZDsEMJkczjpZHbrY7ECR1AuaSpXQ314D907vhjsndsKV7zVwtjIFft4SBxeq1XBt/1dwo7kEug8Ww0/liVAk8zLLoy6O54MzVgRgvo3rNFZC6AKzA99lSxjH7QGdtocD2U9GEOriOr1myjGa4v1YrmfcWMlHZgd6WivcJuBKQ65ZHnVR2CfEmgkwZm857SA8dJnhuY7xc+i8MwIQW2NmMzpQF4W4oJkhwJC3n1Dq2i5CxcsZ4+vTloybgNqUhYwO1EWBgEH0nccULShEXZ+FCAzPv3rZuAnY84VhIkVddKJDRRDPUIXhXnmwWGQgIH3puAmoS1nE6EBdVAggvvOYUhQF5dL4BNiR4D/hR+DruHmwMi6OEgFyDY+px3GseHOBhnGu72QVdFSrxk3AyfIE6GoqZL4XaTZwvxIQ33lMoZJDpYERKdB3qsap02wJGIvF0Slcj4BWHlOZ5TIAUmexdt5dAtZ+uY5rAjp5THn6/0vAfc4J8A1VwpWWSs4JuLy/COaGKakQ0Mn15JKZm8M5AZqcLBqrQCfnkyCTCxAroHxLPtxlMRm6cryboKJwI/iFKmgQ0EplGTShXpsxYQJOVWXQyxEal0ENrQ5KUsXmHMB4CMDcwO4sKb1EKQZCtEJhhHr1crhYZzsKug+XQvt2OTSuXwH1qo/heHEMXK7PtiHg120KyJULKBKAoTClzRAiQhIMVfJAK+ePFoQb0mPh3vCDNhkOlCQy3/He4TyJFQGViQEgC1tBMVVONkO0tsMITHGjY8eKoxjnOxs2mpMcNWnBcKJOA8d350G1Koi5VyLzgnPfpDHOH8oRM/cEYmojwLAdppUQYcLikEjIl81gHNlF/k1t5CyrZGdZ+AybBCi22RE/35Aal82Ed0XRtAhoppoSsyShMGK23SxwmXHo2/0tyg8CRFE0S+exVJOilpgnioVs6RzWBGxaORfeFq2iWSazTorSSIvbqxKlh813SQC2mS2Kp+m8bVqcRmHEUY2wtiKXyRLfPLoVelrK4c+GHDPaa3Op1ARZFUa4Lo05wp5dJeYlEYOkGwcNAU83+exoKJ6UU6Z2S2M0iqMmBESooLSqDrRl+XC9rcphJHjziBbaaotg795v4cPoNErBj4PiKNfl8blkW9y8WQX9u9JBPzIMeD34rdFpKNxDCOhp3cm01euG4HGlGtpL02G+hJuNkMvyOBcHJDIyMuGWVgm6NT6gk70GIxlLwHQNdJ11SUD/H8fN7VEWdaCue9uUUJSXTfeAxESOyMTIVXBfIwHdytcNRhsxkuxvdkg/qoMHFw5YEdDzY7kZt3+pI6NF94QAImupC3UPbA4DZaqa3hGZ8RySqt6kAt2q6dbGmrDKCywvvW4QHv910mYE9J0/AqPDA1ZtUda+zulwqNAtEtw7JOXOMblMtRp0MW/ZN9T4r5G/HsZeSISu/yYM3O6C0aHHYNtg1GY0WYH0WbaJVa7A/WNy7hyU7CpTODbSCH3vdXD3QhlXev/VJtI7KMn2qOzARoFrAs61uE8AkXGld1i9iO5RWVeHpX3EcsfPvgVGmyvcJgBlXOnFR0S2JpXuYWlnx+Xz1q9zbSSuBNuVbhOAMmx0d5Svo3tc3tkLE+fKVOwIyAxynwAiw0b3w8JI+i9MOHpl5l5+OCsjccYGvd6NCUDvfGWxRNKcyXtlZuxLUzrlfHZGEsCdG+wJIG3Z6kWoU1N/n7SXpiyxRxKYeVU6bZCNkfrzx9gPANKWjU7sG214qi9O1gumPd8gCaj6R/rmiNOV4NA29isAaetMF/aFfWLfHvPqbIXovZeaJP5NnVL+w2F7BHy9lj0BpK3Nmk+AurEP7MujX57eHrLQpzH0ndoO6azeR7I3DCtBVjD7FYC0RRmURR2oC3VOmbfHrcgQffByreT97H0RCxpbzlw83X7h8rVLV6/3dd+6O/RoYFCPwO94D3/DNtgWZVCWtn3/AWzVLmHYDS5oAAAAAElFTkSuQmCC';
-var meta = {
-    title: 'Elements/Avatar',
-    component: Avatar,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var Default = {
-    args: {
-        size: 100,
-    },
-};
-export var WithImage = {
-    args: {
-        size: 100,
-        src: image,
-    },
-};

package/ui/Elements/Avatar/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Elements/Badge/Badge.js

@@ -1,45 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import styled, { css, useTheme, th } from '@xstyled/styled-components';
-var Circle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"], ["\n  min-width: 12px;\n  display: flex;\n  align-items: center;\n  height: ", ";\n  padding: ", ";\n  color: white;\n  gap: 10px;\n  background-color: ", ";\n  border-radius: 29px;\n  line-height: 15.6px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: semiBold;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  z-index: 1;\n"])), function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '16px' : '24px');
-}, function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '0 5px' : '3px 8px');
-}, function (_a) {
-    var color = _a.color;
-    return color;
-}, th('fonts.primary'), function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '12px' : '14px');
-}, function (_a) {
-    var topPosition = _a.topPosition;
-    return topPosition && '-15%';
-}, function (_a) {
-    var horizontalPosition = _a.horizontalPosition;
-    return (horizontalPosition === 'middle' ? '50%' : '100%');
-});
-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
-        ? 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 ? 'red1' : _b, _c = _a.size, size = _c === void 0 ? 'default' : _c, label = _a.label, childWidth = _a.childWidth, topPosition = _a.topPosition, _d = _a.horizontalPosition, horizontalPosition = _d === void 0 ? 'middle' : _d;
-    var theme = useTheme();
-    var themeColor = th.color(color)({ theme: theme });
-    var badgeLabel = useMemo(function () {
-        return typeof label === 'number' ? (label >= 100 ? '99+' : label) : label;
-    }, [label]);
-    if (!label || (typeof label === 'number' && label <= 0)) {
-        return _jsx(_Fragment, { children: children });
-    }
-    return (_jsxs(RelativeWrap, { width: childWidth, children: [_jsx(Circle, { color: themeColor, size: size, topPosition: topPosition, horizontalPosition: horizontalPosition, children: _jsx("div", { className: "label", children: badgeLabel }) }), children] }));
-};
-export default Badge;
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Badge/index.js

@@ -1,3 +0,0 @@
-import Badge from './Badge';
-export { Badge };
-export default Badge;

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

@@ -1,34 +0,0 @@
-import Badge from '../Badge';
-var meta = {
-    title: 'Elements/Badge',
-    component: Badge,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var Default = {
-    args: {
-        children: '😀',
-        size: 'default',
-        childWidth: '30px'
-    }
-};
-export var DefaultWithLabelAndRightHorizontalPosition = {
-    args: {
-        children: '😀',
-        label: '10',
-        size: 'default',
-        horizontalPosition: 'right',
-        childWidth: '30px'
-    }
-};
-export var SmallWithLabel = {
-    args: {
-        children: '😃',
-        label: '10',
-        size: 'small',
-        color: 'darkGreen',
-        topPosition: true,
-        childWidth: '30px'
-    }
-};

package/ui/Elements/BarChartSymbol/BarChartSymbol.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { x } from '@xstyled/styled-components';
-import { Bar } from './styles';
-export var BarChartSymbol = function (_a) {
-    var _b = _a.total, total = _b === void 0 ? 3 : _b, _c = _a.height, height = _c === void 0 ? 14 : _c, _d = _a.minHeight, minHeight = _d === void 0 ? 7 : _d, _e = _a.selected, selected = _e === void 0 ? 3 : _e, _f = _a.gap, gap = _f === void 0 ? 2 : _f, _g = _a.width, width = _g === void 0 ? 3 : _g, color = _a.color;
-    return (_jsx(x.div, { display: "flex", alignItems: "flex-end", gap: "".concat(gap, "px"), children: Array.from({ length: total }).map(function (_, index) { return (_jsx(Bar, { total: total, index: index + 1, height: height, minHeight: minHeight, selected: selected, color: color, width: width }, index)); }) }));
-};

package/ui/Elements/BarChartSymbol/index.js

@@ -1 +0,0 @@
-export { BarChartSymbol } from './BarChartSymbol';

package/ui/Elements/BarChartSymbol/stories/BarChartSymbol.stories.js

@@ -1,26 +0,0 @@
-import { BarChartSymbol } from '../';
-var meta = {
-    title: 'Elements/BarChartSymbol',
-    component: BarChartSymbol,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var Default = {
-    args: {
-        selected: 3,
-        color: 'green'
-    }
-};
-export var MediumBarchChart = {
-    args: {
-        selected: 2,
-        color: 'orange',
-    }
-};
-export var LowBarChart = {
-    args: {
-        selected: 1,
-        color: 'red1',
-    }
-};

package/ui/Elements/BarChartSymbol/styles.js

@@ -1,16 +0,0 @@
-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, th } from '@xstyled/styled-components';
-export var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 7px;\n"])), function (_a) {
-    var width = _a.width;
-    return width;
-}, function (_a) {
-    var index = _a.index, height = _a.height, total = _a.total, minHeight = _a.minHeight;
-    return minHeight + (index - 1) * ((height - minHeight) / (total - 1));
-}, function (_a) {
-    var selected = _a.selected, index = _a.index, color = _a.color;
-    return (selected >= index ? th.color(color || 'red1') : th.color('lightGray6'));
-});
-var templateObject_1;

package/ui/Elements/BorderedBox/BorderedBox.js

@@ -1,35 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled, { x } from '@xstyled/styled-components';
-var StyledBox = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n  padding: 3;\n  border: slim;\n  border-color: lightGray3;\n  border-radius: md;\n"])));
-var BorderedBox = function (_a) {
-    var children = _a.children, className = _a.className, id = _a.id, rest = __rest(_a, ["children", "className", "id"]);
-    return (_jsx(StyledBox, __assign({ id: id, className: className }, rest, { children: children })));
-};
-export default BorderedBox;
-var templateObject_1;

package/ui/Elements/BorderedBox/index.js

@@ -1,3 +0,0 @@
-import BorderedBox from './BorderedBox';
-export { BorderedBox };
-export default BorderedBox;