@janiscommerce/ui-web 0.10.0 → 0.12.0

package/dist/index.umd.js

@@ -1,13 +1,13 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('react-dom')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$c, global.require$$1));
-})(this, (function (exports, React, styled$c, require$$1) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$f, global.require$$1));
+})(this, (function (exports, React, styled$f, require$$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$c);
+  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$f);
   var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
   function _classCallCheck$2(instance, Constructor) {
@@ -204,10 +204,22 @@
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
 
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
   function _iterableToArrayLimit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
@@ -255,6 +267,10 @@
     return arr2;
   }
 
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
   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.");
   }
@@ -353,6 +369,522 @@
 
   var PropTypes = propTypes.exports;
 
+  /**
+   * Copy string to clipboard
+   * @param {string} str
+   */
+  /**
+   * Creates a debounced function that delays invoking func until after wait milliseconds have
+   * elapsed since the last time the debounced function was invoked.
+   * @param {function} fn - The function to debounce.
+   * @param {number} wait - The number of milliseconds to delay.
+   * @returns {function} The new debounced function.
+   */
+
+  function debounce(fn, wait) {
+    var timerID;
+
+    function debounced() {
+      var context = this;
+      clearTimeout(timerID);
+
+      for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+        params[_key] = arguments[_key];
+      }
+
+      timerID = setTimeout.apply(void 0, [fn.bind(context), wait].concat(params));
+    }
+
+    debounced.cancel = function cancel() {
+      clearTimeout(timerID);
+    };
+
+    return debounced;
+  }
+
+  var breakpoints = {
+    values: {
+      xs: 320,
+      sm: 640,
+      md: 962,
+      lg: 1024,
+      xl: 1280
+    }
+  };
+
+  var getMin = function getMin(key) {
+    return "@media screen and (min-width: ".concat(breakpoints.values[key], "px)");
+  };
+
+  var getMax = function getMax(key) {
+    return "@media screen and (max-width: ".concat(breakpoints.values[key] - 1, "px)");
+  };
+
+  var devices = {
+    mobile: getMax('sm'),
+    tablet: getMax('md'),
+    tabletLg: getMax('lg'),
+    onlyDesktop: getMin('lg'),
+    desktopSm: getMax('xl'),
+    desktopLg: getMin('xl')
+  };
+  var mediaBreaks = {
+    mobile: function mobile() {
+      return styled$f.css(["", "{", "}"], devices.mobile, styled$f.css.apply(void 0, arguments));
+    },
+    tablet: function tablet() {
+      return styled$f.css(["", "{", "}"], devices.tablet, styled$f.css.apply(void 0, arguments));
+    },
+    tabletLg: function tabletLg() {
+      return styled$f.css(["", "{", "}"], devices.tabletLg, styled$f.css.apply(void 0, arguments));
+    },
+    onlyDesktop: function onlyDesktop() {
+      return styled$f.css(["", "{", "}"], devices.onlyDesktop, styled$f.css.apply(void 0, arguments));
+    },
+    desktopSm: function desktopSm() {
+      return styled$f.css(["", "{", "}"], devices.desktopSm, styled$f.css.apply(void 0, arguments));
+    },
+    desktopLg: function desktopLg() {
+      return styled$f.css(["", "{", "}"], devices.desktopLg, styled$f.css.apply(void 0, arguments));
+    },
+    onlyPrint: function onlyPrint() {
+      return styled$f.css(["@media print{", "}"], styled$f.css.apply(void 0, arguments));
+    }
+  };
+
+  /** Checks the current view width against different device size settings.
+   * Import it when needed, and get the most appropiate condition.
+   * (In this project, tabletLg equals the "onlyMobile" condition.)
+   * @returns {object} an object with the current width value and boolean values for each device.
+   */
+
+  var useDevices = function useDevices() {
+    var getWindowWidth = function getWindowWidth() {
+      return window.innerWidth;
+    };
+
+    var checkDeviceMax = function checkDeviceMax(device) {
+      return getWindowWidth() < breakpoints.values[device];
+    };
+
+    var checkDeviceMin = function checkDeviceMin(device) {
+      return getWindowWidth() >= breakpoints.values[device];
+    };
+
+    var initialWidth = getWindowWidth();
+    var initialMobile = checkDeviceMax('sm');
+    var initialTablet = checkDeviceMax('md');
+    var initialTabletLg = checkDeviceMax('lg');
+    var initialOnlyDesktop = checkDeviceMin('lg');
+    var initialDesktopSm = checkDeviceMax('xl');
+    var initialDesktopLg = checkDeviceMin('xl');
+
+    var _useState = React.useState(initialWidth),
+        _useState2 = _slicedToArray(_useState, 2),
+        width = _useState2[0],
+        setWidth = _useState2[1];
+
+    var _useState3 = React.useState(initialMobile),
+        _useState4 = _slicedToArray(_useState3, 2),
+        mobile = _useState4[0],
+        setMobile = _useState4[1];
+
+    var _useState5 = React.useState(initialTablet),
+        _useState6 = _slicedToArray(_useState5, 2),
+        tablet = _useState6[0],
+        setTablet = _useState6[1];
+
+    var _useState7 = React.useState(initialTabletLg),
+        _useState8 = _slicedToArray(_useState7, 2),
+        tabletLg = _useState8[0],
+        setTabletLg = _useState8[1];
+
+    var _useState9 = React.useState(initialOnlyDesktop),
+        _useState10 = _slicedToArray(_useState9, 2),
+        onlyDesktop = _useState10[0],
+        setOnlyDesktop = _useState10[1];
+
+    var _useState11 = React.useState(initialDesktopSm),
+        _useState12 = _slicedToArray(_useState11, 2),
+        desktopSm = _useState12[0],
+        setDesktopSm = _useState12[1];
+
+    var _useState13 = React.useState(initialDesktopLg),
+        _useState14 = _slicedToArray(_useState13, 2),
+        desktopLg = _useState14[0],
+        setDesktopLg = _useState14[1];
+
+    var handleChanges = debounce(function () {
+      var windowWidth = getWindowWidth();
+      var isMobile = checkDeviceMax('sm');
+      var isTablet = checkDeviceMax('md');
+      var isTabletLg = checkDeviceMax('lg');
+      var isOnlyDesktop = checkDeviceMin('lg');
+      var isDesktopSm = checkDeviceMax('xl');
+      var isDesktopLg = checkDeviceMin('xl');
+      setWidth(windowWidth);
+      setMobile(isMobile);
+      setTablet(isTablet);
+      setTabletLg(isTabletLg);
+      setOnlyDesktop(isOnlyDesktop);
+      setDesktopSm(isDesktopSm);
+      setDesktopLg(isDesktopLg);
+    }, 100);
+    React.useEffect(function () {
+      window.addEventListener('resize', handleChanges);
+      return function () {
+        return window.removeEventListener('resize', handleChanges);
+      };
+    });
+    return {
+      width: width,
+      mobile: mobile,
+      tablet: tablet,
+      tabletLg: tabletLg,
+      onlyDesktop: onlyDesktop,
+      desktopSm: desktopSm,
+      desktopLg: desktopLg
+    };
+  };
+
+  var viewsPalette = {
+    black: '#2F2F2F',
+    blackHover: '#585858',
+    blackPressed: '#16232D',
+    blue: '#2979FF',
+    blueHover: '#5393FF',
+    bluePressed: '#1759FF',
+    blueDisabled: '#93BBFF',
+    darkGrey: '#939598',
+    darkGreyHover: '#A8AAAC',
+    darkGreyPressed: '#747679',
+    fizzGreen: '#1DB779',
+    fizzGreenHover: '#4AC593',
+    fizzGreenPressed: '#109D59',
+    green: '#74C655',
+    greenHover: '#8FD177',
+    greenPressed: '#54B039',
+    grey: '#D5D7DB',
+    greyHover: '#DDDFE2',
+    greyPressed: '#C4C6CC',
+    lightBlue: '#08C4C4',
+    lightBlueHover: '#39CFCF',
+    lightBluePressed: '#04ADAD',
+    lightGrey: '#E8EAF6',
+    lightGreyHover: '#F4F5FB',
+    lightGreyPressed: '#D0D3E3',
+    orange: '#FF8D10',
+    orangeHover: '#FFA33F',
+    orangePressed: '#FF6E08',
+    red: '#F13B70',
+    redHover: '#F3628C',
+    redPressed: '#EB2450',
+    statusRed: '#FF4343',
+    statusRedHover: '#FF6868',
+    statusRedPressed: '#FF2A2A',
+    white: '#FFF',
+    yellow: '#FFCE17',
+    yellowHover: '#FFD745',
+    yellowPressed: '#FFBA0C',
+    transparentWhite: 'rgba(256, 256, 256, 0.5)'
+  };
+
+  /**
+   * @name getColor
+   * @private
+   * @module palette/utils
+   * @description return color from palette
+   * @param {string} color
+   * @returns {string} color
+   * @example getColor('blue') // #2979FF
+   */
+
+  var getColor = function getColor(color) {
+    return viewsPalette[color] || color;
+  };
+
+  var timingFunctions$1 = {
+    standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    decelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
+  };
+  /**
+   * @name getImageMeasurements
+   * @description return color from palette
+   * @param {string} size
+   * @param {boolean} isDesktop
+   * @returns {string}
+   * @example getImageMeasurements('large', true) // '36px'
+   */
+
+  var getImageMeasurements = function getImageMeasurements(size, isDesktop) {
+    if (!Number.isNaN(Number(size))) return "".concat(size, "px");
+    var imageSizes = {
+      small: '24px',
+      medium: '32px',
+      large: '36px',
+      extralarge: isDesktop ? '140px' : '100px',
+      auto: 'auto'
+    };
+    return imageSizes[size] || imageSizes.small;
+  };
+
+  var styled$e = {
+    SkeletonContainer: styled__default["default"].div.withConfig({
+      displayName: "styles__SkeletonContainer",
+      componentId: "sc-1xnupv9-0"
+    })(["border-radius:", ";height:", ";width:", ";background-color:", ";animation:pulse 1.5s ease-in-out infinite;@keyframes pulse{0%{opacity:0.4;}50%{opacity:0.8;}100%{opacity:0.4;}}"], function (_ref) {
+      var circle = _ref.circle;
+      return circle ? ' 50%' : '3px';
+    }, function (_ref2) {
+      var height = _ref2.height;
+      return height;
+    }, function (_ref3) {
+      var width = _ref3.width;
+      return width;
+    }, function (_ref4) {
+      var backgroundColor = _ref4.backgroundColor;
+      return backgroundColor || viewsPalette.lightGrey;
+    })
+  };
+
+  var Skeleton = function Skeleton(_ref) {
+    var circle = _ref.circle,
+        width = _ref.width,
+        height = _ref.height,
+        count = _ref.count,
+        backgroundColor = _ref.backgroundColor;
+    var currentWidth = !Number.isNaN(Number(width)) ? "".concat(width, "px") : width;
+    var currentHeight = !Number.isNaN(Number(height)) ? "".concat(height, "px") : height;
+    var skeletons = Array.from({
+      length: count
+    }, function (_, index) {
+      return /*#__PURE__*/React__default["default"].createElement(styled$e.SkeletonContainer, {
+        key: index,
+        width: currentWidth,
+        height: currentHeight,
+        circle: circle,
+        backgroundColor: backgroundColor
+      });
+    });
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, skeletons);
+  };
+
+  Skeleton.defaultProps = {
+    circle: false,
+    count: 1
+  };
+
+  var styled$d = {
+    Image: styled__default["default"].img.withConfig({
+      displayName: "styles__Image",
+      componentId: "sc-uljfj3-0"
+    })(["width:", ";height:", ";display:", ";border-radius:", ";"], function (_ref) {
+      var size = _ref.size;
+      return size;
+    }, function (_ref2) {
+      var size = _ref2.size;
+      return size;
+    }, function (_ref3) {
+      var show = _ref3.show;
+      return show ? 'flex' : 'none';
+    }, function (_ref4) {
+      var rounded = _ref4.rounded;
+      return rounded ? '50%' : '3px';
+    })
+  };
+
+  /**
+   * Checks if the name provided is single or compound and returns either the first two letters,
+   * or the initials of the two first names.
+   * @param {string} nameString
+   */
+
+  var parseName = function parseName(nameString) {
+    var names = nameString.split(' ');
+    return names.length > 1 ? names.reduce(function (accum, name, idx) {
+      if (idx <= 1) return [].concat(_toConsumableArray(accum), [name.substring(0, 1)]);
+      return accum;
+    }, []) : nameString.substring(0, 2).split('');
+  };
+  /**
+   * If both firstname and lastname are provided, returns an array with each of their initials.
+   * If only a firstname or a lastname is provided, parses them to return either
+   * their initials (if it's a compound name) or first two letters.
+   * @param {string} firstname
+   * @param {string} lastname
+   */
+
+
+  var getNamesToParse = function getNamesToParse(firstname, lastname) {
+    return !!firstname || !!lastname ? parseName(firstname || lastname) : null;
+  };
+  /**
+   * Assigns a color to the names or initials array provided.
+   * @param {array} name - Array containing the firstname and lastname strings
+   */
+
+
+  var getUserColor = function getUserColor(name) {
+    var excludedColors = ['lightGreyHover', 'lightGrey', 'white', 'transparentWhite'];
+    var availableColors = Object.keys(viewsPalette).filter(function (color) {
+      return !excludedColors.includes(color);
+    });
+    var availableIndexes = availableColors.length;
+
+    var charCodes = _toConsumableArray(name).map(function (letter) {
+      return letter.charCodeAt(0);
+    });
+
+    var charCodesLength = charCodes.length;
+    var rotationFactor = charCodesLength % (availableIndexes - 1) + 1;
+    var sumOfCharacterCodes = charCodes.reduce(function (current, next) {
+      return current + next;
+    }) % availableIndexes;
+    var random = charCodes[0] % availableIndexes;
+
+    for (var i = 0; i < charCodesLength; i++) {
+      random = (rotationFactor * random + sumOfCharacterCodes) % availableIndexes;
+    }
+
+    var userColor = availableColors[random];
+    return viewsPalette[userColor];
+  };
+  /**
+   * If firstname or lastname (or both) are defined, will return an object with their initials and assigned color.
+   * If not, returns null.
+   * @param {string} firstname
+   * @param {string} lastname
+   */
+
+  var getInitialsTheme = function getInitialsTheme() {
+    var firstname = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var lastname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    if (!!firstname && !!lastname) return [firstname.substring(0, 1), lastname.substring(0, 1)];
+    return getNamesToParse(firstname, lastname);
+  };
+
+  var timingFunctions = {
+    standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    decelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
+  };
+  var mixins = {
+    flexCenter: styled$f.css(["display:flex;align-items:center;justify-content:center;"]),
+    placeholder: function placeholder(styles) {
+      return styled$f.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
+    },
+    transition: function transition() {
+      var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
+      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '200ms';
+      var transitionProperty;
+      if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
+      var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
+      return styled$f.css(["transition:", ";", ";"], transition, transitionProperty);
+    },
+    scrollbar: function scrollbar(thumbColor, shadowColor) {
+      return styled$f.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || viewsPalette.white, thumbColor);
+    }
+  };
+
+  var styled$c = {
+    Initials: styled__default["default"].div.withConfig({
+      displayName: "styles__Initials",
+      componentId: "sc-qlu7od-0"
+    })(["width:", ";height:", ";border-radius:", ";font-weight:500;color:", ";background-color:", ";text-transform:uppercase;", ";"], function (_ref) {
+      var size = _ref.size;
+      return size;
+    }, function (_ref2) {
+      var size = _ref2.size;
+      return size;
+    }, function (_ref3) {
+      var rounded = _ref3.rounded;
+      return rounded ? '50%' : '3px';
+    }, viewsPalette.white, function (_ref4) {
+      var color = _ref4.color;
+      return color;
+    }, mixins.flexCenter)
+  };
+
+  var InitialsAvatar = function InitialsAvatar(_ref) {
+    var initials = _ref.initials,
+        mainColor = _ref.mainColor,
+        imageSize = _ref.imageSize,
+        rounded = _ref.rounded;
+    return /*#__PURE__*/React__default["default"].createElement(styled$c.Initials, {
+      color: mainColor || getUserColor(initials),
+      size: imageSize,
+      rounded: rounded
+    }, initials);
+  };
+
+  var Avatar = function Avatar(_ref) {
+    var firstname = _ref.firstname,
+        lastname = _ref.lastname,
+        mainColor = _ref.mainColor,
+        size = _ref.size,
+        url = _ref.url,
+        rounded = _ref.rounded;
+    var imageRef = React.useRef();
+
+    var _useState = React.useState(true),
+        _useState2 = _slicedToArray(_useState, 2),
+        loading = _useState2[0],
+        setLoading = _useState2[1];
+
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        showInitials = _useState4[0],
+        setShowInitials = _useState4[1];
+
+    var _useDevices = useDevices(),
+        onlyDesktop = _useDevices.onlyDesktop;
+
+    var initials = getInitialsTheme(firstname, lastname) || null;
+    var imageSize = getImageMeasurements(size, onlyDesktop);
+    var defaultUserImage = "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y".concat(imageSize && "&s=".concat(imageSize));
+
+    var getInitials = function getInitials() {
+      try {
+        if (!initials) throw new Error('First or lastname not provided');
+        return setShowInitials(true);
+      } catch (_unused) {
+        imageRef.current.src = defaultUserImage;
+      }
+    };
+
+    if (showInitials) return /*#__PURE__*/React__default["default"].createElement(InitialsAvatar, {
+      initials: initials,
+      mainColor: mainColor,
+      imageSize: imageSize,
+      rounded: rounded
+    });
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$d.Image, {
+      ref: imageRef,
+      src: url,
+      alt: "".concat(firstname, " ").concat(lastname),
+      onError: getInitials,
+      onLoad: function onLoad() {
+        return setLoading(false);
+      },
+      show: !loading,
+      size: imageSize,
+      rounded: rounded
+    }), loading && /*#__PURE__*/React__default["default"].createElement(Skeleton, {
+      circle: rounded,
+      width: imageSize,
+      height: imageSize
+    }));
+  };
+
+  Avatar.defaultProps = {
+    firstname: '',
+    lastname: '',
+    size: 'small',
+    url: '',
+    rounded: true
+  };
+
   var API_key = {
   	path: "M408.747 682.667h-85.333l-17.92 51.627h-41.387l85.333-222.72h34.56l85.333 222.72h-42.667zM333.227 651.093h64.427l-32.427-92.16z M531.2 651.947v82.773h-38.827v-222.72h85.333c1.405-0.083 3.049-0.13 4.704-0.13 20.832 0 39.92 7.465 54.736 19.865l-0.134-0.109c13.282 13.021 21.514 31.149 21.514 51.2s-8.233 38.179-21.503 51.189l-0.012 0.011c-15.119 11.289-34.176 18.075-54.817 18.075-1.88 0-3.746-0.056-5.598-0.167l0.255 0.012zM531.2 620.8h46.507c1.015 0.079 2.199 0.124 3.393 0.124 10.644 0 20.453-3.576 28.291-9.592l-0.11 0.081c6.632-6.639 10.734-15.807 10.734-25.933 0-0.783-0.025-1.561-0.073-2.332l0.005 0.106c0.017-0.437 0.027-0.95 0.027-1.466 0-10.706-4.24-20.421-11.132-27.559l0.011 0.012c-7.552-6.897-17.648-11.122-28.729-11.122-0.55 0-1.098 0.010-1.642 0.031l0.079-0.002h-47.36z M733.44 734.72h-38.4v-222.72h38.4z M873.813 113.493h-725.333c-34.83 0.478-62.91 28.708-63.147 63.551l-0 0.023v669.44c0 35.346 28.654 64 64 64v0h725.333c35.346 0 64-28.654 64-64v0-669.44c-0.239-35.165-28.8-63.579-63.999-63.579-0.301 0-0.601 0.002-0.9 0.006l0.045-0zM148.48 156.16h725.333c0.001-0 0.003-0 0.004-0 11.632 0 21.090 9.31 21.329 20.884l0 0.022v149.333h-767.147v-149.333c0.23-11.605 9.691-20.924 21.329-20.924 0.301 0 0.602 0.006 0.9 0.019l-0.043-0.001zM873.813 867.84h-725.333c-11.782 0-21.333-9.551-21.333-21.333v0-478.293h768.853v478.293c0 0.005 0 0.011 0 0.017 0 11.782-9.551 21.333-21.333 21.333-0.3 0-0.599-0.006-0.896-0.018l0.043 0.001z M200.96 277.333c0.127 0.002 0.277 0.003 0.427 0.003 16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.965 0-30.718 13.752-30.72 30.717l-0 0c-0 0.001-0 0.002-0 0.003 0 16.816 13.512 30.477 30.271 30.717l0.023 0z M294.827 277.333c16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.966 0-30.72 13.754-30.72 30.72v0c0 16.966 13.754 30.72 30.72 30.72h-0z M388.267 277.333c16.966 0 30.72-13.754 30.72-30.72s-13.754-30.72-30.72-30.72c-16.966 0-30.72 13.754-30.72 30.72h0c0.237 16.87 13.85 30.483 30.698 30.72l0.022 0z",
   	size: 24
@@ -1711,141 +2243,6 @@
   });
   PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.shape({})]);
 
-  var viewsPalette = {
-    black: '#2F2F2F',
-    blackHover: '#585858',
-    blackPressed: '#16232D',
-    blue: '#2979FF',
-    blueHover: '#5393FF',
-    bluePressed: '#1759FF',
-    blueDisabled: '#93BBFF',
-    darkGrey: '#939598',
-    darkGreyHover: '#A8AAAC',
-    darkGreyPressed: '#747679',
-    fizzGreen: '#1DB779',
-    fizzGreenHover: '#4AC593',
-    fizzGreenPressed: '#109D59',
-    green: '#74C655',
-    greenHover: '#8FD177',
-    greenPressed: '#54B039',
-    grey: '#D5D7DB',
-    greyHover: '#DDDFE2',
-    greyPressed: '#C4C6CC',
-    lightBlue: '#08C4C4',
-    lightBlueHover: '#39CFCF',
-    lightBluePressed: '#04ADAD',
-    lightGrey: '#E8EAF6',
-    lightGreyHover: '#F4F5FB',
-    lightGreyPressed: '#D0D3E3',
-    orange: '#FF8D10',
-    orangeHover: '#FFA33F',
-    orangePressed: '#FF6E08',
-    red: '#F13B70',
-    redHover: '#F3628C',
-    redPressed: '#EB2450',
-    statusRed: '#FF4343',
-    statusRedHover: '#FF6868',
-    statusRedPressed: '#FF2A2A',
-    white: '#FFF',
-    yellow: '#FFCE17',
-    yellowHover: '#FFD745',
-    yellowPressed: '#FFBA0C',
-    transparentWhite: 'rgba(256, 256, 256, 0.5)'
-  };
-
-  /**
-   * @name getColor
-   * @private
-   * @module palette/utils
-   * @description return color from palette
-   * @param {string} color
-   * @returns {string} color
-   * @example getColor('blue') // #2979FF
-   */
-
-  var getColor = function getColor(color) {
-    return viewsPalette[color] || color;
-  };
-
-  var timingFunctions$1 = {
-    standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    decelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
-    accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
-  };
-
-  var timingFunctions = {
-    standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    decelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
-    accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
-  };
-  var mixins = {
-    flexCenter: styled$c.css(["display:flex;align-items:center;justify-content:center;"]),
-    placeholder: function placeholder(styles) {
-      return styled$c.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
-    },
-    transition: function transition() {
-      var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
-      var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '200ms';
-      var transitionProperty;
-      if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
-      var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
-      return styled$c.css(["transition:", ";", ";"], transition, transitionProperty);
-    },
-    scrollbar: function scrollbar(thumbColor, shadowColor) {
-      return styled$c.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || viewsPalette.white, thumbColor);
-    }
-  };
-
-  var breakpoints = {
-    values: {
-      xs: 320,
-      sm: 640,
-      md: 962,
-      lg: 1024,
-      xl: 1280
-    }
-  };
-
-  var getMin = function getMin(key) {
-    return "@media screen and (min-width: ".concat(breakpoints.values[key], "px)");
-  };
-
-  var getMax = function getMax(key) {
-    return "@media screen and (max-width: ".concat(breakpoints.values[key] - 1, "px)");
-  };
-
-  var devices = {
-    mobile: getMax('sm'),
-    tablet: getMax('md'),
-    tabletLg: getMax('lg'),
-    onlyDesktop: getMin('lg'),
-    desktopSm: getMax('xl'),
-    desktopLg: getMin('xl')
-  };
-  var mediaBreaks = {
-    mobile: function mobile() {
-      return styled$c.css(["", "{", "}"], devices.mobile, styled$c.css.apply(void 0, arguments));
-    },
-    tablet: function tablet() {
-      return styled$c.css(["", "{", "}"], devices.tablet, styled$c.css.apply(void 0, arguments));
-    },
-    tabletLg: function tabletLg() {
-      return styled$c.css(["", "{", "}"], devices.tabletLg, styled$c.css.apply(void 0, arguments));
-    },
-    onlyDesktop: function onlyDesktop() {
-      return styled$c.css(["", "{", "}"], devices.onlyDesktop, styled$c.css.apply(void 0, arguments));
-    },
-    desktopSm: function desktopSm() {
-      return styled$c.css(["", "{", "}"], devices.desktopSm, styled$c.css.apply(void 0, arguments));
-    },
-    desktopLg: function desktopLg() {
-      return styled$c.css(["", "{", "}"], devices.desktopLg, styled$c.css.apply(void 0, arguments));
-    },
-    onlyPrint: function onlyPrint() {
-      return styled$c.css(["@media print{", "}"], styled$c.css.apply(void 0, arguments));
-    }
-  };
-
   var _templateObject$4;
   var styles = {
     Svg: styled__default["default"].svg.withConfig({
@@ -1878,7 +2275,7 @@
     })(["margin-bottom:10px;padding:5px;"])
   });
 
-  var _excluded$7 = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
+  var _excluded$8 = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
 
   var Icon = function Icon(_ref) {
     var color = _ref.color,
@@ -1889,7 +2286,7 @@
         width = _ref.width,
         height = _ref.height,
         viewBox = _ref.viewBox,
-        props = _objectWithoutProperties(_ref, _excluded$7);
+        props = _objectWithoutProperties(_ref, _excluded$8);
 
     if (!icons[name]) return null;
     var _icons$name = icons[name],
@@ -1935,7 +2332,7 @@
   };
 
   var commonStyles = function commonStyles(iconColor, fontColor, color) {
-    return styled$c.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || color || blue), getColor(iconColor || color || blue), lightGreyHover, lightGrey, grey, grey);
+    return styled$f.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || color || blue), getColor(iconColor || color || blue), lightGreyHover, lightGrey, grey, grey);
   };
 
   var getButtonStyles = function getButtonStyles(_ref) {
@@ -1945,10 +2342,10 @@
         iconColor = _ref.iconColor;
     var variantStyles = {
       contained: function contained() {
-        return styled$c.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor(fontColor || 'white'), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
+        return styled$f.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor(fontColor || 'white'), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
       },
       outlined: function outlined() {
-        return styled$c.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
+        return styled$f.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
       },
       cleaned: function cleaned() {
         return commonStyles(iconColor, fontColor, color);
@@ -1990,7 +2387,7 @@
     })
   };
 
-  var _excluded$6 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
+  var _excluded$7 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
 
   var Button = function Button(_ref) {
     var children = _ref.children,
@@ -2004,7 +2401,7 @@
         styles = _ref.styles,
         variant = _ref.variant,
         disabled = _ref.disabled,
-        props = _objectWithoutProperties(_ref, _excluded$6);
+        props = _objectWithoutProperties(_ref, _excluded$7);
 
     return /*#__PURE__*/React__default["default"].createElement(styled$b.Button, _extends$1({
       color: color,
@@ -2048,12 +2445,12 @@
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
-    iconCheckStyles: styled$c.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
+    iconCheckStyles: styled$f.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
       return !!props.rounded && "\n\t\t\tflex-shrink: 0;\n\t\t\tpadding-right: 1px;\n\t\t";
     })
   };
 
-  var _excluded$5 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
+  var _excluded$6 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
 
   var Checkbox = function Checkbox(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -2063,7 +2460,7 @@
         rounded = _ref.rounded,
         styles = _ref.styles,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded$5);
+        props = _objectWithoutProperties(_ref, _excluded$6);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2123,13 +2520,13 @@
     }, function (props) {
       switch (props.variant) {
         case 'outlined':
-          return styled$c.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
+          return styled$f.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
 
         case 'contained':
-          return styled$c.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
+          return styled$f.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
 
         case 'status':
-          return styled$c.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
+          return styled$f.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
 
         default:
           return '';
@@ -2143,19 +2540,19 @@
     }, function (props) {
       return props.textColor && "color: ".concat(getColor(props.textColor), ";");
     }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), viewsPalette.darkGrey)),
-    iconPathStyles: styled$c.css(["", ";"], mixins.transition('fill')),
+    iconPathStyles: styled$f.css(["", ";"], mixins.transition('fill')),
     DeleteButton: styled__default["default"].button.withConfig({
       displayName: "styles__DeleteButton",
       componentId: "sc-1vnh4co-1"
     })(["width:16px;height:16px;margin-left:12px;"]),
-    deleteButtonPathStyles: styled$c.css(["", ";"], mixins.transition('fill')),
+    deleteButtonPathStyles: styled$f.css(["", ";"], mixins.transition('fill')),
     Children: styled__default["default"].div.withConfig({
       displayName: "styles__Children",
       componentId: "sc-1vnh4co-2"
     })(["text-overflow:ellipsis;overflow:hidden;"])
   };
 
-  var _excluded$4 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
+  var _excluded$5 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
 
   var Chip = function Chip(_ref) {
     var backgroundColor = _ref.backgroundColor,
@@ -2170,7 +2567,7 @@
         textColor = _ref.textColor,
         variant = _ref.variant,
         hasLink = _ref.hasLink,
-        props = _objectWithoutProperties(_ref, _excluded$4);
+        props = _objectWithoutProperties(_ref, _excluded$5);
 
     if (!children && !icon) return null;
     return /*#__PURE__*/React__default["default"].createElement(styled$9.Chip, _extends$1({
@@ -2273,7 +2670,7 @@
   })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], viewsPalette.white, timingFunctions$1.standard, function (props) {
     return props.checked && "\n\t\t\tleft: 100%;\n\t\t\tmargin-left: -20px;\n\t\t";
   });
-  var iconCheckStyles = styled$c.css(["position:absolute;fill:", ";", ""], function (props) {
+  var iconCheckStyles = styled$f.css(["position:absolute;fill:", ";", ""], function (props) {
     return statusColor(props);
   }, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
     return props.checked ? viewsPalette.black : viewsPalette.darkGrey;
@@ -2303,7 +2700,7 @@
     iconCheckStyles: iconCheckStyles
   };
 
-  var _excluded$3 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
+  var _excluded$4 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
 
   var Switch = function Switch(_ref) {
     var autoComplete = _ref.autoComplete,
@@ -2313,7 +2710,7 @@
         name = _ref.name,
         onChange = _ref.onChange,
         value = _ref.value,
-        props = _objectWithoutProperties(_ref, _excluded$3);
+        props = _objectWithoutProperties(_ref, _excluded$4);
 
     var _useState = React.useState(!!value || defaultChecked),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2457,7 +2854,7 @@
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
-    }, mixins.placeholder(styled$c.css(["font-weight:400;color:", ";"], function (_ref5) {
+    }, mixins.placeholder(styled$f.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
       return error ? viewsPalette.statusRed : viewsPalette.darkGreyPressed;
     })), function (props) {
@@ -2477,7 +2874,7 @@
     })(["position:absolute;flex-shrink:0;flex-grow:0;margin-right:8px;height:100%;"])
   };
 
-  var _excluded$2 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
+  var _excluded$3 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
 
   var Input = /*#__PURE__*/function (_PureComponent) {
     _inherits$2(Input, _PureComponent);
@@ -2573,7 +2970,7 @@
             value = _this$props$value === void 0 ? stateValue : _this$props$value,
             isTranslateActive = _this$props.isTranslateActive;
             _this$props.defaultValue;
-            var props = _objectWithoutProperties(_this$props, _excluded$2);
+            var props = _objectWithoutProperties(_this$props, _excluded$3);
 
         var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
         var isFloating = isFocused || !!value.toString();
@@ -2676,7 +3073,7 @@
       componentId: "sc-wtau65-1"
     })(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], viewsPalette.grey, fontSize, viewsPalette.black, mixins.transition('color,border-color', '0.2s'), function (props) {
       return props.fullWidth ? '100%' : 'auto';
-    }, mixins.placeholder(styled$c.css(["opacity:1;color:", ";"], function (props) {
+    }, mixins.placeholder(styled$f.css(["opacity:1;color:", ";"], function (props) {
       return placeholderColor(props);
     })), mixins.scrollbar(viewsPalette.grey, viewsPalette.base), viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.white, viewsPalette.grey, viewsPalette.grey, function (props) {
       return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(viewsPalette.statusRed, "\n\t\t\t}\n\t\t");
@@ -2698,7 +3095,7 @@
     })(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], viewsPalette.statusRed)
   };
 
-  var _excluded$1 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
+  var _excluded$2 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
 
   var Textarea = /*#__PURE__*/function (_PureComponent) {
     _inherits$2(Textarea, _PureComponent);
@@ -2800,7 +3197,7 @@
             _this$props$value = _this$props.value,
             value = _this$props$value === void 0 ? stateValue : _this$props$value;
             _this$props.defaultValue;
-            var props = _objectWithoutProperties(_this$props, _excluded$1);
+            var props = _objectWithoutProperties(_this$props, _excluded$2);
 
         var isFloating = isFocused || !!value;
         return /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
@@ -3714,39 +4111,6 @@
 
   function u(){return (u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);}return e}).apply(this,arguments)}function c(e,r){if(null==e)return {};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function i(e){var t=React.useRef(e),n=React.useRef(function(e){t.current&&t.current(e);});return t.current=e,n.current}var s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},f=function(e){return "touches"in e},v=function(e){return e&&e.ownerDocument.defaultView||self},d=function(e,r,t){var n=e.getBoundingClientRect(),o=f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return {left:s((o.pageX-(n.left+v(e).pageXOffset))/n.width),top:s((o.pageY-(n.top+v(e).pageYOffset))/n.height)}},h=function(e){!f(e)&&e.preventDefault();},m=React__default["default"].memo(function(o){var a=o.onMove,l=o.onKey,s=c(o,["onMove","onKey"]),m=React.useRef(null),g=i(a),p=i(l),b=React.useRef(null),_=React.useRef(!1),x=React.useMemo(function(){var e=function(e){h(e),(f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(d(m.current,e,b.current)):t(!1);},r=function(){return t(!1)};function t(t){var n=_.current,o=v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r);}return [function(e){var r=e.nativeEvent,n=m.current;if(n&&(h(r),!function(e,r){return r&&!f(e)}(r,_.current)&&n)){if(f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier);}n.focus(),g(d(n,r,b.current)),t(!0);}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}));},t]},[p,g]),C=x[0],E=x[1],H=x[2];return React.useEffect(function(){return H},[H]),React__default["default"].createElement("div",u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),g=function(e){return e.filter(Boolean).join(" ")},p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=g(["react-colorful__pointer",r.className]);return React__default["default"].createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},React__default["default"].createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},x=function(e){return "#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},N=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return {h:b(e.h),s:b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:b(o/2),a:b(n,2)}},w=function(e){var r=N(e);return "hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},q=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return {r:b(255*[n,u,l,l,c,n][i]),g:b(255*[c,n,n,u,l,l][i]),b:b(255*[l,l,c,n,n,u][i]),a:b(o,2)}},z=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},B=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return {h:b(60*(u<0?u+6:u)),s:b(a?l/a*100:0),v:b(a/255*100),a:o}},K=React__default["default"].memo(function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return React__default["default"].createElement("div",{className:o},React__default["default"].createElement(m,{onMove:function(e){n({h:360*e.left});},onKey:function(e){n({h:s(t+360*e.left,0,360)});},"aria-label":"Hue","aria-valuetext":b(t)},React__default["default"].createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:w({h:t,s:100,v:100,a:1})})))}),L=React__default["default"].memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:w({h:t.h,s:100,v:100,a:1})};return React__default["default"].createElement("div",{className:"react-colorful__saturation",style:o},React__default["default"].createElement(m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top});},onKey:function(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)});},"aria-label":"Color","aria-valuetext":"Saturation "+b(t.s)+"%, Brightness "+b(t.v)+"%"},React__default["default"].createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:w(t)})))}),A=function(e,r){if(e===r)return !0;for(var t in e)if(e[t]!==r[t])return !1;return !0};function T(e,t,l){var u=i(l),c=React.useState(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=React.useRef({color:t,hsva:s});React.useEffect(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r);}},[t,e]),React.useEffect(function(){var r;A(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r));},[s,e,u]);var d=React.useCallback(function(e){f(function(r){return Object.assign({},r,e)});},[]);return [s,d]}var P="undefined"!=typeof window?React.useLayoutEffect:React.useEffect,X=function(){return ("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},R=new Map,V=function(e){P(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!R.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',R.set(r,t);var n=X();n&&t.setAttribute("nonce",n),r.head.appendChild(t);}},[]);},$=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c(t,["className","colorModel","color","onChange"]),f=React.useRef(null);V(f);var v=T(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return React__default["default"].createElement("div",u({},s,{ref:f,className:m}),React__default["default"].createElement(L,{hsva:d,onChange:h}),React__default["default"].createElement(K,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return B(x(e))},fromHsva:function(e){return t=(r=q(e)).g,n=r.b,"#"+z(r.r)+z(t)+z(n);var r,t,n;},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||A(x(e),x(r))}},J=function(r){return React__default["default"].createElement($,u({},r,{colorModel:G}))};
 
-  /**
-   * Copy string to clipboard
-   * @param {string} str
-   */
-  /**
-   * Creates a debounced function that delays invoking func until after wait milliseconds have
-   * elapsed since the last time the debounced function was invoked.
-   * @param {function} fn - The function to debounce.
-   * @param {number} wait - The number of milliseconds to delay.
-   * @returns {function} The new debounced function.
-   */
-
-  function debounce(fn, wait) {
-    var timerID;
-
-    function debounced() {
-      var context = this;
-      clearTimeout(timerID);
-
-      for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
-        params[_key] = arguments[_key];
-      }
-
-      timerID = setTimeout.apply(void 0, [fn.bind(context), wait].concat(params));
-    }
-
-    debounced.cancel = function cancel() {
-      clearTimeout(timerID);
-    };
-
-    return debounced;
-  }
-
   var styled$3 = {
     ClickableWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ClickableWrapper",
@@ -4319,14 +4683,14 @@
     })(["margin-right:8px;"])
   };
 
-  var _excluded = ["href", "children", "target", "icon"];
+  var _excluded$1 = ["href", "children", "target", "icon"];
 
   var Link = function Link(_ref) {
     var href = _ref.href,
         children = _ref.children,
         target = _ref.target,
         icon = _ref.icon,
-        props = _objectWithoutProperties(_ref, _excluded);
+        props = _objectWithoutProperties(_ref, _excluded$1);
 
     var renderIcon = function renderIcon() {
       return icon ? /*#__PURE__*/React__default["default"].createElement(styled$1.StyledIcon, {
@@ -4380,14 +4744,14 @@
   };
 
   var verticalCommonStyles = function verticalCommonStyles(open) {
-    return styled$c.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
+    return styled$f.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
       var fullScreen = _ref.fullScreen;
       return fullScreen && 'height: 100%';
     }, open ? '100%' : 0);
   };
 
   var horizontalCommonStyles = function horizontalCommonStyles(open) {
-    return styled$c.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
+    return styled$f.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
       var fullScreen = _ref2.fullScreen;
       return fullScreen && 'width: 100%';
     }, open ? '100%' : 0);
@@ -4396,16 +4760,16 @@
   var setPosition = function setPosition(position, open) {
     var positions = {
       top: function top() {
-        return styled$c.css(["", ";top:0;"], verticalCommonStyles(open));
+        return styled$f.css(["", ";top:0;"], verticalCommonStyles(open));
       },
       bottom: function bottom() {
-        return styled$c.css(["", ";bottom:0;"], verticalCommonStyles(open));
+        return styled$f.css(["", ";bottom:0;"], verticalCommonStyles(open));
       },
       left: function left() {
-        return styled$c.css(["", ";left:0;"], horizontalCommonStyles(open));
+        return styled$f.css(["", ";left:0;"], horizontalCommonStyles(open));
       },
       right: function right() {
-        return styled$c.css(["", ";right:0;"], horizontalCommonStyles(open));
+        return styled$f.css(["", ";right:0;"], horizontalCommonStyles(open));
       }
     };
     return positions[position];
@@ -4419,7 +4783,7 @@
         open = _ref3.open,
         transitionDuration = _ref3.transitionDuration;
     var transitionTime = transitionDuration / 1000;
-    return styled$c.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
+    return styled$f.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
   });
   var Content = styled__default["default"].div.withConfig({
     displayName: "styles__Content",
@@ -4450,6 +4814,8 @@
     Overlay: Overlay
   };
 
+  var _excluded = ["open", "position", "handleClose", "transitionDuration", "fullScreen", "closeOnClickAway", "children"];
+
   var Drawer = function Drawer(_ref) {
     var open = _ref.open,
         position = _ref.position,
@@ -4457,18 +4823,20 @@
         transitionDuration = _ref.transitionDuration,
         fullScreen = _ref.fullScreen,
         closeOnClickAway = _ref.closeOnClickAway,
-        children = _ref.children;
+        children = _ref.children,
+        props = _objectWithoutProperties(_ref, _excluded);
+
     var drawerRef = React.useRef(null);
     return /*#__PURE__*/React__default["default"].createElement(ClickAwayListener, {
       onClickAway: closeOnClickAway && open && handleClose
-    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled.Drawer, {
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled.Drawer, _extends$1({
       open: open,
       position: position,
       transitionDuration: transitionDuration,
       fullScreen: fullScreen,
       className: "drawer",
       ref: drawerRef
-    }, /*#__PURE__*/React__default["default"].createElement(styled.Content, {
+    }, props), /*#__PURE__*/React__default["default"].createElement(styled.Content, {
       className: "drawer__content"
     }, /*#__PURE__*/React__default["default"].createElement(styled.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default["default"].createElement(styled.CloseBtn, {
       onClick: handleClose
@@ -4491,6 +4859,7 @@
     closeOnClickAway: true
   };
 
+  exports.Avatar = Avatar;
   exports.Button = Button;
   exports.Checkbox = Checkbox;
   exports.Chip = Chip;
@@ -4505,6 +4874,7 @@
   exports.Input = Input;
   exports.Link = Link;
   exports.QRCode = QRCode;
+  exports.Skeleton = Skeleton;
   exports.Switch = Switch;
   exports.Textarea = Textarea;