@salutejs/plasma-new-hope 0.142.0-canary.1421.10790809666.0 → 0.142.0-canary.1424.10789422667.0

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

@@ -13,13 +13,13 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
@@ -31,6 +31,9 @@ var config = exports.config = {
     },
     transparent: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
+    },
+    clear: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 import type { StoryObj, Meta } from '@storybook/react';
 
@@ -23,13 +23,25 @@ const meta: Meta<typeof Badge> = {
                 type: 'select',
             },
         },
+        pilled: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
+        transparent: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Badge>;
+type StoryProps = ComponentProps<typeof Badge> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+type Story = StoryObj<StoryProps>;
 
 const BellIcon = (props) => (
     <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
@@ -41,16 +53,36 @@ const BellIcon = (props) => (
 );
 
 export const Default: Story = {
+    argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentRight', truthy: false },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentLeft', truthy: false },
+        },
+    },
     args: {
         text: 'Hello',
         view: 'default',
         size: 'm',
+        enableContentLeft: false,
+        enableContentRight: false,
         pilled: false,
         transparent: false,
+        clear: false,
     },
-};
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
+        const iconSize = size === 'l' ? '1rem' : '0.75rem';
 
-export const WithIcon: Story = {
-    args: { ...Default.args },
-    render: (args) => <Badge contentLeft={<BellIcon width="1rem" height="1rem" />} {...args} />,
+        return (
+            <Badge
+                contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                size={size}
+                {...rest}
+            />
+        );
+    },
 };

package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.config.js

@@ -13,13 +13,13 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent),
-      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear),
+      light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
@@ -31,6 +31,9 @@ var config = exports.config = {
     },
     transparent: {
       "true": /*#__PURE__*/(0, _styledComponents.css)([""])
+    },
+    clear: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 import type { StoryObj, Meta } from '@storybook/react';
 
@@ -8,6 +8,7 @@ import { Badge } from './Badge';
 
 const meta: Meta<typeof Badge> = {
     title: 'plasma_web/Badge',
+    component: Badge,
     decorators: [WithTheme],
     argTypes: {
         size: {
@@ -22,13 +23,25 @@ const meta: Meta<typeof Badge> = {
                 type: 'select',
             },
         },
+        pilled: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
+        transparent: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Badge>;
+type StoryProps = ComponentProps<typeof Badge> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+type Story = StoryObj<StoryProps>;
 
 const BellIcon = (props) => (
     <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
@@ -40,16 +53,36 @@ const BellIcon = (props) => (
 );
 
 export const Default: Story = {
+    argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentRight', truthy: false },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentLeft', truthy: false },
+        },
+    },
     args: {
         text: 'Hello',
         view: 'default',
         size: 'm',
+        enableContentLeft: false,
+        enableContentRight: false,
         pilled: false,
         transparent: false,
+        clear: false,
     },
-};
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
+        const iconSize = size === 'l' ? '1rem' : '0.75rem';
 
-export const WithIcon: Story = {
-    args: { ...Default.args },
-    render: (args) => <Badge contentLeft={<BellIcon width="1rem" height="1rem" />} {...args} />,
+        return (
+            <Badge
+                contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                size={size}
+                {...rest}
+            />
+        );
+    },
 };

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

@@ -12,8 +12,6 @@ var _exportNames = {
   IS_REACT_18: true,
   safeUseId: true,
   isNumber: true,
-  mergeRefs: true,
-  setRefList: true,
   isEmpty: true
 };
 Object.defineProperty(exports, "IS_REACT_18", {
@@ -53,30 +51,17 @@ Object.defineProperty(exports, "isNumber", {
     return _isNumber.isNumber;
   }
 });
-Object.defineProperty(exports, "mergeRefs", {
-  enumerable: true,
-  get: function get() {
-    return _setRefList.mergeRefs;
-  }
-});
 Object.defineProperty(exports, "safeUseId", {
   enumerable: true,
   get: function get() {
     return _react.safeUseId;
   }
 });
-Object.defineProperty(exports, "setRefList", {
-  enumerable: true,
-  get: function get() {
-    return _setRefList.setRefList;
-  }
-});
 var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
 var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
 var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
 var _react = /*#__PURE__*/require("./react");
 var _isNumber = /*#__PURE__*/require("./isNumber");
-var _setRefList = /*#__PURE__*/require("./setRefList");
 var _isEmpty = /*#__PURE__*/require("./isEmpty");
 var _getPopoverPlacement = /*#__PURE__*/require("./getPopoverPlacement");
 Object.keys(_getPopoverPlacement).forEach(function (key) {

package/styled-components/es/components/Badge/Badge.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent"];
+var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear"];
 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; }
@@ -8,6 +8,7 @@ import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 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';
 export var badgeRoot = function badgeRoot(Root) {
@@ -23,17 +24,21 @@ export var badgeRoot = function badgeRoot(Root) {
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       _props$transparent = props.transparent,
       transparent = _props$transparent === void 0 ? false : _props$transparent,
+      _props$clear = props.clear,
+      clear = _props$clear === void 0 ? false : _props$clear,
       rest = _objectWithoutProperties(props, _excluded);
     var pilledClass = pilled ? classes.badgePilled : undefined;
     var transparentClass = transparent ? classes.badgeTransparent : undefined;
+    var clearClass = clear ? classes.badgeClear : undefined;
     var txt = !text && typeof children === 'string' ? children : text;
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
-      className: cx(pilledClass, transparentClass, className),
+      className: cx(pilledClass, transparentClass, clearClass, className),
       view: view,
       size: size,
       pilled: pilled,
-      transparent: transparent
+      transparent: transparent,
+      clear: clear
     }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
   });
 };
@@ -56,6 +61,10 @@ export var badgeConfig = {
     transparent: {
       css: transparentCSS,
       attrs: true
+    },
+    clear: {
+      css: clearCSS,
+      attrs: true
     }
   },
   defaults: {

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

@@ -60,41 +60,32 @@ export function App() {
 + `"dark"` – темный badge;
 + `"light"` – светлый badge.
 
-```tsx live 
-import React from 'react';
-import { Badge } from '@salutejs/{{ package }}';
-
-export function App() {
-    return (
-        <div>
-            <Badge text="Бейдж" size="l" view="primary" />
-            <Badge text="Бейдж" size="l" view="accent" />
-            <Badge text="Бейдж" size="l" view="positive" />
-            <Badge text="Бейдж" size="l" view="warning" />
-            <Badge text="Бейдж" size="l" view="negative" />
-            <Badge text="Бейдж" size="l" view="dark" />
-            <Badge text="Бейдж" size="l" view="light" />
-        </div>
-    );
-}
-```
-
-Так же на вид badge влияет свойство `transparent`:
+Так же на вид badge влияет свойства `transparent` и `clear`.
 
 ```tsx live 
 import React from 'react';
 import { Badge } from '@salutejs/{{ package }}';
 
 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="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} />
+                <Badge text="Бейдж" size="l" view="negative" transparent={transparent} clear={clear} />
+                <Badge text="Бейдж" size="l" view="dark" transparent={transparent} clear={clear} />
+                <Badge text="Бейдж" size="l" view="light" transparent={transparent} clear={clear} />
+            </div>
+        )
+    }
+
     return (
-        <div>
-            <Badge text="Бейдж" size="l" view="primary" transparent />
-            <Badge text="Бейдж" size="l" view="accent" transparent />
-            <Badge text="Бейдж" size="l" view="positive" transparent />
-            <Badge text="Бейдж" size="l" view="warning" transparent />
-            <Badge text="Бейдж" size="l" view="negative" transparent />
-            <Badge text="Бейдж" size="l" view="dark" transparent />
-            <Badge text="Бейдж" size="l" view="light" transparent />
+        <div style=\{{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+            <Badges />
+            <Badges transparent />
+            <Badges clear />
         </div>
     );
 }

package/styled-components/es/components/Badge/Badge.tokens.js

@@ -1,12 +1,14 @@
 export var classes = {
   badgePilled: 'badge-pilled',
-  badgeTransparent: 'badge-transparent'
+  badgeTransparent: 'badge-transparent',
+  badgeClear: 'badge-clear'
 };
 export var tokens = {
   background: '--plasma-badge-background',
   color: '--plasma-badge-color',
   backgroundTransparent: '--plasma-badge-background-transparent',
   colorTransparent: '--plasma-badge-color-transparent',
+  colorClear: '--plasma-badge-color-clear',
   borderRadius: '--plasma-badge-border-radius',
   pilledBorderRadius: '--plasma-badge-pilled-border-radius',
   height: '--plasma-badge-height',

package/styled-components/es/components/Badge/variations/_clear/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Badge.tokens';
+export var base = /*#__PURE__*/css(["&.", "{color:var(", ");background-color:transparent;padding:0;}"], /*#__PURE__*/String(classes.badgeClear), tokens.colorClear);

package/styled-components/es/components/Badge/variations/_clear/tokens.json

@@ -0,0 +1 @@
+["--plasma-badge-color-clear"]

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

@@ -21,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, useState, createRef, useCallback } from 'react';
 import { css } from 'styled-components';
 import { useResizeObserver } from '@salutejs/plasma-core';
-import { cx, mergeRefs } from '../../utils';
+import { cx } from '../../utils';
 import { applyDynamicLabel } from './mixins';
 import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
 import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText } from './TextArea.styles';
@@ -118,7 +118,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       uncontrolledValue = _useState6[0],
       setUncontrolledValue = _useState6[1];
-    var outerRef = /*#__PURE__*/createRef();
+    var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
     var innerOptional = required ? false : optional;
     var hasHelper = Boolean(leftHelper || rightHelper || helperText);
     var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -149,7 +149,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
       if (value === undefined) {
         setUncontrolledValue(event === null || event === void 0 ? void 0 : event.target.value);
       }
-      console.log(event);
       onChange === null || onChange === void 0 || onChange(event);
     }, [value, onChange]);
     var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
@@ -191,7 +190,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       hasContentRight: Boolean(contentRight),
       hasHelper: hasHelper,
       applyCustomWidth: applyCustomWidth,
-      ref: mergeRefs(outerRef, innerRef),
+      ref: outerRef,
       disabled: disabled,
       height: autoResize ? minAuto : height,
       width: width,

package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js

@@ -7,13 +7,13 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent)
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear)
     },
     size: {
       l: /*#__PURE__*/css(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
@@ -25,6 +25,9 @@ export var config = {
     },
     transparent: {
       "true": /*#__PURE__*/css([""])
+    },
+    clear: {
+      "true": /*#__PURE__*/css([""])
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { disableProps } from '@salutejs/plasma-sb-utils';
 import type { StoryObj, Meta } from '@storybook/react';
 
@@ -23,13 +23,25 @@ const meta: Meta<typeof Badge> = {
                 type: 'select',
             },
         },
+        pilled: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
+        transparent: {
+            control: { type: 'boolean' },
+            if: { arg: 'clear', truthy: false },
+        },
         ...disableProps(['contentLeft', 'contentRight']),
     },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Badge>;
+type StoryProps = ComponentProps<typeof Badge> & {
+    enableContentLeft: boolean;
+    enableContentRight: boolean;
+};
+type Story = StoryObj<StoryProps>;
 
 const BellIcon = (props) => (
     <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
@@ -41,16 +53,36 @@ const BellIcon = (props) => (
 );
 
 export const Default: Story = {
+    argTypes: {
+        enableContentLeft: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentRight', truthy: false },
+        },
+        enableContentRight: {
+            control: { type: 'boolean' },
+            if: { arg: 'enableContentLeft', truthy: false },
+        },
+    },
     args: {
         text: 'Hello',
         view: 'default',
         size: 'm',
+        enableContentLeft: false,
+        enableContentRight: false,
         pilled: false,
         transparent: false,
+        clear: false,
     },
-};
+    render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
+        const iconSize = size === 'l' ? '1rem' : '0.75rem';
 
-export const WithIcon: Story = {
-    args: { ...Default.args },
-    render: (args) => <Badge contentLeft={<BellIcon width="1rem" height="1rem" />} {...args} />,
+        return (
+            <Badge
+                contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
+                size={size}
+                {...rest}
+            />
+        );
+    },
 };

package/styled-components/es/examples/plasma_web/components/Badge/Badge.config.js

@@ -7,13 +7,13 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent),
-      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent)
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--text-accent);", ":var(--surface-transparent-accent);", ":var(--text-accent);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--text-positive);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--text-warning);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--text-negative);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-light-text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear),
+      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear)
     },
     size: {
       l: /*#__PURE__*/css(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
@@ -25,6 +25,9 @@ export var config = {
     },
     transparent: {
       "true": /*#__PURE__*/css([""])
+    },
+    clear: {
+      "true": /*#__PURE__*/css([""])
     }
   }
 };