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

package/ui/Elements/Link/stories/Link.stories.js

@@ -1,63 +0,0 @@
-import { Link } from '../';
-var meta = {
-    title: 'Elements/Link',
-    component: Link,
-    tags: ['autodocs'],
-    argTypes: {},
-    decorators: [],
-};
-export default meta;
-export var External = {
-    args: {
-        to: { pathname: 'https://www.inventi.cz/' },
-        size: 1,
-        target: '_blank',
-        children: "This is a link",
-    },
-};
-export var Success = {
-    args: {
-        to: { pathname: 'https://www.inventi.cz/' },
-        size: 1,
-        color: 'success',
-        children: "This is a link",
-    },
-};
-export var Warning = {
-    args: {
-        to: { pathname: 'https://www.inventi.cz/' },
-        size: 1,
-        color: 'success',
-        children: "This is a link",
-    },
-};
-export var Disabled = {
-    args: {
-        to: { pathname: 'https://www.inventi.cz/' },
-        size: 1,
-        target: '_blank',
-        disabled: true,
-        children: "This is a link",
-    },
-};
-export var Size3 = {
-    args: {
-        to: { pathname: 'https://www.inventi.cz/' },
-        size: 3,
-        children: "This is a link",
-    },
-};
-export var Size5 = {
-    args: {
-        to: { pathname: 'https://www.inventi.cz/' },
-        size: 5,
-        children: "This is a link",
-    },
-};
-export var Size7 = {
-    args: {
-        to: { pathname: 'https://www.inventi.cz/' },
-        size: 7,
-        children: "This is a link",
-    },
-};

package/ui/Elements/Logo/Logo.js

@@ -1,94 +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 logoBlackImage from './assets/mailship/logo_black.png';
-import logoMImage from './assets/mailship/logo_m.png';
-import logoWhiteImage from './assets/mailship/logo_white.png';
-import logoSvg from './assets/mailship/mailship-logo.svg';
-import logoMailstepBlack from './assets/mailstep/mailstep_black.svg';
-import logoMailstepWhite from './assets/mailstep/mailstep_white.svg';
-import logoMailstock from './assets/mailstock/mailstock.svg';
-import logoMailwise from './assets/mailwise/mailwiseLogo.svg';
-import logoMailwiseSmall from './assets/mailwise/mailwiseLogoSmall.svg';
-import logoMailwrap from './assets/mailwrap/mailwrapLogo.svg';
-import logoMailwrapSmall from './assets/mailwrap/mailwrapLogoSmall.svg';
-import warehouseManager2 from './assets/warehouse/manager2.svg';
-import warehouseManager3 from './assets/warehouse/manager3.svg';
-import warehouseManager from './assets/warehouse/manager.svg';
-import styled from '@xstyled/styled-components';
-var defaultSizes = {
-    small: '30px',
-    medium: '46px',
-    big: '61px' // cca 200px width on full logo
-};
-var variantMap = {
-    mailship: {
-        white: logoWhiteImage,
-        black: logoBlackImage,
-        m: logoMImage,
-        s: logoSvg
-    },
-    mailwise: {
-        black: logoMailwise,
-        s: logoMailwiseSmall
-    },
-    mailstock: {
-        black: logoMailstock
-    },
-    mailstep: {
-        black: logoMailstepBlack,
-        white: logoMailstepWhite
-    },
-    mailwrap: {
-        black: logoMailwrap,
-        s: logoMailwrapSmall
-    },
-    warehouse: {
-        black: warehouseManager,
-        m: warehouseManager2,
-        s: warehouseManager3
-    }
-};
-var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
-    var width = _a.width;
-    return width || 'auto';
-}, function (_a) {
-    var height = _a.height, width = _a.width, size = _a.size;
-    return height || (width ? 'auto' : size ? defaultSizes[size] : defaultSizes.medium);
-});
-var Logo = function (_a) {
-    var _b = _a.brand, brand = _b === void 0 ? 'mailship' : _b, variant = _a.variant, size = _a.size, width = _a.width, height = _a.height, rest = __rest(_a, ["brand", "variant", "size", "width", "height"]);
-    var variants = variantMap[brand];
-    var logo = variants === null || variants === void 0 ? void 0 : variants[variant];
-    if (!logo) {
-        console.warn('No variant for this logo exists.');
-        return null;
-    }
-    return _jsx(StyledImage, __assign({ src: logo, size: size, width: width, height: height }, rest));
-};
-export default Logo;
-var templateObject_1;

package/ui/Elements/Logo/index.js

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

package/ui/Elements/Logo/stories/Logo.stories.js

@@ -1,136 +0,0 @@
-import Logo from '../Logo';
-var meta = {
-    title: 'Elements/Logo',
-    component: Logo,
-    parameters: {
-        backgrounds: {
-            default: 'darkGray',
-            values: [
-                { name: 'darkGray', value: '#333' },
-                { name: 'lightGray', value: '#eee' }
-            ]
-        }
-    },
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var MailshipBlack = {
-    args: {
-        variant: 'black',
-        brand: 'mailship'
-    }
-};
-export var MailshipWhite = {
-    args: {
-        brand: 'mailship',
-        variant: 'white'
-    }
-};
-export var MailshipM = {
-    args: {
-        brand: 'mailship',
-        variant: 'm'
-    }
-};
-export var MailshipS = {
-    args: {
-        brand: 'mailship',
-        variant: 's'
-    }
-};
-export var MailwiseBlack = {
-    args: {
-        brand: 'mailwise',
-        variant: 'black'
-    }
-};
-export var MailwiseS = {
-    args: {
-        brand: 'mailwise',
-        variant: 's'
-    }
-};
-export var MailstockBlack = {
-    args: {
-        brand: 'mailstock',
-        variant: 'black'
-    }
-};
-export var MailwrapBlack = {
-    args: {
-        brand: 'mailwrap',
-        variant: 'black'
-    }
-};
-export var MailwrapS = {
-    args: {
-        brand: 'mailwrap',
-        variant: 's'
-    }
-};
-export var MailstepBlack = {
-    args: {
-        brand: 'mailstep',
-        variant: 'black'
-    }
-};
-export var MailstepWhite = {
-    args: {
-        brand: 'mailstep',
-        variant: 'white'
-    }
-};
-export var WarehouseManagerBlack = {
-    args: {
-        brand: 'warehouse',
-        variant: 'black'
-    }
-};
-export var WarehouseManagerM = {
-    args: {
-        brand: 'warehouse',
-        variant: 'm'
-    }
-};
-export var WarehouseManagerS = {
-    args: {
-        brand: 'warehouse',
-        variant: 's'
-    }
-};
-export var SizeSmall = {
-    args: {
-        variant: 'black',
-        brand: 'mailship',
-        size: 'small'
-    }
-};
-export var SizeMedium = {
-    args: {
-        variant: 'black',
-        brand: 'mailship',
-        size: 'medium'
-    }
-};
-export var SizeBig = {
-    args: {
-        variant: 'black',
-        brand: 'mailship',
-        size: 'big'
-    }
-};
-export var SizeCustomWidth = {
-    args: {
-        variant: 'black',
-        brand: 'mailship',
-        width: '400px'
-    }
-};
-export var SizeCustomHeight = {
-    args: {
-        variant: 'black',
-        brand: 'mailship',
-        height: '200px'
-    }
-};

package/ui/Elements/Logo/types.js

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

package/ui/Elements/Pagination/Pagination.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
-var Pagination = function (_a) {
-    var onPageChange = _a.onPageChange, _b = _a.itemPerPage, itemPerPage = _b === void 0 ? 3 : _b, _c = _a.itemCount, itemCount = _c === void 0 ? 0 : _c, page = _a.page, _d = _a.radius, radius = _d === void 0 ? 5 : _d, _e = _a.rate, rate = _e === void 0 ? 4 : _e, customPaginationHandler = _a.customPaginationHandler;
-    var setPage = useCallback(function (number) { return function () {
-        if (customPaginationHandler) {
-            customPaginationHandler(number, itemPerPage);
-            return;
-        }
-        if (onPageChange) {
-            onPageChange(number, itemPerPage);
-        }
-    }; }, [itemPerPage, onPageChange, customPaginationHandler]);
-    var pageX = page !== null && page !== void 0 ? page : 1;
-    var pageCount = Math.max(Math.ceil(itemCount / itemPerPage), 1);
-    var arrayOfPages = useMemo(function () {
-        var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
-        // first and last page are still visible
-        // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
-        if (pageCount < radius + 1) {
-            return pageNumbers.slice(1, pageCount - 1);
-            // if current page is less than radius (display first radius pages)
-        }
-        else if (pageX < radius) {
-            return pageNumbers.slice(1, Math.min(pageX + rate, radius));
-            // display last radius pages
-        }
-        else if (pageX > pageCount - Math.floor(radius / 2)) {
-            return pageNumbers.slice(pageCount - rate - 1, pageCount - 1);
-        }
-        else {
-            // display dispersion of 2 chars from current page (part between dots)
-            return pageNumbers.slice(pageX - Math.ceil(radius / 2), Math.min(pageX + Math.floor(radius / 2), pageCount - 1));
-        }
-    }, [pageCount, pageX]);
-    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), arrayOfPages[0] > 2 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), arrayOfPages[arrayOfPages.length - 1] < pageCount - 1 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
-};
-export default Pagination;

package/ui/Elements/Pagination/index.js

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

package/ui/Elements/Pagination/stories/Pagination.stories.js

@@ -1,48 +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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Pagination } from '../';
-var meta = {
-    title: 'Elements/Pagination',
-    component: Pagination,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-var withSetState = function (arg) {
-    var _a = useState(1), page = _a[0], setPage = _a[1];
-    return _jsx(Pagination, __assign({}, arg, { page: page, onPageChange: setPage }));
-};
-export var Default = {
-    args: {
-        itemCount: 100,
-        itemPerPage: 8,
-    },
-    render: withSetState,
-};
-export var ManyPages = {
-    args: {
-        itemCount: 1000,
-        itemPerPage: 8,
-    },
-    render: withSetState,
-};
-export var Shorter = {
-    args: {
-        itemCount: 100,
-        itemPerPage: 8,
-        radius: 3,
-        rate: 1,
-    },
-    render: withSetState,
-};

package/ui/Elements/Pagination/styled.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, { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-import Icon from '../Icon';
-export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"])));
-export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"], ["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 'default' : 'pointer');
-}, function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? 0 : 1);
-});
-export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
-export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"])));
-export var DotsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: gray1;\n"], ["\n  color: gray1;\n"])));
-export var PageBtn = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"])), function (_a) {
-    var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.color('red1') : th.color('gray1'));
-}, function (_a) {
-    var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('normal'));
-}, th('fonts.primary'));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/Portal/index.js

@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-import ReactDom from 'react-dom';
-export var Portal = function (_a) {
-    var children = _a.children;
-    var container = useState(function () { return document.createElement('div'); })[0];
-    useEffect(function () {
-        try {
-            document.body.appendChild(container);
-        }
-        catch (e) {
-            console.log(e);
-        }
-        return function () {
-            try {
-                document.body.removeChild(container);
-            }
-            catch (e) {
-                console.log(e);
-            }
-        };
-    }, []);
-    return ReactDom.createPortal(children, container);
-};
-export default Portal;

package/ui/Elements/ProgressBar/ProgressBar.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StyledProgressBar, Progress, ProgressDescription } from './styles';
-var ProgressBar = function (_a) {
-    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, status = _a.status, errorMessage = _a.errorMessage, noText = _a.noText, variant = _a.variant;
-    if (progress > 100 || progress < 0)
-        console.warn('Progress value should be number between 0 and 100.');
-    return (_jsxs(StyledProgressBar, { status: status, variant: variant, children: [_jsx(Progress, { progress: progress, status: status }), !noText && _jsx(ProgressDescription, { children: status === 'error' && errorMessage ? errorMessage : "".concat(progress, "%") })] }));
-};
-export default ProgressBar;

package/ui/Elements/ProgressBar/index.js

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

package/ui/Elements/ProgressBar/stories/ProgressBar.stories.js

@@ -1,27 +0,0 @@
-import ProgressBar from '../ProgressBar';
-var meta = {
-    title: 'Elements/ProgressBar',
-    component: ProgressBar,
-    tags: ['autodocs'],
-    argTypes: {},
-};
-export default meta;
-export var Loading = {
-    args: {
-        progress: 10,
-        status: "loading"
-    },
-};
-export var Finished = {
-    args: {
-        progress: 100,
-        status: "finished"
-    },
-};
-export var Error = {
-    args: {
-        progress: 30,
-        status: "error",
-        errorMessage: "There has been some issues on the way."
-    },
-};

package/ui/Elements/ProgressBar/styles.js

@@ -1,19 +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, { keyframes, css } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import { createRgba } from '../../utils';
-export var StyledProgressBar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"], ["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"])), function (props) { return (props.variant === 'thin' ? "12px" : "35px"); }, th('colors.white'), function (props) {
-    return props.status === 'finished' ? createRgba(props.theme.colors.success, 0.4) : "".concat(th('colors.red1'));
-}, function (props) { return (props.status === 'finished' ? "".concat(th('colors.success')) : "".concat(th('colors.red1'))); });
-var slide = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n0%{\n  background-position-x: 0%;\n}\n100% {\n  background-position-x: 500px;\n}\n"], ["\n0%{\n  background-position-x: 0%;\n}\n100% {\n  background-position-x: 500px;\n}\n"])));
-var StyledStatusFinished = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), function (props) { return createRgba(props.theme.colors.success, 0.4); }, function (props) { return createRgba(props.theme.colors.success, 0.4); }, th('colors.success'), th('colors.success'));
-var StyledStatusLoading = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), th('colors.red1'), th('colors.red1'), th('colors.red1'), th('colors.red1'));
-var StyledStatusError = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), th('colors.red1'), th('colors.red1'), th('colors.red1'), th('colors.red1'));
-export var Progress = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", ";\n  height: 35px;\n  animation: ", " 20s linear infinite;\n  transition: width 500ms;\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", ";\n  height: 35px;\n  animation: ", " 20s linear infinite;\n  transition: width 500ms;\n  ", "\n"])), function (props) { return "".concat(props.progress, "%"); }, slide, function (props) {
-    return props.status === 'finished' ? StyledStatusFinished : props.status === 'error' ? StyledStatusError : StyledStatusLoading;
-});
-export var ProgressDescription = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  align-self: center;\n"], ["\n  position: relative;\n  align-self: center;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/ui/Elements/Select/Select.js

@@ -1,111 +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 __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 };
-    }
-};
-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, useMemo } from 'react';
-import { ErrorMessage } from '../ErrorMessage';
-import { FieldLabel } from '../Label';
-import SpaceAroundWrap from '../SpaceAround';
-import { i18n } from '@lingui/core';
-import { useTheme } from '@xstyled/styled-components';
-import { Wrapper, StyledReactSelect, StyledAsyncSelect } from './styles';
-import { useStylesAndComponents } from './themes';
-var emptyOptions = [];
-var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
-var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
-var Select = function (_a) {
-    var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.shortValues, shortValues = _g === void 0 ? true : _g, _h = _a.shortVariant, shortVariant = _h === void 0 ? 'block' : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "shortValues", "shortVariant", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "onIconClick"]);
-    var isAsync = !!loadOptions;
-    if (showSelectAllButton && !isMulti) {
-        console.error('CheckboxSelect incompatible props');
-    }
-    var setAllOptions = useCallback(function (_a) {
-        var options = _a.options;
-        onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
-    }, [onChange, options]);
-    var unsetAllOptions = useCallback(function () {
-        if (typeof onChange === 'function') {
-            onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
-        }
-    }, [onChange]);
-    var icon = containerVariant === 'search' && !placeholderIcon && placeholderIcon !== null ? 'search' : placeholderIcon || undefined;
-    var modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
-    var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
-    var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
-    var selectedOption;
-    var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
-    if (Array.isArray(value)) {
-        selectedOption = (defaultOptions || options).filter(function (option) { return value.includes(localGetOptionValue(option)); });
-        selectedOption = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) ? selectedOption : null;
-    }
-    else if (value !== undefined) {
-        selectedOption = (defaultOptions || options).find(function (option) { return localGetOptionValue(option) === value; }) || null;
-    }
-    var theme = useTheme();
-    // strip extra params
-    var handleLoadOptions = useMemo(function () {
-        return loadOptions ? function (fulltext) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, loadOptions(fulltext)];
-                case 1: return [2 /*return*/, _a.sent()];
-            }
-        }); }); } : undefined;
-    }, [loadOptions]);
-    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant !== 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues, shortVariant: shortVariant, containerVariant: containerVariant }))] }), error && _jsx(ErrorMessage, { children: error })] }));
-};
-export default Select;

package/ui/Elements/Select/components/ChevronOption.js

@@ -1,23 +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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { components as selectComponents } from 'react-select';
-import Checkbox from '../../../Forms/Checkbox/Checkbox';
-import Toggle from '../../Toggle/Toggle';
-import SelectedIndicator from '../components/SelectedIndicator';
-export var ChevronOption = function (props) {
-    var theme = props.theme, isSelected = props.isSelected, selectOption = props.selectOption, children = props.children, data = props.data;
-    var showCheckbox = !!(theme.optionVariant == 'checkbox');
-    var showToggle = !!(theme.optionVariant == 'toggle');
-    return (_jsxs(selectComponents.Option, __assign({}, props, { children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", onChange: selectOption, checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx("span", { className: "label", "data-cy": "dropdownModalOption".concat(data.index), children: children })] })));
-};
-export default ChevronOption;