@pedidopago/ui 1.0.6

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

@@ -0,0 +1,27 @@
+export declare type CheckboxChildren = {
+    label: string;
+    value: string;
+    id: string;
+};
+export interface ICheckboxInputProps {
+    label?: string;
+    id?: string;
+    color?: string;
+    isDisabled?: boolean;
+    isInderteminate?: boolean;
+    defaultIsChecked?: boolean;
+    name?: string;
+    isMultiple?: boolean;
+    checkboxChildren?: CheckboxChildren[];
+    onChangeValue?: (checked: boolean | CheckboxChildren[]) => void;
+}
+export interface IMultipleCheckboxProps extends Omit<ICheckboxInputProps, 'isMultiple'> {
+    checkboxChildren: CheckboxChildren[];
+}
+export interface CheckboxChildrenState extends CheckboxChildren {
+    hasSelected: boolean;
+}
+export interface IStyledCheckboxInput {
+    isDisabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxInput/types.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AACF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,gBAAgB,EAAE,KAAK,IAAI,CAAC;CACjE;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,YAAY,CAAC;IACrF,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;CACtC;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/components/CheckboxInput/types.js

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

package/dist/components/ColorPicker/colorpicker.test.d.ts

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

package/dist/components/ColorPicker/colorpicker.test.d.ts.map

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

package/dist/components/ColorPicker/colorpicker.test.js

@@ -0,0 +1,66 @@
+"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 }; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  return utils;
+};
+
+describe('Color Picker', function () {
+  it('should it render the color picker component', function () {
+    var props = {
+      initialColor: '#ffffff',
+      onChange: jest.fn(),
+      onCancel: jest.fn(),
+      onSave: jest.fn()
+    };
+
+    var _setup = setup(props),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it receive an initial color', function () {
+    var props = {
+      initialColor: '#ffffff',
+      onChange: jest.fn(),
+      onCancel: jest.fn(),
+      onSave: jest.fn()
+    };
+
+    var _setup2 = setup(props),
+        container = _setup2.container;
+
+    var color = container.querySelector('input');
+    expect(color).toHaveValue('#ffffff');
+  });
+  it('should it callback the onsave function', function () {
+    var props = {
+      initialColor: '#ffffff',
+      onChange: jest.fn(),
+      onCancel: jest.fn(),
+      onSave: jest.fn()
+    };
+    var component = setup(props);
+    component.getByText('Salvar cor').click();
+    expect(props.onSave).toHaveBeenCalled();
+  });
+  it('should it callback the oncancel function', function () {
+    var props = {
+      initialColor: '#ffffff',
+      onChange: jest.fn(),
+      onCancel: jest.fn(),
+      onSave: jest.fn()
+    };
+    var component = setup(props);
+    component.getByText('Cancelar').click();
+    expect(props.onCancel).toHaveBeenCalled();
+  });
+});

package/dist/components/ColorPicker/components/ColorHue.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IColorHue } from '../types';
+declare const ColorHue: import("react").MemoExoticComponent<({ hsva, onChange }: IColorHue) => JSX.Element>;
+export default ColorHue;
+//# sourceMappingURL=ColorHue.d.ts.map

package/dist/components/ColorPicker/components/ColorHue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorHue.d.ts","sourceRoot":"","sources":["../../../../src/components/ColorPicker/components/ColorHue.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA+BrC,QAAA,MAAM,QAAQ,2DA5BmB,SAAS,iBA4BhB,CAAC;AAE3B,eAAe,QAAQ,CAAC"}

package/dist/components/ColorPicker/components/ColorHue.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ColorSelector = _interopRequireDefault(require("./ColorSelector"));
+
+var _styles = require("../styles");
+
+var _conversors = require("../utils/conversors");
+
+var _ColorPointer = _interopRequireDefault(require("./ColorPointer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Hue = function Hue(_ref) {
+  var hsva = _ref.hsva,
+      onChange = _ref.onChange;
+
+  var handleMovePointer = function handleMovePointer(position) {
+    onChange(360 * position.x);
+  };
+
+  var handleHueHsva = {
+    h: hsva.h,
+    s: 100,
+    v: 100,
+    a: 1
+  };
+  return /*#__PURE__*/React.createElement(_styles.ColorHueWrapper, null, /*#__PURE__*/React.createElement(_styles.ColorHueCircle, {
+    style: {
+      backgroundColor: (0, _conversors.hsvaToHslaString)(hsva)
+    }
+  }), /*#__PURE__*/React.createElement(_styles.ColorHueSliderContainer, null, /*#__PURE__*/React.createElement(_ColorSelector.default, {
+    onMove: handleMovePointer
+  }, /*#__PURE__*/React.createElement(_ColorPointer.default, {
+    hsva: handleHueHsva,
+    left: hsva.h / 360
+  }))));
+};
+
+var ColorHue = /*#__PURE__*/(0, _react.memo)(Hue);
+var _default = ColorHue;
+exports.default = _default;

package/dist/components/ColorPicker/components/ColorInput.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IColorInput } from '../types';
+declare const ColorInput: ({ inputAlert, setInputAlert, hsva, onChange, colorMode }: IColorInput) => JSX.Element;
+export default ColorInput;
+//# sourceMappingURL=ColorInput.d.ts.map

package/dist/components/ColorPicker/components/ColorInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ColorPicker/components/ColorInput.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,QAAA,MAAM,UAAU,6DAA8D,WAAW,gBAmCxF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ColorPicker/components/ColorInput.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Input = _interopRequireDefault(require("../../Input"));
+
+var _checkers = require("../utils/checkers");
+
+var _conversors = require("../utils/conversors");
+
+var _parsers = require("../utils/parsers");
+
+var _useTheme2 = require("../../../shared/theme/hooks/useTheme");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 ColorInput = function ColorInput(_ref) {
+  var inputAlert = _ref.inputAlert,
+      setInputAlert = _ref.setInputAlert,
+      hsva = _ref.hsva,
+      onChange = _ref.onChange,
+      colorMode = _ref.colorMode;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useTheme = (0, _useTheme2.useTheme)(),
+      theme = _useTheme.theme;
+
+  var handleChangeColorInput = function handleChangeColorInput(event) {
+    setValue(event.target.value);
+
+    if ((0, _checkers.isAValidColor)(event.target.value)) {
+      var hsvaColor = (0, _parsers.colorToHsva)(event.target.value);
+      onChange(hsvaColor);
+      setInputAlert({
+        alert: undefined
+      });
+    } else {
+      setInputAlert({
+        alert: 'error'
+      });
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    setValue((0, _parsers.colorToOutputMode)((0, _conversors.hsvaToRgbaString)(hsva), colorMode));
+  }, [hsva, colorMode]);
+  return /*#__PURE__*/React.createElement(_Input.default, {
+    labelBackground: {
+      dark: theme.colors.neutral.neutral6,
+      light: theme.colors.neutral.white
+    },
+    label: "Cor selecionada",
+    value: value,
+    onChange: handleChangeColorInput,
+    onBlur: handleChangeColorInput,
+    alert: inputAlert.alert
+  });
+};
+
+var _default = ColorInput;
+exports.default = _default;

package/dist/components/ColorPicker/components/ColorPickerBox.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IColorPickerBox } from '../types';
+declare const ColorPickerBox: import("react").MemoExoticComponent<({ hsva, onChange }: IColorPickerBox) => JSX.Element>;
+export default ColorPickerBox;
+//# sourceMappingURL=ColorPickerBox.d.ts.map

package/dist/components/ColorPicker/components/ColorPickerBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ColorPicker/components/ColorPickerBox.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AA+B3C,QAAA,MAAM,cAAc,2DA7BmB,eAAe,iBA6BhB,CAAC;AAEvC,eAAe,cAAc,CAAC"}

package/dist/components/ColorPicker/components/ColorPickerBox.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _ColorSelector = _interopRequireDefault(require("./ColorSelector"));
+
+var _ColorPointer = _interopRequireDefault(require("./ColorPointer"));
+
+var _conversors = require("../utils/conversors");
+
+var _styles = require("../styles");
+
+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 PickerBox = function PickerBox(_ref) {
+  var hsva = _ref.hsva,
+      onChange = _ref.onChange;
+
+  var handleMoveColor = function handleMoveColor(position) {
+    var modifiedHsva = _objectSpread(_objectSpread({}, hsva), {}, {
+      s: position.x * 100,
+      v: 100 - position.y * 100
+    });
+
+    onChange(modifiedHsva);
+  };
+
+  var style = {
+    backgroundColor: (0, _conversors.hsvaToHslaString)({
+      h: hsva.h,
+      s: 100,
+      v: 100,
+      a: 1
+    })
+  };
+  return /*#__PURE__*/React.createElement(_styles.ColorSaturationWrapper, {
+    style: style
+  }, /*#__PURE__*/React.createElement(_ColorSelector.default, {
+    onMove: handleMoveColor
+  }, /*#__PURE__*/React.createElement(_ColorPointer.default, {
+    hsva: hsva,
+    top: 1 - hsva.v / 100,
+    left: hsva.s / 100
+  })));
+};
+
+var ColorPickerBox = /*#__PURE__*/(0, _react.memo)(PickerBox);
+var _default = ColorPickerBox;
+exports.default = _default;

package/dist/components/ColorPicker/components/ColorPointer.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IColorPointer } from '../types';
+declare const ColorPointer: ({ top, left, hsva }: IColorPointer) => JSX.Element;
+export default ColorPointer;
+//# sourceMappingURL=ColorPointer.d.ts.map

package/dist/components/ColorPicker/components/ColorPointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPointer.d.ts","sourceRoot":"","sources":["../../../../src/components/ColorPicker/components/ColorPointer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGzC,QAAA,MAAM,YAAY,wBAA+B,aAAa,gBAQ7D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/ColorPicker/components/ColorPointer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styles = require("../styles");
+
+var _conversors = require("../utils/conversors");
+
+var ColorPointer = function ColorPointer(_ref) {
+  var _ref$top = _ref.top,
+      top = _ref$top === void 0 ? 0.5 : _ref$top,
+      left = _ref.left,
+      hsva = _ref.hsva;
+  var styles = {
+    top: "".concat(top * 100, "%"),
+    left: "".concat(left * 100, "%"),
+    backgroundColor: (0, _conversors.hsvaToHslaString)(hsva)
+  };
+  return /*#__PURE__*/React.createElement(_styles.ColorPointerWrapper, {
+    style: styles
+  });
+};
+
+var _default = ColorPointer;
+exports.default = _default;

package/dist/components/ColorPicker/components/ColorSelector.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IColorSelector } from '../types';
+declare const ColorSelector: import("react").MemoExoticComponent<({ onMove, ...rest }: IColorSelector) => JSX.Element>;
+export default ColorSelector;
+//# sourceMappingURL=ColorSelector.d.ts.map

package/dist/components/ColorPicker/components/ColorSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/ColorPicker/components/ColorSelector.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAqG1C,QAAA,MAAM,aAAa,4DApEoB,cAAc,iBAoEjB,CAAC;AAErC,eAAe,aAAa,CAAC"}

package/dist/components/ColorPicker/components/ColorSelector.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _useCachedCallback = require("../hooks/useCachedCallback");
+
+var _styles = require("../styles");
+
+var _excluded = ["onMove"];
+
+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 isTouchEvent = function isTouchEvent(event) {
+  return event === null || event === void 0 ? void 0 : 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 getPositionPoints = function getPositionPoints(node, event, touchId) {
+  var rect = node.getBoundingClientRect();
+  var mousePointer = isTouchEvent(event) ? getTouchPointer(event.touches, touchId) : event;
+
+  var getMinMax = function getMinMax(number) {
+    var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    return number > max ? max : number < min ? min : number;
+  };
+
+  return {
+    x: getMinMax((mousePointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
+    y: getMinMax((mousePointer.pageY - (rect.top + window.pageYOffset)) / rect.height)
+  };
+};
+
+var Selector = function Selector(_ref) {
+  var onMove = _ref.onMove,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var container = (0, _react.useRef)(null);
+  var isTouch = (0, _react.useRef)(false);
+  var cachedMove = (0, _useCachedCallback.useCachedCallback)(onMove);
+  var touchId = (0, _react.useRef)(null);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    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 && container.current) {
+        cachedMove(getPositionPoints(container.current, event, touchId.current));
+      }
+    };
+
+    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 handleMoveStart = function handleMoveStart(event) {
+      var node = event.currentTarget;
+
+      if (isTouchEvent(event)) {
+        isTouch.current = true;
+      } else {
+        event.preventDefault();
+        isTouch.current = false;
+      }
+
+      if (isTouchEvent(event.nativeEvent)) {
+        var changedTouches = event.nativeEvent.changedTouches || [];
+        if (changedTouches.length) touchId.current = changedTouches[0].identifier;
+      }
+
+      cachedMove(getPositionPoints(node, event.nativeEvent, touchId.current));
+      toggleMoveEvent(true);
+    };
+
+    return [handleMoveStart, toggleMoveEvent];
+  }, [cachedMove]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      handleMoveStart = _useMemo2[0],
+      toggleMoveEvent = _useMemo2[1];
+
+  (0, _react.useEffect)(function () {
+    return toggleMoveEvent;
+  }, [toggleMoveEvent]);
+  return /*#__PURE__*/React.createElement(_styles.ColorSelectorWrapper, _extends({
+    ref: container,
+    onMouseDown: handleMoveStart,
+    onTouchStart: handleMoveStart,
+    tabIndex: 0,
+    role: "slider"
+  }, rest));
+};
+
+var ColorSelector = /*#__PURE__*/(0, _react.memo)(Selector);
+var _default = ColorSelector;
+exports.default = _default;

package/dist/components/ColorPicker/hooks/useCachedCallback.d.ts

@@ -0,0 +1,2 @@
+export declare const useCachedCallback: <T>(callback?: ((value: T) => void) | undefined) => (value: T) => void;
+//# sourceMappingURL=useCachedCallback.d.ts.map

package/dist/components/ColorPicker/hooks/useCachedCallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCachedCallback.d.ts","sourceRoot":"","sources":["../../../../src/components/ColorPicker/hooks/useCachedCallback.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,gCAAgC,IAAI,gCAAkB,IAUnF,CAAC"}

package/dist/components/ColorPicker/hooks/useCachedCallback.js

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

package/dist/components/ColorPicker/hooks/useHsva.d.ts

@@ -0,0 +1,3 @@
+import { IHsvaObject } from './../types';
+export declare const useHsva: (color: string, onChange?: ((color: string) => void) | undefined) => [IHsvaObject, (hsva: IHsvaObject) => void];
+//# sourceMappingURL=useHsva.d.ts.map

package/dist/components/ColorPicker/hooks/useHsva.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHsva.d.ts","sourceRoot":"","sources":["../../../../src/components/ColorPicker/hooks/useHsva.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,eAAO,MAAM,OAAO,UACX,MAAM,sBACM,MAAM,KAAK,IAAI,uCACZ,WAAW,KAAK,IAAI,CAuC3C,CAAC"}

package/dist/components/ColorPicker/hooks/useHsva.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHsva = void 0;
+
+var _react = require("react");
+
+var _parsers = require("./../utils/parsers");
+
+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 useHsva = function useHsva(color, onChange) {
+  var _useState = (0, _react.useState)(function () {
+    return (0, _parsers.colorToHsva)(color);
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      hsva = _useState2[0],
+      setHsva = _useState2[1];
+
+  var cached = (0, _react.useRef)({
+    color: color,
+    hsva: hsva
+  });
+  (0, _react.useEffect)(function () {
+    var newColorMode = (0, _parsers.colorMode)(color);
+    var cachedColorMode = (0, _parsers.colorMode)(cached.current.color);
+    var cachedColor = (0, _parsers.colorToOutputMode)(cachedColorMode, newColorMode);
+
+    if (color !== cachedColor) {
+      var newHsva = (0, _parsers.colorToHsva)(color);
+      cached.current.color = color;
+      cached.current.hsva = newHsva;
+      setHsva(newHsva);
+    }
+  }, [color]);
+  (0, _react.useEffect)(function () {
+    var currentColorMode = (0, _parsers.colorMode)(cached.current.color);
+    var hsvaToColor = (0, _parsers.colorFromHsva)(hsva, currentColorMode);
+
+    if (!Object.is(cached.current.hsva, hsva) && !Object.is(cached.current.color, hsvaToColor)) {
+      cached.current.hsva = hsva;
+      cached.current.color = hsvaToColor;
+      onChange && onChange(hsvaToColor);
+    }
+  }, [hsva, cached, onChange]);
+  var handleChange = (0, _react.useCallback)(function (hsva) {
+    setHsva(function (update) {
+      return Object.assign({}, update, hsva);
+    });
+  }, []);
+  return [hsva, handleChange];
+};
+
+exports.useHsva = useHsva;

package/dist/components/ColorPicker/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IColorPicker } from './types';
+declare const ColorPicker: ({ onChange, onSave, onCancel, initialColor }: IColorPicker) => JSX.Element;
+export default ColorPicker;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ColorPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,YAAY,EAAe,MAAM,SAAS,CAAC;AAEpD,QAAA,MAAM,WAAW,iDAA8D,YAAY,gBAwD1F,CAAC;AAEF,eAAe,WAAW,CAAC"}