@salutejs/plasma-new-hope 0.344.0-canary.2392.20298160025.0 → 0.344.0-canary.2397.20456842500.0

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

@@ -58,6 +58,7 @@ import cx from "classnames";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
+import { base as readOnlyCSS } from "./variations/_read-only/base";
 import { base as hintViewCSS } from "./variations/_hint-view/base";
 import { base as hintSizeCSS } from "./variations/_hint-size/base";
 import { base, ContentChildrenWrapper, ContentWrapper, Helpers, LabelWrapper, LeftHelper, RightHelper, TitleCaption } from "./InformationWrapper.styles";
@@ -65,7 +66,7 @@ import { LabelComponent } from "./ui";
 import { classes } from "./InformationWrapper.tokens";
 export var informationWrapperRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
-        var size = _param.size, view = _param.view, children = _param.children, label = _param.label, labelHtmlFor = _param.labelHtmlFor, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'top' : _param_labelPlacement, hasRequiredIndicator = _param.hasRequiredIndicator, _param_requiredIndicatorPlacement = _param.requiredIndicatorPlacement, requiredIndicatorPlacement = _param_requiredIndicatorPlacement === void 0 ? 'right' : _param_requiredIndicatorPlacement, optional = _param.optional, optionalText = _param.optionalText, hintText = _param.hintText, _param_hintTrigger = _param.hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, hintOffset = _param.hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, titleCaption = _param.titleCaption, leftHelper = _param.leftHelper, rightHelper = _param.rightHelper, disabled = _param.disabled, rest = _object_without_properties(_param, [
+        var size = _param.size, view = _param.view, children = _param.children, label = _param.label, labelHtmlFor = _param.labelHtmlFor, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'top' : _param_labelPlacement, hasRequiredIndicator = _param.hasRequiredIndicator, _param_requiredIndicatorPlacement = _param.requiredIndicatorPlacement, requiredIndicatorPlacement = _param_requiredIndicatorPlacement === void 0 ? 'right' : _param_requiredIndicatorPlacement, optional = _param.optional, optionalText = _param.optionalText, hintText = _param.hintText, _param_hintTrigger = _param.hintTrigger, hintTrigger = _param_hintTrigger === void 0 ? 'hover' : _param_hintTrigger, _param_hintView = _param.hintView, hintView = _param_hintView === void 0 ? 'default' : _param_hintView, _param_hintSize = _param.hintSize, hintSize = _param_hintSize === void 0 ? 'm' : _param_hintSize, hintTargetIcon = _param.hintTargetIcon, _param_hintPlacement = _param.hintPlacement, hintPlacement = _param_hintPlacement === void 0 ? 'auto' : _param_hintPlacement, hintHasArrow = _param.hintHasArrow, hintOffset = _param.hintOffset, hintWidth = _param.hintWidth, hintContentLeft = _param.hintContentLeft, titleCaption = _param.titleCaption, leftHelper = _param.leftHelper, rightHelper = _param.rightHelper, readOnly = _param.readOnly, disabled = _param.disabled, rest = _object_without_properties(_param, [
             "size",
             "view",
             "children",
@@ -89,6 +90,7 @@ export var informationWrapperRoot = function(Root) {
             "titleCaption",
             "leftHelper",
             "rightHelper",
+            "readOnly",
             "disabled"
         ]);
         var hasHelpers = leftHelper || rightHelper;
@@ -96,7 +98,8 @@ export var informationWrapperRoot = function(Root) {
             ref: ref,
             size: size,
             view: view,
-            disabled: disabled
+            disabled: disabled,
+            readOnly: readOnly
         }, hintText && {
             hintView: hintView,
             hintSize: hintSize
@@ -140,7 +143,9 @@ export var informationWrapperRoot = function(Root) {
             hintOffset: hintOffset,
             hintWidth: hintWidth,
             hintContentLeft: hintContentLeft
-        }), /*#__PURE__*/ React.createElement(ContentChildrenWrapper, null, children, hasHelpers && /*#__PURE__*/ React.createElement(Helpers, null, leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, null, leftHelper), rightHelper && /*#__PURE__*/ React.createElement(RightHelper, null, rightHelper)))));
+        }), /*#__PURE__*/ React.createElement(ContentChildrenWrapper, null, children, hasHelpers && /*#__PURE__*/ React.createElement(Helpers, null, leftHelper && /*#__PURE__*/ React.createElement(LeftHelper, {
+            className: classes.leftHelper
+        }, leftHelper), rightHelper && /*#__PURE__*/ React.createElement(RightHelper, null, rightHelper)))));
     });
 };
 export var informationWrapperConfig = {
@@ -155,6 +160,10 @@ export var informationWrapperConfig = {
         view: {
             css: viewCSS
         },
+        readOnly: {
+            css: readOnlyCSS,
+            attrs: true
+        },
         disabled: {
             css: disabledCSS,
             attrs: true

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

@@ -11,25 +11,27 @@ export var base = css([
 ]);
 export var ContentWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__ContentWrapper",
-    componentId: "sc-1705b12a-0"
+    componentId: "sc-98f8a5a8-0"
 })([
     "display:flex;align-items:flex-start;gap:var(",
     ");"
 ], tokens.contentGap);
 export var ContentChildrenWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__ContentChildrenWrapper",
-    componentId: "sc-1705b12a-1"
+    componentId: "sc-98f8a5a8-1"
 })([
     "display:flex;flex-direction:column;width:100%;"
 ]);
 export var LabelWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__LabelWrapper",
-    componentId: "sc-1705b12a-2"
+    componentId: "sc-98f8a5a8-2"
 })([
     "display:flex;align-items:center;white-space:",
     ";margin-bottom:",
     ";&.",
     "{position:relative;margin-bottom:",
+    ";display:",
+    ";height:",
     ";}"
 ], function(param) {
     var hasLabel = param.hasLabel;
@@ -40,10 +42,16 @@ export var LabelWrapper = styled.div.withConfig({
 }, classes.withoutLabel, function(param) {
     var hasCaption = param.hasCaption;
     return hasCaption ? "var(".concat(tokens.labelWrapperTitleCaptionOffset, ")") : '0';
+}, function(param) {
+    var hasCaption = param.hasCaption;
+    return hasCaption ? 'flex' : 'block';
+}, function(param) {
+    var hasCaption = param.hasCaption;
+    return hasCaption ? 'fit-content' : '0';
 });
 export var IndicatorWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__IndicatorWrapper",
-    componentId: "sc-1705b12a-3"
+    componentId: "sc-98f8a5a8-3"
 })([
     "position:",
     ";display:inline-flex;align-items:center;gap:var(",
@@ -54,32 +62,33 @@ export var IndicatorWrapper = styled.div.withConfig({
 }, tokens.indicatorWrapperGap);
 export var Label = styled.label.withConfig({
     displayName: "InformationWrapper.styles__Label",
-    componentId: "sc-1705b12a-4"
+    componentId: "sc-98f8a5a8-4"
 })([
     "display:inline-flex;"
 ]);
 export var HintWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__HintWrapper",
-    componentId: "sc-1705b12a-5"
+    componentId: "sc-98f8a5a8-5"
 })([
     "display:flex;justify-content:center;align-items:center;line-height:0;&.",
     "{position:absolute;margin:0;z-index:2;inset:var(",
-    ");transform:",
+    ");--plasma_private-translateY-without-title-caption:calc(-1 * var(",
+    "));transform:",
     ";}"
-], classes.withoutLabel, tokens.hintWithoutLabelPlacementOffset, function(param) {
+], classes.withoutLabel, tokens.hintWithoutLabelPlacementOffset, tokens.titleCaptionLineHeight, function(param) {
     var hasCaption = param.hasCaption;
-    return hasCaption ? "translateY(var(".concat(tokens.labelWrapperTitleCaptionOffset, "))") : 'translateY(0)';
+    return hasCaption ? "translateY(var(".concat(tokens.labelWrapperTitleCaptionOffset, "))") : 'translateY(var(--plasma_private-translateY-without-title-caption)';
 });
 export var HintTargetWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__HintTargetWrapper",
-    componentId: "sc-1705b12a-6"
+    componentId: "sc-98f8a5a8-6"
 })([
     "color:var(",
     ");display:flex;justify-content:center;align-items:center;"
 ], tokens.hintIconColor);
 export var Hint = styled(Tooltip).withConfig({
     displayName: "InformationWrapper.styles__Hint",
-    componentId: "sc-1705b12a-7"
+    componentId: "sc-98f8a5a8-7"
 })([
     "",
     " .",
@@ -87,13 +96,13 @@ export var Hint = styled(Tooltip).withConfig({
 ], HintTargetWrapper, popoverClasses.root);
 export var HintIconWrapper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__HintIconWrapper",
-    componentId: "sc-1705b12a-8"
+    componentId: "sc-98f8a5a8-8"
 })([
     "display:flex;"
 ]);
 export var Indicator = styled.div.withConfig({
     displayName: "InformationWrapper.styles__Indicator",
-    componentId: "sc-1705b12a-9"
+    componentId: "sc-98f8a5a8-9"
 })([
     "border-radius:50%;align-self:flex-start;background-color:var(",
     ");width:var(",
@@ -115,14 +124,14 @@ export var Indicator = styled.div.withConfig({
 }, classes.requiredAlignLeft, tokens.indicatorWithoutLabelInnerLeft);
 export var OptionalText = styled.span.withConfig({
     displayName: "InformationWrapper.styles__OptionalText",
-    componentId: "sc-1705b12a-10"
+    componentId: "sc-98f8a5a8-10"
 })([
     "color:var(",
     ");"
 ], tokens.optionalColor);
 export var TitleCaption = styled.div.withConfig({
     displayName: "InformationWrapper.styles__TitleCaption",
-    componentId: "sc-1705b12a-11"
+    componentId: "sc-98f8a5a8-11"
 })([
     "display:inline-block;margin-left:auto;margin-top:",
     ";"
@@ -132,19 +141,19 @@ export var TitleCaption = styled.div.withConfig({
 });
 export var Helpers = styled.div.withConfig({
     displayName: "InformationWrapper.styles__Helpers",
-    componentId: "sc-1705b12a-12"
+    componentId: "sc-98f8a5a8-12"
 })([
     "box-sizing:border-box;display:flex;justify-content:space-between;"
 ]);
 export var LeftHelper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__LeftHelper",
-    componentId: "sc-1705b12a-13"
+    componentId: "sc-98f8a5a8-13"
 })([
     ""
 ]);
 export var RightHelper = styled.div.withConfig({
     displayName: "InformationWrapper.styles__RightHelper",
-    componentId: "sc-1705b12a-14"
+    componentId: "sc-98f8a5a8-14"
 })([
     ""
 ]);

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

@@ -1,6 +1,7 @@
 export var classes = {
     withoutLabel: 'info-wrapper-without-label',
-    requiredAlignLeft: 'info-wrapper-required-align-left'
+    requiredAlignLeft: 'info-wrapper-required-align-left',
+    leftHelper: 'info-wrapper-left-helper'
 };
 export var tokens = {
     /** Токены для label */ indicatorWrapperGap: '--plasma-info-wrapper-indicator-wrapper-gap',
@@ -13,9 +14,11 @@ export var tokens = {
     labelLetterSpacing: '--plasma-info-wrapper-label-letter-spacing',
     labelLineHeight: '--plasma-info-wrapper-label-line-height',
     labelColor: '--plasma-info-wrapper-label-color',
+    labelColorReadOnly: '--plasma-info-wrapper-label-color-readonly',
     contentGap: '--plasma-info-wrapper-content-gap',
     titleCaptionOffset: '--plasma-info-wrapper-title-caption-offset',
     titleCaptionColor: '--plasma-info-wrapper-title-caption-color',
+    titleCaptionColorReadOnly: '--plasma-info-wrapper-title-caption-color-readonly',
     titleCaptionFontFamily: '--plasma-info-wrapper-title-caption-font-family',
     titleCaptionFontStyle: '--plasma-info-wrapper-title-caption-font-style',
     titleCaptionFontSize: '--plasma-info-wrapper-title-caption-font-size',
@@ -59,6 +62,8 @@ export var tokens = {
     /** Токены для optional */ optionalColor: '--plasma-info-wrapper-optional-color',
     /** Токены для подписей снизу */ leftHelperColor: '--plasma-info-wrapper-left-helper-color',
     rightHelperColor: '--plasma-info-wrapper-right-helper-color',
+    leftHelperColorReadOnly: '--plasma-info-wrapper-left-helper-color-readonly',
+    rightHelperColorReadOnly: '--plasma-info-wrapper-right-helper-color-readonly',
     helpersPadding: '--plasma-info-wrapper-helpers-padding-top',
     helpersGap: '--plasma-info-wrapper-helpers-gap',
     leftHelperFontFamily: '--plasma-info-wrapper-left-helper-font-family',

package/dist/styled-components/es/components/InformationWrapper/variations/_read-only/base.js

@@ -0,0 +1,18 @@
+import { css } from "styled-components";
+import { Label, LeftHelper, RightHelper, TitleCaption } from "../../InformationWrapper.styles";
+import { tokens } from "../../InformationWrapper.tokens";
+export var base = css([
+    "&[readonly]{",
+    "{color:var(",
+    ",var(",
+    "));}",
+    "{color:var(",
+    ",var(",
+    "));}",
+    "{color:var(",
+    ",var(",
+    "));}",
+    "{color:var(",
+    ",var(",
+    "));}}"
+], Label, tokens.labelColorReadOnly, tokens.labelColor, TitleCaption, tokens.titleCaptionColorReadOnly, tokens.titleCaptionColor, LeftHelper, tokens.leftHelperColorReadOnly, tokens.leftHelperColor, RightHelper, tokens.rightHelperColorReadOnly, tokens.rightHelperColor);

package/dist/styled-components/es/components/InformationWrapper/variations/_size/base.js

@@ -17,7 +17,6 @@ export var base = css([
     ");}",
     "{width:var(",
     ");height:var(",
-    ");margin:var(",
     ");}",
     "{font-family:var(",
     ");font-size:var(",
@@ -43,4 +42,4 @@ export var base = css([
     ");letter-spacing:var(",
     ");line-height:var(",
     ");}"
-], Label, OptionalText, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, HintWrapper, tokens.hintMargin, tokens.hintTargetSize, tokens.hintTargetSize, HintTargetWrapper, tokens.hintTargetSize, tokens.hintTargetSize, tokens.hintMargin, TitleCaption, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, Helpers, tokens.helpersPadding, tokens.helpersGap, LeftHelper, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, RightHelper, tokens.rightHelperFontFamily, tokens.rightHelperFontSize, tokens.rightHelperFontStyle, tokens.rightHelperFontWeight, tokens.rightHelperLetterSpacing, tokens.rightHelperLineHeight);
+], Label, OptionalText, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, HintWrapper, tokens.hintMargin, tokens.hintTargetSize, tokens.hintTargetSize, HintTargetWrapper, tokens.hintTargetSize, tokens.hintTargetSize, TitleCaption, tokens.titleCaptionFontFamily, tokens.titleCaptionFontSize, tokens.titleCaptionFontStyle, tokens.titleCaptionFontWeight, tokens.titleCaptionLetterSpacing, tokens.titleCaptionLineHeight, Helpers, tokens.helpersPadding, tokens.helpersGap, LeftHelper, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, RightHelper, tokens.rightHelperFontFamily, tokens.rightHelperFontSize, tokens.rightHelperFontStyle, tokens.rightHelperFontWeight, tokens.rightHelperLetterSpacing, tokens.rightHelperLineHeight);

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

@@ -85,6 +85,7 @@ export var linkButtonRoot = function(Root) {
             href: disabled ? undefined : href,
             rel: target === '_blank' ? 'noopener noreferrer' : rel
         };
+        var hasContent = Boolean(txt || children || additionalContent || contentRight);
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             view: view,
@@ -97,7 +98,11 @@ export var linkButtonRoot = function(Root) {
         }, linkProps, rest), /*#__PURE__*/ React.createElement(LoadWrap, {
             isLoading: !disabled && isLoading,
             style: _object_spread({}, loadingCustomOpacity)
-        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/ React.createElement(LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, null, contentRight)), !disabled && isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
+        }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
+            hasContent: hasContent
+        }, contentLeft), txt ? /*#__PURE__*/ React.createElement(LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
+            hasContent: hasContent
+        }, contentRight)), !disabled && isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
     });
 };
 export var linkButtonConfig = {

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

@@ -17,14 +17,14 @@ export var base = css([
 }));
 export var StyledAdditionalContent = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledAdditionalContent",
-    componentId: "sc-e83eddac-0"
+    componentId: "sc-f97b8dcf-0"
 })([
     "display:flex;align-items:center;margin:var(",
     ");"
 ], tokens.linkButtonAdditionalContentMargin);
 export var LoadWrap = styled.div.withConfig({
     displayName: "LinkButton.styles__LoadWrap",
-    componentId: "sc-e83eddac-1"
+    componentId: "sc-f97b8dcf-1"
 })([
     "opacity:",
     ";display:flex;align-items:inherit;justify-content:inherit;height:100%;width:100%;"
@@ -34,13 +34,13 @@ export var LoadWrap = styled.div.withConfig({
 });
 export var Loader = styled.div.withConfig({
     displayName: "LinkButton.styles__Loader",
-    componentId: "sc-e83eddac-2"
+    componentId: "sc-f97b8dcf-2"
 })([
     "position:absolute;"
 ]);
 export var StyledSpinner = styled(Spinner).withConfig({
     displayName: "LinkButton.styles__StyledSpinner",
-    componentId: "sc-e83eddac-3"
+    componentId: "sc-f97b8dcf-3"
 })([
     "",
     ":var(",
@@ -50,7 +50,7 @@ export var StyledSpinner = styled(Spinner).withConfig({
 ], spinnerTokens.size, tokens.linkButtonSpinnerSize, spinnerTokens.color, tokens.linkButtonSpinnerColor);
 export var LinkButtonText = styled.span.withConfig({
     displayName: "LinkButton.styles__LinkButtonText",
-    componentId: "sc-e83eddac-4"
+    componentId: "sc-f97b8dcf-4"
 })([
     "padding:var(",
     ");color:var(",
@@ -61,17 +61,23 @@ export var LinkButtonText = styled.span.withConfig({
 ], tokens.linkButtonTextPadding, tokens.linkButtonTextColor, applyEllipsis(), tokens.linkButtonTextColorHover, tokens.linkButtonTextColorActive);
 export var StyledContentLeft = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledContentLeft",
-    componentId: "sc-e83eddac-5"
+    componentId: "sc-f97b8dcf-5"
 })([
     "line-height:0;color:var(",
-    ");margin:var(",
-    ");"
-], tokens.linkButtonIconColor, tokens.linkButtonLeftContentMargin);
+    ");margin:",
+    ";"
+], tokens.linkButtonIconColor, function(param) {
+    var hasContent = param.hasContent;
+    return hasContent ? "var(".concat(tokens.linkButtonLeftContentMargin, ")") : '0';
+});
 export var StyledContentRight = styled.div.withConfig({
     displayName: "LinkButton.styles__StyledContentRight",
-    componentId: "sc-e83eddac-6"
+    componentId: "sc-f97b8dcf-6"
 })([
     "line-height:0;color:var(",
-    ");margin:var(",
-    ");"
-], tokens.linkButtonIconColor, tokens.linkButtonRightContentMargin);
+    ");margin:",
+    ";"
+], tokens.linkButtonIconColor, function(param) {
+    var hasContent = param.hasContent;
+    return hasContent ? "var(".concat(tokens.linkButtonRightContentMargin, ")") : '0';
+});