@salutejs/plasma-web 1.368.0-dev.0 → 1.369.0-canary.1349.10432639210.0

package/api/plasma-web.api.md

@@ -39,7 +39,6 @@ import { BaseboxProps } from '@salutejs/plasma-new-hope/styled-components';
 import { BaseCallbackChangeInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { BaseCallbackKeyboardInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types';
 import { BaseProps } from '@salutejs/plasma-new-hope/types/components/Autocomplete/Autocomplete.types';
-import { BasicProps } from '@salutejs/plasma-new-hope/types/components/Select/Select.types';
 import { BlurProps } from '@salutejs/plasma-core';
 import { blurs } from '@salutejs/plasma-core';
 import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types';
@@ -157,6 +156,7 @@ import { ListItem } from '@salutejs/plasma-hope';
 import { MaxLinesProps } from '@salutejs/plasma-core';
 import { mediaQuery } from '@salutejs/plasma-hope';
 import { MediaQueryFunction } from '@salutejs/plasma-hope';
+import { MergedDropdownNode } from '@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types';
 import { Modal } from '@salutejs/plasma-hope';
 import { modalClasses as modalBaseClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { ModalProps as ModalBaseProps } from '@salutejs/plasma-new-hope/styled-components';
@@ -199,6 +199,7 @@ import { PreviewGalleryProps } from '@salutejs/plasma-hope';
 import { priceClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { PriceProps } from '@salutejs/plasma-new-hope/types/components/Price/Price.types';
 import { ProgressProps } from '@salutejs/plasma-new-hope/styled-components';
+import { Property } from 'csstype';
 import { Props } from '@salutejs/plasma-new-hope/types/components/EmptyState/EmptyState.types';
 import { PropsType } from '@salutejs/plasma-new-hope/types/engines/types';
 import { RadioGroup } from '@salutejs/plasma-new-hope/styled-components';
@@ -228,7 +229,8 @@ import { SegmentItemProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentProvider } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentProviderProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SelectGroup } from '@salutejs/plasma-hope';
-import { SelectProps } from '@salutejs/plasma-hope';
+import { MergedSelectProps as SelectProps } from '@salutejs/plasma-new-hope/styled-components';
+import { SelectProps as SelectPropsHope } from '@salutejs/plasma-hope';
 import { selectText } from '@salutejs/plasma-hope';
 import { setRef } from '@salutejs/plasma-core';
 import { shadows } from '@salutejs/plasma-core';
@@ -257,6 +259,7 @@ import { StyledComponent } from 'styled-components';
 import { StyledPreviewGallery } from '@salutejs/plasma-hope';
 import { SubtitleProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SwitchProps as SwitchProps_2 } from '@salutejs/plasma-new-hope/styled-components';
+import { SyntheticEvent } from 'react';
 import { syntheticFocus } from '@salutejs/plasma-core';
 import { TabItemProps } from '@salutejs/plasma-new-hope/styled-components';
 import { TabItemRefs } from '@salutejs/plasma-new-hope/styled-components';
@@ -283,6 +286,7 @@ import { toolbarTokens } from '@salutejs/plasma-new-hope/styled-components';
 import { TooltipProps } from '@salutejs/plasma-new-hope/styled-components';
 import { transformStyles } from '@salutejs/plasma-core';
 import { TypographyOldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Old/TypographyOld';
+import { UIEvent as UIEvent_2 } from 'react';
 import { Upload } from '@salutejs/plasma-hope';
 import { UploadAudio } from '@salutejs/plasma-hope';
 import { UploadAudioProps } from '@salutejs/plasma-hope';
@@ -2042,13 +2046,8 @@ export { SegmentProvider }
 
 export { SegmentProviderProps }
 
-// @public
-export const Select: React_2.ForwardRefExoticComponent<SelectProps<any> & React_2.RefAttributes<HTMLButtonElement>>;
-
-export { SelectGroup }
-
-// @public
-export const SelectNew: FunctionComponent<PropsType<    {
+// @public (undocumented)
+export const Select: FunctionComponent<PropsType<    {
 size: {
 xs: PolymorphicClassName;
 s: PolymorphicClassName;
@@ -2072,62 +2071,162 @@ default: PolymorphicClassName;
 secondary: PolymorphicClassName;
 accent: PolymorphicClassName;
 };
-}> & ((BasicProps & {
+}> & (({
+target?: "textfield-like" | undefined;
+view?: "default" | "positive" | "warning" | "negative" | undefined;
+contentLeft?: ReactNode;
+labelPlacement?: "outer" | "inner" | undefined;
+placeholder?: string | undefined;
+helperText?: string | undefined;
+} & {
 multiselect?: false | undefined;
-value?: string | undefined;
-onChange?: ((value: string) => void) | undefined;
-isTargetAmount?: false | undefined;
-renderTarget?: ((value: string) => ReactNode) | undefined;
+separator?: undefined;
 } & {
+value: any;
+onChange?: ((value: any) => void) | undefined;
+listOverflow?: Property.Overflow | undefined;
+listHeight?: Property.Height<string | number> | undefined;
+status?: "warning" | "success" | "error" | undefined;
+placeholder?: string | undefined;
+helperText?: string | undefined;
+disabled?: boolean | undefined;
+items?: MergedDropdownNode[] | undefined;
+onItemSelect?: ((e: MergedDropdownNode, event: SyntheticEvent<Element, Event>) => void) | undefined;
+hasItems?: boolean | undefined;
+children?: undefined;
+isOpen?: boolean | undefined;
+isTargetAmount?: boolean | undefined;
+renderTarget?: ((item: MergedDropdownNode | MergedDropdownNode[]) => ReactNode) | undefined;
+placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+label?: string | undefined;
+onScrollBottom?: ((e: UIEvent_2<HTMLUListElement, UIEvent>) => void) | undefined;
+variant?: "normal" | "tight" | undefined;
+listWidth?: Property.Width<string | number> | undefined;
+portal?: string | RefObject<HTMLElement> | undefined;
+renderValue?: ((item: MergedDropdownNode) => string) | undefined;
+renderItem?: ((item: MergedDropdownNode) => ReactNode) | undefined;
+size?: string | undefined;
+view?: string | undefined;
+chipView?: string | undefined;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
 target?: "textfield-like" | undefined;
 view?: "default" | "positive" | "warning" | "negative" | undefined;
 contentLeft?: ReactNode;
 labelPlacement?: "outer" | "inner" | undefined;
 placeholder?: string | undefined;
 helperText?: string | undefined;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | (BasicProps & {
-multiselect?: false | undefined;
-value?: string | undefined;
-onChange?: ((value: string) => void) | undefined;
-isTargetAmount?: false | undefined;
-renderTarget?: ((value: string) => ReactNode) | undefined;
 } & {
+multiselect?: true | undefined;
+separator?: string | undefined;
+} & {
+value: any;
+onChange?: ((value: any) => void) | undefined;
+listOverflow?: Property.Overflow | undefined;
+listHeight?: Property.Height<string | number> | undefined;
+status?: "warning" | "success" | "error" | undefined;
+placeholder?: string | undefined;
+helperText?: string | undefined;
+disabled?: boolean | undefined;
+items?: MergedDropdownNode[] | undefined;
+onItemSelect?: ((e: MergedDropdownNode, event: SyntheticEvent<Element, Event>) => void) | undefined;
+hasItems?: boolean | undefined;
+children?: undefined;
+isOpen?: boolean | undefined;
+isTargetAmount?: boolean | undefined;
+renderTarget?: ((item: MergedDropdownNode | MergedDropdownNode[]) => ReactNode) | undefined;
+placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+label?: string | undefined;
+onScrollBottom?: ((e: UIEvent_2<HTMLUListElement, UIEvent>) => void) | undefined;
+variant?: "normal" | "tight" | undefined;
+listWidth?: Property.Width<string | number> | undefined;
+portal?: string | RefObject<HTMLElement> | undefined;
+renderValue?: ((item: MergedDropdownNode) => string) | undefined;
+renderItem?: ((item: MergedDropdownNode) => ReactNode) | undefined;
+size?: string | undefined;
+view?: string | undefined;
+chipView?: string | undefined;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
 target?: "button-like" | undefined;
 view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined;
 contentLeft?: undefined;
 labelPlacement?: undefined;
 placeholder?: undefined;
 helperText?: undefined;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | (BasicProps & {
-multiselect: true;
-value?: string[] | undefined;
-onChange?: ((value: string[]) => void) | undefined;
-isTargetAmount?: boolean | undefined;
-renderTarget?: ((value: string[]) => ReactNode) | undefined;
 } & {
-target?: "textfield-like" | undefined;
-view?: "default" | "positive" | "warning" | "negative" | undefined;
-contentLeft?: ReactNode;
-labelPlacement?: "outer" | "inner" | undefined;
+multiselect?: false | undefined;
+separator?: undefined;
+} & {
+value: any;
+onChange?: ((value: any) => void) | undefined;
+listOverflow?: Property.Overflow | undefined;
+listHeight?: Property.Height<string | number> | undefined;
+status?: "warning" | "success" | "error" | undefined;
 placeholder?: string | undefined;
 helperText?: string | undefined;
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | (BasicProps & {
-multiselect: true;
-value?: string[] | undefined;
-onChange?: ((value: string[]) => void) | undefined;
+disabled?: boolean | undefined;
+items?: MergedDropdownNode[] | undefined;
+onItemSelect?: ((e: MergedDropdownNode, event: SyntheticEvent<Element, Event>) => void) | undefined;
+hasItems?: boolean | undefined;
+children?: undefined;
+isOpen?: boolean | undefined;
 isTargetAmount?: boolean | undefined;
-renderTarget?: ((value: string[]) => ReactNode) | undefined;
-} & {
+renderTarget?: ((item: MergedDropdownNode | MergedDropdownNode[]) => ReactNode) | undefined;
+placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+label?: string | undefined;
+onScrollBottom?: ((e: UIEvent_2<HTMLUListElement, UIEvent>) => void) | undefined;
+variant?: "normal" | "tight" | undefined;
+listWidth?: Property.Width<string | number> | undefined;
+portal?: string | RefObject<HTMLElement> | undefined;
+renderValue?: ((item: MergedDropdownNode) => string) | undefined;
+renderItem?: ((item: MergedDropdownNode) => ReactNode) | undefined;
+size?: string | undefined;
+view?: string | undefined;
+chipView?: string | undefined;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>) | ({
 target?: "button-like" | undefined;
 view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined;
 contentLeft?: undefined;
 labelPlacement?: undefined;
 placeholder?: undefined;
 helperText?: undefined;
+} & {
+multiselect?: true | undefined;
+separator?: string | undefined;
+} & {
+value: any;
+onChange?: ((value: any) => void) | undefined;
+listOverflow?: Property.Overflow | undefined;
+listHeight?: Property.Height<string | number> | undefined;
+status?: "warning" | "success" | "error" | undefined;
+placeholder?: string | undefined;
+helperText?: string | undefined;
+disabled?: boolean | undefined;
+items?: MergedDropdownNode[] | undefined;
+onItemSelect?: ((e: MergedDropdownNode, event: SyntheticEvent<Element, Event>) => void) | undefined;
+hasItems?: boolean | undefined;
+children?: undefined;
+isOpen?: boolean | undefined;
+isTargetAmount?: boolean | undefined;
+renderTarget?: ((item: MergedDropdownNode | MergedDropdownNode[]) => ReactNode) | undefined;
+placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+label?: string | undefined;
+onScrollBottom?: ((e: UIEvent_2<HTMLUListElement, UIEvent>) => void) | undefined;
+variant?: "normal" | "tight" | undefined;
+listWidth?: Property.Width<string | number> | undefined;
+portal?: string | RefObject<HTMLElement> | undefined;
+renderValue?: ((item: MergedDropdownNode) => string) | undefined;
+renderItem?: ((item: MergedDropdownNode) => ReactNode) | undefined;
+size?: string | undefined;
+view?: string | undefined;
+chipView?: string | undefined;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes<HTMLButtonElement>))>;
 
+export { SelectGroup }
+
 export { SelectProps }
 
+export { SelectPropsHope }
+
 export { selectText }
 
 export { setRef }

package/components/Select/Select.d.ts

@@ -1,7 +1,175 @@
-import React from 'react';
-import type { SelectProps } from '@salutejs/plasma-hope';
-/**
- * Выпадающий список для использования в формах.
- * Поддерживает выбор одного или нескольких значений.
- */
-export declare const Select: React.ForwardRefExoticComponent<SelectProps<any> & React.RefAttributes<HTMLButtonElement>>;
+/// <reference types="react" />
+declare const Select: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types").PropsType<{
+    size: {
+        xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+    view: {
+        default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        positive: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        warning: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        negative: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        accent: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        secondary: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        clear: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        dark: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        black: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        white: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+    chipView: {
+        default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        secondary: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        accent: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+}> & (({
+    target?: "textfield-like" | undefined;
+    view?: "default" | "positive" | "warning" | "negative" | undefined;
+    contentLeft?: import("react").ReactNode;
+    labelPlacement?: "outer" | "inner" | undefined;
+    placeholder?: string | undefined;
+    helperText?: string | undefined;
+} & {
+    multiselect?: false | undefined;
+    separator?: undefined;
+} & {
+    value: any;
+    onChange?: ((value: any) => void) | undefined;
+    listOverflow?: import("csstype").Property.Overflow | undefined;
+    listHeight?: import("csstype").Property.Height<string | number> | undefined;
+    status?: "warning" | "success" | "error" | undefined;
+    placeholder?: string | undefined;
+    helperText?: string | undefined;
+    disabled?: boolean | undefined;
+    items?: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[] | undefined;
+    onItemSelect?: ((e: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode, event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+    hasItems?: boolean | undefined;
+    children?: undefined;
+    isOpen?: boolean | undefined;
+    isTargetAmount?: boolean | undefined;
+    renderTarget?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode | import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[]) => import("react").ReactNode) | undefined;
+    placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+    label?: string | undefined;
+    onScrollBottom?: ((e: import("react").UIEvent<HTMLUListElement, UIEvent>) => void) | undefined;
+    variant?: "normal" | "tight" | undefined;
+    listWidth?: import("csstype").Property.Width<string | number> | undefined;
+    portal?: string | import("react").RefObject<HTMLElement> | undefined;
+    renderValue?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => string) | undefined;
+    renderItem?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => import("react").ReactNode) | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+    chipView?: string | undefined;
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | ({
+    target?: "textfield-like" | undefined;
+    view?: "default" | "positive" | "warning" | "negative" | undefined;
+    contentLeft?: import("react").ReactNode;
+    labelPlacement?: "outer" | "inner" | undefined;
+    placeholder?: string | undefined;
+    helperText?: string | undefined;
+} & {
+    multiselect?: true | undefined;
+    separator?: string | undefined;
+} & {
+    value: any;
+    onChange?: ((value: any) => void) | undefined;
+    listOverflow?: import("csstype").Property.Overflow | undefined;
+    listHeight?: import("csstype").Property.Height<string | number> | undefined;
+    status?: "warning" | "success" | "error" | undefined;
+    placeholder?: string | undefined;
+    helperText?: string | undefined;
+    disabled?: boolean | undefined;
+    items?: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[] | undefined;
+    onItemSelect?: ((e: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode, event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+    hasItems?: boolean | undefined;
+    children?: undefined;
+    isOpen?: boolean | undefined;
+    isTargetAmount?: boolean | undefined;
+    renderTarget?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode | import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[]) => import("react").ReactNode) | undefined;
+    placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+    label?: string | undefined;
+    onScrollBottom?: ((e: import("react").UIEvent<HTMLUListElement, UIEvent>) => void) | undefined;
+    variant?: "normal" | "tight" | undefined;
+    listWidth?: import("csstype").Property.Width<string | number> | undefined;
+    portal?: string | import("react").RefObject<HTMLElement> | undefined;
+    renderValue?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => string) | undefined;
+    renderItem?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => import("react").ReactNode) | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+    chipView?: string | undefined;
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | ({
+    target?: "button-like" | undefined;
+    view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined;
+    contentLeft?: undefined;
+    labelPlacement?: undefined;
+    placeholder?: undefined;
+    helperText?: undefined;
+} & {
+    multiselect?: false | undefined;
+    separator?: undefined;
+} & {
+    value: any;
+    onChange?: ((value: any) => void) | undefined;
+    listOverflow?: import("csstype").Property.Overflow | undefined;
+    listHeight?: import("csstype").Property.Height<string | number> | undefined;
+    status?: "warning" | "success" | "error" | undefined;
+    placeholder?: string | undefined;
+    helperText?: string | undefined;
+    disabled?: boolean | undefined;
+    items?: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[] | undefined;
+    onItemSelect?: ((e: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode, event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+    hasItems?: boolean | undefined;
+    children?: undefined;
+    isOpen?: boolean | undefined;
+    isTargetAmount?: boolean | undefined;
+    renderTarget?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode | import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[]) => import("react").ReactNode) | undefined;
+    placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+    label?: string | undefined;
+    onScrollBottom?: ((e: import("react").UIEvent<HTMLUListElement, UIEvent>) => void) | undefined;
+    variant?: "normal" | "tight" | undefined;
+    listWidth?: import("csstype").Property.Width<string | number> | undefined;
+    portal?: string | import("react").RefObject<HTMLElement> | undefined;
+    renderValue?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => string) | undefined;
+    renderItem?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => import("react").ReactNode) | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+    chipView?: string | undefined;
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>) | ({
+    target?: "button-like" | undefined;
+    view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined;
+    contentLeft?: undefined;
+    labelPlacement?: undefined;
+    placeholder?: undefined;
+    helperText?: undefined;
+} & {
+    multiselect?: true | undefined;
+    separator?: string | undefined;
+} & {
+    value: any;
+    onChange?: ((value: any) => void) | undefined;
+    listOverflow?: import("csstype").Property.Overflow | undefined;
+    listHeight?: import("csstype").Property.Height<string | number> | undefined;
+    status?: "warning" | "success" | "error" | undefined;
+    placeholder?: string | undefined;
+    helperText?: string | undefined;
+    disabled?: boolean | undefined;
+    items?: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[] | undefined;
+    onItemSelect?: ((e: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode, event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+    hasItems?: boolean | undefined;
+    children?: undefined;
+    isOpen?: boolean | undefined;
+    isTargetAmount?: boolean | undefined;
+    renderTarget?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode | import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode[]) => import("react").ReactNode) | undefined;
+    placement?: ("auto" | ("top" | "bottom" | "right" | "left")) | ("top" | "bottom" | "right" | "left")[] | undefined;
+    label?: string | undefined;
+    onScrollBottom?: ((e: import("react").UIEvent<HTMLUListElement, UIEvent>) => void) | undefined;
+    variant?: "normal" | "tight" | undefined;
+    listWidth?: import("csstype").Property.Width<string | number> | undefined;
+    portal?: string | import("react").RefObject<HTMLElement> | undefined;
+    renderValue?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => string) | undefined;
+    renderItem?: ((item: import("@salutejs/plasma-new-hope/types/components/Select/ui/Inner/ui/Item/Item.types").MergedDropdownNode) => import("react").ReactNode) | undefined;
+    size?: string | undefined;
+    view?: string | undefined;
+    chipView?: string | undefined;
+} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & import("react").RefAttributes<HTMLButtonElement>))>;
+export { Select };

package/components/Select/Select.js

@@ -1,27 +1,10 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Select = void 0;
-var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
-var _plasmaHope = /*#__PURE__*/require("@salutejs/plasma-hope");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-// TODO: Удалить Select из hope с внедрением компонента SelectNested в new-hope
-
-var SelectBase = /*#__PURE__*/(0, _plasmaHope.Select)({
-  design: 'web'
-});
-
-/**
- * Выпадающий список для использования в формах.
- * Поддерживает выбор одного или нескольких значений.
- */
-var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return /*#__PURE__*/_react["default"].createElement(SelectBase, _extends({}, props, {
-    ref: ref
-  }));
-});
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _Select = /*#__PURE__*/require("./Select.config");
+var mergedConfig = /*#__PURE__*/(0, _styledComponents.mergeConfig)(_styledComponents.selectConfig, _Select.config);
+var Select = exports.Select = /*#__PURE__*/(0, _styledComponents.component)(mergedConfig);

package/components/Select/index.d.ts

@@ -1,3 +1,4 @@
 export { Select } from './Select';
-export type { SelectProps } from '@salutejs/plasma-hope';
+export type { SelectProps as SelectPropsHope } from '@salutejs/plasma-hope';
+export type { MergedSelectProps as SelectProps } from '@salutejs/plasma-new-hope/styled-components';
 export { SelectGroup } from '@salutejs/plasma-hope';

package/css/cjs/components/Select/Select.config.js

@@ -0,0 +1,40 @@
+import './Select.config_63kke9.css';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var config = {
+  defaults: {
+    view: 'default',
+    chipView: 'default',
+    size: 'm'
+  },
+  variations: {
+    size: {
+      xs: "x12monx2",
+      s: "s12mt93w",
+      m: "mblrfmp",
+      l: "l18rkx8m"
+    },
+    view: {
+      "default": "d1ss64ma",
+      positive: "p3s5m48",
+      warning: "wxrlwop",
+      negative: "ntalnd0",
+      accent: "a1k7ad1i",
+      secondary: "s1bszwh5",
+      clear: "c1dmzr3t",
+      dark: "d1trul8m",
+      black: "b1q58kce",
+      white: "w1rq56mb"
+    },
+    chipView: {
+      "default": "das48wd",
+      secondary: "s14mgo3m",
+      accent: "akffuw3"
+    }
+  }
+};
+
+exports.config = config;
+//# sourceMappingURL=Select.config.js.map

package/css/cjs/components/Select/Select.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.config.js","sources":["../../../../src-css/components/Select/Select.config.ts"],"sourcesContent":["import { css, selectTokens } from '@salutejs/plasma-new-hope';\n\nexport const config = {\n    defaults: {\n        view: 'default',\n        chipView: 'default',\n        size: 'm',\n    },\n    variations: {\n        size: {\n            xs: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.5rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1rem;\n                ${selectTokens.itemPadding}: 0.5rem 0.5rem 0.5rem 0.375rem;\n                ${selectTokens.itemPaddingTight}: 0.25rem 0.5rem 0.25rem 0.375rem;\n                ${selectTokens.itemBorderRadius}: 0.375rem;\n                ${selectTokens.itemIconSize}: 1rem;\n                ${selectTokens.itemIconSizeTight}: 1rem;\n                ${selectTokens.itemIconMargin}: 0 0.25rem 0 0;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-xs-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 0.875rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 0.875rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.25rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.125rem;\n                ${selectTokens.chipHeight}: 1.25rem;\n                ${selectTokens.chipPaddingRight}: 0.375rem;\n                ${selectTokens.chipPaddingLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.25rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 0.75rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem;\n                ${selectTokens.targetHeight}: 2rem;\n                ${selectTokens.targetButtonPadding}: 0.75rem 0 0.75rem;\n                ${selectTokens.targetTextfieldPadding}: 0.5rem 0 0.625rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.5rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.375rem;\n\n                ${selectTokens.innerLabelGap}: 0;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1rem;\n                ${selectTokens.spinnerSizeTight}: 1rem;\n            `,\n            s: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.625rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 0.5rem 0.75rem 0.5rem 0.675rem;\n                ${selectTokens.itemPaddingTight}: 0.25rem 0.75rem 0.25rem 0.675rem;\n                ${selectTokens.itemBorderRadius}: 0.5rem;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1rem;\n                ${selectTokens.itemIconMargin}: 0 0.375rem 0 0;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-s-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-s-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-s-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-s-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 0.875rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.25rem;\n                ${selectTokens.chipHeight}: 1.75rem;\n                ${selectTokens.chipPaddingRight}: 0.5rem;\n                ${selectTokens.chipPaddingLeft}: 0.75rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.375rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 0.75rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem;\n                ${selectTokens.targetHeight}: 2.5rem;\n                ${selectTokens.targetButtonPadding}: 1rem 0 1rem;\n                ${selectTokens.targetTextfieldPadding}: 0.75rem 0 0.875rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.75rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.5rem;\n\n                ${selectTokens.innerLabelGap}: 0;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1rem;\n            `,\n            m: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.75rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem;\n                ${selectTokens.itemPaddingTight}: 0.5rem 0.75rem 0.5rem 0.75rem;\n                ${selectTokens.itemBorderRadius}: 0.625rem;\n                ${selectTokens.itemIconMargin}: 0 0.375rem 0 0;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1.5rem;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-m-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-m-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-m-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-m-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 1.25rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.375rem;\n                ${selectTokens.chipHeight}: 2.25rem;\n                ${selectTokens.chipPaddingRight}: 0.875rem;\n                ${selectTokens.chipPaddingLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.5rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 1rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.375rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.625rem;\n                ${selectTokens.targetHeight}: 3rem;\n                ${selectTokens.targetButtonPadding}: 1.25rem 0 1.25rem;\n                ${selectTokens.targetTextfieldPadding}: 0.875rem 0 1rem;\n                ${selectTokens.targetTextfieldChipPadding}: 0.875rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.625rem;\n\n                ${selectTokens.innerLabelGap}: 0.125rem;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1.5rem;\n            `,\n            l: css`\n                ${selectTokens.padding}: 0.125rem;\n                ${selectTokens.borderRadius}: 0.875rem;\n                ${selectTokens.focusOffset}: 0.125rem;\n\n                ${selectTokens.itemHeight}: 1.5rem;\n                ${selectTokens.itemPadding}: 1rem 1rem 1rem 0.875rem;\n                ${selectTokens.itemPaddingTight}: 0.75rem 1rem 0.75rem 0.875rem;\n                ${selectTokens.itemBorderRadius}: 0.75rem;\n                ${selectTokens.itemIconMargin}: 0 0.5rem 0 0;\n                ${selectTokens.itemIconSize}: 1.5rem;\n                ${selectTokens.itemIconSizeTight}: 1.5rem;\n\n                ${selectTokens.fontFamily}: var(--plasma-typo-body-l-font-family);\n                ${selectTokens.fontSize}: var(--plasma-typo-body-l-font-size);\n                ${selectTokens.fontStyle}: var(--plasma-typo-body-l-font-style);\n                ${selectTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);\n                ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);\n                ${selectTokens.fontLineHeight}: var(--plasma-typo-body-l-line-height);\n\n                ${selectTokens.checkboxTriggerSize}: 1.25rem;\n                ${selectTokens.checkboxTriggerSizeTight}: 1.25rem;\n                ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem;\n                ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem;\n                ${selectTokens.checkboxFillColor}: var(--text-accent);\n                ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary);\n                ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary);\n\n                ${selectTokens.indicatorSize}: 0.375rem;\n\n                ${selectTokens.chipGap}: 0.25rem;\n                ${selectTokens.chipBorderRadius}: 0.5rem;\n                ${selectTokens.chipHeight}: 2.75rem;\n                ${selectTokens.chipPaddingRight}: 0.75rem;\n                ${selectTokens.chipPaddingLeft}: 1rem;\n                ${selectTokens.chipClearContentMarginLeft}: 0.625rem;\n                ${selectTokens.chipClearContentMarginRight}: 0rem;\n                ${selectTokens.chipCloseIconSize}: 1rem;\n\n                ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.5rem;\n                ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.75rem;\n                ${selectTokens.targetHeight}: 3.5rem;\n                ${selectTokens.targetButtonPadding}: 1.5rem 0 1.5rem;\n                ${selectTokens.targetTextfieldPadding}: 1rem 0 1.125rem;\n                ${selectTokens.targetTextfieldChipPadding}: 1rem 0 0.25rem;\n\n                ${selectTokens.labelOffset}: 0.75rem;\n\n                ${selectTokens.innerLabelGap}: 0.125rem;\n\n                ${selectTokens.helperTextOffset}: 0.25rem;\n\n                ${selectTokens.spinnerSize}: 1.5rem;\n                ${selectTokens.spinnerSizeTight}: 1.5rem;\n            `,\n        },\n        view: {\n            default: css`\n                ${selectTokens.helperTextColor}: var(--text-secondary);\n                ${selectTokens.targetButtonColor}: var(--inverse-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--inverse-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--inverse-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--inverse-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--inverse-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--inverse-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-solid-default-hover);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-transparent-tertiary);\n            `,\n            positive: css`\n                ${selectTokens.helperTextColor}: var(--text-positive);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-positive);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-positive-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-positive-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-positive);\n            `,\n            warning: css`\n                ${selectTokens.helperTextColor}: var(--text-warning);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-warning);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-warning-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-warning-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-warning);\n            `,\n            negative: css`\n                ${selectTokens.helperTextColor}: var(--text-negative);\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary);\n                ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}:var(--surface-negative);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-negative-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-negative-active);\n                ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear);\n                ${selectTokens.targetTextfieldBorderColor}: var(--surface-negative);\n            `,\n            accent: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-accent);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-accent-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-accent-active);\n            `,\n            secondary: css`\n                ${selectTokens.targetButtonColor}: var(--text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-transparent-secondary);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);\n            `,\n            clear: css`\n                ${selectTokens.targetButtonColor}: var(--text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}: var(--surface-clear);\n                ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-clear);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-clear);\n            `,\n            dark: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-transparent-deep);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active);\n            `,\n            black: css`\n                ${selectTokens.targetButtonColor}: var(--on-dark-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active);\n            `,\n            white: css`\n                ${selectTokens.targetButtonColor}: var(--on-light-text-primary);\n                ${selectTokens.targetButtonColorHover}: var(--on-light-text-primary-hover);\n                ${selectTokens.targetButtonColorActive}: var(--on-light-text-primary-active);\n                ${selectTokens.targetButtonArrowColor}: var(--on-light-text-secondary);\n                ${selectTokens.targetButtonArrowColorHover}: var(--on-light-text-secondary-hover);\n                ${selectTokens.targetButtonArrowColorActive}: var(--on-light-text-secondary-active);\n                ${selectTokens.targetButtonBackgroundColor}:var(--on-dark-surface-solid-default);\n                ${selectTokens.targetButtonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover);\n                ${selectTokens.targetButtonBackgroundColorActive}:var(--on-dark-surface-solid-default-active);\n            `,\n        },\n        chipView: {\n            default: css`\n                ${selectTokens.chipColor}: var(--inverse-text-primary);\n                ${selectTokens.chipBackground}: var(--surface-solid-default);\n                ${selectTokens.chipBackgroundHover}: var(--surface-solid-default-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-solid-default-active);\n            `,\n            secondary: css`\n                ${selectTokens.chipColor}: var(--text-primary);\n                ${selectTokens.chipBackground}: var(--surface-transparent-secondary);\n                ${selectTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active);\n            `,\n            accent: css`\n                ${selectTokens.chipColor}: var(--on-dark-text-primary);\n                ${selectTokens.chipBackground}: var(--surface-accent);\n                ${selectTokens.chipBackgroundHover}: var(--surface-accent-hover);\n                ${selectTokens.chipBackgroundActive}: var(--surface-accent-active);\n            `,\n        },\n    },\n};\n"],"names":["config","defaults","view","chipView","size","variations","xs","s","m","l","default","positive","warning","negative","accent","secondary","clear","dark","black","white"],"mappings":";;;;AAEO,IAAMA,MAAM,GAAG;AAClBC,EAAAA,QAAQ,EAAE;AACNC,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,QAAQ,EAAE,SAAS;AACnBC,IAAAA,IAAI,EAAE,GAAA;GACT;AACDC,EAAAA,UAAU,EAAE;AACRD,IAAAA,IAAI,EAAE;AACFE,MAAAA,EAAE,EAsDD,UAAA;AACDC,MAAAA,CAAC,EAsDA,UAAA;AACDC,MAAAA,CAAC,EAsDA,SAAA;AACDC,MAAAA,CAAC,EAAA,UAAA;KAuDJ;AACDP,IAAAA,IAAI,EAAE;AACFQ,MAAAA,SAAAA,EAiBC,UAAA;AACDC,MAAAA,QAAQ,EAiBP,SAAA;AACDC,MAAAA,OAAO,EAiBN,SAAA;AACDC,MAAAA,QAAQ,EAiBP,SAAA;AACDC,MAAAA,MAAM,EAUL,UAAA;AACDC,MAAAA,SAAS,EAUR,UAAA;AACDC,MAAAA,KAAK,EAUJ,UAAA;AACDC,MAAAA,IAAI,EAUH,UAAA;AACDC,MAAAA,KAAK,EAUJ,UAAA;AACDC,MAAAA,KAAK,EAAA,UAAA;KAWR;AACDhB,IAAAA,QAAQ,EAAE;AACNO,MAAAA,SAAAA,EAKC,SAAA;AACDK,MAAAA,SAAS,EAKR,UAAA;AACDD,MAAAA,MAAM,EAAA,SAAA;AAMV,KAAA;AACJ,GAAA;AACJ;;;;"}