@mailstep/design-system 0.8.26-beta.6 → 0.8.26

package/ui/Elements/Select/styles.js

@@ -1,47 +0,0 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  flex-direction: column;\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  font-size: 14px;\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  font-size: 14px;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled from "@xstyled/styled-components";
-import ReactSelect from "react-select";
-import AsyncSelect from "react-select/async";
-import { system } from "@xstyled/system";
-var Wrapper = styled.div(_templateObject());
-var StyledReactSelect = styled(ReactSelect)(_templateObject1(), system);
-var StyledAsyncSelect = styled(AsyncSelect)(_templateObject2(), system);
-export { StyledAsyncSelect, StyledReactSelect, Wrapper };

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

@@ -1,48 +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";
-var useStylesAndComponents = function useStylesAndComponents() {
-    var style = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "form", optionVariant = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default", multiLabelVariant = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "default", containerVariant = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default", useSimplifiedOptions = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false, showSelectAllButton = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : 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;
-        if (useSimplifiedOptions) components.Option = SimplifiedOption;
-        return [
-            components,
-            themes,
-            styles
-        ];
-    }, [
-        multiLabelVariant,
-        containerVariant,
-        showSelectAllButton,
-        style,
-        useSimplifiedOptions,
-        systemTheme,
-        optionVariant
-    ]);
-};
-export { useStylesAndComponents };

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

@@ -1,305 +0,0 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-import { th } from "@xstyled/system";
-var CustomStyles = {
-    control: function control(styles, param) {
-        var selectProps = param.selectProps, theme = param.theme, isFocused = param.isFocused, isDisabled = param.isDisabled;
-        var _styles_hover;
-        var colors = theme.colors;
-        return _object_spread_props(_object_spread({}, 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": _object_spread_props(_object_spread({}, (_styles_hover = styles["&:hover"]) !== null && _styles_hover !== void 0 ? _styles_hover : {}), {
-                borderColor: colors.inputBorderHoverColor
-            }),
-            fontSize: "14px",
-            minWidth: "min-content",
-            ".inputIcon": {
-                color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
-            }
-        });
-    },
-    valueContainer: function valueContainer(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            width: "50px",
-            paddingLeft: "7px",
-            flexWrap: theme.flexWrap
-        });
-    },
-    singleValue: function singleValue(styles, param) {
-        var selectProps = param.selectProps, theme = param.theme, isDisabled = param.isDisabled;
-        return _object_spread_props(_object_spread({}, 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 multiValue(styles, state) {
-        var theme = state.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.inputTextColor,
-            fontWeight: theme.textWeightNormal,
-            backgroundColor: "#E7EBEF",
-            borderRadius: "4px",
-            "& svg": {
-                color: theme.colors.inputTextColor
-            },
-            " > div": {
-                fontSize: "12px"
-            }
-        });
-    },
-    multiValueLabel: function multiValueLabel(styles) {
-        return _object_spread_props(_object_spread({}, styles), {
-            fontSize: "unset",
-            padding: "5px"
-        });
-    },
-    multiValueRemove: function multiValueRemove(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.inputBorderColor
-        });
-    },
-    placeholder: function placeholder(styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return _object_spread_props(_object_spread({}, 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 loadingMessage(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.optionTextColor
-        });
-    },
-    noOptionsMessage: function noOptionsMessage(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.optionTextColor
-        });
-    },
-    input: function input(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, styles), {
-            color: theme.colors.inputTextColor
-        });
-    },
-    option: function option(styles, param) {
-        var isSelected = param.isSelected, theme = param.theme, isDisabled = param.isDisabled, selectProps = param.selectProps;
-        var defaultColor = theme.colors.optionTextColor;
-        return {
-            color: isSelected ? theme.colors.primary : defaultColor,
-            backgroundColor: isSelected ? theme.colors.activeOptionBackground : void 0,
-            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 : void 0
-            }
-        };
-    },
-    menu: function menu(styles, state) {
-        var theme = state.theme;
-        return _object_spread_props(_object_spread({}, 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 menuList(styles, param) {
-        var theme = param.theme;
-        return _object_spread_props(_object_spread({}, 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 dropdownIndicator(styles) {
-        return _object_spread_props(_object_spread({}, styles), {
-            justifyContent: "center",
-            alignItems: "center",
-            padding: "0px 7px 0px 0px"
-        });
-    },
-    clearIndicator: function clearIndicator(styles, state) {
-        var theme = state.theme, selectProps = state.selectProps;
-        return _object_spread_props(_object_spread({}, styles), {
-            justifyContent: "center",
-            alignItems: "center",
-            padding: theme.narrowIndicators && selectProps.containerVariant !== "search" ? "0px" : "0px 4px",
-            color: theme.colors.clearIndicatorColor,
-            cursor: "pointer"
-        });
-    },
-    indicatorSeparator: function indicatorSeparator() {
-        return {
-            display: "none"
-        };
-    }
-};
-var getCustomTheme = function getCustomTheme(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 _object_spread_props(_object_spread({}, 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
-        });
-    };
-};
-export { CustomStyles, getCustomTheme };

package/ui/Elements/SimpleLink/SimpleLink.js

@@ -1,64 +0,0 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n          pointer-events: none;\n          opacity: 0.5;\n        "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n          text-decoration: underline;\n        "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n          font-weight: ",
-        ";\n        "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\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"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { Link as ReactLink } from "react-router-dom";
-import styled, { css } from "@xstyled/styled-components";
-var StyledLink = styled(ReactLink)(_templateObject3(), function(param) {
-    var disabled = param.disabled;
-    return disabled ? css(_templateObject()) : null;
-}, function(param) {
-    var $decorate = param.$decorate;
-    return $decorate ? css(_templateObject1()) : null;
-}, function(param) {
-    var variant = param.variant;
-    return variant ? css(_templateObject2(), variant) : null;
-});
-var SimpleLink_default = StyledLink;
-export { SimpleLink_default as default };

package/ui/Elements/SimpleLink/index.js

@@ -1,3 +0,0 @@
-import SimpleLink from "./SimpleLink";
-var SimpleLink_default = SimpleLink;
-export { SimpleLink, SimpleLink_default as default };