@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Elements/Select/index.js

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

package/ui/Elements/Select/styles.d.ts

@@ -1,6 +1,5 @@
-import { default as ReactSelect } from 'react-select';
-import { default as AsyncSelect } from 'react-select/async';
-
-export declare const Wrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const StyledReactSelect: import('styled-components').StyledComponent<ReactSelect, import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
-export declare const StyledAsyncSelect: import('styled-components').StyledComponent<AsyncSelect, import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+import ReactSelect from 'react-select';
+import AsyncSelect from 'react-select/async';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledReactSelect: import("styled-components").StyledComponent<ReactSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const StyledAsyncSelect: import("styled-components").StyledComponent<AsyncSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;

package/ui/Elements/Select/styles.js

@@ -0,0 +1,47 @@
+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.d.ts

@@ -1,4 +1,3 @@
-import { StylesConfig, SelectComponentsConfig } from 'react-select';
-import { SelectProps } from '../types';
-
+import { type StylesConfig, type SelectComponentsConfig } from 'react-select';
+import { type SelectProps } from '../types';
 export declare const useStylesAndComponents: (style?: SelectProps["style"], optionVariant?: SelectProps["optionVariant"], multiLabelVariant?: SelectProps["multiLabelVariant"], containerVariant?: SelectProps["containerVariant"], useSimplifiedOptions?: SelectProps["useSimplifiedOptions"], showSelectAllButton?: SelectProps["showSelectAllButton"]) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];

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

@@ -0,0 +1,48 @@
+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.d.ts

@@ -1,5 +1,4 @@
-import { SelectProps, StylesConfig, CustomTheme } from '../types';
-
+import { type SelectProps, type StylesConfig, type CustomTheme } from '../types';
 export declare const CustomStyles: StylesConfig<State>;
 type ThemeGetter = (theme: any) => CustomTheme;
 export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>["optionVariant"], useFilterSubvariant: boolean) => ThemeGetter;

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

@@ -0,0 +1,305 @@
+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/Select/types.d.ts

@@ -1,7 +1,6 @@
-import { RefObject, ReactNode } from 'react';
-import { Theme, ControlProps, CSSObjectWithLabel } from 'react-select';
-import { SpaceAround } from '../SpaceAround/types';
-
+import type { RefObject, ReactNode } from 'react';
+import { type Theme, type ControlProps, type CSSObjectWithLabel } from 'react-select';
+import { type SpaceAround } from '../SpaceAround/types';
 export type Option<Value = string | number> = {
     value: Value;
     label: string | number;

package/ui/Elements/SimpleLink/SimpleLink.d.ts

@@ -1,7 +1,6 @@
-import { default as React } from 'react';
+import React from 'react';
 import { Link as ReactLink } from 'react-router-dom';
 import { TextVariant } from '../Text/types';
-
 export type ToObjectType = {
     pathname?: string;
     search?: string;
@@ -18,5 +17,5 @@ export type Props = {
     $decorate?: boolean;
     variant?: TextVariant;
 };
-declare const StyledLink: import('styled-components').StyledComponent<typeof ReactLink, import('@xstyled/system').Theme, Props, never>;
+declare const StyledLink: import("styled-components").StyledComponent<typeof ReactLink, import("@xstyled/system").Theme, Props, never>;
 export default StyledLink;

package/ui/Elements/SimpleLink/SimpleLink.js

@@ -0,0 +1,64 @@
+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.d.ts

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

package/ui/Elements/SimpleLink/index.js

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

package/ui/Elements/SingleSelect/SingleSelect.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
-import { SelectProps, Option } from '../Select/types';
-
+import React from 'react';
+import { type SelectProps, type Option } from '../Select/types';
 export type FieldValueType = string | number | Array<string | number> | null;
 export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
     onChange?: (event: {