SPRINT-18: fixed import orders, some fixes due to using Box vs MDBox

package-lock.json

@@ -11,7 +11,7 @@
             "@auth0/auth0-react": "1.10.2",
             "@emotion/react": "11.7.1",
             "@emotion/styled": "11.6.0",
-            "@kingsrook/qqq-frontend-core": "1.0.39",
+            "@kingsrook/qqq-frontend-core": "1.0.40",
             "@mui/icons-material": "5.4.1",
             "@mui/material": "5.11.1",
             "@mui/styles": "5.11.1",
@@ -3365,9 +3365,9 @@
          }
       },
       "node_modules/@kingsrook/qqq-frontend-core": {
-         "version": "1.0.39",
+         "version": "1.0.40",
-         "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.39/833263d6596029a396125dccb5ab0ac908b15c36",
+         "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.40/014c8ecdbb873a39cb09aa2e4b3aa5edb4c54b04",
-         "integrity": "sha512-S9V5zhri30jvNTzMqlbeD2c+zeon+3j+JqM/wt/qsSPys4Pnp6kJDf86dF7QzeFsuzbXJDqVgcQ3AbDrTa0skA==",
+         "integrity": "sha512-m2I2jPCFgUp0HjNGyNkSsdRQCqDOmwoTo2fDEOSZKGLW8bIsMPZpUoqfhsP+dVHHS7EO+LNFCvySfTQNJzUkCQ==",
          "license": "ISC",
          "dependencies": {
             "axios": "0.27.2",
@@ -5802,6 +5802,18 @@
             "postcss": "^8.1.0"
          }
       },
+      "node_modules/available-typed-arrays": {
+         "version": "1.0.5",
+         "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+         "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+         "dev": true,
+         "engines": {
+            "node": ">= 0.4"
+         },
+         "funding": {
+            "url": "https://github.com/sponsors/ljharb"
+         }
+      },
       "node_modules/aws-sign2": {
          "version": "0.7.0",
          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -6523,9 +6535,9 @@
          }
       },
       "node_modules/caniuse-lite": {
-         "version": "1.0.30001441",
+         "version": "1.0.30001442",
-         "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
+         "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz",
-         "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==",
+         "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==",
          "funding": [
             {
                "type": "opencollective",
@@ -8296,27 +8308,32 @@
          }
       },
       "node_modules/es-abstract": {
-         "version": "1.20.5",
+         "version": "1.21.0",
-         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.5.tgz",
+         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.0.tgz",
-         "integrity": "sha512-7h8MM2EQhsCA7pU/Nv78qOXFpD8Rhqd12gYiSJVkrH9+e8VuA8JlPJK/hQjjlLv6pJvx/z1iRFKzYb0XT/RuAQ==",
+         "integrity": "sha512-GUGtW7eXQay0c+PRq0sGIKSdaBorfVqsCMhGHo4elP7YVqZu9nCZS4UkK4gv71gOWNMra/PaSKD3ao1oWExO0g==",
          "dev": true,
          "dependencies": {
             "call-bind": "^1.0.2",
+            "es-set-tostringtag": "^2.0.0",
             "es-to-primitive": "^1.2.1",
             "function-bind": "^1.1.1",
             "function.prototype.name": "^1.1.5",
             "get-intrinsic": "^1.1.3",
             "get-symbol-description": "^1.0.0",
+            "globalthis": "^1.0.3",
             "gopd": "^1.0.1",
             "has": "^1.0.3",
             "has-property-descriptors": "^1.0.0",
+            "has-proto": "^1.0.1",
             "has-symbols": "^1.0.3",
-            "internal-slot": "^1.0.3",
+            "internal-slot": "^1.0.4",
+            "is-array-buffer": "^3.0.0",
             "is-callable": "^1.2.7",
             "is-negative-zero": "^2.0.2",
             "is-regex": "^1.1.4",
             "is-shared-array-buffer": "^1.0.2",
             "is-string": "^1.0.7",
+            "is-typed-array": "^1.1.10",
             "is-weakref": "^1.0.2",
             "object-inspect": "^1.12.2",
             "object-keys": "^1.1.1",
@@ -8325,7 +8342,9 @@
             "safe-regex-test": "^1.0.0",
             "string.prototype.trimend": "^1.0.6",
             "string.prototype.trimstart": "^1.0.6",
-            "unbox-primitive": "^1.0.2"
+            "typed-array-length": "^1.0.4",
+            "unbox-primitive": "^1.0.2",
+            "which-typed-array": "^1.1.9"
          },
          "engines": {
             "node": ">= 0.4"
@@ -8345,6 +8364,19 @@
          "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
          "dev": true
       },
+      "node_modules/es-set-tostringtag": {
+         "version": "2.0.0",
+         "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.0.tgz",
+         "integrity": "sha512-vZVAIWss0FcR/+a08s6e2/GjGjjYBCZJXDrOnj6l5kJCKhQvJs4cnVqUxkVepIhqHbKHm3uwOvPb8lRcqA3DSg==",
+         "dev": true,
+         "dependencies": {
+            "get-intrinsic": "^1.1.3",
+            "has-tostringtag": "^1.0.0"
+         },
+         "engines": {
+            "node": ">= 0.4"
+         }
+      },
       "node_modules/es-shim-unscopables": {
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -9849,6 +9881,15 @@
             }
          }
       },
+      "node_modules/for-each": {
+         "version": "0.3.3",
+         "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+         "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+         "dev": true,
+         "dependencies": {
+            "is-callable": "^1.1.3"
+         }
+      },
       "node_modules/forever-agent": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -10401,6 +10442,21 @@
             "node": ">=4"
          }
       },
+      "node_modules/globalthis": {
+         "version": "1.0.3",
+         "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+         "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+         "dev": true,
+         "dependencies": {
+            "define-properties": "^1.1.3"
+         },
+         "engines": {
+            "node": ">= 0.4"
+         },
+         "funding": {
+            "url": "https://github.com/sponsors/ljharb"
+         }
+      },
       "node_modules/globby": {
          "version": "11.1.0",
          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -10506,6 +10562,18 @@
             "url": "https://github.com/sponsors/ljharb"
          }
       },
+      "node_modules/has-proto": {
+         "version": "1.0.1",
+         "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+         "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+         "dev": true,
+         "engines": {
+            "node": ">= 0.4"
+         },
+         "funding": {
+            "url": "https://github.com/sponsors/ljharb"
+         }
+      },
       "node_modules/has-symbols": {
          "version": "1.0.3",
          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -11048,6 +11116,19 @@
             "node": ">= 10"
          }
       },
+      "node_modules/is-array-buffer": {
+         "version": "3.0.0",
+         "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.0.tgz",
+         "integrity": "sha512-TI2hnvT6dPUnn/jARFCJBKL1eeabAfLnKZ2lmW5Uh317s1Ii2IMroL1yMciEk/G+OETykVzlsH6x/L4q/avhgw==",
+         "dev": true,
+         "dependencies": {
+            "call-bind": "^1.0.2",
+            "get-intrinsic": "^1.1.3"
+         },
+         "funding": {
+            "url": "https://github.com/sponsors/ljharb"
+         }
+      },
       "node_modules/is-arrayish": {
          "version": "0.2.1",
          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -11379,6 +11460,25 @@
             "url": "https://github.com/sponsors/ljharb"
          }
       },
+      "node_modules/is-typed-array": {
+         "version": "1.1.10",
+         "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+         "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+         "dev": true,
+         "dependencies": {
+            "available-typed-arrays": "^1.0.5",
+            "call-bind": "^1.0.2",
+            "for-each": "^0.3.3",
+            "gopd": "^1.0.1",
+            "has-tostringtag": "^1.0.0"
+         },
+         "engines": {
+            "node": ">= 0.4"
+         },
+         "funding": {
+            "url": "https://github.com/sponsors/ljharb"
+         }
+      },
       "node_modules/is-typedarray": {
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -19252,6 +19352,20 @@
             "node": ">= 0.6"
          }
       },
+      "node_modules/typed-array-length": {
+         "version": "1.0.4",
+         "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+         "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+         "dev": true,
+         "dependencies": {
+            "call-bind": "^1.0.2",
+            "for-each": "^0.3.3",
+            "is-typed-array": "^1.1.9"
+         },
+         "funding": {
+            "url": "https://github.com/sponsors/ljharb"
+         }
+      },
       "node_modules/typedarray-to-buffer": {
          "version": "3.1.5",
          "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -19986,6 +20100,26 @@
             "url": "https://github.com/sponsors/ljharb"
          }
       },
+      "node_modules/which-typed-array": {
+         "version": "1.1.9",
+         "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+         "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+         "dev": true,
+         "dependencies": {
+            "available-typed-arrays": "^1.0.5",
+            "call-bind": "^1.0.2",
+            "for-each": "^0.3.3",
+            "gopd": "^1.0.1",
+            "has-tostringtag": "^1.0.0",
+            "is-typed-array": "^1.1.10"
+         },
+         "engines": {
+            "node": ">= 0.4"
+         },
+         "funding": {
+            "url": "https://github.com/sponsors/ljharb"
+         }
+      },
       "node_modules/word-wrap": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -22809,9 +22943,9 @@
          }
       },
       "@kingsrook/qqq-frontend-core": {
-         "version": "1.0.39",
+         "version": "1.0.40",
-         "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.39/833263d6596029a396125dccb5ab0ac908b15c36",
+         "resolved": "https://npm.pkg.github.com/download/@Kingsrook/qqq-frontend-core/1.0.40/014c8ecdbb873a39cb09aa2e4b3aa5edb4c54b04",
-         "integrity": "sha512-S9V5zhri30jvNTzMqlbeD2c+zeon+3j+JqM/wt/qsSPys4Pnp6kJDf86dF7QzeFsuzbXJDqVgcQ3AbDrTa0skA==",
+         "integrity": "sha512-m2I2jPCFgUp0HjNGyNkSsdRQCqDOmwoTo2fDEOSZKGLW8bIsMPZpUoqfhsP+dVHHS7EO+LNFCvySfTQNJzUkCQ==",
          "requires": {
             "axios": "0.27.2",
             "form-data": "4.0.0"
@@ -24538,6 +24672,12 @@
             "postcss-value-parser": "^4.2.0"
          }
       },
+      "available-typed-arrays": {
+         "version": "1.0.5",
+         "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+         "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+         "dev": true
+      },
       "aws-sign2": {
          "version": "0.7.0",
          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -25087,9 +25227,9 @@
          }
       },
       "caniuse-lite": {
-         "version": "1.0.30001441",
+         "version": "1.0.30001442",
-         "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz",
+         "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz",
-         "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg=="
+         "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow=="
       },
       "case-sensitive-paths-webpack-plugin": {
          "version": "2.4.0",
@@ -26417,27 +26557,32 @@
          }
       },
       "es-abstract": {
-         "version": "1.20.5",
+         "version": "1.21.0",
-         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.5.tgz",
+         "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.0.tgz",
-         "integrity": "sha512-7h8MM2EQhsCA7pU/Nv78qOXFpD8Rhqd12gYiSJVkrH9+e8VuA8JlPJK/hQjjlLv6pJvx/z1iRFKzYb0XT/RuAQ==",
+         "integrity": "sha512-GUGtW7eXQay0c+PRq0sGIKSdaBorfVqsCMhGHo4elP7YVqZu9nCZS4UkK4gv71gOWNMra/PaSKD3ao1oWExO0g==",
          "dev": true,
          "requires": {
             "call-bind": "^1.0.2",
+            "es-set-tostringtag": "^2.0.0",
             "es-to-primitive": "^1.2.1",
             "function-bind": "^1.1.1",
             "function.prototype.name": "^1.1.5",
             "get-intrinsic": "^1.1.3",
             "get-symbol-description": "^1.0.0",
+            "globalthis": "^1.0.3",
             "gopd": "^1.0.1",
             "has": "^1.0.3",
             "has-property-descriptors": "^1.0.0",
+            "has-proto": "^1.0.1",
             "has-symbols": "^1.0.3",
-            "internal-slot": "^1.0.3",
+            "internal-slot": "^1.0.4",
+            "is-array-buffer": "^3.0.0",
             "is-callable": "^1.2.7",
             "is-negative-zero": "^2.0.2",
             "is-regex": "^1.1.4",
             "is-shared-array-buffer": "^1.0.2",
             "is-string": "^1.0.7",
+            "is-typed-array": "^1.1.10",
             "is-weakref": "^1.0.2",
             "object-inspect": "^1.12.2",
             "object-keys": "^1.1.1",
@@ -26446,7 +26591,9 @@
             "safe-regex-test": "^1.0.0",
             "string.prototype.trimend": "^1.0.6",
             "string.prototype.trimstart": "^1.0.6",
-            "unbox-primitive": "^1.0.2"
+            "typed-array-length": "^1.0.4",
+            "unbox-primitive": "^1.0.2",
+            "which-typed-array": "^1.1.9"
          }
       },
       "es-cookie": {
@@ -26460,6 +26607,16 @@
          "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
          "dev": true
       },
+      "es-set-tostringtag": {
+         "version": "2.0.0",
+         "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.0.tgz",
+         "integrity": "sha512-vZVAIWss0FcR/+a08s6e2/GjGjjYBCZJXDrOnj6l5kJCKhQvJs4cnVqUxkVepIhqHbKHm3uwOvPb8lRcqA3DSg==",
+         "dev": true,
+         "requires": {
+            "get-intrinsic": "^1.1.3",
+            "has-tostringtag": "^1.0.0"
+         }
+      },
       "es-shim-unscopables": {
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -27570,6 +27727,15 @@
          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
          "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
       },
+      "for-each": {
+         "version": "0.3.3",
+         "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+         "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+         "dev": true,
+         "requires": {
+            "is-callable": "^1.1.3"
+         }
+      },
       "forever-agent": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -27966,6 +28132,15 @@
          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
       },
+      "globalthis": {
+         "version": "1.0.3",
+         "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+         "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+         "dev": true,
+         "requires": {
+            "define-properties": "^1.1.3"
+         }
+      },
       "globby": {
          "version": "11.1.0",
          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -28044,6 +28219,12 @@
             "get-intrinsic": "^1.1.1"
          }
       },
+      "has-proto": {
+         "version": "1.0.1",
+         "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+         "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+         "dev": true
+      },
       "has-symbols": {
          "version": "1.0.3",
          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -28447,6 +28628,16 @@
          "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
          "dev": true
       },
+      "is-array-buffer": {
+         "version": "3.0.0",
+         "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.0.tgz",
+         "integrity": "sha512-TI2hnvT6dPUnn/jARFCJBKL1eeabAfLnKZ2lmW5Uh317s1Ii2IMroL1yMciEk/G+OETykVzlsH6x/L4q/avhgw==",
+         "dev": true,
+         "requires": {
+            "call-bind": "^1.0.2",
+            "get-intrinsic": "^1.1.3"
+         }
+      },
       "is-arrayish": {
          "version": "0.2.1",
          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -28661,6 +28852,19 @@
             "has-symbols": "^1.0.2"
          }
       },
+      "is-typed-array": {
+         "version": "1.1.10",
+         "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+         "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+         "dev": true,
+         "requires": {
+            "available-typed-arrays": "^1.0.5",
+            "call-bind": "^1.0.2",
+            "for-each": "^0.3.3",
+            "gopd": "^1.0.1",
+            "has-tostringtag": "^1.0.0"
+         }
+      },
       "is-typedarray": {
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -34439,6 +34643,17 @@
             "mime-types": "~2.1.24"
          }
       },
+      "typed-array-length": {
+         "version": "1.0.4",
+         "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+         "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+         "dev": true,
+         "requires": {
+            "call-bind": "^1.0.2",
+            "for-each": "^0.3.3",
+            "is-typed-array": "^1.1.9"
+         }
+      },
       "typedarray-to-buffer": {
          "version": "3.1.5",
          "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -34982,6 +35197,20 @@
             "is-symbol": "^1.0.3"
          }
       },
+      "which-typed-array": {
+         "version": "1.1.9",
+         "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+         "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+         "dev": true,
+         "requires": {
+            "available-typed-arrays": "^1.0.5",
+            "call-bind": "^1.0.2",
+            "for-each": "^0.3.3",
+            "gopd": "^1.0.1",
+            "has-tostringtag": "^1.0.0",
+            "is-typed-array": "^1.1.10"
+         }
+      },
       "word-wrap": {
          "version": "1.2.3",
          "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -7,7 +7,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.39",
+      "@kingsrook/qqq-frontend-core": "1.0.40",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",

src/App.tsx

@@ -35,10 +35,10 @@ import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} f
 import {useCookies} from "react-cookie";
 import {Navigate, Route, Routes, useLocation,} from "react-router-dom";
 import {Md5} from "ts-md5/dist/md5";
-import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "qqq/context";
 import QContext from "QContext";
 import Sidenav from "qqq/components/horseshoe/sidenav/SideNav";
 import theme from "qqq/components/legacy/Theme";
+import {setMiniSidenav, setOpenConfigurator, useMaterialUIController} from "qqq/context";
 import AppHome from "qqq/pages/apps/Home";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import ReportRun from "qqq/pages/processes/ReportRun";
@@ -50,6 +50,7 @@ import RecordView from "qqq/pages/records/view/RecordView";
 import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
 
+
 const qController = Client.getInstance();
 export const SESSION_ID_COOKIE_NAME = "sessionId";
 LicenseInfo.setLicenseKey(process.env.REACT_APP_MATERIAL_UI_LICENSE_KEY);

src/index.tsx

@@ -26,9 +26,9 @@ import {render} from "react-dom";
 import {BrowserRouter, useNavigate, useSearchParams} from "react-router-dom";
 import App from "App";
 import "qqq/styles/qqq-override-styles.css";
-import {MaterialUIControllerProvider} from "qqq/context";
 import HandleAuthorizationError from "HandleAuthorizationError";
 import ProtectedRoute from "qqq/authorization/auth0/ProtectedRoute";
+import {MaterialUIControllerProvider} from "qqq/context";
 import Client from "qqq/utils/qqq/Client";
 
 const qController = Client.getInstance();

src/qqq/components/horseshoe/sidenav/SideNav.tsx

@@ -26,7 +26,6 @@ import Link from "@mui/material/Link";
 import List from "@mui/material/List";
 import {ReactNode, useEffect, useReducer, useState} from "react";
 import {NavLink, useLocation} from "react-router-dom";
-import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "qqq/context";
 import AuthenticationButton from "qqq/components/buttons/AuthenticationButton";
 import SideNavCollapse from "qqq/components/horseshoe/sidenav/SideNavCollapse";
 import SideNavItem from "qqq/components/horseshoe/sidenav/SideNavItem";
@@ -34,6 +33,7 @@ import SideNavList from "qqq/components/horseshoe/sidenav/SideNavList";
 import SidenavRoot from "qqq/components/horseshoe/sidenav/SideNavRoot";
 import sidenavLogoLabel from "qqq/components/horseshoe/sidenav/styles/SideNav";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import {setMiniSidenav, setTransparentSidenav, setWhiteSidenav, useMaterialUIController,} from "qqq/context";
 
 
 interface Props

src/qqq/components/horseshoe/sidenav/SideNavItem.tsx

@@ -26,8 +26,8 @@ import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import {Theme} from "@mui/material/styles";
 import {ReactNode} from "react";
-import {useMaterialUIController} from "qqq/context";
 import {item, itemArrow, itemContent} from "qqq/components/horseshoe/sidenav/styles/SideNavItem";
+import {useMaterialUIController} from "qqq/context";
 
 // Declaring props types for SideNavCollapse
 interface Props {

src/qqq/components/legacy/MDTypography/index.tsx

@@ -21,8 +21,8 @@
 
 import {TypographyProps} from "@mui/material";
 import {FC, forwardRef, ReactNode} from "react";
-import {useMaterialUIController} from "qqq/context";
 import MDTypographyRoot from "qqq/components/legacy/MDTypography/MDTypographyRoot";
+import {useMaterialUIController} from "qqq/context";
 
 // Declaring props types for MDTypography
 interface Props extends TypographyProps

src/qqq/components/processes/ProcessSummaryResults.tsx

@@ -88,8 +88,8 @@ function ProcessSummaryResults({
          <Grid container>
             <Grid item xs={0} lg={2} />
             <Grid item xs={12} lg={8}>
-               <Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="lg" p={2} mt={2}>
+               <Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="10px" p={2} mt={2}>
-                  <Box mt={-5} p={1} sx={{width: "fit-content", backgroundColor: "success"}} borderRadius=".25em" width="initial" color="white">
+                  <Box mx={2} mt={-5} p={1} sx={{width: "fit-content", borderRadius: ".25em", backgroundColor: "rgb(76, 175, 80)"}} width="initial" color="#FFFFFF">
                      <Box display="flex" alignItems="center" color="white">
                         {process.iconName && <Icon fontSize="medium" sx={{mr: 1}}>{process.iconName}</Icon>}
                         Process Summary

src/qqq/components/processes/ValidationReview.tsx

@@ -24,7 +24,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup} from "@mui/material";
+import {Box, Button, FormControlLabel, ListItem, Radio, RadioGroup, Typography} from "@mui/material";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
@@ -192,9 +192,9 @@ function ValidationReview({
    );
 
    const recordPreviewWidget = step.recordListFields && (
-      <Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="lg" p={2} mt={2}>
+      <Box border="1px solid rgb(70%, 70%, 70%)" borderRadius="10px" p={2} mt={2}>
-         <Box mx={2} mt={-5} p={1} sx={{width: "fit-content", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "white"}} borderColor="orange" width="initial" color="white">
+         <Box mx={2} mt={-5} p={1} sx={{width: "fit-content", borderColor: "rgb(70%, 70%, 70%)", borderWidth: "2px", borderStyle: "solid", borderRadius: ".25em", backgroundColor: "#FFFFFF"}} width="initial" color="white">
-            <MDTypography sx={{color: "warning"}}>Preview</MDTypography>
+            <Typography>Preview</Typography>
          </Box>
          <Box p={3} pb={0}>
             <MDTypography color="body" variant="body2" component="div" mb={2}>

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -27,6 +27,7 @@ import Grid from "@mui/material/Grid";
 import parse from "html-react-parser";
 import React, {useEffect, useReducer, useState} from "react";
 import {useLocation} from "react-router-dom";
+import colors from "qqq/assets/theme/base/colors";
 import MDBadgeDot from "qqq/components/legacy/MDBadgeDot";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
@@ -48,7 +49,6 @@ import TableCard from "qqq/components/widgets/tables/TableCard";
 import Widget from "qqq/components/widgets/Widget";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
-import colors from "qqq/assets/theme/base/colors";
 
 
 const qController = Client.getInstance();

src/qqq/components/widgets/charts/linechart/SmallLineChart.tsx

@@ -24,9 +24,9 @@ import Card from "@mui/material/Card";
 import parse from "html-react-parser";
 import {useMemo} from "react";
 import {Line} from "react-chartjs-2";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import configs from "qqq/components/widgets/charts/linechart/LineChartConfigs";
-import colors from "qqq/assets/theme/base/colors";
 
 //////////////////////////////////////////
 // structure of expected bar chart data //

src/qqq/components/widgets/statistics/MiniStatisticsCard.tsx

@@ -24,8 +24,9 @@ import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Icon from "@mui/material/Icon";
 import {ReactNode} from "react";
-import {useMaterialUIController} from "qqq/context";
+import colors from "qqq/assets/theme/base/colors";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import {useMaterialUIController} from "qqq/context";
 
 
 // Decalaring props types for MiniStatisticsCard
@@ -70,24 +71,6 @@ function MiniStatisticsCard({
          >
             <Box p={2}>
                <Grid container alignItems="center">
-                  {direction === "left" ? (
-                     <Grid item xs={4}>
-                        <Box
-                           color={bgColor === "white" ? "white" : "dark"}
-                           width="4rem"
-                           height="4rem"
-                           borderRadius="md"
-                           display="flex"
-                           justifyContent="center"
-                           alignItems="center"
-                           sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
-                        >
-                           <Icon fontSize="medium" color="inherit">
-                              {icon.component}
-                           </Icon>
-                        </Box>
-                     </Grid>
-                  ) : null}
                   <Grid item xs={8}>
                      <Box
                         ml={direction === "left" ? 2 : 0}
@@ -115,25 +98,23 @@ function MiniStatisticsCard({
                         </MDTypography>
                      </Box>
                   </Grid>
-                  {direction === "right" ? (
+                  <Grid item xs={4}>
-                     <Grid item xs={4}>
+                     <Box
-                        <Box
+                        width="4rem"
-                           color={bgColor === "white" ? "white" : "dark"}
+                        height="4rem"
-                           width="4rem"
+                        marginLeft="auto"
-                           height="4rem"
+                        borderRadius="md"
-                           marginLeft="auto"
+                        display="flex"
-                           borderRadius="md"
+                        justifyContent="center"
-                           display="flex"
+                        alignItems="center"
-                           justifyContent="center"
+                        color="#FFFFFF"
-                           alignItems="center"
+                        sx={{borderRadius: "10px", backgroundColor: colors.info.main}}
-                           sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
+                     >
-                        >
+                        <Icon fontSize="medium" color="inherit">
-                           <Icon fontSize="medium" color="inherit">
+                           {icon.component}
-                              {icon.component}
+                        </Icon>
-                           </Icon>
+                     </Box>
-                        </Box>
+                  </Grid>
-                     </Grid>
-                  ) : null}
                </Grid>
             </Box>
          </Box>

src/qqq/pages/apps/Home.tsx

@@ -300,7 +300,6 @@ function AppHome({app}: Props): JSX.Element
                                                                count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
                                                                percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
                                                                icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
-                                                               direction="right"
                                                             />
                                                          </Box>
                                                       </Link>

src/qqq/pages/processes/ProcessRun.tsx

@@ -46,7 +46,6 @@ import Typography from "@mui/material/Typography";
 import {DataGridPro, GridColDef} from "@mui/x-data-grid-pro";
 import FormData from "form-data";
 import {Form, Formik} from "formik";
-import MDTypography from "qqq/components/legacy/MDTypography";
 import React, {useContext, useEffect, useState} from "react";
 import {useLocation, useNavigate, useParams} from "react-router-dom";
 import * as Yup from "yup";
@@ -56,6 +55,7 @@ import QDynamicForm from "qqq/components/forms/DynamicForm";
 import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
 import MDButton from "qqq/components/legacy/MDButton";
 import MDProgress from "qqq/components/legacy/MDProgress";
+import MDTypography from "qqq/components/legacy/MDTypography";
 import QRecordSidebar from "qqq/components/misc/RecordSidebar";
 import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
 import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";

src/qqq/pages/records/view/RecordView.tsx

@@ -344,10 +344,10 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                      {
                         section.fieldNames.map((fieldName: string) => (
                            <Box  key={fieldName} flexDirection="row" pr={2}>
-                              <Typography variant="button" fontWeight="bold" pr={1}>
+                              <Typography variant="button" textTransform="none" fontWeight="bold" pr={1}>
                                  {tableMetaData.fields.get(fieldName).label}:
                               </Typography>
-                              <Typography variant="button" fontWeight="regular" color="text">
+                              <Typography variant="button" textTransform="none" fontWeight="regular" color="text">
                                  {ValueUtils.getDisplayValue(tableMetaData.fields.get(fieldName), record, "view")}
                               </Typography>
                            </Box>