@mailstep/design-system 0.8.30 → 0.8.31-beta.2

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

@@ -1,30 +1,46 @@
-import Icon from "../../Icon/Icon.js";
-import styled$1 from "@xstyled/styled-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { components } from "react-select";
-//#region packages/ui/Elements/Select/components/IconValueContainer.tsx
-const IconDiv = styled$1.div`
-  padding-left: 7px;
-  margin-right: -3px;
-  align-self: center;
-  & > * {
-    color: ${({ hasValue }) => hasValue ? "black" : "#a3b3c1"};
-  }
-`;
-const IconValueContainer = (props) => {
-	const { children, ...rest } = props;
-	const icon = rest.selectProps?.icon;
-	const hasValue = rest.hasValue;
-	const onIconClick = rest.selectProps?.onIconClick;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [icon && /* @__PURE__ */ jsx(IconDiv, {
-		className: "inputIcon",
-		hasValue,
-		onMouseDown: onIconClick,
-		children: /* @__PURE__ */ jsx(Icon, { icon })
-	}), /* @__PURE__ */ jsx(components.ValueContainer, {
-		...rest,
-		children
-	})] });
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { IconValueContainer as default };
+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, fill: "gray" }) })), _jsx(components.ValueContainer, __assign({}, rest, { children: children }))] }));
+};
+export default IconValueContainer;
+var templateObject_1;

package/ui/Elements/Select/components/SelectAll.d.ts

@@ -1,5 +1,5 @@
-import { SelectProps, CustomTheme } from '../types';
-import { Option } from '../types';
+import { SelectProps, CustomTheme, Option } from '../types';
+
 type Props = {
     onCustomSelectAll: ({ options }: {
         options?: Option[];

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

@@ -1,90 +1,59 @@
-import Checkbox_default from "../../../Forms/Checkbox/Checkbox.js";
-import Toggle from "../../Toggle/Toggle.js";
-import SelectedIndicator from "./SelectedIndicator.js";
-import { useCallback, useEffect, useRef, useState } from "react";
-import styled$1, { th } from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Trans } from "@lingui/react";
-//#region packages/ui/Elements/Select/components/SelectAll.tsx
-const SelectAllWrap = styled$1.div`
-  display: flex;
-  margin: 0px 2px 1px 0px;
-  padding: ${({ additionalPadding }) => additionalPadding ? "8px 27px 8px 10px" : "10px 10px"};
-  font-weight: 400;
-  background-color: ${({ isSelected }) => isSelected ? th.color("red20") : "transparent"};
-  color: ${({ isSelected }) => isSelected ? th.color("red1") : th.color("textPrimary")};
-  border-radius: 6px;
-  height: 36px;
-  cursor: pointer;
-
-  :hover {
-    background-color: ${({ isSelected }) => isSelected ? th.color("red30") : th.color("bgLightGray1")};
-  }
-`;
-const SelectAll = ({ onCustomSelectAll, onCustomDeselectAll, value, options, maxMenuHeight, theme }) => {
-	const showCheckbox = !!(theme.optionVariant === "checkbox");
-	const showToggle = !!(theme.optionVariant === "toggle");
-	const ref = useRef(null);
-	const [additionalPadding, setAdditionalPadding] = useState(false);
-	const [isSelected, setIsSelected] = useState(false);
-	const handleSelectAll = useCallback(() => {
-		if (!isSelected) {
-			setIsSelected(true);
-			onCustomSelectAll({ options });
-		} else if (isSelected) {
-			setIsSelected(false);
-			onCustomDeselectAll();
-		}
-	}, [
-		isSelected,
-		onCustomDeselectAll,
-		onCustomSelectAll,
-		options
-	]);
-	useEffect(() => {
-		ref?.current?.offsetHeight && setAdditionalPadding(ref.current.offsetHeight * (options?.length || 0) > maxMenuHeight);
-	}, [
-		additionalPadding,
-		maxMenuHeight,
-		options?.length,
-		value
-	]);
-	useEffect(() => {
-		if (value && Array.isArray(value)) {
-			options?.length === value.length && setIsSelected(true);
-			options?.length !== value.length && setIsSelected(false);
-		}
-	}, [
-		maxMenuHeight,
-		options?.length,
-		value
-	]);
-	if (!options?.length) return null;
-	return /* @__PURE__ */ jsxs(SelectAllWrap, {
-		isSelected,
-		onClick: handleSelectAll,
-		ref,
-		additionalPadding,
-		children: [
-			(showCheckbox || showToggle) && /* @__PURE__ */ jsxs(SelectedIndicator, { children: [showCheckbox && /* @__PURE__ */ jsx(Checkbox_default, {
-				checked: isSelected,
-				size: 2,
-				readOnly: true
-			}), showToggle && /* @__PURE__ */ jsx(Toggle, {
-				name: "",
-				checked: isSelected,
-				spaceAround: false,
-				variant: "grid"
-			})] }),
-			/* @__PURE__ */ jsx(Trans, {
-				id: "datagrid.filterCell.selectAllLabel",
-				message: "select all"
-			}),
-			" (",
-			options?.length,
-			")"
-		]
-	});
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-//#endregion
-export { SelectAll as default };
+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.d.ts

@@ -1,2 +1,2 @@
-declare const SelectedIndicator: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+declare const SelectedIndicator: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
 export default SelectedIndicator;

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

@@ -1,7 +1,8 @@
-import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Elements/Select/components/SelectedIndicator.tsx
-const SelectedIndicator = styled$1.div`
-  padding-right: 12px;
-`;
-//#endregion
-export { SelectedIndicator as default };
+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.d.ts

@@ -1,2 +1,3 @@
-declare const SimplifiedOption: import("react").MemoExoticComponent<(props: any) => any>;
+/// <reference types="react" />
+declare const SimplifiedOption: import('react').MemoExoticComponent<(props: any) => any>;
 export default SimplifiedOption;

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

@@ -1,17 +1,11 @@
-import { memo, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/Select/components/SimplifiedOption.tsx
-const SimplifiedOptionInner = (props) => {
-	const styles = props.getStyles("option", props);
-	const { data, selectOption, innerProps } = props;
-	return /* @__PURE__ */ jsx("div", {
-		style: styles,
-		onClick: useCallback(() => selectOption(data), [data, selectOption]),
-		onMouseOver: innerProps.onMouseOver,
-		onMouseMove: innerProps.onMouseMove,
-		children: props.label
-	});
+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 }));
 };
-const SimplifiedOption = memo(SimplifiedOptionInner, (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.data?.label === nextProps.data?.label);
-//#endregion
-export { SimplifiedOption as default };
+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.d.ts

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

package/ui/Elements/Select/index.js

@@ -1,5 +1,2 @@
-import Select from "./Select.js";
-//#region packages/ui/Elements/Select/index.ts
-var Select_default = Select;
-//#endregion
-export { Select_default as default };
+import Select from './Select';
+export default Select;

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+
+declare const meta: {
+    title: string;
+    component: FC<import('../types').SelectProps>;
+    argTypes: {};
+};
+export default meta;
+export declare const Default: FC;
+export declare const MultiSelect: FC;

package/ui/Elements/Select/stories/Select.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Select from '../Select';
+var meta = {
+    title: 'Forms/Select',
+    component: Select,
+    argTypes: {}
+};
+export default meta;
+var options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+];
+var mutliValue = ['1', '2'];
+export var Default = function () { return _jsx(Select, { label: "Primary Select", onChange: console.log, options: options, value: "1" }); };
+export var MultiSelect = function () { return (_jsx(Select, { label: "Multi Select Input", onChange: console.log, options: options, isMulti: true, value: mutliValue })); };

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

@@ -1,5 +1,6 @@
-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>;
+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>;

package/ui/Elements/Select/styles.js

@@ -1,19 +1,12 @@
-import styled$1 from "@xstyled/styled-components";
-import { system as system$1 } from "@xstyled/system";
-import ReactSelect from "react-select";
-import AsyncSelect from "react-select/async";
-//#region packages/ui/Elements/Select/styles.ts
-const Wrapper = styled$1.div`
-  display: flex;
-  flex-direction: column;
-`;
-const StyledReactSelect = styled$1(ReactSelect)`
-  ${system$1};
-  font-size: 14px;
-`;
-const StyledAsyncSelect = styled$1(AsyncSelect)`
-  ${system$1};
-  font-size: 14px;
-`;
-//#endregion
-export { StyledAsyncSelect, StyledReactSelect, Wrapper };
+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.d.ts

@@ -1,3 +1,4 @@
-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];
+import { StylesConfig, SelectComponentsConfig } from 'react-select';
+import { 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

@@ -1,41 +1,42 @@
-import { ChevronOption } from "../components/ChevronOption.js";
-import ConnectedMenu from "../components/ConnectedMenu.js";
-import CountMultiValue from "../components/CountMultiValue.js";
-import { CustomInput } from "../components/CustomInput.js";
-import { DropdownIndicator } from "../components/DropdownIndicator.js";
-import IconValueContainer from "../components/IconValueContainer.js";
-import SimplifiedOption from "../components/SimplifiedOption.js";
-import { CustomStyles, getCustomTheme } from "./selectStyles.js";
-import { useMemo } from "react";
-import { useTheme } from "@xstyled/styled-components";
-//#region packages/ui/Elements/Select/themes/index.ts
-const useStylesAndComponents = (style = "form", optionVariant = "default", multiLabelVariant = "default", containerVariant = "default", useSimplifiedOptions = false, showSelectAllButton = false) => {
-	const systemTheme = useTheme();
-	return useMemo(() => {
-		const 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;
-		const themes = getCustomTheme(systemTheme, optionVariant, style === "gridFilter");
-		const styles = CustomStyles;
-		components.Option = ChevronOption;
-		if (useSimplifiedOptions) components.Option = SimplifiedOption;
-		return [
-			components,
-			themes,
-			styles
-		];
-	}, [
-		multiLabelVariant,
-		containerVariant,
-		showSelectAllButton,
-		style,
-		useSimplifiedOptions,
-		systemTheme,
-		optionVariant
-	]);
+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]);
 };
-//#endregion
-export { useStylesAndComponents };

package/ui/Elements/Select/themes/selectStyles.d.ts

@@ -1,5 +1,6 @@
-import { type SelectProps, type StylesConfig, type CustomTheme } from '../types';
+import { SelectProps, StylesConfig, 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;
+export declare const getCustomTheme: (theme: any, optionVariant: Required<SelectProps>['optionVariant'], useFilterSubvariant: boolean) => ThemeGetter;
 export {};