@salutejs/plasma-new-hope 0.184.0-canary.1539.11687316067.0 → 0.184.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (142) hide show
  1. package/cjs/components/DatePicker/RangeDate/RangeDate.js +3 -1
  2. package/cjs/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  3. package/cjs/components/Range/Range.js +7 -4
  4. package/cjs/components/Range/Range.js.map +1 -1
  5. package/cjs/components/Switch/Switch.css +7 -11
  6. package/cjs/components/Switch/Switch.js +7 -16
  7. package/cjs/components/Switch/Switch.js.map +1 -1
  8. package/cjs/components/Switch/Switch.styles.js +4 -16
  9. package/cjs/components/Switch/Switch.styles.js.map +1 -1
  10. package/cjs/components/Switch/Switch.styles_1kk0qzz.css +4 -0
  11. package/cjs/components/Switch/Switch.tokens.js +0 -11
  12. package/cjs/components/Switch/Switch.tokens.js.map +1 -1
  13. package/cjs/components/Switch/_focused/base.js +1 -1
  14. package/{es/components/Switch/_focused/base_sz3n0x.css → cjs/components/Switch/_focused/base_j4murk.css} +1 -1
  15. package/cjs/components/Switch/_size/base.js +1 -1
  16. package/cjs/components/Switch/_size/base.js.map +1 -1
  17. package/cjs/components/Switch/_size/base_1rjzpi4.css +1 -0
  18. package/cjs/components/Switch/_view/base.js +1 -1
  19. package/cjs/components/Switch/_view/base.js.map +1 -1
  20. package/cjs/components/Switch/_view/base_1mtyz12.css +1 -0
  21. package/cjs/index.css +7 -11
  22. package/emotion/cjs/components/DatePicker/RangeDate/RangeDate.js +3 -1
  23. package/emotion/cjs/components/Range/Range.js +7 -4
  24. package/emotion/cjs/components/Switch/Switch.js +8 -17
  25. package/emotion/cjs/components/Switch/Switch.styles.js +5 -21
  26. package/emotion/cjs/components/Switch/Switch.template-doc.mdx +1 -37
  27. package/emotion/cjs/components/Switch/Switch.tokens.js +0 -11
  28. package/emotion/cjs/components/Switch/_size/base.js +1 -1
  29. package/emotion/cjs/components/Switch/_view/base.js +1 -1
  30. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
  31. package/emotion/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  32. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.config.js +4 -11
  33. package/emotion/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  34. package/emotion/es/components/DatePicker/RangeDate/RangeDate.js +3 -1
  35. package/emotion/es/components/Range/Range.js +7 -4
  36. package/emotion/es/components/Switch/Switch.js +4 -13
  37. package/emotion/es/components/Switch/Switch.styles.js +4 -20
  38. package/emotion/es/components/Switch/Switch.template-doc.mdx +1 -37
  39. package/emotion/es/components/Switch/Switch.tokens.js +0 -11
  40. package/emotion/es/components/Switch/_size/base.js +2 -2
  41. package/emotion/es/components/Switch/_view/base.js +2 -2
  42. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.config.js +4 -11
  43. package/emotion/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  44. package/emotion/es/examples/plasma_web/components/Switch/Switch.config.js +4 -11
  45. package/emotion/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  46. package/es/components/DatePicker/RangeDate/RangeDate.js +3 -1
  47. package/es/components/DatePicker/RangeDate/RangeDate.js.map +1 -1
  48. package/es/components/Range/Range.js +7 -4
  49. package/es/components/Range/Range.js.map +1 -1
  50. package/es/components/Switch/Switch.css +7 -11
  51. package/es/components/Switch/Switch.js +8 -17
  52. package/es/components/Switch/Switch.js.map +1 -1
  53. package/es/components/Switch/Switch.styles.js +5 -15
  54. package/es/components/Switch/Switch.styles.js.map +1 -1
  55. package/es/components/Switch/Switch.styles_1kk0qzz.css +4 -0
  56. package/es/components/Switch/Switch.tokens.js +0 -11
  57. package/es/components/Switch/Switch.tokens.js.map +1 -1
  58. package/es/components/Switch/_focused/base.js +1 -1
  59. package/{cjs/components/Switch/_focused/base_sz3n0x.css → es/components/Switch/_focused/base_j4murk.css} +1 -1
  60. package/es/components/Switch/_size/base.js +1 -1
  61. package/es/components/Switch/_size/base.js.map +1 -1
  62. package/es/components/Switch/_size/base_1rjzpi4.css +1 -0
  63. package/es/components/Switch/_view/base.js +1 -1
  64. package/es/components/Switch/_view/base.js.map +1 -1
  65. package/es/components/Switch/_view/base_1mtyz12.css +1 -0
  66. package/es/index.css +7 -11
  67. package/package.json +2 -2
  68. package/styled-components/cjs/components/DatePicker/RangeDate/RangeDate.js +3 -1
  69. package/styled-components/cjs/components/Range/Range.js +7 -4
  70. package/styled-components/cjs/components/Switch/Switch.js +8 -17
  71. package/styled-components/cjs/components/Switch/Switch.styles.js +5 -11
  72. package/styled-components/cjs/components/Switch/Switch.template-doc.mdx +1 -37
  73. package/styled-components/cjs/components/Switch/Switch.tokens.js +0 -11
  74. package/styled-components/cjs/components/Switch/_size/base.js +1 -1
  75. package/styled-components/cjs/components/Switch/_view/base.js +1 -1
  76. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
  77. package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  78. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js +2 -9
  79. package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  80. package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js +3 -1
  81. package/styled-components/es/components/Range/Range.js +7 -4
  82. package/styled-components/es/components/Switch/Switch.js +4 -13
  83. package/styled-components/es/components/Switch/Switch.styles.js +4 -10
  84. package/styled-components/es/components/Switch/Switch.template-doc.mdx +1 -37
  85. package/styled-components/es/components/Switch/Switch.tokens.js +0 -11
  86. package/styled-components/es/components/Switch/_size/base.js +2 -2
  87. package/styled-components/es/components/Switch/_view/base.js +2 -2
  88. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js +2 -9
  89. package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx +1 -7
  90. package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js +2 -9
  91. package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx +1 -14
  92. package/types/components/DatePicker/RangeDate/RangeDate.d.ts +2 -0
  93. package/types/components/DatePicker/RangeDate/RangeDate.d.ts.map +1 -1
  94. package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts +3 -0
  95. package/types/components/DatePicker/RangeDate/RangeDate.styles.d.ts.map +1 -1
  96. package/types/components/Range/Range.d.ts.map +1 -1
  97. package/types/components/Range/Range.types.d.ts +4 -0
  98. package/types/components/Range/Range.types.d.ts.map +1 -1
  99. package/types/components/Switch/Switch.d.ts +0 -3
  100. package/types/components/Switch/Switch.d.ts.map +1 -1
  101. package/types/components/Switch/Switch.styles.d.ts +0 -2
  102. package/types/components/Switch/Switch.styles.d.ts.map +1 -1
  103. package/types/components/Switch/Switch.tokens.d.ts +0 -9
  104. package/types/components/Switch/Switch.tokens.d.ts.map +1 -1
  105. package/types/components/Switch/Switch.types.d.ts +2 -10
  106. package/types/components/Switch/Switch.types.d.ts.map +1 -1
  107. package/types/components/Switch/_size/base.d.ts.map +1 -1
  108. package/types/components/Switch/_view/base.d.ts.map +1 -1
  109. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts +1 -0
  110. package/types/examples/plasma_b2c/components/DatePicker/DatePicker.d.ts.map +1 -1
  111. package/types/examples/plasma_b2c/components/Range/Range.d.ts +3 -0
  112. package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -1
  113. package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts +0 -7
  114. package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map +1 -1
  115. package/types/examples/plasma_b2c/components/Switch/Switch.d.ts +0 -6
  116. package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map +1 -1
  117. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts +1 -0
  118. package/types/examples/plasma_web/components/DatePicker/DatePicker.d.ts.map +1 -1
  119. package/types/examples/plasma_web/components/Range/Range.d.ts +3 -0
  120. package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -1
  121. package/types/examples/plasma_web/components/Switch/Switch.config.d.ts +0 -7
  122. package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map +1 -1
  123. package/types/examples/plasma_web/components/Switch/Switch.d.ts +0 -6
  124. package/types/examples/plasma_web/components/Switch/Switch.d.ts.map +1 -1
  125. package/cjs/components/Switch/Switch.styles_bei7bh.css +0 -6
  126. package/cjs/components/Switch/_size/base_1tcl212.css +0 -1
  127. package/cjs/components/Switch/_toggleSize/base.js +0 -9
  128. package/cjs/components/Switch/_toggleSize/base.js.map +0 -1
  129. package/cjs/components/Switch/_toggleSize/base_6i0904.css +0 -1
  130. package/cjs/components/Switch/_view/base_yxkf3s.css +0 -1
  131. package/emotion/cjs/components/Switch/_toggleSize/base.js +0 -10
  132. package/emotion/es/components/Switch/_toggleSize/base.js +0 -4
  133. package/es/components/Switch/Switch.styles_bei7bh.css +0 -6
  134. package/es/components/Switch/_size/base_1tcl212.css +0 -1
  135. package/es/components/Switch/_toggleSize/base.js +0 -5
  136. package/es/components/Switch/_toggleSize/base.js.map +0 -1
  137. package/es/components/Switch/_toggleSize/base_6i0904.css +0 -1
  138. package/es/components/Switch/_view/base_yxkf3s.css +0 -1
  139. package/styled-components/cjs/components/Switch/_toggleSize/base.js +0 -10
  140. package/styled-components/es/components/Switch/_toggleSize/base.js +0 -4
  141. package/types/components/Switch/_toggleSize/base.d.ts +0 -2
  142. package/types/components/Switch/_toggleSize/base.d.ts.map +0 -1
@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.switchRoot = exports.switchConfig = void 0;
8
8
  var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
9
9
  var _base = /*#__PURE__*/require("../Switch/_size/base");
10
- var _base2 = /*#__PURE__*/require("../Switch/_toggleSize/base");
11
- var _base3 = /*#__PURE__*/require("../Switch/_view/base");
12
- var _base4 = /*#__PURE__*/require("../Switch/_focused/base");
13
- var _base5 = /*#__PURE__*/require("../Switch/_disabled/base");
10
+ var _base2 = /*#__PURE__*/require("../Switch/_view/base");
11
+ var _base3 = /*#__PURE__*/require("../Switch/_focused/base");
12
+ var _base4 = /*#__PURE__*/require("../Switch/_disabled/base");
14
13
  var _utils = /*#__PURE__*/require("../../utils");
15
14
  var _Switch = /*#__PURE__*/require("./Switch.styles");
16
15
  var _Switch2 = /*#__PURE__*/require("./Switch.tokens");
17
16
  var _StyledTrigger;
18
- var _excluded = ["size", "toggleSize", "view", "focused", "outlined", "disabled", "labelPosition", "label", "description", "id", "style", "className", "checked", "pressed", "defaultChecked"];
17
+ var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
19
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); }
20
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 && {}.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; }
21
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); }
@@ -24,14 +23,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
24
23
  var switchRoot = exports.switchRoot = function switchRoot(Root) {
25
24
  return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
26
25
  var size = props.size,
27
- toggleSize = props.toggleSize,
28
26
  view = props.view,
29
27
  focused = props.focused,
30
28
  outlined = props.outlined,
31
29
  disabled = props.disabled,
32
30
  labelPosition = props.labelPosition,
33
31
  label = props.label,
34
- description = props.description,
35
32
  id = props.id,
36
33
  style = props.style,
37
34
  className = props.className,
@@ -43,15 +40,12 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
43
40
  return /*#__PURE__*/_react["default"].createElement(Root, {
44
41
  view: view,
45
42
  size: size,
46
- toggleSize: toggleSize,
47
43
  disabled: disabled,
48
44
  focused: focused !== null && focused !== void 0 ? focused : outlined,
49
45
  labelPosition: labelPosition,
50
46
  id: id,
51
47
  style: style,
52
- className: (0, _utils.cx)(className)
53
- }, /*#__PURE__*/_react["default"].createElement(_Switch.StyledContent, {
54
- className: (0, _utils.cx)(_Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
48
+ className: (0, _utils.cx)(className, _Switch2.classes["".concat(labelPosition, "SwitchLabelPosition")])
55
49
  }, /*#__PURE__*/_react["default"].createElement(_Switch.StyledInput, _extends({}, rest, {
56
50
  ref: ref,
57
51
  role: "switch",
@@ -64,7 +58,7 @@ var switchRoot = exports.switchRoot = function switchRoot(Root) {
64
58
  tabIndex: -1
65
59
  }, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/_react["default"].createElement(_Switch.StyledTrigger, {
66
60
  "aria-hidden": true
67
- }))), description && /*#__PURE__*/_react["default"].createElement(_Switch.StyledDescription, null, description));
61
+ })));
68
62
  });
69
63
  };
70
64
  var switchConfig = exports.switchConfig = {
@@ -77,17 +71,14 @@ var switchConfig = exports.switchConfig = {
77
71
  css: _base.base
78
72
  },
79
73
  view: {
80
- css: _base3.base
81
- },
82
- toggleSize: {
83
74
  css: _base2.base
84
75
  },
85
76
  disabled: {
86
- css: _base5.base,
77
+ css: _base4.base,
87
78
  attrs: true
88
79
  },
89
80
  focused: {
90
- css: _base4.base
81
+ css: _base3.base
91
82
  }
92
83
  },
93
84
  defaults: {
@@ -4,25 +4,19 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = exports.StyledDescription = exports.StyledContent = void 0;
7
+ exports.base = exports.StyledTrigger = exports.StyledLabel = exports.StyledInput = void 0;
8
8
  var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
9
9
  var _mixins = /*#__PURE__*/require("../../mixins");
10
10
  var _Switch = /*#__PURE__*/require("./Switch.tokens");
11
11
  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); }
12
12
  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 && {}.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; }
13
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;flex-direction:column;gap:var(", ");cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}"], _Switch.tokens.verticalGap);
14
- var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
15
- componentId: "plasma-new-hope__sc-i4fgom-0"
16
- })(["width:100%;position:relative;display:flex;align-items:center;&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
17
- var StyledDescription = exports.StyledDescription = /*#__PURE__*/_styledComponents["default"].div.withConfig({
18
- componentId: "plasma-new-hope__sc-i4fgom-1"
19
- })(["position:relative;"]);
13
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], _Switch.classes.beforeSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset, _Switch.classes.afterSwitchLabelPosition, _Switch.tokens.labelOffsetPrivate, _Switch.tokens.labelOffset);
20
14
  var StyledInput = exports.StyledInput = /*#__PURE__*/_styledComponents["default"].input.withConfig({
21
- componentId: "plasma-new-hope__sc-i4fgom-2"
15
+ componentId: "plasma-new-hope__sc-i4fgom-0"
22
16
  })(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
23
17
  var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].span.withConfig({
24
- componentId: "plasma-new-hope__sc-i4fgom-3"
18
+ componentId: "plasma-new-hope__sc-i4fgom-1"
25
19
  })(["user-select:none;", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
26
20
  var StyledTrigger = exports.StyledTrigger = /*#__PURE__*/_styledComponents["default"].div.withConfig({
27
- componentId: "plasma-new-hope__sc-i4fgom-4"
21
+ componentId: "plasma-new-hope__sc-i4fgom-2"
28
22
  })(["position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}", ":checked ~ &::after{right:0;left:auto;}"], StyledInput);
@@ -18,43 +18,7 @@ import { Switch } from '@salutejs/{{ package }}';
18
18
 
19
19
  export function App() {
20
20
  return (
21
- <Switch description="Описание переключателя" label="Переключатель" defaultChecked />
22
- );
23
- }
24
- ```
25
-
26
- ## Примеры
27
-
28
- ### Размер Switch
29
- Размер компонента задается с помощью свойства `size`.
30
-
31
- ```tsx live
32
- import React from 'react';
33
- import { Button } from '@salutejs/{{ package }}';
34
-
35
- export function App() {
36
- return (
37
- <div>
38
- <Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
39
- <Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
40
- <Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
41
- </div>
42
- );
43
- }
44
- ```
45
-
46
- Размер переключателя задается с помощью свойства `toggleSize`.
47
-
48
- ```tsx live
49
- import React from 'react';
50
- import { Button } from '@salutejs/{{ package }}';
51
-
52
- export function App() {
53
- return (
54
- <div style=\{{ alignItems: "center" }}>
55
- <Switch toggleSize="s" label="Переключатель" defaultChecked />
56
- <Switch toggleSize="l" label="Переключатель" defaultChecked />
57
- </div>
21
+ <Switch label="Переключатель" defaultChecked />
58
22
  );
59
23
  }
60
24
  ```
@@ -11,22 +11,11 @@ var tokens = exports.tokens = {
11
11
  fontWeight: '--plasma-switch-font-weight',
12
12
  letterSpacing: '--plasma-switch-letter-spacing',
13
13
  lineHeight: '--plasma-switch-line-height',
14
- /* Токены description */
15
- descriptionFontFamily: '--plasma-switch-description-font-family',
16
- descriptionFontStyle: '--plasma-switch-description-font-style',
17
- descriptionFontSize: '--plasma-switch-description-font-size',
18
- descriptionFontWeight: '--plasma-switch-description-font-weight',
19
- descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
20
- descriptionLineHeight: '--plasma-switch-description-line-height',
21
14
  /* Цвет подписи */
22
15
  labelColor: '--plasma-switch__label-color',
23
16
  labelOffset: '--plasma-switch__label-offset',
24
- /* Цвет описания */
25
- descriptionColor: '--plasma-switch__description-color',
26
- descriptionOffset: '--plasma-switch__description-offset',
27
17
  /** Прозрачность для всего компонента в состоянии disabled */
28
18
  disabledOpacity: '--plasma-switch-disabled-opacity',
29
- verticalGap: '--plasma-switch-vertical-gap',
30
19
  trackWidth: '--plasma-switch__track-width',
31
20
  trackHeight: '--plasma-switch__track-height',
32
21
  trackBorderRadius: '--plasma-switch__track-border-radius',
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _Switch = /*#__PURE__*/require("../Switch.tokens");
9
9
  var _Switch2 = /*#__PURE__*/require("../Switch.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{margin:var(", ",0);}"], _Switch2.StyledContent, _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledDescription, _Switch.tokens.descriptionFontFamily, _Switch.tokens.descriptionFontStyle, _Switch.tokens.descriptionFontWeight, _Switch.tokens.descriptionLetterSpacing, _Switch.tokens.descriptionLineHeight, _Switch.tokens.descriptionFontSize, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(", ",0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], _Switch.tokens.fontFamily, _Switch.tokens.fontStyle, _Switch.tokens.fontWeight, _Switch.tokens.letterSpacing, _Switch.tokens.lineHeight, _Switch.tokens.fontSize, _Switch2.StyledTrigger, _Switch.tokens.trackWidth, _Switch.tokens.trackWidth, _Switch.tokens.trackHeight, _Switch.tokens.trackBorderRadius, _Switch.tokens.thumbSize, _Switch.tokens.thumbSize, _Switch.tokens.thumbBorderRadius, _Switch.tokens.thumbOffset, _Switch2.StyledLabel, _Switch.tokens.labelOffsetPrivate, _Switch2.StyledTrigger, _Switch.tokens.thumbSize, _Switch.tokens.thumbPressScale);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _Switch = /*#__PURE__*/require("../Switch.tokens");
9
9
  var _Switch2 = /*#__PURE__*/require("../Switch.styles");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", ");}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow, _Switch2.StyledLabel, _Switch.tokens.labelColor, _Switch2.StyledDescription, _Switch.tokens.descriptionColor);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.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(", "));}"], _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOffHover, _Switch.tokens.trackBackgroundColorOff, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.trackBackgroundColorOnHover, _Switch.tokens.trackBackgroundColorOn, _Switch2.StyledTrigger, _Switch.tokens.thumbBackgroundColor, _Switch.tokens.thumbBoxShadow, _Switch2.StyledInput, _Switch2.StyledTrigger, _Switch.tokens.thumbBoxShadowOn, _Switch.tokens.thumbBoxShadow);
@@ -10,22 +10,15 @@ var config = exports.config = {
10
10
  defaults: {
11
11
  view: 'default',
12
12
  size: 'm',
13
- toggleSize: 'l',
14
13
  labelPosition: 'before',
15
14
  focused: 'true'
16
15
  },
17
16
  variations: {
18
17
  size: {
19
- 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),
20
- 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),
21
- 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)
22
- },
23
- toggleSize: {
24
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":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),
25
- 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)
18
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _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, _Switch.switchTokens.labelOffset)
26
19
  },
27
20
  view: {
28
- "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)
21
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":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.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
29
22
  },
30
23
  disabled: {
31
24
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
@@ -18,7 +18,7 @@ const meta: Meta<SwitchProps> = {
18
18
  decorators: [WithTheme],
19
19
  component: Switch,
20
20
  argTypes: {
21
- ...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
21
+ ...argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
22
22
  labelPosition: {
23
23
  options: ['before', 'after'],
24
24
  control: { type: 'select' },
@@ -26,7 +26,6 @@ const meta: Meta<SwitchProps> = {
26
26
  },
27
27
  args: {
28
28
  label: 'Label',
29
- description: 'Description',
30
29
  labelPosition: 'before',
31
30
  },
32
31
  };
@@ -65,10 +64,5 @@ const StoryDefault = (args: SwitchProps) => {
65
64
  };
66
65
 
67
66
  export const Default: StoryObj<SwitchProps> = {
68
- args: {
69
- size: 'm',
70
- toggleSize: 'l',
71
- disabled: false,
72
- },
73
67
  render: (args) => <StoryDefault {...args} />,
74
68
  };
@@ -10,22 +10,15 @@ var config = exports.config = {
10
10
  defaults: {
11
11
  view: 'default',
12
12
  size: 'm',
13
- toggleSize: 'l',
14
13
  labelPosition: 'before',
15
14
  focused: 'true'
16
15
  },
17
16
  variations: {
18
17
  size: {
19
- 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),
20
- 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),
21
- 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)
22
- },
23
- toggleSize: {
24
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":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),
25
- 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)
18
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _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, _Switch.switchTokens.labelOffset)
26
19
  },
27
20
  view: {
28
- "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)
21
+ "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":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.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
29
22
  },
30
23
  disabled: {
31
24
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
@@ -17,17 +17,9 @@ const meta: Meta<SwitchProps> = {
17
17
  title: 'plasma_web/Switch',
18
18
  decorators: [WithTheme],
19
19
  component: Switch,
20
- argTypes: {
21
- ...argTypesFromConfig(mergeConfig(switchConfig, config), ['view', 'focused']),
22
- labelPosition: {
23
- options: ['before', 'after'],
24
- control: { type: 'select' },
25
- },
26
- },
20
+ argTypes: argTypesFromConfig(mergeConfig(switchConfig, config), ['size', 'view', 'focused']),
27
21
  args: {
28
22
  label: 'Label',
29
- description: 'Description',
30
- labelPosition: 'before',
31
23
  },
32
24
  };
33
25
 
@@ -65,10 +57,5 @@ const StoryDefault = (args: SwitchProps) => {
65
57
  };
66
58
 
67
59
  export const Default: StoryObj<SwitchProps> = {
68
- args: {
69
- size: 'm',
70
- toggleSize: 'l',
71
- disabled: false,
72
- },
73
60
  render: (args) => <StoryDefault {...args} />,
74
61
  };
@@ -1,4 +1,4 @@
1
- var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
1
+ var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  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."); }
@@ -26,6 +26,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
26
26
  return /*#__PURE__*/forwardRef(function (_ref, ref) {
27
27
  var _rangeRef$current, _rangeRef$current2;
28
28
  var className = _ref.className,
29
+ autoComplete = _ref.autoComplete,
29
30
  _ref$isDoubleCalendar = _ref.isDoubleCalendar,
30
31
  isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
31
32
  _ref$opened = _ref.opened,
@@ -265,6 +266,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
265
266
  onKeyDown = _useKeyNavigation.onKeyDown;
266
267
  var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
267
268
  ref: rangeRef,
269
+ autoComplete: autoComplete,
268
270
  dividerIcon: dividerIcon,
269
271
  dividerVariant: dividerVariant,
270
272
  disabled: disabled,
@@ -1,5 +1,5 @@
1
1
  var _StyledDivider;
2
- var _excluded = ["label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "firstValue", "secondValue", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "onChangeFirstValue", "onChangeSecondValue", "onSearchFirstValue", "onSearchSecondValue", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
2
+ var _excluded = ["autoComplete", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "firstValue", "secondValue", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "onChangeFirstValue", "onChangeSecondValue", "onSearchFirstValue", "onSearchSecondValue", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
3
3
  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); }
4
4
  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; }
5
5
  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; }
@@ -15,7 +15,8 @@ import { classes } from './Range.tokens';
15
15
  export var rangeRoot = function rangeRoot(Root) {
16
16
  return /*#__PURE__*/forwardRef(function (_ref, ref) {
17
17
  var _StyledDivider2;
18
- var label = _ref.label,
18
+ var autoComplete = _ref.autoComplete,
19
+ label = _ref.label,
19
20
  leftHelper = _ref.leftHelper,
20
21
  contentLeft = _ref.contentLeft,
21
22
  contentRight = _ref.contentRight,
@@ -107,7 +108,8 @@ export var rangeRoot = function rangeRoot(Root) {
107
108
  onChange: handleChangeFirstValue,
108
109
  onSearch: handleSearchFirstValue,
109
110
  onFocus: onFocusFirstTextfield,
110
- onBlur: onBlurFirstTextfield
111
+ onBlur: onBlurFirstTextfield,
112
+ autoComplete: autoComplete
111
113
  }), Divider, /*#__PURE__*/React.createElement(StyledInput, {
112
114
  ref: secondTextFieldRef,
113
115
  className: cx(secondValueErrorClass, secondValueSuccessClass),
@@ -122,7 +124,8 @@ export var rangeRoot = function rangeRoot(Root) {
122
124
  onChange: handleChangeSecondValue,
123
125
  onSearch: handleSearchSecondValue,
124
126
  onFocus: onFocusSecondTextfield,
125
- onBlur: onBlurSecondTextfield
127
+ onBlur: onBlurSecondTextfield,
128
+ autoComplete: autoComplete
126
129
  }), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper));
127
130
  });
128
131
  };
@@ -1,28 +1,25 @@
1
1
  var _StyledTrigger;
2
- var _excluded = ["size", "toggleSize", "view", "focused", "outlined", "disabled", "labelPosition", "label", "description", "id", "style", "className", "checked", "pressed", "defaultChecked"];
2
+ var _excluded = ["size", "view", "focused", "outlined", "disabled", "labelPosition", "label", "id", "style", "className", "checked", "pressed", "defaultChecked"];
3
3
  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); }
4
4
  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; }
5
5
  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; }
6
6
  import React, { forwardRef } from 'react';
7
7
  import { base as sizeCSS } from '../Switch/_size/base';
8
- import { base as toggleSizeCSS } from '../Switch/_toggleSize/base';
9
8
  import { base as viewCSS } from '../Switch/_view/base';
10
9
  import { base as focusedCSS } from '../Switch/_focused/base';
11
10
  import { base as disabledCSS } from '../Switch/_disabled/base';
12
11
  import { cx } from '../../utils';
13
- import { StyledContent, StyledDescription, StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';
12
+ import { StyledInput, StyledLabel, StyledTrigger, base } from './Switch.styles';
14
13
  import { classes } from './Switch.tokens';
15
14
  export var switchRoot = function switchRoot(Root) {
16
15
  return /*#__PURE__*/forwardRef(function (props, ref) {
17
16
  var size = props.size,
18
- toggleSize = props.toggleSize,
19
17
  view = props.view,
20
18
  focused = props.focused,
21
19
  outlined = props.outlined,
22
20
  disabled = props.disabled,
23
21
  labelPosition = props.labelPosition,
24
22
  label = props.label,
25
- description = props.description,
26
23
  id = props.id,
27
24
  style = props.style,
28
25
  className = props.className,
@@ -34,15 +31,12 @@ export var switchRoot = function switchRoot(Root) {
34
31
  return /*#__PURE__*/React.createElement(Root, {
35
32
  view: view,
36
33
  size: size,
37
- toggleSize: toggleSize,
38
34
  disabled: disabled,
39
35
  focused: focused !== null && focused !== void 0 ? focused : outlined,
40
36
  labelPosition: labelPosition,
41
37
  id: id,
42
38
  style: style,
43
- className: cx(className)
44
- }, /*#__PURE__*/React.createElement(StyledContent, {
45
- className: cx(classes["".concat(labelPosition, "SwitchLabelPosition")])
39
+ className: cx(className, classes["".concat(labelPosition, "SwitchLabelPosition")])
46
40
  }, /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
47
41
  ref: ref,
48
42
  role: "switch",
@@ -55,7 +49,7 @@ export var switchRoot = function switchRoot(Root) {
55
49
  tabIndex: -1
56
50
  }, label), _StyledTrigger || (_StyledTrigger = /*#__PURE__*/React.createElement(StyledTrigger, {
57
51
  "aria-hidden": true
58
- }))), description && /*#__PURE__*/React.createElement(StyledDescription, null, description));
52
+ })));
59
53
  });
60
54
  };
61
55
  export var switchConfig = {
@@ -70,9 +64,6 @@ export var switchConfig = {
70
64
  view: {
71
65
  css: viewCSS
72
66
  },
73
- toggleSize: {
74
- css: toggleSizeCSS
75
- },
76
67
  disabled: {
77
68
  css: disabledCSS,
78
69
  attrs: true
@@ -2,19 +2,13 @@ import styled from 'styled-components';
2
2
  import { css } from 'styled-components';
3
3
  import { applyEllipsis } from '../../mixins';
4
4
  import { classes, tokens } from './Switch.tokens';
5
- export var base = /*#__PURE__*/css(["position:relative;display:flex;flex-direction:column;gap:var(", ");cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}"], tokens.verticalGap);
6
- export var StyledContent = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "plasma-new-hope__sc-i4fgom-0"
8
- })(["width:100%;position:relative;display:flex;align-items:center;&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
9
- export var StyledDescription = /*#__PURE__*/styled.div.withConfig({
10
- componentId: "plasma-new-hope__sc-i4fgom-1"
11
- })(["position:relative;"]);
5
+ export var base = /*#__PURE__*/css(["position:relative;display:flex;align-items:center;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);&:focus{outline:0 none;}&.", "{justify-content:space-between;", ":0 var(", ") 0 0;}&.", "{justify-content:start;flex-direction:row-reverse;", ":0 0 0 var(", ");}"], classes.beforeSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset, classes.afterSwitchLabelPosition, tokens.labelOffsetPrivate, tokens.labelOffset);
12
6
  export var StyledInput = /*#__PURE__*/styled.input.withConfig({
13
- componentId: "plasma-new-hope__sc-i4fgom-2"
7
+ componentId: "plasma-new-hope__sc-i4fgom-0"
14
8
  })(["position:absolute;right:0;margin:0;opacity:0;&:focus{outline:0 none;}"]);
15
9
  export var StyledLabel = /*#__PURE__*/styled.span.withConfig({
16
- componentId: "plasma-new-hope__sc-i4fgom-3"
10
+ componentId: "plasma-new-hope__sc-i4fgom-1"
17
11
  })(["user-select:none;", ""], /*#__PURE__*/applyEllipsis());
18
12
  export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
19
- componentId: "plasma-new-hope__sc-i4fgom-4"
13
+ componentId: "plasma-new-hope__sc-i4fgom-2"
20
14
  })(["position:relative;display:flex;align-items:center;transition:background-color 0.15s ease-in-out 0.1s;::after{content:'';position:absolute;right:auto;left:0;transition:width 0.15s ease-in-out 0s,left 0.3s ease-in-out 0s,right 0.3s ease-in-out 0s;}", ":checked ~ &::after{right:0;left:auto;}"], StyledInput);
@@ -18,43 +18,7 @@ import { Switch } from '@salutejs/{{ package }}';
18
18
 
19
19
  export function App() {
20
20
  return (
21
- <Switch description="Описание переключателя" label="Переключатель" defaultChecked />
22
- );
23
- }
24
- ```
25
-
26
- ## Примеры
27
-
28
- ### Размер Switch
29
- Размер компонента задается с помощью свойства `size`.
30
-
31
- ```tsx live
32
- import React from 'react';
33
- import { Button } from '@salutejs/{{ package }}';
34
-
35
- export function App() {
36
- return (
37
- <div>
38
- <Switch size="s" description="Описание переключателя" label="Переключатель" defaultChecked />
39
- <Switch size="m" description="Описание переключателя" label="Переключатель" defaultChecked />
40
- <Switch size="l" description="Описание переключателя" label="Переключатель" defaultChecked />
41
- </div>
42
- );
43
- }
44
- ```
45
-
46
- Размер переключателя задается с помощью свойства `toggleSize`.
47
-
48
- ```tsx live
49
- import React from 'react';
50
- import { Button } from '@salutejs/{{ package }}';
51
-
52
- export function App() {
53
- return (
54
- <div style=\{{ alignItems: "center" }}>
55
- <Switch toggleSize="s" label="Переключатель" defaultChecked />
56
- <Switch toggleSize="l" label="Переключатель" defaultChecked />
57
- </div>
21
+ <Switch label="Переключатель" defaultChecked />
58
22
  );
59
23
  }
60
24
  ```
@@ -5,22 +5,11 @@ export var tokens = {
5
5
  fontWeight: '--plasma-switch-font-weight',
6
6
  letterSpacing: '--plasma-switch-letter-spacing',
7
7
  lineHeight: '--plasma-switch-line-height',
8
- /* Токены description */
9
- descriptionFontFamily: '--plasma-switch-description-font-family',
10
- descriptionFontStyle: '--plasma-switch-description-font-style',
11
- descriptionFontSize: '--plasma-switch-description-font-size',
12
- descriptionFontWeight: '--plasma-switch-description-font-weight',
13
- descriptionLetterSpacing: '--plasma-switch-description-letter-spacing',
14
- descriptionLineHeight: '--plasma-switch-description-line-height',
15
8
  /* Цвет подписи */
16
9
  labelColor: '--plasma-switch__label-color',
17
10
  labelOffset: '--plasma-switch__label-offset',
18
- /* Цвет описания */
19
- descriptionColor: '--plasma-switch__description-color',
20
- descriptionOffset: '--plasma-switch__description-offset',
21
11
  /** Прозрачность для всего компонента в состоянии disabled */
22
12
  disabledOpacity: '--plasma-switch-disabled-opacity',
23
- verticalGap: '--plasma-switch-vertical-gap',
24
13
  trackWidth: '--plasma-switch__track-width',
25
14
  trackHeight: '--plasma-switch__track-height',
26
15
  trackBorderRadius: '--plasma-switch__track-border-radius',
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../Switch.tokens';
3
- import { StyledContent, StyledDescription, StyledLabel } from '../Switch.styles';
4
- export var base = /*#__PURE__*/css(["", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");}", "{margin:var(", ",0);}"], StyledContent, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledDescription, tokens.descriptionFontFamily, tokens.descriptionFontStyle, tokens.descriptionFontWeight, tokens.descriptionLetterSpacing, tokens.descriptionLineHeight, tokens.descriptionFontSize, StyledLabel, tokens.labelOffsetPrivate);
3
+ import { StyledLabel, StyledTrigger } from '../Switch.styles';
4
+ export var base = /*#__PURE__*/css(["font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");font-size:var(", ");", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}", "{margin:var(", ",0);}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.fontSize, StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledLabel, tokens.labelOffsetPrivate, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { tokens } from '../Switch.tokens';
3
- import { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';
4
- 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);
3
+ import { StyledTrigger, StyledInput } from '../Switch.styles';
4
+ 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(", "));}"], 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);