npm - @consta/uikit - Versions diffs - 5.0.2 → 5.1.0 - Mend

@consta/uikit 5.0.2 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

package/__internal__/src/components/Tabs/helpers.d.ts CHANGED Viewed

@@ -25,7 +25,288 @@ export declare const withDefaultGetters: (props: TabsProps) => {
     renderItem?: import("./types").RenderItem<TabsItemDefault> | undefined;
     disabled?: boolean | undefined;
     linePosition?: "top" | "bottom" | undefined;
-    fitMode?: "scroll" | "dropdown" | undefined;
+    fitMode?: "scroll" | undefined;
+    withScrollButtons?: boolean | undefined;
+    slot?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    'aria-activedescendant'?: string | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-colcount'?: number | undefined;
+    'aria-colindex'?: number | undefined;
+    'aria-colspan'?: number | undefined;
+    'aria-controls'?: string | undefined;
+    'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-details'?: string | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
+    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-errormessage'?: string | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
+    'aria-flowto'?: string | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    'aria-keyshortcuts'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-level'?: number | undefined;
+    'aria-live'?: "off" | "assertive" | "polite" | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+    'aria-orientation'?: "horizontal" | "vertical" | undefined;
+    'aria-owns'?: string | undefined;
+    'aria-placeholder'?: string | undefined;
+    'aria-posinset'?: number | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
+    'aria-roledescription'?: string | undefined;
+    'aria-rowcount'?: number | undefined;
+    'aria-rowindex'?: number | undefined;
+    'aria-rowspan'?: number | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
+    'aria-setsize'?: number | undefined;
+    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    ref?: import("react").Ref<HTMLDivElement> | undefined;
+    key?: import("react").Key | null | undefined;
+} | {
+    getItemLabel: TabsPropGetItemLabel<TabsItemDefault>;
+    getItemIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemLeftIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemRightIcon: TabsPropGetItemIcon<TabsItemDefault>;
+    getItemLeftSide: TabsPropGetItemSide<TabsItemDefault>;
+    getItemRightSide: TabsPropGetItemSide<TabsItemDefault>;
+    getItemDisabled: TabsPropGetItemDisabled<TabsItemDefault>;
+    getItemAs: TabsPropGetItemAs<TabsItemDefault>;
+    getItemAttributes: TabsPropGetItemAttributes<TabsItemDefault>;
+    getItemRef: TabsPropGetItemRef<TabsItemDefault>;
+    size?: "s" | "m" | "xs" | undefined;
+    onlyIcon?: boolean | undefined;
+    view?: "clear" | "bordered" | undefined;
+    iconSize?: "s" | "m" | "xs" | "l" | undefined;
+    items: TabsItemDefault[];
+    value?: TabsItemDefault | null | undefined;
+    children?: undefined;
+    onChange: import("./types").TabsPropOnChange<TabsItemDefault>;
+    renderItem?: import("./types").RenderItem<TabsItemDefault> | undefined;
+    disabled?: boolean | undefined;
+    linePosition?: "top" | "bottom" | undefined;
+    fitMode?: "dropdown" | undefined;
+    withScrollButtons?: undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
@@ -305,6 +586,7 @@ export declare const withDefaultGetters: (props: TabsProps) => {
     disabled?: boolean | undefined;
     linePosition: "left" | "right";
     fitMode?: undefined;
+    withScrollButtons?: undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;

package/__internal__/src/components/Tabs/types.d.ts CHANGED Viewed

@@ -67,6 +67,7 @@ export declare type TabsFitModeWrapperProps<ITEM> = {
     onChange: TabsPropOnChange<ITEM>;
     tabRefs: Array<React.RefObject<HTMLElement>>;
     size: TabsPropSize;
+    withScrollButtons?: boolean;
 };
 export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<{
     size?: TabsPropSize;
@@ -92,12 +93,18 @@ export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesA
      * @deprecated since version 4.11.0 use getItemLeftIcon
      */
     getItemIcon?: TabsPropGetItemIcon<ITEM>;
-} & ({
+} & (({
     linePosition?: Extract<TabsPropLinePosition, 'bottom' | 'top'>;
-    fitMode?: 'dropdown' | 'scroll';
+} & ({
+    fitMode?: 'scroll';
+    withScrollButtons?: boolean;
 } | {
+    fitMode?: 'dropdown';
+    withScrollButtons?: never;
+})) | {
     linePosition: Extract<TabsPropLinePosition, 'left' | 'right'>;
     fitMode?: never;
+    withScrollButtons?: never;
 }), HTMLDivElement> & (ITEM extends {
     label: TabsItemDefault['label'];
 } ? {} : {

package/__internal__/src/components/Tabs/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":["tabsSizes","tabsDefaultSize","tabsViews","tabsDefaultView","tabsLinePositions","tabsDefaultLinePosition","tabsFitModes","tabsDefaultFitMode"],"sources":["../../../../../src/components/Tabs/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { AsAttributes, AsTags } from '##/utils/types/AsTags';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type TabDimensions = {\n size: number;\n gap: number;\n};\n\nexport type TabsItemDefault = {\n label: string \| number;\n leftIcon?: IconComponent;\n rightIcon?: IconComponent;\n rightSide?: React.ReactNode;\n leftSide?: React.ReactNode;\n disabled?: boolean;\n as?: AsTags;\n ref?: React.RefObject<HTMLElement>;\n attributes?: AsAttributes;\n\n /*\n @deprecated since version 4.11.0 use leftIcon\n /\n icon?: IconComponent;\n};\n\nexport const tabsSizes = ['m', 's', 'xs'] as const;\nexport type TabsPropSize = typeof tabsSizes[number];\nexport const tabsDefaultSize: TabsPropSize = tabsSizes[0];\n\nexport const tabsViews = ['bordered', 'clear'] as const;\nexport type TabsPropView = typeof tabsViews[number];\nexport const tabsDefaultView: TabsPropView = tabsViews[0];\n\nexport const tabsLinePositions = ['bottom', 'top', 'left', 'right'] as const;\nexport type TabsPropLinePosition = typeof tabsLinePositions[number];\nexport const tabsDefaultLinePosition: TabsPropLinePosition = 'bottom';\n\nexport const tabsFitModes = ['scroll', 'dropdown'] as const;\nexport type TabsPropFitMode = typeof tabsFitModes[number];\nexport const tabsDefaultFitMode: TabsPropFitMode = 'dropdown';\n\nexport type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string \| number;\nexport type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean \| undefined;\nexport type TabsPropGetItemIcon<ITEM> = (\n item: ITEM,\n) => IconComponent \| undefined;\nexport type TabsPropGetItemSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode \| undefined;\n\nexport type TabsPropGetItemAs<ITEM> = (item: ITEM) => AsTags \| undefined;\nexport type TabsPropGetItemAttributes<ITEM> = (\n item: ITEM,\n) => TabsItemDefault['attributes'];\nexport type TabsPropGetItemRef<ITEM> = (\n item: ITEM,\n) => React.RefObject<HTMLElement> \| undefined;\n\nexport type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean \| undefined;\n\nexport type TabsPropOnChange<ITEM> = (\n value: ITEM,\n props: {\n e: React.MouseEvent \| React.KeyboardEvent;\n },\n) => void;\n\nexport type RenderItemProps<ITEM> = {\n item: ITEM;\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n} & Omit<TabsItemDefault, 'label' \| 'ref'>;\n\nexport type RenderItem<ITEM> = (\n props: RenderItemProps<ITEM>,\n) => React.ReactElement \| null;\n\nexport type TabsFitModeWrapperProps<ITEM> = {\n items: ITEM[];\n tabsDimensions: TabDimensions[];\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n getItemChecked: TabsPropGetItemChecked<ITEM>;\n renderItem: (item: ITEM) => React.ReactNode;\n renderItemsList: RenderItemsListProp;\n onChange: TabsPropOnChange<ITEM>;\n tabRefs: Array<React.RefObject<HTMLElement>>;\n size: TabsPropSize;\n};\n\nexport type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<\n {\n size?: TabsPropSize;\n onlyIcon?: boolean;\n view?: TabsPropView;\n iconSize?: IconPropSize;\n items: ITEM[];\n value?: ITEM \| null;\n getItemLabel?: TabsPropGetItemLabel<ITEM>;\n getItemLeftIcon?: TabsPropGetItemIcon<ITEM>;\n getItemRightIcon?: TabsPropGetItemIcon<ITEM>;\n getItemLeftSide?: TabsPropGetItemSide<ITEM>;\n getItemRightSide?: TabsPropGetItemSide<ITEM>;\n getItemDisabled?: TabsPropGetItemDisabled<ITEM>;\n getItemAs?: TabsPropGetItemAs<ITEM>;\n getItemAttributes?: TabsPropGetItemAttributes<ITEM>;\n getItemRef?: TabsPropGetItemRef<ITEM>;\n children?: never;\n onChange: TabsPropOnChange<ITEM>;\n renderItem?: RenderItem<ITEM>;\n disabled?: boolean;\n\n /\n @deprecated since version 4.11.0 use getItemLeftIcon\n */\n getItemIcon?: TabsPropGetItemIcon<ITEM>;\n } & (\n \| {\n linePosition?: Extract<TabsPropLinePosition, 'bottom' \| 'top'>;\n fitMode?: '~~dropdown~~' \| '~~scroll~~';\n }\n \| {\n linePosition: Extract<TabsPropLinePosition, 'left' \| 'right'>;\n fitMode?: never;\n }\n ),\n HTMLDivElement\n> &\n (ITEM extends { label: TabsItemDefault['label'] }\n ? {}\n : {\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n });\n\nexport type TabsComponent = <ITEM>(\n props: TabsProps<ITEM>,\n) => React.ReactElement \| null;\n\nexport type TabsTabProps<AS extends AsTags = 'button'> = PropsWithAsAttributes<\n {\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n className?: string;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n } & Omit<TabsItemDefault, 'label' \| 'ref' \| 'attributes'>,\n AS\n>;\n\nexport type TabsTabComponent = <AS extends AsTags = 'button'>(\n props: TabsTabProps<AS>,\n) => React.ReactElement \| null;\n\nexport type TabsMoreItemsProps<ITEM = TabsItemDefault> =\n PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n renderItem: (\n item: ITEM,\n onClick: () => void,\n renderInDropdown?: boolean,\n ) => React.ReactNode;\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n onChange: TabsPropOnChange<ITEM>;\n height: number;\n size: TabsPropSize;\n } & React.RefAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n\nexport type TabsMoreItemsComponent = <ITEM>(\n props: TabsMoreItemsProps<ITEM>,\n) => React.ReactElement \| null;\n\nexport type RenderItemsListProp = (props: {\n visibleIndexes?: number[];\n withRunningLine?: boolean;\n getTabClassName?: (idx: number) => string \| undefined;\n}) => React.ReactNode;\n\nexport type TabsDirection = 'horizontal' \| 'vertical';\n"],"mappings":"AA8BA,MAAO,IAAMA,UAAS,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,UAAS,CAAG,CAAC,UAAD,CAAa,OAAb,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,kBAAiB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAkB,MAAlB,CAA0B,OAA1B,CAA1B,CAEP,MAAO,IAAMC,wBAA6C,CAAG,QAAtD,CAEP,MAAO,IAAMC,aAAY,CAAG,CAAC,QAAD,CAAW,UAAX,CAArB,CAEP,MAAO,IAAMC,mBAAmC,CAAG,UAA5C"}
1	+ {"version":3,"file":"types.js","names":["tabsSizes","tabsDefaultSize","tabsViews","tabsDefaultView","tabsLinePositions","tabsDefaultLinePosition","tabsFitModes","tabsDefaultFitMode"],"sources":["../../../../../src/components/Tabs/types.ts"],"sourcesContent":["import { IconComponent, IconPropSize } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { AsAttributes, AsTags } from '##/utils/types/AsTags';\nimport { PropsWithAsAttributes } from '##/utils/types/PropsWithAsAttributes';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type TabDimensions = {\n size: number;\n gap: number;\n};\n\nexport type TabsItemDefault = {\n label: string \| number;\n leftIcon?: IconComponent;\n rightIcon?: IconComponent;\n rightSide?: React.ReactNode;\n leftSide?: React.ReactNode;\n disabled?: boolean;\n as?: AsTags;\n ref?: React.RefObject<HTMLElement>;\n attributes?: AsAttributes;\n\n /*\n @deprecated since version 4.11.0 use leftIcon\n /\n icon?: IconComponent;\n};\n\nexport const tabsSizes = ['m', 's', 'xs'] as const;\nexport type TabsPropSize = typeof tabsSizes[number];\nexport const tabsDefaultSize: TabsPropSize = tabsSizes[0];\n\nexport const tabsViews = ['bordered', 'clear'] as const;\nexport type TabsPropView = typeof tabsViews[number];\nexport const tabsDefaultView: TabsPropView = tabsViews[0];\n\nexport const tabsLinePositions = ['bottom', 'top', 'left', 'right'] as const;\nexport type TabsPropLinePosition = typeof tabsLinePositions[number];\nexport const tabsDefaultLinePosition: TabsPropLinePosition = 'bottom';\n\nexport const tabsFitModes = ['scroll', 'dropdown'] as const;\nexport type TabsPropFitMode = typeof tabsFitModes[number];\nexport const tabsDefaultFitMode: TabsPropFitMode = 'dropdown';\n\nexport type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string \| number;\nexport type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean \| undefined;\nexport type TabsPropGetItemIcon<ITEM> = (\n item: ITEM,\n) => IconComponent \| undefined;\nexport type TabsPropGetItemSide<ITEM> = (\n item: ITEM,\n) => React.ReactNode \| undefined;\n\nexport type TabsPropGetItemAs<ITEM> = (item: ITEM) => AsTags \| undefined;\nexport type TabsPropGetItemAttributes<ITEM> = (\n item: ITEM,\n) => TabsItemDefault['attributes'];\nexport type TabsPropGetItemRef<ITEM> = (\n item: ITEM,\n) => React.RefObject<HTMLElement> \| undefined;\n\nexport type TabsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean \| undefined;\n\nexport type TabsPropOnChange<ITEM> = (\n value: ITEM,\n props: {\n e: React.MouseEvent \| React.KeyboardEvent;\n },\n) => void;\n\nexport type RenderItemProps<ITEM> = {\n item: ITEM;\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n} & Omit<TabsItemDefault, 'label' \| 'ref'>;\n\nexport type RenderItem<ITEM> = (\n props: RenderItemProps<ITEM>,\n) => React.ReactElement \| null;\n\nexport type TabsFitModeWrapperProps<ITEM> = {\n items: ITEM[];\n tabsDimensions: TabDimensions[];\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n getItemChecked: TabsPropGetItemChecked<ITEM>;\n renderItem: (item: ITEM) => React.ReactNode;\n renderItemsList: RenderItemsListProp;\n onChange: TabsPropOnChange<ITEM>;\n tabRefs: Array<React.RefObject<HTMLElement>>;\n size: TabsPropSize;\n withScrollButtons?: boolean;\n};\n\nexport type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<\n {\n size?: TabsPropSize;\n onlyIcon?: boolean;\n view?: TabsPropView;\n iconSize?: IconPropSize;\n items: ITEM[];\n value?: ITEM \| null;\n getItemLabel?: TabsPropGetItemLabel<ITEM>;\n getItemLeftIcon?: TabsPropGetItemIcon<ITEM>;\n getItemRightIcon?: TabsPropGetItemIcon<ITEM>;\n getItemLeftSide?: TabsPropGetItemSide<ITEM>;\n getItemRightSide?: TabsPropGetItemSide<ITEM>;\n getItemDisabled?: TabsPropGetItemDisabled<ITEM>;\n getItemAs?: TabsPropGetItemAs<ITEM>;\n getItemAttributes?: TabsPropGetItemAttributes<ITEM>;\n getItemRef?: TabsPropGetItemRef<ITEM>;\n children?: never;\n onChange: TabsPropOnChange<ITEM>;\n renderItem?: RenderItem<ITEM>;\n disabled?: boolean;\n\n /\n @deprecated since version 4.11.0 use getItemLeftIcon\n */\n getItemIcon?: TabsPropGetItemIcon<ITEM>;\n } & (\n \| ({\n linePosition?: Extract<TabsPropLinePosition, 'bottom' \| 'top'>;\n } & (\n \| {\n fitMode?: 'scroll';\n withScrollButtons?: boolean;\n }\n \| {\n fitMode?: 'dropdown';\n withScrollButtons?: never;\n }\n ))\n \| {\n linePosition: Extract<TabsPropLinePosition, 'left' \| 'right'>;\n fitMode?: never;\n withScrollButtons?: never;\n }\n ),\n HTMLDivElement\n> &\n (ITEM extends { label: TabsItemDefault['label'] }\n ? {}\n : {\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n });\n\nexport type TabsComponent = <ITEM>(\n props: TabsProps<ITEM>,\n) => React.ReactElement \| null;\n\nexport type TabsTabProps<AS extends AsTags = 'button'> = PropsWithAsAttributes<\n {\n onChange: React.MouseEventHandler;\n checked: boolean;\n size: TabsPropSize;\n iconSize?: IconPropSize;\n onlyIcon?: boolean;\n className?: string;\n label: string;\n tabRef?: React.RefObject<HTMLElement>;\n renderInDropdown?: boolean;\n } & Omit<TabsItemDefault, 'label' \| 'ref' \| 'attributes'>,\n AS\n>;\n\nexport type TabsTabComponent = <AS extends AsTags = 'button'>(\n props: TabsTabProps<AS>,\n) => React.ReactElement \| null;\n\nexport type TabsMoreItemsProps<ITEM = TabsItemDefault> =\n PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n renderItem: (\n item: ITEM,\n onClick: () => void,\n renderInDropdown?: boolean,\n ) => React.ReactNode;\n getItemLabel: TabsPropGetItemLabel<ITEM>;\n onChange: TabsPropOnChange<ITEM>;\n height: number;\n size: TabsPropSize;\n } & React.RefAttributes<HTMLDivElement>,\n HTMLDivElement\n >;\n\nexport type TabsMoreItemsComponent = <ITEM>(\n props: TabsMoreItemsProps<ITEM>,\n) => React.ReactElement \| null;\n\nexport type RenderItemsListProp = (props: {\n visibleIndexes?: number[];\n withRunningLine?: boolean;\n getTabClassName?: (idx: number) => string \| undefined;\n}) => React.ReactNode;\n\nexport type TabsDirection = 'horizontal' \| 'vertical';\n"],"mappings":"AA8BA,MAAO,IAAMA,UAAS,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,IAAX,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,UAAS,CAAG,CAAC,UAAD,CAAa,OAAb,CAAlB,CAEP,MAAO,IAAMC,gBAA6B,CAAGD,SAAS,CAAC,CAAD,CAA/C,CAEP,MAAO,IAAME,kBAAiB,CAAG,CAAC,QAAD,CAAW,KAAX,CAAkB,MAAlB,CAA0B,OAA1B,CAA1B,CAEP,MAAO,IAAMC,wBAA6C,CAAG,QAAtD,CAEP,MAAO,IAAMC,aAAY,CAAG,CAAC,QAAD,CAAW,UAAX,CAArB,CAEP,MAAO,IAAMC,mBAAmC,CAAG,UAA5C"}

package/__internal__/src/components/TextField/TextField.css CHANGED Viewed

	@@ -1 +1 @@
1	- .TextField{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));--counter-button-icon-color:var(--color-control-typo-ghost);--counter-button-background:transparent;--counter-offset:0;--clear-button-color:var(--color-control-typo-clear);display:inline-flex;position:relative;width:100%}.TextField_size_xs{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--input-height:var(--control-height-xs);--input-font-size:var(--control-text-size-xs);--input-space:calc(var(--control-space-xs)0.5)}.TextField_size_xs .TextField-InputContainer_form_brickRound,.TextField_size_xs .TextField-InputContainer_form_clearRound,.TextField_size_xs .TextField-InputContainer_form_round{--counter-offset:calc(var(--space-xs) - var(--space-3xs))}.TextField_size_s{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--input-height:var(--control-height-s);--input-font-size:var(--control-text-size-s);--input-space:calc(var(--control-space-s)0.5)}.TextField_size_s .TextField-InputContainer_form_brickRound,.TextField_size_s .TextField-InputContainer_form_clearRound,.TextField_size_s .TextField-InputContainer_form_round{--counter-offset:var(--space-xs)}.TextField_size_m{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--input-height:var(--control-height-m);--input-font-size:var(--control-text-size-m);--input-space:calc(var(--control-space-m)0.5)}.TextField_size_m .TextField-InputContainer_form_brickRound,.TextField_size_m .TextField-InputContainer_form_clearRound,.TextField_size_m .TextField-InputContainer_form_round{--counter-offset:calc(var(--space-s) - var(--space-3xs))}.TextField_size_l{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--input-height:var(--control-height-l);--input-font-size:var(--control-text-size-l);--input-space:calc(var(--control-space-l)0.5)}.TextField_size_l .TextField-InputContainer_form_brickRound,.TextField_size_l .TextField-InputContainer_form_clearRound,.TextField_size_l .TextField-InputContainer_form_round{--counter-offset:var(--space-s)}.TextField_labelPosition_top{flex-direction:column}.TextField_labelPosition_top>:not(:last-child){margin-bottom:var(--label-offset)}.TextField_labelPosition_left{flex-direction:row}.TextField_labelPosition_left .TextField-Label{align-items:center;display:inline-flex;height:var(--input-height)}.TextField_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.TextField-Body{display:inline-flex;flex-direction:column;width:100%}.TextField-Body .TextField-Caption{margin-left:var(--caption-margin-left);margin-top:var(--caption-offset)}.TextField_view_clear .TextField-Caption{--caption-margin-left:0}.TextField-InputContainer{box-sizing:border-box;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);max-width:100%;min-height:var(--input-height);position:relative;transition:border-color .15s,box-shadow .15s,background-color .15s}.TextField-InputContainer_disabled{--counter-button-background:var(--color-control-bg-disable);--counter-button-icon-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear,.TextField-InputContainer_view_clear:focus,.TextField-InputContainer_view_clear:hover{color:var(--color-control-typo-default);padding:0}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default{--container-border-color:var(--color-control-bg-border-default);background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);overflow-x:hidden;padding:0 var(--input-space)}.TextField-InputContainer_view_default:hover{border-color:var(--color-control-bg-border-default-hover)}.TextField-InputContainer_view_default.TextField-InputContainer_status_alert{--container-border-color:var(--color-bg-alert)}.TextField-InputContainer_view_default.TextField-InputContainer_status_success{--container-border-color:var(--color-bg-success)}.TextField-InputContainer_view_default.TextField-InputContainer_status_warning{--container-border-color:var(--color-bg-warning)}.TextField-InputContainer_view_default .TextField-Input{color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Input::-moz-placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input::placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Side_type_string{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default.TextField-InputContainer_focus{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_brickClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_defaultClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_roundClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearBrick,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearDefault,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearRound{box-shadow:calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled{--clear-button-color:var(--color-control-typo-disable);background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_form_defaultClear{border-right-width:0}.TextField-InputContainer_form_defaultBrick,.TextField-InputContainer_form_defaultClear{border-radius:var(--control-radius) 0 0 var(--control-radius)}.TextField-InputContainer_form_round{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6);padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundBrick{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundClear{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brick{border-radius:0}.TextField-InputContainer_form_brickDefault{border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_brickRound{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brickClear{border-radius:0;border-right-width:0}.TextField-InputContainer_form_clearDefault{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_clearBrick{border-left-width:0;border-radius:0}.TextField-InputContainer_form_clearRound{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_clearClear{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_string{color:var(--color-control-typo-default)}.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-typo-secondary)}.TextField-InputContainer_type_number{padding-right:0}.TextField-InputContainer_type_textarea .TextField-Input{display:block;line-height:var(--line-height-text-m);min-width:0;padding-bottom:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);padding-top:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);resize:none}.TextField-Counter{display:inline-flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)2);margin-right:var(--counter-offset);width:var(--space-xl)}.TextField-CounterButton{align-items:center;background-color:var(--counter-button-background);border:none;color:var(--counter-button-icon-color);cursor:pointer;display:inline-flex;flex:1;flex-direction:column;justify-content:center;margin:0;overflow-y:hidden;padding:0;transition:background-color .15s;width:var(--space-xl)}.TextField-ClearButton,.TextField-EyeButton{background-color:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;height:calc(var(--input-height) - var(--control-border-width)2);justify-content:center;margin:0;margin-left:var(--input-space);padding:0}.TextField-ClearButton{color:var(--clear-button-color)}.TextField-ClearButton:hover{--clear-button-color:var(--color-control-typo-clear-hover)}.TextField-EyeButton{color:var(--color-control-typo-placeholder)}.TextField-EyeButton:hover{color:var(--color-control-typo-clear-hover)}.TextField-ClearButtonIcon{color:var(--color-control-typo-placeholder);position:relative;top:1px}.TextField-Input{background:transparent;border:none;color:currentColor;flex:1;font-family:var(--font-primary);font-size:var(--input-font-size);height:calc(var(--input-height) - var(--control-border-width)2);min-width:80px;outline:none;padding:0;width:100%}.TextField-Input::-webkit-inner-spin-button,.TextField-Input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField-Input[type=password]::-ms-reveal{display:none}.TextField-Input[type=number]{-moz-appearance:textfield}.TextField-Input:focus{outline:none}.TextField-Input:-webkit-autofill,.TextField-Input:-webkit-autofill:focus,.TextField-Input:-webkit-autofill:hover{border:none;-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.TextField-Side{align-items:center;display:flex;height:calc(var(--input-height) - var(--control-border-width)2);overflow:hidden}.TextField-Side_position_left{margin-right:var(--input-space)}.TextField-Side_position_right{margin-left:var(--input-space)}.TextField-Side_type_string{font-size:var(--input-font-size);white-space:nowrap}.TextField-Icon{color:var(--color-control-typo-placeholder)}blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}abbr,fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ul li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}legend{color:#000}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}img{height:auto;max-width:100%}*{box-sizing:border-box;outline:none}html.Theme.stand--AppTheme{background:var(--color-bg-default);color:var(--color-typo-primary)}@supports (scrollbar-gutter:auto){html.Theme.stand--AppTheme{overflow-y:overlay}html.Theme.stand--AppTheme::-webkit-scrollbar{height:4;width:4}html.Theme.stand--AppTheme::-webkit-scrollbar-thumb{background-color:var(--color-scroll-thumb);border-radius:4px;width:4}html.Theme.stand--AppTheme::-webkit-scrollbar-thumb:hover{background-color:var(--color-scroll-thumb-hover)}}html.Theme.stand--AppTheme_noScroll{overflow:hidden}
1	+ .TextField{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));--counter-button-icon-color:var(--color-control-typo-ghost);--counter-button-background:transparent;--counter-offset:0;--clear-button-color:var(--color-control-typo-clear);display:inline-flex;position:relative;width:100%}.TextField_size_xs{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--input-height:var(--control-height-xs);--input-font-size:var(--control-text-size-xs);--input-space:calc(var(--control-space-xs)0.5)}.TextField_size_xs .TextField-InputContainer_form_brickRound,.TextField_size_xs .TextField-InputContainer_form_clearRound,.TextField_size_xs .TextField-InputContainer_form_round{--counter-offset:calc(var(--space-xs) - var(--space-3xs))}.TextField_size_s{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--input-height:var(--control-height-s);--input-font-size:var(--control-text-size-s);--input-space:calc(var(--control-space-s)0.5)}.TextField_size_s .TextField-InputContainer_form_brickRound,.TextField_size_s .TextField-InputContainer_form_clearRound,.TextField_size_s .TextField-InputContainer_form_round{--counter-offset:var(--space-xs)}.TextField_size_m{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--input-height:var(--control-height-m);--input-font-size:var(--control-text-size-m);--input-space:calc(var(--control-space-m)0.5)}.TextField_size_m .TextField-InputContainer_form_brickRound,.TextField_size_m .TextField-InputContainer_form_clearRound,.TextField_size_m .TextField-InputContainer_form_round{--counter-offset:calc(var(--space-s) - var(--space-3xs))}.TextField_size_l{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--input-height:var(--control-height-l);--input-font-size:var(--control-text-size-l);--input-space:calc(var(--control-space-l)0.5)}.TextField_size_l .TextField-InputContainer_form_brickRound,.TextField_size_l .TextField-InputContainer_form_clearRound,.TextField_size_l .TextField-InputContainer_form_round{--counter-offset:var(--space-s)}.TextField_labelPosition_top{flex-direction:column}.TextField_labelPosition_top>:not(:last-child){margin-bottom:var(--label-offset)}.TextField_labelPosition_left{flex-direction:row}.TextField_labelPosition_left .TextField-Label{align-items:center;display:inline-flex;height:var(--input-height)}.TextField_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.TextField-Body{display:inline-flex;flex-direction:column;width:100%}.TextField-Body .TextField-Caption{margin-left:var(--caption-margin-left);margin-top:var(--caption-offset)}.TextField_view_clear .TextField-Caption{--caption-margin-left:0}.TextField-InputContainer{box-sizing:border-box;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);max-width:100%;min-height:var(--input-height);position:relative;transition:border-color .15s,box-shadow .15s,background-color .15s}.TextField-InputContainer_disabled{--counter-button-background:var(--color-control-bg-disable);--counter-button-icon-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear,.TextField-InputContainer_view_clear:focus,.TextField-InputContainer_view_clear:hover{color:var(--color-control-typo-default);padding:0}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::placeholder,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default{--container-border-color:var(--color-control-bg-border-default);background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);overflow-x:hidden;padding:0 var(--input-space)}.TextField-InputContainer_view_default:hover{border-color:var(--color-control-bg-border-default-hover)}.TextField-InputContainer_view_default.TextField-InputContainer_status_alert{--container-border-color:var(--color-bg-alert)}.TextField-InputContainer_view_default.TextField-InputContainer_status_success{--container-border-color:var(--color-bg-success)}.TextField-InputContainer_view_default.TextField-InputContainer_status_warning{--container-border-color:var(--color-bg-warning)}.TextField-InputContainer_view_default .TextField-Input{color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Input::-moz-placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input::placeholder{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:focus,.TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:hover{-webkit-text-fill-color:var(--color-control-typo-default)}.TextField-InputContainer_view_default .TextField-Side_type_string{color:var(--color-control-typo-placeholder)}.TextField-InputContainer_view_default.TextField-InputContainer_focus{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_brickClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_defaultClear,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_roundClear{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearBrick,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearDefault,.TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearRound{box-shadow:calc(var(--control-border-width)-1) 0 var(--color-control-bg-border-focus)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled{--clear-button-color:var(--color-control-typo-disable);background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input{color:var(--color-control-typo-disable);pointer-events:all}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::placeholder{color:var(--color-control-typo-disable)}.TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Side_type_string,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,.TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string{color:var(--color-control-typo-disable)}.TextField-InputContainer_form_defaultClear{border-right-width:0}.TextField-InputContainer_form_defaultBrick,.TextField-InputContainer_form_defaultClear{border-radius:var(--control-radius) 0 0 var(--control-radius)}.TextField-InputContainer_form_round{border-radius:calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6);padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundBrick{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_roundClear{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brick{border-radius:0}.TextField-InputContainer_form_brickDefault{border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_brickRound{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_brickClear{border-radius:0;border-right-width:0}.TextField-InputContainer_form_clearDefault{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.TextField-InputContainer_form_clearBrick{border-left-width:0;border-radius:0}.TextField-InputContainer_form_clearRound{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;padding-right:calc(var(--input-space)1.6)}.TextField-InputContainer_form_clearClear{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_icon,.TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_string{color:var(--color-typo-secondary)}.TextField-InputContainer_incrementButtons{padding-right:0}.TextField-InputContainer_type_textarea .TextField-Input{display:block;line-height:var(--line-height-text-m);min-width:0;padding-bottom:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);padding-top:calc((var(--input-height) - (var(--control-border-width)2) - var(--line-height-text-m))/2);resize:none}.TextField-Counter{height:calc(var(--input-height) - var(--control-border-width)2);margin-right:var(--counter-offset)}.TextField-Counter,.TextField-CounterButton{display:inline-flex;flex-direction:column;width:var(--space-xl)}.TextField-CounterButton{align-items:center;background-color:var(--counter-button-background);border:none;color:var(--counter-button-icon-color);cursor:pointer;flex:1;justify-content:center;margin:0;overflow-y:hidden;padding:0;transition:background-color .15s}.TextField-CounterButton_fn_increment{transform:rotate(180deg)}.TextField-ClearButton,.TextField-EyeButton{align-items:center;background-color:transparent;border:none;cursor:pointer;display:flex;flex-direction:row;height:calc(var(--input-height) - var(--control-border-width)2);justify-content:center;margin:0;margin-left:var(--input-space);padding:0}.TextField-ClearButton{color:var(--clear-button-color)}.TextField-ClearButton:hover{--clear-button-color:var(--color-control-typo-clear-hover)}.TextField-EyeButton{color:var(--color-control-typo-placeholder)}.TextField-EyeButton:hover{color:var(--color-control-typo-clear-hover)}.TextField-ClearButtonIcon{color:var(--color-control-typo-placeholder)}.TextField-Input{background:transparent;border:none;color:currentColor;flex:1;font-family:var(--font-primary);font-size:var(--input-font-size);height:calc(var(--input-height) - var(--control-border-width)2);min-width:80px;outline:none;padding:0;width:100%}.TextField-Input::-webkit-inner-spin-button,.TextField-Input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField-Input[type=password]::-ms-reveal{display:none}.TextField-Input[type=number]{-moz-appearance:textfield}.TextField-Input:focus{outline:none}.TextField-Input:-webkit-autofill,.TextField-Input:-webkit-autofill:focus,.TextField-Input:-webkit-autofill:hover{border:none;-webkit-box-shadow:inset 0 0 0 1000px transparent;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}.TextField-Side{align-items:center;display:flex;height:calc(var(--input-height) - var(--control-border-width)2);overflow:hidden}.TextField-Side_position_left{margin-right:var(--input-space)}.TextField-Side_position_right{margin-left:var(--input-space)}.TextField-Side_type_string{font-size:var(--input-font-size);white-space:nowrap}.TextField-Icon{color:var(--color-control-typo-placeholder)}

package/__internal__/src/components/TextField/TextField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","type","value","defaultValue","onChange","id","name","rows","cols","minRows","maxRows","inputRef","maxLength","disabled","size","view","form","state","status","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","labelIcon","inputContainerRef","labelPosition","caption","iconSize","focused","onClick","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture"];import"./TextField.css";import{IconClear}from"@consta/icons/IconClear";import{IconEye}from"@consta/icons/IconEye";import{IconEyeClose}from"@consta/icons/IconEyeClose";import{IconSelect}from"@consta/icons/IconSelect";import{IconSelectOpen}from"@consta/icons/IconSelectOpen";import React,{forwardRef,useCallback,useEffect}from"react";import TextAreaAutoSize from"react-textarea-autosize";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption/FieldCaption";import{FieldLabel}from"../FieldLabel/FieldLabel";import{useFlag}from"../../hooks/useFlag/useFlag";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{useSortSteps}from"../../hooks/useSortSteps/useSortSteps";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{isString}from"../../utils/type-guards";import{getIncrementFlag,getTypeForRender,getValueByStep,sizeMap}from"./helpers";import{textFieldPropFormDefault,textFieldPropSizeDefault,textFieldPropViewDefault}from"./types";export var COMPONENT_NAME="TextField";export var cnTextField=cn("TextField");export var TextFieldRender=function(a,b){var c=React.useRef(null),d=React.useRef(null),e=usePropsHandler(COMPONENT_NAME,a,c),f=e.className,g=e.type,h=void 0===g?"text":g,i=e.value,j=e.defaultValue,k=e.onChange,l=e.id,m=e.name,n=e.rows,o=e.cols,p=e.minRows,q=e.maxRows,r=e.inputRef,s=e.maxLength,t=e.disabled,u=e.size,v=void 0===u?textFieldPropSizeDefault:u,w=e.view,x=void 0===w?textFieldPropViewDefault:w,y=e.form,z=void 0===y?textFieldPropFormDefault:y,A=e.state,B=e.status,C=e.onBlur,D=e.onFocus,E=e.autoFocus,F=void 0!==E&&E,G=e.placeholder,H=e.leftSide,I=e.rightSide,J=e.autoComplete,K=e.withClearButton,L=e.incrementButtons,M=e.max,N=e.min,O=e.readOnly,P=e.required,Q=e.step,R=void 0===Q?1:Q,S=e.tabIndex,T=e.ariaLabel,U=e.label,V=e.labelIcon,W=e.inputContainerRef,X=e.labelPosition,Y=void 0===X?"top":X,Z=e.caption,$=e.iconSize,_=e.focused,aa=e.onClick,ba=e.onKeyDown,ca=e.onKeyDownCapture,da=e.onKeyPress,ea=e.onKeyPressCapture,fa=e.onKeyUp,ga=e.onKeyUpCapture,ha=_objectWithoutProperties(e,_excluded),ia=useFlag(F),ja=_slicedToArray(ia,2),ka=ja[0],la=ja[1],ma=useFlag(!1),na=_slicedToArray(ma,2),oa=na[0],pa=na[1],qa=useMutableRef(i),ra=useMutableRef(aa),sa=useMutableRef(k),ta=useCallback(function(a){var b;a.stopPropagation(),pa.toggle(),null===(b=d.current)||void 0===b?void 0:b.focus()},[]),ua=H,va=I,wa=isString(H),xa=isString(I),ya=getByMap(sizeMap,v,$),za=useSortSteps({step:R,min:+N,max:+M}),Aa=useCallback(function(a){var b;t||(null===(b=sa.current)||void 0===b?void 0:b.call(sa,a.target.value||null,{e:a,id:l,name:m}))},[l,m,t]),Ba=function(a){la.on(),null===D||void 0===D?void 0:D(a)},Ca={className:cnTextField("Input"),value:null!==i&&void 0!==i?i:void 0,defaultValue:null!==j&&void 0!==j?j:void 0,onChange:Aa,maxLength:s,disabled:t,onBlur:function handleBlur(a){la.off(),null===C||void 0===C?void 0:C(a)},onFocus:Ba,autoFocus:F,placeholder:G,autoComplete:J,readOnly:O,tabIndex:S,name:m,onKeyDownCapture:ca,onKeyPress:da,onKeyPressCapture:ea,onKeyUp:fa,onKeyUpCapture:ga,id:l?l.toString():void 0,"aria-label":T},Da=oa?IconEyeClose:IconEye,Ea={rows:n,cols:o,minRows:p||n,maxRows:q||n,ref:useForkRef([d,r])},Fa={type:getTypeForRender(h,oa),max:M,min:N,step:Array.isArray(za)?0:za,onKeyDown:function onKeyDown(a){var b=getIncrementFlag(a);if(null===ba||void 0===ba?void 0:ba(a),"number"===h&&"boolean"==typeof b&&!t){var c;a.preventDefault();var d=getValueByStep(za,i,b,N,M);null===(c=sa.current)||void 0===c?void 0:c.call(sa,d,{e:a,id:l,name:m})}},ref:useForkRef([d,r])},Ga=useCallback(function(a){var b;null===(b=sa.current)||void 0===b?void 0:b.call(sa,null,{e:a,id:l,name:m})},[]),Ha=function(a){var b,c=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],d=getValueByStep(za,i,c,N,M);null===(b=sa.current)||void 0===b?void 0:b.call(sa,d,{e:a,id:l,name:m})},Ia={onClick:useCallback(function(a){var b,c;null===(b=d.current)||void 0===b?void 0:b.focus(),null===(c=ra.current)||void 0===c?void 0:c.call(ra,a)},[])};return useEffect(function(){if("password"===h&&d.current){var a;d.current.selectionStart=(null===(a=qa.current)||void 0===a?void 0:a.length)||0}},[oa]),React.createElement("div",Object.assign({className:cnTextField({labelPosition:Y,size:v,view:x},[f]),ref:useForkRef([b,c])},Ia,ha),U&&React.createElement(FieldLabel,{as:"label",htmlFor:null===l||void 0===l?void 0:l.toString(),icon:V,required:P,className:cnTextField("Label",{labelPosition:Y}),size:v},U),React.createElement("div",{className:cnTextField("Body")},React.createElement("div",{ref:W,className:cnTextField("InputContainer",{view:x,form:z,status:B||A,disabled:t,type:h,focus:ka||_,withValue:!!i})},ua&&React.createElement("div",{className:cnTextField("Side",{position:"left",type:wa?"string":"icon"}),title:"string"==typeof H?H:void 0},wa?H:React.createElement(ua,{className:cnTextField("Icon"),size:ya})),"textarea"===h?React.createElement(TextAreaAutoSize,Object.assign({},Ca,Ea)):React.createElement("input",Object.assign({},Ca,Fa)),"number"===h&&(void 0===L||L)&&React.createElement("div",{className:cnTextField("Counter")},React.createElement("button",{onFocus:Ba,onClick:function(a){return Ha(a,!0)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelectOpen,{size:"xs"})),React.createElement("button",{onFocus:Ba,onClick:function(a){return Ha(a,!1)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelect,{size:"xs"}))),!!i&&K&&"number"!==h&&React.createElement("button",{type:"button",disabled:t,tabIndex:-1,onClick:Ga,className:cnTextField("ClearButton")},React.createElement(IconClear,{size:sizeMap[v],className:cnTextField("ClearButtonIcon")})),"password"===h&&!!i&&React.createElement("button",{className:cnTextField("ClearButton"),type:"button",onClick:ta},React.createElement(Da,{className:cnTextField("Icon"),size:ya})),va&&"number"!==h&&"password"!==h&&React.createElement("div",{className:cnTextField("Side",{position:"right",type:xa?"string":"icon"}),title:"string"==typeof I?I:void 0},xa?I:React.createElement(va,{className:cnTextField("Icon"),size:ya}))),Z&&React.createElement(FieldCaption,{className:cnTextField("Caption"),status:B||A},Z)))};export var TextField=forwardRef(TextFieldRender);export*from"./types";
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["className","type","value","defaultValue","onChange","id","name","rows","cols","minRows","maxRows","inputRef","maxLength","disabled","size","view","form","state","status","onBlur","onFocus","autoFocus","placeholder","leftSide","rightSide","autoComplete","withClearButton","incrementButtons","max","min","readOnly","required","step","tabIndex","ariaLabel","label","labelIcon","inputContainerRef","labelPosition","caption","iconSize","focused","onClick","onKeyDown","onKeyDownCapture","onKeyPress","onKeyPressCapture","onKeyUp","onKeyUpCapture"];import"./TextField.css";import{IconClear}from"@consta/icons/IconClear";import{IconEye}from"@consta/icons/IconEye";import{IconEyeClose}from"@consta/icons/IconEyeClose";import{IconSelect}from"@consta/icons/IconSelect";import React,{forwardRef,useCallback,useEffect}from"react";import TextAreaAutoSize from"react-textarea-autosize";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption/FieldCaption";import{FieldLabel}from"../FieldLabel/FieldLabel";import{useFlag}from"../../hooks/useFlag/useFlag";import{useForkRef}from"../../hooks/useForkRef/useForkRef";import{useMutableRef}from"../../hooks/useMutableRef/useMutableRef";import{useSortSteps}from"../../hooks/useSortSteps/useSortSteps";import{cn}from"../../utils/bem";import{getByMap}from"../../utils/getByMap";import{isString}from"../../utils/type-guards";import{getIncrementFlag,getTypeForRender,getValueByStep,inputValue,sizeMap}from"./helpers";import{textFieldPropFormDefault,textFieldPropSizeDefault,textFieldPropViewDefault}from"./types";export var COMPONENT_NAME="TextField";export var cnTextField=cn("TextField");export var TextFieldRender=function(a,b){var c,d,e=React.useRef(null),f=React.useRef(null),g=usePropsHandler(COMPONENT_NAME,a,e),h=g.className,i=g.type,j=void 0===i?"text":i,k=g.value,l=g.defaultValue,m=g.onChange,n=g.id,o=g.name,p=g.rows,q=g.cols,r=g.minRows,s=g.maxRows,t=g.inputRef,u=g.maxLength,v=g.disabled,w=g.size,x=void 0===w?textFieldPropSizeDefault:w,y=g.view,z=void 0===y?textFieldPropViewDefault:y,A=g.form,B=void 0===A?textFieldPropFormDefault:A,C=g.state,D=g.status,E=g.onBlur,F=g.onFocus,G=g.autoFocus,H=void 0!==G&&G,I=g.placeholder,J=g.leftSide,K=g.rightSide,L=g.autoComplete,M=g.withClearButton,N=g.incrementButtons,O=g.max,P=g.min,Q=g.readOnly,R=g.required,S=g.step,T=void 0===S?1:S,U=g.tabIndex,V=g.ariaLabel,W=g.label,X=g.labelIcon,Y=g.inputContainerRef,Z=g.labelPosition,$=void 0===Z?"top":Z,_=g.caption,aa=g.iconSize,ba=g.focused,ca=g.onClick,da=g.onKeyDown,ea=g.onKeyDownCapture,fa=g.onKeyPress,ga=g.onKeyPressCapture,ha=g.onKeyUp,ia=g.onKeyUpCapture,ja=_objectWithoutProperties(g,_excluded),ka="number"===j&&(void 0===N||N),la=useFlag(H),ma=_slicedToArray(la,2),na=ma[0],oa=ma[1],pa=useFlag(),qa=_slicedToArray(pa,2),ra=qa[0],sa=qa[1],ta=useFlag(),ua=_slicedToArray(ta,2),va=ua[0],wa=ua[1],xa=useMutableRef(ca),ya=useMutableRef(m),za=useCallback(function(a){var b;a.stopPropagation(),sa.toggle(),null===(b=f.current)||void 0===b?void 0:b.focus()},[]),Aa=J,Ba=K,Ca=isString(J),Da=isString(K),Ea=getByMap(sizeMap,x,aa),Fa=useSortSteps({step:T,min:+P,max:+O}),Ga=useCallback(function(a){var b;v||(null===(b=ya.current)||void 0===b?void 0:b.call(ya,a.target.value||null,{e:a,id:n,name:o})),a.target.value?wa.on():wa.off()},[n,o,v]),Ha=function(a){oa.on(),null===F||void 0===F?void 0:F(a)},Ia={className:cnTextField("Input"),value:inputValue(k),defaultValue:inputValue(l),onChange:Ga,maxLength:u,disabled:v,onBlur:function handleBlur(a){oa.off(),null===E||void 0===E?void 0:E(a)},onFocus:Ha,autoFocus:H,placeholder:I,autoComplete:L,readOnly:Q,tabIndex:U,name:o,onKeyDownCapture:ea,onKeyPress:fa,onKeyPressCapture:ga,onKeyUp:ha,onKeyUpCapture:ia,id:n?n.toString():void 0,"aria-label":V},Ja=ra?IconEyeClose:IconEye,Ka={rows:p,cols:q,minRows:r||p,maxRows:s||p,ref:useForkRef([f,t])},La={type:getTypeForRender(j,ra),max:O,min:P,step:Array.isArray(Fa)?0:Fa,onKeyDown:function onKeyDown(a){var b=getIncrementFlag(a);if(null===da||void 0===da?void 0:da(a),"number"===j&&"boolean"==typeof b&&!v){var c,d;a.preventDefault();var e=getValueByStep(Fa,null===(c=f.current)||void 0===c?void 0:c.value,b,P,O);null===(d=ya.current)||void 0===d?void 0:d.call(ya,e,{e:a,id:n,name:o}),f.current&&(f.current.value=e,wa.on())}},ref:useForkRef([f,t])},Ma=useCallback(function(a){var b;null===(b=ya.current)||void 0===b?void 0:b.call(ya,null,{e:a,id:n,name:o}),f.current&&(f.current.value="",wa.off())},[]),Na=function(a){var b,c,d=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],e=getValueByStep(Fa,null===(b=f.current)||void 0===b?void 0:b.value,d,P,O);null===(c=ya.current)||void 0===c?void 0:c.call(ya,e,{e:a,id:n,name:o}),f.current&&(f.current.value=e,wa.on())},Oa={onClick:useCallback(function(a){var b,c;null===(b=f.current)||void 0===b?void 0:b.focus(),null===(c=xa.current)||void 0===c?void 0:c.call(xa,a)},[])};return useEffect(function(){var a;wa[null!==(a=f.current)&&void 0!==a&&a.value?"on":"off"]()},[null===(c=f.current)||void 0===c?void 0:c.value]),React.createElement("div",Object.assign({className:cnTextField({labelPosition:$,size:x,view:z},[h]),ref:useForkRef([b,e])},Oa,ja),W&&React.createElement(FieldLabel,{as:"label",htmlFor:null===n||void 0===n?void 0:n.toString(),icon:X,required:R,className:cnTextField("Label",{labelPosition:$}),size:x},W),React.createElement("div",{className:cnTextField("Body")},React.createElement("div",{ref:Y,className:cnTextField("InputContainer",{view:z,form:B,status:D||C,disabled:v,type:j,focus:na||ba,withValue:va,incrementButtons:"number"===j&&ka})},Aa&&React.createElement("div",{className:cnTextField("Side",{position:"left",type:Ca?"string":"icon"}),title:"string"==typeof J?J:void 0},Ca?J:React.createElement(Aa,{className:cnTextField("Icon"),size:Ea})),"textarea"===j?React.createElement(TextAreaAutoSize,Object.assign({},Ia,Ka)):React.createElement("input",Object.assign({},Ia,La)),"number"===j&&ka&&!v&&React.createElement("div",{className:cnTextField("Counter")},React.createElement("button",{onFocus:Ha,onClick:function(a){return Na(a,!0)},type:"button",className:cnTextField("CounterButton",{fn:"increment"})},React.createElement(IconSelect,{size:"xs"})),React.createElement("button",{onFocus:Ha,onClick:function(a){return Na(a,!1)},type:"button",className:cnTextField("CounterButton")},React.createElement(IconSelect,{size:"xs"}))),!ka&&va&&M&&!v&&"number"!==j&&React.createElement("button",{type:"button",disabled:v,tabIndex:-1,onClick:Ma,className:cnTextField("ClearButton")},React.createElement(IconClear,{size:sizeMap[x],className:cnTextField("ClearButtonIcon")})),"password"===j&&(null===(d=f.current)||void 0===d?void 0:d.value)&&React.createElement("button",{className:cnTextField("ClearButton"),type:"button",onClick:za},React.createElement(Ja,{className:cnTextField("Icon"),size:Ea})),Ba&&!ka&&"password"!==j&&React.createElement("div",{className:cnTextField("Side",{position:"right",type:Da?"string":"icon"}),title:"string"==typeof K?K:void 0},Da?K:React.createElement(Ba,{className:cnTextField("Icon"),size:Ea}))),_&&React.createElement(FieldCaption,{className:cnTextField("Caption"),status:D||C},_)))};export var TextField=forwardRef(TextFieldRender);export*from"./types";
 //# sourceMappingURL=TextField.js.map