@alfalab/core-components-custom-picker-button 2.0.0 → 2.0.2

package/{Component-89a3cf4c.d.ts → Component-50136800.d.ts}

@@ -61,7 +61,7 @@ declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectP
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы футера модалки
      */

package/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/{cssm/Component-e81c389f.d.ts → Component-c76d6398.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

package/Component.mobile-f1f15074.d.ts

@@ -28,7 +28,7 @@ type FooterProps = {
 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-e81c389f").HeaderProps>;
+    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
     Footer: React.FC<FooterProps>;
 };
 export { Content, FooterProps, Footer, ModalMobile };

package/Component.modal.mobile-5e1b8383.d.ts

@@ -42,7 +42,7 @@ declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelect
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы модалки
      */

package/{esm/component-89a3cf4c.d.ts → component-50136800.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC, ReactNode, RefObject } from "react";
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 import { SwipeableHandlers } from "react-swipeable";
 import { BackdropProps } from "./index-ebda875c";
 import { BottomSheetProps } from "./types-d9f9bbcc";

package/{modern/Component-89a3cf4c.d.ts → cssm/Component-50136800.d.ts}

@@ -61,7 +61,7 @@ declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectP
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы футера модалки
      */

package/cssm/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/{Component-e81c389f.d.ts → cssm/Component-c76d6398.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

package/cssm/Component.mobile-f1f15074.d.ts

@@ -28,7 +28,7 @@ type FooterProps = {
 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-e81c389f").HeaderProps>;
+    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
     Footer: React.FC<FooterProps>;
 };
 export { Content, FooterProps, Footer, ModalMobile };

package/cssm/Component.modal.mobile-5e1b8383.d.ts

@@ -42,7 +42,7 @@ declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelect
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы модалки
      */

package/cssm/{component-89a3cf4c.d.ts → component-50136800.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC, ReactNode, RefObject } from "react";
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 import { SwipeableHandlers } from "react-swipeable";
 import { BackdropProps } from "./index-ebda875c";
 import { BottomSheetProps } from "./types-d9f9bbcc";

package/cssm/index-50136800.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns };

package/cssm/{index-425c8522.d.ts → index-72dda473.d.ts}

@@ -3,4 +3,10 @@ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' |
 type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
 type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
 type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };

package/cssm/index-c76d6398.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-50136800";
+export type { NavigationBarProps } from "./types-83e2bd9e";

package/cssm/index-f12ee135.d.ts

@@ -1,3 +1,3 @@
-export * from "./component-89a3cf4c";
+export * from "./component-50136800";
 export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-d9f9bbcc";
 export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-49cc3c24";

package/cssm/shared-4cd3936b.d.ts

@@ -85,7 +85,7 @@ type SkeletonProps = {
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 export * from "./index-ebda875c";
-export * from "./Component-89a3cf4c";
+export * from "./Component-50136800";
 export * from "./Component-5e1b8383";
 export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
 export * from "./hook-9ea9e32c";

package/cssm/types-d9f9bbcc.d.ts

@@ -2,8 +2,8 @@
 import { HTMLAttributes, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./index-e81c389f";
-import { BackgroundColorType } from "./index-425c8522";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
     /**

package/esm/{Component-89a3cf4c.d.ts → Component-50136800.d.ts}

@@ -61,7 +61,7 @@ declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectP
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы футера модалки
      */

package/esm/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/esm/{Component-e81c389f.d.ts → Component-c76d6398.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

package/esm/Component.mobile-f1f15074.d.ts

@@ -28,7 +28,7 @@ type FooterProps = {
 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-e81c389f").HeaderProps>;
+    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
     Footer: React.FC<FooterProps>;
 };
 export { Content, FooterProps, Footer, ModalMobile };

package/esm/Component.modal.mobile-5e1b8383.d.ts

@@ -42,7 +42,7 @@ declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelect
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы модалки
      */

package/{component-89a3cf4c.d.ts → esm/component-50136800.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC, ReactNode, RefObject } from "react";
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 import { SwipeableHandlers } from "react-swipeable";
 import { BackdropProps } from "./index-ebda875c";
 import { BottomSheetProps } from "./types-d9f9bbcc";

package/esm/field/Component.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { CustomButton } from '@alfalab/core-components-custom-button/esm';
 import { getIcon } from '@alfalab/core-components-picker-button/esm/shared';
 
-var styles = {"iconContainer":"custom-picker-button__iconContainer_9jivq","addonsContainer":"custom-picker-button__addonsContainer_9jivq","showControlIcon":"custom-picker-button__showControlIcon_9jivq","open":"custom-picker-button__open_9jivq"};
+var styles = {"iconContainer":"custom-picker-button__iconContainer_1sbn5","addonsContainer":"custom-picker-button__addonsContainer_1sbn5","showControlIcon":"custom-picker-button__showControlIcon_1sbn5","open":"custom-picker-button__open_1sbn5"};
 require('./index.css')
 
 var Field = function (_a) {

package/esm/field/index.css

@@ -1,4 +1,4 @@
-/* hash: ncege */
+/* hash: 1diq7 */
 :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 */
@@ -16,13 +16,13 @@
 } :root {
 } :root {
     --arrow-transform: rotate(180deg);
-} .custom-picker-button__iconContainer_9jivq {
+} .custom-picker-button__iconContainer_1sbn5 {
     display: flex;
     transition: transform 0.15s ease-in-out;
-} .custom-picker-button__addonsContainer_9jivq {
+} .custom-picker-button__addonsContainer_1sbn5 {
     display: flex
-} .custom-picker-button__addonsContainer_9jivq.custom-picker-button__showControlIcon_9jivq {
+} .custom-picker-button__addonsContainer_1sbn5.custom-picker-button__showControlIcon_1sbn5 {
         margin-right: var(--gap-2xs);
-    } .custom-picker-button__open_9jivq {
+    } .custom-picker-button__open_1sbn5 {
     transform: var(--arrow-transform);
 }

package/esm/index-50136800.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns };

package/esm/{index-425c8522.d.ts → index-72dda473.d.ts}

@@ -3,4 +3,10 @@ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' |
 type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
 type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
 type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };

package/esm/index-c76d6398.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-50136800";
+export type { NavigationBarProps } from "./types-83e2bd9e";

package/esm/index-f12ee135.d.ts

@@ -1,3 +1,3 @@
-export * from "./component-89a3cf4c";
+export * from "./component-50136800";
 export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-d9f9bbcc";
 export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-49cc3c24";

package/esm/shared-4cd3936b.d.ts

@@ -85,7 +85,7 @@ type SkeletonProps = {
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 export * from "./index-ebda875c";
-export * from "./Component-89a3cf4c";
+export * from "./Component-50136800";
 export * from "./Component-5e1b8383";
 export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
 export * from "./hook-9ea9e32c";

package/esm/types-d9f9bbcc.d.ts

@@ -2,8 +2,8 @@
 import { HTMLAttributes, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./index-e81c389f";
-import { BackgroundColorType } from "./index-425c8522";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
     /**

package/field/Component.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"iconContainer":"custom-picker-button__iconContainer_9jivq","addonsContainer":"custom-picker-button__addonsContainer_9jivq","showControlIcon":"custom-picker-button__showControlIcon_9jivq","open":"custom-picker-button__open_9jivq"};
+var styles = {"iconContainer":"custom-picker-button__iconContainer_1sbn5","addonsContainer":"custom-picker-button__addonsContainer_1sbn5","showControlIcon":"custom-picker-button__showControlIcon_1sbn5","open":"custom-picker-button__open_1sbn5"};
 require('./index.css')
 
 var Field = function (_a) {

package/field/index.css

@@ -1,4 +1,4 @@
-/* hash: ncege */
+/* hash: 1diq7 */
 :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 */
@@ -16,13 +16,13 @@
 } :root {
 } :root {
     --arrow-transform: rotate(180deg);
-} .custom-picker-button__iconContainer_9jivq {
+} .custom-picker-button__iconContainer_1sbn5 {
     display: flex;
     transition: transform 0.15s ease-in-out;
-} .custom-picker-button__addonsContainer_9jivq {
+} .custom-picker-button__addonsContainer_1sbn5 {
     display: flex
-} .custom-picker-button__addonsContainer_9jivq.custom-picker-button__showControlIcon_9jivq {
+} .custom-picker-button__addonsContainer_1sbn5.custom-picker-button__showControlIcon_1sbn5 {
         margin-right: var(--gap-2xs);
-    } .custom-picker-button__open_9jivq {
+    } .custom-picker-button__open_1sbn5 {
     transform: var(--arrow-transform);
 }

package/index-50136800.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns };

package/{index-425c8522.d.ts → index-72dda473.d.ts}

@@ -3,4 +3,10 @@ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' |
 type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
 type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
 type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };

package/index-c76d6398.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-50136800";
+export type { NavigationBarProps } from "./types-83e2bd9e";

package/index-f12ee135.d.ts

@@ -1,3 +1,3 @@
-export * from "./component-89a3cf4c";
+export * from "./component-50136800";
 export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-d9f9bbcc";
 export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-49cc3c24";

package/{cssm/Component-89a3cf4c.d.ts → modern/Component-50136800.d.ts}

@@ -61,7 +61,7 @@ declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectP
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы футера модалки
      */

package/modern/Component-72dda473.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import React from 'react';
+import { BackgroundColorType, GraphicColorType } from "./index-72dda473";
+type IconColorType = Extract<GraphicColorType, 'positive' | 'attention' | 'link' | 'negative' | 'tertiary' | 'secondary' | 'primary'>;
+type BadgeProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     *  Вид компонента
+     */
+    view: 'icon' | 'count';
+    /**
+     * Размер компонента (только для view=icon)
+     * //deprecated(используйте height для view=count )
+     */
+    size?: 's' | 'm' | 'l' | 'xl';
+    /**
+     *  Видимость белой обводки вокруг иконки
+     */
+    visibleIconOutline?: boolean;
+    /**
+     *  Видимость цветной обводки вокруг иконки (только для view=icon)
+     */
+    visibleColorOutline?: boolean;
+    /**
+     * Контент компонента
+     */
+    content?: React.ReactElement | number;
+    /**
+     * Высота компонента, min = 16; max = 48 (только для view=count)
+     */
+    height?: number;
+    /**
+     * Цветовое оформление бейджа при view='count'
+     */
+    color?: Extract<BackgroundColorType, 'accent' | 'primary' | 'specialbg-secondary-transparent'>;
+    /**
+     * Цветовое оформление бейджа при view='icon'
+     */
+    iconColor?: IconColorType;
+    /**
+     * Цвет подложки под иконкой
+     */
+    iconUnderlayColor?: Extract<GraphicColorType, 'primary' | 'static-light'>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Badge: ({ className, size, view, visibleIconOutline, visibleColorOutline, content, height, iconColor, color, iconUnderlayColor, dataTestId, }: BadgeProps) => React.JSX.Element;
+export { IconColorType, BadgeProps, Badge };

package/modern/{Component-e81c389f.d.ts → Component-c76d6398.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 type HeaderProps = Omit<NavigationBarProps, 'size' | 'view' | 'parentRef'>;
 declare const Header: FC<HeaderProps>;
 export { HeaderProps, Header };

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

@@ -28,7 +28,7 @@ type FooterProps = {
 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-e81c389f").HeaderProps>;
+    Header: React.FC<import("./Component-c76d6398").HeaderProps>;
     Footer: React.FC<FooterProps>;
 };
 export { Content, FooterProps, Footer, ModalMobile };

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

@@ -42,7 +42,7 @@ declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<BaseSelect
     /**
      *  Дополнительные пропсы шапки модалки
      */
-    modalHeaderProps?: Partial<import("./Component-e81c389f").HeaderProps> | undefined;
+    modalHeaderProps?: Partial<import("./Component-c76d6398").HeaderProps> | undefined;
     /**
      *  Дополнительные пропсы модалки
      */

package/modern/{component-89a3cf4c.d.ts → component-50136800.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC, ReactNode, RefObject } from "react";
-import { NavigationBarProps } from "./index-e81c389f";
+import { NavigationBarProps } from "./index-c76d6398";
 import { SwipeableHandlers } from "react-swipeable";
 import { BackdropProps } from "./index-ebda875c";
 import { BottomSheetProps } from "./types-d9f9bbcc";

package/modern/field/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { CustomButton } from '@alfalab/core-components-custom-button/modern';
 import { getIcon } from '@alfalab/core-components-picker-button/modern/shared';
 
-const styles = {"iconContainer":"custom-picker-button__iconContainer_9jivq","addonsContainer":"custom-picker-button__addonsContainer_9jivq","showControlIcon":"custom-picker-button__showControlIcon_9jivq","open":"custom-picker-button__open_9jivq"};
+const styles = {"iconContainer":"custom-picker-button__iconContainer_1sbn5","addonsContainer":"custom-picker-button__addonsContainer_1sbn5","showControlIcon":"custom-picker-button__showControlIcon_1sbn5","open":"custom-picker-button__open_1sbn5"};
 require('./index.css')
 
 const Field = ({ buttonSize = 'm', buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, ...restProps }) => {

package/modern/field/index.css

@@ -1,4 +1,4 @@
-/* hash: ncege */
+/* hash: 1diq7 */
 :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 */
@@ -16,13 +16,13 @@
 } :root {
 } :root {
     --arrow-transform: rotate(180deg);
-} .custom-picker-button__iconContainer_9jivq {
+} .custom-picker-button__iconContainer_1sbn5 {
     display: flex;
     transition: transform 0.15s ease-in-out;
-} .custom-picker-button__addonsContainer_9jivq {
+} .custom-picker-button__addonsContainer_1sbn5 {
     display: flex
-} .custom-picker-button__addonsContainer_9jivq.custom-picker-button__showControlIcon_9jivq {
+} .custom-picker-button__addonsContainer_1sbn5.custom-picker-button__showControlIcon_1sbn5 {
         margin-right: var(--gap-2xs);
-    } .custom-picker-button__open_9jivq {
+    } .custom-picker-button__open_1sbn5 {
     transform: var(--arrow-transform);
 }

package/modern/index-50136800.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from "react";
+import { PaddingType } from "./index-72dda473";
+declare const isClient: () => boolean;
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare function createPaddingStyle(padding?: PaddingType): undefined | React.CSSProperties;
+declare function easeInOutQuad(x: number): number;
+declare const easingFns: {
+    easeInOutQuad: typeof easeInOutQuad;
+};
+export { isClient, getDataTestId, createPaddingStyle, easingFns };

package/modern/{index-425c8522.d.ts → index-72dda473.d.ts}

@@ -3,4 +3,10 @@ type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' |
 type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
 type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
 type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
-export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };
+type PaddingType = number | string | {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType, PaddingType };

package/modern/index-c76d6398.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-50136800";
+export type { NavigationBarProps } from "./types-83e2bd9e";

package/modern/index-f12ee135.d.ts

@@ -1,3 +1,3 @@
-export * from "./component-89a3cf4c";
+export * from "./component-50136800";
 export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-d9f9bbcc";
 export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-49cc3c24";

package/modern/shared-4cd3936b.d.ts

@@ -85,7 +85,7 @@ type SkeletonProps = {
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 export * from "./index-ebda875c";
-export * from "./Component-89a3cf4c";
+export * from "./Component-50136800";
 export * from "./Component-5e1b8383";
 export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
 export * from "./hook-9ea9e32c";

package/modern/types-d9f9bbcc.d.ts

@@ -2,8 +2,8 @@
 import { HTMLAttributes, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./index-e81c389f";
-import { BackgroundColorType } from "./index-425c8522";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-custom-picker-button",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "description": "Custom picker button component",
     "keywords": [],
     "license": "MIT",
@@ -35,9 +35,10 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-picker-button": "^11.0.0",
-        "@alfalab/core-components-custom-button": "^3.3.0",
+        "@alfalab/core-components-picker-button": "^11.0.2",
+        "@alfalab/core-components-custom-button": "^3.3.2",
         "@alfalab/core-components-mq": "^4.2.0",
+        "@alfalab/core-components-select": "^15.0.2",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     }

package/shared-4cd3936b.d.ts

@@ -85,7 +85,7 @@ type SkeletonProps = {
 };
 declare const Skeleton: React.FC<SkeletonProps>;
 export * from "./index-ebda875c";
-export * from "./Component-89a3cf4c";
+export * from "./Component-50136800";
 export * from "./Component-5e1b8383";
 export { useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
 export * from "./hook-9ea9e32c";

package/types-d9f9bbcc.d.ts

@@ -2,8 +2,8 @@
 import { HTMLAttributes, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "./index-bdb4c6b9";
-import { NavigationBarProps } from "./index-e81c389f";
-import { BackgroundColorType } from "./index-425c8522";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
 type BottomSheetTitleAlign = 'center' | 'left';
 type BottomSheetProps = {
     /**

package/cssm/index-89a3cf4c.d.ts

@@ -1,3 +0,0 @@
-declare const isClient: () => boolean;
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { isClient, getDataTestId };

package/cssm/index-e81c389f.d.ts

@@ -1,3 +0,0 @@
-export * from "./Component-89a3cf4c";
-export * from "./index-ebda875c";
-export type { NavigationBarProps } from "./types-ebda875c";

package/esm/index-89a3cf4c.d.ts

@@ -1,3 +0,0 @@
-declare const isClient: () => boolean;
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { isClient, getDataTestId };

package/esm/index-e81c389f.d.ts

@@ -1,3 +0,0 @@
-export * from "./Component-89a3cf4c";
-export * from "./index-ebda875c";
-export type { NavigationBarProps } from "./types-ebda875c";

package/index-89a3cf4c.d.ts

@@ -1,3 +0,0 @@
-declare const isClient: () => boolean;
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { isClient, getDataTestId };

package/index-e81c389f.d.ts

@@ -1,3 +0,0 @@
-export * from "./Component-89a3cf4c";
-export * from "./index-ebda875c";
-export type { NavigationBarProps } from "./types-ebda875c";

package/modern/index-89a3cf4c.d.ts

@@ -1,3 +0,0 @@
-declare const isClient: () => boolean;
-declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
-export { isClient, getDataTestId };

package/modern/index-e81c389f.d.ts

@@ -1,3 +0,0 @@
-export * from "./Component-89a3cf4c";
-export * from "./index-ebda875c";
-export type { NavigationBarProps } from "./types-ebda875c";