@mailstep/design-system 0.8.25 → 0.8.26-beta.1

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

@@ -1,43 +0,0 @@
-import Text from '../Text';
-var meta = {
-    title: 'Elements/Text',
-    component: Text,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var Default = {
-    args: {
-        children: 'This is a text',
-    },
-};
-export var FontSize = {
-    args: {
-        children: 'This is a text font-size 10',
-        fontSize: 10,
-    },
-};
-export var FontWeight = {
-    args: {
-        children: 'This is a text font-weight bold',
-        fontWeight: 'bold',
-    },
-};
-export var VariantMedium = {
-    args: {
-        children: 'This is a text font-weight bold',
-        variant: 'medium',
-    },
-};
-export var VariantSemibold = {
-    args: {
-        children: 'This is a text font-weight bold',
-        variant: 'semiBold',
-    },
-};
-export var VariantBold = {
-    args: {
-        children: 'This is a text font-weight bold',
-        variant: 'bold',
-    },
-};

package/ui/Elements/Text/types.js

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

package/ui/Elements/Toast/Toast.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { Icon } from '../Icon';
-import { x } from '@xstyled/styled-components';
-import { toastTitleMap, toastIconMap, toastIconFill } from './constants';
-import { Title, Text, ContentWrapper, CloseWrapper, Container } from './styles';
-var Toast = function (_a) {
-    var closeToast = _a.closeToast, title = _a.title, text = _a.text, type = _a.type, autoClose = _a.autoClose;
-    var icon = toastIconMap[type];
-    var fill = toastIconFill[type];
-    useEffect(function () {
-        if (!autoClose)
-            return;
-        var timer = setTimeout(function () { return closeToast === null || closeToast === void 0 ? void 0 : closeToast(); }, autoClose);
-        return function () {
-            clearTimeout(timer);
-        };
-    }, []);
-    return (_jsxs(Container, { autoClose: autoClose, fill: fill, children: [_jsx(x.div, { mx: "12px", children: _jsx(Icon, { icon: icon, fill: fill, size: "20px" }) }), _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" }) }) })] })] }));
-};
-export default Toast;

package/ui/Elements/Toast/constants.js

@@ -1,18 +0,0 @@
-export var toastIconMap = {
-    info: 'info',
-    success: 'circleCheck',
-    error: 'circleX',
-    warning: 'circleTriangle',
-};
-export var toastIconFill = {
-    info: 'blue2',
-    success: 'darkGreen',
-    error: 'red1',
-    warning: 'yellow1',
-};
-export var toastTitleMap = {
-    info: 'Info',
-    success: 'Success',
-    error: 'Error',
-    warning: 'Warning',
-};

package/ui/Elements/Toast/index.js

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

package/ui/Elements/Toast/stories/Toast.stories.js

@@ -1,36 +0,0 @@
-import Toast from '../Toast';
-var meta = {
-    title: 'Elements/Toast',
-    component: Toast,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var Info = {
-    args: {
-        type: 'info',
-        title: 'Title of info toast',
-        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
-    }
-};
-export var Success = {
-    args: {
-        type: 'success',
-        title: 'Title of success toast',
-        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
-    }
-};
-export var Error = {
-    args: {
-        type: 'error',
-        title: 'Title of error toast',
-        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
-    }
-};
-export var Warning = {
-    args: {
-        type: 'warning',
-        title: 'Title of warning toast',
-        text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac leo pretium faucibus. Aenean placerat. In convallis. Ut tempus purus at lorem. Pellentesque arcu. '
-    }
-};

package/ui/Elements/Toast/styles.js

@@ -1,22 +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, keyframes, th } from '@xstyled/styled-components';
-export 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'));
-export 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'));
-export 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"])));
-export var CloseWrapper = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"], ["\n  display: flex;\n  align-items: flex-start;\n  margin-left: 15px;\n\n  svg {\n    cursor: pointer;\n  }\n"])));
-var timerAnimation = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    to {\n       transform: scaleX(0)\n    }\n"], ["\n    to {\n       transform: scaleX(0)\n    }\n"])));
-var after = function (autoClose) { return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"], ["\n  &:after {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    content: '';\n    height: 4px;\n    width: 100%;\n    transform-origin: left center;\n    animation: ", " ", "ms linear;\n    border-radius: ", ";\n    background-color: ", ";\n  }\n"])), timerAnimation, autoClose, th.radius('lg'), th.color('lightGray5')); };
-export var Container = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"], ["\n  display: flex;\n  position: relative;\n  background-color: white;\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: 10px;\n\n  @media ", " {\n    font-size: 14px;\n  }\n\n  &:before {\n    position: absolute;\n    top: 5px;\n    bottom: 5px;\n    left: 5px;\n    content: '';\n    width: 4px;\n    ", ";\n    border-radius: ", ";\n    background-color: ", ";\n  }\n\n  ", ";\n"])), th.radius('lg'), th.shadow('cornerDialogShadow'), '(max-width: 576px)', function (_a) {
-    var autoClose = _a.autoClose;
-    return autoClose && 'bottom: 8px';
-}, th.radius('lg'), function (_a) {
-    var fill = _a.fill;
-    return th.color(fill);
-}, function (_a) {
-    var autoClose = _a.autoClose;
-    return autoClose && after(autoClose);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Toggle/Toggle.js

@@ -1,62 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldLabel } from '../Label';
-import { SpaceAroundWrap } from '../SpaceAround';
-import styled, { css } from '@xstyled/styled-components';
-var isHorizontal = function (position) { return position && ['left', 'right'].includes(position); };
-var StyledSpaceAroundWrap = styled(SpaceAroundWrap)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  ", "\n"])), function (_a) {
-    var labelPosition = _a.labelPosition;
-    return labelPosition === 'left' ? 'row' : labelPosition === 'right' ? 'row-reverse' : 'column';
-}, function (_a) {
-    var labelPosition = _a.labelPosition, labelJustify = _a.labelJustify;
-    return labelPosition === 'right' ? 'flex-end' : labelJustify === 'between' ? 'space-between' : 'flex-start';
-}, function (_a) {
-    var labelPosition = _a.labelPosition;
-    return (isHorizontal(labelPosition) ? 'margin-top: 1rem' : '');
-});
-var StyledFieldLabel = styled(FieldLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  ", "\n  ", "\n"], ["\n  cursor: pointer;\n  ", "\n  ", "\n"])), function (_a) {
-    var labelPosition = _a.labelPosition;
-    return (isHorizontal(labelPosition) ? 'margin-bottom: 0;' : '');
-}, function (_a) {
-    var labelPosition = _a.labelPosition;
-    return labelPosition === 'left' ? 'margin-right: 1rem;' : labelPosition === 'right' ? 'margin-left: 1rem;' : '';
-});
-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.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, labelJustify = _a.labelJustify, _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", "labelJustify", "variant", "spaceBetween", "readOnly"]);
-    return (_jsxs(StyledSpaceAroundWrap, { spaceBetween: spaceBetween, spaceAround: spaceAround, labelPosition: labelPosition, labelJustify: labelJustify, children: [label && (_jsx(StyledFieldLabel, { htmlFor: name, labelPosition: labelPosition, children: label })), _jsxs(Wrapper, { "data-appearance": variant, children: [_jsx(HiddenInput, { id: name, name: name, type: "checkbox", checked: checked, "$enabled": !disabled, defaultChecked: defaultChecked, onChange: !disabled ? onChange : undefined, disabled: disabled, "data-cy": name ? "".concat(name, "Switch") : undefined, "data-testid": name ? "toggle-".concat(name) : undefined, readOnly: readOnly }), _jsx(StyledToggle, __assign({ active: !!checked, disabled: disabled }, rest, { children: _jsx(StyledDot, {}) }))] })] }));
-};
-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,3 +0,0 @@
-import Toggle from './Toggle';
-export { Toggle };
-export default Toggle;

package/ui/Elements/Toggle/stories/Toggle.stories.js

@@ -1,64 +0,0 @@
-import Toggle from '../Toggle';
-var meta = {
-    title: 'Elements/Toggle',
-    component: Toggle,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var Default = {
-    args: {
-        name: 'name',
-        label: 'Label',
-        onChange: console.log
-    }
-};
-export var Checked = {
-    args: {
-        name: 'name',
-        label: 'Label',
-        checked: true,
-        onChange: console.log
-    }
-};
-export var Disabled = {
-    args: {
-        name: 'name',
-        label: 'Label',
-        checked: true,
-        disabled: true
-    }
-};
-export var LabelRight = {
-    args: {
-        name: 'name',
-        label: 'Label',
-        checked: true,
-        labelPosition: 'right'
-    }
-};
-export var LabelLeft = {
-    args: {
-        name: 'name',
-        label: 'Label',
-        checked: true,
-        labelPosition: 'left'
-    }
-};
-export var LabelJustifyBetween = {
-    args: {
-        name: 'name',
-        label: 'Label',
-        checked: true,
-        labelPosition: 'left',
-        labelJustify: 'between'
-    }
-};
-export var VariantGrid = {
-    args: {
-        name: 'name',
-        label: 'Label',
-        checked: true,
-        variant: 'grid'
-    }
-};

package/ui/Elements/Toggle/types.js

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

package/ui/Elements/Tooltip/Tooltip.js

@@ -1,25 +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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import Popover from '../../Blocks/Popover';
-import { Paragraph4 } from '../Typography';
-import styled from '@xstyled/styled-components';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n"], ["\n  width: fit-content;\n"])));
-var TooltipWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: white;\n  padding: 8px 10px;\n  margin-top: 4px;\n  border-radius: 8px;\n  box-shadow: tooltipShadow;\n  gap: 2px;\n"])));
-var Tooltip = function (_a) {
-    var children = _a.children, placement = _a.placement, title = _a.title, subtitle = _a.subtitle;
-    var _b = useState(false), visible = _b[0], setVisible = _b[1];
-    var ref = useRef(null);
-    var handleMouseEnter = function () {
-        setVisible(true);
-    };
-    var handleMouseLeave = function () {
-        setVisible(false);
-    };
-    return (_jsxs(Container, { ref: ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [children, visible && (_jsx(Popover, { parentRef: ref, placement: placement !== null && placement !== void 0 ? placement : 'bottom', children: _jsxs(TooltipWrapper, { children: [title && (_jsx(Paragraph4, { mt: 1, mb: 1, variant: "bold", children: title })), subtitle && (_jsx(Paragraph4, { mt: 1, mb: 1, children: subtitle }))] }) }))] }));
-};
-export default Tooltip;
-var templateObject_1, templateObject_2;

package/ui/Elements/Tooltip/index.js

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

package/ui/Elements/Tooltip/stories/Tooltip.stories.js

@@ -1,15 +0,0 @@
-import Tooltip from '../Tooltip';
-var meta = {
-    title: 'Elements/Tooltip',
-    component: Tooltip,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var Default = {
-    args: {
-        children: '😀',
-        title: 'title',
-        subtitle: 'subtitle',
-    },
-};

package/ui/Elements/Typography/Typography.js

@@ -1,46 +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 } from "react/jsx-runtime";
-import { Text as BaseText } from '../Text';
-export var Text = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'p' : _b, _c = _a.fontFamily, fontFamily = _c === void 0 ? 'primary' : _c, _d = _a.fontSize, fontSize = _d === void 0 ? '10px' : _d, variant = _a.variant, props = __rest(_a, ["as", "fontFamily", "fontSize", "variant"]);
-    return (_jsx(BaseText, __assign({ as: as, fontFamily: fontFamily, fontSize: fontSize, fontWeight: variant }, props)));
-};
-var BaseHeading = function (_a) {
-    var _b = _a.fontFamily, fontFamily = _b === void 0 ? 'heading' : _b, _c = _a.mb, mb = _c === void 0 ? 2 : _c, _d = _a.mt, mt = _d === void 0 ? 2 : _d, props = __rest(_a, ["fontFamily", "mb", "mt"]);
-    return (_jsx(Text, __assign({ fontFamily: fontFamily, mt: mt, mb: mb }, props)));
-};
-// Paragraphs
-export var Paragraph1 = function (props) { return _jsx(Text, __assign({ fontSize: "18px" }, props)); };
-export var Paragraph2 = function (props) { return _jsx(Text, __assign({ fontSize: "16px" }, props)); };
-export var Paragraph3 = function (props) { return _jsx(Text, __assign({ fontSize: "14px" }, props)); };
-export var Paragraph4 = function (props) { return _jsx(Text, __assign({ fontSize: "12px" }, props)); };
-export var Paragraph5 = function (props) { return _jsx(Text, __assign({ fontSize: "10px" }, props)); };
-// Headings
-export var H1 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "32px", as: "h1" }, props)); };
-export var H2 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "24px", as: "h2" }, props)); };
-export var H3 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "21px", as: "h3" }, props)); };
-export var H4 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "18px", as: "h4" }, props)); };
-export var H5 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "16px", as: "h5" }, props)); };
-export var H6 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "14px", as: "h6" }, props)); };
-export var H7 = function (props) { return _jsx(BaseHeading, __assign({ fontSize: "12px", as: "h6" }, props)); };

package/ui/Elements/Typography/index.js

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

package/ui/Elements/Typography/stories/Typography.stories.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { H1, H2, H3, H4, H5, H6, H7, Paragraph1, Paragraph2, Paragraph3, Paragraph4, Paragraph5 } from '../';
-var meta = {
-    title: 'Elements/Typography',
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var Heading1 = { render: function () { return _jsx(H1, { children: "Heading H1" }); } };
-export var Heading2 = { render: function () { return _jsx(H2, { children: "Heading H2" }); } };
-export var Heading3 = { render: function () { return _jsx(H3, { children: "Heading H3" }); } };
-export var Heading4 = { render: function () { return _jsx(H4, { children: "Heading H4" }); } };
-export var Heading5 = { render: function () { return _jsx(H5, { children: "Heading H5" }); } };
-export var Heading6 = { render: function () { return _jsx(H6, { children: "Heading H6" }); } };
-export var Heading7 = { render: function () { return _jsx(H7, { children: "Heading H7" }); } };
-export var P1 = { render: function () { return _jsx(Paragraph1, { children: "Paragraph1" }); } };
-export var P2 = { render: function () { return _jsx(Paragraph2, { children: "Paragraph1" }); } };
-export var P3 = { render: function () { return _jsx(Paragraph3, { children: "Paragraph1" }); } };
-export var P4 = { render: function () { return _jsx(Paragraph4, { children: "Paragraph1" }); } };
-export var P5 = { render: function () { return _jsx(Paragraph5, { children: "Paragraph1" }); } };

package/ui/Forms/Checkbox/Checkbox.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useId } from 'react';
-import { th, useTheme } from '@xstyled/styled-components';
-import { CheckboxWrap, CheckIcon, FakeInput, Label } from './styles';
-var Checkbox = function (_a) {
-    var name = _a.name, label = _a.label, onChange = _a.onChange, checked = _a.checked, defaultChecked = _a.defaultChecked, _b = _a.size, size = _b === void 0 ? 4 : _b, className = _a.className, disabled = _a.disabled, inputRef = _a.inputRef, readOnly = _a.readOnly, _c = _a.minusIcon, minusIcon = _c === void 0 ? false : _c;
-    var theme = useTheme();
-    var themeSize = th.fontSize(size)({ theme: theme });
-    var id = useId();
-    return (_jsxs(CheckboxWrap, { size: themeSize, className: className, children: [_jsx("input", { type: "checkbox", ref: inputRef, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, value: "", readOnly: readOnly, "data-cy": name ? "".concat(name, "Checkbox") : undefined, "data-testid": name ? "checkbox-".concat(name) : undefined, id: id }), _jsx(FakeInput, { size: themeSize, children: _jsx(CheckIcon, { icon: minusIcon ? 'minus' : 'check', size: themeSize }) }), label && _jsx(Label, { htmlFor: id, children: label })] }));
-};
-export default memo(Checkbox);

package/ui/Forms/Checkbox/index.js

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

package/ui/Forms/Checkbox/stories/Checkbox.stories.js

@@ -1,35 +0,0 @@
-import Checkbox from '../Checkbox';
-var meta = {
-    title: 'Forms/Checkbox',
-    component: Checkbox,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var CheckboxChecked = {
-    args: {
-        checked: true,
-        onChange: function () { return console.log('Clicked'); },
-        label: 'Checked',
-    },
-};
-export var CheckboxUnchecked = {
-    args: {
-        checked: false,
-        label: 'Unchecked',
-    },
-};
-export var CheckboxDisabled = {
-    args: {
-        checked: true,
-        label: 'Disabled',
-        disabled: true,
-    },
-};
-export var CheckboxWithMinusIcon = {
-    args: {
-        checked: true,
-        label: 'Minus Icon',
-        minusIcon: true,
-    },
-};

package/ui/Forms/Checkbox/styles.js

@@ -1,26 +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';
-import { Icon } from '../../Elements/Icon';
-export var FakeInput = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"], ["\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  border-radius: md;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  transform: rotate(0);\n  overflow: hidden;\n  border: slim;\n  border-color: lightGray5;\n\n  input[type='checkbox']:not(:disabled):hover + & {\n    border-color: gray1;\n  }\n\n  input[type='checkbox']:disabled + & {\n    background-color: white;\n    border-color: lightGray7;\n  }\n\n  input[type='checkbox']:checked:disabled + & {\n    background-color: bgLightGray1;\n    border-color: bgLightGray1;\n  }\n\n  input[type='checkbox']:checked:not(:disabled) + & {\n    transform: rotate(0deg);\n    background-color: red1;\n    border-color: red1;\n  }\n\n  input[type='checkbox']:not(:checked):not(:disabled) + & {\n    transform: rotate(90deg);\n    background-color: white;\n    border-color: lightGray5;\n  }\n"])), function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var size = _a.size;
-    return size;
-});
-export var CheckIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: lg;\n  transition: all 200ms ease;\n  & svg {\n    width: 70% !important;\n  }\n  & path {\n    fill: none;\n    stroke: none;\n  }\n\n  input[type='checkbox']:not(:disabled):checked + ", " & {\n    & path {\n      stroke: white;\n      fill: white;\n    }\n  }\n\n  input[type='checkbox']:disabled:checked + ", " & {\n    & path {\n      fill: ", " !important;\n    }\n  }\n"], ["\n  border-radius: lg;\n  transition: all 200ms ease;\n  & svg {\n    width: 70% !important;\n  }\n  & path {\n    fill: none;\n    stroke: none;\n  }\n\n  input[type='checkbox']:not(:disabled):checked + ", " & {\n    & path {\n      stroke: white;\n      fill: white;\n    }\n  }\n\n  input[type='checkbox']:disabled:checked + ", " & {\n    & path {\n      fill: ", " !important;\n    }\n  }\n"])), FakeInput, FakeInput, th.color('lightGray5'));
-export var CheckboxWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n\n  input {\n    margin: 0;\n    width: ", ";\n    height: ", ";\n    z-index: 1;\n    position: absolute;\n    opacity: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    cursor: pointer;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n\n  input {\n    margin: 0;\n    width: ", ";\n    height: ", ";\n    z-index: 1;\n    position: absolute;\n    opacity: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    cursor: pointer;\n  }\n"])), function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var size = _a.size;
-    return size;
-});
-export var Label = styled.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"], ["\n  margin: 0;\n  margin-left: 8px;\n  font-size: 14px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Forms/Checkbox/types.js

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

package/ui/Forms/Input/Input.js

@@ -1,66 +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 { useCallback, useEffect, useRef } from 'react';
-import { ErrorMessage } from '../../Elements/ErrorMessage';
-import { Icon } from '../../Elements/Icon';
-import { FieldLabel } from '../../Elements/Label';
-import { SpaceAroundWrap } from '../../Elements/SpaceAround';
-import { Spinner } from '../../Elements/Spinner';
-import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
-var allowedInputTypes = ['text', 'number', 'password'];
-export var Input = function (_a) {
-    var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, disabled = _a.disabled, error = _a.error, _d = _a.isInvalid, isInvalid = _d === void 0 ? undefined : _d, _e = _a.spaceAround, spaceAround = _e === void 0 ? false : _e, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _f = _a.iconPlacement, iconPlacement = _f === void 0 ? 'left' : _f, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _g = _a.showArrowsController, showArrowsController = _g === void 0 ? false : _g, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _h = _a.forceFocus, forceFocus = _h === void 0 ? false : _h, _j = _a.autoFocus, autoFocus = _j === void 0 ? false : _j, onBlur = _a.onBlur, _k = _a.asTextArea, asTextArea = _k === void 0 ? false : _k, rest = __rest(_a, ["appearance", "type", "name", "label", "value", "icon", "variant", "disabled", "error", "isInvalid", "spaceAround", "inputRef", "autoComplete", "isLoading", "className", "suffix", "suffixOnClick", "errorAppearance", "iconPlacement", "iconOnClick", "iconTooltip", "big", "showArrowsController", "onClear", "alwaysShowClear", "setNumber", "onEnter", "forceFocus", "autoFocus", "onBlur", "asTextArea"]);
-    var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
-    var $isClearable = !!onClear && (!!value || alwaysShowClear) && !isLoading;
-    var $hasSuffix = !!suffix;
-    var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;
-    var onAddItem = useCallback(function () {
-        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function (base) { return base + 1; });
-    }, [setNumber]);
-    var onRemoveItem = useCallback(function () {
-        setNumber === null || setNumber === void 0 ? void 0 : setNumber(function (base) { return (base > 1 ? base - 1 : 1); });
-    }, [setNumber]);
-    var internalRef = useRef(null);
-    var ref = (inputRef || internalRef);
-    useEffect(function () {
-        var _a;
-        forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());
-    }, [disabled, forceFocus, isLoading]);
-    var handleBlur = useCallback(function (event) {
-        var _a, _b, _c, _d, _e;
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-        //  If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus
-        if (forceFocus &&
-            (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' ||
-                !allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {
-            (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
-        }
-    }, [forceFocus, onBlur]);
-    var handleKeyDown = useCallback(function (event) {
-        if (event.key === 'Enter') {
-            onEnter === null || onEnter === void 0 ? void 0 : onEnter();
-        }
-    }, [onEnter]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": name ? "".concat(name, "Inp") : undefined, "data-testid": name ? "input-".concat(name) : undefined, value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
-};

package/ui/Forms/Input/index.js

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