@salutejs/plasma-new-hope 0.75.1-canary.1179.8688877537.0 → 0.75.1-canary.1182.8691036704.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. package/cjs/components/Chip/Chip.css +0 -2
  2. package/cjs/components/Chip/Chip.js +2 -14
  3. package/cjs/components/Chip/Chip.js.map +1 -1
  4. package/cjs/components/Chip/Chip.tokens.js +0 -5
  5. package/cjs/components/Chip/Chip.tokens.js.map +1 -1
  6. package/cjs/components/Combobox/Combobox.css +0 -2
  7. package/cjs/components/Combobox/ui/ComboboxChip/ComboboxChip.css +0 -2
  8. package/cjs/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +0 -2
  9. package/cjs/components/Pagination/Pagination.css +0 -2
  10. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +0 -2
  11. package/cjs/components/Select/Select.css +0 -2
  12. package/cjs/components/Select/ui/SelectChip/SelectChip.css +0 -2
  13. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +0 -2
  14. package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -2
  15. package/cjs/index.css +0 -2
  16. package/es/components/Chip/Chip.css +0 -2
  17. package/es/components/Chip/Chip.js +3 -15
  18. package/es/components/Chip/Chip.js.map +1 -1
  19. package/es/components/Chip/Chip.tokens.js +1 -5
  20. package/es/components/Chip/Chip.tokens.js.map +1 -1
  21. package/es/components/Combobox/Combobox.css +0 -2
  22. package/es/components/Combobox/ui/ComboboxChip/ComboboxChip.css +0 -2
  23. package/es/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +0 -2
  24. package/es/components/Pagination/Pagination.css +0 -2
  25. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +0 -2
  26. package/es/components/Select/Select.css +0 -2
  27. package/es/components/Select/ui/SelectChip/SelectChip.css +0 -2
  28. package/es/components/Select/ui/SelectTarget/SelectTarget.css +0 -2
  29. package/es/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -2
  30. package/es/index.css +0 -2
  31. package/package.json +2 -2
  32. package/styled-components/cjs/components/Chip/Chip.js +2 -14
  33. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +2 -2
  34. package/styled-components/cjs/components/Chip/Chip.tokens.js +1 -5
  35. package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.config.js +7 -10
  36. package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.stories.tsx +2 -18
  37. package/styled-components/cjs/examples/plasma_b2c/components/Divider/Divider.stories.tsx +1 -0
  38. package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +8 -18
  39. package/styled-components/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +1 -0
  40. package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.config.js +7 -10
  41. package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.stories.tsx +2 -18
  42. package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +8 -18
  43. package/styled-components/cjs/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +1 -0
  44. package/styled-components/cjs/examples/sds_engineer/components/TextField/TextField.stories.tsx +8 -18
  45. package/styled-components/cjs/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx +1 -0
  46. package/styled-components/es/components/Chip/Chip.js +3 -15
  47. package/styled-components/es/components/Chip/Chip.template-doc.mdx +2 -2
  48. package/styled-components/es/components/Chip/Chip.tokens.js +0 -4
  49. package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.config.js +7 -10
  50. package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.stories.tsx +2 -18
  51. package/styled-components/es/examples/plasma_b2c/components/Divider/Divider.stories.tsx +1 -0
  52. package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +8 -18
  53. package/styled-components/es/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx +1 -0
  54. package/styled-components/es/examples/plasma_web/components/Chip/Chip.config.js +7 -10
  55. package/styled-components/es/examples/plasma_web/components/Chip/Chip.stories.tsx +2 -18
  56. package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +8 -18
  57. package/styled-components/es/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx +1 -0
  58. package/styled-components/es/examples/sds_engineer/components/TextField/TextField.stories.tsx +8 -18
  59. package/styled-components/es/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx +1 -0
  60. package/types/components/Chip/Chip.d.ts +0 -4
  61. package/types/components/Chip/Chip.d.ts.map +1 -1
  62. package/types/components/Chip/Chip.tokens.d.ts +0 -4
  63. package/types/components/Chip/Chip.tokens.d.ts.map +1 -1
  64. package/types/components/Chip/Chip.types.d.ts +0 -6
  65. package/types/components/Chip/Chip.types.d.ts.map +1 -1
  66. package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts +1 -4
  67. package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts.map +1 -1
  68. package/types/examples/plasma_b2c/components/Chip/Chip.d.ts +1 -4
  69. package/types/examples/plasma_b2c/components/Chip/Chip.d.ts.map +1 -1
  70. package/types/examples/plasma_web/components/Chip/Chip.config.d.ts +1 -4
  71. package/types/examples/plasma_web/components/Chip/Chip.config.d.ts.map +1 -1
  72. package/types/examples/plasma_web/components/Chip/Chip.d.ts +1 -4
  73. package/types/examples/plasma_web/components/Chip/Chip.d.ts.map +1 -1
  74. package/cjs/components/Chip/variations/_pilled/base.js +0 -9
  75. package/cjs/components/Chip/variations/_pilled/base.js.map +0 -1
  76. package/cjs/components/Chip/variations/_pilled/base_3kce4h.css +0 -1
  77. package/es/components/Chip/variations/_pilled/base.js +0 -5
  78. package/es/components/Chip/variations/_pilled/base.js.map +0 -1
  79. package/es/components/Chip/variations/_pilled/base_3kce4h.css +0 -1
  80. package/styled-components/cjs/components/Chip/variations/_pilled/base.js +0 -9
  81. package/styled-components/cjs/components/Chip/variations/_pilled/tokens.json +0 -4
  82. package/styled-components/es/components/Chip/variations/_pilled/base.js +0 -3
  83. package/styled-components/es/components/Chip/variations/_pilled/tokens.json +0 -4
  84. package/types/components/Chip/variations/_pilled/base.d.ts +0 -2
  85. package/types/components/Chip/variations/_pilled/base.d.ts.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/plasma-new-hope",
3
- "version": "0.75.1-canary.1179.8688877537.0",
3
+ "version": "0.75.1-canary.1182.8691036704.0",
4
4
  "description": "Salute Design System blueprint",
5
5
  "main": "cjs/index.js",
6
6
  "module": "es/index.js",
@@ -102,5 +102,5 @@
102
102
  "react-popper": "2.3.0",
103
103
  "storeon": "3.1.5"
104
104
  },
105
- "gitHead": "38e7a2e198f21d02a546814cda8e59f2b30746e7"
105
+ "gitHead": "51d22d2ebc0f4c9f18212bf125145405c0092508"
106
106
  }
package/styled-components/cjs/components/Chip/Chip.js CHANGED
@@ -7,16 +7,14 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.chipRoot = exports.chipConfig = void 0;
8
8
  var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
9
  var _IconClose = /*#__PURE__*/require("../_Icon/Icons/IconClose");
10
- var _utils = /*#__PURE__*/require("../../utils");
11
10
  var _base = /*#__PURE__*/require("./variations/_view/base");
12
11
  var _base2 = /*#__PURE__*/require("./variations/_size/base");
13
12
  var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
14
13
  var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
15
14
  var _base5 = /*#__PURE__*/require("./variations/_focused/base");
16
- var _base6 = /*#__PURE__*/require("./variations/_pilled/base");
17
15
  var _Chip = /*#__PURE__*/require("./Chip.styles");
18
16
  var _Chip2 = /*#__PURE__*/require("./Chip.tokens");
19
- var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "className", "onClear", "onClick", "pilled", "readOnly", "disabled"];
17
+ var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "onClear", "onClick", "readOnly", "disabled"];
20
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
22
20
  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); }
@@ -30,18 +28,14 @@ var chipRoot = exports.chipRoot = function chipRoot(Root) {
30
28
  contentRight = props.contentRight,
31
29
  contentClearButton = props.contentClearButton,
32
30
  size = props.size,
33
- className = props.className,
34
31
  onClear = props.onClear,
35
32
  onClick = props.onClick,
36
- _props$pilled = props.pilled,
37
- pilled = _props$pilled === void 0 ? false : _props$pilled,
38
33
  _props$readOnly = props.readOnly,
39
34
  readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
40
35
  _props$disabled = props.disabled,
41
36
  disabled = _props$disabled === void 0 ? false : _props$disabled,
42
37
  rest = _objectWithoutProperties(props, _excluded);
43
38
  var txt = !text && typeof children === 'string' ? children : text;
44
- var pilledClass = pilled ? _Chip2.classes.pilled : undefined;
45
39
  var handleClick = function handleClick(event) {
46
40
  if (disabled || readOnly) {
47
41
  return;
@@ -58,11 +52,9 @@ var chipRoot = exports.chipRoot = function chipRoot(Root) {
58
52
  return /*#__PURE__*/_react["default"].createElement(Root, _extends({
59
53
  type: "button",
60
54
  ref: ref,
61
- className: (0, _utils.cx)(pilledClass, className),
62
55
  tabIndex: readOnly ? -1 : 0,
63
56
  onClick: handleClick,
64
57
  disabled: disabled,
65
- pilled: pilled,
66
58
  readOnly: !disabled && readOnly,
67
59
  size: size
68
60
  }, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Chip.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Chip.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/_react["default"].createElement(_Chip.StyledContentRight, null, contentRight), ClearContent);
@@ -90,14 +82,10 @@ var chipConfig = exports.chipConfig = {
90
82
  },
91
83
  focused: {
92
84
  css: _base5.base
93
- },
94
- pilled: {
95
- css: _base6.base,
96
- attrs: true
97
85
  }
98
86
  },
99
87
  defaults: {
100
- view: 'default',
88
+ view: 'primary',
101
89
  size: 'm'
102
90
  }
103
91
  };
package/styled-components/cjs/components/Chip/Chip.template-doc.mdx CHANGED
@@ -72,7 +72,7 @@ export function App() {
72
72
  Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
73
73
  + `"default"` – основная;
74
74
  + `"secondary"` – вторичная;
75
- + `"accent"` – акцентый.
75
+ + `"positive"` – успешное завершение;
76
76
 
77
77
  ```tsx live
78
78
  import React from 'react';
@@ -83,7 +83,7 @@ export function App() {
83
83
  <div>
84
84
  <Chip text="Chip" size="m" view="default" />
85
85
  <Chip text="Chip" size="m" view="secondary" />
86
- <Chip text="Chip" size="m" view="accent" />
86
+ <Chip text="Chip" size="m" view="positive" />
87
87
  </div>
88
88
  );
89
89
  }
package/styled-components/cjs/components/Chip/Chip.tokens.js CHANGED
@@ -3,10 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.tokens = exports.classes = void 0;
7
- var classes = exports.classes = {
8
- pilled: 'chip-pilled'
9
- };
6
+ exports.tokens = void 0;
10
7
  var tokens = exports.tokens = {
11
8
  background: '--plasma-chip-background',
12
9
  color: '--plasma-chip-color',
@@ -24,7 +21,6 @@ var tokens = exports.tokens = {
24
21
  outlineSize: '--plasma-chip-outline-size',
25
22
  closeIconColor: '--plasma-chip-close-icon-color',
26
23
  borderRadius: '--plasma-chip-border-radius',
27
- pilledBorderRadius: '--plasma-chip-pilled-border-radius',
28
24
  width: '--plasma-chip-width',
29
25
  height: '--plasma-chip-height',
30
26
  paddingTop: '--plasma-chip-padding-top',
package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.config.js CHANGED
@@ -14,24 +14,21 @@ var config = exports.config = {
14
14
  },
15
15
  variations: {
16
16
  view: {
17
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
18
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
19
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
18
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
19
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
20
20
  },
21
21
  size: {
22
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":1.5rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
23
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":1.25rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
24
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":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.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
25
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":0.75rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize)
22
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
23
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
24
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":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.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
25
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize)
26
26
  },
27
27
  disabled: {
28
28
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Chip.chipTokens.disabledOpacity)
29
29
  },
30
30
  focused: {
31
31
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Chip.chipTokens.focusColor)
32
- },
33
- pilled: {
34
- "true": /*#__PURE__*/(0, _styledComponents.css)([""])
35
32
  }
36
33
  }
37
34
  };
package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.stories.tsx CHANGED
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
40
40
  export const Default: Story = {
41
41
  args: {
42
42
  text: 'Hello',
43
- view: 'default',
43
+ view: 'primary',
44
44
  size: 'm',
45
45
  disabled: false,
46
46
  focused: true,
47
- pilled: false,
48
47
  onClear,
49
48
  },
50
49
  };
51
50
 
52
51
  export const WithIcon: Story = {
53
52
  args: { ...Default.args },
54
- render: (args) => {
55
- const iconSizeMapper = {
56
- l: '1.5rem',
57
- m: '1.25rem',
58
- s: '1rem',
59
- xs: '0.75rem',
60
- };
61
- const iconSize = args.size || 'm';
62
-
63
- return (
64
- <Chip
65
- contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
66
- {...args}
67
- />
68
- );
69
- },
53
+ render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
70
54
  };
71
55
 
72
56
  export const LongText: Story = {
package/styled-components/cjs/examples/plasma_b2c/components/Divider/Divider.stories.tsx CHANGED
@@ -26,6 +26,7 @@ const meta: Meta<typeof Divider> = {
26
26
  },
27
27
  table: { defaultValue: { summary: 'default' } },
28
28
  },
29
+ length: { control: 'text' },
29
30
  },
30
31
  };
31
32
 
package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx CHANGED
@@ -70,16 +70,11 @@ type StoryPropsDefault = Omit<
70
70
  | 'chips'
71
71
  | 'onChangeChips'
72
72
  > & {
73
- 'storybook:contentLeft': boolean;
74
- 'storybook:contentRight': boolean;
73
+ enableContentLeft: boolean;
74
+ enableContentRight: boolean;
75
75
  };
76
76
 
77
- const StoryDemo = ({
78
- 'storybook:contentLeft': enableContentLeft,
79
- 'storybook:contentRight': enableContentRight,
80
- view,
81
- ...rest
82
- }: StoryPropsDefault) => {
77
+ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
83
78
  const [text, setText] = useState('Значение поля');
84
79
 
85
80
  const iconSize = rest.size === 'xs' ? 'xs' : 's';
@@ -114,8 +109,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
114
109
  leftHelper: 'Подсказка к полю',
115
110
  disabled: false,
116
111
  readOnly: false,
117
- 'storybook:contentLeft': true,
118
- 'storybook:contentRight': true,
112
+ enableContentLeft: true,
113
+ enableContentRight: true,
119
114
  },
120
115
  render: (args) => <StoryDemo {...args} />,
121
116
  };
@@ -139,16 +134,11 @@ type StoryPropsChips = Omit<
139
134
  | 'required'
140
135
  | 'enumerationType'
141
136
  > & {
142
- 'storybook:contentLeft': boolean;
143
- 'storybook:contentRight': boolean;
137
+ enableContentLeft: boolean;
138
+ enableContentRight: boolean;
144
139
  };
145
140
 
146
- const StoryChips = ({
147
- 'storybook:contentLeft': enableContentLeft,
148
- 'storybook:contentRight': enableContentRight,
149
- view,
150
- ...rest
151
- }: StoryPropsChips) => {
141
+ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
152
142
  const [text, setText] = useState('Значение поля');
153
143
 
154
144
  const iconSize = rest.size === 'xs' ? 'xs' : 's';
package/styled-components/cjs/examples/plasma_b2c/components/Tooltip/Tooltip.stories.tsx CHANGED
@@ -185,6 +185,7 @@ export const Live: StoryObj<TooltipProps> = {
185
185
  control: {
186
186
  type: 'select',
187
187
  },
188
+ mapping: placements,
188
189
  },
189
190
  size: {
190
191
  options: ['m', 's'],
package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.config.js CHANGED
@@ -14,24 +14,21 @@ var config = exports.config = {
14
14
  },
15
15
  variations: {
16
16
  view: {
17
- "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
18
- secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
19
- accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
17
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
18
+ secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
19
+ positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
20
20
  },
21
21
  size: {
22
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":1.5rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
23
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":1.25rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
24
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":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.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
25
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":0.75rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.pilledBorderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize)
22
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
23
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
24
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":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.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
25
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize)
26
26
  },
27
27
  disabled: {
28
28
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Chip.chipTokens.disabledOpacity)
29
29
  },
30
30
  focused: {
31
31
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Chip.chipTokens.focusColor)
32
- },
33
- pilled: {
34
- "true": /*#__PURE__*/(0, _styledComponents.css)([""])
35
32
  }
36
33
  }
37
34
  };
package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.stories.tsx CHANGED
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
40
40
  export const Default: Story = {
41
41
  args: {
42
42
  text: 'Hello',
43
- view: 'default',
43
+ view: 'primary',
44
44
  size: 'm',
45
45
  disabled: false,
46
46
  focused: true,
47
- pilled: false,
48
47
  onClear,
49
48
  },
50
49
  };
51
50
 
52
51
  export const WithIcon: Story = {
53
52
  args: { ...Default.args },
54
- render: (args) => {
55
- const iconSizeMapper = {
56
- l: '1.5rem',
57
- m: '1.25rem',
58
- s: '1rem',
59
- xs: '0.75rem',
60
- };
61
- const iconSize = args.size || 'm';
62
-
63
- return (
64
- <Chip
65
- contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
66
- {...args}
67
- />
68
- );
69
- },
53
+ render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
70
54
  };
71
55
 
72
56
  export const LongText: Story = {
package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx CHANGED
@@ -70,16 +70,11 @@ type StoryPropsDefault = Omit<
70
70
  | 'chips'
71
71
  | 'onChangeChips'
72
72
  > & {
73
- 'storybook:contentLeft': boolean;
74
- 'storybook:contentRight': boolean;
73
+ enableContentLeft: boolean;
74
+ enableContentRight: boolean;
75
75
  };
76
76
 
77
- const StoryDemo = ({
78
- 'storybook:contentLeft': enableContentLeft,
79
- 'storybook:contentRight': enableContentRight,
80
- view,
81
- ...rest
82
- }: StoryPropsDefault) => {
77
+ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
83
78
  const [text, setText] = useState('Значение поля');
84
79
 
85
80
  const iconSize = rest.size === 'xs' ? 'xs' : 's';
@@ -114,8 +109,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
114
109
  leftHelper: 'Подсказка к полю',
115
110
  disabled: false,
116
111
  readOnly: false,
117
- 'storybook:contentLeft': true,
118
- 'storybook:contentRight': true,
112
+ enableContentLeft: true,
113
+ enableContentRight: true,
119
114
  },
120
115
  render: (args) => <StoryDemo {...args} />,
121
116
  };
@@ -139,16 +134,11 @@ type StoryPropsChips = Omit<
139
134
  | 'required'
140
135
  | 'enumerationType'
141
136
  > & {
142
- 'storybook:contentLeft': boolean;
143
- 'storybook:contentRight': boolean;
137
+ enableContentLeft: boolean;
138
+ enableContentRight: boolean;
144
139
  };
145
140
 
146
- const StoryChips = ({
147
- 'storybook:contentLeft': enableContentLeft,
148
- 'storybook:contentRight': enableContentRight,
149
- view,
150
- ...rest
151
- }: StoryPropsChips) => {
141
+ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
152
142
  const [text, setText] = useState('Значение поля');
153
143
 
154
144
  const iconSize = rest.size === 'xs' ? 'xs' : 's';
package/styled-components/cjs/examples/plasma_web/components/Tooltip/Tooltip.stories.tsx CHANGED
@@ -185,6 +185,7 @@ export const Live: StoryObj<TooltipProps> = {
185
185
  control: {
186
186
  type: 'select',
187
187
  },
188
+ mapping: placements,
188
189
  },
189
190
  size: {
190
191
  options: ['m', 's'],
package/styled-components/cjs/examples/sds_engineer/components/TextField/TextField.stories.tsx CHANGED
@@ -70,16 +70,11 @@ type StoryPropsDefault = Omit<
70
70
  | 'chips'
71
71
  | 'onChangeChips'
72
72
  > & {
73
- 'storybook:contentLeft': boolean;
74
- 'storybook:contentRight': boolean;
73
+ enableContentLeft: boolean;
74
+ enableContentRight: boolean;
75
75
  };
76
76
 
77
- const StoryDemo = ({
78
- 'storybook:contentLeft': enableContentLeft,
79
- 'storybook:contentRight': enableContentRight,
80
- view,
81
- ...rest
82
- }: StoryPropsDefault) => {
77
+ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsDefault) => {
83
78
  const [text, setText] = useState('Значение поля');
84
79
 
85
80
  const iconSize = rest.size === 'xs' ? 'xs' : 's';
@@ -114,8 +109,8 @@ export const Default: StoryObj<StoryPropsDefault> = {
114
109
  leftHelper: 'Подсказка к полю',
115
110
  disabled: false,
116
111
  readOnly: false,
117
- 'storybook:contentLeft': true,
118
- 'storybook:contentRight': true,
112
+ enableContentLeft: true,
113
+ enableContentRight: true,
119
114
  },
120
115
  render: (args) => <StoryDemo {...args} />,
121
116
  };
@@ -139,16 +134,11 @@ type StoryPropsChips = Omit<
139
134
  | 'required'
140
135
  | 'enumerationType'
141
136
  > & {
142
- 'storybook:contentLeft': boolean;
143
- 'storybook:contentRight': boolean;
137
+ enableContentLeft: boolean;
138
+ enableContentRight: boolean;
144
139
  };
145
140
 
146
- const StoryChips = ({
147
- 'storybook:contentLeft': enableContentLeft,
148
- 'storybook:contentRight': enableContentRight,
149
- view,
150
- ...rest
151
- }: StoryPropsChips) => {
141
+ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: StoryPropsChips) => {
152
142
  const [text, setText] = useState('Значение поля');
153
143
 
154
144
  const iconSize = rest.size === 'xs' ? 'xs' : 's';
package/styled-components/cjs/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx CHANGED
@@ -185,6 +185,7 @@ export const Live: StoryObj<TooltipProps> = {
185
185
  control: {
186
186
  type: 'select',
187
187
  },
188
+ mapping: placements,
188
189
  },
189
190
  size: {
190
191
  options: ['m', 's'],
package/styled-components/es/components/Chip/Chip.js CHANGED
@@ -1,18 +1,16 @@
1
- var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "className", "onClear", "onClick", "pilled", "readOnly", "disabled"];
1
+ var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "onClear", "onClick", "readOnly", "disabled"];
2
2
  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); }
3
3
  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; }
4
4
  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; }
5
5
  import React, { forwardRef, useMemo } from 'react';
6
6
  import { IconClose } from '../_Icon/Icons/IconClose';
7
- import { cx } from '../../utils';
8
7
  import { base as viewCSS } from './variations/_view/base';
9
8
  import { base as sizeCSS } from './variations/_size/base';
10
9
  import { base as disabledCSS } from './variations/_disabled/base';
11
10
  import { base as readonlyCSS } from './variations/_readonly/base';
12
11
  import { base as focusedCSS } from './variations/_focused/base';
13
- import { base as pilledCSS } from './variations/_pilled/base';
14
12
  import { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles';
15
- import { classes, tokens } from './Chip.tokens';
13
+ import { tokens } from './Chip.tokens';
16
14
  export var chipRoot = function chipRoot(Root) {
17
15
  return /*#__PURE__*/forwardRef(function (props, ref) {
18
16
  var children = props.children,
@@ -21,18 +19,14 @@ export var chipRoot = function chipRoot(Root) {
21
19
  contentRight = props.contentRight,
22
20
  contentClearButton = props.contentClearButton,
23
21
  size = props.size,
24
- className = props.className,
25
22
  onClear = props.onClear,
26
23
  onClick = props.onClick,
27
- _props$pilled = props.pilled,
28
- pilled = _props$pilled === void 0 ? false : _props$pilled,
29
24
  _props$readOnly = props.readOnly,
30
25
  readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
31
26
  _props$disabled = props.disabled,
32
27
  disabled = _props$disabled === void 0 ? false : _props$disabled,
33
28
  rest = _objectWithoutProperties(props, _excluded);
34
29
  var txt = !text && typeof children === 'string' ? children : text;
35
- var pilledClass = pilled ? classes.pilled : undefined;
36
30
  var handleClick = function handleClick(event) {
37
31
  if (disabled || readOnly) {
38
32
  return;
@@ -49,11 +43,9 @@ export var chipRoot = function chipRoot(Root) {
49
43
  return /*#__PURE__*/React.createElement(Root, _extends({
50
44
  type: "button",
51
45
  ref: ref,
52
- className: cx(pilledClass, className),
53
46
  tabIndex: readOnly ? -1 : 0,
54
47
  onClick: handleClick,
55
48
  disabled: disabled,
56
- pilled: pilled,
57
49
  readOnly: !disabled && readOnly,
58
50
  size: size
59
51
  }, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), ClearContent);
@@ -81,14 +73,10 @@ export var chipConfig = {
81
73
  },
82
74
  focused: {
83
75
  css: focusedCSS
84
- },
85
- pilled: {
86
- css: pilledCSS,
87
- attrs: true
88
76
  }
89
77
  },
90
78
  defaults: {
91
- view: 'default',
79
+ view: 'primary',
92
80
  size: 'm'
93
81
  }
94
82
  };
package/styled-components/es/components/Chip/Chip.template-doc.mdx CHANGED
@@ -72,7 +72,7 @@ export function App() {
72
72
  Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
73
73
  + `"default"` – основная;
74
74
  + `"secondary"` – вторичная;
75
- + `"accent"` – акцентый.
75
+ + `"positive"` – успешное завершение;
76
76
 
77
77
  ```tsx live
78
78
  import React from 'react';
@@ -83,7 +83,7 @@ export function App() {
83
83
  <div>
84
84
  <Chip text="Chip" size="m" view="default" />
85
85
  <Chip text="Chip" size="m" view="secondary" />
86
- <Chip text="Chip" size="m" view="accent" />
86
+ <Chip text="Chip" size="m" view="positive" />
87
87
  </div>
88
88
  );
89
89
  }
package/styled-components/es/components/Chip/Chip.tokens.js CHANGED
@@ -1,6 +1,3 @@
1
- export var classes = {
2
- pilled: 'chip-pilled'
3
- };
4
1
  export var tokens = {
5
2
  background: '--plasma-chip-background',
6
3
  color: '--plasma-chip-color',
@@ -18,7 +15,6 @@ export var tokens = {
18
15
  outlineSize: '--plasma-chip-outline-size',
19
16
  closeIconColor: '--plasma-chip-close-icon-color',
20
17
  borderRadius: '--plasma-chip-border-radius',
21
- pilledBorderRadius: '--plasma-chip-pilled-border-radius',
22
18
  width: '--plasma-chip-width',
23
19
  height: '--plasma-chip-height',
24
20
  paddingTop: '--plasma-chip-padding-top',