- updated classnames to 2.3.1 to use added type definitions

- remove stub type definitions from package.json
- set 'noImplicitAny' false until jss and react-jss packages are upgraded to use own type definitions
- add missing csstype to package/forms and update code to v3

9 files changed, 84 insertions, 141 deletions

diff --git a/package-lock.json b/package-lock.json
index dceb195cf..164678178 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7334,6 +7334,7 @@
         "@mdi/js": "^3.3.92",
         "@mdi/react": "^1.1.0",
         "@meetfranz/theme": "file:packages/theme",
+        "csstype": "^3.0.8",
         "react-html-attributes": "^1.4.3",
         "react-loader": "2.4.7"
       },
@@ -7342,6 +7343,11 @@
           "version": "3.9.97",
           "resolved": "https://registry.npmjs.org/@mdi/js/-/js-3.9.97.tgz",
           "integrity": "sha512-JzX6rDlUcNZHaoUg9sAzdg5Js287tvgRbNmMIyKoJK2ZCP9JupeWTYlpbX4oNJ9Zg9v8YH76WuWLALKOospQgw=="
+        },
+        "csstype": {
+          "version": "3.0.8",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
         }
       }
     },
@@ -8123,12 +8129,6 @@
         "@types/responselike": "*"
       }
     },
-    "@types/classnames": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.9.tgz",
-      "integrity": "sha512-MNl+rT5UmZeilaPxAVs6YaPC2m6aA8rofviZbhbxpPpl61uKodfdQVsBtgJGTqGizEf02oW3tsVe7FYB8kK14A==",
-      "dev": true
-    },
     "@types/color": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.2.tgz",
@@ -8261,16 +8261,6 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
-    "@types/jss": {
-      "version": "9.5.8",
-      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz",
-      "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==",
-      "dev": true,
-      "requires": {
-        "csstype": "^2.0.0",
-        "indefinite-observable": "^1.0.1"
-      }
-    },
     "@types/keyv": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.1.tgz",
@@ -8373,18 +8363,6 @@
         "@types/react": "^16"
       }
     },
-    "@types/react-jss": {
-      "version": "8.6.4",
-      "resolved": "https://registry.npmjs.org/@types/react-jss/-/react-jss-8.6.4.tgz",
-      "integrity": "sha512-LK55kG7YnEt0xmBZeZqCEHEkSx7Xm1WD0GxaOUxIeTQyrSE6h0K70cyrXCloivrZwDzXqcA78zBBB64gapASPQ==",
-      "dev": true,
-      "requires": {
-        "@types/jss": "*",
-        "@types/react": "*",
-        "@types/theming": "*",
-        "csstype": "^2.0.0"
-      }
-    },
     "@types/responselike": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@@ -8423,15 +8401,6 @@
       "integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==",
       "dev": true
     },
-    "@types/theming": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@types/theming/-/theming-1.3.3.tgz",
-      "integrity": "sha512-xcCIvBHFFxNDxDUn0Po6FXQPpGA6Y5dzt6/fbzVhBba7Qx4cxkxStmLVEkFqEF4jy01SH9DjbRUqdj7RziC/XA==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/uglify-js": {
       "version": "3.13.0",
       "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.0.tgz",
@@ -12062,9 +12031,9 @@
       }
     },
     "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
     },
     "cld": {
       "version": "2.7.0",
@@ -14107,12 +14076,6 @@
         }
       }
     },
-    "csstype": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
-      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==",
-      "dev": true
-    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -22067,15 +22030,6 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
-    "indefinite-observable": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
-      "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==",
-      "dev": true,
-      "requires": {
-        "symbol-observable": "1.2.0"
-      }
-    },
     "indent-string": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
diff --git a/package.json b/package.json
index f17c4d8e7..3f278e26b 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "atob": "2.1.2",
     "auto-launch": "5.0.5",
     "btoa": "1.2.1",
-    "classnames": "2.2.6",
+    "classnames": "2.3.1",
     "cld": "2.7.0",
     "css": "2.2.4",
     "darkreader": "4.9.34",
@@ -149,15 +149,12 @@
     "@babel/preset-env": "7.14.8",
     "@babel/preset-react": "7.14.5",
     "@babel/register": "7.14.5",
-    "@types/classnames": "2.2.9",
     "@types/color": "3.0.2",
     "@types/fs-extra": "^7.0.0",
-    "@types/jss": "^9.5.7",
     "@types/lodash": "4.14.171",
     "@types/node": "12.20.13",
     "@types/react": "16.14.6",
     "@types/react-dom": "16.9.13",
-    "@types/react-jss": "^8.6.0",
     "@types/uuid": "3.4.9",
     "all-contributors-cli": "6.20.0",
     "babel-loader": "8.2.2",
diff --git a/packages/forms/package.json b/packages/forms/package.json
index a5b8752aa..29e19b8c7 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -26,6 +26,7 @@
     "@mdi/js": "^3.3.92",
     "@mdi/react": "^1.1.0",
     "@meetfranz/theme": "file:../theme",
+    "csstype": "^3.0.8",
     "react-html-attributes": "^1.4.3",
     "react-loader": "2.4.7"
   },
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index b81154a43..8eba17415 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,7 +1,7 @@
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 import React, { Component } from 'react';
 import injectStyle, { withTheme } from 'react-jss';
 import Loader from 'react-loader';
@@ -14,7 +14,7 @@ interface IProps extends IFormField, IWithStyle {
   className?: string;
   disabled?: boolean;
   id?: string;
-  type?: "button" | "reset" | "submit" | undefined;
+  type?: 'button' | 'reset' | 'submit' | undefined;
   onClick: (event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLAnchorElement>) => void;
   buttonType?: ButtonType;
   stretch?: boolean;
@@ -34,13 +34,13 @@ const styles = (theme: Theme) => ({
     borderRadius: theme.borderRadiusSmall,
     border: 'none',
     display: 'inline-flex',
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as CSS.Property.Position,
     transition: 'background .5s, opacity 0.3s',
-    textAlign: 'center' as CSS.TextAlignProperty,
+    textAlign: 'center' as CSS.Property.TextAlign,
     outline: 'none',
     alignItems: 'center',
     padding: 0,
-    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
+    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.Property.Width<string>,
     fontSize: theme.uiFontSize,
     textDecoration: 'none',
     // height: theme.buttonHeight,
@@ -113,7 +113,7 @@ const styles = (theme: Theme) => ({
     opacity: theme.inputDisabledOpacity,
   },
   loader: {
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as CSS.Property.Position,
     width: 20,
     height: 18,
     zIndex: 9999,
@@ -123,9 +123,9 @@ const styles = (theme: Theme) => ({
     height: 20,
     overflow: 'hidden',
     transition: 'all 0.3s',
-    marginLeft: (props: IProps): number => !props.busy ? 10 : 20,
-    marginRight: (props: IProps): number => !props.busy ? -10 : -20,
-    position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit',
+    marginLeft: (props: IProps): number => (!props.busy ? 10 : 20),
+    marginRight: (props: IProps): number => (!props.busy ? -10 : -20),
+    position: (props: IProps): CSS.Property.Position => props.stretch ? 'absolute' : 'inherit',
   },
   icon: {
     margin: [1, 10, 0, -5],
@@ -155,7 +155,7 @@ class ButtonComponent extends Component<IProps> {
       if (this.props.busy) {
         setTimeout(() => {
           this.setState({ busy: nextProps.busy });
-        },         300);
+        }, 300);
       } else {
         this.setState({ busy: nextProps.busy });
       }
@@ -180,9 +180,7 @@ class ButtonComponent extends Component<IProps> {
       target,
     } = this.props;
 
-    const {
-      busy,
-    } = this.state;
+    const { busy } = this.state;
 
     let showLoader = false;
     if (loaded) {
@@ -207,19 +205,13 @@ class ButtonComponent extends Component<IProps> {
           )}
         </div>
         <div className={classes.label}>
-          {icon && (
-            <Icon
-              path={icon}
-              size={0.8}
-              className={classes.icon}
-            />
-          )}
+          {icon && <Icon path={icon} size={0.8} className={classes.icon} />}
           {label}
         </div>
       </>
     );
 
-    let wrapperComponent = null;
+    let wrapperComponent: JSX.Element;
 
     if (!href) {
       wrapperComponent = (
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index e2ab30a4f..99b0685a8 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -1,5 +1,5 @@
 import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
@@ -13,7 +13,7 @@ export default (theme: Theme) => ({
   label: {
     '& > div': {
       marginTop: 5,
-    }
+    },
   },
   disabled: {
     opacity: theme.inputDisabledOpacity,
@@ -85,7 +85,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box' as CSS.Property.BoxSizing,
     display: 'flex',
     height: theme.inputHeight,
     order: 1,
diff --git a/packages/forms/src/textarea/styles.ts b/packages/forms/src/textarea/styles.ts
index c1cbd76a5..f1fb09367 100644
--- a/packages/forms/src/textarea/styles.ts
+++ b/packages/forms/src/textarea/styles.ts
@@ -1,5 +1,5 @@
 import { Theme } from '@meetfranz/theme';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 
 export default (theme: Theme) => ({
   label: {
@@ -42,7 +42,7 @@ export default (theme: Theme) => ({
     background: theme.inputBackground,
     border: theme.inputBorder,
     borderRadius: theme.borderRadiusSmall,
-    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    boxSizing: 'border-box' as CSS.Property.BoxSizing,
     display: 'flex',
     order: 1,
     width: '100%',
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index ea335f281..50716450b 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -1,6 +1,6 @@
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
@@ -22,7 +22,7 @@ const styles = (theme: Theme) => ({
     background: theme.toggleBackground,
     borderRadius: theme.borderRadius,
     height: theme.toggleHeight,
-    position: 'relative' as CSS.PositionProperty,
+    position: 'relative' as CSS.Property.Position,
     width: theme.toggleWidth,
   },
   button: {
@@ -33,7 +33,7 @@ const styles = (theme: Theme) => ({
     height: theme.toggleHeight - 2,
     left: 1,
     top: 1,
-    position: 'absolute' as CSS.PositionProperty,
+    position: 'absolute' as CSS.Property.Position,
     transition: 'all .5s',
   },
   buttonActive: {
diff --git a/tsconfig.settings.json b/tsconfig.settings.json
index ccd0927ab..35f2cd80e 100644
--- a/tsconfig.settings.json
+++ b/tsconfig.settings.json
@@ -3,14 +3,11 @@
     "baseUrl": ".",
     "target": "esnext",
     "module": "commonjs",
-    "lib": [
-      "es2015",
-      "es2017",
-      "dom"
-    ],
+    "lib": ["es2015", "es2017", "dom"],
     "jsx": "react",
     "sourceMap": true,
     "strict": true,
+    "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "composite": true,
diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx
index 593019c35..c025e8825 100644
--- a/uidev/src/app.tsx
+++ b/uidev/src/app.tsx
@@ -1,4 +1,4 @@
-import CSS from 'csstype';
+import * as CSS from 'csstype';
 import { Classes } from 'jss';
 import { observer } from 'mobx-react';
 import DevTools from 'mobx-react-devtools';
@@ -27,7 +27,7 @@ const styles = {
   '@global body': {
     margin: 0,
     fontSize: defaultTheme.uiFontSize,
-    fontFamily: '\'Open Sans\', sans-serif',
+    fontFamily: "'Open Sans', sans-serif",
   },
   container: {
     display: 'flex',
@@ -35,7 +35,7 @@ const styles = {
   },
   menu: {
     width: 300,
-    position: 'fixed' as CSS.PositionProperty,
+    position: 'fixed' as CSS.Property.Position,
     listStyleType: 'none',
     fontSize: 14,
     overflow: 'scroll',
@@ -66,7 +66,7 @@ const styles = {
     borderBottom: '1px solid #CFCFCF',
   },
   sectionLink: {
-    fontWeight: 'bold' as CSS.FontWeightProperty,
+    fontWeight: 'bold' as CSS.Property.FontWeight,
     color: '#000',
     textDecoration: 'none',
   },
@@ -76,51 +76,53 @@ const styles = {
   },
 };
 
-export const App = injectSheet(styles)(observer(({ classes }: { classes: Classes }) => (
-  <div className={classes.container}>
-    <ul className={classes.menu}>
-      {store.stories.sections.map((section, key) => (
-        <li key={key}>
-          <a href={`#section-${key}`} className={classes.sectionLink}>{
-            section.name}
-          </a>
-          <ul className={classes.storyList}>
+export const App = injectSheet(styles)(
+  observer(({ classes }: { classes: Classes }) => (
+    <div className={classes.container}>
+      <ul className={classes.menu}>
+        {store.stories.sections.map((section, key) => (
+          <li key={key}>
+            <a href={`#section-${key}`} className={classes.sectionLink}>
+              {section.name}
+            </a>
+            <ul className={classes.storyList}>
+              {section.stories.map((story, storyKey) => (
+                <li key={storyKey}>
+                  <a
+                    href={`#section-${key}-story-${storyKey}`}
+                    className={classes.storyLink}
+                  >
+                    {story.name}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+      <div className={classes.stories}>
+        {store.stories.sections.map((section, key) => (
+          <div key={key}>
+            <h1 id={`section-${key}`} className={classes.sectionHeadline}>
+              {section.name}
+            </h1>
             {section.stories.map((story, storyKey) => (
-              <li key={storyKey}>
-                <a href={`#section-${key}-story-${storyKey}`} className={classes.storyLink}>
+              <div className={classes.story} key={storyKey}>
+                <h2
+                  id={`section-${key}-story-${storyKey}`}
+                  className={classes.storyHeadline}
+                >
                   {story.name}
-                </a>
-              </li>
+                </h2>
+                <WithTheme>
+                  <story.component />
+                </WithTheme>
+              </div>
             ))}
-          </ul>
-        </li>
-      ))}
-    </ul>
-    <div className={classes.stories}>
-      {store.stories.sections.map((section, key) => (
-        <div key={key}>
-          <h1
-            id={`section-${key}`}
-            className={classes.sectionHeadline}
-          >
-            {section.name}
-          </h1>
-          {section.stories.map((story, storyKey) => (
-            <div className={classes.story} key={storyKey}>
-              <h2
-                id={`section-${key}-story-${storyKey}`}
-                className={classes.storyHeadline}
-              >
-                {story.name}
-              </h2>
-              <WithTheme>
-                <story.component />
-              </WithTheme>
-            </div>
-          ))}
-        </div>
-      ))}
+          </div>
+        ))}
+      </div>
+      <DevTools />
     </div>
-    <DevTools />
-  </div>
-)));
+  )),
+);