grevlingui 0.1.39 → 0.1.40

package/NumberSelect/NumberSelect.js

@@ -1,63 +1,94 @@
 "use strict";
 
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberSelect = void 0;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
 var _react = _interopRequireWildcard(require("react"));
-
 require("./NumberSelect.css");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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; }
-
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 const NumberSelect = _ref => {
-  let {
-    value,
-    setValue,
-    min = 1,
-    max = 10,
-    size = 5,
-    color = 'white',
-    numberBgColor = '#663399',
-    selectorColor = '#1E90FF',
-    timeout = 1000,
-    onOpenInput,
-    closed,
-    invert = false
-  } = _ref;
-  const [editing, setEditing] = (0, _react.useState)(false);
-  const [doneClosing, setDoneClosing] = (0, _react.useState)(true);
-  const [closeTimeout, setCloseTimeout] = (0, _react.useState)();
-  const [doneClosingTimeout, setDoneClosingTimeout] = (0, _react.useState)();
-
+  let value = _ref.value,
+    setValue = _ref.setValue,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 1 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 10 : _ref$max,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 5 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    _ref$numberBgColor = _ref.numberBgColor,
+    numberBgColor = _ref$numberBgColor === void 0 ? '#663399' : _ref$numberBgColor,
+    _ref$selectorColor = _ref.selectorColor,
+    selectorColor = _ref$selectorColor === void 0 ? '#1E90FF' : _ref$selectorColor,
+    _ref$timeout = _ref.timeout,
+    timeout = _ref$timeout === void 0 ? 1000 : _ref$timeout,
+    onOpenInput = _ref.onOpenInput,
+    closed = _ref.closed,
+    _ref$invert = _ref.invert,
+    invert = _ref$invert === void 0 ? false : _ref$invert,
+    _ref$noFlick = _ref.noFlick,
+    noFlick = _ref$noFlick === void 0 ? false : _ref$noFlick;
+  const _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    editing = _useState2[0],
+    setEditing = _useState2[1];
+  const _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    doneClosing = _useState4[0],
+    setDoneClosing = _useState4[1];
+  const _useState5 = (0, _react.useState)(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    closeTimeout = _useState6[0],
+    setCloseTimeout = _useState6[1];
+  const _useState7 = (0, _react.useState)(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    doneClosingTimeout = _useState8[0],
+    setDoneClosingTimeout = _useState8[1];
+  const _useState9 = (0, _react.useState)(),
+    _useState0 = _slicedToArray(_useState9, 2),
+    touchStartPosition = _useState0[0],
+    setTouchStartPosition = _useState0[1];
+  const _useState1 = (0, _react.useState)(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    verticalDistanceSwiped = _useState10[0],
+    setVerticalDistanceSwiped = _useState10[1];
   const close = () => {
     clearTimeout(closeTimeout);
     setEditing(false);
     setCloseTimeout(undefined);
     startDoneClosingTimeout();
   };
-
   (0, _react.useEffect)(() => {
-    if (closed) close(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (closed) close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [closed]);
-
   const startCloseTimeout = () => {
     if (!timeout) return;
     clearTimeout(closeTimeout);
     setCloseTimeout(setTimeout(close, timeout));
   };
-
   const startDoneClosingTimeout = () => {
     clearTimeout(doneClosingTimeout);
     setDoneClosingTimeout(setTimeout(() => {
@@ -65,7 +96,6 @@ const NumberSelect = _ref => {
       setDoneClosingTimeout(undefined);
     }, 200));
   };
-
   const fullSize = "".concat(size, "rem");
   const incrementorSize = "".concat(size * .8, "rem");
   const incrementorVerticalOffset = "-".concat(size * .9, "rem");
@@ -78,15 +108,12 @@ const NumberSelect = _ref => {
     right: incrementorHorizontalOffset,
     bottom: incrementorHorizontalOffset
   };
-
   const addStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
     top: editing ? incrementorVerticalOffset : 0
   });
-
   const subtractStyle = _objectSpread(_objectSpread({}, incrementorStyle), {}, {
     bottom: editing ? incrementorVerticalOffset : 0
   });
-
   const blurStyle = {
     background: "radial-gradient(".concat(numberBgColor, "FF, ").concat(numberBgColor, "00, ").concat(numberBgColor, "00)"),
     left: minusHalfSize,
@@ -94,7 +121,6 @@ const NumberSelect = _ref => {
     top: incrementorVerticalOffset,
     bottom: incrementorVerticalOffset
   };
-
   const icon = up => /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -960 960 960",
@@ -104,37 +130,82 @@ const NumberSelect = _ref => {
   }) : /*#__PURE__*/_react.default.createElement("path", {
     d: "M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z"
   }));
-
-  const increment = change => () => {
-    startCloseTimeout();
-    const nv = change + value;
+  const increment = (change, flick) => () => {
+    const realChange = invert ? -1 * change : change;
+    if (!flick) startCloseTimeout();
+    const nv = realChange + value;
     if (nv > max || nv < min) return;
     setValue(nv);
   };
-
   const renderInputs = () => /*#__PURE__*/_react.default.createElement("div", {
     className: "numberSelect_input ".concat(editing ? '' : 'numberSelect_input-hidden')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'numberSelect_increment numberSelect_add',
     style: addStyle,
-    onClick: increment(invert ? -1 : 1)
+    onClick: increment(1)
   }, icon(true)), /*#__PURE__*/_react.default.createElement("div", {
     className: "numberSelect_blur",
     style: blurStyle
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "numberSelect_increment numberSelect_subtract",
     style: subtractStyle,
-    onClick: increment(invert ? 1 : -1)
+    onClick: increment(-1)
   }, icon()));
-
+  const gety = e => e.touches[0].clientY;
+  const onTouchStart = e => {
+    if (noFlick || editing) return;
+    setTouchStartPosition(gety(e));
+  };
+  const onTouchMove = e => !noFlick && !editing && setVerticalDistanceSwiped(touchStartPosition - gety(e));
+  const swipeDistance = 40;
+  const onTouchEnd = () => {
+    if (noFlick || editing || Math.abs(verticalDistanceSwiped) < swipeDistance) return;
+    increment(verticalDistanceSwiped > 0 ? 1 : -1, true)();
+    setVerticalDistanceSwiped(0);
+    // do haptix?
+  };
+  const offset = Math.min(Math.max(verticalDistanceSwiped, swipeDistance * -1), swipeDistance) / swipeDistance;
+  const blobOffsetUnit = "".concat(size * (1 - 0.7) / 2, "rem");
+  const blobSize = "".concat(size * .65, "rem");
+  const blobRadius = "".concat(size * .65 / 2, "rem");
+  let top = 0,
+    bottom = 0;
+  if (offset !== 0) {
+    const absValue = Math.abs(offset);
+    const distance = size / 3 * absValue;
+    const boop = "-".concat(distance, "rem");
+    if (offset > 0) {
+      top = boop;
+    } else {
+      bottom = boop;
+    }
+  }
+  let blobStyle = {
+    top,
+    bottom
+  };
+  console.log('blobOffsetUnit', blobOffsetUnit);
   return /*#__PURE__*/_react.default.createElement("div", {
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
     className: "numberSelect ".concat(editing ? 'numberSelect_editing' : '', " ").concat(doneClosing ? 'numberSelect_doneClosing' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "swipeBlobContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "swipeBlob",
+    style: _objectSpread({
+      left: "".concat(blobOffsetUnit),
+      right: "".concat(blobOffsetUnit),
+      borderRadius: blobRadius,
+      backgroundColor: numberBgColor
+    }, blobStyle)
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "numberSelect_value",
     onClick: () => {
       if (!editing) {
         startCloseTimeout();
-        onOpenInput === null || onOpenInput === void 0 ? void 0 : onOpenInput();
+        onOpenInput === null || onOpenInput === void 0 || onOpenInput();
         setDoneClosing(false);
         setEditing(true);
       } else {
@@ -150,5 +221,4 @@ const NumberSelect = _ref => {
     }
   }, value), renderInputs());
 };
-
 exports.NumberSelect = NumberSelect;

package/NumberSliderSelect/NumberSliderSelect.js

@@ -1,55 +1,83 @@
 "use strict";
 
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.regexp.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NumberSliderSelect = void 0;
-
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-
 var _react = _interopRequireWildcard(require("react"));
-
 require("./NumberSliderSelect.css");
-
 var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 const cosmos = {};
-
 const NumberSliderSelect = _ref => {
-  let {
-    value,
-    setValue,
-    flip,
-    thin,
-    min = 1,
-    max = 10,
-    shadow,
-    size = 40,
-    color = 'white',
-    numberBgColor = '#663399FF',
-    selectorColor = '#1E90FFFF',
-    pointerColor = '#6c9fff',
-    pointerShadowColor = '#33333390',
-    top = -16
-  } = _ref;
-  const [id] = (0, _react.useState)("id-".concat(Math.random()));
-  const [rendered, setRendered] = (0, _react.useState)(false);
-  const [showInput, setShowInput] = (0, _react.useState)(false);
-  const [hidden, setHidden] = (0, _react.useState)(false);
-  const [timeout1, setTimeout1] = (0, _react.useState)(0);
-  const [timeout2, setTimeout2] = (0, _react.useState)(0);
+  let value = _ref.value,
+    setValue = _ref.setValue,
+    flip = _ref.flip,
+    thin = _ref.thin,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 1 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 10 : _ref$max,
+    shadow = _ref.shadow,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 40 : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    _ref$numberBgColor = _ref.numberBgColor,
+    numberBgColor = _ref$numberBgColor === void 0 ? '#663399FF' : _ref$numberBgColor,
+    _ref$selectorColor = _ref.selectorColor,
+    selectorColor = _ref$selectorColor === void 0 ? '#1E90FFFF' : _ref$selectorColor,
+    _ref$pointerColor = _ref.pointerColor,
+    pointerColor = _ref$pointerColor === void 0 ? '#6c9fff' : _ref$pointerColor,
+    _ref$pointerShadowCol = _ref.pointerShadowColor,
+    pointerShadowColor = _ref$pointerShadowCol === void 0 ? '#33333390' : _ref$pointerShadowCol,
+    _ref$top = _ref.top,
+    top = _ref$top === void 0 ? -16 : _ref$top;
+  const _useState = (0, _react.useState)("id-".concat(Math.random())),
+    _useState2 = _slicedToArray(_useState, 1),
+    id = _useState2[0];
+  const _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rendered = _useState4[0],
+    setRendered = _useState4[1];
+  const _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showInput = _useState6[0],
+    setShowInput = _useState6[1];
+  const _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    hidden = _useState8[0],
+    setHidden = _useState8[1];
+  const _useState9 = (0, _react.useState)(0),
+    _useState0 = _slicedToArray(_useState9, 2),
+    timeout1 = _useState0[0],
+    setTimeout1 = _useState0[1];
+  const _useState1 = (0, _react.useState)(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    timeout2 = _useState10[0],
+    setTimeout2 = _useState10[1];
   const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
   let cosmoState = cosmos[id];
   (0, _react.useLayoutEffect)(() => {
@@ -70,9 +98,7 @@ const NumberSliderSelect = _ref => {
     ref.scrollIntoView();
   }, [rendered]);
   if (!cosmoState) return /*#__PURE__*/_react.default.createElement("div", null);
-
   const getExactValue = () => cosmoState.scrollRef.scrollLeft / size + min;
-
   if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   const optionStyle = {
     width: "".concat(size, "px"),
@@ -81,7 +107,6 @@ const NumberSliderSelect = _ref => {
     borderRadius: "".concat(size, "px"),
     paddingBottom: '1px'
   };
-
   const renderFade = (side, direction) => /*#__PURE__*/_react.default.createElement("div", {
     className: "fade ".concat(side),
     style: {
@@ -89,14 +114,12 @@ const NumberSliderSelect = _ref => {
       backgroundImage: "linear-gradient(to ".concat(direction, ", ").concat(selectorColor, ", ").concat(selectorColor, " , #00000000)")
     }
   });
-
   const pointerContainerStyle = flip ? {
     bottom: "-".concat(size * .4, "px"),
     transform: 'rotate(180deg)'
   } : {
     top: "-".concat(size / 2, "px")
   };
-
   const renderModal = () => /*#__PURE__*/_react.default.createElement("div", {
     className: "inputModal ".concat(showInput ? '' : 'hidden', " ").concat(shadow ? 'shadow' : ''),
     style: {
@@ -163,7 +186,6 @@ const NumberSliderSelect = _ref => {
     style: optionStyle,
     ref: node => cosmoState.refs[options.length + 1] = node
   }))));
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "NumberSliderSelectWrapper  ".concat(hidden ? 'hidden' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -174,5 +196,4 @@ const NumberSliderSelect = _ref => {
     })
   }, value, renderModal()));
 };
-
 exports.NumberSliderSelect = NumberSliderSelect;

package/PaneView/PaneView.js

@@ -4,27 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PaneView = void 0;
-
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _react = _interopRequireDefault(require("react"));
-
 require("./PaneView.css");
-
 var _UseEffectOnce = _interopRequireDefault(require("../utils/UseEffectOnce"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let startPaneRef;
-
 const PaneView = _ref => {
-  let {
-    children,
-    styleOverride,
-    startOnPane = 0
-  } = _ref;
+  let children = _ref.children,
+    styleOverride = _ref.styleOverride,
+    _ref$startOnPane = _ref.startOnPane,
+    startOnPane = _ref$startOnPane === void 0 ? 0 : _ref$startOnPane;
   (0, _UseEffectOnce.default)(() => {
     setTimeout(() => startPaneRef && startPaneRef.scrollIntoView(), 1);
   });
-
   const renderPane = (content, i) => /*#__PURE__*/_react.default.createElement("div", {
     ref: node => {
       if (startOnPane === i) startPaneRef = node;
@@ -32,7 +26,6 @@ const PaneView = _ref => {
     key: "pane".concat(i),
     className: "grevlingPaneViewPane"
   }, content);
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "grevlingPaneView",
     style: styleOverride
@@ -40,5 +33,4 @@ const PaneView = _ref => {
     className: "grevlingPaneViewScrollyContent"
   }, Array.isArray(children) ? children.map(renderPane) : renderPane(children)));
 };
-
 exports.PaneView = PaneView;

package/Radio/RadioButton.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadioButton = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RadioButton = _ref => {
-  let {
-    active,
-    text,
-    className,
-    color
-  } = _ref;
-
+  let active = _ref.active,
+    text = _ref.text,
+    className = _ref.className,
+    color = _ref.color;
   const renderCircle = (r, className, mask, fill) => /*#__PURE__*/_react.default.createElement("circle", {
     style: {
       transition: "r 300ms"
@@ -28,7 +22,6 @@ const RadioButton = _ref => {
     className: className,
     mask: mask
   });
-
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -57,5 +50,4 @@ const RadioButton = _ref => {
     }
   }, text));
 };
-
 exports.RadioButton = RadioButton;

package/Radio/RadioGroup.js

@@ -4,20 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadioGroup = void 0;
-
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _react = _interopRequireDefault(require("react"));
-
 var _RadioButton = require("./RadioButton");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RadioGroup = _ref => {
-  let {
-    options,
-    selected,
-    onSelect,
-    color
-  } = _ref;
+  let options = _ref.options,
+    selected = _ref.selected,
+    onSelect = _ref.onSelect,
+    color = _ref.color;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "radioGroup"
   }, options.map((option, i) => /*#__PURE__*/_react.default.createElement("div", {
@@ -33,5 +29,4 @@ const RadioGroup = _ref => {
     color: color
   })))));
 };
-
 exports.RadioGroup = RadioGroup;

package/Radio/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "RadioGroup", {
     return _RadioGroup.RadioGroup;
   }
 });
-
 var _RadioButton = require("./RadioButton");
-
 var _RadioGroup = require("./RadioGroup");

package/SunMoon.js

@@ -4,22 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SunMoon = void 0;
-
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SunMoon = _ref => {
-  let {
-    sun,
-    color = 'white',
-    tt = 300,
-    size = 32,
-    onClick
-  } = _ref;
-
+  let sun = _ref.sun,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'white' : _ref$color,
+    _ref$tt = _ref.tt,
+    tt = _ref$tt === void 0 ? 300 : _ref$tt,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    onClick = _ref.onClick;
   const transition = keys => keys.map(key => "".concat(key, " ").concat(tt, "ms linear")).join(', ');
-
   const path = d => /*#__PURE__*/_react.default.createElement("path", {
     d: d,
     fill: color,
@@ -27,7 +25,6 @@ const SunMoon = _ref => {
       transition: transition(['d', 'fill'])
     }
   });
-
   const circle = (cx, cy, r, fill) => /*#__PURE__*/_react.default.createElement("circle", {
     cx: cx,
     cy: cy,
@@ -37,7 +34,6 @@ const SunMoon = _ref => {
       transition: transition(['r', 'cy', 'cx', 'fill'])
     }
   });
-
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: size,
     height: size,
@@ -58,5 +54,4 @@ const SunMoon = _ref => {
     mask: "url(#moonMask)"
   }, sun ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 2L68 18H52L60 2Z"), path("M60 118L52 102L68 102L60 118Z"), path("M89 9.77053L87.9282 27.6269L74.0718 19.6269L89 9.77053Z"), path("M31 110.229L32.0718 92.3731L45.9282 100.373L31 110.229Z"), path("M110.229 31L100.373 45.9282L92.3731 32.0718L110.229 31Z"), path("M9.77053 89L19.6269 74.0718L27.6269 87.9282L9.77053 89Z"), path("M118 60L102 68L102 52L118 60Z"), path("M2 60L18 52L18 68L2 60Z"), path("M110.229 89L92.3731 87.9282L100.373 74.0718L110.229 89Z"), path("M9.77052 31L27.6269 32.0718L19.6269 45.9282L9.77052 31Z"), path("M89 110.229L74.0718 100.373L87.9282 92.3731L89 110.229Z"), path("M31 9.77053L45.9282 19.6269L32.0718 27.6269L31 9.77053Z"), circle("60", "60", "35", color)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 15L68 31H52L60 15Z"), path("M60 105L52 89L68 89L60 105Z"), path("M82.5 21.0289L81.4282 38.8853L67.5718 30.8853L82.5 21.0289Z"), path("M37.5 98.9711L38.5718 81.1147L52.4282 89.1147L37.5 98.9711Z"), path("M98.9712 37.5L89.1148 52.4282L81.1148 38.5718L98.9712 37.5Z"), path("M21.0289 82.5L30.8853 67.5718L38.8853 81.4282L21.0289 82.5Z"), path("M105 60L89 68L89 52L105 60Z"), path("M15 60L31 52L31 68L15 60Z"), path("M98.9711 82.5L81.1147 81.4282L89.1147 67.5718L98.9711 82.5Z"), path("M21.0288 37.5L38.8852 38.5718L30.8852 52.4282L21.0288 37.5Z"), path("M82.5 98.9711L67.5718 89.1147L81.4282 81.1147L82.5 98.9711Z"), path("M37.5 21.0289L52.4282 30.8853L38.5718 38.8853L37.5 21.0289Z"), circle("60", "60", "45", color))));
 };
-
 exports.SunMoon = SunMoon;