@hh.ru/magritte-ui-select 5.2.0 → 5.2.2

package/Select.js

@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-drop';
 import '@hh.ru/magritte-ui-icon/icon';
-import './SelectActivator-1d7ecae1.js';
+import './SelectActivator-97b8623e.js';
 import 'classnames';
 import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-counter';

package/{SelectActivator-1d7ecae1.js → SelectActivator-97b8623e.js}

@@ -9,7 +9,7 @@ import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"select-activator":"magritte-select-activator___9XXwA_5-2-0","selectActivator":"magritte-select-activator___9XXwA_5-2-0","select-activator-label":"magritte-select-activator-label___Mc49R_5-2-0","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-2-0","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-2-0","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-2-0","select-activator-value":"magritte-select-activator-value___wDbVR_5-2-0","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-2-0","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-2-0","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-2-0","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-2-0","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-2-0","select-activator-item":"magritte-select-activator-item___JsY4v_5-2-0","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-2-0","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-2-0","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-2-0","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-2-0","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-2-0","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-2-0","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-2-0","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-2-0","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-2-0","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-2-0","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-2-0","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-2-0","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-2-0","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-0","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-0","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-2-0","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-2-0","select-options":"magritte-select-options___y2KYZ_5-2-0","selectOptions":"magritte-select-options___y2KYZ_5-2-0","select-options-xs":"magritte-select-options-xs___BiiPo_5-2-0","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-2-0","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-2-0"};
+var styles = {"select-activator":"magritte-select-activator___9XXwA_5-2-2","selectActivator":"magritte-select-activator___9XXwA_5-2-2","select-activator-label":"magritte-select-activator-label___Mc49R_5-2-2","selectActivatorLabel":"magritte-select-activator-label___Mc49R_5-2-2","select-activator-placeholder":"magritte-select-activator-placeholder___7ODSn_5-2-2","selectActivatorPlaceholder":"magritte-select-activator-placeholder___7ODSn_5-2-2","select-activator-value":"magritte-select-activator-value___wDbVR_5-2-2","selectActivatorValue":"magritte-select-activator-value___wDbVR_5-2-2","select-activator-chevron":"magritte-select-activator-chevron___DHIUH_5-2-2","selectActivatorChevron":"magritte-select-activator-chevron___DHIUH_5-2-2","select-activator-disabled":"magritte-select-activator-disabled___mYKi2_5-2-2","selectActivatorDisabled":"magritte-select-activator-disabled___mYKi2_5-2-2","select-activator-item":"magritte-select-activator-item___JsY4v_5-2-2","selectActivatorItem":"magritte-select-activator-item___JsY4v_5-2-2","select-activator-invalid":"magritte-select-activator-invalid___IdlRp_5-2-2","selectActivatorInvalid":"magritte-select-activator-invalid___IdlRp_5-2-2","select-activator-size-large":"magritte-select-activator-size-large___MIXAH_5-2-2","selectActivatorSizeLarge":"magritte-select-activator-size-large___MIXAH_5-2-2","select-activator-with-label":"magritte-select-activator-with-label___DwcKr_5-2-2","selectActivatorWithLabel":"magritte-select-activator-with-label___DwcKr_5-2-2","select-activator-label-root":"magritte-select-activator-label-root___eYIWQ_5-2-2","selectActivatorLabelRoot":"magritte-select-activator-label-root___eYIWQ_5-2-2","select-activator-has-counter":"magritte-select-activator-has-counter___k2Kc2_5-2-2","selectActivatorHasCounter":"magritte-select-activator-has-counter___k2Kc2_5-2-2","select-activator-ellipsis":"magritte-select-activator-ellipsis___16zkC_5-2-2","selectActivatorEllipsis":"magritte-select-activator-ellipsis___16zkC_5-2-2","select-activator-chevron-animation-timeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-2","selectActivatorChevronAnimationTimeout":"magritte-select-activator-chevron-animation-timeout___y19bf_5-2-2","select-activator-chevron-up":"magritte-select-activator-chevron-up___gtPyi_5-2-2","selectActivatorChevronUp":"magritte-select-activator-chevron-up___gtPyi_5-2-2","select-options":"magritte-select-options___y2KYZ_5-2-2","selectOptions":"magritte-select-options___y2KYZ_5-2-2","select-options-xs":"magritte-select-options-xs___BiiPo_5-2-2","selectOptionsXs":"magritte-select-options-xs___BiiPo_5-2-2","optionDelimiter":"magritte-optionDelimiter___OaKsB_5-2-2"};
 
 const SelectActivator = forwardRef(({ placeholder, size = 'medium', elevatePlaceholder = false, disabled = false, multiple, invalid = false, searchable = false, selectedOptions, onClick, onFocus, onBlur, searchValue, setSearchValue, description, errorMessage, visible, dropRef, searchRef, }, ref) => {
     const prevVisibleRef = useRef(visible);
@@ -84,4 +84,4 @@ const renderSelectActivator = (props) => {
 };
 
 export { SelectActivator as S, renderSelectActivator as r, styles as s };
-//# sourceMappingURL=SelectActivator-1d7ecae1.js.map
+//# sourceMappingURL=SelectActivator-97b8623e.js.map

package/{SelectActivator-1d7ecae1.js.map → SelectActivator-97b8623e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SelectActivator-1d7ecae1.js","sources":["../src/SelectActivator.tsx"],"sourcesContent":["import { type ForwardedRef, type ReactNode, forwardRef, useEffect, Fragment, useRef, RefObject } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { FieldHint } from '@hh.ru/magritte-internal-field-hint';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { type SelectActivatorProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './styles.less';\n\nconst SelectActivator = forwardRef(\n    <T,>(\n        {\n            placeholder,\n            size = 'medium',\n            elevatePlaceholder = false,\n            disabled = false,\n            multiple,\n            invalid = false,\n            searchable = false,\n            selectedOptions,\n            onClick,\n            onFocus,\n            onBlur,\n            searchValue,\n            setSearchValue,\n            description,\n            errorMessage,\n            visible,\n            dropRef,\n            searchRef,\n        }: SelectActivatorProps<T>,\n        ref: ForwardedRef<HTMLElement>\n    ) => {\n        const prevVisibleRef = useRef(visible);\n        const focusedRef = useRef(false);\n        const counter = multiple ? selectedOptions?.length ?? 0 : 0;\n        const value = selectedOptions?.map(({ label, value }, index) => (\n            <Fragment key={value}>\n                {label}\n                {index === selectedOptions.length - 1 ? '' : ', '}\n            </Fragment>\n        ));\n\n        const hintContent = (\n            <FieldHint\n                key=\"hint\"\n                description={description}\n                errorMessage={errorMessage}\n                disabled={disabled}\n                focused={visible}\n                invalid={invalid}\n            />\n        );\n\n        useEffect(() => {\n            if (prevVisibleRef.current && !visible) {\n                onBlur?.();\n            } else if (visible) {\n                onFocus?.();\n            }\n            prevVisibleRef.current = visible;\n        }, [visible, onBlur, onFocus]);\n\n        if (searchable && visible) {\n            const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n\n            return (\n                <>\n                    <BaseInput\n                        {...sizeProp}\n                        wrapperRef={ref as ForwardedRef<HTMLDivElement> | undefined}\n                        onKeyDown={(event) => {\n                            if (\n                                dropRef?.current &&\n                                keyboardMatches(event.nativeEvent, [keyboardKeys.ArrowDown, keyboardKeys.Tab])\n                            ) {\n                                const focusableElement = dropRef.current.querySelector(\n                                    '[data-magritte-option-first-active-element]'\n                                ) as HTMLElement;\n                                event.preventDefault();\n                                event.stopPropagation();\n                                focusableElement?.focus();\n                            }\n                            if (visible && keyboardMatches(event.nativeEvent, [keyboardKeys.Escape])) {\n                                event.stopPropagation();\n                                const dropHost = dropRef?.current || document.body;\n                                dropHost?.dispatchEvent(\n                                    new KeyboardEvent(event.type, { key: event.key, code: event.code })\n                                );\n                            }\n                        }}\n                        ref={(input) => {\n                            input?.focus();\n                            if (searchRef) {\n                                searchRef.current = input;\n                            }\n                        }}\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        data-qa=\"magritte-select-activator-input\"\n                        placeholder={selectedOptions.length > 0 ? value : placeholder}\n                        counter={counter === 0 ? undefined : counter}\n                        autoComplete=\"off\"\n                    />\n                    {hintContent}\n                </>\n            );\n        }\n\n        const showValue = selectedOptions.length > 0;\n        const showPlaceholder = !!(placeholder && !showValue);\n        const isLargeSize = size === 'large';\n        const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);\n\n        return (\n            <>\n                <div\n                    ref={ref as RefObject<HTMLDivElement>}\n                    data-qa=\"magritte-select-activator\"\n                    className={classnames(styles.selectActivator, {\n                        [styles.selectActivatorSizeLarge]: isLargeSize,\n                        [styles.selectActivatorWithLabel]: showLabel,\n                        [styles.selectActivatorHasCounter]: counter > 0,\n                        [styles.selectActivatorDisabled]: disabled,\n                        [styles.selectActivatorInvalid]: invalid,\n                    })}\n                    onClick={() => {\n                        if (disabled) {\n                            return;\n                        }\n\n                        if (!focusedRef.current) {\n                            onClick(!visible);\n                        }\n                        focusedRef.current = false;\n                    }}\n                    onFocus={() => {\n                        if (disabled) {\n                            return;\n                        }\n                        onClick(true);\n                        focusedRef.current = true;\n                    }}\n                    onBlur={() => {\n                        focusedRef.current = false;\n                    }}\n                    tabIndex={disabled ? -1 : 0}\n                >\n                    <div className={styles.selectActivatorLabelRoot}>\n                        {showPlaceholder && (\n                            <div className={styles.selectActivatorPlaceholder}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showLabel && (\n                            <div className={styles.selectActivatorLabel}>\n                                <Text typography=\"label-4-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showValue && (\n                            <div className={styles.selectActivatorValue}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{value}</div>\n                                </Text>\n                            </div>\n                        )}\n                    </div>\n                    <div className={styles.selectActivatorItem}>\n                        {counter > 0 && <Counter label={counter} />}\n                        <div\n                            className={classnames(styles.selectActivatorChevron, {\n                                [styles.selectActivatorChevronUp]: visible,\n                            })}\n                        >\n                            <ChevronDownOutlinedSize24 />\n                        </div>\n                    </div>\n                </div>\n                {hintContent}\n            </>\n        );\n    }\n);\n\nSelectActivator.displayName = 'SelectActivator';\n\nconst renderSelectActivator = <T,>(props: SelectActivatorProps<T>): ReactNode => {\n    return <SelectActivator {...props} />;\n};\n\nexport { SelectActivator, renderSelectActivator };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"SelectActivator-97b8623e.js","sources":["../src/SelectActivator.tsx"],"sourcesContent":["import { type ForwardedRef, type ReactNode, forwardRef, useEffect, Fragment, useRef, RefObject } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { FieldHint } from '@hh.ru/magritte-internal-field-hint';\nimport { Counter } from '@hh.ru/magritte-ui-counter';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { BaseInput } from '@hh.ru/magritte-ui-input/BaseInput';\nimport { type SelectActivatorProps } from '@hh.ru/magritte-ui-select/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './styles.less';\n\nconst SelectActivator = forwardRef(\n    <T,>(\n        {\n            placeholder,\n            size = 'medium',\n            elevatePlaceholder = false,\n            disabled = false,\n            multiple,\n            invalid = false,\n            searchable = false,\n            selectedOptions,\n            onClick,\n            onFocus,\n            onBlur,\n            searchValue,\n            setSearchValue,\n            description,\n            errorMessage,\n            visible,\n            dropRef,\n            searchRef,\n        }: SelectActivatorProps<T>,\n        ref: ForwardedRef<HTMLElement>\n    ) => {\n        const prevVisibleRef = useRef(visible);\n        const focusedRef = useRef(false);\n        const counter = multiple ? selectedOptions?.length ?? 0 : 0;\n        const value = selectedOptions?.map(({ label, value }, index) => (\n            <Fragment key={value}>\n                {label}\n                {index === selectedOptions.length - 1 ? '' : ', '}\n            </Fragment>\n        ));\n\n        const hintContent = (\n            <FieldHint\n                key=\"hint\"\n                description={description}\n                errorMessage={errorMessage}\n                disabled={disabled}\n                focused={visible}\n                invalid={invalid}\n            />\n        );\n\n        useEffect(() => {\n            if (prevVisibleRef.current && !visible) {\n                onBlur?.();\n            } else if (visible) {\n                onFocus?.();\n            }\n            prevVisibleRef.current = visible;\n        }, [visible, onBlur, onFocus]);\n\n        if (searchable && visible) {\n            const sizeProp = size === 'large' ? ({ size: 'large' } as const) : ({ size: 'medium' } as const);\n\n            return (\n                <>\n                    <BaseInput\n                        {...sizeProp}\n                        wrapperRef={ref as ForwardedRef<HTMLDivElement> | undefined}\n                        onKeyDown={(event) => {\n                            if (\n                                dropRef?.current &&\n                                keyboardMatches(event.nativeEvent, [keyboardKeys.ArrowDown, keyboardKeys.Tab])\n                            ) {\n                                const focusableElement = dropRef.current.querySelector(\n                                    '[data-magritte-option-first-active-element]'\n                                ) as HTMLElement;\n                                event.preventDefault();\n                                event.stopPropagation();\n                                focusableElement?.focus();\n                            }\n                            if (visible && keyboardMatches(event.nativeEvent, [keyboardKeys.Escape])) {\n                                event.stopPropagation();\n                                const dropHost = dropRef?.current || document.body;\n                                dropHost?.dispatchEvent(\n                                    new KeyboardEvent(event.type, { key: event.key, code: event.code })\n                                );\n                            }\n                        }}\n                        ref={(input) => {\n                            input?.focus();\n                            if (searchRef) {\n                                searchRef.current = input;\n                            }\n                        }}\n                        value={searchValue}\n                        onChange={setSearchValue}\n                        data-qa=\"magritte-select-activator-input\"\n                        placeholder={selectedOptions.length > 0 ? value : placeholder}\n                        counter={counter === 0 ? undefined : counter}\n                        autoComplete=\"off\"\n                    />\n                    {hintContent}\n                </>\n            );\n        }\n\n        const showValue = selectedOptions.length > 0;\n        const showPlaceholder = !!(placeholder && !showValue);\n        const isLargeSize = size === 'large';\n        const showLabel = !!(isLargeSize && placeholder && elevatePlaceholder && showValue);\n\n        return (\n            <>\n                <div\n                    ref={ref as RefObject<HTMLDivElement>}\n                    data-qa=\"magritte-select-activator\"\n                    className={classnames(styles.selectActivator, {\n                        [styles.selectActivatorSizeLarge]: isLargeSize,\n                        [styles.selectActivatorWithLabel]: showLabel,\n                        [styles.selectActivatorHasCounter]: counter > 0,\n                        [styles.selectActivatorDisabled]: disabled,\n                        [styles.selectActivatorInvalid]: invalid,\n                    })}\n                    onClick={() => {\n                        if (disabled) {\n                            return;\n                        }\n\n                        if (!focusedRef.current) {\n                            onClick(!visible);\n                        }\n                        focusedRef.current = false;\n                    }}\n                    onFocus={() => {\n                        if (disabled) {\n                            return;\n                        }\n                        onClick(true);\n                        focusedRef.current = true;\n                    }}\n                    onBlur={() => {\n                        focusedRef.current = false;\n                    }}\n                    tabIndex={disabled ? -1 : 0}\n                >\n                    <div className={styles.selectActivatorLabelRoot}>\n                        {showPlaceholder && (\n                            <div className={styles.selectActivatorPlaceholder}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showLabel && (\n                            <div className={styles.selectActivatorLabel}>\n                                <Text typography=\"label-4-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{placeholder}</div>\n                                </Text>\n                            </div>\n                        )}\n                        {showValue && (\n                            <div className={styles.selectActivatorValue}>\n                                <Text typography=\"label-2-regular\">\n                                    <div className={styles.selectActivatorEllipsis}>{value}</div>\n                                </Text>\n                            </div>\n                        )}\n                    </div>\n                    <div className={styles.selectActivatorItem}>\n                        {counter > 0 && <Counter label={counter} />}\n                        <div\n                            className={classnames(styles.selectActivatorChevron, {\n                                [styles.selectActivatorChevronUp]: visible,\n                            })}\n                        >\n                            <ChevronDownOutlinedSize24 />\n                        </div>\n                    </div>\n                </div>\n                {hintContent}\n            </>\n        );\n    }\n);\n\nSelectActivator.displayName = 'SelectActivator';\n\nconst renderSelectActivator = <T,>(props: SelectActivatorProps<T>): ReactNode => {\n    return <SelectActivator {...props} />;\n};\n\nexport { SelectActivator, renderSelectActivator };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/SelectActivator.js

@@ -8,5 +8,5 @@ import '@hh.ru/magritte-ui-counter';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-input/BaseInput';
 import '@hh.ru/magritte-ui-typography';
-export { S as SelectActivator, r as renderSelectActivator } from './SelectActivator-1d7ecae1.js';
+export { S as SelectActivator, r as renderSelectActivator } from './SelectActivator-97b8623e.js';
 //# sourceMappingURL=SelectActivator.js.map

package/SelectForDesktopDevice.js

@@ -7,7 +7,7 @@ import { Card } from '@hh.ru/magritte-ui-card';
 import { Cell, CellText } from '@hh.ru/magritte-ui-cell';
 import { Drop } from '@hh.ru/magritte-ui-drop';
 import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
-import { S as SelectActivator, s as styles } from './SelectActivator-1d7ecae1.js';
+import { S as SelectActivator, s as styles } from './SelectActivator-97b8623e.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
 import 'classnames';

package/SelectForMobileDevice.js

@@ -5,7 +5,7 @@ import { BottomSheet, BottomSheetFooter } from '@hh.ru/magritte-ui-bottom-sheet'
 import { CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { SearchInput } from '@hh.ru/magritte-ui-input';
 import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
-import { s as styles, r as renderSelectActivator } from './SelectActivator-1d7ecae1.js';
+import { s as styles, r as renderSelectActivator } from './SelectActivator-97b8623e.js';
 import { SelectOption } from './SelectOption.js';
 import { getChecked } from './getChecked.js';
 import 'classnames';

package/UncontrolledSelect.js

@@ -11,7 +11,7 @@ import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-drop';
 import '@hh.ru/magritte-ui-icon/icon';
-import './SelectActivator-1d7ecae1.js';
+import './SelectActivator-97b8623e.js';
 import 'classnames';
 import '@hh.ru/magritte-internal-field-hint';
 import '@hh.ru/magritte-ui-counter';

package/index.css

@@ -1,82 +1,82 @@
 :root{
-  --magritte-color-component-input-stroke-state-field-hovered-v18-1-1:#CCD5DF;
-  --magritte-color-component-input-stroke-state-field-focused-v18-1-1:#0070ff;
-  --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
-  --magritte-color-component-input-stroke-state-field-invalid-v18-1-1:#ff4d3a;
-  --magritte-color-component-input-stroke-state-field-disabled-v18-1-1:#EEF1F7;
-  --magritte-color-component-input-background-field-v18-1-1:#ffffff;
-  --magritte-color-component-input-background-state-field-hovered-v18-1-1:#ffffff;
-  --magritte-color-component-input-background-state-field-focused-v18-1-1:#ffffff;
-  --magritte-color-component-input-background-state-field-invalid-v18-1-1:#ffffff;
-  --magritte-color-component-input-background-state-field-disabled-v18-1-1:#F4F6FB;
-  --magritte-color-component-input-stroke-field-v18-1-1:#DCE3EB;
-  --magritte-color-component-input-text-state-content-disabled-v18-1-1:#AABBCA;
-  --magritte-color-component-input-text-state-label-disabled-v18-1-1:#AABBCA;
-  --magritte-color-component-input-text-state-placeholder-disabled-v18-1-1:#AABBCA;
-  --magritte-color-component-input-text-state-content-hovered-v18-1-1:#000000;
-  --magritte-color-component-input-text-state-content-focused-v18-1-1:#000000;
-  --magritte-color-component-input-text-state-content-invalid-v18-1-1:#000000;
-  --magritte-color-component-input-text-state-label-hovered-v18-1-1:#768694;
-  --magritte-color-component-input-text-state-label-focused-v18-1-1:#468ffd;
-  --magritte-color-component-input-text-state-label-invalid-v18-1-1:#ff8a77;
-  --magritte-color-component-input-text-state-placeholder-hovered-v18-1-1:#768694;
-  --magritte-color-component-input-text-state-placeholder-focused-v18-1-1:#768694;
-  --magritte-color-component-input-text-state-placeholder-invalid-v18-1-1:#768694;
-  --magritte-color-component-input-counter-background-content-v18-1-1:#EEF1F7;
-  --magritte-color-component-input-counter-background-state-content-disabled-v18-1-1:#CCD5DF;
-  --magritte-color-component-input-counter-text-state-content-disabled-v18-1-1:#96aabb;
-  --magritte-color-component-input-counter-text-content-v18-1-1:#8293a2;
-  --magritte-color-component-input-icon-content-v18-1-1:#6a7885;
-  --magritte-color-component-input-icon-state-content-hovered-v18-1-1:#6a7885;
-  --magritte-color-component-input-icon-state-content-focused-v18-1-1:#000000;
-  --magritte-color-component-input-icon-state-content-invalid-v18-1-1:#6a7885;
-  --magritte-color-component-input-icon-state-content-disabled-v18-1-1:#AABBCA;
-  --magritte-color-component-input-text-content-v18-1-1:#000000;
-  --magritte-color-component-input-text-label-v18-1-1:#768694;
-  --magritte-color-component-input-text-placeholder-v18-1-1:#AABBCA;
+  --magritte-color-component-input-stroke-state-field-hovered-v18-1-2:#CCD5DF;
+  --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
+  --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
+  --magritte-color-component-input-stroke-state-field-invalid-v18-1-2:#ff4d3a;
+  --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#EEF1F7;
+  --magritte-color-component-input-background-field-v18-1-2:#ffffff;
+  --magritte-color-component-input-background-state-field-hovered-v18-1-2:#ffffff;
+  --magritte-color-component-input-background-state-field-focused-v18-1-2:#ffffff;
+  --magritte-color-component-input-background-state-field-invalid-v18-1-2:#ffffff;
+  --magritte-color-component-input-background-state-field-disabled-v18-1-2:#F4F6FB;
+  --magritte-color-component-input-stroke-field-v18-1-2:#DCE3EB;
+  --magritte-color-component-input-text-state-content-disabled-v18-1-2:#AABBCA;
+  --magritte-color-component-input-text-state-label-disabled-v18-1-2:#AABBCA;
+  --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#AABBCA;
+  --magritte-color-component-input-text-state-content-hovered-v18-1-2:#000000;
+  --magritte-color-component-input-text-state-content-focused-v18-1-2:#000000;
+  --magritte-color-component-input-text-state-content-invalid-v18-1-2:#000000;
+  --magritte-color-component-input-text-state-label-hovered-v18-1-2:#768694;
+  --magritte-color-component-input-text-state-label-focused-v18-1-2:#768694;
+  --magritte-color-component-input-text-state-label-invalid-v18-1-2:#768694;
+  --magritte-color-component-input-text-state-placeholder-hovered-v18-1-2:#768694;
+  --magritte-color-component-input-text-state-placeholder-focused-v18-1-2:#AABBCA;
+  --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#AABBCA;
+  --magritte-color-component-input-counter-background-content-v18-1-2:#EEF1F7;
+  --magritte-color-component-input-counter-background-state-content-disabled-v18-1-2:#CCD5DF;
+  --magritte-color-component-input-counter-text-state-content-disabled-v18-1-2:#96aabb;
+  --magritte-color-component-input-counter-text-content-v18-1-2:#8293a2;
+  --magritte-color-component-input-icon-content-v18-1-2:#6a7885;
+  --magritte-color-component-input-icon-state-content-hovered-v18-1-2:#6a7885;
+  --magritte-color-component-input-icon-state-content-focused-v18-1-2:#000000;
+  --magritte-color-component-input-icon-state-content-invalid-v18-1-2:#6a7885;
+  --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#AABBCA;
+  --magritte-color-component-input-text-content-v18-1-2:#000000;
+  --magritte-color-component-input-text-label-v18-1-2:#768694;
+  --magritte-color-component-input-text-placeholder-v18-1-2:#AABBCA;
 }
 :root{
-  --magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
-  --magritte-semantic-animation-ease-in-out-100-duration-v18-1-1:100ms;
+  --magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-100-duration-v18-1-2:100ms;
 }
 .magritte-night-theme{
-  --magritte-color-component-input-stroke-state-field-hovered-v18-1-1:#3B3B3B;
-  --magritte-color-component-input-stroke-state-field-focused-v18-1-1:#0070ff;
-  --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-1:#0070ff7a;
-  --magritte-color-component-input-stroke-state-field-invalid-v18-1-1:#ff4d3a;
-  --magritte-color-component-input-stroke-state-field-disabled-v18-1-1:#111;
-  --magritte-color-component-input-background-field-v18-1-1:#1B1B1B;
-  --magritte-color-component-input-background-state-field-hovered-v18-1-1:#1B1B1B;
-  --magritte-color-component-input-background-state-field-focused-v18-1-1:#1B1B1B;
-  --magritte-color-component-input-background-state-field-invalid-v18-1-1:#1B1B1B;
-  --magritte-color-component-input-background-state-field-disabled-v18-1-1:#111;
-  --magritte-color-component-input-stroke-field-v18-1-1:#303030;
-  --magritte-color-component-input-text-content-v18-1-1:#ffffff;
-  --magritte-color-component-input-text-label-v18-1-1:#919191;
-  --magritte-color-component-input-text-placeholder-v18-1-1:#535353;
-  --magritte-color-component-input-text-state-content-disabled-v18-1-1:#474747;
-  --magritte-color-component-input-text-state-label-disabled-v18-1-1:#474747;
-  --magritte-color-component-input-text-state-placeholder-disabled-v18-1-1:#474747;
-  --magritte-color-component-input-text-state-content-hovered-v18-1-1:#ffffff;
-  --magritte-color-component-input-text-state-content-focused-v18-1-1:#ffffff;
-  --magritte-color-component-input-text-state-content-invalid-v18-1-1:#ffffff;
-  --magritte-color-component-input-text-state-label-hovered-v18-1-1:#919191;
-  --magritte-color-component-input-text-state-label-focused-v18-1-1:#5e9eff;
-  --magritte-color-component-input-text-state-label-invalid-v18-1-1:#fe725f;
-  --magritte-color-component-input-text-state-placeholder-hovered-v18-1-1:#5E5E5E;
-  --magritte-color-component-input-text-state-placeholder-focused-v18-1-1:#535353;
-  --magritte-color-component-input-text-state-placeholder-invalid-v18-1-1:#535353;
-  --magritte-color-component-input-counter-background-content-v18-1-1:#EEF1F7;
-  --magritte-color-component-input-counter-background-state-content-disabled-v18-1-1:#CCD5DF;
-  --magritte-color-component-input-counter-text-state-content-disabled-v18-1-1:#96aabb;
-  --magritte-color-component-input-counter-text-content-v18-1-1:#6a7885;
-  --magritte-color-component-input-icon-state-content-hovered-v18-1-1:#5E5E5E;
-  --magritte-color-component-input-icon-state-content-focused-v18-1-1:#ffffff;
-  --magritte-color-component-input-icon-state-content-invalid-v18-1-1:#767676;
-  --magritte-color-component-input-icon-state-content-disabled-v18-1-1:#474747;
-  --magritte-color-component-input-icon-content-v18-1-1:#ABABAB;
-}
-.magritte-select-activator___9XXwA_5-2-0{
+  --magritte-color-component-input-stroke-state-field-hovered-v18-1-2:#3B3B3B;
+  --magritte-color-component-input-stroke-state-field-focused-v18-1-2:#0070ff;
+  --magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2:#0070ff7a;
+  --magritte-color-component-input-stroke-state-field-invalid-v18-1-2:#ff4d3a;
+  --magritte-color-component-input-stroke-state-field-disabled-v18-1-2:#111;
+  --magritte-color-component-input-background-field-v18-1-2:#1B1B1B;
+  --magritte-color-component-input-background-state-field-hovered-v18-1-2:#1B1B1B;
+  --magritte-color-component-input-background-state-field-focused-v18-1-2:#1B1B1B;
+  --magritte-color-component-input-background-state-field-invalid-v18-1-2:#1B1B1B;
+  --magritte-color-component-input-background-state-field-disabled-v18-1-2:#111;
+  --magritte-color-component-input-stroke-field-v18-1-2:#303030;
+  --magritte-color-component-input-text-content-v18-1-2:#ffffff;
+  --magritte-color-component-input-text-label-v18-1-2:#919191;
+  --magritte-color-component-input-text-placeholder-v18-1-2:#535353;
+  --magritte-color-component-input-text-state-content-disabled-v18-1-2:#474747;
+  --magritte-color-component-input-text-state-label-disabled-v18-1-2:#474747;
+  --magritte-color-component-input-text-state-placeholder-disabled-v18-1-2:#474747;
+  --magritte-color-component-input-text-state-content-hovered-v18-1-2:#ffffff;
+  --magritte-color-component-input-text-state-content-focused-v18-1-2:#ffffff;
+  --magritte-color-component-input-text-state-content-invalid-v18-1-2:#ffffff;
+  --magritte-color-component-input-text-state-label-hovered-v18-1-2:#919191;
+  --magritte-color-component-input-text-state-label-focused-v18-1-2:#919191;
+  --magritte-color-component-input-text-state-label-invalid-v18-1-2:#919191;
+  --magritte-color-component-input-text-state-placeholder-hovered-v18-1-2:#5E5E5E;
+  --magritte-color-component-input-text-state-placeholder-focused-v18-1-2:#535353;
+  --magritte-color-component-input-text-state-placeholder-invalid-v18-1-2:#535353;
+  --magritte-color-component-input-counter-background-content-v18-1-2:#EEF1F7;
+  --magritte-color-component-input-counter-background-state-content-disabled-v18-1-2:#CCD5DF;
+  --magritte-color-component-input-counter-text-state-content-disabled-v18-1-2:#96aabb;
+  --magritte-color-component-input-counter-text-content-v18-1-2:#6a7885;
+  --magritte-color-component-input-icon-state-content-hovered-v18-1-2:#5E5E5E;
+  --magritte-color-component-input-icon-state-content-focused-v18-1-2:#ffffff;
+  --magritte-color-component-input-icon-state-content-invalid-v18-1-2:#767676;
+  --magritte-color-component-input-icon-state-content-disabled-v18-1-2:#474747;
+  --magritte-color-component-input-icon-content-v18-1-2:#ABABAB;
+}
+.magritte-select-activator___9XXwA_5-2-2{
   display:flex;
   flex:1 0 0;
   align-items:center;
@@ -85,158 +85,158 @@
   flex-basis:auto;
   border-radius:12px;
   padding:12px 12px 12px 16px;
-  background-color:var(--magritte-color-component-input-background-field-v18-1-1);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v18-1-1);
+  background-color:var(--magritte-color-component-input-background-field-v18-1-2);
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v18-1-2);
   min-width:60px;
   user-select:none;
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v18-1-1);
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-content-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0:focus{
-  background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-1);
-  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2:focus{
+  background-color:var(--magritte-color-component-input-background-state-field-focused-v18-1-2);
+  box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0:focus .magritte-select-activator-label___Mc49R_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-focused-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2:focus .magritte-select-activator-label___Mc49R_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0:focus .magritte-select-activator-placeholder___7ODSn_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-focused-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2:focus .magritte-select-activator-placeholder___7ODSn_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0:focus .magritte-select-activator-value___wDbVR_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2:focus .magritte-select-activator-value___wDbVR_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0:focus .magritte-select-activator-chevron___DHIUH_5-2-0{
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2:focus .magritte-select-activator-chevron___DHIUH_5-2-2{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-focused-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0.focus-visible{
-  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-1) solid 4px;
+.magritte-select-activator___9XXwA_5-2-2.focus-visible{
+  outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v18-1-2) solid 4px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-0:hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-1);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-1);
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-2:hover{
+    background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
+    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
     cursor:pointer;
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-label___Mc49R_5-2-0{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-1);
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-label___Mc49R_5-2-2{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-placeholder___7ODSn_5-2-0{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-1);
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-placeholder___7ODSn_5-2-2{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-value___wDbVR_5-2-0{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-1);
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-value___wDbVR_5-2-2{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
   }
-  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-chevron___DHIUH_5-2-0{
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-1);
+  body.magritte-old-layout .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-chevron___DHIUH_5-2-2{
+    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-0:hover{
-    background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-1);
-    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-1);
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-2:hover{
+    background-color:var(--magritte-color-component-input-background-state-field-hovered-v18-1-2);
+    box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v18-1-2);
     cursor:pointer;
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-label___Mc49R_5-2-0{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-1);
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-label___Mc49R_5-2-2{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-hovered-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-placeholder___7ODSn_5-2-0{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-1);
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-placeholder___7ODSn_5-2-2{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-hovered-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-value___wDbVR_5-2-0{
-    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-1);
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-value___wDbVR_5-2-2{
+    --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-hovered-v18-1-2);
   }
-  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-0:hover .magritte-select-activator-chevron___DHIUH_5-2-0{
-    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-1);
+  body:not(.magritte-old-layout) .magritte-select-activator___9XXwA_5-2-2:hover .magritte-select-activator-chevron___DHIUH_5-2-2{
+    --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-hovered-v18-1-2);
   }
 }
-.magritte-select-activator___9XXwA_5-2-0.magritte-select-activator-disabled___mYKi2_5-2-0{
+.magritte-select-activator___9XXwA_5-2-2.magritte-select-activator-disabled___mYKi2_5-2-2{
   cursor:not-allowed;
-  background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-1);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-1);
+  background-color:var(--magritte-color-component-input-background-state-field-disabled-v18-1-2);
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0.magritte-select-activator-disabled___mYKi2_5-2-0 .magritte-select-activator-item___JsY4v_5-2-0{
-  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v18-1-1);
-  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2.magritte-select-activator-disabled___mYKi2_5-2-2 .magritte-select-activator-item___JsY4v_5-2-2{
+  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-state-content-disabled-v18-1-2);
+  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-state-content-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0.magritte-select-activator-disabled___mYKi2_5-2-0 .magritte-select-activator-label___Mc49R_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-disabled-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2.magritte-select-activator-disabled___mYKi2_5-2-2 .magritte-select-activator-label___Mc49R_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0.magritte-select-activator-disabled___mYKi2_5-2-0 .magritte-select-activator-placeholder___7ODSn_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2.magritte-select-activator-disabled___mYKi2_5-2-2 .magritte-select-activator-placeholder___7ODSn_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0.magritte-select-activator-disabled___mYKi2_5-2-0 .magritte-select-activator-value___wDbVR_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2.magritte-select-activator-disabled___mYKi2_5-2-2 .magritte-select-activator-value___wDbVR_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-disabled-v18-1-2);
 }
-.magritte-select-activator___9XXwA_5-2-0.magritte-select-activator-disabled___mYKi2_5-2-0 .magritte-select-activator-chevron___DHIUH_5-2-0{
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v18-1-1);
+.magritte-select-activator___9XXwA_5-2-2.magritte-select-activator-disabled___mYKi2_5-2-2 .magritte-select-activator-chevron___DHIUH_5-2-2{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-disabled-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-0{
-  background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-1);
-  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-1);
+.magritte-select-activator-invalid___IdlRp_5-2-2{
+  background-color:var(--magritte-color-component-input-background-state-field-invalid-v18-1-2);
+  box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-0 .magritte-select-activator-label___Mc49R_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-invalid-v18-1-1);
+.magritte-select-activator-invalid___IdlRp_5-2-2 .magritte-select-activator-label___Mc49R_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-label-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-0 .magritte-select-activator-placeholder___7ODSn_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-1);
+.magritte-select-activator-invalid___IdlRp_5-2-2 .magritte-select-activator-placeholder___7ODSn_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-placeholder-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-0 .magritte-select-activator-value___wDbVR_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-1);
+.magritte-select-activator-invalid___IdlRp_5-2-2 .magritte-select-activator-value___wDbVR_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-state-content-invalid-v18-1-2);
 }
-.magritte-select-activator-invalid___IdlRp_5-2-0 .magritte-select-activator-chevron___DHIUH_5-2-0{
-  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-1);
+.magritte-select-activator-invalid___IdlRp_5-2-2 .magritte-select-activator-chevron___DHIUH_5-2-2{
+  --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-content-invalid-v18-1-2);
 }
-.magritte-select-activator-size-large___MIXAH_5-2-0{
+.magritte-select-activator-size-large___MIXAH_5-2-2{
   padding:16px;
 }
-.magritte-select-activator-with-label___DwcKr_5-2-0{
+.magritte-select-activator-with-label___DwcKr_5-2-2{
   padding:8px 16px;
 }
-.magritte-select-activator-label-root___eYIWQ_5-2-0{
+.magritte-select-activator-label-root___eYIWQ_5-2-2{
   display:flex;
   flex-direction:column;
   overflow:hidden;
 }
-.magritte-select-activator-item___JsY4v_5-2-0{
+.magritte-select-activator-item___JsY4v_5-2-2{
   display:flex;
   width:fit-content;
   gap:12px;
-  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v18-1-1);
-  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v18-1-1);
+  --magritte-counter-background-color:var(--magritte-color-component-input-counter-background-content-v18-1-2);
+  --magritte-counter-label-color:var(--magritte-color-component-input-counter-text-content-v18-1-2);
 }
-.magritte-select-activator-has-counter___k2Kc2_5-2-0{
+.magritte-select-activator-has-counter___k2Kc2_5-2-2{
   min-width:96px;
 }
-.magritte-select-activator-ellipsis___16zkC_5-2-0{
+.magritte-select-activator-ellipsis___16zkC_5-2-2{
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
 }
-.magritte-select-activator-placeholder___7ODSn_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-placeholder-v18-1-1);
+.magritte-select-activator-placeholder___7ODSn_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-placeholder-v18-1-2);
 }
-.magritte-select-activator-label___Mc49R_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-label-v18-1-1);
+.magritte-select-activator-label___Mc49R_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-label-v18-1-2);
 }
-.magritte-select-activator-value___wDbVR_5-2-0{
-  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v18-1-1);
+.magritte-select-activator-value___wDbVR_5-2-2{
+  --magritte-ui-text-color-override:var(--magritte-color-component-input-text-content-v18-1-2);
 }
-.magritte-select-activator-chevron___DHIUH_5-2-0{
+.magritte-select-activator-chevron___DHIUH_5-2-2{
   height:24px;
 }
 @media (prefers-reduced-motion: no-preference){
-  .magritte-select-activator-chevron-animation-timeout___y19bf_5-2-0,
-  .magritte-select-activator-chevron___DHIUH_5-2-0{
+  .magritte-select-activator-chevron-animation-timeout___y19bf_5-2-2,
+  .magritte-select-activator-chevron___DHIUH_5-2-2{
     transform:rotate(0);
     transition-property:transform;
-    transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-1);
-    transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-1);
-    --animation-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-1);
+    transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
+    transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-1-2);
+    --animation-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-2);
   }
-  .magritte-select-activator-chevron-up___gtPyi_5-2-0{
+  .magritte-select-activator-chevron-up___gtPyi_5-2-2{
     transform:rotate(-180deg);
   }
 }
-.magritte-select-options___y2KYZ_5-2-0{
+.magritte-select-options___y2KYZ_5-2-2{
   display:flex;
   width:100%;
   gap:12px;
@@ -246,9 +246,9 @@
   align-items:stretch;
   flex-direction:column;
 }
-.magritte-select-options-xs___BiiPo_5-2-0{
+.magritte-select-options-xs___BiiPo_5-2-2{
   margin-bottom:0;
 }
-.magritte-optionDelimiter___OaKsB_5-2-0{
+.magritte-optionDelimiter___OaKsB_5-2-2{
   padding:16px 8px 0;
 }

package/index.js

@@ -1,5 +1,5 @@
 import './index.css';
-export { S as SelectActivator } from './SelectActivator-1d7ecae1.js';
+export { S as SelectActivator } from './SelectActivator-97b8623e.js';
 export { UncontrolledSelect } from './UncontrolledSelect.js';
 export { Select } from './Select.js';
 import 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-select",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -22,20 +22,20 @@
     "@hh.ru/magritte-common-fuzzy-search": "1.0.4",
     "@hh.ru/magritte-common-keyboard": "3.0.2",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.2",
-    "@hh.ru/magritte-design-tokens": "18.1.1",
-    "@hh.ru/magritte-internal-field-hint": "1.2.26",
-    "@hh.ru/magritte-ui-bottom-sheet": "4.1.24",
+    "@hh.ru/magritte-design-tokens": "18.1.2",
+    "@hh.ru/magritte-internal-field-hint": "1.2.27",
+    "@hh.ru/magritte-ui-bottom-sheet": "4.1.25",
     "@hh.ru/magritte-ui-breakpoint": "4.0.1",
-    "@hh.ru/magritte-ui-card": "6.0.2",
-    "@hh.ru/magritte-ui-cell": "2.2.6",
-    "@hh.ru/magritte-ui-checkable-card": "3.0.3",
-    "@hh.ru/magritte-ui-checkbox-radio": "2.2.0",
-    "@hh.ru/magritte-ui-counter": "4.0.8",
-    "@hh.ru/magritte-ui-drop": "5.1.0",
-    "@hh.ru/magritte-ui-icon": "7.1.4",
-    "@hh.ru/magritte-ui-input": "5.0.14",
-    "@hh.ru/magritte-ui-navigation-bar": "4.1.9",
-    "@hh.ru/magritte-ui-typography": "3.0.8"
+    "@hh.ru/magritte-ui-card": "6.0.3",
+    "@hh.ru/magritte-ui-cell": "2.2.7",
+    "@hh.ru/magritte-ui-checkable-card": "3.0.5",
+    "@hh.ru/magritte-ui-checkbox-radio": "2.2.1",
+    "@hh.ru/magritte-ui-counter": "4.0.9",
+    "@hh.ru/magritte-ui-drop": "5.1.1",
+    "@hh.ru/magritte-ui-icon": "7.1.5",
+    "@hh.ru/magritte-ui-input": "5.0.15",
+    "@hh.ru/magritte-ui-navigation-bar": "4.1.10",
+    "@hh.ru/magritte-ui-typography": "3.0.9"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f389886d54baa53831572063d657dd243480424e"
+  "gitHead": "c8bb920cd73c2a9784997bdfec132f3b113b9568"
 }