@pedidopago/ui 1.0.6

package/dist/components/Skeleton/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _excluded = ["children", "isLoaded"];
+
+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; }
+
+var Skeleton = function Skeleton(_ref) {
+  var children = _ref.children,
+      isLoaded = _ref.isLoaded,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, isLoaded ? children : /*#__PURE__*/React.createElement(_styles.SkeletonElement, rest));
+};
+
+var _default = Skeleton;
+exports.default = _default;

package/dist/components/Skeleton/skeleton.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=skeleton.test.d.ts.map

package/dist/components/Skeleton/skeleton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.test.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/skeleton.test.tsx"],"names":[],"mappings":"AACA,OAAO,2BAA2B,CAAC"}

package/dist/components/Skeleton/skeleton.test.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  return _objectSpread({}, utils);
+};
+
+describe('Skeleton', function () {
+  it('should it render the skeleton', function () {
+    var _setup = setup({}),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton as text variant', function () {
+    var _setup2 = setup({
+      variant: 'text'
+    }),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton as circle variant', function () {
+    var _setup3 = setup({
+      variant: 'circle'
+    }),
+        container = _setup3.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton as rectangle variant', function () {
+    var _setup4 = setup({
+      variant: 'rectangle'
+    }),
+        container = _setup4.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton with pulse animation', function () {
+    var _setup5 = setup({
+      animation: 'pulse'
+    }),
+        container = _setup5.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton with wave animation', function () {
+    var _setup6 = setup({
+      animation: 'wave'
+    }),
+        container = _setup6.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton with static animation', function () {
+    var _setup7 = setup({
+      animation: 'static'
+    }),
+        container = _setup7.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton with different sizes', function () {
+    var _setup8 = setup({
+      width: 200,
+      height: 200,
+      variant: 'circle'
+    }),
+        container = _setup8.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton with a children and isLoaded prop', function () {
+    var _setup9 = setup({
+      children: 'Some cool text to display when is loaded',
+      isLoaded: true
+    }),
+        container = _setup9.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the skeleton with a different color', function () {
+    var _setup10 = setup({
+      color: 'tertiary.default'
+    }),
+        container = _setup10.container;
+
+    expect(container).toBeInTheDocument();
+  });
+});

package/dist/components/Skeleton/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ISkeletonProps } from './types';
+import { GenericStyledProps } from '../../@types';
+export declare const SkeletonElement: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ISkeletonProps & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Skeleton/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAIlD,eAAO,MAAM,eAAe;;;+IA2E1B,CAAC"}

package/dist/components/Skeleton/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkeletonElement = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("@emotion/react");
+
+var _getColorValue = require("../../utils/getColorValue");
+
+var _colorCheck = require("../../utils/colorCheck");
+
+var _invertColor = require("../../utils/invertColor");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var SkeletonElement = _styled.default.div(function (props) {
+  var skeletonColor = (0, _getColorValue.getColorValue)(props.color || props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : '#eeeeee', props.theme);
+  var borderRadiusByVariant = {
+    circle: '50%',
+    text: '4px',
+    rectangle: '0'
+  };
+  var waveColor = (0, _invertColor.invertColor)(skeletonColor, true);
+  var waveColorOpacity = waveColor === '#FFFFFF' ? 0.1 : 0.04;
+  var animationsCss = {
+    wave: (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      transform-origin: 0px 55%;\n\n      &::after {\n        content: '';\n        inset: 0px;\n        position: absolute;\n        animation: 1.6s linear 0.5s infinite normal none running move;\n        transform: translateX(-100%);\n        background: linear-gradient(\n          90deg,\n          transparent,\n          ", ",\n          transparent\n        );\n      }\n\n      @keyframes move {\n        0% {\n          transform: translateX(-100%);\n        }\n        40% {\n          transform: translateX(100%);\n        }\n        100% {\n          transform: translateX(100%);\n        }\n      }\n    "])), (0, _colorCheck.parseHexColorToRgba)(waveColor, waveColorOpacity)),
+    pulse: (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: 1.6s linear 0.5s infinite normal none running pulse;\n\n      @keyframes pulse {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.4;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n    "])))
+  };
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: block;\n    position: relative;\n    background-color: ", ";\n    border-radius: ", ";\n    width: ", ";\n    height: ", ";\n\n    ", ";\n  "])), skeletonColor, borderRadiusByVariant[props.variant || 'text'], props.width ? props.width + 'px' : '100%', props.height ? props.height + 'px' : '1.2rem', props.animation !== 'static' ? animationsCss[props.animation || 'pulse'] : '');
+});
+
+exports.SkeletonElement = SkeletonElement;

package/dist/components/Skeleton/types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { GlobalColorsProps } from '../../shared/theme/theme.types';
+export declare type ISkeletonProps = {
+    /**
+     * The variant of the skeleton.
+     * @default 'text'
+     */
+    variant?: 'text' | 'rectangle' | 'circle';
+    /**
+     * The animation of the skeleton
+     * @default 'pulse'
+     */
+    animation?: 'wave' | 'pulse' | 'static';
+    /**
+     * The width of the skeleton
+     * @default '100%'
+     */
+    width?: number;
+    /**
+     * The height of the skeleton
+     * @default '100%'
+     */
+    height?: number;
+    /**
+     * The color of the skeleton
+     * @default '#EEEEEE'
+     */
+    color?: GlobalColorsProps | (string & {});
+    /**
+     * When true, the skeleton children's will be displayed
+     * @default false
+     */
+    isLoaded?: boolean;
+    children?: ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Skeleton/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,oBAAY,cAAc,GAAG;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

package/dist/components/Skeleton/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Slider/components/SliderPointer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ISliderPointerProps } from '../types';
+export declare const SliderPointer: ({ direction, thumbColor }: ISliderPointerProps) => JSX.Element;
+//# sourceMappingURL=SliderPointer.d.ts.map

package/dist/components/Slider/components/SliderPointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderPointer.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SliderPointer.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,aAAa,8BAA+B,mBAAmB,gBAS3E,CAAC"}

package/dist/components/Slider/components/SliderPointer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderPointer = void 0;
+
+var _Icon = _interopRequireDefault(require("../../Icon"));
+
+var _pointer = require("../icons/pointer.svg");
+
+var _styles = require("../styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SliderPointer = function SliderPointer(_ref) {
+  var direction = _ref.direction,
+      thumbColor = _ref.thumbColor;
+  return /*#__PURE__*/React.createElement(_styles.SliderPointerContainer, {
+    thumbColor: thumbColor,
+    direction: direction
+  }, /*#__PURE__*/React.createElement(_pointer.ReactComponent, null), /*#__PURE__*/React.createElement(_styles.SliderPointerIcon, null, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "code",
+    size: "20px"
+  })));
+};
+
+exports.SliderPointer = SliderPointer;

package/dist/components/Slider/components/SliderRail.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ISliderTrackerProps } from '../types';
+export declare const SliderRail: import("react").MemoExoticComponent<({ step, max, onChange, trackColor, direction, ...rest }: ISliderTrackerProps) => JSX.Element>;
+//# sourceMappingURL=SliderRail.d.ts.map

package/dist/components/Slider/components/SliderRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderRail.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SliderRail.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AA6H/C,eAAO,MAAM,UAAU,gGAnFgD,mBAAmB,iBAmFtD,CAAC"}

package/dist/components/Slider/components/SliderRail.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderRail = void 0;
+
+var _react = require("react");
+
+var _useEventCallback = require("../hooks/useEventCallback");
+
+var _styles = require("../styles");
+
+var _excluded = ["step", "max", "onChange", "trackColor", "direction"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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; }
+
+var mathRoundToStep = function mathRoundToStep(value, step) {
+  return Math.round(value / step) * step;
+};
+
+var isTouchEvent = function isTouchEvent(event) {
+  return event.type.includes('touch');
+};
+
+var getTouchPointer = function getTouchPointer(touchList, touchId) {
+  for (var i = 0; i < touchList.length; i++) {
+    if (touchList[i].identifier === touchId) return touchList[i];
+  }
+
+  return touchList[0];
+};
+
+var getPointerPosition = function getPointerPosition(node, event, touchId, step, max, direction) {
+  var rect = node.getBoundingClientRect();
+  var pointer = isTouchEvent(event) ? getTouchPointer(event.touches, touchId) : event;
+
+  if (direction === 'vertical') {
+    var y = rect.height - (pointer.clientY - rect.top);
+    var stepHeight = rect.height * step / max;
+    var roundedY = Math.min(Math.max(0, mathRoundToStep(y, stepHeight) / rect.height), 1);
+    return roundedY;
+  }
+
+  var x = pointer.clientX - rect.left;
+  var stepWidth = rect.width * step / max;
+  var roundedX = Math.min(Math.max(0, mathRoundToStep(x, stepWidth) / rect.width), 1);
+  return roundedX;
+};
+
+var Rail = function Rail(_ref) {
+  var step = _ref.step,
+      max = _ref.max,
+      onChange = _ref.onChange,
+      trackColor = _ref.trackColor,
+      direction = _ref.direction,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var trackRef = (0, _react.useRef)(null);
+  var changeEvent = (0, _useEventCallback.useEventCallback)(onChange);
+  var touchId = (0, _react.useRef)(null);
+  var isTouch = (0, _react.useRef)(false);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var toggleMoveEvent = function toggleMoveEvent(state) {
+      var toggleEvent = state ? window.addEventListener : window.removeEventListener;
+      toggleEvent(isTouch.current ? 'touchmove' : 'mousemove', handleMove);
+      toggleEvent(isTouch.current ? 'touchend' : 'mouseup', function () {
+        return toggleMoveEvent(false);
+      });
+    };
+
+    var handleMove = function handleMove(event) {
+      if (isTouchEvent(event)) {
+        isTouch.current = true;
+      } else {
+        event.preventDefault();
+      }
+
+      var checkPress = isTouch.current ? event.touches.length > 0 : event.buttons > 0;
+
+      if (checkPress && trackRef.current) {
+        var percentage = getPointerPosition(trackRef.current, event, touchId.current, step, max, direction);
+        changeEvent(percentage, trackRef);
+      }
+    };
+
+    var handleMoveStart = function handleMoveStart(event) {
+      var node = trackRef.current || event.currentTarget;
+      var nativeEvent = event.nativeEvent;
+
+      if (isTouchEvent(nativeEvent)) {
+        isTouch.current = true;
+        var changedTouches = nativeEvent.changedTouches || [];
+        if (changedTouches.length) touchId.current = changedTouches[0].identifier;
+      } else {
+        event.preventDefault();
+        isTouch.current = false;
+      }
+
+      var percentage = getPointerPosition(node, nativeEvent, touchId.current, step, max, direction);
+      changeEvent(percentage, trackRef);
+      toggleMoveEvent(true);
+    };
+
+    return [handleMoveStart, toggleMoveEvent];
+  }, [changeEvent, step, max, direction]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      handleMoveStart = _useMemo2[0],
+      toggleMoveEvent = _useMemo2[1];
+
+  (0, _react.useEffect)(function () {
+    return toggleMoveEvent;
+  }, [toggleMoveEvent]);
+  return /*#__PURE__*/React.createElement(_styles.SliderRailContainer, _extends({
+    ref: trackRef,
+    onTouchStart: handleMoveStart,
+    onMouseDown: handleMoveStart,
+    tabIndex: 0,
+    role: "slider",
+    trackColor: trackColor
+  }, rest));
+};
+
+var SliderRail = /*#__PURE__*/(0, _react.memo)(Rail);
+exports.SliderRail = SliderRail;

package/dist/components/Slider/components/SliderSelector.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ISliderSelectorProps } from '../types';
+export declare const SliderSelector: import("react").MemoExoticComponent<({ value, min, max, step, valueLabelDisplay, thumbColor, trackColor, onChange, direction, disabled, size, thumbType, }: ISliderSelectorProps) => JSX.Element>;
+//# sourceMappingURL=SliderSelector.d.ts.map

package/dist/components/Slider/components/SliderSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SliderSelector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAkMhD,eAAO,MAAM,cAAc,8JAnLxB,oBAAoB,iBAmLqB,CAAC"}

package/dist/components/Slider/components/SliderSelector.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderSelector = void 0;
+
+var _react = require("react");
+
+var _SliderPointer = require("./SliderPointer");
+
+var _SliderRail = require("./SliderRail");
+
+var _styles = require("../styles");
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Selector = function Selector(_ref) {
+  var value = _ref.value,
+      min = _ref.min,
+      max = _ref.max,
+      step = _ref.step,
+      valueLabelDisplay = _ref.valueLabelDisplay,
+      thumbColor = _ref.thumbColor,
+      trackColor = _ref.trackColor,
+      onChange = _ref.onChange,
+      direction = _ref.direction,
+      disabled = _ref.disabled,
+      size = _ref.size,
+      thumbType = _ref.thumbType;
+
+  function handleChangePercentage(percentage, ref) {
+    if (typeof value === 'number') {
+      onChange && onChange(percentage);
+      return;
+    }
+
+    var sliderRail = ref === null || ref === void 0 ? void 0 : ref.current;
+
+    if (!sliderRail) {
+      return;
+    }
+
+    var _sliderRail$getBoundi = sliderRail.getBoundingClientRect(),
+        left = _sliderRail$getBoundi.left,
+        bottom = _sliderRail$getBoundi.bottom;
+
+    var sliderThumbsPosition = [];
+    sliderRail.querySelectorAll('[data-index]').forEach(function (thumb) {
+      var thumbIndex = parseInt(thumb.getAttribute('data-index') || '0', 10);
+      var thumbLeft = thumb.getBoundingClientRect().left - left;
+      var thumbWidth = thumb.getBoundingClientRect().width;
+      var thumbBottom = bottom - thumb.getBoundingClientRect().bottom;
+      var thumbHeight = thumb.getBoundingClientRect().height;
+      var thumbPosition = direction === 'horizontal' ? (thumbLeft + thumbWidth / 2) / sliderRail.clientWidth : (thumbBottom + thumbHeight / 2) / sliderRail.clientHeight;
+      sliderThumbsPosition.push([thumbPosition, thumbIndex]);
+    });
+    var closestThumb = sliderThumbsPosition.reduce(function (prev, curr) {
+      var _curr = _slicedToArray(curr, 2),
+          currThumbPosition = _curr[0],
+          currThumbIndex = _curr[1];
+
+      if (Math.abs(currThumbPosition - percentage) < Math.abs(prev[0] - percentage)) {
+        return [currThumbPosition, currThumbIndex];
+      }
+
+      return prev;
+    });
+    onChange && onChange(percentage, closestThumb[1]);
+  }
+
+  var thumbPositions = Array.isArray(value) ? value.map(function (v) {
+    return (v - min) / (max - min);
+  }) : [];
+  return /*#__PURE__*/React.createElement(_styles.SliderContainer, null, /*#__PURE__*/React.createElement(_SliderRail.SliderRail, {
+    max: max,
+    step: step,
+    trackColor: trackColor,
+    direction: direction,
+    onChange: handleChangePercentage
+  }, /*#__PURE__*/React.createElement(_styles.SliderTrack, {
+    style: Array.isArray(value) ? direction === 'vertical' ? {
+      height: "".concat(Math.abs(thumbPositions[0] - thumbPositions[thumbPositions.length - 1]) * 100, "%"),
+      bottom: "".concat(thumbPositions[0] * 100, "%")
+    } : {
+      width: "".concat(Math.abs(thumbPositions[0] - thumbPositions[thumbPositions.length - 1]) * 100, "%"),
+      left: "".concat(thumbPositions[0] * 100, "%")
+    } : direction === 'vertical' ? {
+      height: "".concat((Number(value) - min) / (max - min) * 100, "%")
+    } : {
+      width: "".concat((Number(value) - min) / (max - min) * 100, "%")
+    },
+    direction: direction,
+    thumbColor: thumbColor || 'primary.default',
+    disabled: disabled
+  }), !Array.isArray(value) ? /*#__PURE__*/React.createElement(_styles.SliderThumb, {
+    direction: direction,
+    style: direction === 'vertical' ? {
+      bottom: "".concat((value - min) / (max - min) * 100, "%")
+    } : {
+      left: "".concat((value - min) / (max - min) * 100, "%")
+    },
+    disabled: disabled,
+    size: size,
+    thumbColor: thumbColor || 'primary.default',
+    thumbType: thumbType
+  }, thumbType === 'pointer' && /*#__PURE__*/React.createElement(_SliderPointer.SliderPointer, {
+    thumbColor: thumbColor || 'primary.default',
+    direction: direction
+  }), /*#__PURE__*/React.createElement(_styles.SliderInput, {
+    type: "range",
+    min: min,
+    max: max,
+    step: step,
+    value: value,
+    "aria-valuenow": value,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-label": "slider",
+    readOnly: true
+  }), valueLabelDisplay !== 'off' && /*#__PURE__*/React.createElement(_styles.SliderLabel, {
+    direction: direction
+  }, valueLabelDisplay === 'auto' ? value : valueLabelDisplay ? valueLabelDisplay.indexOf('%v') !== -1 ? valueLabelDisplay.replace(/%v/g, String(value)) : valueLabelDisplay : value)) : value.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(_styles.SliderThumb, {
+      key: index,
+      "data-index": index,
+      direction: direction,
+      style: direction === 'vertical' ? {
+        bottom: "".concat(thumbPositions[index] * 100, "%")
+      } : {
+        left: "".concat(thumbPositions[index] * 100, "%")
+      },
+      disabled: disabled,
+      size: size,
+      thumbColor: thumbColor || 'primary.default',
+      thumbType: thumbType
+    }, thumbType === 'pointer' && /*#__PURE__*/React.createElement(_SliderPointer.SliderPointer, {
+      thumbColor: thumbColor || 'primary.default',
+      direction: direction
+    }), /*#__PURE__*/React.createElement(_styles.SliderInput, {
+      type: "range",
+      min: min,
+      max: max,
+      step: step,
+      value: item,
+      "aria-valuenow": item,
+      "aria-valuemax": max,
+      "aria-valuemin": min,
+      "aria-label": "slider",
+      readOnly: true
+    }), valueLabelDisplay !== 'off' && /*#__PURE__*/React.createElement(_styles.SliderLabel, {
+      direction: direction
+    }, valueLabelDisplay === 'auto' ? item : valueLabelDisplay ? valueLabelDisplay.indexOf('%v') !== -1 ? valueLabelDisplay.replace(/%v/g, String(item)) : valueLabelDisplay : item));
+  })));
+};
+
+var SliderSelector = /*#__PURE__*/(0, _react.memo)(Selector);
+exports.SliderSelector = SliderSelector;

package/dist/components/Slider/hooks/useEventCallback.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare const useEventCallback: <T>(callback?: ((value: T, trackRef?: RefObject<HTMLDivElement> | undefined) => void) | undefined) => (value: T, trackRef?: RefObject<HTMLDivElement> | undefined) => void;
+//# sourceMappingURL=useEventCallback.d.ts.map

package/dist/components/Slider/hooks/useEventCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEventCallback.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/hooks/useEventCallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAE1C,eAAO,MAAM,gBAAgB,kFACoC,IAAI,kFACb,IAUvD,CAAC"}

package/dist/components/Slider/hooks/useEventCallback.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEventCallback = void 0;
+
+var _react = require("react");
+
+var useEventCallback = function useEventCallback(callback) {
+  var ref = (0, _react.useRef)(callback);
+  var cachedCallback = (0, _react.useRef)(function (value, trackRef) {
+    ref.current && ref.current(value, trackRef);
+  });
+  ref.current = callback;
+  return cachedCallback.current;
+};
+
+exports.useEventCallback = useEventCallback;

package/dist/components/Slider/hooks/useValues.d.ts

@@ -0,0 +1,2 @@
+export declare const useValues: (initialValues: number | number[], onChange?: ((value: number | number[]) => void) | undefined) => [number | number[], (value: number | number[]) => void];
+//# sourceMappingURL=useValues.d.ts.map

package/dist/components/Slider/hooks/useValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValues.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/hooks/useValues.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,kBACL,MAAM,GAAG,MAAM,EAAE,sBACb,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,8CAChB,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CA+BxD,CAAC"}