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

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

@@ -1,27 +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 { useMemo } from 'react';
-import { components as selectComponents } from 'react-select';
-import SelectAll from '../components/SelectAll';
-var ConnectedMenu = function (props) {
-    var theme = props.theme;
-    var _a = props.selectProps, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
-    // because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
-    // we need to specify them here by children
-    var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
-        var _b = _a.props, value = _b.value, label = _b.label;
-        return ({ label: label, value: value });
-    }); }, [props.children]);
-    return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children] })));
-};
-export default ConnectedMenu;

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

@@ -1,46 +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);
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { components as selectComponents } from 'react-select';
-import styled, { th } from '@xstyled/styled-components';
-// MultiValue container with count of selected options
-var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"], ["\n  background: ", ";\n  height: 25px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  border-radius: md;\n  padding: 2px 6px;\n"])), th.color('lightGray7'));
-var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  white-space: nowrap;\n  position: absolute;\n  color: gray3;\n  padding-left: ", ";\n"], ["\n  white-space: nowrap;\n  position: absolute;\n  color: gray3;\n  padding-left: ", ";\n"])), function (_a) {
-    var isFocused = _a.isFocused;
-    return (isFocused ? '8px' : '0');
-});
-var CountMultiValue = function (props) {
-    var _a;
-    var shortValues = props.selectProps.shortValues;
-    var selectVal = props.selectProps.value;
-    var inputVal = props.selectProps.inputValue;
-    var shortVariant = props.selectProps.shortVariant;
-    var data = props.data;
-    var isFirst = (data === null || data === void 0 ? void 0 : data.value) === ((_a = selectVal[0]) === null || _a === void 0 ? void 0 : _a.value);
-    var menuIsOpen = props.selectProps.menuIsOpen;
-    if (!shortValues) {
-        return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
-    }
-    if (!isFirst || inputVal) {
-        return null;
-    }
-    if (shortVariant === 'join') {
-        return (_jsxs(JoinedMultiValue, { isFocused: menuIsOpen, children: [selectVal.length > 1 ? "(".concat(Number(selectVal.length), ") ") : '', selectVal.map(function (option) { return option.label; }).join(', ')] }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
-};
-export default CountMultiValue;
-var templateObject_1, templateObject_2;

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

@@ -1,19 +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 { components as selectComponents } from 'react-select';
-export var CustomInput = function (props) {
-    var name = props.selectProps.name;
-    var value = !!name ? "".concat(name, "Inp") : props.id;
-    return _jsx(selectComponents.Input, __assign({}, props, { "data-cy": value }));
-};
-export default CustomInput;

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

@@ -1,29 +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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { components as selectComponents } from 'react-select';
-import { ArrowDown } from '../../Icon/icons/ArrowDown';
-import { ArrowUp } from '../../Icon/icons/ArrowUp';
-import styled from '@xstyled/styled-components';
-// Option with chevron form new design
-var ChevronDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-self: center;\n  display: flex;\n"], ["\n  align-self: center;\n  display: flex;\n"])));
-export var DropdownIndicator = function (props) {
-    var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
-    var iconColor = props.theme.colors.placeholderTextColor;
-    return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name || '', "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px", stroke: iconColor }) : _jsx(ArrowDown, { width: "16px", stroke: iconColor }) }) })));
-};
-export default DropdownIndicator;
-var templateObject_1;

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

@@ -1,46 +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, jsxs as _jsxs } from "react/jsx-runtime";
-import { components } from 'react-select';
-import Icon from '../../Icon/Icon';
-import styled from '@xstyled/styled-components';
-// Value container with icon
-var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: 7px;\n  margin-right: -3px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"], ["\n  padding-left: 7px;\n  margin-right: -3px;\n  align-self: center;\n  & > * {\n    color: ", ";\n  }\n"])), function (_a) {
-    var hasValue = _a.hasValue;
-    return (hasValue ? 'black' : '#a3b3c1');
-});
-var IconValueContainer = function (props) {
-    var _a, _b;
-    // eslint-disable-next-line react/prop-types
-    var children = props.children, rest = __rest(props, ["children"]);
-    var icon = (_a = rest.selectProps) === null || _a === void 0 ? void 0 : _a.icon;
-    var hasValue = rest.hasValue;
-    var onIconClick = (_b = rest.selectProps) === null || _b === void 0 ? void 0 : _b.onIconClick;
-    return (_jsxs(_Fragment, { children: [icon && (_jsx(IconDiv, { className: "inputIcon", hasValue: hasValue, onMouseDown: onIconClick, children: _jsx(Icon, { icon: icon }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
-};
-export default IconValueContainer;
-var templateObject_1;

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

@@ -1,59 +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 { useCallback, useState, useEffect, useRef } from 'react';
-import Checkbox from '../../../Forms/Checkbox/Checkbox';
-import Toggle from '../../Toggle/Toggle';
-import SelectedIndicator from '../components/SelectedIndicator';
-import { Trans } from '@lingui/react';
-import styled, { th } from '@xstyled/styled-components';
-var SelectAllWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: 0px 2px 1px 0px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  margin: 0px 2px 1px 0px;\n  padding: ", ";\n  font-weight: 400;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 6px;\n  height: 36px;\n  cursor: pointer;\n\n  :hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
-    var additionalPadding = _a.additionalPadding;
-    return (additionalPadding ? '8px 27px 8px 10px' : '10px 10px');
-}, function (_a) {
-    var isSelected = _a.isSelected;
-    return (isSelected ? th.color('red20') : 'transparent');
-}, function (_a) {
-    var isSelected = _a.isSelected;
-    return (isSelected ? th.color('red1') : th.color('textPrimary'));
-}, function (_a) {
-    var isSelected = _a.isSelected;
-    return (isSelected ? th.color('red30') : th.color('bgLightGray1'));
-});
-var SelectAll = function (_a) {
-    var onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, options = _a.options, maxMenuHeight = _a.maxMenuHeight, theme = _a.theme;
-    var showCheckbox = !!(theme.optionVariant === 'checkbox');
-    var showToggle = !!(theme.optionVariant === 'toggle');
-    var ref = useRef(null);
-    var _b = useState(false), additionalPadding = _b[0], setAdditionalPadding = _b[1];
-    var _c = useState(false), isSelected = _c[0], setIsSelected = _c[1];
-    var handleSelectAll = useCallback(function () {
-        if (!isSelected) {
-            setIsSelected(true);
-            onCustomSelectAll({ options: options });
-        }
-        else if (isSelected) {
-            setIsSelected(false);
-            onCustomDeselectAll();
-        }
-    }, [isSelected, onCustomDeselectAll, onCustomSelectAll, options]);
-    useEffect(function () {
-        var _a;
-        // if the height of all options is higher than maxMenuHeight and the slider is displayed => the indentation needs to be increased
-        ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) && setAdditionalPadding(ref.current.offsetHeight * ((options === null || options === void 0 ? void 0 : options.length) || 0) > maxMenuHeight);
-    }, [additionalPadding, maxMenuHeight, options === null || options === void 0 ? void 0 : options.length, value]);
-    useEffect(function () {
-        if (value && Array.isArray(value)) {
-            (options === null || options === void 0 ? void 0 : options.length) === value.length && setIsSelected(true);
-            (options === null || options === void 0 ? void 0 : options.length) !== value.length && setIsSelected(false);
-        }
-    }, [maxMenuHeight, options === null || options === void 0 ? void 0 : options.length, value]);
-    if (!(options === null || options === void 0 ? void 0 : options.length)) {
-        return null;
-    }
-    return (_jsxs(SelectAllWrap, { isSelected: isSelected, onClick: handleSelectAll, ref: ref, additionalPadding: additionalPadding, children: [(showCheckbox || showToggle) && (_jsxs(SelectedIndicator, { children: [showCheckbox && _jsx(Checkbox, { checked: isSelected, size: 2, readOnly: true }), showToggle && _jsx(Toggle, { name: "", checked: isSelected, spaceAround: false, variant: 'grid' })] })), _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: 'select all' }), " (", options === null || options === void 0 ? void 0 : options.length, ")"] }));
-};
-export default SelectAll;
-var templateObject_1;

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

@@ -1,8 +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 '@xstyled/styled-components';
-var SelectedIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-right: 12px;\n"], ["\n  padding-right: 12px;\n"])));
-export default SelectedIndicator;
-var templateObject_1;

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

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, memo } from 'react';
-// Option for big lists
-var SimplifiedOptionInner = function (props) {
-    var styles = props.getStyles('option', props);
-    var data = props.data, selectOption = props.selectOption, innerProps = props.innerProps;
-    var handleClick = useCallback(function () { return selectOption(data); }, [data, selectOption]);
-    return (_jsx("div", { style: styles, onClick: handleClick, onMouseOver: innerProps.onMouseOver, onMouseMove: innerProps.onMouseMove, children: props.label }));
-};
-var SimplifiedOption = memo(SimplifiedOptionInner, function (prevProps, nextProps) { var _a, _b; return prevProps.isFocused === nextProps.isFocused && ((_a = prevProps.data) === null || _a === void 0 ? void 0 : _a.label) === ((_b = nextProps.data) === null || _b === void 0 ? void 0 : _b.label); });
-export default SimplifiedOption;

package/ui/Elements/Select/index.js

@@ -1,2 +0,0 @@
-import Select from './Select';
-export default Select;

package/ui/Elements/Select/styles.js

@@ -1,12 +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 '@xstyled/styled-components';
-import ReactSelect from 'react-select';
-import AsyncSelect from 'react-select/async';
-import { system } from '@xstyled/system';
-export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-export var StyledReactSelect = styled(ReactSelect)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
-export var StyledAsyncSelect = styled(AsyncSelect)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
-var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Select/themes/index.js

@@ -1,42 +0,0 @@
-import { useMemo } from 'react';
-import ChevronOption from '../components/ChevronOption';
-import ConnectedMenu from '../components/ConnectedMenu';
-import CountMultiValue from '../components/CountMultiValue';
-import CustomInput from '../components/CustomInput';
-import DropdownIndicator from '../components/DropdownIndicator';
-import IconValueContainer from '../components/IconValueContainer';
-import SimplifiedOption from '../components/SimplifiedOption';
-import { useTheme } from '@xstyled/styled-components';
-import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
-export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton) {
-    if (style === void 0) { style = 'form'; }
-    if (optionVariant === void 0) { optionVariant = 'default'; }
-    if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
-    if (containerVariant === void 0) { containerVariant = 'default'; }
-    if (useSimplifiedOptions === void 0) { useSimplifiedOptions = false; }
-    if (showSelectAllButton === void 0) { showSelectAllButton = false; }
-    var systemTheme = useTheme();
-    return useMemo(function () {
-        var components = {
-            ValueContainer: IconValueContainer
-        };
-        components.DropdownIndicator = DropdownIndicator;
-        if (multiLabelVariant === 'count') {
-            components.MultiValue = CountMultiValue;
-        }
-        if (containerVariant === 'search') {
-            components.DropdownIndicator = null;
-        }
-        if (showSelectAllButton) {
-            components.MenuList = ConnectedMenu;
-        }
-        components.Input = CustomInput;
-        var themes = getFormCustomTheme(systemTheme, optionVariant, style === 'gridFilter');
-        var styles = SelectCustomStyles;
-        components.Option = ChevronOption;
-        // performance reasons
-        if (useSimplifiedOptions)
-            components.Option = SimplifiedOption;
-        return [components, themes, styles];
-    }, [multiLabelVariant, containerVariant, showSelectAllButton, style, useSimplifiedOptions, systemTheme, optionVariant]);
-};

package/ui/Elements/Select/themes/selectStyles.js

@@ -1,148 +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 { th } from '@xstyled/system';
-// style object https://react-select.com/styles
-export var CustomStyles = {
-    control: function (styles, _a) {
-        var _b;
-        var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
-        var colors = theme.colors;
-        return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
-                fontWeight: theme.textWeightNormal,
-                fontFamily: theme.font
-            }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minWidth: 'min-content', '.inputIcon': {
-                color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
-            } });
-    },
-    valueContainer: function (styles, _a) {
-        var theme = _a.theme;
-        return __assign(__assign({}, styles), { width: '50px', paddingLeft: '7px', flexWrap: theme.flexWrap });
-    },
-    singleValue: function (styles, _a) {
-        var selectProps = _a.selectProps, theme = _a.theme, isDisabled = _a.isDisabled;
-        return __assign(__assign({}, styles), { position: 'absolute', top: '50%', transform: 'translateY(-50%)', color: selectProps.isInvalid
-                ? theme.colors.primary
-                : isDisabled
-                    ? theme.colors.disabledTextColor
-                    : theme.colors.inputTextColor, fontSize: '14px', fontWeight: theme.textWeightNormal });
-    },
-    multiValue: function (styles, state) {
-        var theme = state.theme;
-        return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: '#E7EBEF', borderRadius: '4px', '& svg': {
-                color: theme.colors.inputTextColor
-            }, ' > div': {
-                fontSize: '12px'
-            } });
-    },
-    multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
-    multiValueRemove: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.inputBorderColor }));
-    },
-    placeholder: function (styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return __assign(__assign({}, styles), { fontSize: '14px', fontWeight: theme.textWeightNormal, textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', maxWidth: 'calc(100% - 8px)', color: selectProps.isDarkPlaceholderText ? theme.colors.inputTextColor : theme.colors.placeholderTextColor });
-    },
-    loadingMessage: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.optionTextColor }));
-    },
-    noOptionsMessage: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.optionTextColor }));
-    },
-    input: function (styles, _a) {
-        var theme = _a.theme;
-        return (__assign(__assign({}, styles), { color: theme.colors.inputTextColor }));
-    },
-    option: function (styles, _a) {
-        var isSelected = _a.isSelected, theme = _a.theme, isDisabled = _a.isDisabled, selectProps = _a.selectProps;
-        var defaultColor = theme.colors.optionTextColor;
-        return {
-            color: isSelected ? theme.colors.primary : defaultColor,
-            backgroundColor: isSelected ? theme.colors.activeOptionBackground : undefined,
-            fontWeight: theme.textWeightNormal,
-            fontSize: '14px',
-            cursor: !isDisabled ? 'pointer' : 'default',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: '7px 10px',
-            minHeight: '36px',
-            marginRight: '4px',
-            marginBottom: '2px',
-            lineHeight: '22px',
-            borderRadius: th.radius('ml')({ theme: selectProps === null || selectProps === void 0 ? void 0 : selectProps.systemTheme }),
-            '&:hover': {
-                backgroundColor: isSelected
-                    ? theme.colors.hoverToActiveOptionBackground
-                    : !isDisabled
-                        ? theme.colors.menuHoverBackgroundColor
-                        : undefined
-            }
-        };
-    },
-    menu: function (styles, state) {
-        var theme = state.theme;
-        return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '4px', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', backgroundColor: theme.colors.whiteBackgroundColor });
-    },
-    menuList: function (styles, _a) {
-        var theme = _a.theme;
-        return __assign(__assign({}, styles), { margin: '8px 4px 8px 8px', '::-webkit-scrollbar-thumb': {
-                border: 'none',
-                borderRadius: '4px',
-                height: '47px',
-                backgroundColor: theme.colors.defaultControlColor,
-                '&:hover': {
-                    backgroundColor: theme.colors.dropdownIndicatorColor
-                }
-            }, '::-webkit-scrollbar': {
-                width: '10px'
-            }, '::-webkit-scrollbar-track': {
-                backgroundColor: theme.colors.menuHoverBackgroundColor,
-                borderRadius: '6px'
-            } });
-    },
-    dropdownIndicator: function (styles) {
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0px 7px 0px 0px' });
-    },
-    clearIndicator: function (styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators && selectProps.containerVariant !== 'search' ? '0px' : '0px 4px', color: theme.colors.clearIndicatorColor, cursor: 'pointer' });
-    },
-    indicatorSeparator: function () { return ({
-        display: 'none'
-    }); }
-};
-export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
-    var inputTextColor = th.color('blue2')({ theme: theme });
-    var customColors = {
-        primary: th.color('red1')({ theme: theme }),
-        inputTextColor: inputTextColor,
-        whiteBackgroundColor: th.color('white')({ theme: theme }),
-        optionTextColor: th.color('blue2')({ theme: theme }),
-        menuHoverBackgroundColor: th.color('bgLightGray1')({ theme: theme }),
-        inputDisabledColor: th.color('lightGray1')({ theme: theme }),
-        inputBorderColor: th.color('lightGray3')({ theme: theme }),
-        placeholderTextColor: th.color('lightGray3')({ theme: theme }),
-        clearIndicatorColor: th.color('lightGray4')({ theme: theme }),
-        defaultControlColor: th.color('lightGray5')({ theme: theme }),
-        disabledTextColor: th.color('lightGray6')({ theme: theme }),
-        dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
-        inputBorderHoverColor: th.color('gray5')({ theme: theme }),
-        activeOptionBackground: th.color('red20')({ theme: theme }),
-        hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
-    };
-    return function (reactSelectTheme) {
-        return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: '38px', flexWrap: useFilterSubvariant ? 'nowrap' : 'wrap', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
-    };
-};

package/ui/Elements/Select/types.js

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

package/ui/Elements/SimpleLink/SimpleLink.js

@@ -1,21 +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 { Link as ReactLink } from 'react-router-dom';
-import styled, { css } from '@xstyled/styled-components';
-var StyledLink = styled(ReactLink)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var disabled = _a.disabled;
-    return disabled
-        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          pointer-events: none;\n          opacity: 0.5;\n        "], ["\n          pointer-events: none;\n          opacity: 0.5;\n        "]))) : null;
-}, function (_a) {
-    var $decorate = _a.$decorate;
-    return $decorate
-        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          text-decoration: underline;\n        "], ["\n          text-decoration: underline;\n        "]))) : null;
-}, function (_a) {
-    var variant = _a.variant;
-    return variant
-        ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          font-weight: ", ";\n        "], ["\n          font-weight: ", ";\n        "])), variant) : null;
-});
-export default StyledLink;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Elements/SimpleLink/index.js

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