@salutejs/plasma-new-hope 0.78.0-canary.1185.8922773956.0 → 0.78.0-canary.1194.8928682263.0

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

@@ -1,91 +1,25 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css } from 'styled-components';
 import styled from 'styled-components';
 import { classes, tokens } from '../../Dropdown.tokens';
 import { addFocus, applyEllipsis } from '../../../../mixins';
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-0"
-})(["display:inline-flex;"]);
+})(["display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentLeftWidth, tokens.itemContentLeftColor);
 export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-hs0ek1-1"
-})(["margin-left:auto;display:inline-flex;"]);
-export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-2"
-})(["line-height:0;color:var(", ");"], tokens.disclosureIconColor);
+})(["margin-left:auto;display:inline-flex;min-width:var(", ");color:var(", ");"], tokens.itemContentRightWidth, tokens.itemContentRightColor);
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-3"
-})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
-
-// TODO: Remove baseContent after refactoring a Select component
-// export const baseContent = `
-//     box-sizing: content-box;
-//     display: flex;
-//     align-items: center;
-//     user-select: none;
-//
-//     :focus {
-//         outline: none;
-//     }
-//
-//     ${addFocus({
-//         outlineSize: '0.0625rem',
-//         outlineOffset: '0',
-//         outlineColor: `var(${tokens.focusColor})`,
-//         outlineRadius: `var(${tokens.itemBorderRadius})`,
-//         hasTransition: false,
-//         customFocusRules: `
-//             &.${classes.dropdownItemIsFocused}:before {
-//                 outline: none;
-//                 box-shadow: 0 0 0 0.0625rem var(${tokens.focusColor});
-//             }
-//         `,
-//     })};
-//
-//     width: 100%;
-//
-//     font-family: var(${tokens.itemFontFamily});
-//     font-size: var(${tokens.itemFontSize});
-//     font-style: var(${tokens.itemFontStyle});
-//     font-weight: var(${tokens.itemFontWeightBold});
-//     letter-spacing: var(${tokens.itemFontLetterSpacing});
-//     line-height: var(${tokens.itemFontLineHeight});
-//
-//     background: var(${tokens.itemBackground});
-//     color: var(${tokens.itemColor});
-//     border-radius: var(${tokens.itemBorderRadius});
-//
-//     padding: var(${tokens.itemPaddingTop}) var(${tokens.itemPaddingRight}) var(${tokens.itemPaddingBottom}) var(${
-//     tokens.itemPaddingLeft
-// });
-//
-//     margin: 0;
-//
-//     &:hover:not(.${classes.dropdownItemIsDisabled}) {
-//         cursor: pointer;
-//         background: var(${tokens.itemBackgroundHover});
-//     }
-//
-//     &.${classes.dropdownItemIsActive} {
-//         background: var(${tokens.itemBackgroundHover});
-//     }
-//
-//     &.${classes.dropdownItemIsDisabled} {
-//         opacity: var(${tokens.disabledOpacity});
-//         cursor: not-allowed;
-//     }
-// `;
+  componentId: "plasma-new-hope__sc-hs0ek1-2"
+})(["", ";"], /*#__PURE__*/applyEllipsis());
 
-export var Wrapper = /*#__PURE__*/styled.li.withConfig({
-  componentId: "plasma-new-hope__sc-hs0ek1-4"
-})(["display:flex;align-items:center;margin:0;box-sizing:content-box;padding-top:", ";padding-right:var(", ");padding-bottom:", ";padding-left:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(", ");border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:var(", ");cursor:not-allowed;}:focus{outline:none;}", ";"], function (_ref) {
-  var variant = _ref.variant;
-  return "var(".concat(variant === 'tight' ? tokens.itemPaddingTopTight : tokens.itemPaddingTop, ")");
-}, tokens.itemPaddingRight, function (_ref2) {
-  var variant = _ref2.variant;
-  return "var(".concat(variant === 'tight' ? tokens.itemPaddingBottomTight : tokens.itemPaddingBottom, ")");
-}, tokens.itemPaddingLeft, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeightBold, tokens.itemFontLetterSpacing, tokens.itemFontLineHeight, tokens.itemBackground, tokens.itemColor, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, tokens.disabledOpacity, /*#__PURE__*/addFocus({
+// INFO: Для возможности переиспользования стилей в других компонентах
+export var baseContent = /*#__PURE__*/"\n    box-sizing: content-box;\n    display: flex;\n    align-items: center;\n    user-select: none;\n\n    :focus {\n        outline: none;\n    }\n\n    ".concat(addFocus({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"var(".concat(tokens.itemBorderRadius, ")"),
-  hasTransition: false,
-  customFocusRules: /*#__PURE__*/"\n            &.".concat(classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(tokens.focusColor, ");\n            }\n        ")
-}));
+  outlineColor: "var(".concat(tokens.focusColor, ")"),
+  outlineRadius: "var(".concat(tokens.itemBorderRadius, ")"),
+  hasTransition: false
+}), ";\n\n    width: 100%;\n\n    font-family: var(").concat(tokens.itemFontFamily, ");\n    font-size: var(").concat(tokens.itemFontSize, ");\n    font-style: var(").concat(tokens.itemFontStyle, ");\n    font-weight: var(").concat(tokens.itemFontWeightBold, ");\n    letter-spacing: var(").concat(tokens.itemFontLetterSpacing, ");\n    line-height: var(").concat(tokens.itemFontLineHeight, ");\n\n    background: var(").concat(tokens.itemBackground, ");\n    color: var(").concat(tokens.itemColor, ");\n    border-radius: var(").concat(tokens.itemBorderRadius, ");\n\n    width: var(").concat(tokens.itemWidth, ");\n    height: var(").concat(tokens.itemHeight, ");\n\n    padding: var(").concat(tokens.itemPaddingTop, ") var(").concat(tokens.itemPaddingRight, ") var(").concat(tokens.itemPaddingBottom, ")\n        var(").concat(tokens.itemPaddingLeft, ");\n\n    margin: var(").concat(tokens.itemMarginTop, ") var(").concat(tokens.itemMarginRight, ") var(").concat(tokens.itemMarginBottom, ")\n        var(").concat(tokens.itemMarginLeft, ");\n\n    &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n        cursor: pointer;\n        background: var(").concat(tokens.itemBackgroundHover, ");\n    }\n\n    &.").concat(String(classes.dropdownItemIsSelected), " {\n        color: var(").concat(tokens.itemColorSelected, ");\n        background: var(").concat(tokens.itemBackgroundSelected, ");\n\n        &:hover:not(.").concat(classes.dropdownItemIsDisabled, ") {\n            background: var(").concat(tokens.itemBackgroundSelectedHover, ");\n        }\n    }\n\n    &.").concat(classes.dropdownItemIsDisabled, " {\n        opacity: var(").concat(tokens.disabledOpacity, ");\n        cursor: not-allowed;\n    }\n");
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n"])), baseContent);

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json

@@ -0,0 +1,19 @@
+[
+    "--plasma-dropdown-item-width",
+    "--plasma-dropdown-item-height",
+    "--plasma-dropdown-item-padding-top",
+    "--plasma-dropdown-item-padding-right",
+    "--plasma-dropdown-item-padding-bottom",
+    "--plasma-dropdown-item-padding-left",
+    "--plasma-dropdown-item-margin-top",
+    "--plasma-dropdown-item-margin-right",
+    "--plasma-dropdown-item-margin-bottom",
+    "--plasma-dropdown-item-margin-left",
+    "--plasma-dropdown-item-border-radius",
+    "--plasma-dropdown-item-font-family",
+    "--plasma-dropdown-item-font-size",
+    "--plasma-dropdown-item-font-style",
+    "--plasma-dropdown-item-letter-spacing",
+    "--plasma-dropdown-item-line-height",
+    "--plasma-dropdown-item-font-weight"
+]

package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json

@@ -0,0 +1,9 @@
+[
+    "--plasma-dropdown-item-background",
+    "--plasma-dropdown-item-color",
+    "--plasma-dropdown-item-background-hover",
+    "--plasma-dropdown-item-background-selected",
+    "--plasma-dropdown-item-color-selected",
+    "--plasma-dropdown-item-background-selected-hover",
+    "--plasma-dropdown-item-color-selected-hover"
+]

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

@@ -2,6 +2,4 @@ export { dropdownDividerRoot, dropdownDividerConfig } from './DropdownDivider/Dr
 export { dropdownFooterRoot, dropdownFooterConfig } from './DropdownFooter/DropdownFooter';
 export { dropdownGroupRoot, dropdownGroupConfig } from './DropdownGroup/DropdownGroup';
 export { dropdownHeaderRoot, dropdownHeaderConfig } from './DropdownHeader/DropdownHeader';
-export { DropdownItem } from './DropdownItem/DropdownItem';
-export { DropdownInner } from './DropdownInner/DropdownInner';
-export { dropdownItemOldRoot, dropdownItemOldConfig } from './DropdownItemOld/DropdownItemOld';
+export { dropdownItemRoot, dropdownItemConfig } from './DropdownItem/DropdownItem';

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

@@ -1,5 +1,5 @@
 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); }
-import React, { Children, cloneElement, isValidElement } from 'react';
+import React, { cloneElement, isValidElement } from 'react';
 export var getPlacement = function getPlacement(placement) {
   return "".concat(placement, "-start");
 };
@@ -15,20 +15,6 @@ export var getPlacements = function getPlacements(placements) {
     return getPlacement(placement);
   });
 };
-export var getCorrectHeight = function getCorrectHeight(listHeight) {
-  if (Number.isNaN(Number(listHeight))) {
-    return listHeight.toString();
-  }
-  return "".concat(listHeight, "rem");
-};
-export var childrenWithProps = function childrenWithProps(children, additionalProps) {
-  return Children.map(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, additionalProps);
-    }
-    return child;
-  });
-};
 var isReactObject = function isReactObject(element) {
   return _typeof(element) === 'object' || typeof element === 'function';
 };

package/styled-components/es/components/Dropdown/variations/_size/tokens.json

@@ -1 +1,9 @@
-[]
+[
+    " --plasma-dropdown-width",
+    " --plasma-dropdown-height",
+    " --plasma-dropdown-border-radius",
+    " --plasma-dropdown-padding-top",
+    " --plasma-dropdown-padding-right",
+    " --plasma-dropdown-padding-bottom",
+    " --plasma-dropdown-padding-left"
+]

package/styled-components/es/components/Dropdown/variations/_view/tokens.json

@@ -1 +1 @@
-[]
+["--plasma-dropdown-background", "--plasma-dropdown-box-shadow"]

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

@@ -1,8 +1,8 @@
-import { dropdownItemOldRoot } from '../../../Dropdown';
+import { dropdownItemRoot } from '../../../Dropdown';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base } from './SelectItem.styles';
-export var selectItemRoot = dropdownItemOldRoot;
+export var selectItemRoot = dropdownItemRoot;
 export var selectItemConfig = {
   name: 'SelectItem',
   tag: 'div',

package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { tokens } from '../../Select.tokens';
 import { dropdownTokens } from '../../../Dropdown';
-import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItemOld/DropdownItem.styles';
+import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItem/DropdownItem.styles';
 
 // NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части
 export var mappingOverride = /*#__PURE__*/"\n    ".concat(dropdownTokens.itemBackground, ": var(").concat(tokens.itemBackground, ");\n    ").concat(dropdownTokens.itemColor, ": var(").concat(tokens.itemColor, ");\n    ").concat(dropdownTokens.itemBackgroundHover, ": var(").concat(tokens.itemBackgroundHover, ");\n    ").concat(dropdownTokens.itemBackgroundSelected, ": var(").concat(tokens.itemBackgroundSelected, ");\n    ").concat(dropdownTokens.itemColorSelected, ": var(").concat(tokens.itemColorSelected, ");\n    ").concat(dropdownTokens.itemBackgroundSelectedHover, ": var(").concat(tokens.itemBackgroundSelectedHover, ");\n    ").concat(dropdownTokens.itemColorSelectedHover, ": var(").concat(tokens.itemColorSelectedHover, ");\n    ").concat(dropdownTokens.itemContentLeftColor, ": var(").concat(tokens.itemContentLeftColor, ");\n    ").concat(dropdownTokens.itemContentRightColor, ": var(").concat(tokens.itemContentRightColor, ");\n    ").concat(dropdownTokens.disabledOpacity, ": var(").concat(tokens.disabledOpacity, ");\n    ").concat(dropdownTokens.focusColor, ": var(").concat(tokens.focusColor, ");\n    ").concat(dropdownTokens.itemWidth, ": var(").concat(tokens.itemWidth, ");\n    ").concat(dropdownTokens.itemHeight, ": var(").concat(tokens.itemHeight, ");\n    ").concat(dropdownTokens.itemBorderRadius, ": var(").concat(tokens.itemBorderRadius, ");\n    ").concat(dropdownTokens.itemPaddingTop, ": var(").concat(tokens.itemPaddingTop, ");\n    ").concat(dropdownTokens.itemPaddingRight, ": var(").concat(tokens.itemPaddingRight, ");\n    ").concat(dropdownTokens.itemPaddingBottom, ": var(").concat(tokens.itemPaddingBottom, ");\n    ").concat(dropdownTokens.itemPaddingLeft, ": var(").concat(tokens.itemPaddingLeft, ");\n    ").concat(dropdownTokens.itemMarginTop, ": var(").concat(tokens.itemMarginTop, ");\n    ").concat(dropdownTokens.itemMarginRight, ": var(").concat(tokens.itemMarginRight, ");\n    ").concat(dropdownTokens.itemMarginBottom, ": var(").concat(tokens.itemMarginBottom, ");\n    ").concat(dropdownTokens.itemMarginLeft, ": var(").concat(tokens.itemMarginLeft, ");\n    ").concat(dropdownTokens.itemFontFamily, ": var(").concat(tokens.itemFontFamily, ");\n    ").concat(dropdownTokens.itemFontSize, ": var(").concat(tokens.itemFontSize, ");\n    ").concat(dropdownTokens.itemFontStyle, ": var(").concat(tokens.itemFontStyle, ");\n    ").concat(dropdownTokens.itemFontWeightBold, ": var(").concat(tokens.itemFontWeightBold, ");\n    ").concat(dropdownTokens.itemFontLetterSpacing, ": var(").concat(tokens.itemFontLetterSpacing, ");\n    ").concat(dropdownTokens.itemFontLineHeight, ": var(").concat(tokens.itemFontLineHeight, ");\n    ").concat(dropdownTokens.itemContentLeftWidth, ": var(").concat(tokens.itemContentLeftWidth, ");\n    ").concat(dropdownTokens.itemContentRightWidth, ": var(").concat(tokens.itemContentRightWidth, ");\n");

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

@@ -0,0 +1,48 @@
+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); }
+import React, { forwardRef } from 'react';
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { SingleSlider, DoubleSlider } from './components';
+var isSingleValueProps = function isSingleValueProps(props) {
+  return typeof props.value === 'number';
+};
+
+/**
+ * Слайдер позволяет определить числовое значение в пределах указанного промежутка.
+ * Можно указать два значения.
+ */
+export var sliderRoot = function sliderRoot(Root) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    if (isSingleValueProps(props)) {
+      return /*#__PURE__*/React.createElement(Root, _extends({
+        ref: ref
+      }, props), /*#__PURE__*/React.createElement(SingleSlider, props));
+    }
+    return /*#__PURE__*/React.createElement(Root, _extends({
+      ref: ref
+    }, props), /*#__PURE__*/React.createElement(DoubleSlider, props));
+  });
+};
+export var sliderConfig = {
+  name: 'Slider',
+  tag: 'div',
+  layout: sliderRoot,
+  base: '',
+  variations: {
+    view: {
+      css: viewCSS
+    },
+    size: {
+      css: sizeCSS
+    },
+    disabled: {
+      css: disabledCSS,
+      attrs: true
+    }
+  },
+  defaults: {
+    view: 'default',
+    size: 'm'
+  }
+};

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

@@ -0,0 +1,71 @@
+export var 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'
+};
+export var 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'
+};

package/styled-components/es/components/Slider/components/Double/Double.js

@@ -0,0 +1,278 @@
+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); }
+var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "onChangeCommitted", "onChangeDrag", "ariaLabel", "multipleStepSize"];
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { SliderBase } from '../SliderBase/SliderBase';
+import { Handle } from '../../ui';
+import { sizeData } from '../../utils';
+import { cx, isNumber } from '../../../../utils';
+import { classes } from '../../Slider.tokens';
+import { SliderWrapper, InputsWrapper, Label, LabelContentLeft, LabelWrapper, StyledInput, DoubleWrapper } from './Double.styles';
+function getXCenterHandle(handle) {
+  var _handle$parentElement;
+  var containerX = ((_handle$parentElement = handle.parentElement) === null || _handle$parentElement === void 0 || (_handle$parentElement = _handle$parentElement.getBoundingClientRect()) === null || _handle$parentElement === void 0 ? void 0 : _handle$parentElement.x) || 0;
+  var handleRect = handle.getBoundingClientRect();
+  var handlePosition = handleRect.x;
+  return handlePosition - containerX;
+}
+export var DoubleSlider = function DoubleSlider(_ref) {
+  var min = _ref.min,
+    max = _ref.max,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    label = _ref.label,
+    labelContentLeft = _ref.labelContentLeft,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    onChangeCommitted = _ref.onChangeCommitted,
+    onChangeDrag = _ref.onChangeDrag,
+    ariaLabel = _ref.ariaLabel,
+    _ref$multipleStepSize = _ref.multipleStepSize,
+    multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState({
+      stepSize: 0,
+      railFillWidth: 0,
+      railFillXPosition: 0,
+      xFirstHandle: 0,
+      xSecondHandle: 0,
+      firstHandleZIndex: 100,
+      secondHandleZIndex: 101,
+      firstValue: value[0],
+      secondValue: value[1]
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    firstInputActive = _useState4[0],
+    setFirstInputActive = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    secondInputActive = _useState6[0],
+    setSecondInputActive = _useState6[1];
+  var firstHandleRef = useRef(null);
+  var secondHandleRef = useRef(null);
+  var firstHandleValue = useRef(value[0]);
+  var secondHandleValue = useRef(value[1]);
+  var _useState7 = useState(value[0]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    firstValue = _useState8[0],
+    setFirstValue = _useState8[1];
+  var _useState9 = useState(value[1]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    secondValue = _useState10[0],
+    setSecondValue = _useState10[1];
+  var stepSize = state.stepSize;
+  var hasLabelContent = label || labelContentLeft;
+  var firstInputActiveClass = firstInputActive && !disabled ? classes.textFieldActive : undefined;
+  var secondInputActiveClass = secondInputActive && !disabled ? classes.textFieldActive : undefined;
+  useEffect(function () {
+    var firstLocalValue = Math.min(Math.max(value[0], min), max) - min;
+    var secondLocalValue = Math.min(Math.max(value[1], min), max) - min;
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        railFillXPosition: stepSize * firstLocalValue,
+        railFillWidth: stepSize * secondLocalValue - stepSize * firstLocalValue,
+        xFirstHandle: stepSize * firstLocalValue,
+        xSecondHandle: stepSize * secondLocalValue
+      });
+    });
+  }, [value, stepSize, min, max]);
+  var setStepSize = useCallback(function (newStepSize) {
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        stepSize: newStepSize
+      });
+    });
+  }, []);
+  var onFirstHandleChange = useCallback(function (handleValue, data) {
+    if (secondHandleRef !== null && secondHandleRef !== void 0 && secondHandleRef.current) {
+      var newHandleXPosition = data.x;
+      var secondHandleXPosition = getXCenterHandle(secondHandleRef.current);
+      var fillWidth = secondHandleXPosition - newHandleXPosition;
+      firstHandleValue.current = handleValue;
+      setFirstValue(handleValue);
+      setState(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          firstHandleZIndex: 101,
+          secondHandleZIndex: 100,
+          railFillWidth: fillWidth < 0 ? 0 : fillWidth,
+          railFillXPosition: newHandleXPosition
+        });
+      });
+      if (onChangeDrag) {
+        onChangeDrag([handleValue, value[1]]);
+      }
+    }
+  }, [onChangeDrag, value]);
+  var onFirstHandleChangeCommitted = useCallback(function (handleValue, data) {
+    setFirstValue(handleValue);
+    onChangeCommitted && onChangeCommitted([handleValue, value[1]]);
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        firstValue: handleValue,
+        xFirstHandle: data.lastX
+      });
+    });
+  }, [onChangeCommitted, value]);
+  var onFirstTextfieldChange = useCallback(function (event) {
+    if (!isNumber(event.target.value)) return;
+    var handleValue = Number(event.target.value);
+    setFirstValue(handleValue);
+  }, [isNumber, setFirstValue]);
+  var onFirstTextfieldEnter = useCallback(function (newValue) {
+    if (!isNumber(newValue)) return;
+    var handleValue = Math.min(Math.max(Number(newValue), min), value[1]);
+    var handleValueLocal = Math.min(Math.max(handleValue, min), max) - min;
+    setFirstValue(handleValue);
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        firstValue: handleValue,
+        xFirstHandle: handleValueLocal * stepSize
+      });
+    });
+    onChangeCommitted && onChangeCommitted([handleValue, value[1]]);
+  }, [isNumber, onChangeCommitted, setFirstValue, value, min, max, stepSize]);
+  var onSecondHandleChange = useCallback(function (handleValue, data) {
+    if (firstHandleRef !== null && firstHandleRef !== void 0 && firstHandleRef.current) {
+      var firstXHandleXPosition = getXCenterHandle(firstHandleRef.current);
+      var newHandleXPosition = data.x;
+      var fillWidth = newHandleXPosition - firstXHandleXPosition;
+      secondHandleValue.current = handleValue;
+      setSecondValue(handleValue);
+      setState(function (prevState) {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          firstHandleZIndex: 100,
+          secondHandleZIndex: 101,
+          railFillWidth: fillWidth < 0 ? 0 : fillWidth,
+          railFillXPosition: firstXHandleXPosition
+        });
+      });
+      if (onChangeDrag) {
+        onChangeDrag([value[0], handleValue]);
+      }
+    }
+  }, [onChangeDrag, value]);
+  var onSecondHandleChangeCommitted = useCallback(function (handleValue, data) {
+    onChangeCommitted && onChangeCommitted([value[0], handleValue]);
+    setSecondValue(handleValue);
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        secondValue: handleValue,
+        xSecondHandle: data.lastX
+      });
+    });
+  }, [onChangeCommitted, value]);
+  var onSecondTextfieldChange = useCallback(function (event) {
+    if (!isNumber(event.target.value)) return;
+    var handleValue = Number(event.target.value);
+    setSecondValue(handleValue);
+  }, [isNumber, setSecondValue]);
+  var onSecondTextfieldEnter = useCallback(function (newValue) {
+    if (!isNumber(newValue)) return;
+    var handleValue = Math.max(Math.min(Number(newValue), max), value[0]);
+    var handleValueLocal = Math.min(Math.max(handleValue, min), max) - min;
+    setSecondValue(handleValue);
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        secondValue: handleValue,
+        xSecondHandle: handleValueLocal * stepSize
+      });
+    });
+    onChangeCommitted && onChangeCommitted([value[0], handleValue]);
+  }, [isNumber, setSecondValue, onChangeCommitted, value, min, max, stepSize]);
+  var _ref2 = ariaLabel || [],
+    _ref3 = _slicedToArray(_ref2, 2),
+    ariaLabelLeft = _ref3[0],
+    ariaLabelRight = _ref3[1];
+  var currentFirstSliderValue = Math.max(state.firstValue, min);
+  return /*#__PURE__*/React.createElement(DoubleWrapper, null, hasLabelContent && /*#__PURE__*/React.createElement(LabelWrapper, null, labelContentLeft && /*#__PURE__*/React.createElement(LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/React.createElement(Label, null, label)), /*#__PURE__*/React.createElement(SliderWrapper, null, /*#__PURE__*/React.createElement(SliderBase, _extends({
+    min: min,
+    max: max,
+    disabled: disabled,
+    setStepSize: setStepSize,
+    railFillWidth: state.railFillWidth,
+    settings: sizeData[size],
+    railFillXPosition: state.railFillXPosition
+  }, rest), /*#__PURE__*/React.createElement(Handle, {
+    ref: firstHandleRef,
+    stepSize: state.stepSize,
+    multipleStepSize: multipleStepSize,
+    onChangeCommitted: onFirstHandleChangeCommitted,
+    onChange: onFirstHandleChange,
+    min: min,
+    max: state.secondValue,
+    disabled: disabled,
+    bounds: [min, state.secondValue],
+    side: "left",
+    xPosition: state.xFirstHandle,
+    zIndex: state.firstHandleZIndex,
+    value: currentFirstSliderValue,
+    ariaLabel: ariaLabelLeft,
+    onMouseEnter: function onMouseEnter() {
+      return setFirstInputActive(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setFirstInputActive(false);
+    }
+  }), /*#__PURE__*/React.createElement(Handle, {
+    ref: secondHandleRef,
+    stepSize: state.stepSize,
+    multipleStepSize: multipleStepSize,
+    onChangeCommitted: onSecondHandleChangeCommitted,
+    onChange: onSecondHandleChange,
+    min: min,
+    ariaValueMin: currentFirstSliderValue,
+    max: max,
+    disabled: disabled,
+    bounds: [state.firstValue, max],
+    side: "right",
+    xPosition: state.xSecondHandle,
+    zIndex: state.secondHandleZIndex,
+    value: Math.max(state.secondValue, min),
+    ariaLabel: ariaLabelRight,
+    onMouseEnter: function onMouseEnter() {
+      return setSecondInputActive(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setSecondInputActive(false);
+    }
+  })), /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement(StyledInput, {
+    className: cx(classes.firstTextField, firstInputActiveClass),
+    enumerationType: "plain",
+    disabled: disabled,
+    value: firstValue,
+    onChange: function onChange(e) {
+      return onFirstTextfieldChange(e);
+    },
+    onSearch: function onSearch(e) {
+      return onFirstTextfieldEnter(e);
+    }
+  }), /*#__PURE__*/React.createElement(StyledInput, {
+    className: cx(classes.secondTextField, secondInputActiveClass),
+    enumerationType: "plain",
+    disabled: disabled,
+    value: secondValue,
+    onChange: function onChange(e) {
+      return onSecondTextfieldChange(e);
+    },
+    onSearch: function onSearch(e) {
+      return onSecondTextfieldEnter(e);
+    }
+  }))));
+};