@salutejs/plasma-new-hope 0.194.0-canary.1562.11857238836.0 → 0.194.0-canary.1568.11891833298.0

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Switch = void 0;
+exports.SwitchOutline = exports.Switch = void 0;
 var _Switch = /*#__PURE__*/require("../../../../components/Switch");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Switch2 = /*#__PURE__*/require("./Switch.config");
+var _SwitchOutline = /*#__PURE__*/require("./Switch.outline.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _Switch2.config);
-var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _SwitchOutline.config);
+var SwitchOutline = exports.SwitchOutline = /*#__PURE__*/(0, _engines.component)(mergedOutlineConfig);

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.outline.config.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Switch = /*#__PURE__*/require("../../../../components/Switch");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.375rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Switch.switchTokens.trackFocusColor)
+    }
+  }
+};

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

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};

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

@@ -25,7 +25,7 @@ var config = exports.config = {
       s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Switch = void 0;
+exports.SwitchOutline = exports.Switch = void 0;
 var _Switch = /*#__PURE__*/require("../../../../components/Switch");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Switch2 = /*#__PURE__*/require("./Switch.config");
+var _SwitchOutline = /*#__PURE__*/require("./Switch.outline.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _Switch2.config);
-var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _SwitchOutline.config);
+var SwitchOutline = exports.SwitchOutline = /*#__PURE__*/(0, _engines.component)(mergedOutlineConfig);

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Switch = /*#__PURE__*/require("../../../../components/Switch");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.375rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":0.875rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Switch.switchTokens.trackFocusColor)
+    }
+  }
+};

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

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};

package/styled-components/es/components/Card/Card.api.mdx

@@ -0,0 +1,184 @@
+---
+id: card
+title: Card
+---
+
+отличия от https://plasma.sberdevices.ru/b2c/components/card/:
+* избавляемся от CardBody
+* убираем дублирование disabled
+
+примеры дизайна https://www.figma.com/design/MXl0ZkXEqEhIFDS2H6b3yk/StarDS-Cards?node-id=2-690&node-type=instance&t=TJN8Nqyiky3Dfw2T-0
+
+другие либы:
+https://ant.design/components/card#
+https://mui.com/material-ui/react-card/
+
+```tsx live
+import React, { ReactNode } from "react";
+
+/**
+ * Набор часто встречающихся скруглений.
+ */
+
+export const radiuses = {
+  250: 15.625,
+  32: 2,
+  28: 1.75,
+  24: 1.5,
+  20: 1.25,
+  18: 1.125,
+  16: 1,
+  14: 0.875,
+  12: 0.75,
+  8: 0.5,
+  0: 0,
+};
+
+export type Roundness = keyof typeof radiuses;
+
+export interface RoundnessProps {
+  /** Скругленность */
+  roundness: Roundness;
+}
+
+interface Card {
+  /** Компонент в фокусе */
+  focused?: boolean;
+  /** Увеличение по фокусу */
+  scaleOnFocus?: boolean;
+  /** Компонент неактивен */
+  disabled?: boolean;
+  /** Добавить рамку при фокусе */
+  outlined?: boolean;
+  /** Цвет подложки */
+  background?: string;
+  /** Делает карточку квадратной */
+  square?: boolean;
+  /** Заголовок */
+  title?: string | ReactNode;
+  /** Подзаголовок */
+  subtitle?: string | ReactNode;
+  /** Расположение заголовка и подзаголовка, пока нет в дизайне */
+  titlePlacement?: "inner" | "outer";
+  /** Выравнивание заголовка и подзаголовка */
+  titleAlign?: "left" | "center";
+  /** Подвал, или вынести в
+   * <CardContent footer={<CardTimeline />} /> или <CardFooter><CardTimeline /></CardFooter>
+   * */
+  footer?: ReactNode;
+}
+
+const ratios = {
+  "1 / 1": "100",
+  "1/1": "100",
+  "3 / 4": "133.3333",
+  "3/4": "133.3333",
+  "4 / 3": "75",
+  "4/3": "75",
+  "9 / 16": "177.7778",
+  "9/16": "177.7778",
+  "16 / 9": "56.25",
+  "16/9": "56.25",
+  "1 / 2": "200",
+  "1/2": "200",
+  "2 / 1": "50",
+  "2/1": "50",
+};
+
+export type Ratio = keyof typeof ratios;
+
+/**
+ * CardMedia из текущей реализации
+ * Стоит ли заменить пропсом `cover?: ReactNode;` в Card как в Ant?
+ * а width и height передавать в style...
+ *
+ * имхо, нет. у Card может быть title и subtitle под карточкой
+ * скорее всего, на них свойство height не должно распространяться
+ * стоит подождать финальный дизайн
+ */
+interface CardMedia {
+  base?: "img" | "div";
+  height?: string | number;
+  ratio?: Ratio;
+  customRatio?: string;
+}
+
+interface CardContent {
+  topLeft?: string | ReactNode;
+  topRight?: string | ReactNode;
+  bottomLeft?: string | ReactNode;
+  bottomRight?: string | ReactNode;
+  children?: ReactNode;
+}
+
+/** или */
+interface CardContent {
+  placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  children?: ReactNode;
+}
+
+interface CardTimeline {
+  /**
+   * Описание, например время до конца фильма. Возможно,
+   * не нужно и стоит указывать bottomRight контент
+   */
+  text?: string;
+  progress?: string | number;
+  /**
+   * Не увеличивать высоту карточки
+   * @default true
+   */
+  inline?: boolean;
+}
+```
+
+```tsx live
+<Card title="Title" subtitle="Subtitle">
+  <CardContent placement="top-left">
+    <SomeIcon />
+  </CardContent>
+  <CardContent placement="top-right">
+    <SaveButton saved={isSaved} />
+  </CardContent>
+  <CardContent placement="bottom-right">18+</CardContent>
+</Card>;
+
+<Card title="Title" subtitle="Subtitle">
+  <CardContent
+    topLeft={<SomeIcon />}
+    topRight={<SaveButton saved={isSaved} />}
+    bottomRight="18+"
+  />
+</Card>;
+
+<Card title="Title" subtitle="Subtitle">
+  <CardMedia src={someSrc} alt="trailer" />
+  <CardContent
+    topLeft={<SomeIcon />}
+    topRight={<SaveButton saved={isSaved} />}
+    bottomRight="18+"
+  />
+  <CardTimeline text="еще 1ч 23мин" progress={56} />
+</Card>;
+
+<Card title="Title" subtitle="Subtitle">
+  <CardContent topLeft={<SomeIcon />} topRight={<SaveButton saved={isSaved} />}>
+    <CardMedia src={someSrc} alt="trailer" />
+  </CardContent>
+  <CardTimeline text="еще 1ч 23мин" progress={56} />
+</Card>;
+
+<Card
+  title="Title"
+  subtitle="Subtitle"
+  // как в ant, но кажется, что так менее гибко
+  cover={<CardMedia src={someSrc} alt="trailer" />}
+  square
+>
+  <CardContent
+    topLeft={<SomeIcon />}
+    topRight={<SaveButton saved={isSaved} />}
+  />
+  <CardTimeline text="еще 1ч 23мин" progress={56} />
+</Card>;
+```

package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js

@@ -348,6 +348,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
+        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {

package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.js

@@ -31,6 +31,7 @@ export var Item = function Item(_ref) {
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
     renderItem = _useContext.renderItem,
+    valueToItemMap = _useContext.valueToItemMap,
     treeId = _useContext.treeId;
   var disabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
@@ -84,7 +85,7 @@ export var Item = function Item(_ref) {
   }))), !multiple && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     view: "default",
     size: "l",
     contentLeft: contentLeft,

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

@@ -1,4 +1,4 @@
-var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal", "renderItem"];
+var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow", "alwaysOpened", "portal"];
 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."); }
@@ -60,7 +60,6 @@ export var dropdownRoot = function dropdownRoot(Root) {
       _ref$alwaysOpened = _ref.alwaysOpened,
       alwaysOpened = _ref$alwaysOpened === void 0 ? false : _ref$alwaysOpened,
       portal = _ref.portal,
-      renderItem = _ref.renderItem,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useReducer = useReducer(pathReducer, []),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -136,8 +135,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
         onItemClick: onItemClick,
         onItemSelect: onItemSelect,
         hasArrow: hasArrow,
-        treeId: treeId,
-        renderItem: renderItem
+        treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {
       ref: floatingPopoverRef,

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js

@@ -4,7 +4,7 @@ import { cx } from '../../../../utils';
 import { IconDisclosureRight } from '../../../_Icon';
 import { Context } from '../../Dropdown';
 import { getItemId } from '../../utils';
-import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell, RenderItemWrapper } from './DropdownItem.styles';
+import { Wrapper, DisclosureIconWrapper, Divider, CellWrapper, StyledCell } from './DropdownItem.styles';
 export var DropdownItem = function DropdownItem(_ref) {
   var item = _ref.item,
     path = _ref.path,
@@ -34,8 +34,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     onItemSelect = _useContext.onItemSelect,
     onItemClick = _useContext.onItemClick,
     hasArrow = _useContext.hasArrow,
-    treeId = _useContext.treeId,
-    renderItem = _useContext.renderItem;
+    treeId = _useContext.treeId;
   var hasDescendants = Boolean(item.items);
   var disclosureIconSize = size === 'xs' ? 'xs' : 's';
   var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
@@ -86,7 +85,7 @@ export var DropdownItem = function DropdownItem(_ref) {
     "aria-expanded": ariaExpanded,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel
-  }, renderItem ? /*#__PURE__*/React.createElement(RenderItemWrapper, null, renderItem(item)) : /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  }, /*#__PURE__*/React.createElement(CellWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight,
     alignContentLeft: "center",

package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { classes, tokens, constants } from '../../Dropdown.tokens';
-import { addFocus, applyEllipsis } from '../../../../mixins';
+import { addFocus } from '../../../../mixins';
 import { cellConfig, cellTokens } from '../../../Cell';
 import { component, mergeConfig } from '../../../../engines';
 var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
@@ -35,7 +35,4 @@ export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
   hasTransition: false,
   customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(constants.focusColor, ");\n            }\n        ")
-}));
-export var RenderItemWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-5"
-})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
+}));

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

@@ -272,6 +272,7 @@ export var selectRoot = function selectRoot(Root) {
         handleItemClick: handleItemClick,
         variant: variant,
         renderItem: renderItem,
+        valueToItemMap: valueToItemMap,
         treeId: treeId
       }
     }, /*#__PURE__*/React.createElement(FloatingPopover, {

package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.js

@@ -32,6 +32,7 @@ export var Item = function Item(_ref) {
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
     renderItem = _useContext.renderItem,
+    valueToItemMap = _useContext.valueToItemMap,
     treeId = _useContext.treeId;
   var itemDisabled = Boolean(disabled || isDisabled);
   var disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;
@@ -86,7 +87,7 @@ export var Item = function Item(_ref) {
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(item)) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
+  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
     contentLeft: contentLeft,
     contentRight: contentRight
     // TODO: #1548

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -1,10 +1,4 @@
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-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; }
 import React, { forwardRef } from 'react';
 import { sizeToIconSize, getItemId } from '../../../../utils';
 import { classes } from '../../../../Select.tokens';
@@ -53,24 +47,9 @@ export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // Обработчик чипов
   var handleChipsChange = function handleChipsChange(chipLabels) {
-    if (!Array.isArray(value)) return;
-
-    // TODO: #1564
-    // Из лейблов чипов получаем value у item и далее прокидываем его в onChange.
-    if (renderValue && !isTargetAmount) {
-      var resultValues = _toConsumableArray(value);
-      value.forEach(function (_, index) {
-        var labelAfterRenderValue = renderValue(labelToItemMap.get(valueToItemMap.get(value[index]).label));
-        if (!chipLabels.includes(labelAfterRenderValue)) {
-          resultValues.splice(index, 1);
-        }
-      });
-      onChange(resultValues);
-    } else {
-      onChange(chipLabels.map(function (chipLabel) {
-        return labelToItemMap.get(chipLabel).value;
-      }));
-    }
+    onChange(chipLabels.map(function (chipLabel) {
+      return labelToItemMap.get(chipLabel).value;
+    }));
   };
   return /*#__PURE__*/React.createElement(StyledTextField, _extends({
     ref: ref,

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

@@ -23,6 +23,11 @@ export var tokens = {
   verticalGap: '--plasma-switch-vertical-gap',
   trackWidth: '--plasma-switch__track-width',
   trackHeight: '--plasma-switch__track-height',
+  trackBorderWidth: '--plasma-switch__track-border',
+  trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
+  trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
+  trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',
+  trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color',
   trackBorderRadius: '--plasma-switch__track-border-radius',
   // NOTE: could be intersection with checked
   trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
@@ -34,7 +39,8 @@ export var tokens = {
   thumbOffset: '--plasma-switch__thumb-offset',
   thumbBorderRadius: '--plasma-switch__thumb-border-radius',
   thumbPressScale: '--plasma-switch__thumb-scale',
-  thumbBackgroundColor: '--plasma-switch__thumb-bg-color',
+  thumbBackgroundColorOn: '--plasma-switch__thumb_checked_true-bg-color',
+  thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color',
   thumbBoxShadow: '--plasma-switch__thumb-box-shadow',
   thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',
   labelOffsetPrivate: '--plasma_private-switch__label-offset'

package/styled-components/es/components/Switch/_toggleSize/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
 import { StyledTrigger } from '../Switch.styles';
-export var base = /*#__PURE__*/css(["", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
+export var base = /*#__PURE__*/css(["", "{box-sizing:border-box;flex:0 0 var(", ");border-style:solid;border-width:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackBorderWidth, tokens.trackBorderRadius, tokens.trackWidth, tokens.trackHeight, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);

package/styled-components/es/components/Switch/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
 import { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';
-export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);
+export var base = /*#__PURE__*/css(["", "{background-color:var(", ");border-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));border-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");border-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));border-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{background-color:var(", ");box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, tokens.trackBorderColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, tokens.trackBorderColorOffHover, tokens.trackBorderColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, tokens.trackBorderColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, tokens.trackBorderColorOnHover, tokens.trackBorderColorOn, StyledTrigger, tokens.thumbBackgroundColorOff, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBackgroundColorOn, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);

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

@@ -19,7 +19,7 @@ export var config = {
       s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidth, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)