@salutejs/plasma-new-hope 0.384.0-dev.0 → 0.385.0-dev.0

package/dist/styled-components/es/components/InformationWrapper/InformationWrapper.styles.js

@@ -10,22 +10,22 @@ export const base = css([
 ]);
 export const ContentWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__ContentWrapper",
-    componentId: "sc-e2bd6375-0"
+    componentId: "sc-d9133d53-0"
 })([
     `display:flex;align-items:flex-start;gap:var(`,
     `);`
 ], tokens.contentGap);
 export const ContentChildrenWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__ContentChildrenWrapper",
-    componentId: "sc-e2bd6375-1"
+    componentId: "sc-d9133d53-1"
 })([
     `display:flex;flex-direction:column;width:100%;`
 ]);
 export const LabelWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__LabelWrapper",
-    componentId: "sc-e2bd6375-2"
+    componentId: "sc-d9133d53-2"
 })([
-    `display:flex;align-items:center;white-space:`,
+    `display:flex;align-items:flex-start;white-space:`,
     `;margin-bottom:`,
     `;&.`,
     `{position:relative;margin-bottom:`,
@@ -35,7 +35,7 @@ export const LabelWrapper = styled.div.withConfig({
 ], ({ hasLabel })=>hasLabel ? 'nowrap' : 'normal', ({ hasLabel })=>hasLabel ? `var(${tokens.labelWrapperOffset})` : `var(${tokens.labelWrapperTitleCaptionOffset})`, classes.withoutLabel, ({ hasCaption })=>hasCaption ? `var(${tokens.labelWrapperTitleCaptionOffset})` : '0', ({ hasCaption })=>hasCaption ? 'flex' : 'block', ({ hasCaption })=>hasCaption ? 'fit-content' : '0');
 export const IndicatorWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__IndicatorWrapper",
-    componentId: "sc-e2bd6375-3"
+    componentId: "sc-d9133d53-3"
 })([
     `position:`,
     `;display:inline-flex;align-items:center;gap:var(`,
@@ -43,13 +43,13 @@ export const IndicatorWrapper = styled.div.withConfig({
 ], ({ hasLabel })=>hasLabel ? 'relative' : 'static', tokens.indicatorWrapperGap);
 export const Label = styled.label.withConfig({
     displayName: "InformationWrapper.styles__Label",
-    componentId: "sc-e2bd6375-4"
+    componentId: "sc-d9133d53-4"
 })([
     `display:inline-flex;`
 ]);
 export const HintWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__HintWrapper",
-    componentId: "sc-e2bd6375-5"
+    componentId: "sc-d9133d53-5"
 })([
     `display:flex;justify-content:center;align-items:center;line-height:0;&.`,
     `{position:absolute;margin:0;z-index:2;inset:var(`,
@@ -60,14 +60,14 @@ export const HintWrapper = styled.div.withConfig({
 ], classes.withoutLabel, tokens.hintWithoutLabelPlacementOffset, privateTokens.translateYWithoutTitle, tokens.titleCaptionLineHeight, ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : `translateY(var(${privateTokens.translateYWithoutTitle}))`);
 export const HintTargetWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__HintTargetWrapper",
-    componentId: "sc-e2bd6375-6"
+    componentId: "sc-d9133d53-6"
 })([
     `color:var(`,
     `);display:flex;justify-content:center;align-items:center;`
 ], tokens.hintIconColor);
 export const Hint = styled(Tooltip).withConfig({
     displayName: "InformationWrapper.styles__Hint",
-    componentId: "sc-e2bd6375-7"
+    componentId: "sc-d9133d53-7"
 })([
     ``,
     ` .`,
@@ -75,13 +75,13 @@ export const Hint = styled(Tooltip).withConfig({
 ], HintTargetWrapper, popoverClasses.root);
 export const HintIconWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__HintIconWrapper",
-    componentId: "sc-e2bd6375-8"
+    componentId: "sc-d9133d53-8"
 })([
     `display:flex;`
 ]);
 export const Indicator = styled.div.withConfig({
     displayName: "InformationWrapper.styles__Indicator",
-    componentId: "sc-e2bd6375-9"
+    componentId: "sc-d9133d53-9"
 })([
     `border-radius:50%;align-self:flex-start;background-color:var(`,
     `);width:var(`,
@@ -100,33 +100,33 @@ export const Indicator = styled.div.withConfig({
 ], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorMarginTop, classes.requiredAlignLeft, tokens.indicatorOuterLeft, classes.withoutLabel, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorWithoutLabelInner, ({ hasCaption })=>hasCaption ? `translateY(var(${tokens.labelWrapperTitleCaptionOffset}))` : 'translateY(0)', classes.requiredAlignLeft, tokens.indicatorWithoutLabelInnerLeft);
 export const OptionalText = styled.span.withConfig({
     displayName: "InformationWrapper.styles__OptionalText",
-    componentId: "sc-e2bd6375-10"
+    componentId: "sc-d9133d53-10"
 })([
     `color:var(`,
     `);`
 ], tokens.optionalColor);
 export const TitleCaption = styled.div.withConfig({
     displayName: "InformationWrapper.styles__TitleCaption",
-    componentId: "sc-e2bd6375-11"
+    componentId: "sc-d9133d53-11"
 })([
     `display:inline-block;margin-left:auto;margin-top:`,
     `;`
-], ({ hasLabel })=>hasLabel ? `var(${tokens.titleCaptionOffset})` : 'unset');
+], ({ hasLabel })=>hasLabel ? `var(${tokens.titleCaptionMargin}, 0)` : 'unset');
 export const Helpers = styled.div.withConfig({
     displayName: "InformationWrapper.styles__Helpers",
-    componentId: "sc-e2bd6375-12"
+    componentId: "sc-d9133d53-12"
 })([
     `box-sizing:border-box;display:flex;justify-content:space-between;`
 ]);
 export const LeftHelper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__LeftHelper",
-    componentId: "sc-e2bd6375-13"
+    componentId: "sc-d9133d53-13"
 })([
     ``
 ]);
 export const RightHelper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__RightHelper",
-    componentId: "sc-e2bd6375-14"
+    componentId: "sc-d9133d53-14"
 })([
     `margin-left:auto;`
 ]);

package/dist/styled-components/es/components/InformationWrapper/InformationWrapper.tokens.js

@@ -20,6 +20,7 @@ export const tokens = {
     labelColorReadOnly: '--plasma-info-wrapper-label-color-readonly',
     contentGap: '--plasma-info-wrapper-content-gap',
     titleCaptionOffset: '--plasma-info-wrapper-title-caption-offset',
+    titleCaptionMargin: '--plasma-info-wrapper-title-caption-margin',
     titleCaptionColor: '--plasma-info-wrapper-title-caption-color',
     titleCaptionColorReadOnly: '--plasma-info-wrapper-title-caption-color-readonly',
     titleCaptionFontFamily: '--plasma-info-wrapper-title-caption-font-family',

package/dist/styled-components/es/components/Modal/Modal.tokens.js

@@ -5,6 +5,7 @@ export const classes = {
     header: 'modal-header',
     headerAbsolute: 'modal-header-absolute',
     footer: 'modal-footer',
+    footerText: 'modal-footer-text',
     image: 'modal-image',
     hasClose: 'modal-has-close',
     resizable: 'modal-resizable'
@@ -27,5 +28,15 @@ export const tokens = {
     modalCloseButtonRight: '--plasma-modal-close-button-right',
     modalHeaderPadding: '--plasma-modal-header-padding',
     modalFooterPadding: '--plasma-modal-footer-padding',
-    modalFooterGap: '--plasma-modal-footer-gap'
+    modalFooterGap: '--plasma-modal-footer-gap',
+    modalFooterTextAlign: '--plasma-modal-footer-text-align',
+    modalFooterTextColor: '--plasma-modal-footer-text-color',
+    modalFooterTextFontFamily: '--plasma-modal-footer-text-font-family',
+    modalFooterTextFontSize: '--plasma-modal-footer-text-font-size',
+    modalFooterTextFontStyle: '--plasma-modal-footer-text-font-style',
+    modalFooterTextFontWeight: '--plasma-modal-footer-text-font-weight',
+    modalFooterTextLetterSpacing: '--plasma-modal-footer-text-letter-spacing',
+    modalFooterTextLineHeight: '--plasma-modal-footer-text-line-height',
+    modalFooterTextMarginTop: '--plasma-modal-footer-text-margin-top',
+    modalFooterTextPaddingBottom: '--plasma-modal-footer-text-padding-bottom'
 };

package/dist/styled-components/es/components/Modal/ui/ModalFooter/ModalFooter.js

@@ -2,13 +2,15 @@ import React, { forwardRef } from "react";
 import { cx } from "../../../../utils";
 import { classes } from "../../Modal.tokens";
 import { base as viewCSS } from "./variations/_view/base";
-export const modalFooterRoot = (Root)=>/*#__PURE__*/ forwardRef(({ children, view, className, ...rest }, outerRef)=>{
+export const modalFooterRoot = (Root)=>/*#__PURE__*/ forwardRef(({ children, text, view, className, ...rest }, outerRef)=>{
         return /*#__PURE__*/ React.createElement(Root, {
             ref: outerRef,
             view: view,
             className: cx(className, classes.footer),
             ...rest
-        }, children);
+        }, children, text ? /*#__PURE__*/ React.createElement("div", {
+            className: classes.footerText
+        }, text) : null);
     });
 export const modalFooterConfig = {
     name: 'ModalFooter',

package/dist/styled-components/es/components/Modal/ui/ModalFooter/variations/_view/base.js

@@ -1,7 +1,18 @@
 import { css } from "styled-components";
-import { tokens } from "../../../../Modal.tokens";
+import { classes, tokens } from "../../../../Modal.tokens";
 export const base = css([
-    `display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;gap:var(`,
+    `display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;box-sizing:border-box;width:100%;gap:var(`,
     `);padding:var(`,
-    `);`
-], tokens.modalFooterGap, tokens.modalFooterPadding);
+    `);.`,
+    `{box-sizing:border-box;width:100%;min-width:100%;margin:var(`,
+    `) 0 0;padding:0 0 var(`,
+    `);text-align:var(`,
+    `);color:var(`,
+    `);font-family:var(`,
+    `);font-size:var(`,
+    `);font-style:var(`,
+    `);font-weight:var(`,
+    `);letter-spacing:var(`,
+    `);line-height:var(`,
+    `);}`
+], tokens.modalFooterGap, tokens.modalFooterPadding, classes.footerText, tokens.modalFooterTextMarginTop, tokens.modalFooterTextPaddingBottom, tokens.modalFooterTextAlign, tokens.modalFooterTextColor, tokens.modalFooterTextFontFamily, tokens.modalFooterTextFontSize, tokens.modalFooterTextFontStyle, tokens.modalFooterTextFontWeight, tokens.modalFooterTextLetterSpacing, tokens.modalFooterTextLineHeight);

package/dist/styled-components/es/components/Panel/Panel.tokens.js

@@ -17,5 +17,11 @@ export const tokens = {
     contentBackgroundColor: '--plasma-panel-content-background-color',
     padding: '--plasma-panel-padding',
     borderRadius: '--plasma-panel-border-radius',
-    closeColor: '--plasma-panel-close-color'
+    closeColor: '--plasma-panel-close-color',
+    scrollbarWidth: '--plasma-panel-scrollbar-width',
+    scrollbarOffsetRight: '--plasma-panel-scrollbar-offset-right',
+    scrollbarThumbBackgroundColor: '--plasma-panel-scrollbar-thumb-background-color',
+    scrollbarThumbBackgroundColorHover: '--plasma-panel-scrollbar-thumb-background-color-hover',
+    scrollbarThumbBackgroundColorActive: '--plasma-panel-scrollbar-thumb-background-color-active',
+    scrollbarTrackBackgroundColor: '--plasma-panel-scrollbar-track-background-color'
 };

package/dist/styled-components/es/components/Panel/ui/PanelContent/variations/_view/base.js

@@ -1,4 +1,16 @@
 import { css } from "styled-components";
+import { addScrollbar } from "../../../../../../mixins";
+import { tokens } from "../../../../Panel.tokens";
 export const base = css([
-    `overflow-y:scroll;::-webkit-scrollbar{display:none;}scrollbar-width:none;flex-grow:1;padding-right:20px;box-sizing:border-box;`
-]);
+    `overflow-y:auto;scrollbar-width:auto;`,
+    ` flex-grow:1;margin-right:calc( (var(`,
+    `,0rem) - var(`,
+    `,var(`,
+    `,0rem))) * -1 );padding-right:20px;box-sizing:border-box;`
+], addScrollbar({
+    scrollWidth: `var(${tokens.scrollbarWidth}, 0)`,
+    trackColor: `var(${tokens.scrollbarTrackBackgroundColor})`,
+    thumbColor: `var(${tokens.scrollbarThumbBackgroundColor})`,
+    thumbHoverColor: `var(${tokens.scrollbarThumbBackgroundColorHover}, var(${tokens.scrollbarThumbBackgroundColor}))`,
+    thumbActiveColor: `var(${tokens.scrollbarThumbBackgroundColorActive}, var(${tokens.scrollbarThumbBackgroundColor}))`
+}), tokens.padding, tokens.scrollbarOffsetRight, tokens.padding);

package/dist/styled-components/es/components/Range/Range.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useOutsideClick, useForkRef } from "../../hooks";
-import { cx } from "../../utils";
+import { cx, safeUseId } from "../../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as hintViewCSS } from "./variations/_hint-view/base";
@@ -18,8 +18,12 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
         0,
         0
     ], hintWidth, hintContentLeft, // layout
-    label, leftHelper, titleCaption, contentLeft, contentRight, firstTextfieldContentLeft, firstTextfieldContentRight, secondTextfieldContentLeft, secondTextfieldContentRight, firstTextfieldTextBefore, secondTextfieldTextBefore, firstTextfieldTextAfter, secondTextfieldTextAfter, dividerVariant = 'dash', dividerIcon, autoComplete, onChangeFirstValue, onChangeSecondValue, onSearchFirstValue, onSearchSecondValue, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, ...rest }, ref)=>{
+    label, leftHelper, titleCaption, contentLeft, contentRight, firstTextfieldContentLeft, firstTextfieldContentRight, secondTextfieldContentLeft, secondTextfieldContentRight, firstTextfieldTextBefore, secondTextfieldTextBefore, firstTextfieldTextAfter, secondTextfieldTextAfter, dividerVariant = 'dash', dividerIcon, autoComplete, onChangeFirstValue, onChangeSecondValue, onSearchFirstValue, onSearchSecondValue, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, // Пропсы для внутреннего использования, не отдается наружу.
+    // @ts-ignore
+    _onFieldClick, // @ts-ignore
+    _onContentClick, ...rest }, ref)=>{
         const { inputWrapperRef, firstTextfieldInputWrapperRef, secondTextfieldInputWrapperRef, ...rootProps } = rest;
+        const firstInputId = safeUseId();
         const rangeRef = useRef(null);
         const firstTextFieldRef = useRef(null);
         const secondTextFieldRef = useRef(null);
@@ -106,6 +110,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             className: cx(rangeErrorClass, firstValueErrorClass, secondValueErrorClass, rangeSuccessClass, firstValueSuccessClass, secondValueSuccessClass, rangeEditedClass, firstValueEditedClass, secondValueEditedClass, clearOuterHintClass),
             size: size,
             label: label,
+            labelHtmlFor: firstInputId,
             leftHelper: leftHelper,
             titleCaption: titleCaption,
             required: required,
@@ -129,8 +134,12 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
         }, /*#__PURE__*/ React.createElement(ContentWrapper, {
             ref: inputWrapperRef,
             className: cx(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass, rangeEditedClass)
-        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
+        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
+            onClick: _onContentClick
+        }, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
+            id: firstInputId,
             ref: firstTextFieldRef,
+            _onFieldClick: _onFieldClick,
             inputWrapperRef: firstTextfieldInputWrapperRef,
             className: cx(firstValueErrorClass, firstValueSuccessClass, firstValueEditedClass),
             value: firstValue,
@@ -151,6 +160,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             hasDivider: hasClearDivider
         }), Divider, /*#__PURE__*/ React.createElement(StyledInput, {
             ref: secondTextFieldRef,
+            _onFieldClick: _onFieldClick,
             inputWrapperRef: secondTextfieldInputWrapperRef,
             className: cx(secondValueErrorClass, secondValueSuccessClass, secondValueEditedClass),
             value: secondValue,
@@ -183,7 +193,9 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             handleHintHide: handleHintHide,
             handleHintClick: handleHintClick,
             withoutLabel: true
-        }), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, null, contentRight)))));
+        }), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
+            onClick: _onContentClick
+        }, contentRight)))));
     });
 export const rangeConfig = {
     name: 'Range',

package/dist/styled-components/es/components/Range/Range.tokens.js

@@ -82,6 +82,7 @@ export const tokens = {
     labelColor: '--plasma-range-info-wrapper-label-color',
     contentGap: '--plasma-range-info-wrapper-content-gap',
     titleCaptionOffset: '--plasma-range-info-wrapper-title-caption-offset',
+    titleCaptionMargin: '--plasma-range-info-wrapper-title-caption-margin',
     titleCaptionColor: '--plasma-range-info-wrapper-title-caption-color',
     titleCaptionFontFamily: '--plasma-range-info-wrapper-title-caption-font-family',
     titleCaptionFontStyle: '--plasma-range-info-wrapper-title-caption-font-style',

package/dist/styled-components/es/components/Range/ui/InformationWrapper/InformationWrapper.styles.js

@@ -6,7 +6,7 @@ const mergedConfig = mergeConfig(informationWrapperConfig);
 const InformationWrapper = component(mergedConfig);
 export const InformationWrapperUI = styled(InformationWrapper).withConfig({
     displayName: "InformationWrapper.styles__InformationWrapperUI",
-    componentId: "sc-9068791-0"
+    componentId: "sc-c14316e9-0"
 })([
     ``,
     `:var(`,
@@ -140,5 +140,7 @@ export const InformationWrapperUI = styled(InformationWrapper).withConfig({
     `:var(`,
     `);`,
     `:var(`,
+    `);`,
+    `:var(`,
     `);`
-], informationWrapperTokens.indicatorWrapperGap, tokens.indicatorWrapperGap, informationWrapperTokens.labelWrapperOffset, tokens.labelWrapperOffset, informationWrapperTokens.labelWrapperTitleCaptionOffset, tokens.labelWrapperTitleCaptionOffset, informationWrapperTokens.labelFontFamily, tokens.labelFontFamily, informationWrapperTokens.labelFontStyle, tokens.labelFontStyle, informationWrapperTokens.labelFontSize, tokens.labelFontSize, informationWrapperTokens.labelFontWeight, tokens.labelFontWeight, informationWrapperTokens.labelLetterSpacing, tokens.labelLetterSpacing, informationWrapperTokens.labelLineHeight, tokens.labelLineHeight, informationWrapperTokens.labelColor, tokens.labelColor, informationWrapperTokens.contentGap, tokens.contentGap, informationWrapperTokens.titleCaptionOffset, tokens.titleCaptionOffset, informationWrapperTokens.titleCaptionColor, tokens.titleCaptionColor, informationWrapperTokens.titleCaptionFontFamily, tokens.titleCaptionFontFamily, informationWrapperTokens.titleCaptionFontStyle, tokens.titleCaptionFontStyle, informationWrapperTokens.titleCaptionFontSize, tokens.titleCaptionFontSize, informationWrapperTokens.titleCaptionFontWeight, tokens.titleCaptionFontWeight, informationWrapperTokens.titleCaptionLetterSpacing, tokens.titleCaptionLetterSpacing, informationWrapperTokens.titleCaptionLineHeight, tokens.titleCaptionLineHeight, informationWrapperTokens.hintMargin, tokens.hintMargin, informationWrapperTokens.hintTargetSize, tokens.hintTargetSize, informationWrapperTokens.hintCustomIconTargetSize, tokens.hintCustomIconTargetSize, informationWrapperTokens.hintIconColor, tokens.hintIconColor, informationWrapperTokens.hintWithoutLabelPlacementOffset, tokens.hintWithoutLabelPlacementOffset, informationWrapperTokens.tooltipBackgroundColor, tokens.tooltipBackgroundColor, informationWrapperTokens.tooltipBoxShadow, tokens.tooltipBoxShadow, informationWrapperTokens.tooltipColor, tokens.tooltipColor, informationWrapperTokens.tooltipPaddingTop, tokens.tooltipPaddingTop, informationWrapperTokens.tooltipPaddingRight, tokens.tooltipPaddingRight, informationWrapperTokens.tooltipPaddingBottom, tokens.tooltipPaddingBottom, informationWrapperTokens.tooltipPaddingLeft, tokens.tooltipPaddingLeft, informationWrapperTokens.tooltipMinHeight, tokens.tooltipMinHeight, informationWrapperTokens.tooltipBorderRadius, tokens.tooltipBorderRadius, informationWrapperTokens.tooltipTextFontFamily, tokens.tooltipTextFontFamily, informationWrapperTokens.tooltipTextFontSize, tokens.tooltipTextFontSize, informationWrapperTokens.tooltipTextFontStyle, tokens.tooltipTextFontStyle, informationWrapperTokens.tooltipTextFontWeight, tokens.tooltipTextFontWeight, informationWrapperTokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLetterSpacing, informationWrapperTokens.tooltipTextFontLineHeight, tokens.tooltipTextFontLineHeight, informationWrapperTokens.tooltipContentLeftMargin, tokens.tooltipContentLeftMargin, informationWrapperTokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskWidth, informationWrapperTokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskHeight, informationWrapperTokens.tooltipArrowMaskImage, tokens.tooltipArrowMaskImage, informationWrapperTokens.tooltipArrowHeight, tokens.tooltipArrowHeight, informationWrapperTokens.tooltipArrowEdgeMargin, tokens.tooltipArrowEdgeMargin, informationWrapperTokens.tooltipArrowBackground, tokens.tooltipArrowBackground, informationWrapperTokens.indicatorColor, tokens.indicatorColor, informationWrapperTokens.indicatorSizeInner, tokens.indicatorSizeInner, informationWrapperTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, informationWrapperTokens.indicatorMarginTop, tokens.indicatorMarginTop, informationWrapperTokens.indicatorOuterLeft, tokens.indicatorOuterLeft, informationWrapperTokens.indicatorWithoutLabelInner, tokens.indicatorWithoutLabelInner, informationWrapperTokens.indicatorWithoutLabelInnerLeft, tokens.indicatorWithoutLabelInnerLeft, informationWrapperTokens.leftHelperColor, tokens.leftHelperColor, informationWrapperTokens.helpersPadding, tokens.helpersPadding, informationWrapperTokens.helpersGap, tokens.helpersGap, informationWrapperTokens.leftHelperFontFamily, tokens.leftHelperFontFamily, informationWrapperTokens.leftHelperFontStyle, tokens.leftHelperFontStyle, informationWrapperTokens.leftHelperFontSize, tokens.leftHelperFontSize, informationWrapperTokens.leftHelperFontWeight, tokens.leftHelperFontWeight, informationWrapperTokens.leftHelperLetterSpacing, tokens.leftHelperLetterSpacing, informationWrapperTokens.leftHelperLineHeight, tokens.leftHelperLineHeight, informationWrapperTokens.labelColorReadOnly, tokens.labelColorReadOnly, informationWrapperTokens.titleCaptionColorReadOnly, tokens.titleCaptionColorReadOnly, informationWrapperTokens.leftHelperColorReadOnly, tokens.leftHelperColorReadOnly, informationWrapperTokens.rightHelperColorReadOnly, tokens.rightHelperColorReadOnly);
+], informationWrapperTokens.indicatorWrapperGap, tokens.indicatorWrapperGap, informationWrapperTokens.labelWrapperOffset, tokens.labelWrapperOffset, informationWrapperTokens.labelWrapperTitleCaptionOffset, tokens.labelWrapperTitleCaptionOffset, informationWrapperTokens.labelFontFamily, tokens.labelFontFamily, informationWrapperTokens.labelFontStyle, tokens.labelFontStyle, informationWrapperTokens.labelFontSize, tokens.labelFontSize, informationWrapperTokens.labelFontWeight, tokens.labelFontWeight, informationWrapperTokens.labelLetterSpacing, tokens.labelLetterSpacing, informationWrapperTokens.labelLineHeight, tokens.labelLineHeight, informationWrapperTokens.labelColor, tokens.labelColor, informationWrapperTokens.contentGap, tokens.contentGap, informationWrapperTokens.titleCaptionOffset, tokens.titleCaptionOffset, informationWrapperTokens.titleCaptionMargin, tokens.titleCaptionMargin, informationWrapperTokens.titleCaptionColor, tokens.titleCaptionColor, informationWrapperTokens.titleCaptionFontFamily, tokens.titleCaptionFontFamily, informationWrapperTokens.titleCaptionFontStyle, tokens.titleCaptionFontStyle, informationWrapperTokens.titleCaptionFontSize, tokens.titleCaptionFontSize, informationWrapperTokens.titleCaptionFontWeight, tokens.titleCaptionFontWeight, informationWrapperTokens.titleCaptionLetterSpacing, tokens.titleCaptionLetterSpacing, informationWrapperTokens.titleCaptionLineHeight, tokens.titleCaptionLineHeight, informationWrapperTokens.hintMargin, tokens.hintMargin, informationWrapperTokens.hintTargetSize, tokens.hintTargetSize, informationWrapperTokens.hintCustomIconTargetSize, tokens.hintCustomIconTargetSize, informationWrapperTokens.hintIconColor, tokens.hintIconColor, informationWrapperTokens.hintWithoutLabelPlacementOffset, tokens.hintWithoutLabelPlacementOffset, informationWrapperTokens.tooltipBackgroundColor, tokens.tooltipBackgroundColor, informationWrapperTokens.tooltipBoxShadow, tokens.tooltipBoxShadow, informationWrapperTokens.tooltipColor, tokens.tooltipColor, informationWrapperTokens.tooltipPaddingTop, tokens.tooltipPaddingTop, informationWrapperTokens.tooltipPaddingRight, tokens.tooltipPaddingRight, informationWrapperTokens.tooltipPaddingBottom, tokens.tooltipPaddingBottom, informationWrapperTokens.tooltipPaddingLeft, tokens.tooltipPaddingLeft, informationWrapperTokens.tooltipMinHeight, tokens.tooltipMinHeight, informationWrapperTokens.tooltipBorderRadius, tokens.tooltipBorderRadius, informationWrapperTokens.tooltipTextFontFamily, tokens.tooltipTextFontFamily, informationWrapperTokens.tooltipTextFontSize, tokens.tooltipTextFontSize, informationWrapperTokens.tooltipTextFontStyle, tokens.tooltipTextFontStyle, informationWrapperTokens.tooltipTextFontWeight, tokens.tooltipTextFontWeight, informationWrapperTokens.tooltipTextFontLetterSpacing, tokens.tooltipTextFontLetterSpacing, informationWrapperTokens.tooltipTextFontLineHeight, tokens.tooltipTextFontLineHeight, informationWrapperTokens.tooltipContentLeftMargin, tokens.tooltipContentLeftMargin, informationWrapperTokens.tooltipArrowMaskWidth, tokens.tooltipArrowMaskWidth, informationWrapperTokens.tooltipArrowMaskHeight, tokens.tooltipArrowMaskHeight, informationWrapperTokens.tooltipArrowMaskImage, tokens.tooltipArrowMaskImage, informationWrapperTokens.tooltipArrowHeight, tokens.tooltipArrowHeight, informationWrapperTokens.tooltipArrowEdgeMargin, tokens.tooltipArrowEdgeMargin, informationWrapperTokens.tooltipArrowBackground, tokens.tooltipArrowBackground, informationWrapperTokens.indicatorColor, tokens.indicatorColor, informationWrapperTokens.indicatorSizeInner, tokens.indicatorSizeInner, informationWrapperTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, informationWrapperTokens.indicatorMarginTop, tokens.indicatorMarginTop, informationWrapperTokens.indicatorOuterLeft, tokens.indicatorOuterLeft, informationWrapperTokens.indicatorWithoutLabelInner, tokens.indicatorWithoutLabelInner, informationWrapperTokens.indicatorWithoutLabelInnerLeft, tokens.indicatorWithoutLabelInnerLeft, informationWrapperTokens.leftHelperColor, tokens.leftHelperColor, informationWrapperTokens.helpersPadding, tokens.helpersPadding, informationWrapperTokens.helpersGap, tokens.helpersGap, informationWrapperTokens.leftHelperFontFamily, tokens.leftHelperFontFamily, informationWrapperTokens.leftHelperFontStyle, tokens.leftHelperFontStyle, informationWrapperTokens.leftHelperFontSize, tokens.leftHelperFontSize, informationWrapperTokens.leftHelperFontWeight, tokens.leftHelperFontWeight, informationWrapperTokens.leftHelperLetterSpacing, tokens.leftHelperLetterSpacing, informationWrapperTokens.leftHelperLineHeight, tokens.leftHelperLineHeight, informationWrapperTokens.labelColorReadOnly, tokens.labelColorReadOnly, informationWrapperTokens.titleCaptionColorReadOnly, tokens.titleCaptionColorReadOnly, informationWrapperTokens.leftHelperColorReadOnly, tokens.leftHelperColorReadOnly, informationWrapperTokens.rightHelperColorReadOnly, tokens.rightHelperColorReadOnly);

package/dist/styled-components/es/components/Select/FloatingPopover.js

@@ -46,7 +46,7 @@ const FloatingPopover = /*#__PURE__*/ forwardRef(({ target, children, opened, on
         }
     }, /*#__PURE__*/ React.createElement("div", {
         ref: isTargetAsFunction ? undefined : refs.setReference,
-        onClick: handleClick
+        onClick: isTargetAsFunction ? undefined : handleClick
     }, typeof target === 'function' ? target(refs.setReference) : target), opened && // root - принимает ref контейнера портала.
     // id - если есть портал - не используется, если портала нет - подставляется 'wrappedId'.
     /*#__PURE__*/ React.createElement(FloatingPortal, getFloatingPortalProps(portal, wrappedId), /*#__PURE__*/ React.createElement("div", {

package/dist/styled-components/es/components/Select/Select.js

@@ -17,7 +17,7 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
         target = 'textfield-like', contentLeft, contentRight, placeholder, helperText, chipType = 'default', chipClickArea = 'full', required, requiredPlacement = 'right', optional, optionalText, hasRequiredIndicator = false, hintText, hintTrigger, hintTargetIcon, hintTargetPlacement = 'outer', hintPlacement, hintHasArrow, hintOffset = [
             0,
             8
-        ], hintWidth, hintContentLeft, label, labelPlacement, keepPlaceholder, // IsMultiselect
+        ], hintWidth, hintContentLeft, label, titleCaption, labelPlacement, keepPlaceholder, appearance, hasDivider, // IsMultiselect
         multiselect, value: outerValue, onChange: outerOnChange, isTargetAmount, renderTarget, selectAllOptions, name, defaultValue, // Private
         _offset, _checkboxAppearance, // Basic
         items, sortItems, treeView = false, arrowPlacement = 'left', placement = 'bottom', disabled = false, readOnly = false, variant = 'normal', zIndex, listMaxHeight, listWidth, portal, renderValue, renderItem, renderSelectionIcon, closeAfterSelect: outerCloseAfterSelect, beforeList, afterList, virtual = false, onScroll, onToggle, mode = 'default', flip, shift, singleLine, emptyStateDescription, // Rest
@@ -171,6 +171,7 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
                     opened: isListOpened,
                     valueToItemMap: valueToItemMap,
                     label: label,
+                    titleCaption: titleCaption,
                     placeholder: placeholder,
                     onKeyDown: onKeyDown,
                     labelPlacement: labelPlacement,
@@ -183,6 +184,7 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
                     readOnly: readOnly,
                     renderValue: renderValue,
                     inputWrapperRef: referenceRef,
+                    onClick: ()=>handleListToggle(!isListOpened),
                     multiselect: multiselect,
                     helperText: helperText,
                     treeId: treeId,
@@ -193,7 +195,9 @@ import { initialItemsTransform, getItemByFocused, hasOuterValue } from "./utils"
                     chipType: chipType,
                     chipClickArea: chipClickArea,
                     requiredProps: requiredProps,
-                    hintProps: hintProps
+                    hintProps: hintProps,
+                    appearance: appearance,
+                    hasDivider: hasDivider
                 }),
             zIndex: zIndex,
             isInner: false,

package/dist/styled-components/es/components/Select/Select.tokens.js

@@ -75,18 +75,26 @@ export const tokens = {
     buttonPadding: '--plasma-select-button-padding',
     // Токены для TextField
     textFieldColor: '--plasma-select-textfield-color',
+    textFieldColorFocus: '--plasma-select-textfield-color-focus',
     textFieldBackgroundColor: '--plasma-select-textfield-background-color',
     textFieldBackgroundColorHover: '--plasma-select-textfield-background-color-hover',
     textFieldBackgroundColorFocus: '--plasma-select-textfield-background-color-focus',
     textFieldBorderColor: '--plasma-select-textfield-border-color',
     textFieldBorderColorHover: '--plasma-select-textfield-border-color-hover',
     textFieldBorderColorFocus: '--plasma-select-textfield-border-color-focus',
+    textFieldDividerColor: '--plasma-select-textfield-divider-color',
+    textFieldDividerColorHover: '--plasma-select-textfield-divider-color-hover',
+    textFieldDividerColorFocus: '--plasma-select-textfield-divider-color-focus',
     textFieldPlaceholderColor: '--plasma-select-textfield-placeholder-color',
+    textFieldPlaceholderColorHover: '--plasma-select-textfield-placeholder-color-hover',
     textFieldPlaceholderColorFocus: '--plasma-select-textfield-placeholder-color-focus',
+    textFieldClearPlaceholderColor: '--plasma-select-textfield-clear-placeholder-color',
+    textFieldClearPlaceholderColorFocus: '--plasma-select-textfield-clear-placeholder-color-focus',
     /** Цвета для read-only состояния */ textFieldColorReadOnly: '--plasma-select-textfield-color-readonly',
     textFieldBackgroundColorReadOnly: '--plasma-select-textfield-bg-color-readonly',
     textFieldBorderColorReadOnly: '--plasma-select-textfield-border-color-readonly',
     textFieldPlaceholderColorReadOnly: '--plasma-select-textfield__placeholder-color-readonly',
+    textFieldDividerColorReadOnly: '--plasma-select-textfield-divider-color-readonly',
     textFieldHeight: '--plasma-select-textfield-height',
     textFieldBorderWidth: '--plasma-select-textfield-border-width',
     textFieldBorderRadius: '--plasma-select-textfield-border-radius',
@@ -129,6 +137,7 @@ export const tokens = {
     textFieldTitleCaptionColor: '--plasma-select-textfield-title-caption-color',
     textFieldTitleCaptionColorReadOnly: '--plasma-select-textfield__title-caption-color-readonly',
     textFieldTitleCaptionInnerLabelOffset: '--plasma-select-textfield-title-caption-label-inner-offset',
+    textFieldTitleCaptionMargin: '--plasma-select-textfield-title-caption-margin',
     textFieldTitleCaptionFontFamily: '--plasma-select-textfield-title-caption-font-family',
     textFieldTitleCaptionFontStyle: '--plasma-select-textfield-title-caption-font-style',
     textFieldTitleCaptionFontSize: '--plasma-select-textfield-title-caption-font-size',

package/dist/styled-components/es/components/Select/ui/Target/Target.js

@@ -1,10 +1,11 @@
 import React, { forwardRef } from "react";
 import { useForkRef } from "../../../../hooks";
 import { Button, Textfield, RenderTarget } from "./ui";
-export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, opened, valueToItemMap, label, placeholder, onKeyDown, labelPlacement, size, view, contentLeft, contentRight, disabled, readOnly, renderValue, inputWrapperRef, multiselect, helperText, treeId, activeDescendantItemValue, isTargetAmount, handleChange, chipView, chipType, chipClickArea, keepPlaceholder, requiredProps, hintProps }, ref)=>{
+export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, opened, valueToItemMap, label, titleCaption, placeholder, onKeyDown, onClick, labelPlacement, size, view, contentLeft, contentRight, disabled, readOnly, renderValue, inputWrapperRef, multiselect, helperText, treeId, activeDescendantItemValue, isTargetAmount, handleChange, chipView, chipType, chipClickArea, keepPlaceholder, requiredProps, hintProps, appearance, hasDivider }, ref)=>{
     const buttonRef = useForkRef(ref, inputWrapperRef);
     if (renderTarget) {
         return /*#__PURE__*/ React.createElement(RenderTarget, {
+            onClick: onClick,
             inputWrapperRef: inputWrapperRef,
             multiselect: multiselect,
             value: value,
@@ -14,6 +15,7 @@ export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, o
         });
     }
     return target === 'button-like' ? /*#__PURE__*/ React.createElement(Button, {
+        onClick: onClick,
         ref: buttonRef,
         opened: opened,
         value: value,
@@ -28,12 +30,14 @@ export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, o
         multiselect: multiselect,
         isTargetAmount: isTargetAmount
     }) : /*#__PURE__*/ React.createElement(Textfield, {
+        onClick: onClick,
         ref: ref,
         inputWrapperRef: inputWrapperRef,
         opened: opened,
         multiselect: multiselect,
         value: value,
         label: label,
+        titleCaption: titleCaption,
         placeholder: placeholder,
         onKeyDown: onKeyDown,
         labelPlacement: labelPlacement,
@@ -55,6 +59,8 @@ export const Target = /*#__PURE__*/ forwardRef(({ target, renderTarget, value, o
         chipClickArea: chipClickArea,
         keepPlaceholder: keepPlaceholder,
         requiredProps: requiredProps,
-        hintProps: hintProps
+        hintProps: hintProps,
+        appearance: appearance,
+        hasDivider: hasDivider
     });
 });

package/dist/styled-components/es/components/Select/ui/Target/ui/Button/Button.js

@@ -3,12 +3,13 @@ import { cx } from "../../../../../../utils";
 import { classes } from "../../../../Select.tokens";
 import { getButtonLabel, getItemId, sizeToIconSize } from "../../../../utils";
 import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from "./Button.styles";
-export const Button = /*#__PURE__*/ forwardRef(({ opened, value, valueToItemMap, onKeyDown, label, size, disabled, renderValue, treeId, activeDescendantItemValue, multiselect, isTargetAmount }, ref)=>{
+export const Button = /*#__PURE__*/ forwardRef(({ opened, value, valueToItemMap, onKeyDown, onClick, label, size, disabled, renderValue, treeId, activeDescendantItemValue, multiselect, isTargetAmount }, ref)=>{
     const withArrowInverse = opened ? classes.arrowInverse : undefined;
     return /*#__PURE__*/ React.createElement(ButtonWrapper, null, /*#__PURE__*/ React.createElement(StyledButton, {
         ref: ref,
         stretching: "filled",
         onKeyDown: onKeyDown,
+        onClick: onClick,
         className: opened ? classes.selectWithoutBoxShadow : undefined,
         disabled: disabled,
         contentRight: /*#__PURE__*/ React.createElement(IconArrowWrapper, null, /*#__PURE__*/ React.createElement(StyledArrow, {

package/dist/styled-components/es/components/Select/ui/Target/ui/RenderTarget/RenderTarget.js

@@ -1,5 +1,5 @@
 import React from "react";
-export const RenderTarget = ({ multiselect, value, opened, renderTarget, valueToItemMap, inputWrapperRef })=>{
+export const RenderTarget = ({ multiselect, value, opened, renderTarget, valueToItemMap, inputWrapperRef, onClick })=>{
     let content;
     if (multiselect) {
         const selectedItems = value.map((itemValue)=>valueToItemMap.get(itemValue)).filter((item)=>Boolean(item));
@@ -9,6 +9,7 @@ export const RenderTarget = ({ multiselect, value, opened, renderTarget, valueTo
         content = renderTarget(selectedItem, opened);
     }
     return /*#__PURE__*/ React.createElement("div", {
-        ref: inputWrapperRef
+        ref: inputWrapperRef,
+        onClick: onClick
     }, content);
 };

package/dist/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import { sizeToIconSize, getItemId } from "../../../../utils";
 import { classes } from "../../../../Select.tokens";
 import { IconArrowWrapper, StyledArrow, StyledTextField, StyledLeftHelper } from "./Textfield.styles";
-export const Textfield = /*#__PURE__*/ forwardRef(({ inputWrapperRef, opened, multiselect, value, label, labelPlacement, keepPlaceholder, placeholder, onKeyDown, size, view, contentLeft, contentRight, helperText, treeId, activeDescendantItemValue, disabled, readOnly, isTargetAmount, valueToItemMap, renderValue, handleChange, chipView, chipType, chipClickArea, requiredProps, hintProps }, ref)=>{
+export const Textfield = /*#__PURE__*/ forwardRef(({ inputWrapperRef, opened, multiselect, value, label, titleCaption, labelPlacement, keepPlaceholder, placeholder, onKeyDown, onClick, size, view, contentLeft, contentRight, helperText, treeId, activeDescendantItemValue, disabled, readOnly, isTargetAmount, valueToItemMap, renderValue, handleChange, chipView, chipType, chipClickArea, requiredProps, hintProps, appearance, hasDivider }, ref)=>{
     const withArrowInverse = opened ? classes.arrowInverse : undefined;
     const getValue = ()=>{
         if (multiselect || Array.isArray(value) || !value) {
@@ -63,12 +63,14 @@ export const Textfield = /*#__PURE__*/ forwardRef(({ inputWrapperRef, opened, mu
         view: view,
         ref: ref,
         inputWrapperRef: inputWrapperRef,
+        _onFieldClick: onClick,
         readOnly: readOnly,
         className: readOnly ? classes.readOnly : undefined,
         value: getValue(),
         labelPlacement: labelPlacement,
         disabled: disabled,
         label: label,
+        titleCaption: titleCaption,
         keepPlaceholder: keepPlaceholder,
         placeholder: value instanceof Array && value.length ? '' : placeholder,
         contentLeft: contentLeft,
@@ -102,6 +104,8 @@ export const Textfield = /*#__PURE__*/ forwardRef(({ inputWrapperRef, opened, mu
         _onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
         ,
         opened: opened,
+        appearance: appearance,
+        hasDivider: hasDivider,
         // TODO: #1547
         _forceChipManipulationWithReadonly: !readOnly,
         _interaction_disabled: true,