three-render-objects 1.28.6 → 1.29.1

package/dist/three-render-objects.js

@@ -1,4 +1,4 @@
-// Version 1.28.6 three-render-objects - https://github.com/vasturiano/three-render-objects
+// Version 1.29.1 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) :
@@ -35,33 +35,47 @@
   var css_248z = ".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  top: 0;\n  color: lavender;\n  font-size: 15px;\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
   styleInject(css_248z);
 
-  function _iterableToArrayLimit$1(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$1(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 _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' };
@@ -953,6 +953,9 @@
   const _changeEvent$1 = { type: 'change' };
   const _startEvent = { type: 'start' };
   const _endEvent = { type: 'end' };
+  const _ray = new three$1.Ray();
+  const _plane = new three$1.Plane();
+  const TILT_LIMIT = Math.cos( 70 * three$1.MathUtils.DEG2RAD );
 
   class OrbitControls extends three$1.EventDispatcher {
 
@@ -970,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;
@@ -978,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
@@ -1007,6 +1017,7 @@
   		this.panSpeed = 1.0;
   		this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
   		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
+  		this.zoomToCursor = false;
 
   		// Set to true to automatically rotate around the target
   		// If auto-rotate is enabled, you must call controls.update() in your animation loop
@@ -1104,7 +1115,7 @@
 
   			const twoPI = 2 * Math.PI;
 
-  			return function update() {
+  			return function update( deltaTime = null ) {
 
   				const position = scope.object.position;
 
@@ -1118,7 +1129,7 @@
 
   				if ( scope.autoRotate && state === STATE.NONE ) {
 
-  					rotateLeft( getAutoRotationAngle() );
+  					rotateLeft( getAutoRotationAngle( deltaTime ) );
 
   				}
 
@@ -1165,11 +1176,6 @@
   				spherical.makeSafe();
 
 
-  				spherical.radius *= scale;
-
-  				// restrict radius to be between desired limits
-  				spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
-
   				// move target to panned location
 
   				if ( scope.enableDamping === true ) {
@@ -1182,6 +1188,23 @@
 
   				}
 
+  				// 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 ) {
+
+  					spherical.radius = clampDistance( spherical.radius );
+
+  				} else {
+
+  					spherical.radius = clampDistance( spherical.radius * scale );
+
+  				}
+
   				offset.setFromSpherical( spherical );
 
   				// rotate offset back to "camera-up-vector-is-up" space
@@ -1206,7 +1229,96 @@
 
   				}
 
+  				// adjust camera position
+  				let zoomChanged = false;
+  				if ( scope.zoomToCursor && performCursorZoom ) {
+
+  					let newRadius = null;
+  					if ( scope.object.isPerspectiveCamera ) {
+
+  						// move the camera down the pointer ray
+  						// this method avoids floating point error
+  						const prevRadius = offset.length();
+  						newRadius = clampDistance( prevRadius * scale );
+
+  						const radiusDelta = prevRadius - newRadius;
+  						scope.object.position.addScaledVector( dollyDirection, radiusDelta );
+  						scope.object.updateMatrixWorld();
+
+  					} else if ( scope.object.isOrthographicCamera ) {
+
+  						// adjust the ortho camera position based on zoom changes
+  						const mouseBefore = new three$1.Vector3( mouse.x, mouse.y, 0 );
+  						mouseBefore.unproject( scope.object );
+
+  						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+  						scope.object.updateProjectionMatrix();
+  						zoomChanged = true;
+
+  						const mouseAfter = new three$1.Vector3( mouse.x, mouse.y, 0 );
+  						mouseAfter.unproject( scope.object );
+
+  						scope.object.position.sub( mouseAfter ).add( mouseBefore );
+  						scope.object.updateMatrixWorld();
+
+  						newRadius = offset.length();
+
+  					} else {
+
+  						console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - zoom to cursor disabled.' );
+  						scope.zoomToCursor = false;
+
+  					}
+
+  					// handle the placement of the target
+  					if ( newRadius !== null ) {
+
+  						if ( this.screenSpacePanning ) {
+
+  							// position the orbit target in front of the new camera position
+  							scope.target.set( 0, 0, - 1 )
+  								.transformDirection( scope.object.matrix )
+  								.multiplyScalar( newRadius )
+  								.add( scope.object.position );
+
+  						} else {
+
+  							// get the ray and translation plane to compute target
+  							_ray.origin.copy( scope.object.position );
+  							_ray.direction.set( 0, 0, - 1 ).transformDirection( scope.object.matrix );
+
+  							// if the camera is 20 degrees above the horizon then don't adjust the focus target to avoid
+  							// extremely large values
+  							if ( Math.abs( scope.object.up.dot( _ray.direction ) ) < TILT_LIMIT ) {
+
+  								object.lookAt( scope.target );
+
+  							} else {
+
+  								_plane.setFromNormalAndCoplanarPoint( scope.object.up, scope.target );
+  								_ray.intersectPlane( _plane, scope.target );
+
+  							}
+
+  						}
+
+  					}
+
+  				} else if ( scope.object.isOrthographicCamera ) {
+
+  					zoomChanged = scale !== 1;
+
+  					if ( zoomChanged ) {
+
+  						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+  						scope.object.updateProjectionMatrix();
+
+  					}
+
+  				}
+
   				scale = 1;
+  				performCursorZoom = false;
 
   				// update condition is:
   				// min(camera displacement, camera rotation in radians)^2 > EPS
@@ -1223,8 +1335,6 @@
   					lastQuaternion.copy( scope.object.quaternion );
   					lastTargetPosition.copy( scope.target );
 
-  					zoomChanged = false;
-
   					return true;
 
   				}
@@ -1285,7 +1395,6 @@
 
   		let scale = 1;
   		const panOffset = new three$1.Vector3();
-  		let zoomChanged = false;
 
   		const rotateStart = new three$1.Vector2();
   		const rotateEnd = new three$1.Vector2();
@@ -1299,18 +1408,33 @@
   		const dollyEnd = new three$1.Vector2();
   		const dollyDelta = new three$1.Vector2();
 
+  		const dollyDirection = new three$1.Vector3();
+  		const mouse = new three$1.Vector2();
+  		let performCursorZoom = false;
+
   		const pointers = [];
   		const pointerPositions = {};
 
-  		function getAutoRotationAngle() {
+  		let controlActive = false;
+
+  		function getAutoRotationAngle( deltaTime ) {
 
-  			return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+  			if ( deltaTime !== null ) {
+
+  				return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;
+
+  			} else {
+
+  				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+  			}
 
   		}
 
-  		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 );
 
   		}
 
@@ -1409,16 +1533,10 @@
 
   		function dollyOut( dollyScale ) {
 
-  			if ( scope.object.isPerspectiveCamera ) {
+  			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
 
   				scale /= dollyScale;
 
-  			} else if ( scope.object.isOrthographicCamera ) {
-
-  				scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
-  				scope.object.updateProjectionMatrix();
-  				zoomChanged = true;
-
   			} else {
 
   				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
@@ -1430,16 +1548,10 @@
 
   		function dollyIn( dollyScale ) {
 
-  			if ( scope.object.isPerspectiveCamera ) {
+  			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
 
   				scale *= dollyScale;
 
-  			} else if ( scope.object.isOrthographicCamera ) {
-
-  				scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
-  				scope.object.updateProjectionMatrix();
-  				zoomChanged = true;
-
   			} else {
 
   				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
@@ -1449,6 +1561,35 @@
 
   		}
 
+  		function updateZoomParameters( x, y ) {
+
+  			if ( ! scope.zoomToCursor ) {
+
+  				return;
+
+  			}
+
+  			performCursorZoom = true;
+
+  			const rect = scope.domElement.getBoundingClientRect();
+  			const dx = x - rect.left;
+  			const dy = y - rect.top;
+  			const w = rect.width;
+  			const h = rect.height;
+
+  			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();
+
+  		}
+
+  		function clampDistance( dist ) {
+
+  			return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );
+
+  		}
+
   		//
   		// event callbacks - update the object state
   		//
@@ -1461,6 +1602,7 @@
 
   		function handleMouseDownDolly( event ) {
 
+  			updateZoomParameters( event.clientX, event.clientX );
   			dollyStart.set( event.clientX, event.clientY );
 
   		}
@@ -1497,11 +1639,11 @@
 
   			if ( dollyDelta.y > 0 ) {
 
-  				dollyOut( getZoomScale() );
+  				dollyOut( getZoomScale( dollyDelta.y ) );
 
   			} else if ( dollyDelta.y < 0 ) {
 
-  				dollyIn( getZoomScale() );
+  				dollyIn( getZoomScale( dollyDelta.y ) );
 
   			}
 
@@ -1527,13 +1669,15 @@
 
   		function handleMouseWheel( 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 ) );
 
   			}
 
@@ -1621,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 );
 
@@ -1638,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 );
 
@@ -1655,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 );
 
@@ -1666,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 );
 
   		}
 
@@ -1753,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 ) {
@@ -1824,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;
+
+  			}
 
   		}
 
@@ -1976,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;
@@ -2004,7 +2237,7 @@
 
   							if ( scope.enableRotate === false ) return;
 
-  							handleTouchStartRotate();
+  							handleTouchStartRotate( event );
 
   							state = STATE.TOUCH_ROTATE;
 
@@ -2014,7 +2247,7 @@
 
   							if ( scope.enablePan === false ) return;
 
-  							handleTouchStartPan();
+  							handleTouchStartPan( event );
 
   							state = STATE.TOUCH_PAN;
 
@@ -2036,7 +2269,7 @@
 
   							if ( scope.enableZoom === false && scope.enablePan === false ) return;
 
-  							handleTouchStartDollyPan();
+  							handleTouchStartDollyPan( event );
 
   							state = STATE.TOUCH_DOLLY_PAN;
 
@@ -2046,7 +2279,7 @@
 
   							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
 
-  							handleTouchStartDollyRotate();
+  							handleTouchStartDollyRotate( event );
 
   							state = STATE.TOUCH_DOLLY_ROTATE;
 
@@ -2138,7 +2371,7 @@
 
   		function addPointer( event ) {
 
-  			pointers.push( event );
+  			pointers.push( event.pointerId );
 
   		}
 
@@ -2148,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;
@@ -2176,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 ];
 
   		}
 
@@ -2190,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();
@@ -2380,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;
@@ -2463,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 );
@@ -2473,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 );
 
@@ -2480,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 );
@@ -2573,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 {
 
@@ -2744,11 +3018,14 @@
   		if ( this.clear ) renderer.clear();
   		renderer.render( this.scene, this.camera );
 
-  		// unlock color and depth buffer for subsequent rendering
+  		// unlock color and depth buffer and make them writable for subsequent rendering/clearing
 
   		state.buffers.color.setLocked( false );
   		state.buffers.depth.setLocked( false );
 
+  		state.buffers.color.setMask( true );
+  		state.buffers.depth.setMask( true );
+
   		// only render where stencil is set to 1
 
   		state.buffers.stencil.setLocked( false );
@@ -2999,7 +3276,7 @@
 
   class RenderPass extends Pass {
 
-  	constructor( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
+  	constructor( scene, camera, overrideMaterial = null, clearColor = null, clearAlpha = null ) {
 
   		super();
 
@@ -3009,7 +3286,7 @@
   		this.overrideMaterial = overrideMaterial;
 
   		this.clearColor = clearColor;
-  		this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
+  		this.clearAlpha = clearAlpha;
 
   		this.clear = true;
   		this.clearDepth = false;
@@ -3025,7 +3302,7 @@
 
   		let oldClearAlpha, oldOverrideMaterial;
 
-  		if ( this.overrideMaterial !== undefined ) {
+  		if ( this.overrideMaterial !== null ) {
 
   			oldOverrideMaterial = this.scene.overrideMaterial;
 
@@ -3033,16 +3310,21 @@
 
   		}
 
-  		if ( this.clearColor ) {
+  		if ( this.clearColor !== null ) {
 
   			renderer.getClearColor( this._oldClearColor );
-  			oldClearAlpha = renderer.getClearAlpha();
+  			renderer.setClearColor( this.clearColor );
 
-  			renderer.setClearColor( this.clearColor, this.clearAlpha );
+  		}
+
+  		if ( this.clearAlpha !== null ) {
+
+  			oldClearAlpha = renderer.getClearAlpha();
+  			renderer.setClearAlpha( this.clearAlpha );
 
   		}
 
-  		if ( this.clearDepth ) {
+  		if ( this.clearDepth == true ) {
 
   			renderer.clearDepth();
 
@@ -3050,17 +3332,30 @@
 
   		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
 
-  		// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
-  		if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+  		if ( this.clear === true ) {
+
+  			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
+  			renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+
+  		}
+
   		renderer.render( this.scene, this.camera );
 
-  		if ( this.clearColor ) {
+  		// restore
+
+  		if ( this.clearColor !== null ) {
+
+  			renderer.setClearColor( this._oldClearColor );
+
+  		}
+
+  		if ( this.clearAlpha !== null ) {
 
-  			renderer.setClearColor( this._oldClearColor, oldClearAlpha );
+  			renderer.setClearAlpha( oldClearAlpha );
 
   		}
 
-  		if ( this.overrideMaterial !== undefined ) {
+  		if ( this.overrideMaterial !== null ) {
 
   			this.scene.overrideMaterial = oldOverrideMaterial;
 
@@ -3116,35 +3411,28 @@
   }
 
   function _isNativeFunction(fn) {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    try {
+      return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    } catch (e) {
+      return typeof fn === "function";
+    }
   }
 
   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) {
@@ -3175,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
@@ -3260,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;
@@ -3357,7 +3631,6 @@
       red = chroma;
       blue = secondComponent;
     }
-
     var lightnessModification = lightness - chroma / 2;
     var finalRed = red + lightnessModification;
     var finalGreen = green + lightnessModification;
@@ -3515,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();
@@ -3534,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
@@ -3545,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),
@@ -3560,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 {
@@ -3570,7 +3840,6 @@
         alpha: alpha
       };
     }
-
     if (normalizedColor.match(reducedHexRegex)) {
       return {
         red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
@@ -3578,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),
@@ -3589,9 +3856,7 @@
         alpha: _alpha
       };
     }
-
     var rgbMatched = rgbRegex.exec(normalizedColor);
-
     if (rgbMatched) {
       return {
         red: parseInt("" + rgbMatched[1], 10),
@@ -3599,9 +3864,7 @@
         blue: parseInt("" + rgbMatched[3], 10)
       };
     }
-
     var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-
     if (rgbaMatched) {
       return {
         red: parseInt("" + rgbaMatched[1], 10),
@@ -3610,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),
@@ -3655,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
@@ -3667,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) {
@@ -3678,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.
    *
@@ -3707,124 +4105,605 @@
     } 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);
   }
 
   /**
-   * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
-   *
-   * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+   * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
+   *
+   * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: rgba(255, 205, 100, 0.7),
+   *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
+   *   background: rgba(255, 205, 100, 1),
+   *   background: rgba('#ffffff', 0.4),
+   *   background: rgba('black', 0.7),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${rgba(255, 205, 100, 0.7)};
+   *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
+   *   background: ${rgba(255, 205, 100, 1)};
+   *   background: ${rgba('#ffffff', 0.4)};
+   *   background: ${rgba('black', 0.7)};
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "rgba(255,205,100,0.7)";
+   *   background: "rgba(255,205,100,0.7)";
+   *   background: "#ffcd64";
+   *   background: "rgba(255,255,255,0.4)";
+   *   background: "rgba(0,0,0,0.7)";
+   * }
+   */
+  function rgba(firstValue, secondValue, thirdValue, fourthValue) {
+    if (typeof firstValue === 'string' && typeof secondValue === 'number') {
+      var rgbValue = parseToRgb(firstValue);
+      return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+    } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
+      return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+    } 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);
+  }
+
+  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() {
+      // eslint-disable-next-line prefer-rest-params
+      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
+  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.
+   *
+   *
+   * @example
+   * // Styles as object usage
+   * const styles = {
+   *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
+   *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
+   *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
+   * }
+   *
+   * // styled-components usage
+   * const div = styled.div`
+   *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
+   *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
+   *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
+   * `
+   *
+   * // CSS in JS Output
+   *
+   * element {
+   *   background: "#fff";
+   *   background: "rgba(255,255,255,0.7)";
+   *   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 = 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: rgba(255, 205, 100, 0.7),
-   *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
-   *   background: rgba(255, 205, 100, 1),
-   *   background: rgba('#ffffff', 0.4),
-   *   background: rgba('black', 0.7),
+   *   background: tint(0.25, '#00f')
    * }
    *
    * // styled-components usage
    * const div = styled.div`
-   *   background: ${rgba(255, 205, 100, 0.7)};
-   *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
-   *   background: ${rgba(255, 205, 100, 1)};
-   *   background: ${rgba('#ffffff', 0.4)};
-   *   background: ${rgba('black', 0.7)};
+   *   background: ${tint(0.25, '#00f')};
    * `
    *
    * // CSS in JS Output
    *
    * element {
-   *   background: "rgba(255,205,100,0.7)";
-   *   background: "rgba(255,205,100,0.7)";
-   *   background: "#ffcd64";
-   *   background: "rgba(255,255,255,0.4)";
-   *   background: "rgba(0,0,0,0.7)";
+   *   background: "#bfbfff";
    * }
    */
-  function rgba(firstValue, secondValue, thirdValue, fourthValue) {
-    if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-      var rgbValue = parseToRgb(firstValue);
-      return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-    } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-      return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-    } 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
-  // eslint-disable-next-line no-redeclare
-  function curried(f, length, acc) {
-    return function fn() {
-      // eslint-disable-next-line prefer-rest-params
-      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
-
 
-  function curry(f) {
-    // eslint-disable-line no-redeclare
-    return curried(f, f.length, []);
+  function tint(percentage, color) {
+    if (color === 'transparent') return color;
+    return mix$1(parseFloat(percentage), 'rgb(255, 255, 255)', color);
   }
 
-  function guard(lowerBoundary, upperBoundary, value) {
-    return Math.max(lowerBoundary, Math.min(upperBoundary, value));
-  }
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(tint);
 
   /**
-   * Increases the opacity of a color. Its range for the amount is between 0 to 1.
+   * Decreases the opacity of a color. Its range for the amount is between 0 to 1.
    *
    *
    * @example
    * // Styles as object usage
    * const styles = {
-   *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
-   *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
-   *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
+   *   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: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
-   *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
-   *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
+   *   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: "#fff";
-   *   background: "rgba(255,255,255,0.7)";
-   *   background: "rgba(255,0,0,0.7)";
+   *   background: "rgba(255,255,255,0.9)";
+   *   background: "rgba(255,255,255,0.8)";
+   *   background: "rgba(255,0,0,0.3)";
    * }
    */
-
-  function opacify(amount, color) {
+  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) / 100)
+      alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
     });
-
     return rgba(colorWithAlpha);
-  } // prettier-ignore
-
+  }
 
-  var curriedOpacify = /*#__PURE__*/curry
-  /* ::<number | string, string, string> */
-  (opacify);
-  var curriedOpacify$1 = curriedOpacify;
+  // prettier-ignore
+  curry /* ::<number | string, string, string> */(transparentize);
 
   /**
    * The Ease class provides a collection of easing functions for use with tween.js.
@@ -4041,7 +4920,7 @@
       },
   });
 
-  var now$2 = function () { return performance.now(); };
+  var now$1 = function () { return performance.now(); };
 
   /**
    * Controlling groups of tweens
@@ -4072,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) {
@@ -4241,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) {
@@ -4261,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;
@@ -4399,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;
           }
@@ -4410,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;
           }
@@ -4501,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)
@@ -4530,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) {
@@ -4559,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);
                   }
@@ -4666,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')();
 
-  var root$1 = root;
+  /**
+   * 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();
+  };
 
-  /** Built-in value references. */
-  var Symbol$1 = root$1.Symbol;
+  /** 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;
+  }
 
-  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;
@@ -4698,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.
@@ -4753,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.
@@ -4824,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;
 
@@ -4947,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';
 
@@ -5094,7 +5983,7 @@
     }
 
     function timerExpired() {
-      var time = now$1();
+      var time = now();
       if (shouldInvoke(time)) {
         return trailingEdge(time);
       }
@@ -5123,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;
@@ -5155,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) {
@@ -5420,6 +6309,9 @@
       objects: {
         "default": []
       },
+      lights: {
+        "default": []
+      },
       enablePointerInteraction: {
         "default": true,
         onChange: function onChange(_, state) {
@@ -5501,7 +6393,6 @@
           }
           update(); // update camera animation tweens
         }
-
         return this;
       },
       getPointerPos: function getPointerPos(state) {
@@ -5563,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));
         }
@@ -5662,7 +6552,6 @@
         return state.controls;
       } // to be deprecated
     },
-
     stateInit: function stateInit() {
       return {
         scene: new three.Scene(),
@@ -5753,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);
@@ -5880,6 +6767,14 @@
         }
       }
       changedProps.hasOwnProperty('showNavInfo') && (state.navInfo.style.display = state.showNavInfo ? null : 'none');
+      if (changedProps.hasOwnProperty('lights')) {
+        (changedProps.lights || []).forEach(function (light) {
+          return state.scene.remove(light);
+        }); // Clear the place
+        state.lights.forEach(function (light) {
+          return state.scene.add(light);
+        }); // Add to scene
+      }
       if (changedProps.hasOwnProperty('objects')) {
         (changedProps.objects || []).forEach(function (obj) {
           return state.scene.remove(obj);