@salutejs/plasma-new-hope 0.142.0-canary.1428.10806066547.0 → 0.142.0-dev.0

package/styled-components/cjs/components/Calendar/utils/constants.js

@@ -3,50 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.quarterDates = exports.offsetMap = exports.YEAR_RENDER_COUNT = exports.SHORT_MONTH_NAME = exports.SHORT_DAY_NAMES = exports.ROW_YEAR_STEP = exports.ROW_STEP = exports.ROW_QUARTER_STEP = exports.ROW_MONTH_STEP = exports.QUARTER_NAMES = exports.MONTH_NAMES = exports.MONTHS = exports.FULL_DAY_NAMES = void 0;
-function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var LOCAL = {
-  ru: 'ru-RU',
-  eng: 'en-US'
-};
-var MONTHS = exports.MONTHS = /*#__PURE__*/Array.from({
-  length: 12
-}, function (_, i) {
-  return i + 1;
-});
-var WEEKS = /*#__PURE__*/Array.from({
-  length: 7
-}, function (_, i) {
-  return i + 1;
-});
-var callbackDayFormatter = function callbackDayFormatter(local, options) {
-  var dateFormatter = new Intl.DateTimeFormat(LOCAL[local], options);
-  return function (index) {
-    // INFO: Start for monday
-    var day = new Date(Date.UTC(2024, 0, index));
-    var _dateFormatter$format = dateFormatter.format(day),
-      _dateFormatter$format2 = _toArray(_dateFormatter$format),
-      first = _dateFormatter$format2[0],
-      rest = _dateFormatter$format2.slice(1);
-    return first.toUpperCase() + rest.join('');
-  };
-};
-var callbackMonthFormatter = function callbackMonthFormatter(local, options) {
-  var dateFormatter = new Intl.DateTimeFormat(LOCAL[local], options);
-  return function (month) {
-    var data = new Date(Date.UTC(2024, month - 1));
-    var _dateFormatter$format3 = dateFormatter.format(data),
-      _dateFormatter$format4 = _toArray(_dateFormatter$format3),
-      first = _dateFormatter$format4[0],
-      rest = _dateFormatter$format4.slice(1);
-    return first.toUpperCase() + rest.join('').replace('.', '');
-  };
-};
+exports.quarterDates = exports.offsetMap = exports.YEAR_RENDER_COUNT = exports.SHORT_MONTH_NAME = exports.SHORT_DAY_NAMES = exports.ROW_YEAR_STEP = exports.ROW_STEP = exports.ROW_QUARTER_STEP = exports.ROW_MONTH_STEP = exports.QUARTER_NAMES = exports.MONTH_NAMES = exports.FULL_DAY_NAMES = void 0;
 var ROW_STEP = exports.ROW_STEP = 6;
 var ROW_MONTH_STEP = exports.ROW_MONTH_STEP = 4;
 var ROW_YEAR_STEP = exports.ROW_YEAR_STEP = 4;
@@ -77,14 +34,7 @@ var quarterDates = exports.quarterDates = {
     day: 1
   }
 };
-var SHORT_DAY_NAMES = exports.SHORT_DAY_NAMES = {
-  ru: /*#__PURE__*/WEEKS.map( /*#__PURE__*/callbackDayFormatter('ru', {
-    weekday: 'short'
-  })),
-  eng: /*#__PURE__*/WEEKS.map( /*#__PURE__*/callbackDayFormatter('eng', {
-    weekday: 'short'
-  }))
-};
+var SHORT_DAY_NAMES = exports.SHORT_DAY_NAMES = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
 var FULL_DAY_NAMES = exports.FULL_DAY_NAMES = {
   Пн: 'Понедельник',
   Вт: 'Вторник',
@@ -94,19 +44,5 @@ var FULL_DAY_NAMES = exports.FULL_DAY_NAMES = {
   Сб: 'Суббота',
   Вс: 'Воскресенье'
 };
-var SHORT_MONTH_NAME = exports.SHORT_MONTH_NAME = {
-  ru: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('ru', {
-    month: 'short'
-  })),
-  eng: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('eng', {
-    month: 'short'
-  }))
-};
-var MONTH_NAMES = exports.MONTH_NAMES = {
-  ru: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('ru', {
-    month: 'long'
-  })),
-  eng: /*#__PURE__*/MONTHS.map( /*#__PURE__*/callbackMonthFormatter('eng', {
-    month: 'long'
-  }))
-};
+var SHORT_MONTH_NAME = exports.SHORT_MONTH_NAME = ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
+var MONTH_NAMES = exports.MONTH_NAMES = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];

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,
+        clear: false,
         pilled: false,
         transparent: 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_b2c/components/Calendar/Calendar.stories.tsx

@@ -32,12 +32,6 @@ const meta: Meta<typeof CalendarBase> = {
                 type: 'inline-radio',
             },
         },
-        local: {
-            options: ['ru', 'eng'],
-            control: {
-                type: 'select',
-            },
-        },
     },
 };
 
@@ -81,7 +75,7 @@ const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumb
 };
 
 const StoryDefault = (args: CalendarProps) => {
-    const { isRange, isDouble, min, max, date, includeEdgeDates, size, local } = args;
+    const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args;
     const [value, setValue] = useState(new Date(2023, 10, 16));
     const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]);
 
@@ -103,7 +97,6 @@ const StoryDefault = (args: CalendarProps) => {
             min={min}
             max={max}
             includeEdgeDates={includeEdgeDates}
-            local={local}
             onChangeValue={(isRange ? handleOnRangeChange : handleOnChange) as (value: Date | [Date, Date?]) => void}
         />
     );
@@ -117,7 +110,6 @@ export const Default: StoryObj<CalendarProps> = {
         isRange: false,
         includeEdgeDates: false,
         size: 'm',
-        local: 'ru',
     },
     render: (args) => <StoryDefault {...args} />,
 };

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,
+        clear: false,
         pilled: false,
         transparent: 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/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;}"], 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/Badge/variations/_pilled/base.js

@@ -1,3 +1,3 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../Badge.tokens';
-export var base = /*#__PURE__*/css(["&.", "{border-radius:var(", ");}"], /*#__PURE__*/String(classes.badgePilled), tokens.pilledBorderRadius);
+export var base = /*#__PURE__*/css(["&.", "{border-radius:var(", ");}"], classes.badgePilled, tokens.pilledBorderRadius);

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

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

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue", "local"];
+var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"];
 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."); }
@@ -37,8 +37,6 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       eventYearList = _ref.eventYearList,
       disabledYearList = _ref.disabledYearList,
       onChangeValue = _ref.onChangeValue,
-      _ref$local = _ref.local,
-      local = _ref$local === void 0 ? 'ru' : _ref$local,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useMemo = useMemo(function () {
         return Array.isArray(externalValue) ? externalValue : [externalValue];
@@ -153,8 +151,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       type: calendarState,
       onPrev: handlePrev,
       onNext: handleNext,
-      onUpdateCalendarState: handleUpdateCalendarState,
-      local: local
+      onUpdateCalendarState: handleUpdateCalendarState
     }), calendarState === CalendarState.Days && /*#__PURE__*/React.createElement(CalendarDays, {
       value: externalValue,
       date: date,
@@ -169,8 +166,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       onSetSelected: onSelectIndexes,
       onHoverDay: setHoveredItem,
       onKeyDown: handleKeyDown,
-      outerRefs: outerRefs,
-      local: local
+      outerRefs: outerRefs
     }), calendarState === CalendarState.Months && /*#__PURE__*/React.createElement(CalendarMonths, {
       value: externalValue,
       date: date,
@@ -184,8 +180,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       onSetSelected: onSelectIndexes,
       onHoverMonth: setHoveredItem,
       onKeyDown: onKeyDown,
-      outerRefs: outerRefs,
-      local: local
+      outerRefs: outerRefs
     }), calendarState === CalendarState.Quarters && /*#__PURE__*/React.createElement(CalendarQuarters, {
       value: externalValue,
       date: date,

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -1,5 +1,5 @@
 var _StyledSeparator, _StyledSeparator2, _StyledSeparator3, _StyledSeparator4;
-var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue", "local"];
+var _excluded = ["value", "min", "max", "includeEdgeDates", "type", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "onChangeValue"];
 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."); }
@@ -38,8 +38,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       eventYearList = _ref.eventYearList,
       disabledYearList = _ref.disabledYearList,
       onChangeValue = _ref.onChangeValue,
-      _ref$local = _ref.local,
-      local = _ref$local === void 0 ? 'ru' : _ref$local,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useMemo = useMemo(function () {
         return Array.isArray(externalValue) ? externalValue : [externalValue];
@@ -213,8 +211,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       type: calendarState,
       onPrev: handlePrev,
       onNext: handleNext,
-      onUpdateCalendarState: handleUpdateCalendarState,
-      local: local
+      onUpdateCalendarState: handleUpdateCalendarState
     }), /*#__PURE__*/React.createElement(StyledWrapper, null, calendarState === CalendarState.Days && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarDays, {
       value: externalValue,
       date: firstDate,
@@ -230,7 +227,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onSetSelected: onSelectIndexes,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
-      local: local,
       isDouble: true
     }), _StyledSeparator || (_StyledSeparator = /*#__PURE__*/React.createElement(StyledSeparator, null)), /*#__PURE__*/React.createElement(CalendarDays, {
       value: externalValue,
@@ -247,7 +243,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onSetSelected: onSelectIndexes,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
-      local: local,
       isDouble: true,
       isSecond: true
     })), calendarState === CalendarState.Months && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarMonths, {
@@ -264,7 +259,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onHoverMonth: setHoveredItem,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
-      local: local,
       isDouble: true
     }), _StyledSeparator2 || (_StyledSeparator2 = /*#__PURE__*/React.createElement(StyledSeparator, null)), /*#__PURE__*/React.createElement(CalendarMonths, {
       value: externalValue,
@@ -280,7 +274,6 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       onHoverMonth: setHoveredItem,
       onKeyDown: handleKeyDown,
       outerRefs: outerRefs,
-      local: local,
       isDouble: true,
       isSecond: true
     })), calendarState === CalendarState.Quarters && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarQuarters, {