chore: deps update

package.json

@@ -19,37 +19,37 @@
   },
   "repository": "https://github.com/gsimone/leva.git",
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@preconstruct/cli": "^2.0.1",
-    "@size-limit/preset-small-lib": "^4.9.1",
-    "@storybook/addon-essentials": "^6.1.12",
+    "@babel/core": "^7.12.16",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.12.16",
+    "@preconstruct/cli": "^2.0.4",
+    "@size-limit/preset-small-lib": "^4.9.2",
+    "@storybook/addon-essentials": "^6.1.17",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addons": "^6.1.12",
-    "@storybook/react": "^6.1.12",
-    "@types/react": "^17.0.0",
+    "@storybook/addon-links": "^6.1.17",
+    "@storybook/addons": "^6.1.17",
+    "@storybook/react": "^6.1.17",
+    "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",
     "@types/tinycolor2": "^1.4.2",
     "@types/xstyled__styled-components": "^1.19.1",
-    "@typescript-eslint/eslint-plugin": "^4.13.0",
-    "@typescript-eslint/parser": "^4.13.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
     "babel-eslint": "^10.0.0",
     "babel-plugin-styled-components": "^1.12.0",
-    "eslint": "^7.17.0",
+    "eslint": "^7.19.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.0.8",
-    "husky": "^4.3.7",
+    "husky": "^5.0.9",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "size-limit": "^4.9.1",
+    "size-limit": "^4.9.2",
     "tslib": "^2.1.0",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.5"
   },
   "prettier": {
     "semi": false,

packages/leva/package.json

@@ -20,10 +20,10 @@
     "clipboard-polyfill": "^3.0.2",
     "dequal": "^2.0.2",
     "merge-value": "^1.0.0",
-    "react-colorful": "^4.4.4",
-    "react-dropzone": "^11.2.4",
+    "react-colorful": "^5.0.0",
+    "react-dropzone": "^11.3.1",
     "react-portal": "^4.2.1",
-    "react-use-gesture": "^9.0.0",
+    "react-use-gesture": "^9.0.2",
     "tinycolor2": "^1.4.2",
     "v8n": "^1.3.3",
     "zustand": "^3.3.1"

packages/leva/src/styles/stitches.config.ts

@@ -151,88 +151,4 @@ export const globalStyles = css.global({
     input: { userSelect: 'none' },
     '*': { cursor: 'ew-resize !important' },
   },
-  '.react-colorful': {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    width: '200px',
-    height: '200px',
-    userSelect: 'none',
-    cursor: 'default',
-  },
-  '.react-colorful__saturation': {
-    position: 'relative',
-    flex: '1',
-    borderBottom: '12px solid #000',
-    borderRadius: '8px 8px 0 0',
-    backgroundImage:
-      'linear-gradient(to top, #000, rgba(0, 0, 0, 0)),linear-gradient(to right, #fff, rgba(255, 255, 255, 0))',
-  },
-  '.react-colorful__pointer_fill, .react-colorful__alpha_gradient': {
-    content: '""',
-    position: 'absolute',
-    left: '0',
-    top: '0',
-    right: '0',
-    bottom: '0',
-    pointerEvents: 'none',
-    borderRadius: 'inherit',
-  },
-  '.react-colorful__alpha_gradient, .react-colorful__saturation': {
-    boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.05)',
-  },
-  '.react-colorful__hue, .react-colorful__alpha': {
-    position: 'relative',
-    height: '24px',
-  },
-  '.react-colorful__hue': {
-    background: `linear-gradient(
-      to right,
-      #f00 0%,
-      #ff0 17%,
-      #0f0 33%,
-      #0ff 50%,
-      #00f 67%,
-      #f0f 83%,
-      #f00 100%
-    )`,
-  },
-  '.react-colorful__last-control': {
-    borderRadius: '0 0 8px 8px',
-  },
-  '.react-colorful__interactive': {
-    position: 'absolute',
-    left: '0',
-    top: '0',
-    right: '0',
-    bottom: '0',
-    borderRadius: 'inherit',
-    outline: 'none',
-    touchAction: 'none',
-  },
-  '.react-colorful__pointer': {
-    position: 'absolute',
-    zIndex: '1',
-    boxSizing: 'border-box',
-    width: '28px',
-    height: '28px',
-    transform: 'translate(-50%, -50%)',
-    backgroundColor: '#fff',
-    border: '2px solid #fff',
-    borderRadius: '50%',
-    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
-  },
-  '.react-colorful__interactive:focus .react-colorful__pointer': {
-    transform: 'translate(-50%, -50%) scale(1.1)',
-  },
-  '.react-colorful__alpha, .react-colorful__alpha-pointer': {
-    backgroundColor: '#fff',
-    backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>')`,
-  },
-  '.react-colorful__saturation_pointer': {
-    zIndex: '3',
-  },
-  '.react-colorful__hue_pointer': {
-    zIndex: '2',
-  },
 })