@salutejs/plasma-new-hope 0.80.0-canary.1176.9060349970.0 → 0.80.0-canary.1194.9058672177.0

package/styled-components/cjs/components/Checkbox/IconsSvg.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Indeterminate = exports.Done = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
-var _Checkbox = /*#__PURE__*/require("./Checkbox.tokens");
+var _path, _path2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Done = exports.Done = function Done() {
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -17,12 +17,12 @@ var Done = exports.Done = function Done() {
     viewBox: "0 0 18 18",
     fill: "none",
     style: {
-      width: "var(".concat(_Checkbox.tokens.triggerSize, ")")
+      width: 'var(--plasma-checkbox-trigger-size)'
     }
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    fill: "var(".concat(_Checkbox.tokens.iconColor, ")"),
+  }, _path || (_path = /*#__PURE__*/_react["default"].createElement("path", {
+    fill: "var(--plasma-checkbox-icon-color)",
     d: "m5.70711,8.15582c-0.39053,-0.39052 -1.02369,-0.39052 -1.41422,0c-0.39052,0.39053 -0.39052,1.02369 0,1.41422l3.70666,3.70666l6.71095,-6.70248c0.3908,-0.39027 0.3912,-1.02344 0.0009,-1.41421c-0.3903,-0.39077 -1.02344,-0.39117 -1.41421,-0.00089l-5.29674,5.29004l-2.29334,-2.29334z"
-  })));
+  }))));
 };
 var Indeterminate = exports.Indeterminate = function Indeterminate() {
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -34,12 +34,12 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
     viewBox: "0 0 18 18",
     fill: "none",
     style: {
-      width: "var(".concat(_Checkbox.tokens.triggerSize, ")")
+      width: 'var(--plasma-checkbox-trigger-size)'
     }
-  }, /*#__PURE__*/_react["default"].createElement("path", {
+  }, _path2 || (_path2 = /*#__PURE__*/_react["default"].createElement("path", {
     strokeLinecap: "round",
     strokeWidth: "2",
-    stroke: "var(".concat(_Checkbox.tokens.iconColor, ")"),
+    stroke: "var(--plasma-checkbox-icon-color)",
     d: "m5.09449,9.0315l8,0"
-  })));
+  }))));
 };

package/styled-components/cjs/components/{Radiobox/variations → Checkbox}/_disabled/base.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _Radiobox = /*#__PURE__*/require("../../Radiobox.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["input:disabled + label{opacity:var(", ");}input:disabled + label{cursor:not-allowed;}"], _Radiobox.tokens.disabledOpacity);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["input:disabled + label{opacity:var(--plasma-checkbox-disabled-opacity);}input:disabled + label{cursor:not-allowed;}"]);

package/styled-components/cjs/components/Checkbox/_focused/base.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _mixins = /*#__PURE__*/require("../../../mixins");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".checkbox-trigger{", "}input[data-focus-visible-added] + label .checkbox-trigger{border-color:transparent;", "}input[data-focus-visible-added]:checked + label .checkbox-trigger,input[type='checkbox'][data-focus-visible-added]:indeterminate + label .checkbox-trigger{", "}"], /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '0',
+  outlineSize: '0.125rem',
+  outlineRadius: 'var(--plasma-checkbox-trigger-border-radius)',
+  outlineColor: 'transparent'
+}), /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.188rem',
+  outlineSize: '0.125rem',
+  outlineRadius: 'var(--plasma-checkbox-trigger-border-radius)',
+  outlineColor: 'var(--plasma-checkbox-focus-color)',
+  customFocusRules: "\n                &::before {\n                    box-shadow: 0 0 0 0.125rem var(--plasma-checkbox-focus-color);\n                }\n            "
+}), /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.125rem',
+  outlineSize: '0.063rem',
+  outlineRadius: 'calc(var(--plasma-checkbox-trigger-border-radius) + 0.125rem)',
+  outlineColor: 'var(--plasma-checkbox-focus-color)',
+  customFocusRules: "\n                &::before {\n                    box-shadow: 0 0 0 0.063rem var(--plasma-checkbox-focus-color);\n                }\n            "
+}));

package/styled-components/cjs/components/Checkbox/_view/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["input[type='checkbox']:indeterminate + label .checkbox-trigger{border:none;background:var(--plasma-checkbox-fill-color);border-color:var(--plasma-checkbox-fill-color);}input:checked + label .checkbox-trigger{border:none;background:var(--plasma-checkbox-fill-color);border-color:var(--plasma-checkbox-fill-color);}"]);

package/styled-components/cjs/components/Checkbox/_view/tokens.json

@@ -0,0 +1 @@
+["--plasma-checkbox-fill-color", "--plasma-checkbox-icon-color"]

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

@@ -15,11 +15,4 @@ Object.defineProperty(exports, "checkboxRoot", {
     return _Checkbox.checkboxRoot;
   }
 });
-Object.defineProperty(exports, "checkboxTokens", {
-  enumerable: true,
-  get: function get() {
-    return _Checkbox2.tokens;
-  }
-});
-var _Checkbox = /*#__PURE__*/require("./Checkbox");
-var _Checkbox2 = /*#__PURE__*/require("./Checkbox.tokens");
+var _Checkbox = /*#__PURE__*/require("./Checkbox");

package/styled-components/cjs/components/Radiobox/Radiobox.js

@@ -6,22 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.radioboxRoot = exports.radioboxConfig = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
-var _Checkbox = /*#__PURE__*/require("../Checkbox/Checkbox.styles");
+var _mixins = /*#__PURE__*/require("../../mixins");
+var _Checkbox = /*#__PURE__*/require("../Checkbox/Checkbox");
 var _utils = /*#__PURE__*/require("../../utils");
-var _base = /*#__PURE__*/require("./variations/_view/base");
-var _base2 = /*#__PURE__*/require("./variations/_size/base");
-var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
-var _base4 = /*#__PURE__*/require("./variations/_focused/base");
-var _Radiobox = /*#__PURE__*/require("./Radiobox.styles");
-var _Radiobox2 = /*#__PURE__*/require("./Radiobox.tokens");
-var _StyledEllipse;
+var _base = /*#__PURE__*/require("./_view/base");
+var _base2 = /*#__PURE__*/require("./_size/base");
+var _base3 = /*#__PURE__*/require("./_disabled/base");
+var _base4 = /*#__PURE__*/require("./_focused/base");
 var _excluded = ["size", "view", "focused", "disabled", "id", "label", "description", "style", "className", "singleLine", "aria-label"];
+var _templateObject, _StyledEllipse;
 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); }
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
+var mappingOverride = "\n    --plasma-checkbox-label-font-family: var(--plasma-radiobox-label-font-family);\n    --plasma-checkbox-label-font-size: var(--plasma-radiobox-label-font-size);\n    --plasma-checkbox-label-font-style: var(--plasma-radiobox-label-font-style);\n    --plasma-checkbox-label-font-weight: var(--plasma-radiobox-label-font-weight);\n    --plasma-checkbox-label-letter-spacing: var(--plasma-radiobox-label-letter-spacing);\n    --plasma-checkbox-label-line-height: var(--plasma-radiobox-label-line-height);\n    --plasma-checkbox-description-font-family: var(--plasma-radiobox-description-font-family);\n    --plasma-checkbox-description-font-size: var(--plasma-radiobox-description-font-size);\n    --plasma-checkbox-description-font-style: var(--plasma-radiobox-description-font-style);\n    --plasma-checkbox-description-font-weight: var(--plasma-radiobox-description-font-weight);\n    --plasma-checkbox-description-letter-spacing: var(--plasma-radiobox-description-letter-spacing);\n    --plasma-checkbox-description-line-height: var(--plasma-radiobox-description-line-height);\n    --plasma-checkbox-fill-color: var(--plasma-radiobox-fill-color);\n    --plasma-checkbox-description-color: var(--plasma-radiobox-description-color);\n    --plasma-checkbox-trigger-border-color: var(--plasma-radiobox-trigger-border-color);\n    --plasma-checkbox-content-top-offset: var(--plasma-radiobox-content-top-offset);\n    --plasma-checkbox-content-left-offset: var(--plasma-radiobox-content-left-offset);\n    --plasma-checkbox-trigger-size: var(--plasma-radiobox-trigger-size);\n    --plasma-checkbox-trigger-border-radius: var(--plasma-radiobox-trigger-border-radius);\n    --plasma-checkbox-trigger-margin: var(--plasma-radiobox-trigger-margin); \n";
+var StyledEllipse = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-fk5e49-0"
+})(["width:var(--plasma-radiobox-ellipse-size);height:var(--plasma-radiobox-ellipse-size);border-radius:var(--plasma-radiobox-ellipse-size);background-color:var(--plasma-radiobox-ellipse-color);transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"]);
+var base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n\n    .single-line {\n        ", ";\n    }\n\n    margin: var(--plasma-radiobox-margin);\n\n    &.reset-margins {\n        margin: 0;\n    }\n\n    ", ";\n\n    position: relative;\n    align-items: flex-start;\n    display: flex;\n    cursor: pointer;\n"])), mappingOverride, /*#__PURE__*/(0, _mixins.applyEllipsis)(), /*#__PURE__*/(0, _mixins.applyNoUserSelect)());
 var radioboxRoot = exports.radioboxRoot = function radioboxRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var size = props.size,
@@ -47,15 +54,15 @@ var radioboxRoot = exports.radioboxRoot = function radioboxRoot(Root) {
     var isLabelAriaHidden = typeof label === 'string';
     var canFocused = focused ? 0 : -1;
     var hasContent = label || description;
-    var singleLineClass = singleLine ? _Radiobox2.classes.singleLine : undefined;
-    var onlyDescriptionClass = !label && description ? _Radiobox2.classes.onlyDescription : undefined;
+    var singleLineClass = singleLine ? 'single-line' : undefined;
+    var resetMargins = !hasContent ? 'reset-margins' : undefined;
     return /*#__PURE__*/_react["default"].createElement(Root, {
       view: view,
       size: size,
       disabled: disabled,
       focused: focused,
       style: style,
-      className: className,
+      className: (0, _utils.cx)(className, resetMargins),
       tabIndex: -1
     }, /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledInput, _extends({}, rest, {
       id: radioboxId,
@@ -68,11 +75,11 @@ var radioboxRoot = exports.radioboxRoot = function radioboxRoot(Root) {
     })), /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContentWrapper, {
       htmlFor: radioboxId
     }, /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledTrigger, {
-      className: _Radiobox2.classes.radioboxTrigger
-    }, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/_react["default"].createElement(_Radiobox.StyledEllipse, null))), hasContent && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContent, {
+      className: (0, _utils.cx)('radiobox-trigger', resetMargins)
+    }, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/_react["default"].createElement(StyledEllipse, null))), hasContent && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledContent, {
       className: singleLineClass
     }, label && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledLabel, {
-      className: (0, _utils.cx)(singleLineClass, onlyDescriptionClass),
+      className: singleLineClass,
       id: uniqLabelId,
       "aria-hidden": isLabelAriaHidden
     }, label), description && /*#__PURE__*/_react["default"].createElement(_Checkbox.StyledDescription, {
@@ -85,7 +92,7 @@ var radioboxConfig = exports.radioboxConfig = {
   name: 'Radiobox',
   tag: 'div',
   layout: radioboxRoot,
-  base: _Radiobox.base,
+  base: base,
   variations: {
     size: {
       css: _base2.base

package/styled-components/cjs/components/Radiobox/_disabled/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["input:disabled + label{opacity:var(--plasma-radiobox-disabled-opacity);}input:disabled + label{cursor:not-allowed;}"]);

package/styled-components/cjs/components/Radiobox/_focused/base.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _mixins = /*#__PURE__*/require("../../../mixins");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".radiobox-trigger{", "}input[data-focus-visible-added] + label .radiobox-trigger{border-color:transparent;", "}input[data-focus-visible-added]:checked + label .radiobox-trigger{", "}"], /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '0',
+  outlineSize: '0.125rem',
+  outlineRadius: 'var(--plasma-radiobox-trigger-border-radius)',
+  outlineColor: 'transparent'
+}), /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.188rem',
+  outlineSize: '0.125rem',
+  outlineRadius: 'var(--plasma-radiobox-trigger-border-radius)',
+  outlineColor: 'var(--plasma-radiobox-focus-color)',
+  customFocusRules: "\n                &::before {\n                    box-shadow: 0 0 0 0.125rem var(--plasma-radiobox-focus-color);\n                }\n            "
+}), /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '-0.125rem',
+  outlineSize: '0.063rem',
+  outlineRadius: 'calc(var(--plasma-radiobox-trigger-border-radius) + 0.125rem)',
+  outlineColor: 'var(--plasma-radiobox-focus-color)',
+  customFocusRules: "\n                &::before {\n                    box-shadow: 0 0 0 0.063rem var(--plasma-radiobox-focus-color);\n                }\n            "
+}));

package/styled-components/cjs/components/Radiobox/_view/base.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.base = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["input:checked + label .radiobox-trigger{border:none;background:var(--plasma-radiobox-fill-color);border-color:var(--plasma-radiobox-fill-color);}"]);

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

@@ -21,12 +21,5 @@ Object.defineProperty(exports, "radioboxRoot", {
     return _Radiobox.radioboxRoot;
   }
 });
-Object.defineProperty(exports, "radioboxTokens", {
-  enumerable: true,
-  get: function get() {
-    return _Radiobox2.tokens;
-  }
-});
 var _Radiobox = /*#__PURE__*/require("./Radiobox");
-var _RadioGroup = /*#__PURE__*/require("./RadioGroup");
-var _Radiobox2 = /*#__PURE__*/require("./Radiobox.tokens");
+var _RadioGroup = /*#__PURE__*/require("./RadioGroup");

package/styled-components/cjs/components/Slider/Slider.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sliderRoot = exports.sliderConfig = void 0;
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _base = /*#__PURE__*/require("./variations/_view/base");
+var _base2 = /*#__PURE__*/require("./variations/_size/base");
+var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
+var _components = /*#__PURE__*/require("./components");
+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); }
+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; }
+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); }
+var isSingleValueProps = function isSingleValueProps(props) {
+  return typeof props.value === 'number';
+};
+var sliderRoot = exports.sliderRoot = function sliderRoot(Root) {
+  return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    if (isSingleValueProps(props)) {
+      return /*#__PURE__*/_react["default"].createElement(Root, _extends({
+        ref: ref
+      }, props), /*#__PURE__*/_react["default"].createElement(_components.SingleSlider, props));
+    }
+    return /*#__PURE__*/_react["default"].createElement(Root, _extends({
+      ref: ref
+    }, props), /*#__PURE__*/_react["default"].createElement(_components.DoubleSlider, props));
+  });
+};
+var sliderConfig = exports.sliderConfig = {
+  name: 'Slider',
+  tag: 'div',
+  layout: sliderRoot,
+  base: '',
+  variations: {
+    view: {
+      css: _base.base
+    },
+    size: {
+      css: _base2.base
+    },
+    disabled: {
+      css: _base3.base,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

package/styled-components/cjs/components/Slider/Slider.tokens.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokens = exports.classes = void 0;
+var classes = exports.classes = {
+  labelPlacementOuter: 'slider-label-placement-outer',
+  labelPlacementInner: 'slider-label-placement-inner',
+  rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
+  rangeValuesPlacementInner: 'slider-range-values-placement-inner',
+  maxRangeValue: 'slider-max-range-value',
+  hideMinValue: 'slider-hide-min-value',
+  hideMaxValue: 'slider-hide-max-value',
+  textFieldActive: 'slider-text-field-active',
+  firstTextField: 'slider-first-text-field',
+  secondTextField: 'slider-second-text-field',
+  activeRangeValue: 'slider-active-range-value'
+};
+var tokens = exports.tokens = {
+  height: '--plasma-slider-height',
+  labelWrapperGap: '--plasma-slider-label-wrapper-gap',
+  labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
+  labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
+  labelColor: '--plasma-slider-label-color',
+  labelFontFamily: '--plasma-slider-label-font-family',
+  labelFontSize: '--plasma-slider-label-font-size',
+  labelFontStyle: '--plasma-slider-label-font-style',
+  labelFontWeight: '--plasma-slider-label-font-weight',
+  labelLetterSpacing: '--plasma-slider-label-letter-spacing',
+  labelLineHeight: '--plasma-slider-label-line-height',
+  rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
+  rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
+  rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
+  rangeValueColor: '--plasma-slider-range-value-color',
+  rangeValueFontFamily: '--plasma-slider-range-value-font-family',
+  rangeValueFontSize: '--plasma-slider-range-value-font-size',
+  rangeValueFontStyle: '--plasma-slider-range-value-font-style',
+  rangeValueFontWeight: '--plasma-slider-range-value-font-weight',
+  rangeValueLetterSpacing: '--plasma-slider-range-value-letter-spacing',
+  rangeValueLineHeight: '--plasma-slider-range-value-line-height',
+  doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
+  thumbSize: '--plasma-slider-thumb-size',
+  thumbBorder: '--plasma-slider-thumb-border',
+  thumbBorderColor: '--plasma-slider-thumb-border-color',
+  thumbBackgroundColor: '--plasma-slider-thumb-background-color',
+  thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
+  currentValueTopOffset: '--plasma-slider-current-value-top-offset',
+  currentValueFontFamily: '--plasma-slider-current-value-font-family',
+  currentValueFontSize: '--plasma-slider-current-value-font-size',
+  currentValueFontStyle: '--plasma-slider-current-value-font-style',
+  currentValueFontWeight: '--plasma-slider-current-value-font-weight',
+  currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
+  currentValueLineHeight: '--plasma-slider-current-value-line-height',
+  railBackgroundColor: '--plasma-slider-rail-background-color',
+  railHeight: '--plasma-slider-rail-height',
+  railBorderRadius: '--plasma-slider-rail-border-radius',
+  railIndent: '--plasma-slider-rail-indent',
+  fillColor: '--plasma-slider-fill-color',
+  textFieldWrapperGap: '--plasma-slider-text-field-wrapper-gap',
+  textFieldFontFamily: '--plasma-slider-text-field-font-family',
+  textFieldFontSize: '--plasma-slider-text-field-font-size',
+  textFieldFontStyle: '--plasma-slider-text-field-font-style',
+  textFieldFontWeight: '--plasma-slider-text-field-font-weight',
+  textFieldLetterSpacing: '--plasma-slider-text-field-letter-spacing',
+  textFieldLineHeight: '--plasma-slider-text-field-line-height',
+  textFieldHeight: '--plasma-slider-text-field-height',
+  textFieldPadding: '--plasma-slider-text-field-padding',
+  textFieldBorderRadius: '--plasma-slider-text-field-border-radius',
+  textFieldColor: '--plasma-slider-text-field-color',
+  textFieldActiveColor: '--plasma-slider-text-field-active-color',
+  textFieldBackgroundColor: '--plasma-slider-text-field-background-color',
+  textFieldCaretColor: '--plasma-slider-text-field-caret-color',
+  textFieldPlaceholderColor: '--plasma-slider-text-field-placeholder-color',
+  textFiledFocusColor: '--plasma-slider-text-field-focus-color',
+  disabledOpacity: '--plasma-slider-disabled-opacity'
+};