@salutejs/plasma-new-hope 0.270.0-canary.1744.13385332397.0 → 0.270.0-canary.1770.13386075549.0

package/es/index.css

@@ -156,6 +156,8 @@
 
 .base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59{border:unset;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_s3wsw3p__f2a5cb59{box-shadow:unset;background-color:unset;border-radius:0;padding-bottom:var(--plasma-textarea-input-padding-top);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_o1r1fvk8__f2a5cb59{margin-bottom:var(--plasma-textarea-clear-label-margin-bottom);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_stc5t23__f2a5cb59{right:0;bottom:unset;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_s18lndvq__f2a5cb59,.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_snf439a__f2a5cb59{padding-left:0;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_snf439a__f2a5cb59{background-color:unset;border-radius:0;padding-top:var(--plasma-textarea-clear-helpers-padding-top);padding-right:0;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_s18lndvq__f2a5cb59{color:var(--plasma-textarea-input-clear-color);padding-right:0;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_s18lndvq__f2a5cb59.base_kgm261_textareaHasRightContent__f2a5cb59{padding-right:var(--plasma-textarea-clear-input-padding-right-with-right-content);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_salwx57__f2a5cb59:not(.base_kgm261_innerPlaceholderUp__f2a5cb59) .base_kgm261_s14zw9ik__f2a5cb59{color:var(--plasma-textarea-clear-placeholder-color);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_salwx57__f2a5cb59:not(.base_kgm261_innerPlaceholderUp__f2a5cb59).base_kgm261_focusedOuterPlaceholderColor__f2a5cb59 .base_kgm261_s14zw9ik__f2a5cb59{color:var(--plasma-textarea-clear-placeholder-color-focus);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_salwx57__f2a5cb59.base_kgm261_innerPlaceholderUp__f2a5cb59{color:var(--plasma-textarea-placeholder-color);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_s14zw9ik__f2a5cb59{padding-left:0;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_sgr5lml__f2a5cb59.base_kgm261_labelPlacementInner__f2a5cb59{inset:var(--plasma-textarea__clear-indicator-placement-inner);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_sgr5lml__f2a5cb59.base_kgm261_labelPlacementInner__f2a5cb59.base_kgm261_requiredAlignRight__f2a5cb59{inset:var(--plasma-textarea__clear-indicator-placement-inner-right);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59.base_kgm261_textareaHasHint__f2a5cb59 .base_kgm261_s18tpn65__f2a5cb59.base_kgm261_labelPlacementInner__f2a5cb59{inset:var(--plasma-textarea__clear-hint-inner-label-placement-offset);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59.base_kgm261_textareaHasHint__f2a5cb59 .base_kgm261_sgr5lml__f2a5cb59.base_kgm261_labelPlacementInner__f2a5cb59.base_kgm261_requiredAlignRight__f2a5cb59{inset:var(--plasma-textarea__clear-indicator-hint-placement-inner-right);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59 .base_kgm261_textareaContainer__f2a5cb59{border:unset;border-radius:0;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59:focus-within:not([readonly]) .base_kgm261_textareaWrapper__f2a5cb59{background-color:unset;box-shadow:unset;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59:focus-within:not([readonly]) .base_kgm261_textareaContainer__f2a5cb59{border:unset;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59:focus-within:not([readonly]) .base_kgm261_textareaHelpers__f2a5cb59{background-color:unset;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59.base_kgm261_textareaHasDivider__f2a5cb59 .base_kgm261_s3wsw3p__f2a5cb59{position:relative;--plasma_private-textarea-divider-color:var(--plasma-textarea-divider-color);}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59.base_kgm261_textareaHasDivider__f2a5cb59 .base_kgm261_s3wsw3p__f2a5cb59:before{content:'';position:absolute;height:0.063rem;width:100%;bottom:0;left:0;background-color:var(--plasma_private-textarea-divider-color);-webkit-transition:background-color 0.1s ease-in;transition:background-color 0.1s ease-in;}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59.base_kgm261_textareaHasDivider__f2a5cb59:not([readonly]) .base_kgm261_s3wsw3p__f2a5cb59:hover{--plasma_private-textarea-divider-color:var( --plasma-textarea-divider-color-hover, var(--plasma-textarea-divider-color) );}.base_kgm261_b1x0cx6o__f2a5cb59.base_kgm261_textareaClear__f2a5cb59.base_kgm261_textareaHasDivider__f2a5cb59:not([readonly]) .base_kgm261_s3wsw3p__f2a5cb59:focus-within{--plasma_private-textarea-divider-color:var( --plasma-textarea-divider-color-focus, var(--plasma-textarea-divider-color) );}
 
+.base_om8eo9_b1xxdrt2__1ba9f117[readonly] .base_om8eo9_s18lndvq__1ba9f117{color:var(--plasma-textarea-input-color-read-only);}.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_s3wsw3p__1ba9f117,.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_snf439a__1ba9f117{background:transparent;position:relative;}.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_s3wsw3p__1ba9f117:before,.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_snf439a__1ba9f117:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;background:var(--plasma-textarea-background-color-read-only);opacity:var(--plasma-textarea-read-only-opacity);z-index:-1;}.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_s3wsw3p__1ba9f117:hover,.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_snf439a__1ba9f117:hover{background:transparent;}.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_s3wsw3p__1ba9f117:before{border-radius:var(--plasma-textarea-border-radius-with-helpers);}.base_om8eo9_b1xxdrt2__1ba9f117[readonly]:not(.base_om8eo9_b1xxdrt2__1ba9f117[readonly].base_om8eo9_textareaClear__1ba9f117) .base_om8eo9_snf439a__1ba9f117:before{border-bottom-left-radius:var(--plasma-textarea-border-radius);border-bottom-right-radius:var(--plasma-textarea-border-radius);}
+
 .base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_surmvwq__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_sgr5lml__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_si9oz50__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_t18bd513__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_stc5t23__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_s3wsw3p__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_snf439a__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_s14zw9ik__29fe1634,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_suev9vb__29fe1634{opacity:var(--plasma-textarea-disabled-opacity);cursor:not-allowed;}.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_surmvwq__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_sgr5lml__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_si9oz50__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_t18bd513__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_stc5t23__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_s3wsw3p__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_snf439a__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_s14zw9ik__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_suev9vb__29fe1634:hover,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_surmvwq__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_sgr5lml__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_si9oz50__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_t18bd513__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_stc5t23__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_s3wsw3p__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_snf439a__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_s14zw9ik__29fe1634:active,.base_1bn0zc9_b1w9g1pa__29fe1634[disabled] .base_1bn0zc9_suev9vb__29fe1634:active{-webkit-transform:none;-ms-transform:none;transform:none;}.base_1bn0zc9_b1w9g1pa__29fe1634 .base_1bn0zc9_textarea__29fe1634:disabled{cursor:not-allowed;color:var(--plasma-textarea-input-color-disabled);}
 
 .base_111a0qe_b193dn9j__86c7166a .base_111a0qe_h1luq7vd__86c7166a{--plasma-tooltip-background-color:var(--plasma-textarea__tooltip-background-color);--plasma-tooltip-box-shadow:var(--plasma-textarea__tooltip-box-shadow);--plasma-tooltip-color:var(--plasma-textarea__tooltip-color);}
@@ -172,7 +174,7 @@
 
 .base_2tv0nz_b15zsg4z__045faf03[disabled]{pointer-events:none;opacity:var(--plasma-textfield-disabled-opacity);cursor:not-allowed;}.base_2tv0nz_b15zsg4z__045faf03[disabled] .base_2tv0nz_io4bpie__045faf03{cursor:not-allowed;min-width:unset;}
 
-.base_oizdmx_b1w985rt__677e5348[readonly] .base_oizdmx_iq39zt5__677e5348{color:var(--plasma-textfield-color-readonly);background-color:var(--plasma-textfield-bg-color-readonly);box-shadow:inset 0 0 0 var(--plasma-textfield-border-width) var(--plasma-textfield-border-color-readonly);}.base_oizdmx_b1w985rt__677e5348[readonly].base_oizdmx_textfieldHasDivider__677e5348 .base_oizdmx_iq39zt5__677e5348:before{background-color:var(--plasma-textfield-divider-color-readonly);}.base_oizdmx_b1w985rt__677e5348[readonly] .base_oizdmx_iq39zt5__677e5348:hover{background-color:var(--plasma-textfield-bg-color-readonly);}.base_oizdmx_b1w985rt__677e5348[readonly] .base_oizdmx_iq39zt5__677e5348:focus-within .base_oizdmx_i19ry60d__677e5348,.base_oizdmx_b1w985rt__677e5348[readonly] .base_oizdmx_i19ry60d__677e5348{color:var(--plasma-textfield__placeholder-color-readonly);}.base_oizdmx_b1w985rt__677e5348[readonly] .base_oizdmx_io4bpie__677e5348{color:var(--plasma-textfield-color-readonly);cursor:default;min-width:unset;}.base_oizdmx_b1w985rt__677e5348[readonly] .base_oizdmx_tlv9av6__677e5348{color:var(--plasma-textfield__title-caption-color-readonly);}.base_oizdmx_b1w985rt__677e5348[readonly] .base_oizdmx_lb3k3v1__677e5348{color:var(--plasma-textfield__left-helper-color-readonly);}.base_oizdmx_b1w985rt__677e5348[readonly].base_oizdmx_labelPlacementOuter__677e5348 .base_oizdmx_luk2zst__677e5348{color:var(--plasma-textfield__label-color-readonly);}
+.base_sr3to2_b1w985rt__b33aa171[readonly]:not(.base_sr3to2_b1w985rt__b33aa171[readonly].base_sr3to2_textfieldClear__b33aa171) .base_sr3to2_iq39zt5__b33aa171{position:relative;color:var(--plasma-textfield-color-readonly);background-color:transparent;box-shadow:inset 0 0 0 var(--plasma-textfield-border-width) var(--plasma-textfield-border-color-readonly);}.base_sr3to2_b1w985rt__b33aa171[readonly]:not(.base_sr3to2_b1w985rt__b33aa171[readonly].base_sr3to2_textfieldClear__b33aa171) .base_sr3to2_iq39zt5__b33aa171:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(--plasma-textfield-border-radius);background-color:var(--plasma-textfield-bg-color-readonly);opacity:var(--plasma-textfield-readonly-opacity);z-index:-1;}.base_sr3to2_b1w985rt__b33aa171[readonly]:not(.base_sr3to2_b1w985rt__b33aa171[readonly].base_sr3to2_textfieldClear__b33aa171) .base_sr3to2_iq39zt5__b33aa171:hover{background-color:transparent;}.base_sr3to2_b1w985rt__b33aa171[readonly].base_sr3to2_textfieldHasDivider__b33aa171 .base_sr3to2_iq39zt5__b33aa171:before{background-color:var(--plasma-textfield-divider-color-readonly);}.base_sr3to2_b1w985rt__b33aa171[readonly] .base_sr3to2_iq39zt5__b33aa171:focus-within .base_sr3to2_i19ry60d__b33aa171,.base_sr3to2_b1w985rt__b33aa171[readonly] .base_sr3to2_i19ry60d__b33aa171{color:var(--plasma-textfield__placeholder-color-readonly);}.base_sr3to2_b1w985rt__b33aa171[readonly] .base_sr3to2_io4bpie__b33aa171{color:var(--plasma-textfield-color-readonly);cursor:default;min-width:unset;}.base_sr3to2_b1w985rt__b33aa171[readonly] .base_sr3to2_tlv9av6__b33aa171{color:var(--plasma-textfield__title-caption-color-readonly);}.base_sr3to2_b1w985rt__b33aa171[readonly] .base_sr3to2_lb3k3v1__b33aa171{color:var(--plasma-textfield__left-helper-color-readonly);}.base_sr3to2_b1w985rt__b33aa171[readonly] .base_sr3to2_s190z894__b33aa171:hover,.base_sr3to2_b1w985rt__b33aa171[readonly] .base_sr3to2_s190z894__b33aa171:active{cursor:default;color:var(--plasma-textfield-content-right-slot-color,var(--plasma-textfield-content-slot-color));}.base_sr3to2_b1w985rt__b33aa171[readonly].base_sr3to2_labelPlacementOuter__b33aa171 .base_sr3to2_luk2zst__b33aa171{color:var(--plasma-textfield__label-color-readonly);}
 
 .base_jfnl8i_b15d3bnf__f1019e0f.base_jfnl8i_labelPlacementOuter__f1019e0f .base_jfnl8i_luk2zst__f1019e0f{position:relative;display:inline-block;color:var(--plasma-textfield__label-color);}.base_jfnl8i_b15d3bnf__f1019e0f.base_jfnl8i_labelPlacementInner__f1019e0f .base_jfnl8i_i13qvwoy__f1019e0f{padding:var(--plasma-textfield-placement_inner__content-padding);}.base_jfnl8i_b15d3bnf__f1019e0f.base_jfnl8i_labelPlacementInner__f1019e0f .base_jfnl8i_io4bpie__f1019e0f:focus ~ .base_jfnl8i_luk2zst__f1019e0f,.base_jfnl8i_b15d3bnf__f1019e0f.base_jfnl8i_labelPlacementInner__f1019e0f .base_jfnl8i_io4bpie__f1019e0f.base_jfnl8i_hasValue__f1019e0f ~ .base_jfnl8i_luk2zst__f1019e0f,.base_jfnl8i_b15d3bnf__f1019e0f.base_jfnl8i_labelPlacementInner__f1019e0f .base_jfnl8i_io4bpie__f1019e0f.base_jfnl8i_keepPlaceholder__f1019e0f ~ .base_jfnl8i_luk2zst__f1019e0f{color:var(--plasma-textfield__placeholder-color);-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:var(--plasma-textfield-placement_inner__label-padding);font-family:var(--plasma-textfield-placement_inner__label-font-family);font-size:var(--plasma-textfield-placement_inner__label-font-size);font-style:var(--plasma-textfield-placement_inner__label-font-style);font-weight:var(--plasma-textfield-placement_inner__label-font-weight);-webkit-letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);-moz-letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);-ms-letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);letter-spacing:var(--plasma-textfield-placement_inner__label-letter-spacing);line-height:var(--plasma-textfield-placement_inner__label-line-height);}.base_jfnl8i_b15d3bnf__f1019e0f.base_jfnl8i_labelPlacementInner__f1019e0f .base_jfnl8i_luk2zst__f1019e0f{color:var(--plasma-textfield__placeholder-color);pointer-events:none;position:absolute;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;height:100%;}.base_jfnl8i_b15d3bnf__f1019e0f.base_jfnl8i_labelPlacementInner__f1019e0f.base_jfnl8i_textfieldClear__f1019e0f .base_jfnl8i_luk2zst__f1019e0f{color:var(--plasma-textfield__clear-placeholder-color);}
 
@@ -718,7 +720,7 @@
 
 .base_1ufizo4_brz2a7__2efb673d[disabled]{opacity:var(--plasma-range-disabled-opacity);cursor:not-allowed;}
 
-.base_8q1gx8_b1l9fpln__a910018b[readonly]{cursor:default;}.base_8q1gx8_b1l9fpln__a910018b[readonly] .base_8q1gx8_cfxtxl2__a910018b{background:var(--plasma-range-background-readonly);}.base_8q1gx8_b1l9fpln__a910018b[readonly] .base_8q1gx8_s14q3826__a910018b{display:block;color:var(--plasma-range__label-color-readonly);}.base_8q1gx8_b1l9fpln__a910018b[readonly] .base_8q1gx8_l1e6rwfy__a910018b{color:var(--plasma-range__left-helper-color-readonly);}.base_8q1gx8_b1l9fpln__a910018b[readonly] .base_8q1gx8_s1hiyoiq__a910018b{color:var(--plasma-range__divider-color-readonly);}.base_8q1gx8_b1l9fpln__a910018b[readonly] .base_8q1gx8_s15y5ylz__a910018b,.base_8q1gx8_b1l9fpln__a910018b[readonly] .base_8q1gx8_suha98b__a910018b{color:var(--plasma-range-textfield-color-readonly);}
+.base_1jlqwtc_b1l9fpln__86a36108[readonly]{cursor:default;}.base_1jlqwtc_b1l9fpln__86a36108[readonly] .base_1jlqwtc_cfxtxl2__86a36108{background:var(--plasma-range-background-readonly);}.base_1jlqwtc_b1l9fpln__86a36108[readonly] .base_1jlqwtc_s14q3826__86a36108{display:block;color:var(--plasma-range__label-color-readonly);}.base_1jlqwtc_b1l9fpln__86a36108[readonly] .base_1jlqwtc_l1e6rwfy__86a36108{color:var(--plasma-range__left-helper-color-readonly);}.base_1jlqwtc_b1l9fpln__86a36108[readonly] .base_1jlqwtc_s1hiyoiq__86a36108{color:var(--plasma-range__divider-color-readonly);opacity:var(--plasma-range__divider-opacity-readonly);}.base_1jlqwtc_b1l9fpln__86a36108[readonly] .base_1jlqwtc_s15y5ylz__86a36108,.base_1jlqwtc_b1l9fpln__86a36108[readonly] .base_1jlqwtc_suha98b__86a36108{color:var(--plasma-range-textfield-color-readonly);}.base_1jlqwtc_b1l9fpln__86a36108[readonly] .base_1jlqwtc_suha98b__86a36108{opacity:var(--plasma-range__right-content-opacity-readonly);}
 
 .Range_styles_pk9346_s1k2erwt__4887fc13{width:100%;--plasma-textfield-color:var(--plasma-range-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-range-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-range-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-range-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-range-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-range-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-range-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-range-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-range-textfield-border-color);--plasma-textfield-border-color-hover:var(--plasma-range-textfield-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-range-textfield-border-color-focus);--plasma-textfield-color-readonly:var(--plasma-range-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-range-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-range-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-range-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-range-textfield-height);--plasma-textfield-border-width:var(--plasma-range-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-range-textfield-border-radius);--plasma-textfield-padding:var(--plasma-range-textfield-padding);--plasma-textfield__left-content-margin:var(--plasma-range-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-range-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-range-textfield-font-family);--plasma-textfield-font-size:var(--plasma-range-textfield-font-size);--plasma-textfield-font-style:var(--plasma-range-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-range-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-range-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-range-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-range-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-range-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-range-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-range-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-range-textfield__after-text-margin);}.Range_styles_pk9346_s1k2erwt__4887fc13.Range_styles_pk9346_rangeValueError__4887fc13{--plasma-textfield-bg-color:var(--plasma-range-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-range-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-range-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-range-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-range-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-range-textfield-border-color-error-focus);}.Range_styles_pk9346_s1k2erwt__4887fc13.Range_styles_pk9346_rangeValueSuccess__4887fc13{--plasma-textfield-bg-color:var(--plasma-range-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-range-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-range-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-range-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-range-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-range-textfield-border-color-success-focus);}
 .Range_styles_pk9346_b16kyj37__4887fc13{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.270.0-canary.1744.13385332397.0",
+  "version": "0.270.0-canary.1770.13386075549.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -80,8 +80,8 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@salutejs/plasma-sb-utils": "0.192.0-canary.1744.13385332397.0",
-    "@salutejs/plasma-themes": "0.29.0-canary.1744.13385332397.0",
+    "@salutejs/plasma-sb-utils": "0.191.1-dev.0",
+    "@salutejs/plasma-themes": "0.28.1-dev.0",
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addons": "^7.6.17",
@@ -116,7 +116,7 @@
     "@linaria/react": "5.0.3",
     "@popperjs/core": "2.11.8",
     "@salutejs/input-core": "2.1.2",
-    "@salutejs/plasma-core": "1.192.0-canary.1744.13385332397.0",
+    "@salutejs/plasma-core": "1.191.1-dev.0",
     "@salutejs/react-maskinput": "3.2.6",
     "classnames": "2.5.1",
     "dayjs": "1.11.11",
@@ -132,5 +132,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "d70dafc690da4da72b56c5878617ad3bd4dd5902"
+  "gitHead": "da65826739f3477aa222fff4d2454f32a1eb3605"
 }

package/styled-components/cjs/components/Range/Range.tokens.js

@@ -26,6 +26,7 @@ var tokens = exports.tokens = {
   /** Токены разделителя */
   dividerColor: '--plasma-range__divider-color',
   dividerColorReadOnly: '--plasma-range__divider-color-readonly',
+  dividerOpacityReadOnly: '--plasma-range__divider-opacity-readonly',
   dividerPadding: '--plasma-range__divider-padding',
   dividerFontFamily: '--plasma-range__divider-font-family',
   dividerFontStyle: '--plasma-range__divider-font-style',
@@ -36,6 +37,7 @@ var tokens = exports.tokens = {
   /** Токены слотов для контента */
   leftContentMargin: '--plasma-range__left-content-margin',
   rightContentMargin: '--plasma-range__right-content-margin',
+  rightContentOpacityReadOnly: '--plasma-range__right-content-opacity-readonly',
   /** Токены лейбла */
   labelColor: '--plasma-range__label-color',
   labelColorReadOnly: '--plasma-range__label-color-readonly',

package/styled-components/cjs/components/Range/variations/_readonly/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _Range = /*#__PURE__*/require("../../Range.tokens");
 var _Range2 = /*#__PURE__*/require("../../Range.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");}", ",", "{color:var(", ");}}"], _Range2.ContentWrapper, _Range.tokens.backgroundReadOnly, _Range2.StyledLabel, _Range.tokens.labelColorReadOnly, _Range2.LeftHelper, _Range.tokens.leftHelperColorReadOnly, _Range2.StyledDivider, _Range.tokens.dividerColorReadOnly, _Range2.StyledContentLeft, _Range2.StyledContentRight, _Range.tokens.textFieldColorReadOnly);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{cursor:default;", "{background:var(", ");}", "{display:block;color:var(", ");}", "{color:var(", ");}", "{color:var(", ");opacity:var(", ");}", ",", "{color:var(", ");}", "{opacity:var(", ");}}"], _Range2.ContentWrapper, _Range.tokens.backgroundReadOnly, _Range2.StyledLabel, _Range.tokens.labelColorReadOnly, _Range2.LeftHelper, _Range.tokens.leftHelperColorReadOnly, _Range2.StyledDivider, _Range.tokens.dividerColorReadOnly, _Range.tokens.dividerOpacityReadOnly, _Range2.StyledContentLeft, _Range2.StyledContentRight, _Range.tokens.textFieldColorReadOnly, _Range2.StyledContentRight, _Range.tokens.rightContentOpacityReadOnly);

package/styled-components/cjs/components/TextArea/TextArea.js

@@ -17,9 +17,10 @@ var _TextArea2 = /*#__PURE__*/require("./TextArea.tokens");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_clear/base");
-var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
-var _base5 = /*#__PURE__*/require("./variations/_hint-view/base");
-var _base6 = /*#__PURE__*/require("./variations/_hint-size/base");
+var _base4 = /*#__PURE__*/require("./variations/_read-only/base");
+var _base5 = /*#__PURE__*/require("./variations/_disabled/base");
+var _base6 = /*#__PURE__*/require("./variations/_hint-view/base");
+var _base7 = /*#__PURE__*/require("./variations/_hint-size/base");
 var _Hint = /*#__PURE__*/require("./ui/Hint/Hint");
 var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "leftHelperPlacement", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "titleCaption", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "clear", "hasDivider", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "onChange"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -358,18 +359,19 @@ var textAreaConfig = exports.textAreaConfig = {
       css: _base3.base,
       attrs: true
     },
-    disabled: {
+    readOnly: {
       css: _base4.base,
       attrs: true
     },
-    readOnly: {
+    disabled: {
+      css: _base5.base,
       attrs: true
     },
     hintView: {
-      css: _base5.base
+      css: _base6.base
     },
     hintSize: {
-      css: _base6.base
+      css: _base7.base
     }
   },
   defaults: {

package/styled-components/cjs/components/TextArea/TextArea.tokens.js

@@ -66,6 +66,9 @@ var tokens = exports.tokens = {
   /** Цвет текста для элемента textarea */
   inputColor: '--plasma-textarea-input-color',
   clearInputColor: '--plasma-textarea-input-clear-color',
+  inputColorReadOnly: '--plasma-textarea-input-color-read-only',
+  backgroundColorReadOnly: '--plasma-textarea-background-color-read-only',
+  readOnlyOpacity: '--plasma-textarea-read-only-opacity',
   /** Цвет текста для элемента textarea в состоянии focus */
   inputColorFocus: '--plasma-textarea-input-color-focus',
   /** Цвет каретки для элемента textarea */

package/styled-components/cjs/components/TextArea/variations/_read-only/base.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _TextArea = /*#__PURE__*/require("../../TextArea.styles");
+var _TextArea2 = /*#__PURE__*/require("../../TextArea.tokens");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{", "{color:var(", ");}:not(&.", "){", ",", "{background:transparent;position:relative;:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;background:var(", ");opacity:var(", ");z-index:-1;}:hover{background:transparent;}}", ":before{border-radius:var(", ");}", ":before{border-bottom-left-radius:var(", ");border-bottom-right-radius:var(", ");}}}"], _TextArea.StyledTextArea, _TextArea2.tokens.inputColorReadOnly, _TextArea2.classes.clear, _TextArea.StyledTextAreaWrapper, _TextArea.StyledHelpers, _TextArea2.tokens.backgroundColorReadOnly, _TextArea2.tokens.readOnlyOpacity, _TextArea.StyledTextAreaWrapper, _TextArea2.tokens.borderRadiusWithHelpers, _TextArea.StyledHelpers, _TextArea2.tokens.borderRadius, _TextArea2.tokens.borderRadius);

package/styled-components/cjs/components/TextArea/variations/_read-only/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/cjs/components/TextField/TextField.tokens.js

@@ -118,6 +118,7 @@ var tokens = exports.tokens = {
   textAfterMargin: '--plasma-textfield__after-text-margin',
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-textfield-disabled-opacity',
+  readOnlyOpacity: '--plasma-textfield-readonly-opacity',
   /** Токены для tooltip */
   hintMargin: '--plasma-textfield__hint-margin',
   hintTargetSize: '--plasma-textfield__hint-target-size',

package/styled-components/cjs/components/TextField/variations/_read-only/base.js

@@ -7,4 +7,4 @@ exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _TextField = /*#__PURE__*/require("../../TextField.tokens");
 var _TextField2 = /*#__PURE__*/require("../../TextField.styles");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&.", " ", "{&:before{background-color:var(", ");}}", ":hover{background-color:var(", ");}", ":focus-within ", ",", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}&.", " ", "{color:var(", ");}}"], _TextField2.InputWrapper, _TextField.tokens.colorReadOnly, /*#__PURE__*/String(_TextField.tokens.backgroundColorReadOnly), /*#__PURE__*/String(_TextField.tokens.borderWidth), /*#__PURE__*/String(_TextField.tokens.borderColorReadOnly), _TextField.classes.hasDivider, _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.dividerColorReadOnly), _TextField2.InputWrapper, _TextField.tokens.backgroundColorReadOnly, _TextField2.InputWrapper, _TextField2.InputPlaceholder, _TextField2.InputPlaceholder, _TextField.tokens.placeholderColorReadOnly, _TextField2.Input, _TextField.tokens.colorReadOnly, _TextField2.TitleCaption, _TextField.tokens.titleCaptionColorReadOnly, _TextField2.LeftHelper, _TextField.tokens.leftHelperColorReadOnly, _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelColorReadOnly);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&[readonly]{:not(&.", "){", "{position:relative;color:var(", ");background-color:transparent;box-shadow:inset 0 0 0 var(", ") var(", ");:before{position:absolute;content:'';top:0;left:0;right:0;bottom:0;border-radius:var(", ");background-color:var(", ");opacity:var(", ");z-index:-1;}:hover{background-color:transparent;}}}&.", " ", "{&:before{background-color:var(", ");}}", ":focus-within ", ",", "{color:var(", ");}", "{color:var(", ");cursor:default;min-width:unset;}", "{color:var(", ");}", "{color:var(", ");}", ":hover,", ":active{cursor:default;color:var(", ",var(", "));}&.", " ", "{color:var(", ");}}"], _TextField.classes.clear, _TextField2.InputWrapper, _TextField.tokens.colorReadOnly, /*#__PURE__*/String(_TextField.tokens.borderWidth), /*#__PURE__*/String(_TextField.tokens.borderColorReadOnly), _TextField.tokens.borderRadius, _TextField.tokens.backgroundColorReadOnly, _TextField.tokens.readOnlyOpacity, _TextField.classes.hasDivider, _TextField2.InputWrapper, /*#__PURE__*/String(_TextField.tokens.dividerColorReadOnly), _TextField2.InputWrapper, _TextField2.InputPlaceholder, _TextField2.InputPlaceholder, _TextField.tokens.placeholderColorReadOnly, _TextField2.Input, _TextField.tokens.colorReadOnly, _TextField2.TitleCaption, _TextField.tokens.titleCaptionColorReadOnly, _TextField2.LeftHelper, _TextField.tokens.leftHelperColorReadOnly, _TextField2.StyledContentRight, _TextField2.StyledContentRight, _TextField.tokens.contentSlotRightColor, _TextField.tokens.contentSlotColor, _TextField.classes.outerLabelPlacement, _TextField2.Label, _TextField.tokens.labelColorReadOnly);

package/styled-components/cjs/components/_Icon/Icon.assets/Lock.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Lock = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _path, _path2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var Lock = exports.Lock = function Lock(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", _extends({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M12.0001 18C13.1046 18 14.0001 17.1046 14.0001 16C14.0001 14.8954 13.1046 14 12.0001 14C10.8955 14 10.0001 14.8954 10.0001 16C10.0001 17.1046 10.8955 18 12.0001 18Z",
+    fill: "currentColor"
+  })), _path2 || (_path2 = /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.7501 7V10.0056C17.0393 10.0142 17.2842 10.0359 17.5087 10.0898C18.6971 10.3751 19.625 11.3029 19.9103 12.4913C20.0005 12.8672 20.0003 13.3001 20.0001 13.9028L20.0001 17.2814C20.0001 17.9548 20.0001 18.5055 19.9635 18.9531C19.9257 19.4163 19.8449 19.8347 19.6458 20.2255C19.3342 20.837 18.837 21.3342 18.2255 21.6458C17.8348 21.8449 17.4164 21.9256 16.9531 21.9634C16.5056 22 15.9549 22 15.2815 22H8.71861C8.04524 22 7.49454 22 7.04698 21.9634C6.58372 21.9256 6.16532 21.8449 5.77458 21.6458C5.16306 21.3342 4.66587 20.837 4.35428 20.2255C4.15519 19.8347 4.07445 19.4163 4.0366 18.9531C4.00004 18.5055 4.00004 17.9548 4.00005 17.2814L4.00003 13.9029C3.99978 13.3001 3.9996 12.8672 4.08985 12.4913C4.37515 11.3029 5.30299 10.3751 6.49135 10.0898C6.7159 10.0359 6.96077 10.0142 7.25005 10.0056V7C7.25005 4.37665 9.3767 2.25 12.0001 2.25C14.6234 2.25 16.7501 4.37665 16.7501 7ZM8.75005 7C8.75005 5.20507 10.2051 3.75 12.0001 3.75C13.795 3.75 15.2501 5.20507 15.2501 7V10H8.75005V7ZM6.84152 11.5484C7.02117 11.5052 7.25947 11.5 8.00005 11.5H16.0001C16.7406 11.5 16.9789 11.5052 17.1586 11.5484C17.7985 11.702 18.2981 12.2016 18.4517 12.8415C18.4948 13.0211 18.5001 13.2594 18.5001 14V17.25C18.5001 17.9624 18.4995 18.4517 18.4685 18.8309C18.4382 19.2014 18.3827 19.4004 18.3093 19.5445C18.1415 19.8738 17.8738 20.1415 17.5445 20.3093C17.4005 20.3827 17.2015 20.4382 16.831 20.4684C16.4517 20.4994 15.9625 20.5 15.2501 20.5H8.75005C8.03761 20.5 7.54839 20.4994 7.16913 20.4684C6.79863 20.4382 6.59961 20.3827 6.45557 20.3093C6.12628 20.1415 5.85857 19.8738 5.69079 19.5445C5.6174 19.4004 5.56189 19.2014 5.53162 18.8309C5.50063 18.4517 5.50005 17.9624 5.50005 17.25V14C5.50005 13.2594 5.50527 13.0211 5.5484 12.8415C5.70203 12.2016 6.20164 11.702 6.84152 11.5484Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/cjs/components/_Icon/Icons/IconChevronLeft.js

@@ -7,18 +7,23 @@ exports.IconChevronLeft = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _ChevronLeft = /*#__PURE__*/require("../Icon.assets/ChevronLeft");
 var _IconRoot = /*#__PURE__*/require("../IconRoot");
+var _excluded = ["size", "color", "className", "sizeCustomProperty"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var IconChevronLeft = exports.IconChevronLeft = function IconChevronLeft(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 's' : _ref$size,
     color = _ref.color,
     className = _ref.className,
-    sizeCustomProperty = _ref.sizeCustomProperty;
-  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, {
+    sizeCustomProperty = _ref.sizeCustomProperty,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
     className: className,
     size: size,
     color: color,
     icon: _ChevronLeft.ChevronLeft,
     sizeCustomProperty: sizeCustomProperty
-  });
+  }, rest));
 };

package/styled-components/cjs/components/_Icon/Icons/IconLock.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconLock = void 0;
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _Lock = /*#__PURE__*/require("../Icon.assets/Lock");
+var _IconRoot = /*#__PURE__*/require("../IconRoot");
+var _excluded = ["size", "color", "className", "sizeCustomValue"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var IconLock = exports.IconLock = function IconLock(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    color = _ref.color,
+    className = _ref.className,
+    sizeCustomValue = _ref.sizeCustomValue,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_IconRoot.IconRoot, _extends({
+    className: className,
+    sizeCustomValue: sizeCustomValue,
+    size: size,
+    color: color,
+    icon: _Lock.Lock
+  }, rest));
+};

package/styled-components/cjs/components/_Icon/index.js

@@ -159,6 +159,12 @@ Object.defineProperty(exports, "IconInfoCircleOutline", {
     return _IconInfoCircleOutline.IconInfoCircleOutline;
   }
 });
+Object.defineProperty(exports, "IconLock", {
+  enumerable: true,
+  get: function get() {
+    return _IconLock.IconLock;
+  }
+});
 Object.defineProperty(exports, "IconMic", {
   enumerable: true,
   get: function get() {
@@ -244,6 +250,7 @@ var _IconDisclosureRightWithOffset = /*#__PURE__*/require("./Icons/IconDisclosur
 var _IconDisclosureDownFill = /*#__PURE__*/require("./Icons/IconDisclosureDownFill");
 var _IconDisclosureDownWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureDownWithOffset");
 var _IconDisclosureUpWithOffset = /*#__PURE__*/require("./Icons/IconDisclosureUpWithOffset");
+var _IconLock = /*#__PURE__*/require("./Icons/IconLock");
 var _IconMic = /*#__PURE__*/require("./Icons/IconMic");
 var _IconChevronLeft = /*#__PURE__*/require("./Icons/IconChevronLeft");
 var _IconChevronDoubleLeft = /*#__PURE__*/require("./Icons/IconChevronDoubleLeft");

package/styled-components/cjs/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconButton } from '../IconButton/IconButton';

package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.config.js

@@ -25,7 +25,7 @@ var config = exports.config = {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Range.rangeTokens.disabledOpacity)
     },
     readOnly: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":0.4;", ":0.4;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _Range.rangeTokens.dividerOpacityReadOnly, _Range.rangeTokens.rightContentOpacityReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconChevronLeft } from '../../../../components/_Icon';
@@ -45,7 +45,10 @@ const meta: Meta<typeof Range> = {
             control: {
                 type: 'select',
             },
-            if: { arg: 'required', truthy: true },
+            if: {
+                arg: 'required',
+                truthy: true,
+            },
         },
         ...disableProps(['view']),
     },
@@ -76,10 +79,14 @@ const getSizeForIcon = (size) => {
     return size;
 };
 
-const ActionButton = ({ size }) => {
+const ActionButton = ({ size, readOnly }) => {
     return (
-        <IconButton view="clear" size={size}>
-            <IconChevronLeft color="inherit" size={getSizeForIcon(size)} />
+        <IconButton view="clear" size={size} disabled={readOnly}>
+            <IconChevronLeft
+                color={readOnly ? 'var(--text-secondary)' : 'inherit'}
+                size={getSizeForIcon(size)}
+                style={{ transform: 'rotate(180deg)' }}
+            />
         </IconButton>
     );
 };
@@ -115,7 +122,7 @@ const StoryDefault = ({
             firstValue={firstValue}
             secondValue={secondValue}
             contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
             firstTextfieldContentLeft={
                 enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
             }
@@ -266,7 +273,7 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: Sto
             firstValueSuccess={firstValueSuccess}
             secondValueSuccess={secondValueSuccess}
             contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-            contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
+            contentRight={enableContentRight ? <ActionButton size={size} readOnly={rest.readOnly} /> : undefined}
             onChangeFirstValue={(e) => {
                 handleChangeValue(
                     e,

package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.config.js

@@ -35,6 +35,9 @@ var config = exports.config = {
     clear: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     },
+    readOnly: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--surface-transparent-primary);", ":var(--text-primary);"], _TextArea.textAreaTokens.readOnlyOpacity, _TextArea.textAreaTokens.backgroundColorReadOnly, _TextArea.textAreaTokens.inputColorReadOnly)
+    },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);"], _TextArea.textAreaTokens.disabledOpacity, _TextArea.textAreaTokens.inputColorDisabled, _TextArea.textAreaTokens.dividerColorReadOnly, _TextArea.textAreaTokens.titleCaptionColorReadOnly)
     }

package/styled-components/cjs/examples/plasma_b2c/components/TextArea/TextArea.stories.tsx

@@ -8,6 +8,7 @@ import { textAreaConfig } from '../../../../components/TextArea';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import type { PopoverPlacement } from '../Popover/Popover';
+import { IconLock } from '../../../../components/_Icon';
 
 import { config } from './TextArea.config';
 import { TextArea } from './TextArea';
@@ -38,6 +39,16 @@ const placements: Array<PopoverPlacement> = [
     'auto',
 ];
 
+const getIcon = (IconComponent: React.ReactElement, size: string, readOnly = false) => {
+    const iconSize = size === 'xs' ? 'xs' : 's';
+
+    if (readOnly) {
+        return <IconLock size={iconSize} color="var(--text-secondary)" style={{ opacity: 0.4 }} />;
+    }
+
+    return <IconComponent size={iconSize} color="inherit" />;
+};
+
 type StoryTextAreaPropsCustom = {
     hasHint?: boolean;
     enableContentRight?: boolean;
@@ -61,19 +72,25 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'optional', truthy: false },
+            if: {
+                arg: 'optional',
+                truthy: false,
+            },
         },
         optional: {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'required', truthy: false },
+            if: {
+                arg: 'required',
+                truthy: false,
+            },
         },
         size: {
             options: sizes,
             defaultValue: 'm',
             control: {
-                type: 'select',
+                type: 'inline-radio',
             },
         },
         view: {
@@ -92,19 +109,28 @@ const meta: Meta<StoryTextAreaProps> = {
             control: {
                 type: 'boolean',
             },
-            if: { arg: 'clear', truthy: true },
+            if: {
+                arg: 'clear',
+                truthy: true,
+            },
         },
         cols: {
             control: {
                 type: 'number',
             },
-            if: { arg: 'clear', truthy: false },
+            if: {
+                arg: 'clear',
+                truthy: false,
+            },
         },
         rows: {
             control: {
                 type: 'number',
             },
-            if: { arg: 'clear', truthy: false },
+            if: {
+                arg: 'clear',
+                truthy: false,
+            },
         },
         hasHint: {
             control: {
@@ -113,47 +139,65 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         hintText: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintView: {
             options: hintViews,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintSize: {
             options: hintSizes,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintTrigger: {
             options: hintTriggers,
             control: {
                 type: 'inline-radio',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintPlacement: {
             options: placements,
             control: {
                 type: 'select',
             },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
             mappers: placements,
         },
         hintHasArrow: {
             control: { type: 'boolean' },
-            if: { arg: 'hasHint', truthy: true },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         hintWidth: {
             control: { type: 'text' },
-            if: { arg: 'hasHint', truthy: true },
-        },
-        helperText: {
-            control: { type: 'text' },
+            if: {
+                arg: 'hasHint',
+                truthy: true,
+            },
         },
         width: {
             control: { type: 'text' },
@@ -172,6 +216,7 @@ const meta: Meta<StoryTextAreaProps> = {
         },
         ...disableProps([
             'helperBlock',
+            'helperText',
             '$isFocused',
             'contentRight',
             'autoComplete',
@@ -195,6 +240,7 @@ const meta: Meta<StoryTextAreaProps> = {
             'hintOffset',
             'hintContentLeft',
             'hintView',
+            'hintOpened',
         ]),
     },
     args: {
@@ -238,19 +284,24 @@ const onBlur = action('onBlur');
 const StoryDefault = (props: StoryTextAreaProps) => {
     const [value, setValue] = useState('Значение поля');
 
-    const iconSize = props.size === 'xs' ? 'xs' : 's';
-
     return (
         <TextArea
             value={value}
-            contentRight={props.enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={
+                props.enableContentRight || props.readOnly
+                    ? getIcon(IconPlaceholder, props.size, props.readOnly)
+                    : undefined
+            }
             onChange={(e) => {
                 setValue(e.target.value);
                 onChange(e);
             }}
             onFocus={onFocus}
             onBlur={onBlur}
-            style={{ width: '70%', margin: '0 auto' }}
+            style={{
+                width: '70%',
+                margin: '0 auto',
+            }}
             {...props}
         />
     );