@alfalab/core-components-custom-picker-button 1.0.0

package/modern/Component-3ebe4754.d.ts

@@ -0,0 +1,176 @@
+/// <reference types="react" />
+import React from 'react';
+import { HTMLAttributes, ReactNode } from "react";
+type FormControlProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: 'inner' | 'outer';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот под полем
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string;
+    /**
+     * Дополнительный класс для поля
+     */
+    inputWrapperClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonsClassName?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Компонент поля (инпут, textarea и пр.)
+     */
+    children?: ReactNode;
+};
+declare const FormControl: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+    /**
+     * Размер компонента
+     */
+    size?: "s" | "m" | "l" | "xl" | undefined;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted" | undefined;
+    /**
+     * Заблокированное состояние
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Cостояние только для чтения
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Заполненное состояние
+     */
+    filled?: boolean | undefined;
+    /**
+     * Выбранное (фокус) состояние
+     */
+    focused?: boolean | undefined;
+    /**
+     * Отображение ошибки
+     */
+    error?: ReactNode | boolean;
+    /**
+     * Текст подсказки
+     */
+    hint?: ReactNode;
+    /**
+     * Лейбл компонента
+     */
+    label?: ReactNode;
+    /**
+     * Вид лейбла внутри / снаружи
+     */
+    labelView?: "inner" | "outer" | undefined;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот под полем
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для поля
+     */
+    fieldClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поля
+     */
+    inputWrapperClassName?: string | undefined;
+    /**
+     * Дополнительный класс для лейбла
+     */
+    labelClassName?: string | undefined;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonsClassName?: string | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string | undefined;
+    /**
+     * Компонент поля (инпут, textarea и пр.)
+     */
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export { FormControlProps, FormControl };

package/modern/Component-5e1b8383.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckmarkProps } from "./typings-5e1b8383";
+declare const BaseCheckmark: ({ selected, disabled, className, multiple, }: CheckmarkProps) => JSX.Element;
+export { BaseCheckmark };

package/modern/Component-bdb4c6b9.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { View } from "./typings-bdb4c6b9";
+declare const Modal: React.ForwardRefExoticComponent<import("./index-bdb4c6b9").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+} & {
+    view: View;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Modal };

package/modern/Component-ebda875c.d.ts

@@ -0,0 +1,142 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+import React from 'react';
+import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
+import { TransitionProps } from 'react-transition-group/Transition';
+import { BackdropProps, PortalProps } from "./index-ebda875c";
+type BaseModalProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Компонент бэкдропа
+     */
+    Backdrop?: FC<BackdropProps>;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps['getPortalContainer'];
+    /**
+     * Отключает автоматический перевод фокуса на модалку при открытии
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     * @default false
+     */
+    disableFocusLock?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `callback` при нажатии Escape
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Отключает вызов `callback` при клике на бэкдроп
+     * @default false
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     * @default false
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * Содержимое модалки всегда в DOM
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для обертки (Modal)
+     */
+    wrapperClassName?: string;
+    /**
+     * Обработчик скролла контента
+     */
+    scrollHandler?: 'wrapper' | 'content' | MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Пропсы для анимации (CSSTransition)
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Рендерить ли в контейнер через портал.
+     * @default true
+     */
+    usePortal?: boolean;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    onBackdropClick?: (event: MouseEvent) => void;
+    /**
+     * Обработчик события нажатия на Escape
+     *
+     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick') => void;
+    /**
+     * Обработчик события onEntered компонента Transition
+     */
+    onMount?: () => void;
+    /**
+     * Обработчик события onExited компонента Transition
+     */
+    onUnmount?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Реф, который должен быть установлен компонентной области
+     */
+    componentRef?: MutableRefObject<HTMLDivElement | null>;
+};
+type BaseModalContext = {
+    parentRef: React.RefObject<HTMLDivElement>;
+    componentRef: React.RefObject<HTMLDivElement>;
+    hasFooter?: boolean;
+    hasHeader?: boolean;
+    hasScroll?: boolean;
+    headerHighlighted?: boolean;
+    footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
+    contentRef: Ref<HTMLElement>;
+    setHasHeader: (exists: boolean) => void;
+    setHasFooter: (exists: boolean) => void;
+    onClose: Required<BaseModalProps>['onClose'];
+};
+declare const BaseModalContext: React.Context<BaseModalContext>;
+declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+export { BaseModalProps, BaseModalContext, BaseModal };

package/modern/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "@alfalab/core-components-custom-button";
+type CustomPickerButtonDesktopProps = Omit<PickerButtonDesktopProps, 'view' | 'colors'> & Pick<CustomButtonProps, 'backgroundColor' | 'contentColor' | 'stateType'>;
+declare const CustomPickerButtonDesktop: React.ForwardRefExoticComponent<Omit<PickerButtonDesktopProps, "colors" | "view"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & React.RefAttributes<HTMLInputElement>>;
+export { CustomPickerButtonDesktopProps, CustomPickerButtonDesktop };

package/modern/Component.desktop.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { PickerButtonDesktop } from '@alfalab/core-components-picker-button/modern/desktop';
+import { Field } from './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/modern';
+import '@alfalab/core-components-picker-button/modern';
+
+const DEFAULT_BUTTON_COLOR = '#FF45C3';
+const DEFAULT_CONTENT_COLOR = 'white';
+const CustomPickerButtonDesktop = forwardRef(({ backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', ...restProps }, ref) => (React.createElement(PickerButtonDesktop, { ...restProps, fieldProps: {
+        backgroundColor,
+        contentColor,
+        stateType,
+    }, Field: Field, ref: ref })));
+
+export { CustomPickerButtonDesktop };

package/modern/Component.mobile-ae13210f.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { AdditionalMobileProps } from "./index-3e68f8db";
+import { PickerButtonDesktopProps } from "./Component-2aef4eba";
+type PickerButtonMobileProps = Omit<PickerButtonDesktopProps, 'OptionsList' | 'Checkmark' | 'onScroll'> & AdditionalMobileProps;
+declare const PickerButtonMobile: React.ForwardRefExoticComponent<Omit<PickerButtonDesktopProps, "onScroll" | "OptionsList" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { PickerButtonMobileProps, PickerButtonMobile };

package/modern/Component.mobile-b2c0420d.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { ContentProps, ModalMobileProps } from "./typings-bdb4c6b9";
+declare const Content: FC<ContentProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./typings-bdb4c6b9").ContentProps>;
+    Header: React.FC<import("./Component-5e1b8383").HeaderProps>;
+    Footer: React.FC<FooterProps>;
+    Closer: React.FC<import("./index-e81c389f").CloserProps>;
+};
+export { Content, FooterProps, Footer, ModalMobile };

package/modern/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "@alfalab/core-components-custom-button";
+type CustomPickerButtonMobileProps = Omit<PickerButtonMobileProps, 'view' | 'colors'> & Pick<CustomButtonProps, 'backgroundColor' | 'contentColor' | 'stateType'>;
+declare const CustomPickerButtonMobile: React.ForwardRefExoticComponent<Omit<PickerButtonMobileProps, "colors" | "view"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & React.RefAttributes<HTMLInputElement>>;
+export { CustomPickerButtonMobileProps, CustomPickerButtonMobile };

package/modern/Component.mobile.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { PickerButtonMobile } from '@alfalab/core-components-picker-button/modern/mobile';
+import { Field } from './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/modern';
+import '@alfalab/core-components-picker-button/modern';
+
+const DEFAULT_BUTTON_COLOR = '#FF45C3';
+const DEFAULT_CONTENT_COLOR = 'white';
+const CustomPickerButtonMobile = forwardRef(({ backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', ...restProps }, ref) => (React.createElement(PickerButtonMobile, { ...restProps, fieldProps: {
+        backgroundColor,
+        contentColor,
+        stateType,
+    }, Field: Field, ref: ref })));
+
+export { CustomPickerButtonMobile };

package/modern/Component.responsive-2aef4eba.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { ButtonProps } from "./index-ebda875c";
+import { AdditionalMobileProps } from "./index-3e68f8db";
+import { PickerButtonDesktopProps } from "./Component-2aef4eba";
+type PickerButtonMatchMedia = 'desktop' | 'mobile';
+type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("./index-3e68f8db").BaseSelectProps, "size" | "placeholder" | "onFocus" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow"> & Pick<ButtonProps, "view" | "leftAddons" | "rightAddons" | "loading"> & {
+    options: ((import("./index-3e68f8db").OptionShape | import("./index-3e68f8db").GroupShape) & {
+        icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
+    })[];
+    size?: import("./Component-2aef4eba").PickerButtonSize | undefined;
+    variant?: import("./Component-2aef4eba").PickerButtonVariant | undefined;
+    showArrow?: boolean | undefined;
+} & AdditionalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { PickerButtonMatchMedia, PickerButtonResponsiveProps, PickerButtonResponsive };

package/modern/Component.responsive.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "@alfalab/core-components-custom-button";
+import { PickerButtonDesktopProps } from "./index-2aef4eba";
+import { AdditionalMobileProps } from "./index-3e68f8db";
+import { CustomPickerButtonDesktopProps } from "./Component.desktop";
+type PickerButtonMatchMedia = 'desktop' | 'mobile';
+type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & AdditionalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<PickerButtonDesktopProps, "colors" | "view"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { PickerButtonMatchMedia, CustomPickerButtonResponsiveProps, CustomPickerButtonResponsive };

package/modern/Component.responsive.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '@alfalab/core-components-mq/modern';
+import { CustomPickerButtonDesktop } from './Component.desktop.js';
+import { CustomPickerButtonMobile } from './Component.mobile.js';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/modern';
+import '@alfalab/core-components-picker-button/modern';
+import '@alfalab/core-components-picker-button/modern/mobile';
+
+const CustomPickerButtonResponsive = forwardRef(({ OptionsList, onScroll, footer, swipeable, bottomSheetProps, breakpoint = 1024, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const [isDesktop] = useMatchMedia(query);
+    return isDesktop ? (React.createElement(CustomPickerButtonDesktop, { ref: ref, OptionsList: OptionsList, onScroll: onScroll, ...restProps })) : (React.createElement(CustomPickerButtonMobile, { ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps, ...restProps }));
+});
+
+export { CustomPickerButtonResponsive };

package/modern/Context-bdb4c6b9.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "./index-bdb4c6b9";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/modern/ResponsiveContext-baf4875b.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings-bdb4c6b9";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

package/modern/component-3885b0d7.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, RefObject, ReactNode } from "react";
+import { NavigationBarProps } from "./index-e81c389f";
+import { SwipeableHandlers } from "react-swipeable";
+import { BackdropProps } from "./index-ebda875c";
+import { BottomSheetProps } from "./types-5e678ff2";
+type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
+    headerRef: RefObject<HTMLDivElement>;
+};
+declare const Header: FC<HeaderProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+declare const Footer: FC<FooterProps>;
+type SwipeableBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Обработчики свайпа
+     */
+    handlers?: SwipeableHandlers;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+export { HeaderProps, Header, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop, BottomSheet };

package/modern/consts-f777ba1a.d.ts

@@ -0,0 +1,2 @@
+declare const DEFAULT_VISIBLE_OPTIONS = 5;
+export { DEFAULT_VISIBLE_OPTIONS };

package/modern/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/modern/desktop.js

@@ -0,0 +1,7 @@
+export { CustomPickerButtonDesktop } from './Component.desktop.js';
+import 'react';
+import '@alfalab/core-components-picker-button/modern/desktop';
+import './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/modern';
+import '@alfalab/core-components-picker-button/modern';

package/modern/field/Component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CustomButtonProps } from "@alfalab/core-components-custom-button";
+import { PickerButtonSize, PickerButtonVariant } from "../index-2aef4eba";
+import { FieldProps as BaseFieldProps } from "../typings-5e1b8383";
+type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & CustomButtonProps & {
+    buttonSize?: PickerButtonSize;
+    buttonVariant?: PickerButtonVariant;
+    showArrow?: boolean;
+};
+declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, ...restProps }: FieldProps) => JSX.Element;
+export { Field };

package/modern/field/Component.js

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react';
+import cn from 'classnames';
+import { CustomButton } from '@alfalab/core-components-custom-button/modern';
+import { getIcon } from '@alfalab/core-components-picker-button/modern';
+
+const styles = {"iconContainer":"custom-picker-button__iconContainer_z6y60","addonsContainer":"custom-picker-button__addonsContainer_z6y60","showControlIcon":"custom-picker-button__showControlIcon_z6y60","open":"custom-picker-button__open_z6y60"};
+require('./index.css')
+
+const Field = ({ buttonSize = 'm', buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, ...restProps }) => {
+    const Icon = getIcon(buttonVariant, buttonSize);
+    const buttonProps = {
+        ...restProps,
+        ...innerProps,
+    };
+    return (React.createElement(CustomButton, { ...buttonProps, rightAddons: React.createElement(Fragment, null,
+            rightAddons && (React.createElement("span", { className: cn(styles.addonsContainer, {
+                    [styles.showControlIcon]: showArrow || buttonVariant === 'compact',
+                }) }, rightAddons)),
+            (showArrow || buttonVariant === 'compact') && (React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
+                React.createElement(Icon, { "data-test-id": 'custom-picker-button-icon' })))), block: true, size: buttonSize, backgroundColor: backgroundColor, contentColor: contentColor, stateType: stateType, className: className }, buttonVariant !== 'compact' && label));
+};
+
+export { Field };

package/modern/field/index.css

@@ -0,0 +1,28 @@
+/* hash: 81i0w */
+:root {
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+} :root {
+} :root {
+    --arrow-transform: rotate(180deg);
+} .custom-picker-button__iconContainer_z6y60 {
+    display: flex;
+    transition: transform 0.15s ease-in-out;
+} .custom-picker-button__addonsContainer_z6y60 {
+    display: flex
+} .custom-picker-button__addonsContainer_z6y60.custom-picker-button__showControlIcon_z6y60 {
+        margin-right: var(--gap-2xs);
+    } .custom-picker-button__open_z6y60 {
+    transform: var(--arrow-transform);
+}

package/modern/field/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/field/index.js

@@ -0,0 +1,5 @@
+export { Field } from './Component.js';
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-custom-button/modern';
+import '@alfalab/core-components-picker-button/modern';