@salutejs/plasma-new-hope 0.195.0-canary.1574.11921374356.0 → 0.195.1-canary.1561.11932328624.0

package/emotion/cjs/examples/plasma_web/components/Select/Select.stories.tsx

@@ -44,6 +44,12 @@ const meta: Meta<StorySelectProps> = {
                 eq: 'textfield-like',
             },
         },
+        placeholder: {
+            if: {
+                arg: 'target',
+                eq: 'textfield-like',
+            },
+        },
         chipView: {
             control: 'select',
             options: chip,
@@ -79,6 +85,24 @@ const meta: Meta<StorySelectProps> = {
                 eq: 'textfield-like',
             },
         },
+        requiredPlacement: {
+            options: ['left', 'right'],
+            control: {
+                type: 'select',
+            },
+        },
+        required: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'optional', truthy: false },
+        },
+        optional: {
+            control: {
+                type: 'boolean',
+            },
+            if: { arg: 'required', truthy: false },
+        },
     },
     args: {
         target: 'textfield-like',
@@ -93,6 +117,9 @@ const meta: Meta<StorySelectProps> = {
         isTargetAmount: false,
         variant: 'normal',
         disabled: false,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
     },
     parameters: {
         controls: {
@@ -113,6 +140,9 @@ const meta: Meta<StorySelectProps> = {
                 'listWidth',
                 'listOverflow',
                 'listHeight',
+                'optional',
+                'required',
+                'requiredPlacement',
             ],
         },
     },

package/emotion/es/components/Autocomplete/Autocomplete.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "defaultValue", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -23,7 +23,6 @@ import { useKeyNavigation } from './hooks/useKeyboardNavigation';
 export var autocompleteRoot = function autocompleteRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var outerValue = _ref.value,
-      defaultValue = _ref.defaultValue,
       onChange = _ref.onChange,
       suggestions = _ref.suggestions,
       view = _ref.view,
@@ -111,11 +110,6 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
         type: 'reset'
       });
     }, [value]);
-    useDidMountEffect(function () {
-      if (defaultValue) {
-        setInnerValue(defaultValue);
-      }
-    }, [defaultValue]);
     return /*#__PURE__*/React.createElement(Root, {
       view: view,
       size: size,

package/emotion/es/components/Badge/Badge.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
+var _excluded = ["children", "className", "style", "text", "contentLeft", "contentRight", "size", "view", "customColor", "customBackgroundColor", "pilled", "transparent", "clear", "maxWidth"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -16,16 +16,20 @@ import { base as pilledCSS } from './variations/_pilled/base';
 import { base as transparentCSS } from './variations/_transparent/base';
 import { base as clearCSS } from './variations/_clear/base';
 import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';
-import { classes } from './Badge.tokens';
+import { classes, privateTokens } from './Badge.tokens';
 export var badgeRoot = function badgeRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
+    var _StyledContentLeft, _StyledContentMain, _StyledContentMain2, _StyledContentRight;
     var children = props.children,
       className = props.className,
+      style = props.style,
       text = props.text,
       contentLeft = props.contentLeft,
       contentRight = props.contentRight,
       size = props.size,
       view = props.view,
+      customColor = props.customColor,
+      customBackgroundColor = props.customBackgroundColor,
       _props$pilled = props.pilled,
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       _props$transparent = props.transparent,
@@ -40,19 +44,25 @@ export var badgeRoot = function badgeRoot(Root) {
     var clearClass = clear ? classes.badgeClear : undefined;
     var truncateClass = maxWidth !== 'auto' ? classes.badgeTruncate : undefined;
     var txt = !text && typeof children === 'string' ? children : text;
+    var iconOnlyClass = !txt && contentLeft ? classes.iconOnly : undefined;
+    var BadgeContent = function BadgeContent() {
+      if (contentLeft) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, _StyledContentLeft || (_StyledContentLeft = /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft)), txt ? _StyledContentMain || (_StyledContentMain = /*#__PURE__*/React.createElement(StyledContentMain, null, txt)) : children);
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, txt ? _StyledContentMain2 || (_StyledContentMain2 = /*#__PURE__*/React.createElement(StyledContentMain, null, txt)) : children, contentRight && (_StyledContentRight || (_StyledContentRight = /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight))));
+    };
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
-      className: cx(pilledClass, transparentClass, clearClass, truncateClass, className),
+      className: cx(pilledClass, transparentClass, clearClass, truncateClass, iconOnlyClass, className),
       view: view,
       size: size,
       pilled: pilled,
       transparent: transparent,
-      clear: clear
-    }, rest, {
-      style: _objectSpread(_objectSpread({}, rest.style), {}, {
+      clear: clear,
+      style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty({
         maxWidth: maxWidth
-      })
-    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
+      }, privateTokens.customBackground, customBackgroundColor), privateTokens.customColor, customColor))
+    }, rest), /*#__PURE__*/React.createElement(BadgeContent, null));
   });
 };
 export var badgeConfig = {

package/emotion/es/components/Badge/Badge.template-doc.mdx

@@ -52,16 +52,7 @@ export function App() {
 ```
 
 ### Вид badge
-Вид `badge` задается с помощью свойства `view`. Возможные значения свойства `view`:
-
-+ `"primary"` – основной badge;
-+ `"accent"` – бейдж акцентного цвета;
-+ `"positive"` – успешное завершение;
-+ `"warning"` – предупреждение;
-+ `"negative"` – ошибка;
-+ `"dark"` – темный badge;
-+ `"light"` – светлый badge.
-
+Вид `badge` задается с помощью свойства `view`.
 Так же на вид badge влияет свойства `transparent` и `clear`.
 
 ```tsx live 
@@ -72,7 +63,7 @@ export function App() {
     const Badges = ({transparent, clear}) => {
         return (
             <div style=\{{ display: 'flex', gap: '0.5rem' }}>
-                <Badge text="Бейдж" size="l" view="primary" transparent={transparent} clear={clear} />
+                <Badge text="Бейдж" size="l" view="default" transparent={transparent} clear={clear} />
                 <Badge text="Бейдж" size="l" view="accent" transparent={transparent} clear={clear} />
                 <Badge text="Бейдж" size="l" view="positive" transparent={transparent} clear={clear} />
                 <Badge text="Бейдж" size="l" view="warning" transparent={transparent} clear={clear} />
@@ -94,7 +85,8 @@ export function App() {
 ```
 
 ### Иконка слева / справа
-В левой и/или правой части badge можно отобразить иконку:
+В левой или правой части badge можно отобразить иконку. 
+Если же нужен Badge с иконкой без текста, нужно использовать `contentLeft`.
 
 ```tsx live
 import React from 'react';
@@ -107,17 +99,49 @@ export function App() {
             <Badge 
                 text="Бейдж" 
                 size="l"   
-                view="primary" 
+                view="default" 
                 contentLeft={
                     <IconEye color="inherit" size="xs" />
-                } />
+                } 
+            />
             <Badge 
                 text="Бейдж" 
                 size="l"   
-                view="primary" 
+                view="default" 
                 contentRight={
                     <IconEye color="inherit" size="xs" />
-                } />
+                }
+            />
+            <Badge 
+                size="l"   
+                view="default" 
+                contentLeft={
+                    <IconEye color="inherit" size="xs" />
+                } 
+            />
+        </div>
+    );
+}
+```
+
+### Задание цвета текста и фона
+Цвет текста и фона можно задать с помощью свойств 
+`customColor` и `customBackgroundColor` соответственно.
+
+```tsx live
+import React from 'react';
+import { Badge } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <Badge 
+                text="Бейдж" 
+                size="l"   
+                view="default" 
+                customColor="antiquewhite"
+                customBackgroundColor="darkolivegreen" 
+            />
         </div>
     );
 }

package/emotion/es/components/Badge/Badge.tokens.js

@@ -2,7 +2,12 @@ export var classes = {
   badgePilled: 'badge-pilled',
   badgeTransparent: 'badge-transparent',
   badgeClear: 'badge-clear',
-  badgeTruncate: 'badge-truncate'
+  badgeTruncate: 'badge-truncate',
+  iconOnly: 'badge-icon-only'
+};
+export var privateTokens = {
+  customBackground: '--plasma-badge-custom-background',
+  customColor: '--plasma-badge-custom-color'
 };
 export var tokens = {
   background: '--plasma-badge-background',
@@ -10,13 +15,12 @@ export var tokens = {
   backgroundTransparent: '--plasma-badge-background-transparent',
   colorTransparent: '--plasma-badge-color-transparent',
   colorClear: '--plasma-badge-color-clear',
+  backgroundClear: '--plasma-badge-background-clear',
   borderRadius: '--plasma-badge-border-radius',
   pilledBorderRadius: '--plasma-badge-pilled-border-radius',
   height: '--plasma-badge-height',
-  paddingTop: '--plasma-badge-padding-top',
-  paddingRight: '--plasma-badge-padding-right',
-  paddingBottom: '--plasma-badge-padding-bottom',
-  paddingLeft: '--plasma-badge-padding-left',
+  padding: '--plasma-badge-padding',
+  paddingIconOnly: '--plasma-badge-padding-icon-only',
   fontFamily: '--plasma-badge-font-family',
   fontSize: '--plasma-badge-font-size',
   fontStyle: '--plasma-badge-font-style',

package/emotion/es/components/Badge/variations/_clear/base.js

@@ -1,3 +1,3 @@
 import { css } from '@emotion/react';
-import { classes, tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css("&.", classes.badgeClear, "{color:var(", tokens.colorClear, ");background-color:transparent;padding:0;};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fY2xlYXIvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9CYWRnZS92YXJpYXRpb25zL19jbGVhci9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuLi8uLi9CYWRnZS50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAmLiR7Y2xhc3Nlcy5iYWRnZUNsZWFyfSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuY29sb3JDbGVhcn0pO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICB9XG5gO1xuIl19 */"));
+import { classes, privateTokens, tokens } from '../../Badge.tokens';
+export var base = /*#__PURE__*/css("&.", classes.badgeClear, "{color:var(", privateTokens.customColor, ", var(", tokens.colorClear, "));background-color:var(", privateTokens.customBackground, ", var(", tokens.backgroundClear, "));};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fY2xlYXIvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9CYWRnZS92YXJpYXRpb25zL19jbGVhci9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCBwcml2YXRlVG9rZW5zLCB0b2tlbnMgfSBmcm9tICcuLi8uLi9CYWRnZS50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAmLiR7Y2xhc3Nlcy5iYWRnZUNsZWFyfSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHtwcml2YXRlVG9rZW5zLmN1c3RvbUNvbG9yfSwgdmFyKCR7dG9rZW5zLmNvbG9yQ2xlYXJ9KSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3ByaXZhdGVUb2tlbnMuY3VzdG9tQmFja2dyb3VuZH0sIHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kQ2xlYXJ9KSk7XG4gICAgfVxuYDtcbiJdfQ== */"));

package/emotion/es/components/Badge/variations/_size/base.js

@@ -1,3 +1,4 @@
 import { css } from '@emotion/react';
-import { tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css("font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.letterSpacing, ");line-height:var(", tokens.lineHeight, ");border-radius:var(", tokens.borderRadius, ");height:var(", tokens.height, ");padding-top:var(", tokens.paddingTop, ");padding-right:var(", tokens.paddingRight, ");padding-bottom:var(", tokens.paddingBottom, ");padding-left:var(", tokens.paddingLeft, ");;label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fc2l6ZS9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0JhZGdlL3ZhcmlhdGlvbnMvX3NpemUvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi4vLi4vQmFkZ2UudG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZm9udC1mYW1pbHk6IHZhcigke3Rva2Vucy5mb250RmFtaWx5fSk7XG4gICAgZm9udC1zaXplOiB2YXIoJHt0b2tlbnMuZm9udFNpemV9KTtcbiAgICBmb250LXN0eWxlOiB2YXIoJHt0b2tlbnMuZm9udFN0eWxlfSk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigke3Rva2Vucy5mb250V2VpZ2h0fSk7XG4gICAgbGV0dGVyLXNwYWNpbmc6IHZhcigke3Rva2Vucy5sZXR0ZXJTcGFjaW5nfSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigke3Rva2Vucy5saW5lSGVpZ2h0fSk7XG5cbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSk7XG5cbiAgICBoZWlnaHQ6IHZhcigke3Rva2Vucy5oZWlnaHR9KTtcblxuICAgIHBhZGRpbmctdG9wOiB2YXIoJHt0b2tlbnMucGFkZGluZ1RvcH0pO1xuICAgIHBhZGRpbmctcmlnaHQ6IHZhcigke3Rva2Vucy5wYWRkaW5nUmlnaHR9KTtcbiAgICBwYWRkaW5nLWJvdHRvbTogdmFyKCR7dG9rZW5zLnBhZGRpbmdCb3R0b219KTtcbiAgICBwYWRkaW5nLWxlZnQ6IHZhcigke3Rva2Vucy5wYWRkaW5nTGVmdH0pO1xuYDtcbiJdfQ== */"));
+import { classes, tokens } from '../../Badge.tokens';
+import { StyledContentLeft } from '../../Badge.styles';
+export var base = /*#__PURE__*/css("font-family:var(", tokens.fontFamily, ");font-size:var(", tokens.fontSize, ");font-style:var(", tokens.fontStyle, ");font-weight:var(", tokens.fontWeight, ");letter-spacing:var(", tokens.letterSpacing, ");line-height:var(", tokens.lineHeight, ");border-radius:var(", tokens.borderRadius, ");height:var(", tokens.height, ");padding:var(", tokens.padding, ");&.", classes.iconOnly, "{padding:var(", tokens.paddingIconOnly, ");", StyledContentLeft, "{margin:0;}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fc2l6ZS9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUt1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0JhZGdlL3ZhcmlhdGlvbnMvX3NpemUvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY2xhc3NlcywgdG9rZW5zIH0gZnJvbSAnLi4vLi4vQmFkZ2UudG9rZW5zJztcbmltcG9ydCB7IFN0eWxlZENvbnRlbnRMZWZ0IH0gZnJvbSAnLi4vLi4vQmFkZ2Uuc3R5bGVzJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZm9udC1mYW1pbHk6IHZhcigke3Rva2Vucy5mb250RmFtaWx5fSk7XG4gICAgZm9udC1zaXplOiB2YXIoJHt0b2tlbnMuZm9udFNpemV9KTtcbiAgICBmb250LXN0eWxlOiB2YXIoJHt0b2tlbnMuZm9udFN0eWxlfSk7XG4gICAgZm9udC13ZWlnaHQ6IHZhcigke3Rva2Vucy5mb250V2VpZ2h0fSk7XG4gICAgbGV0dGVyLXNwYWNpbmc6IHZhcigke3Rva2Vucy5sZXR0ZXJTcGFjaW5nfSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigke3Rva2Vucy5saW5lSGVpZ2h0fSk7XG5cbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSk7XG5cbiAgICBoZWlnaHQ6IHZhcigke3Rva2Vucy5oZWlnaHR9KTtcblxuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5wYWRkaW5nfSk7XG5cbiAgICAmLiR7Y2xhc3Nlcy5pY29uT25seX0ge1xuICAgICAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMucGFkZGluZ0ljb25Pbmx5fSk7XG5cbiAgICAgICAgJHtTdHlsZWRDb250ZW50TGVmdH0ge1xuICAgICAgICAgICAgbWFyZ2luOiAwO1xuICAgICAgICB9XG4gICAgfVxuYDtcbiJdfQ== */"));

package/emotion/es/components/Badge/variations/_transparent/base.js

@@ -1,3 +1,3 @@
 import { css } from '@emotion/react';
-import { classes, tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css("&.", classes.badgeTransparent, "{color:var(", tokens.colorTransparent, ");background-color:var(", tokens.backgroundTransparent, ");};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fdHJhbnNwYXJlbnQvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9CYWRnZS92YXJpYXRpb25zL190cmFuc3BhcmVudC9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCB0b2tlbnMgfSBmcm9tICcuLi8uLi9CYWRnZS50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAmLiR7Y2xhc3Nlcy5iYWRnZVRyYW5zcGFyZW50fSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHt0b2tlbnMuY29sb3JUcmFuc3BhcmVudH0pO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZFRyYW5zcGFyZW50fSk7XG4gICAgfVxuYDtcbiJdfQ== */"));
+import { classes, privateTokens, tokens } from '../../Badge.tokens';
+export var base = /*#__PURE__*/css("&.", classes.badgeTransparent, "{color:var(", privateTokens.customColor, ", var(", tokens.colorTransparent, "));background-color:var(", privateTokens.customBackground, ", var(", tokens.backgroundTransparent, "));};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fdHJhbnNwYXJlbnQvYmFzZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9CYWRnZS92YXJpYXRpb25zL190cmFuc3BhcmVudC9iYXNlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBjbGFzc2VzLCBwcml2YXRlVG9rZW5zLCB0b2tlbnMgfSBmcm9tICcuLi8uLi9CYWRnZS50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAmLiR7Y2xhc3Nlcy5iYWRnZVRyYW5zcGFyZW50fSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHtwcml2YXRlVG9rZW5zLmN1c3RvbUNvbG9yfSwgdmFyKCR7dG9rZW5zLmNvbG9yVHJhbnNwYXJlbnR9KSk7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3ByaXZhdGVUb2tlbnMuY3VzdG9tQmFja2dyb3VuZH0sIHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kVHJhbnNwYXJlbnR9KSk7XG4gICAgfVxuYDtcbiJdfQ== */"));

package/emotion/es/components/Badge/variations/_view/base.js

@@ -1,3 +1,3 @@
 import { css } from '@emotion/react';
-import { tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css("color:var(", tokens.color, ");background-color:var(", tokens.background, ");;label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0JhZGdlL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi4vLi4vQmFkZ2UudG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgY29sb3I6IHZhcigke3Rva2Vucy5jb2xvcn0pO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kfSk7XG5gO1xuIl19 */"));
+import { privateTokens, tokens } from '../../Badge.tokens';
+export var base = /*#__PURE__*/css("color:var(", privateTokens.customColor, ", var(", tokens.color, "));background-color:var(", privateTokens.customBackground, ", var(", tokens.background, "));;label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvQmFkZ2UvdmFyaWF0aW9ucy9fdmlldy9iYXNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUl1QiIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0JhZGdlL3ZhcmlhdGlvbnMvX3ZpZXcvYmFzZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgcHJpdmF0ZVRva2VucywgdG9rZW5zIH0gZnJvbSAnLi4vLi4vQmFkZ2UudG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgY29sb3I6IHZhcigke3ByaXZhdGVUb2tlbnMuY3VzdG9tQ29sb3J9LCB2YXIoJHt0b2tlbnMuY29sb3J9KSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7cHJpdmF0ZVRva2Vucy5jdXN0b21CYWNrZ3JvdW5kfSwgdmFyKCR7dG9rZW5zLmJhY2tncm91bmR9KSk7XG5gO1xuIl19 */"));

package/emotion/es/components/Select/Select.js

@@ -30,7 +30,7 @@ export var selectRoot = function selectRoot(Root) {
     var outerValue = props.value,
       outerOnChange = props.onChange,
       _props$target = props.target,
-      _target = _props$target === void 0 ? 'textfield-like' : _props$target,
+      target = _props$target === void 0 ? 'textfield-like' : _props$target,
       items = props.items,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
@@ -95,7 +95,14 @@ export var selectRoot = function selectRoot(Root) {
     var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value.toString()) || '';
     var closeAfterSelect = outerCloseAfterSelect !== null && outerCloseAfterSelect !== void 0 ? outerCloseAfterSelect : !props.multiselect;
     var treeId = safeUseId();
-    var view = _target === 'textfield-like' && disabled ? 'default' : getView(status, outerView);
+    var view = target === 'textfield-like' && disabled ? 'default' : getView(status, outerView);
+
+    // Собираем объект с пропсами для required и прокидываем их напрямую в компонент Textfield.
+    var requiredProps = props.target === 'button-like' ? undefined : {
+      required: props.required,
+      requiredPlacement: props.requiredPlacement,
+      optional: props.optional
+    };
     var targetRef = useOutsideClick(function () {
       if (!isCurrentListOpen) {
         return;
@@ -286,7 +293,6 @@ export var selectRoot = function selectRoot(Root) {
       target: function target(referenceRef) {
         return /*#__PURE__*/React.createElement(Target, {
           ref: ref,
-          target: _target,
           value: value,
           opened: isCurrentListOpen,
           valueToItemMap: valueToItemMap,
@@ -310,7 +316,8 @@ export var selectRoot = function selectRoot(Root) {
           onChange: onChange,
           labelToItemMap: labelToItemMap,
           chipView: chipView,
-          separator: separator
+          separator: separator,
+          requiredProps: requiredProps
         });
       }
     }, /*#__PURE__*/React.createElement(Root, _extends({

package/emotion/es/components/Select/Select.tokens.js

@@ -71,7 +71,6 @@ export var tokens = {
   textFieldBorderColorFocus: '--plasma-select-textfield-border-color-focus',
   textFieldPlaceholderColor: '--plasma-select-textfield-placeholder-color',
   textFieldPlaceholderColorFocus: '--plasma-select-textfield-placeholder-color-focus',
-  textFieldOptionalColor: '--plasma-select-textfield-optional-color',
   textFieldHeight: '--plasma-select-textfield-height',
   textFieldBorderWidth: '--plasma-select-textfield-border-width',
   textFieldBorderRadius: '--plasma-select-textfield-border-radius',
@@ -155,6 +154,17 @@ export var tokens = {
   textFieldChipLineHeight: '--plasma-select-textfield-chip-line-height',
   textFieldChipClearContentMarginLeft: '--plasma-select-textfield-chip-clear-content-margin-left',
   textFieldChipClearContentMarginRight: '--plasma-select-textfield-chip-clear-content-margin-right',
+  textFieldIndicatorColor: '--plasma-select-new-textfield-indicator-color',
+  textFieldIndicatorSizeInner: '--plasma-select-new-textfield-indicator-size-inner',
+  textFieldIndicatorSizeOuter: '--plasma-select-new-textfield-indicator-size-outer',
+  textFieldIndicatorLabelPlacementInner: '--plasma-select-new-textfield-indicator-placement-inner',
+  textFieldIndicatorLabelPlacementOuter: '--plasma-select-new-textfield-indicator-placement-outer',
+  textFieldIndicatorLabelPlacementInnerRight: '--plasma-select-new-textfield-indicator-placement-inner-right',
+  textFieldIndicatorLabelPlacementOuterRight: '--plasma-select-new-textfield-indicator-placement-outer-right',
+  textFieldClearIndicatorLabelPlacementInner: '--plasma-select-new-textfield-clear-indicator-placement-inner',
+  textFieldClearIndicatorLabelPlacementInnerRight: '--plasma-select-new-textfield-clear-indicator-placement-inner-right',
+  textFieldClearIndicatorHintInnerRight: '--plasma-select-new-textfield-clear-indicator-hint-placement-inner-right',
+  textFieldOptionalColor: '--plasma-select-new-textfield-optional-color',
   textFieldFocusColor: '--plasma-select-textfield-focus-color',
   disclosureIconColor: '--plasma-select-disclosure-icon-color',
   disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover'

package/emotion/es/components/Select/ui/Target/Target.js

@@ -3,7 +3,6 @@ import { useForkRef } from '@salutejs/plasma-core';
 import { Button, Textfield } from './ui';
 export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    target = _ref.target,
     opened = _ref.opened,
     valueToItemMap = _ref.valueToItemMap,
     label = _ref.label,
@@ -26,7 +25,8 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onChange = _ref.onChange,
     labelToItemMap = _ref.labelToItemMap,
     chipView = _ref.chipView,
-    separator = _ref.separator;
+    separator = _ref.separator,
+    requiredProps = _ref.requiredProps;
   var buttonRef = useForkRef(ref, inputWrapperRef);
   if (selectProps.renderTarget) {
     return /*#__PURE__*/React.createElement("div", {
@@ -35,7 +35,7 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return valueToItemMap.get(value);
     }) : valueToItemMap.get(value)));
   }
-  return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
+  return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     ref: buttonRef,
     opened: opened,
     value: value,
@@ -72,6 +72,7 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderValue: renderValue,
     onChange: onChange,
     labelToItemMap: labelToItemMap,
-    chipView: chipView
+    chipView: chipView,
+    requiredProps: requiredProps
   });
 });

package/emotion/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -32,7 +32,8 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderValue = _ref.renderValue,
     onChange = _ref.onChange,
     labelToItemMap = _ref.labelToItemMap,
-    chipView = _ref.chipView;
+    chipView = _ref.chipView,
+    requiredProps = _ref.requiredProps;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
   var getChips = function getChips() {
     if (multiselect && Array.isArray(value)) {
@@ -113,5 +114,5 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // TODO: #1547
     ,
     _forceChipManipulationWithReadonly: true
-  }));
+  }, requiredProps));
 });