three-render-objects 1.29.0 → 1.29.2

package/dist/three-render-objects.js

@@ -1,4 +1,4 @@
-// Version 1.29.0 three-render-objects - https://github.com/vasturiano/three-render-objects
+// Version 1.29.2 three-render-objects - https://github.com/vasturiano/three-render-objects
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
   typeof define === 'function' && define.amd ? define(['three'], factory) :
@@ -62,6 +62,20 @@
       return a;
     }
   }
+  function _toPrimitive$1(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 _toPropertyKey$1(t) {
+    var i = _toPrimitive$1(t, "string");
+    return "symbol" == typeof i ? i : String(i);
+  }
   function _defineProperty(obj, key, value) {
     key = _toPropertyKey$1(key);
     if (key in obj) {
@@ -110,20 +124,6 @@
   function _nonIterableRest$1() {
     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 _toPrimitive$1(input, hint) {
-    if (typeof input !== "object" || input === null) return input;
-    var prim = input[Symbol.toPrimitive];
-    if (prim !== undefined) {
-      var res = prim.call(input, hint || "default");
-      if (typeof res !== "object") return res;
-      throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return (hint === "string" ? String : Number)(input);
-  }
-  function _toPropertyKey$1(arg) {
-    var key = _toPrimitive$1(arg, "string");
-    return typeof key === "symbol" ? key : String(key);
-  }
 
   const _changeEvent$2 = { type: 'change' };
   const _startEvent$1 = { type: 'start' };
@@ -973,6 +973,9 @@
   		// "target" sets the location of focus, where the object orbits around
   		this.target = new three$1.Vector3();
 
+  		// Sets the 3D cursor (similar to Blender), from which the maxTargetRadius takes effect
+  		this.cursor = new three$1.Vector3();
+
   		// How far you can dolly in and out ( PerspectiveCamera only )
   		this.minDistance = 0;
   		this.maxDistance = Infinity;
@@ -981,6 +984,10 @@
   		this.minZoom = 0;
   		this.maxZoom = Infinity;
 
+  		// Limit camera target within a spherical area around the cursor
+  		this.minTargetRadius = 0;
+  		this.maxTargetRadius = Infinity;
+
   		// How far you can orbit vertically, upper and lower limits.
   		// Range is 0 to Math.PI radians.
   		this.minPolarAngle = 0; // radians
@@ -1181,6 +1188,11 @@
 
   				}
 
+  				// Limit the target distance from the cursor to create a sphere around the center of interest
+  				scope.target.sub( scope.cursor );
+  				scope.target.clampLength( scope.minTargetRadius, scope.maxTargetRadius );
+  				scope.target.add( scope.cursor );
+
   				// adjust the camera position based on zoom only if we're not zooming to the cursor or if it's an ortho camera
   				// we adjust zoom later in these cases
   				if ( scope.zoomToCursor && performCursorZoom || scope.object.isOrthographicCamera ) {
@@ -1193,7 +1205,6 @@
 
   				}
 
-
   				offset.setFromSpherical( spherical );
 
   				// rotate offset back to "camera-up-vector-is-up" space
@@ -1295,9 +1306,14 @@
 
   				} else if ( scope.object.isOrthographicCamera ) {
 
-  					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
-  					scope.object.updateProjectionMatrix();
-  					zoomChanged = true;
+  					zoomChanged = scale !== 1;
+
+  					if ( zoomChanged ) {
+
+  						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+  						scope.object.updateProjectionMatrix();
+
+  					}
 
   				}
 
@@ -1319,8 +1335,6 @@
   					lastQuaternion.copy( scope.object.quaternion );
   					lastTargetPosition.copy( scope.target );
 
-  					zoomChanged = false;
-
   					return true;
 
   				}
@@ -1401,6 +1415,8 @@
   		const pointers = [];
   		const pointerPositions = {};
 
+  		let controlActive = false;
+
   		function getAutoRotationAngle( deltaTime ) {
 
   			if ( deltaTime !== null ) {
@@ -1415,9 +1431,10 @@
 
   		}
 
-  		function getZoomScale() {
+  		function getZoomScale( delta ) {
 
-  			return Math.pow( 0.95, scope.zoomSpeed );
+  			const normalizedDelta = Math.abs( delta * 0.01 );
+  			return Math.pow( 0.95, scope.zoomSpeed * normalizedDelta );
 
   		}
 
@@ -1544,7 +1561,7 @@
 
   		}
 
-  		function updateMouseParameters( event ) {
+  		function updateZoomParameters( x, y ) {
 
   			if ( ! scope.zoomToCursor ) {
 
@@ -1555,13 +1572,13 @@
   			performCursorZoom = true;
 
   			const rect = scope.domElement.getBoundingClientRect();
-  			const x = event.clientX - rect.left;
-  			const y = event.clientY - rect.top;
+  			const dx = x - rect.left;
+  			const dy = y - rect.top;
   			const w = rect.width;
   			const h = rect.height;
 
-  			mouse.x = ( x / w ) * 2 - 1;
-  			mouse.y = - ( y / h ) * 2 + 1;
+  			mouse.x = ( dx / w ) * 2 - 1;
+  			mouse.y = - ( dy / h ) * 2 + 1;
 
   			dollyDirection.set( mouse.x, mouse.y, 1 ).unproject( scope.object ).sub( scope.object.position ).normalize();
 
@@ -1585,7 +1602,7 @@
 
   		function handleMouseDownDolly( event ) {
 
-  			updateMouseParameters( event );
+  			updateZoomParameters( event.clientX, event.clientX );
   			dollyStart.set( event.clientX, event.clientY );
 
   		}
@@ -1622,11 +1639,11 @@
 
   			if ( dollyDelta.y > 0 ) {
 
-  				dollyOut( getZoomScale() );
+  				dollyOut( getZoomScale( dollyDelta.y ) );
 
   			} else if ( dollyDelta.y < 0 ) {
 
-  				dollyIn( getZoomScale() );
+  				dollyIn( getZoomScale( dollyDelta.y ) );
 
   			}
 
@@ -1652,15 +1669,15 @@
 
   		function handleMouseWheel( event ) {
 
-  			updateMouseParameters( event );
+  			updateZoomParameters( event.clientX, event.clientY );
 
   			if ( event.deltaY < 0 ) {
 
-  				dollyIn( getZoomScale() );
+  				dollyIn( getZoomScale( event.deltaY ) );
 
   			} else if ( event.deltaY > 0 ) {
 
-  				dollyOut( getZoomScale() );
+  				dollyOut( getZoomScale( event.deltaY ) );
 
   			}
 
@@ -1748,16 +1765,18 @@
 
   		}
 
-  		function handleTouchStartRotate() {
+  		function handleTouchStartRotate( event ) {
 
   			if ( pointers.length === 1 ) {
 
-  				rotateStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
+  				rotateStart.set( event.pageX, event.pageY );
 
   			} else {
 
-  				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-  				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
+  				const position = getSecondPointerPosition( event );
+
+  				const x = 0.5 * ( event.pageX + position.x );
+  				const y = 0.5 * ( event.pageY + position.y );
 
   				rotateStart.set( x, y );
 
@@ -1765,16 +1784,18 @@
 
   		}
 
-  		function handleTouchStartPan() {
+  		function handleTouchStartPan( event ) {
 
   			if ( pointers.length === 1 ) {
 
-  				panStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
+  				panStart.set( event.pageX, event.pageY );
 
   			} else {
 
-  				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-  				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
+  				const position = getSecondPointerPosition( event );
+
+  				const x = 0.5 * ( event.pageX + position.x );
+  				const y = 0.5 * ( event.pageY + position.y );
 
   				panStart.set( x, y );
 
@@ -1782,10 +1803,12 @@
 
   		}
 
-  		function handleTouchStartDolly() {
+  		function handleTouchStartDolly( event ) {
+
+  			const position = getSecondPointerPosition( event );
 
-  			const dx = pointers[ 0 ].pageX - pointers[ 1 ].pageX;
-  			const dy = pointers[ 0 ].pageY - pointers[ 1 ].pageY;
+  			const dx = event.pageX - position.x;
+  			const dy = event.pageY - position.y;
 
   			const distance = Math.sqrt( dx * dx + dy * dy );
 
@@ -1793,19 +1816,19 @@
 
   		}
 
-  		function handleTouchStartDollyPan() {
+  		function handleTouchStartDollyPan( event ) {
 
-  			if ( scope.enableZoom ) handleTouchStartDolly();
+  			if ( scope.enableZoom ) handleTouchStartDolly( event );
 
-  			if ( scope.enablePan ) handleTouchStartPan();
+  			if ( scope.enablePan ) handleTouchStartPan( event );
 
   		}
 
-  		function handleTouchStartDollyRotate() {
+  		function handleTouchStartDollyRotate( event ) {
 
-  			if ( scope.enableZoom ) handleTouchStartDolly();
+  			if ( scope.enableZoom ) handleTouchStartDolly( event );
 
-  			if ( scope.enableRotate ) handleTouchStartRotate();
+  			if ( scope.enableRotate ) handleTouchStartRotate( event );
 
   		}
 
@@ -1880,6 +1903,11 @@
 
   			dollyStart.copy( dollyEnd );
 
+  			const centerX = ( event.pageX + position.x ) * 0.5;
+  			const centerY = ( event.pageY + position.y ) * 0.5;
+
+  			updateZoomParameters( centerX, centerY );
+
   		}
 
   		function handleTouchMoveDollyPan( event ) {
@@ -1951,18 +1979,32 @@
 
   			removePointer( event );
 
-  			if ( pointers.length === 0 ) {
+  			switch ( pointers.length ) {
 
-  				scope.domElement.releasePointerCapture( event.pointerId );
+  				case 0:
 
-  				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
-  				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+  					scope.domElement.releasePointerCapture( event.pointerId );
 
-  			}
+  					scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+  					scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
-  			scope.dispatchEvent( _endEvent );
+  					scope.dispatchEvent( _endEvent );
 
-  			state = STATE.NONE;
+  					state = STATE.NONE;
+
+  					break;
+
+  				case 1:
+
+  					const pointerId = pointers[ 0 ];
+  					const position = pointerPositions[ pointerId ];
+
+  					// minimal placeholder event - allows state correction on pointer-up
+  					onTouchStart( { pointerId: pointerId, pageX: position.x, pageY: position.y } );
+
+  					break;
+
+  			}
 
   		}
 
@@ -2103,12 +2145,76 @@
 
   			scope.dispatchEvent( _startEvent );
 
-  			handleMouseWheel( event );
+  			handleMouseWheel( customWheelEvent( event ) );
 
   			scope.dispatchEvent( _endEvent );
 
   		}
 
+  		function customWheelEvent( event ) {
+
+  			const mode = event.deltaMode;
+
+  			// minimal wheel event altered to meet delta-zoom demand
+  			const newEvent = {
+  				clientX: event.clientX,
+  				clientY: event.clientY,
+  				deltaY: event.deltaY,
+  			};
+
+  			switch ( mode ) {
+
+  				case 1: // LINE_MODE
+  					newEvent.deltaY *= 16;
+  					break;
+
+  				case 2: // PAGE_MODE
+  					newEvent.deltaY *= 100;
+  					break;
+
+  			}
+
+  			// detect if event was triggered by pinching
+  			if ( event.ctrlKey && ! controlActive ) {
+
+  				newEvent.deltaY *= 10;
+
+  			}
+
+  			return newEvent;
+
+  		}
+
+  		function interceptControlDown( event ) {
+
+  			if ( event.key === 'Control' ) {
+
+  				controlActive = true;
+
+
+  				const document = scope.domElement.getRootNode(); // offscreen canvas compatibility
+
+  				document.addEventListener( 'keyup', interceptControlUp, { passive: true, capture: true } );
+
+  			}
+
+  		}
+
+  		function interceptControlUp( event ) {
+
+  			if ( event.key === 'Control' ) {
+
+  				controlActive = false;
+
+
+  				const document = scope.domElement.getRootNode(); // offscreen canvas compatibility
+
+  				document.removeEventListener( 'keyup', interceptControlUp, { passive: true, capture: true } );
+
+  			}
+
+  		}
+
   		function onKeyDown( event ) {
 
   			if ( scope.enabled === false || scope.enablePan === false ) return;
@@ -2131,7 +2237,7 @@
 
   							if ( scope.enableRotate === false ) return;
 
-  							handleTouchStartRotate();
+  							handleTouchStartRotate( event );
 
   							state = STATE.TOUCH_ROTATE;
 
@@ -2141,7 +2247,7 @@
 
   							if ( scope.enablePan === false ) return;
 
-  							handleTouchStartPan();
+  							handleTouchStartPan( event );
 
   							state = STATE.TOUCH_PAN;
 
@@ -2163,7 +2269,7 @@
 
   							if ( scope.enableZoom === false && scope.enablePan === false ) return;
 
-  							handleTouchStartDollyPan();
+  							handleTouchStartDollyPan( event );
 
   							state = STATE.TOUCH_DOLLY_PAN;
 
@@ -2173,7 +2279,7 @@
 
   							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
 
-  							handleTouchStartDollyRotate();
+  							handleTouchStartDollyRotate( event );
 
   							state = STATE.TOUCH_DOLLY_ROTATE;
 
@@ -2265,7 +2371,7 @@
 
   		function addPointer( event ) {
 
-  			pointers.push( event );
+  			pointers.push( event.pointerId );
 
   		}
 
@@ -2275,7 +2381,7 @@
 
   			for ( let i = 0; i < pointers.length; i ++ ) {
 
-  				if ( pointers[ i ].pointerId == event.pointerId ) {
+  				if ( pointers[ i ] == event.pointerId ) {
 
   					pointers.splice( i, 1 );
   					return;
@@ -2303,9 +2409,9 @@
 
   		function getSecondPointerPosition( event ) {
 
-  			const pointer = ( event.pointerId === pointers[ 0 ].pointerId ) ? pointers[ 1 ] : pointers[ 0 ];
+  			const pointerId = ( event.pointerId === pointers[ 0 ] ) ? pointers[ 1 ] : pointers[ 0 ];
 
-  			return pointerPositions[ pointer.pointerId ];
+  			return pointerPositions[ pointerId ];
 
   		}
 
@@ -2317,6 +2423,10 @@
   		scope.domElement.addEventListener( 'pointercancel', onPointerUp );
   		scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
 
+  		const document = scope.domElement.getRootNode(); // offscreen canvas compatibility
+
+  		document.addEventListener( 'keydown', interceptControlDown, { passive: true, capture: true } );
+
   		// force an update at start
 
   		this.update();
@@ -2507,6 +2617,29 @@
 
   		};
 
+  		this.pointercancel = function () {
+
+  			if ( this.enabled === false ) return;
+
+  			if ( this.dragToLook ) {
+
+  				this.status = 0;
+
+  				this.moveState.yawLeft = this.moveState.pitchDown = 0;
+
+  			} else {
+
+  				this.moveState.forward = 0;
+  				this.moveState.back = 0;
+
+  				this.updateMovementVector();
+
+  			}
+
+  			this.updateRotationVector();
+
+  		};
+
   		this.contextMenu = function ( event ) {
 
   			if ( this.enabled === false ) return;
@@ -2590,6 +2723,7 @@
   			this.domElement.removeEventListener( 'pointerdown', _pointerdown );
   			this.domElement.removeEventListener( 'pointermove', _pointermove );
   			this.domElement.removeEventListener( 'pointerup', _pointerup );
+  			this.domElement.removeEventListener( 'pointercancel', _pointercancel );
 
   			window.removeEventListener( 'keydown', _keydown );
   			window.removeEventListener( 'keyup', _keyup );
@@ -2600,6 +2734,7 @@
   		const _pointermove = this.pointermove.bind( this );
   		const _pointerdown = this.pointerdown.bind( this );
   		const _pointerup = this.pointerup.bind( this );
+  		const _pointercancel = this.pointercancel.bind( this );
   		const _keydown = this.keydown.bind( this );
   		const _keyup = this.keyup.bind( this );
 
@@ -2607,6 +2742,7 @@
   		this.domElement.addEventListener( 'pointerdown', _pointerdown );
   		this.domElement.addEventListener( 'pointermove', _pointermove );
   		this.domElement.addEventListener( 'pointerup', _pointerup );
+  		this.domElement.addEventListener( 'pointercancel', _pointercancel );
 
   		window.addEventListener( 'keydown', _keydown );
   		window.addEventListener( 'keyup', _keyup );
@@ -2700,9 +2836,20 @@
 
   // https://github.com/mrdoob/three.js/pull/21358
 
-  const _geometry = new three$1.BufferGeometry();
-  _geometry.setAttribute( 'position', new three$1.Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
-  _geometry.setAttribute( 'uv', new three$1.Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
+  class FullscreenTriangleGeometry extends three$1.BufferGeometry {
+
+  	constructor() {
+
+  		super();
+
+  		this.setAttribute( 'position', new three$1.Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
+  		this.setAttribute( 'uv', new three$1.Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
+
+  	}
+
+  }
+
+  const _geometry = new FullscreenTriangleGeometry();
 
   class FullScreenQuad {
 
@@ -3272,31 +3419,20 @@
   }
 
   function _isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
     try {
-      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-      return true;
-    } catch (e) {
-      return false;
-    }
+      var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (t) {}
+    return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
+      return !!t;
+    })();
   }
 
-  function _construct(Parent, args, Class) {
-    if (_isNativeReflectConstruct()) {
-      _construct = Reflect.construct.bind();
-    } else {
-      _construct = function _construct(Parent, args, Class) {
-        var a = [null];
-        a.push.apply(a, args);
-        var Constructor = Function.bind.apply(Parent, a);
-        var instance = new Constructor();
-        if (Class) _setPrototypeOf(instance, Class.prototype);
-        return instance;
-      };
-    }
-    return _construct.apply(null, arguments);
+  function _construct(t, e, r) {
+    if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+    var o = [null];
+    o.push.apply(o, e);
+    var p = new (t.bind.apply(t, o))();
+    return r && _setPrototypeOf(p, r.prototype), p;
   }
 
   function _wrapNativeSuper(Class) {
@@ -3327,7 +3463,6 @@
   }
 
   // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
-
   /**
    * Parse errors.md and turn it into a simple hash of code: message
    * @private
@@ -3412,84 +3547,71 @@
     "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
     "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
   };
+
   /**
    * super basic version of sprintf
    * @private
    */
-
   function format() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     var a = args[0];
     var b = [];
     var c;
-
     for (c = 1; c < args.length; c += 1) {
       b.push(args[c]);
     }
-
     b.forEach(function (d) {
       a = a.replace(/%[a-z]/, d);
     });
     return a;
   }
+
   /**
    * Create an error file out of errors.md for development and a simple web link to the full errors
    * in production mode.
    * @private
    */
-
-
   var PolishedError = /*#__PURE__*/function (_Error) {
     _inheritsLoose(PolishedError, _Error);
-
     function PolishedError(code) {
       var _this;
-
       if (process.env.NODE_ENV === 'production') {
         _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
       } else {
         for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
           args[_key2 - 1] = arguments[_key2];
         }
-
         _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
       }
-
       return _assertThisInitialized(_this);
     }
-
     return PolishedError;
   }( /*#__PURE__*/_wrapNativeSuper(Error));
 
   function colorToInt(color) {
     return Math.round(color * 255);
   }
-
   function convertToInt(red, green, blue) {
     return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
   }
-
   function hslToRgb(hue, saturation, lightness, convert) {
     if (convert === void 0) {
       convert = convertToInt;
     }
-
     if (saturation === 0) {
       // achromatic
       return convert(lightness, lightness, lightness);
-    } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
+    }
 
+    // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
     var huePrime = (hue % 360 + 360) % 360 / 60;
     var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
     var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
     var red = 0;
     var green = 0;
     var blue = 0;
-
     if (huePrime >= 0 && huePrime < 1) {
       red = chroma;
       green = secondComponent;
@@ -3509,7 +3631,6 @@
       red = chroma;
       blue = secondComponent;
     }
-
     var lightnessModification = lightness - chroma / 2;
     var finalRed = red + lightnessModification;
     var finalGreen = green + lightnessModification;
@@ -3667,11 +3788,11 @@
     yellow: 'ff0',
     yellowgreen: '9acd32'
   };
+
   /**
    * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
    * @private
    */
-
   function nameToHex(color) {
     if (typeof color !== 'string') return color;
     var normalizedColorName = color.toLowerCase();
@@ -3686,6 +3807,7 @@
   var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
   var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
   var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+
   /**
    * Returns an RgbColor or RgbaColor object. This utility function is only useful
    * if want to extract a color component. With the color util `toColorString` you
@@ -3697,14 +3819,11 @@
    * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
    * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
    */
-
   function parseToRgb(color) {
     if (typeof color !== 'string') {
       throw new PolishedError(3);
     }
-
     var normalizedColor = nameToHex(color);
-
     if (normalizedColor.match(hexRegex)) {
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
@@ -3712,7 +3831,6 @@
         blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
       };
     }
-
     if (normalizedColor.match(hexRgbaRegex)) {
       var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
       return {
@@ -3722,7 +3840,6 @@
         alpha: alpha
       };
     }
-
     if (normalizedColor.match(reducedHexRegex)) {
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -3730,10 +3847,8 @@
         blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
       };
     }
-
     if (normalizedColor.match(reducedRgbaHexRegex)) {
       var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
-
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
         green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
@@ -3741,9 +3856,7 @@
         alpha: _alpha
       };
     }
-
     var rgbMatched = rgbRegex.exec(normalizedColor);
-
     if (rgbMatched) {
       return {
         red: parseInt("" + rgbMatched[1], 10),
@@ -3751,9 +3864,7 @@
         blue: parseInt("" + rgbMatched[3], 10)
       };
     }
-
     var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-
     if (rgbaMatched) {
       return {
         red: parseInt("" + rgbaMatched[1], 10),
@@ -3762,44 +3873,32 @@
         alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
       };
     }
-
     var hslMatched = hslRegex.exec(normalizedColor);
-
     if (hslMatched) {
       var hue = parseInt("" + hslMatched[1], 10);
       var saturation = parseInt("" + hslMatched[2], 10) / 100;
       var lightness = parseInt("" + hslMatched[3], 10) / 100;
       var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
       var hslRgbMatched = rgbRegex.exec(rgbColorString);
-
       if (!hslRgbMatched) {
         throw new PolishedError(4, normalizedColor, rgbColorString);
       }
-
       return {
         red: parseInt("" + hslRgbMatched[1], 10),
         green: parseInt("" + hslRgbMatched[2], 10),
         blue: parseInt("" + hslRgbMatched[3], 10)
       };
     }
-
     var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
-
     if (hslaMatched) {
       var _hue = parseInt("" + hslaMatched[1], 10);
-
       var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
-
       var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-
       var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-
       var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
-
       if (!_hslRgbMatched) {
         throw new PolishedError(4, normalizedColor, _rgbColorString);
       }
-
       return {
         red: parseInt("" + _hslRgbMatched[1], 10),
         green: parseInt("" + _hslRgbMatched[2], 10),
@@ -3807,10 +3906,82 @@
         alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
       };
     }
-
     throw new PolishedError(5);
   }
 
+  function rgbToHsl(color) {
+    // make sure rgb are contained in a set of [0, 255]
+    var red = color.red / 255;
+    var green = color.green / 255;
+    var blue = color.blue / 255;
+    var max = Math.max(red, green, blue);
+    var min = Math.min(red, green, blue);
+    var lightness = (max + min) / 2;
+    if (max === min) {
+      // achromatic
+      if (color.alpha !== undefined) {
+        return {
+          hue: 0,
+          saturation: 0,
+          lightness: lightness,
+          alpha: color.alpha
+        };
+      } else {
+        return {
+          hue: 0,
+          saturation: 0,
+          lightness: lightness
+        };
+      }
+    }
+    var hue;
+    var delta = max - min;
+    var saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    switch (max) {
+      case red:
+        hue = (green - blue) / delta + (green < blue ? 6 : 0);
+        break;
+      case green:
+        hue = (blue - red) / delta + 2;
+        break;
+      default:
+        // blue case
+        hue = (red - green) / delta + 4;
+        break;
+    }
+    hue *= 60;
+    if (color.alpha !== undefined) {
+      return {
+        hue: hue,
+        saturation: saturation,
+        lightness: lightness,
+        alpha: color.alpha
+      };
+    }
+    return {
+      hue: hue,
+      saturation: saturation,
+      lightness: lightness
+    };
+  }
+
+  /**
+   * Returns an HslColor or HslaColor object. This utility function is only useful
+   * if want to extract a color component. With the color util `toColorString` you
+   * can convert a HslColor or HslaColor object back to a string.
+   *
+   * @example
+   * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
+   * const color1 = parseToHsl('rgb(255, 0, 0)');
+   * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
+   * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
+   */
+  function parseToHsl(color) {
+    // Note: At a later stage we can optimize this function as right now a hsl
+    // color would be parsed converted to rgb values and converted back to hsl.
+    return rgbToHsl(parseToRgb(color));
+  }
+
   /**
    * Reduces hex values if possible e.g. #ff8866 to #f86
    * @private
@@ -3819,10 +3990,8 @@
     if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
       return "#" + value[1] + value[3] + value[5];
     }
-
     return value;
   };
-
   var reduceHexValue$1 = reduceHexValue;
 
   function numberToHex(value) {
@@ -3830,6 +3999,83 @@
     return hex.length === 1 ? "0" + hex : hex;
   }
 
+  function colorToHex(color) {
+    return numberToHex(Math.round(color * 255));
+  }
+  function convertToHex(red, green, blue) {
+    return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
+  }
+  function hslToHex(hue, saturation, lightness) {
+    return hslToRgb(hue, saturation, lightness, convertToHex);
+  }
+
+  /**
+   * Returns a string value for the color. The returned result is the smallest possible hex notation.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: hsl(359, 0.75, 0.4),
+   *   background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${hsl(359, 0.75, 0.4)};
+   *   background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#b3191c";
+   *   background: "#b3191c";
+   * }
+   */
+  function hsl(value, saturation, lightness) {
+    if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number') {
+      return hslToHex(value, saturation, lightness);
+    } else if (typeof value === 'object' && saturation === undefined && lightness === undefined) {
+      return hslToHex(value.hue, value.saturation, value.lightness);
+    }
+    throw new PolishedError(1);
+  }
+
+  /**
+   * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: hsla(359, 0.75, 0.4, 0.7),
+   *   background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
+   *   background: hsla(359, 0.75, 0.4, 1),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${hsla(359, 0.75, 0.4, 0.7)};
+   *   background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
+   *   background: ${hsla(359, 0.75, 0.4, 1)};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "rgba(179,25,28,0.7)";
+   *   background: "rgba(179,25,28,0.7)";
+   *   background: "#b3191c";
+   * }
+   */
+  function hsla(value, saturation, lightness, alpha) {
+    if (typeof value === 'number' && typeof saturation === 'number' && typeof lightness === 'number' && typeof alpha === 'number') {
+      return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
+    } else if (typeof value === 'object' && saturation === undefined && lightness === undefined && alpha === undefined) {
+      return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
+    }
+    throw new PolishedError(2);
+  }
+
   /**
    * Returns a string value for the color. The returned result is the smallest possible hex notation.
    *
@@ -3859,7 +4105,6 @@
     } else if (typeof value === 'object' && green === undefined && blue === undefined) {
       return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
     }
-
     throw new PolishedError(6);
   }
 
@@ -3906,13 +4151,65 @@
     } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
       return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
     }
-
     throw new PolishedError(7);
   }
 
-  // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
-  // eslint-disable-next-line no-unused-vars
-  // eslint-disable-next-line no-unused-vars
+  var isRgb = function isRgb(color) {
+    return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
+  };
+  var isRgba = function isRgba(color) {
+    return typeof color.red === 'number' && typeof color.green === 'number' && typeof color.blue === 'number' && typeof color.alpha === 'number';
+  };
+  var isHsl = function isHsl(color) {
+    return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && (typeof color.alpha !== 'number' || typeof color.alpha === 'undefined');
+  };
+  var isHsla = function isHsla(color) {
+    return typeof color.hue === 'number' && typeof color.saturation === 'number' && typeof color.lightness === 'number' && typeof color.alpha === 'number';
+  };
+
+  /**
+   * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
+   * This util is useful in case you only know on runtime which color object is
+   * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: toColorString({ red: 255, green: 205, blue: 100 }),
+   *   background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
+   *   background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
+   *   background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${toColorString({ red: 255, green: 205, blue: 100 })};
+   *   background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
+   *   background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
+   *   background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
+   * `
+   *
+   * // CSS in JS Output
+   * element {
+   *   background: "#ffcd64";
+   *   background: "rgba(255,205,100,0.72)";
+   *   background: "#00f";
+   *   background: "rgba(179,25,25,0.72)";
+   * }
+   */
+
+  function toColorString(color) {
+    if (typeof color !== 'object') throw new PolishedError(8);
+    if (isRgba(color)) return rgba(color);
+    if (isRgb(color)) return rgb(color);
+    if (isHsla(color)) return hsla(color);
+    if (isHsl(color)) return hsl(color);
+    throw new PolishedError(8);
+  }
+
+  // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
+  // eslint-disable-next-line no-unused-vars
+  // eslint-disable-next-line no-unused-vars
   // eslint-disable-next-line no-redeclare
   function curried(f, length, acc) {
     return function fn() {
@@ -3920,18 +4217,216 @@
       var combined = acc.concat(Array.prototype.slice.call(arguments));
       return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
     };
-  } // eslint-disable-next-line no-redeclare
-
+  }
 
+  // eslint-disable-next-line no-redeclare
   function curry(f) {
     // eslint-disable-line no-redeclare
     return curried(f, f.length, []);
   }
 
+  /**
+   * Changes the hue of the color. Hue is a number between 0 to 360. The first
+   * argument for adjustHue is the amount of degrees the color is rotated around
+   * the color wheel, always producing a positive hue value.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: adjustHue(180, '#448'),
+   *   background: adjustHue('180', 'rgba(101,100,205,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${adjustHue(180, '#448')};
+   *   background: ${adjustHue('180', 'rgba(101,100,205,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   * element {
+   *   background: "#888844";
+   *   background: "rgba(136,136,68,0.7)";
+   * }
+   */
+  function adjustHue(degree, color) {
+    if (color === 'transparent') return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends({}, hslColor, {
+      hue: hslColor.hue + parseFloat(degree)
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(adjustHue);
+
   function guard(lowerBoundary, upperBoundary, value) {
     return Math.max(lowerBoundary, Math.min(upperBoundary, value));
   }
 
+  /**
+   * Returns a string value for the darkened color.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: darken(0.2, '#FFCD64'),
+   *   background: darken('0.2', 'rgba(255,205,100,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${darken(0.2, '#FFCD64')};
+   *   background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#ffbd31";
+   *   background: "rgba(255,189,49,0.7)";
+   * }
+   */
+  function darken(amount, color) {
+    if (color === 'transparent') return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends({}, hslColor, {
+      lightness: guard(0, 1, hslColor.lightness - parseFloat(amount))
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(darken);
+
+  /**
+   * Decreases the intensity of a color. Its range is between 0 to 1. The first
+   * argument of the desaturate function is the amount by how much the color
+   * intensity should be decreased.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: desaturate(0.2, '#CCCD64'),
+   *   background: desaturate('0.2', 'rgba(204,205,100,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${desaturate(0.2, '#CCCD64')};
+   *   background: ${desaturate('0.2', 'rgba(204,205,100,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   * element {
+   *   background: "#b8b979";
+   *   background: "rgba(184,185,121,0.7)";
+   * }
+   */
+  function desaturate(amount, color) {
+    if (color === 'transparent') return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends({}, hslColor, {
+      saturation: guard(0, 1, hslColor.saturation - parseFloat(amount))
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(desaturate);
+
+  /**
+   * Returns a string value for the lightened color.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: lighten(0.2, '#CCCD64'),
+   *   background: lighten('0.2', 'rgba(204,205,100,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${lighten(0.2, '#FFCD64')};
+   *   background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#e5e6b1";
+   *   background: "rgba(229,230,177,0.7)";
+   * }
+   */
+  function lighten(amount, color) {
+    if (color === 'transparent') return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends({}, hslColor, {
+      lightness: guard(0, 1, hslColor.lightness + parseFloat(amount))
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(lighten);
+
+  /**
+   * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: mix(0.5, '#f00', '#00f')
+   *   background: mix(0.25, '#f00', '#00f')
+   *   background: mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${mix(0.5, '#f00', '#00f')};
+   *   background: ${mix(0.25, '#f00', '#00f')};
+   *   background: ${mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#7f007f";
+   *   background: "#3f00bf";
+   *   background: "rgba(63, 0, 191, 0.75)";
+   * }
+   */
+  function mix(weight, color, otherColor) {
+    if (color === 'transparent') return otherColor;
+    if (otherColor === 'transparent') return color;
+    if (weight === 0) return otherColor;
+    var parsedColor1 = parseToRgb(color);
+    var color1 = _extends({}, parsedColor1, {
+      alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
+    });
+    var parsedColor2 = parseToRgb(otherColor);
+    var color2 = _extends({}, parsedColor2, {
+      alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
+    });
+
+    // The formula is copied from the original Sass implementation:
+    // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
+    var alphaDelta = color1.alpha - color2.alpha;
+    var x = parseFloat(weight) * 2 - 1;
+    var y = x * alphaDelta === -1 ? x : x + alphaDelta;
+    var z = 1 + x * alphaDelta;
+    var weight1 = (y / z + 1) / 2.0;
+    var weight2 = 1 - weight1;
+    var mixedColor = {
+      red: Math.floor(color1.red * weight1 + color2.red * weight2),
+      green: Math.floor(color1.green * weight1 + color2.green * weight2),
+      blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),
+      alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
+    };
+    return rgba(mixedColor);
+  }
+
+  // prettier-ignore
+  var curriedMix = curry /* ::<number | string, string, string, string> */(mix);
+  var mix$1 = curriedMix;
+
   /**
    * Increases the opacity of a color. Its range for the amount is between 0 to 1.
    *
@@ -3959,25 +4454,257 @@
    *   background: "rgba(255,0,0,0.7)";
    * }
    */
-
   function opacify(amount, color) {
     if (color === 'transparent') return color;
     var parsedColor = parseToRgb(color);
     var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
-
     var colorWithAlpha = _extends({}, parsedColor, {
       alpha: guard(0, 1, (alpha * 100 + parseFloat(amount) * 100) / 100)
     });
-
     return rgba(colorWithAlpha);
-  } // prettier-ignore
-
+  }
 
-  var curriedOpacify = /*#__PURE__*/curry
-  /* ::<number | string, string, string> */
-  (opacify);
+  // prettier-ignore
+  var curriedOpacify = curry /* ::<number | string, string, string> */(opacify);
   var curriedOpacify$1 = curriedOpacify;
 
+  /**
+   * Increases the intensity of a color. Its range is between 0 to 1. The first
+   * argument of the saturate function is the amount by how much the color
+   * intensity should be increased.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: saturate(0.2, '#CCCD64'),
+   *   background: saturate('0.2', 'rgba(204,205,100,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${saturate(0.2, '#FFCD64')};
+   *   background: ${saturate('0.2', 'rgba(204,205,100,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#e0e250";
+   *   background: "rgba(224,226,80,0.7)";
+   * }
+   */
+  function saturate(amount, color) {
+    if (color === 'transparent') return color;
+    var hslColor = parseToHsl(color);
+    return toColorString(_extends({}, hslColor, {
+      saturation: guard(0, 1, hslColor.saturation + parseFloat(amount))
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(saturate);
+
+  /**
+   * Sets the hue of a color to the provided value. The hue range can be
+   * from 0 and 359.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: setHue(42, '#CCCD64'),
+   *   background: setHue('244', 'rgba(204,205,100,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${setHue(42, '#CCCD64')};
+   *   background: ${setHue('244', 'rgba(204,205,100,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   * element {
+   *   background: "#cdae64";
+   *   background: "rgba(107,100,205,0.7)";
+   * }
+   */
+  function setHue(hue, color) {
+    if (color === 'transparent') return color;
+    return toColorString(_extends({}, parseToHsl(color), {
+      hue: parseFloat(hue)
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(setHue);
+
+  /**
+   * Sets the lightness of a color to the provided value. The lightness range can be
+   * from 0 and 1.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: setLightness(0.2, '#CCCD64'),
+   *   background: setLightness('0.75', 'rgba(204,205,100,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${setLightness(0.2, '#CCCD64')};
+   *   background: ${setLightness('0.75', 'rgba(204,205,100,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   * element {
+   *   background: "#4d4d19";
+   *   background: "rgba(223,224,159,0.7)";
+   * }
+   */
+  function setLightness(lightness, color) {
+    if (color === 'transparent') return color;
+    return toColorString(_extends({}, parseToHsl(color), {
+      lightness: parseFloat(lightness)
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(setLightness);
+
+  /**
+   * Sets the saturation of a color to the provided value. The saturation range can be
+   * from 0 and 1.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: setSaturation(0.2, '#CCCD64'),
+   *   background: setSaturation('0.75', 'rgba(204,205,100,0.7)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${setSaturation(0.2, '#CCCD64')};
+   *   background: ${setSaturation('0.75', 'rgba(204,205,100,0.7)')};
+   * `
+   *
+   * // CSS in JS Output
+   * element {
+   *   background: "#adad84";
+   *   background: "rgba(228,229,76,0.7)";
+   * }
+   */
+  function setSaturation(saturation, color) {
+    if (color === 'transparent') return color;
+    return toColorString(_extends({}, parseToHsl(color), {
+      saturation: parseFloat(saturation)
+    }));
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(setSaturation);
+
+  /**
+   * Shades a color by mixing it with black. `shade` can produce
+   * hue shifts, where as `darken` manipulates the luminance channel and therefore
+   * doesn't produce hue shifts.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: shade(0.25, '#00f')
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${shade(0.25, '#00f')};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#00003f";
+   * }
+   */
+
+  function shade(percentage, color) {
+    if (color === 'transparent') return color;
+    return mix$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(shade);
+
+  /**
+   * Tints a color by mixing it with white. `tint` can produce
+   * hue shifts, where as `lighten` manipulates the luminance channel and therefore
+   * doesn't produce hue shifts.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: tint(0.25, '#00f')
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${tint(0.25, '#00f')};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#bfbfff";
+   * }
+   */
+
+  function tint(percentage, color) {
+    if (color === 'transparent') return color;
+    return mix$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(tint);
+
+  /**
+   * Decreases the opacity of a color. Its range for the amount is between 0 to 1.
+   *
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: transparentize(0.1, '#fff'),
+   *   background: transparentize(0.2, 'hsl(0, 0%, 100%)'),
+   *   background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${transparentize(0.1, '#fff')};
+   *   background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')};
+   *   background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "rgba(255,255,255,0.9)";
+   *   background: "rgba(255,255,255,0.8)";
+   *   background: "rgba(255,0,0,0.3)";
+   * }
+   */
+  function transparentize(amount, color) {
+    if (color === 'transparent') return color;
+    var parsedColor = parseToRgb(color);
+    var alpha = typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
+    var colorWithAlpha = _extends({}, parsedColor, {
+      alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+    });
+    return rgba(colorWithAlpha);
+  }
+
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(transparentize);
+
   /**
    * The Ease class provides a collection of easing functions for use with tween.js.
    */
@@ -4193,7 +4920,7 @@
       },
   });
 
-  var now$2 = function () { return performance.now(); };
+  var now$1 = function () { return performance.now(); };
 
   /**
    * Controlling groups of tweens
@@ -4224,7 +4951,7 @@
           delete this._tweensAddedDuringUpdate[tween.getId()];
       };
       Group.prototype.update = function (time, preserve) {
-          if (time === void 0) { time = now$2(); }
+          if (time === void 0) { time = now$1(); }
           if (preserve === void 0) { preserve = false; }
           var tweenIds = Object.keys(this._tweens);
           if (tweenIds.length === 0) {
@@ -4393,18 +5120,21 @@
       Tween.prototype.isPaused = function () {
           return this._isPaused;
       };
+      Tween.prototype.getDuration = function () {
+          return this._duration;
+      };
       Tween.prototype.to = function (target, duration) {
           if (duration === void 0) { duration = 1000; }
           if (this._isPlaying)
               throw new Error('Can not call Tween.to() while Tween is already started or paused. Stop the Tween first.');
           this._valuesEnd = target;
           this._propertiesAreSetUp = false;
-          this._duration = duration;
+          this._duration = duration < 0 ? 0 : duration;
           return this;
       };
       Tween.prototype.duration = function (duration) {
           if (duration === void 0) { duration = 1000; }
-          this._duration = duration;
+          this._duration = duration < 0 ? 0 : duration;
           return this;
       };
       Tween.prototype.dynamic = function (dynamic) {
@@ -4413,7 +5143,7 @@
           return this;
       };
       Tween.prototype.start = function (time, overrideStartingValues) {
-          if (time === void 0) { time = now$2(); }
+          if (time === void 0) { time = now$1(); }
           if (overrideStartingValues === void 0) { overrideStartingValues = false; }
           if (this._isPlaying) {
               return this;
@@ -4551,7 +5281,7 @@
           return this;
       };
       Tween.prototype.pause = function (time) {
-          if (time === void 0) { time = now$2(); }
+          if (time === void 0) { time = now$1(); }
           if (this._isPaused || !this._isPlaying) {
               return this;
           }
@@ -4562,7 +5292,7 @@
           return this;
       };
       Tween.prototype.resume = function (time) {
-          if (time === void 0) { time = now$2(); }
+          if (time === void 0) { time = now$1(); }
           if (!this._isPaused || !this._isPlaying) {
               return this;
           }
@@ -4653,12 +5383,13 @@
        * it is still playing, just paused).
        */
       Tween.prototype.update = function (time, autoStart) {
-          if (time === void 0) { time = now$2(); }
+          var _this = this;
+          var _a;
+          if (time === void 0) { time = now$1(); }
           if (autoStart === void 0) { autoStart = true; }
           if (this._isPaused)
               return true;
           var property;
-          var elapsed;
           var endTime = this._startTime + this._duration;
           if (!this._goToEnd && !this._isPlaying) {
               if (time > endTime)
@@ -4682,18 +5413,37 @@
               }
               this._onEveryStartCallbackFired = true;
           }
-          elapsed = (time - this._startTime) / this._duration;
-          elapsed = this._duration === 0 || elapsed > 1 ? 1 : elapsed;
+          var elapsedTime = time - this._startTime;
+          var durationAndDelay = this._duration + ((_a = this._repeatDelayTime) !== null && _a !== void 0 ? _a : this._delayTime);
+          var totalTime = this._duration + this._repeat * durationAndDelay;
+          var calculateElapsedPortion = function () {
+              if (_this._duration === 0)
+                  return 1;
+              if (elapsedTime > totalTime) {
+                  return 1;
+              }
+              var timesRepeated = Math.trunc(elapsedTime / durationAndDelay);
+              var timeIntoCurrentRepeat = elapsedTime - timesRepeated * durationAndDelay;
+              // TODO use %?
+              // const timeIntoCurrentRepeat = elapsedTime % durationAndDelay
+              var portion = Math.min(timeIntoCurrentRepeat / _this._duration, 1);
+              if (portion === 0 && elapsedTime === _this._duration) {
+                  return 1;
+              }
+              return portion;
+          };
+          var elapsed = calculateElapsedPortion();
           var value = this._easingFunction(elapsed);
           // properties transformations
           this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);
           if (this._onUpdateCallback) {
               this._onUpdateCallback(this._object, elapsed);
           }
-          if (elapsed === 1) {
+          if (this._duration === 0 || elapsedTime >= this._duration) {
               if (this._repeat > 0) {
+                  var completeCount = Math.min(Math.trunc((elapsedTime - this._duration) / durationAndDelay) + 1, this._repeat);
                   if (isFinite(this._repeat)) {
-                      this._repeat--;
+                      this._repeat -= completeCount;
                   }
                   // Reassign starting values, restart by making startTime = now
                   for (property in this._valuesStartRepeat) {
@@ -4711,12 +5461,7 @@
                   if (this._yoyo) {
                       this._reversed = !this._reversed;
                   }
-                  if (this._repeatDelayTime !== undefined) {
-                      this._startTime = time + this._repeatDelayTime;
-                  }
-                  else {
-                      this._startTime = time + this._delayTime;
-                  }
+                  this._startTime += durationAndDelay * completeCount;
                   if (this._onRepeatCallback) {
                       this._onRepeatCallback(this._object);
                   }
@@ -4818,23 +5563,101 @@
     };
   }); // constant
 
+  /**
+   * Checks if `value` is the
+   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+   * @example
+   *
+   * _.isObject({});
+   * // => true
+   *
+   * _.isObject([1, 2, 3]);
+   * // => true
+   *
+   * _.isObject(_.noop);
+   * // => true
+   *
+   * _.isObject(null);
+   * // => false
+   */
+  function isObject(value) {
+    var type = typeof value;
+    return value != null && (type == 'object' || type == 'function');
+  }
+
   /** Detect free variable `global` from Node.js. */
   var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
 
-  var freeGlobal$1 = freeGlobal;
-
   /** Detect free variable `self`. */
   var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
 
   /** Used as a reference to the global object. */
-  var root = freeGlobal$1 || freeSelf || Function('return this')();
+  var root = freeGlobal || freeSelf || Function('return this')();
+
+  /**
+   * Gets the timestamp of the number of milliseconds that have elapsed since
+   * the Unix epoch (1 January 1970 00:00:00 UTC).
+   *
+   * @static
+   * @memberOf _
+   * @since 2.4.0
+   * @category Date
+   * @returns {number} Returns the timestamp.
+   * @example
+   *
+   * _.defer(function(stamp) {
+   *   console.log(_.now() - stamp);
+   * }, _.now());
+   * // => Logs the number of milliseconds it took for the deferred invocation.
+   */
+  var now = function() {
+    return root.Date.now();
+  };
 
-  var root$1 = root;
+  /** Used to match a single whitespace character. */
+  var reWhitespace = /\s/;
 
-  /** Built-in value references. */
-  var Symbol$1 = root$1.Symbol;
+  /**
+   * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+   * character of `string`.
+   *
+   * @private
+   * @param {string} string The string to inspect.
+   * @returns {number} Returns the index of the last non-whitespace character.
+   */
+  function trimmedEndIndex(string) {
+    var index = string.length;
+
+    while (index-- && reWhitespace.test(string.charAt(index))) {}
+    return index;
+  }
+
+  /** Used to match leading whitespace. */
+  var reTrimStart = /^\s+/;
+
+  /**
+   * The base implementation of `_.trim`.
+   *
+   * @private
+   * @param {string} string The string to trim.
+   * @returns {string} Returns the trimmed string.
+   */
+  function baseTrim(string) {
+    return string
+      ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+      : string;
+  }
 
-  var Symbol$2 = Symbol$1;
+  /** Built-in value references. */
+  var Symbol$1 = root.Symbol;
 
   /** Used for built-in method references. */
   var objectProto$1 = Object.prototype;
@@ -4850,7 +5673,7 @@
   var nativeObjectToString$1 = objectProto$1.toString;
 
   /** Built-in value references. */
-  var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : undefined;
+  var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
   /**
    * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
@@ -4905,7 +5728,7 @@
       undefinedTag = '[object Undefined]';
 
   /** Built-in value references. */
-  var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : undefined;
+  var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
   /**
    * The base implementation of `getTag` without fallbacks for buggy environments.
@@ -4976,70 +5799,6 @@
       (isObjectLike(value) && baseGetTag(value) == symbolTag);
   }
 
-  /** Used to match a single whitespace character. */
-  var reWhitespace = /\s/;
-
-  /**
-   * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
-   * character of `string`.
-   *
-   * @private
-   * @param {string} string The string to inspect.
-   * @returns {number} Returns the index of the last non-whitespace character.
-   */
-  function trimmedEndIndex(string) {
-    var index = string.length;
-
-    while (index-- && reWhitespace.test(string.charAt(index))) {}
-    return index;
-  }
-
-  /** Used to match leading whitespace. */
-  var reTrimStart = /^\s+/;
-
-  /**
-   * The base implementation of `_.trim`.
-   *
-   * @private
-   * @param {string} string The string to trim.
-   * @returns {string} Returns the trimmed string.
-   */
-  function baseTrim(string) {
-    return string
-      ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-      : string;
-  }
-
-  /**
-   * Checks if `value` is the
-   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
-   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
-   *
-   * @static
-   * @memberOf _
-   * @since 0.1.0
-   * @category Lang
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
-   * @example
-   *
-   * _.isObject({});
-   * // => true
-   *
-   * _.isObject([1, 2, 3]);
-   * // => true
-   *
-   * _.isObject(_.noop);
-   * // => true
-   *
-   * _.isObject(null);
-   * // => false
-   */
-  function isObject(value) {
-    var type = typeof value;
-    return value != null && (type == 'object' || type == 'function');
-  }
-
   /** Used as references for various `Number` constants. */
   var NAN = 0 / 0;
 
@@ -5099,28 +5858,6 @@
       : (reIsBadHex.test(value) ? NAN : +value);
   }
 
-  /**
-   * Gets the timestamp of the number of milliseconds that have elapsed since
-   * the Unix epoch (1 January 1970 00:00:00 UTC).
-   *
-   * @static
-   * @memberOf _
-   * @since 2.4.0
-   * @category Date
-   * @returns {number} Returns the timestamp.
-   * @example
-   *
-   * _.defer(function(stamp) {
-   *   console.log(_.now() - stamp);
-   * }, _.now());
-   * // => Logs the number of milliseconds it took for the deferred invocation.
-   */
-  var now = function() {
-    return root$1.Date.now();
-  };
-
-  var now$1 = now;
-
   /** Error message constants. */
   var FUNC_ERROR_TEXT = 'Expected a function';
 
@@ -5246,7 +5983,7 @@
     }
 
     function timerExpired() {
-      var time = now$1();
+      var time = now();
       if (shouldInvoke(time)) {
         return trailingEdge(time);
       }
@@ -5275,11 +6012,11 @@
     }
 
     function flush() {
-      return timerId === undefined ? result : trailingEdge(now$1());
+      return timerId === undefined ? result : trailingEdge(now());
     }
 
     function debounced() {
-      var time = now$1(),
+      var time = now(),
           isInvoking = shouldInvoke(time);
 
       lastArgs = arguments;
@@ -5307,31 +6044,31 @@
     return debounced;
   }
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-    if (null != _i) {
-      var _s,
-        _e,
-        _x,
-        _r,
-        _arr = [],
-        _n = !0,
-        _d = !1;
+  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 (_x = (_i = _i.call(arr)).next, 0 === i) {
-          if (Object(_i) !== _i) return;
-          _n = !1;
-        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-      } catch (err) {
-        _d = !0, _e = err;
+        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 (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
         } finally {
-          if (_d) throw _e;
+          if (o) throw n;
         }
       }
-      return _arr;
+      return a;
     }
   }
   function _classCallCheck(instance, Constructor) {
@@ -5656,7 +6393,6 @@
           }
           update(); // update camera animation tweens
         }
-
         return this;
       },
       getPointerPos: function getPointerPos(state) {
@@ -5718,7 +6454,6 @@
             camera.lookAt(lookAtVect); // note: lookAt may be overridden by other controls in some cases
           }
         }
-
         function getLookAt() {
           return Object.assign(new three.Vector3(0, 0, -1000).applyQuaternion(camera.quaternion).add(camera.position));
         }
@@ -5817,7 +6552,6 @@
         return state.controls;
       } // to be deprecated
     },
-
     stateInit: function stateInit() {
       return {
         scene: new three.Scene(),
@@ -5908,14 +6642,12 @@
           state.isPointerDragging = false;
           if (!state.clickAfterDrag) return; // don't trigger onClick after pointer drag (camera motion via controls)
         }
-
         requestAnimationFrame(function () {
           // trigger click events asynchronously, to allow hoverObj to be set (on frame)
           if (ev.button === 0) {
             // left-click
             state.onClick(state.hoverObj || null, ev, state.intersectionPoint); // trigger background clicks with null
           }
-
           if (ev.button === 2 && state.onRightClick) {
             // right-click
             state.onRightClick(state.hoverObj || null, ev, state.intersectionPoint);
@@ -6043,7 +6775,6 @@
           return state.scene.add(light);
         }); // Add to scene
       }
-
       if (changedProps.hasOwnProperty('objects')) {
         (changedProps.objects || []).forEach(function (obj) {
           return state.scene.remove(obj);