From 36d2e936b6bac7a9f0886e1f89444c53d6986abd Mon Sep 17 00:00:00 2001 From: Heath C <51679588+heath-freenome@users.noreply.github.com> Date: Tue, 10 Sep 2024 10:57:58 -0700 Subject: [PATCH] Fix 4283 by adding support for MUI v6 (#4294) * Fix 4285 by adding support for MUI v6 - Updated `@rjsf/mui` to update the dev dependencies for `@mui/*` to v6 and the peer dependencies to add MUI v6 - Updated the playground to update `@mui/*` to v6 - Also changed the dropdown name from `material-ui-5` to `mui` and switched `Layout` to use the `PropsWithChildren` for its props - Updated the `Form.test.tsx` to add information to the fake node to allow the tests to work with v6 - Ran `npm run test:update` to update the snapshots due to the v6 and emotion upgrades - Updated the test snapshots for `@rjsf/chakra-ui` which also uses emotion - Updated `CHANGELOG.md` accordingly, bumping to `5.21.0` * - Fixed the load of shared links to convert `material-ui-5` to `mui` --- CHANGELOG.md | 15 +- package-lock.json | 310 +- .../test/__snapshots__/Array.test.tsx.snap | 235 +- .../test/__snapshots__/Form.test.tsx.snap | 277 +- .../test/__snapshots__/Object.test.tsx.snap | 96 - packages/mui/package.json | 8 +- packages/mui/test/Form.test.tsx | 8 +- .../test/__snapshots__/Array.test.tsx.snap | 3123 +++++++-------- .../mui/test/__snapshots__/Form.test.tsx.snap | 3506 +++++++---------- .../test/__snapshots__/Object.test.tsx.snap | 2750 +++++-------- packages/playground/package.json | 4 +- packages/playground/src/app.tsx | 2 +- .../playground/src/components/DemoFrame.tsx | 2 +- .../playground/src/components/Playground.tsx | 6 +- packages/playground/src/layout/Layout.tsx | 6 +- 15 files changed, 4127 insertions(+), 6221 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 056c24867a..0bbb891675 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,15 @@ should change the heading of the (upcoming) version to include a major version b --> -# 5.20.2 +# 5.21.0 + +## @rjsf/core + +- Updated `Form` to fix `focusOnError()` to support the ids that include dots, fixing [#4279](https://github.com/rjsf-team/react-jsonschema-form/issues/4279) + +## @rjsf/mui + +- Updated the peer dependencies for `@mui/material` and `@mui/icon-material`, fixing [4283](https://github.com/rjsf-team/react-jsonschema-form/issues/4283) ## @rjsf/utils @@ -24,11 +32,14 @@ should change the heading of the (upcoming) version to include a major version b - Updated `deepEquals()` to use `fast-equals.createCustomEqual()` instead of `lodash.isEqualWith()`, fixing [#4291](https://github.com/rjsf-team/react-jsonschema-form/issues/4291) - Switched uses of `lodash.isEqual()` to `deepEquals()` in many of the utility functions as well - ## @validator-ajv8 - Use `@rjsf/utils` `deepEquals()` instead of `lodash.isEqual()` to improve performance, fixing [#4291](https://github.com/rjsf-team/react-jsonschema-form/issues/4291) +## Dev / docs / playground + +- Updated the playground to use `@mui/*` version 6, changing the name of the dropdown from `material-ui-5` to `mui` + # 5.20.1 ## Dev / docs / playground diff --git a/package-lock.json b/package-lock.json index cbcd0f090c..e81951e308 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2293,9 +2293,9 @@ "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==" }, "node_modules/@babel/runtime": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", - "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", + "version": "7.25.6", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.6.tgz", + "integrity": "sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -3972,17 +3972,27 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" }, "node_modules/@emotion/cache": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", - "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", - "dependencies": { - "@emotion/memoize": "^0.8.1", - "@emotion/sheet": "^1.2.2", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "version": "11.13.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", + "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } }, + "node_modules/@emotion/cache/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==" + }, + "node_modules/@emotion/cache/node_modules/@emotion/weak-memoize": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==" + }, "node_modules/@emotion/css-prettifier": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@emotion/css-prettifier/-/css-prettifier-1.1.3.tgz", @@ -4085,9 +4095,9 @@ } }, "node_modules/@emotion/sheet": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", - "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==" }, "node_modules/@emotion/styled": { "version": "11.11.0", @@ -4126,9 +4136,9 @@ } }, "node_modules/@emotion/utils": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", - "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.0.tgz", + "integrity": "sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==" }, "node_modules/@emotion/weak-memoize": { "version": "0.3.1", @@ -7798,33 +7808,33 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.7", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.7.tgz", - "integrity": "sha512-AuF+Wo2Mp/edaO6vJnWjg+gj4tzEz5ChMZnAQpc22DXpSvM8ddgGcZvM7D7F99pIBoSv8ub+Iz0viL+yuGVmhg==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz", + "integrity": "sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "5.15.2", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.2.tgz", - "integrity": "sha512-Vs0Z6cd6ieTavMjqPvIJJfwsKaCLdRSErk5LjKdZlBqk7r2SR6roDyhVTQuZOeCzjEFj0qZ4iVPp2DJZRwuYbw==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.0.2.tgz", + "integrity": "sha512-WaTPSvKcx8X7NdWAHzJWDZv+YXvK0MUY8+JI/r4/q2GgIa5RW+n4+08CGX6jB7sWhU1R3zy28NfsDUwwQjOThw==", "dev": true, "dependencies": { - "@babel/runtime": "^7.23.6" + "@babel/runtime": "^7.25.0" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@mui/material": "^5.0.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@mui/material": "^6.0.2", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -7833,25 +7843,25 @@ } }, "node_modules/@mui/material": { - "version": "5.15.2", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.2.tgz", - "integrity": "sha512-JnoIrpNmEHG5uC1IyEdgsnDiaiuCZnUIh7f9oeAr87AvBmNiEJPbo7XrD7kBTFWwp+b97rQ12QdSs9CLhT2n/A==", - "dependencies": { - "@babel/runtime": "^7.23.6", - "@mui/base": "5.0.0-beta.29", - "@mui/core-downloads-tracker": "^5.15.2", - "@mui/system": "^5.15.2", - "@mui/types": "^7.2.11", - "@mui/utils": "^5.15.2", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.0.0", - "csstype": "^3.1.2", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.2.tgz", + "integrity": "sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==", + "dependencies": { + "@babel/runtime": "^7.25.0", + "@mui/core-downloads-tracker": "^6.0.2", + "@mui/system": "^6.0.2", + "@mui/types": "^7.2.16", + "@mui/utils": "^6.0.2", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.11", + "clsx": "^2.1.1", + "csstype": "^3.1.3", "prop-types": "^15.8.1", - "react-is": "^18.2.0", + "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -7860,9 +7870,10 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material-pigment-css": "^6.0.2", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -7871,35 +7882,36 @@ "@emotion/styled": { "optional": true }, + "@mui/material-pigment-css": { + "optional": true + }, "@types/react": { "optional": true } } }, - "node_modules/@mui/material/node_modules/@mui/base": { - "version": "5.0.0-beta.29", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.29.tgz", - "integrity": "sha512-OXfUssYrB6ch/xpBVHMKAjThPlI9VyGGKdvQLMXef2j39wXfcxPlUVQlwia/lmE3rxWIGvbwkZsDtNYzLMsDUg==", + "node_modules/@mui/material/node_modules/@mui/utils": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz", + "integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==", "dependencies": { - "@babel/runtime": "^7.23.6", - "@floating-ui/react-dom": "^2.0.4", - "@mui/types": "^7.2.11", - "@mui/utils": "^5.15.2", - "@popperjs/core": "^2.11.8", - "clsx": "^2.0.0", - "prop-types": "^15.8.1" + "@babel/runtime": "^7.25.0", + "@mui/types": "^7.2.16", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -7908,32 +7920,32 @@ } }, "node_modules/@mui/material/node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "engines": { "node": ">=6" } }, "node_modules/@mui/private-theming": { - "version": "5.15.7", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.7.tgz", - "integrity": "sha512-bcEeeXm7GyQCQvN9dwo8htGv8/6tP05p0i02Z7GXm5EoDPlBcqTNGugsjNLoGq6B0SsdyanjJGw0Jw00o1yAOA==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.2.tgz", + "integrity": "sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==", "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.15.7", + "@babel/runtime": "^7.25.0", + "@mui/utils": "^6.0.2", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -7941,18 +7953,55 @@ } } }, + "node_modules/@mui/private-theming/node_modules/@mui/utils": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz", + "integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==", + "dependencies": { + "@babel/runtime": "^7.25.0", + "@mui/types": "^7.2.16", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/private-theming/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/@mui/styled-engine": { - "version": "5.15.7", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.7.tgz", - "integrity": "sha512-ixSdslOjK1kzdGcxqj7O3d14By/LPQ7EWknsViQ8RaeT863EAQemS+zvUJDTcOpkfJh6q6gPnYMIb2TJCs9eWA==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.2.tgz", + "integrity": "sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==", "dependencies": { - "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.11.0", - "csstype": "^3.1.2", + "@babel/runtime": "^7.25.0", + "@emotion/cache": "^11.13.1", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -7961,7 +8010,7 @@ "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -7973,21 +8022,21 @@ } }, "node_modules/@mui/system": { - "version": "5.15.7", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.7.tgz", - "integrity": "sha512-9alZ4/dLxsTwUOdqakgzxiL5YW6ntqj0CfzWImgWnBMTZhgGcPsbYpBLniNkkk7/jptma4/bykWXHwju/ls/pg==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.15.7", - "@mui/styled-engine": "^5.15.7", - "@mui/types": "^7.2.13", - "@mui/utils": "^5.15.7", - "clsx": "^2.1.0", - "csstype": "^3.1.2", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.2.tgz", + "integrity": "sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==", + "dependencies": { + "@babel/runtime": "^7.25.0", + "@mui/private-theming": "^6.0.2", + "@mui/styled-engine": "^6.0.2", + "@mui/types": "^7.2.16", + "@mui/utils": "^6.0.2", + "clsx": "^2.1.1", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -7996,8 +8045,8 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -8011,20 +8060,49 @@ } } }, + "node_modules/@mui/system/node_modules/@mui/utils": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz", + "integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==", + "dependencies": { + "@babel/runtime": "^7.25.0", + "@mui/types": "^7.2.16", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/system/node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "engines": { "node": ">=6" } }, "node_modules/@mui/types": { - "version": "7.2.13", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.13.tgz", - "integrity": "sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g==", + "version": "7.2.16", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz", + "integrity": "sha512-qI8TV3M7ShITEEc8Ih15A2vLzZGLhD+/UPNwck/hcls2gwg7dyRjNGXcQYHKLB5Q7PuTRfrTkAoPa2VV1s67Ag==", "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -10676,9 +10754,9 @@ "dev": true }, "node_modules/@types/prop-types": { - "version": "15.7.11", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/qs": { "version": "6.9.11", @@ -10766,9 +10844,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.10", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", - "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", "dependencies": { "@types/react": "*" } @@ -27922,9 +28000,9 @@ } }, "node_modules/react-is": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, "node_modules/react-json-view": { "version": "1.21.3", @@ -34941,8 +35019,8 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/base": "5.0.0-beta.28", - "@mui/icons-material": "5.15.2", - "@mui/material": "5.15.2", + "@mui/icons-material": "6.0.2", + "@mui/material": "6.0.2", "@rjsf/core": "^5.20.1", "@rjsf/snapshot-tests": "^5.20.1", "@rjsf/utils": "^5.20.1", @@ -34969,8 +35047,8 @@ "peerDependencies": { "@emotion/react": "^11.7.0", "@emotion/styled": "^11.6.0", - "@mui/icons-material": "^5.2.0", - "@mui/material": "^5.2.2", + "@mui/icons-material": "^5.2.0 || ^6.0.0", + "@mui/material": "^5.2.2 || ^6.0.0", "@rjsf/core": "^5.20.x", "@rjsf/utils": "^5.20.x", "react": ">=17" @@ -34988,7 +35066,7 @@ "@fluentui/react": "^8.115.3", "@material-ui/core": "^4.12.4", "@mui/base": "5.0.0-beta.28", - "@mui/material": "5.15.2", + "@mui/material": "6.0.2", "@rjsf/antd": "^5.20.1", "@rjsf/bootstrap-4": "^5.20.1", "@rjsf/chakra-ui": "^5.20.1", @@ -35039,7 +35117,7 @@ "@emotion/styled": "^11.11.0", "@material-ui/icons": "^4.11.3", "@monaco-editor/react": "^4.6.0", - "@mui/icons-material": "5.15.2", + "@mui/icons-material": "6.0.2", "@types/jest": "^29.5.12", "@types/lodash": "^4.14.202", "@types/node": "^20.11.20", diff --git a/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap index d34be03ff6..ae72c34233 100644 --- a/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap +++ b/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap @@ -14,9 +14,6 @@ exports[`array fields array 1`] = ` } .emotion-6 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -43,9 +40,6 @@ exports[`array fields array 1`] = ` } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -149,9 +143,6 @@ exports[`array fields array icons 1`] = ` } .emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -182,9 +173,6 @@ exports[`array fields array icons 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 1px; } @@ -204,9 +192,6 @@ exports[`array fields array icons 1`] = ` } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -259,9 +244,6 @@ exports[`array fields array icons 1`] = ` } .emotion-36 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -288,9 +270,6 @@ exports[`array fields array icons 1`] = ` } .emotion-37 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -661,9 +640,6 @@ exports[`array fields checkboxes 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -672,9 +648,6 @@ exports[`array fields checkboxes 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -752,9 +725,6 @@ exports[`array fields checkboxes 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -776,9 +746,6 @@ exports[`array fields checkboxes 1`] = ` } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -812,9 +779,6 @@ exports[`array fields checkboxes 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -982,9 +946,6 @@ exports[`array fields empty errors array 1`] = ` } .emotion-8 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1089,9 +1050,6 @@ exports[`array fields fixed array 1`] = ` } .emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -1126,9 +1084,6 @@ exports[`array fields fixed array 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1276,9 +1231,6 @@ exports[`array fields fixed array 1`] = ` exports[`array fields has errors 1`] = ` .emotion-0 { width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -webkit-box-align: flex-start; @@ -1297,15 +1249,6 @@ exports[`array fields has errors 1`] = ` } .emotion-4 { - width: 1em; - height: 1em; - display: inline-block; - line-height: 1em; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: currentColor; - vertical-align: middle; width: 1em; height: 1em; display: inline-block; @@ -1314,6 +1257,7 @@ exports[`array fields has errors 1`] = ` -ms-flex-negative: 0; flex-shrink: 0; color: red.500; + vertical-align: middle; } .emotion-6 { @@ -1332,9 +1276,6 @@ exports[`array fields has errors 1`] = ` } .emotion-14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -1347,9 +1288,6 @@ exports[`array fields has errors 1`] = ` } .emotion-16 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1518,9 +1456,6 @@ exports[`array fields no errors 1`] = ` } .emotion-8 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1648,9 +1583,6 @@ exports[`with title and description array 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1677,9 +1609,6 @@ exports[`with title and description array 1`] = ` } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -1818,9 +1747,6 @@ exports[`with title and description array icons 1`] = ` } .emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -1860,9 +1786,6 @@ exports[`with title and description array icons 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 1px; } @@ -1882,9 +1805,6 @@ exports[`with title and description array icons 1`] = ` } .emotion-19 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1933,9 +1853,6 @@ exports[`with title and description array icons 1`] = ` } .emotion-48 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1962,9 +1879,6 @@ exports[`with title and description array icons 1`] = ` } .emotion-49 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -2408,9 +2322,6 @@ exports[`with title and description checkboxes 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -2419,9 +2330,6 @@ exports[`with title and description checkboxes 1`] = ` } .emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2499,9 +2407,6 @@ exports[`with title and description checkboxes 1`] = ` } .emotion-11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2523,9 +2428,6 @@ exports[`with title and description checkboxes 1`] = ` } .emotion-13 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2567,9 +2469,6 @@ exports[`with title and description checkboxes 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2754,9 +2653,6 @@ exports[`with title and description fixed array 1`] = ` } .emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -2800,9 +2696,6 @@ exports[`with title and description fixed array 1`] = ` } .emotion-27 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3044,9 +2937,6 @@ exports[`with title and description from both array 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3073,9 +2963,6 @@ exports[`with title and description from both array 1`] = ` } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -3214,9 +3101,6 @@ exports[`with title and description from both array icons 1`] = ` } .emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -3256,9 +3140,6 @@ exports[`with title and description from both array icons 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 1px; } @@ -3278,9 +3159,6 @@ exports[`with title and description from both array icons 1`] = ` } .emotion-19 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3329,9 +3207,6 @@ exports[`with title and description from both array icons 1`] = ` } .emotion-48 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3358,9 +3233,6 @@ exports[`with title and description from both array icons 1`] = ` } .emotion-49 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -3804,9 +3676,6 @@ exports[`with title and description from both checkboxes 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -3815,9 +3684,6 @@ exports[`with title and description from both checkboxes 1`] = ` } .emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3895,9 +3761,6 @@ exports[`with title and description from both checkboxes 1`] = ` } .emotion-11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3919,9 +3782,6 @@ exports[`with title and description from both checkboxes 1`] = ` } .emotion-13 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3963,9 +3823,6 @@ exports[`with title and description from both checkboxes 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4150,9 +4007,6 @@ exports[`with title and description from both fixed array 1`] = ` } .emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -4196,9 +4050,6 @@ exports[`with title and description from both fixed array 1`] = ` } .emotion-27 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4440,9 +4291,6 @@ exports[`with title and description from uiSchema array 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4469,9 +4317,6 @@ exports[`with title and description from uiSchema array 1`] = ` } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -4610,9 +4455,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` } .emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -4652,9 +4494,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 1px; } @@ -4674,9 +4513,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` } .emotion-19 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4725,9 +4561,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` } .emotion-48 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4754,9 +4587,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` } .emotion-49 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -5200,9 +5030,6 @@ exports[`with title and description from uiSchema checkboxes 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -5211,9 +5038,6 @@ exports[`with title and description from uiSchema checkboxes 1`] = ` } .emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5291,9 +5115,6 @@ exports[`with title and description from uiSchema checkboxes 1`] = ` } .emotion-11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5315,9 +5136,6 @@ exports[`with title and description from uiSchema checkboxes 1`] = ` } .emotion-13 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5359,9 +5177,6 @@ exports[`with title and description from uiSchema checkboxes 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5546,9 +5361,6 @@ exports[`with title and description from uiSchema fixed array 1`] = ` } .emotion-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -5592,9 +5404,6 @@ exports[`with title and description from uiSchema fixed array 1`] = ` } .emotion-27 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5821,9 +5630,6 @@ exports[`with title and description with global label off array 1`] = ` } .emotion-6 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5850,9 +5656,6 @@ exports[`with title and description with global label off array 1`] = ` } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -5956,9 +5759,6 @@ exports[`with title and description with global label off array icons 1`] = ` } .emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -5989,9 +5789,6 @@ exports[`with title and description with global label off array icons 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; margin-bottom: 1px; } @@ -6011,9 +5808,6 @@ exports[`with title and description with global label off array icons 1`] = ` } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -6066,9 +5860,6 @@ exports[`with title and description with global label off array icons 1`] = ` } .emotion-36 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -6095,9 +5886,6 @@ exports[`with title and description with global label off array icons 1`] = ` } .emotion-37 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -6473,9 +6261,6 @@ exports[`with title and description with global label off checkboxes 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -6484,9 +6269,6 @@ exports[`with title and description with global label off checkboxes 1`] = ` } .emotion-7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -6564,9 +6346,6 @@ exports[`with title and description with global label off checkboxes 1`] = ` } .emotion-11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -6588,9 +6367,6 @@ exports[`with title and description with global label off checkboxes 1`] = ` } .emotion-13 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -6632,9 +6408,6 @@ exports[`with title and description with global label off checkboxes 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -6804,9 +6577,6 @@ exports[`with title and description with global label off fixed array 1`] = ` } .emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -webkit-box-align: flex-end; @@ -6841,9 +6611,6 @@ exports[`with title and description with global label off fixed array 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; diff --git a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap index 1143159d73..74d50e7100 100644 --- a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap +++ b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap @@ -7,9 +7,6 @@ exports[`single fields checkbox field 1`] = ` .emotion-2 { cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -20,9 +17,6 @@ exports[`single fields checkbox field 1`] = ` } .emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -47,9 +41,6 @@ exports[`single fields checkbox field 1`] = ` } .emotion-5 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -159,9 +150,6 @@ exports[`single fields checkbox field with label 1`] = ` .emotion-2 { cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -172,9 +160,6 @@ exports[`single fields checkbox field with label 1`] = ` } .emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -204,9 +189,6 @@ exports[`single fields checkbox field with label 1`] = ` } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -331,9 +313,6 @@ exports[`single fields checkboxes field 1`] = ` } .emotion-3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -351,9 +330,6 @@ exports[`single fields checkboxes field 1`] = ` .emotion-4 { cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -364,9 +340,6 @@ exports[`single fields checkboxes field 1`] = ` } .emotion-5 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -396,9 +369,6 @@ exports[`single fields checkboxes field 1`] = ` } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -717,9 +687,6 @@ exports[`single fields field with description 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -857,9 +824,6 @@ exports[`single fields field with description in uiSchema 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -978,9 +942,6 @@ exports[`single fields format color 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1065,9 +1026,6 @@ exports[`single fields format date 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1152,9 +1110,6 @@ exports[`single fields format datetime 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1239,9 +1194,6 @@ exports[`single fields format time 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1319,9 +1271,6 @@ exports[`single fields format time 1`] = ` exports[`single fields help and error display 1`] = ` .emotion-0 { width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -webkit-box-align: flex-start; @@ -1340,15 +1289,6 @@ exports[`single fields help and error display 1`] = ` } .emotion-4 { - width: 1em; - height: 1em; - display: inline-block; - line-height: 1em; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: currentColor; - vertical-align: middle; width: 1em; height: 1em; display: inline-block; @@ -1357,6 +1297,7 @@ exports[`single fields help and error display 1`] = ` -ms-flex-negative: 0; flex-shrink: 0; color: red.500; + vertical-align: middle; } .emotion-6 { @@ -1364,9 +1305,6 @@ exports[`single fields help and error display 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -1379,9 +1317,6 @@ exports[`single fields help and error display 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1522,9 +1457,6 @@ exports[`single fields hidden field 1`] = ` } .emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1606,9 +1538,6 @@ exports[`single fields hidden label 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1689,9 +1618,6 @@ exports[`single fields null field 1`] = ` } .emotion-2 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1754,9 +1680,6 @@ exports[`single fields number field 0 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1842,9 +1765,6 @@ exports[`single fields number field 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1930,9 +1850,6 @@ exports[`single fields password field 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2013,9 +1930,6 @@ exports[`single fields radio field 1`] = ` } .emotion-3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -2032,9 +1946,6 @@ exports[`single fields radio field 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2045,9 +1956,6 @@ exports[`single fields radio field 1`] = ` } .emotion-5 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2076,9 +1984,6 @@ exports[`single fields radio field 1`] = ` } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2257,9 +2162,6 @@ exports[`single fields schema examples 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2376,9 +2278,6 @@ exports[`single fields select field 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -2387,9 +2286,6 @@ exports[`single fields select field 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2466,9 +2362,6 @@ exports[`single fields select field 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2490,9 +2383,6 @@ exports[`single fields select field 1`] = ` } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2526,9 +2416,6 @@ exports[`single fields select field 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2690,9 +2577,6 @@ exports[`single fields select field multiple choice 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -2701,9 +2585,6 @@ exports[`single fields select field multiple choice 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2781,9 +2662,6 @@ exports[`single fields select field multiple choice 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2805,9 +2683,6 @@ exports[`single fields select field multiple choice 1`] = ` } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2841,9 +2716,6 @@ exports[`single fields select field multiple choice 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3012,9 +2884,6 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -3023,9 +2892,6 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3103,9 +2969,6 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3127,9 +2990,6 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3163,9 +3023,6 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3318,9 +3175,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -3338,9 +3192,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe .emotion-3 { cursor: pointer; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3351,9 +3202,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3383,9 +3231,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe } .emotion-20 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3693,9 +3538,6 @@ exports[`single fields select field multiple choice formData 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -3704,9 +3546,6 @@ exports[`single fields select field multiple choice formData 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3726,9 +3565,6 @@ exports[`single fields select field multiple choice formData 1`] = ` } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; vertical-align: top; -webkit-align-items: center; @@ -3740,9 +3576,6 @@ exports[`single fields select field multiple choice formData 1`] = ` } .emotion-9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3807,9 +3640,6 @@ exports[`single fields select field multiple choice formData 1`] = ` } .emotion-17 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3828,9 +3658,6 @@ exports[`single fields select field multiple choice formData 1`] = ` margin-inline-start: 1px; -webkit-margin-end: 1px; margin-inline-end: 1px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3866,9 +3693,6 @@ exports[`single fields select field multiple choice formData 1`] = ` } .emotion-21 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3890,9 +3714,6 @@ exports[`single fields select field multiple choice formData 1`] = ` } .emotion-24 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4135,9 +3956,6 @@ exports[`single fields select field multiple choice with labels 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -4146,9 +3964,6 @@ exports[`single fields select field multiple choice with labels 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4226,9 +4041,6 @@ exports[`single fields select field multiple choice with labels 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4250,9 +4062,6 @@ exports[`single fields select field multiple choice with labels 1`] = ` } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4286,9 +4095,6 @@ exports[`single fields select field multiple choice with labels 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4457,9 +4263,6 @@ exports[`single fields select field single choice enumDisabled 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -4468,9 +4271,6 @@ exports[`single fields select field single choice enumDisabled 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4547,9 +4347,6 @@ exports[`single fields select field single choice enumDisabled 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4571,9 +4368,6 @@ exports[`single fields select field single choice enumDisabled 1`] = ` } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4607,9 +4401,6 @@ exports[`single fields select field single choice enumDisabled 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -4755,9 +4546,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -4774,9 +4562,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4787,9 +4572,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-5 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4818,9 +4600,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5011,9 +4790,6 @@ exports[`single fields select field single choice formData 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; padding: 0px; overflow: hidden; @@ -5022,9 +4798,6 @@ exports[`single fields select field single choice formData 1`] = ` } .emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5101,9 +4874,6 @@ exports[`single fields select field single choice formData 1`] = ` } .emotion-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5125,9 +4895,6 @@ exports[`single fields select field single choice formData 1`] = ` } .emotion-12 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5161,9 +4928,6 @@ exports[`single fields select field single choice formData 1`] = ` } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5315,9 +5079,6 @@ exports[`single fields slider field 1`] = ` } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5460,9 +5221,6 @@ exports[`single fields string field format data-url 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5549,9 +5307,6 @@ exports[`single fields string field format email 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5636,9 +5391,6 @@ exports[`single fields string field format uri 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5723,9 +5475,6 @@ exports[`single fields string field regular 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5810,9 +5559,6 @@ exports[`single fields string field with placeholder 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -5897,9 +5643,6 @@ exports[`single fields textarea field 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -6005,9 +5748,6 @@ exports[`single fields title field 1`] = ` } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -6126,9 +5866,6 @@ exports[`single fields unsupported field 1`] = ` } .emotion-2 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -6217,9 +5954,6 @@ exports[`single fields up/down field 1`] = ` } .emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -6233,9 +5967,6 @@ exports[`single fields up/down field 1`] = ` } .emotion-5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; @@ -6275,9 +6006,6 @@ exports[`single fields up/down field 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -6420,9 +6148,6 @@ exports[`single fields using custom tagName 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; diff --git a/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap index d2172d52ba..20cd5fada4 100644 --- a/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap +++ b/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap @@ -26,9 +26,6 @@ exports[`object fields additionalProperties 1`] = ` } .emotion-14 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -72,9 +69,6 @@ exports[`object fields additionalProperties 1`] = ` } .emotion-17 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -101,9 +95,6 @@ exports[`object fields additionalProperties 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -299,9 +290,6 @@ exports[`object fields object 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -468,9 +456,6 @@ exports[`object fields show add button and fields if additionalProperties is tru } .emotion-14 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -514,9 +499,6 @@ exports[`object fields show add button and fields if additionalProperties is tru } .emotion-17 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -543,9 +525,6 @@ exports[`object fields show add button and fields if additionalProperties is tru } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -761,9 +740,6 @@ exports[`object fields with title and description additionalProperties 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -807,9 +783,6 @@ exports[`object fields with title and description additionalProperties 1`] = ` } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -836,9 +809,6 @@ exports[`object fields with title and description additionalProperties 1`] = ` } .emotion-22 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -1074,9 +1044,6 @@ exports[`object fields with title and description from both additionalProperties } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1120,9 +1087,6 @@ exports[`object fields with title and description from both additionalProperties } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1149,9 +1113,6 @@ exports[`object fields with title and description from both additionalProperties } .emotion-22 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -1386,9 +1347,6 @@ exports[`object fields with title and description from both object 1`] = ` } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1610,9 +1568,6 @@ exports[`object fields with title and description from uiSchema additionalProper } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1656,9 +1611,6 @@ exports[`object fields with title and description from uiSchema additionalProper } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -1685,9 +1637,6 @@ exports[`object fields with title and description from uiSchema additionalProper } .emotion-22 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -1922,9 +1871,6 @@ exports[`object fields with title and description from uiSchema object 1`] = ` } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2146,9 +2092,6 @@ exports[`object fields with title and description from uiSchema show add button } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2192,9 +2135,6 @@ exports[`object fields with title and description from uiSchema show add button } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2221,9 +2161,6 @@ exports[`object fields with title and description from uiSchema show add button } .emotion-22 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -2458,9 +2395,6 @@ exports[`object fields with title and description object 1`] = ` } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2682,9 +2616,6 @@ exports[`object fields with title and description show add button and fields if } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2728,9 +2659,6 @@ exports[`object fields with title and description show add button and fields if } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -2757,9 +2685,6 @@ exports[`object fields with title and description show add button and fields if } .emotion-22 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -2980,9 +2905,6 @@ exports[`object fields with title and description with global label off addition } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3026,9 +2948,6 @@ exports[`object fields with title and description with global label off addition } .emotion-16 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3055,9 +2974,6 @@ exports[`object fields with title and description with global label off addition } .emotion-17 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; @@ -3241,9 +3157,6 @@ exports[`object fields with title and description with global label off object 1 } .emotion-11 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3396,9 +3309,6 @@ exports[`object fields with title and description with global label off show add } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3442,9 +3352,6 @@ exports[`object fields with title and description with global label off show add } .emotion-16 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-appearance: none; -moz-appearance: none; @@ -3471,9 +3378,6 @@ exports[`object fields with title and description with global label off show add } .emotion-17 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-self: center; -ms-flex-item-align: center; diff --git a/packages/mui/package.json b/packages/mui/package.json index 5e1f64c35f..1d7305b382 100644 --- a/packages/mui/package.json +++ b/packages/mui/package.json @@ -34,8 +34,8 @@ "peerDependencies": { "@emotion/react": "^11.7.0", "@emotion/styled": "^11.6.0", - "@mui/icons-material": "^5.2.0", - "@mui/material": "^5.2.2", + "@mui/icons-material": "^5.2.0 || ^6.0.0", + "@mui/material": "^5.2.2 || ^6.0.0", "@rjsf/core": "^5.20.x", "@rjsf/utils": "^5.20.x", "react": ">=17" @@ -51,8 +51,8 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "@mui/base": "5.0.0-beta.28", - "@mui/icons-material": "5.15.2", - "@mui/material": "5.15.2", + "@mui/icons-material": "6.0.2", + "@mui/material": "6.0.2", "@rjsf/core": "^5.20.1", "@rjsf/snapshot-tests": "^5.20.1", "@rjsf/utils": "^5.20.1", diff --git a/packages/mui/test/Form.test.tsx b/packages/mui/test/Form.test.tsx index fdc2b75b9e..ba487994fc 100644 --- a/packages/mui/test/Form.test.tsx +++ b/packages/mui/test/Form.test.tsx @@ -28,8 +28,12 @@ formTests(Form, { scrollHeight: 100, }; } - // The other one only really needs an empty object - return {}; + // The other one needs to look like an input node with focus and style elements + return { + nodeName: 'INPUT', + focus: jest.fn(), + style: {}, + }; } return null; }, diff --git a/packages/mui/test/__snapshots__/Array.test.tsx.snap b/packages/mui/test/__snapshots__/Array.test.tsx.snap index 9743faf02d..fd7a82f13e 100644 --- a/packages/mui/test/__snapshots__/Array.test.tsx.snap +++ b/packages/mui/test/__snapshots__/Array.test.tsx.snap @@ -2,9 +2,6 @@ exports[`array fields array 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -24,7 +21,8 @@ exports[`array fields array 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -33,9 +31,6 @@ exports[`array fields array 1`] = ` .emotion-3 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -64,9 +59,6 @@ exports[`array fields array 1`] = ` } .emotion-6 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -83,8 +75,8 @@ exports[`array fields array 1`] = ` outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -95,19 +87,14 @@ exports[`array fields array 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #1976d2; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #1976d2; } .emotion-6::-moz-focus-inner { @@ -136,6 +123,11 @@ exports[`array fields array 1`] = ` } } +.emotion-6.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-6:hover { background-color: rgba(25, 118, 210, 0.04); } @@ -146,11 +138,6 @@ exports[`array fields array 1`] = ` } } -.emotion-6.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-7 { -webkit-user-select: none; -moz-user-select: none; @@ -159,12 +146,12 @@ exports[`array fields array 1`] = ` width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } @@ -173,9 +160,6 @@ exports[`array fields array 1`] = ` } .emotion-9 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -188,12 +172,12 @@ exports[`array fields array 1`] = ` position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -204,7 +188,7 @@ exports[`array fields array 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -212,13 +196,14 @@ exports[`array fields array 1`] = ` letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-9::-moz-focus-inner { @@ -240,13 +225,19 @@ exports[`array fields array 1`] = ` .emotion-9:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-9.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-9:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-9:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -264,6 +255,15 @@ exports[`array fields array 1`] = ` background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-9:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
@@ -333,7 +338,7 @@ exports[`array fields array 1`] = ` className="MuiBox-root emotion-8" > @@ -1283,12 +1244,9 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > -
@@ -1396,6 +1348,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- >
- @@ -1577,15 +1531,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > -
@@ -1682,10 +1627,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-
@@ -1713,9 +1655,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- exports[`array fields checkboxes 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -1730,9 +1669,6 @@ exports[`array fields checkboxes 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -1755,15 +1691,11 @@ exports[`array fields checkboxes 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -1776,15 +1708,18 @@ exports[`array fields checkboxes 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -1807,7 +1742,7 @@ exports[`array fields checkboxes 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -1821,15 +1756,10 @@ exports[`array fields checkboxes 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3:focus { - border-radius: 4px; -} - -.emotion-3::-ms-expand { - display: none; + border-radius: 0; } .emotion-3.Mui-disabled { @@ -1845,6 +1775,10 @@ exports[`array fields checkboxes 1`] = ` background-color: #fff; } +.emotion-3:focus { + border-radius: 4px; +} + .emotion-3.emotion-3.emotion-3 { padding-right: 32px; } @@ -1871,13 +1805,6 @@ exports[`array fields checkboxes 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -1905,10 +1832,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -1921,10 +1844,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -1963,12 +1882,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; position: absolute; right: 7px; @@ -2014,9 +1933,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-9 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2029,12 +1945,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -2045,7 +1961,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -2053,13 +1969,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-9::-moz-focus-inner { @@ -2081,13 +1998,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-9:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-9.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-9:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-9:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -2105,6 +2028,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-9:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
@@ -3429,7 +3334,8 @@ exports[`array fields has errors 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-1 { @@ -3456,9 +3362,6 @@ exports[`array fields has errors 1`] = ` } .emotion-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; @@ -3480,31 +3383,12 @@ exports[`array fields has errors 1`] = ` padding-right: 16px; } -.emotion-4.Mui-focusVisible { - background-color: rgba(0, 0, 0, 0.12); -} - -.emotion-4.Mui-selected { - background-color: rgba(25, 118, 210, 0.08); -} - -.emotion-4.Mui-selected.Mui-focusVisible { - background-color: rgba(25, 118, 210, 0.2); -} - -.emotion-4.Mui-disabled { - opacity: 0.38; -} - .emotion-5 { min-width: 56px; color: rgba(0, 0, 0, 0.54); -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; } @@ -3516,12 +3400,12 @@ exports[`array fields has errors 1`] = ` width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; color: #d32f2f; } @@ -3535,6 +3419,14 @@ exports[`array fields has errors 1`] = ` margin-bottom: 4px; } +.MuiTypography-root:where(.emotion-7 .MuiListItemText-primary) { + display: block; +} + +.MuiTypography-root:where(.emotion-7 .MuiListItemText-secondary) { + display: block; +} + .emotion-8 { margin: 0; font-family: "Roboto","Helvetica","Arial",sans-serif; @@ -3542,13 +3434,9 @@ exports[`array fields has errors 1`] = ` font-size: 0.875rem; line-height: 1.43; letter-spacing: 0.01071em; - display: block; } .emotion-9 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -3564,20 +3452,16 @@ exports[`array fields has errors 1`] = ` .emotion-10 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; + width: calc(100% + 16px); -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-top: -16px; - width: calc(100% + 16px); margin-left: -16px; } @@ -3658,9 +3542,6 @@ exports[`array fields has errors 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -3681,14 +3562,13 @@ exports[`array fields has errors 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, 16px) scale(1); @@ -3723,15 +3603,11 @@ exports[`array fields has errors 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -3744,15 +3620,18 @@ exports[`array fields has errors 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-15:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-15.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-15.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-15:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-15.Mui-error .MuiOutlinedInput-notchedOutline { @@ -3767,7 +3646,7 @@ exports[`array fields has errors 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -3781,7 +3660,6 @@ exports[`array fields has errors 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-16::-webkit-input-placeholder { @@ -3798,13 +3676,6 @@ exports[`array fields has errors 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-16:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-16::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -3832,10 +3703,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-16::-ms-input-placeholder { opacity: 0!important; } @@ -3848,10 +3715,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input-placeholder { opacity: 0.42; } @@ -3921,9 +3784,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- } .emotion-20 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; @@ -3934,29 +3794,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- -ms-flex-align: center; align-items: center; position: relative; - -webkit-text-decoration: none; - text-decoration: none; - width: 100%; - box-sizing: border-box; - text-align: left; - padding-top: 4px; - padding-bottom: 4px; -} - -.emotion-20.Mui-focusVisible { - background-color: rgba(0, 0, 0, 0.12); -} - -.emotion-20.Mui-selected { - background-color: rgba(25, 118, 210, 0.08); -} - -.emotion-20.Mui-selected.Mui-focusVisible { - background-color: rgba(25, 118, 210, 0.2); -} - -.emotion-20.Mui-disabled { - opacity: 0.38; + -webkit-text-decoration: none; + text-decoration: none; + width: 100%; + box-sizing: border-box; + text-align: left; + padding-top: 4px; + padding-bottom: 4px; } .emotion-21 { @@ -3986,9 +3830,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- } .emotion-23 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4001,12 +3842,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -4017,7 +3858,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -4025,13 +3866,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-23::-moz-focus-inner { @@ -4053,13 +3895,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- .emotion-23:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-23.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-23:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-23:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -4077,6 +3925,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-23:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
Errors
@@ -4098,7 +3961,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- >
  • @@ -4120,6 +3982,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- > .name Bad input @@ -4208,7 +4071,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- >
    • @@ -4845,9 +4677,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p exports[`with title and description array 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -4867,7 +4696,8 @@ exports[`with title and description array 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -4910,9 +4740,6 @@ exports[`with title and description array 1`] = ` .emotion-7 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -4941,9 +4768,6 @@ exports[`with title and description array 1`] = ` } .emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4960,8 +4784,8 @@ exports[`with title and description array 1`] = ` outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -4972,19 +4796,14 @@ exports[`with title and description array 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #1976d2; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #1976d2; } .emotion-10::-moz-focus-inner { @@ -5013,6 +4832,11 @@ exports[`with title and description array 1`] = ` } } +.emotion-10.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-10:hover { background-color: rgba(25, 118, 210, 0.04); } @@ -5023,11 +4847,6 @@ exports[`with title and description array 1`] = ` } } -.emotion-10.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-11 { -webkit-user-select: none; -moz-user-select: none; @@ -5036,35 +4855,20 @@ exports[`with title and description array 1`] = ` width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } .emotion-12 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; -} - -.emotion-13 { margin-top: 24px; } -.emotion-14 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; +.emotion-13 { display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5077,12 +4881,12 @@ exports[`with title and description array 1`] = ` position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -5093,7 +4897,7 @@ exports[`with title and description array 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -5101,58 +4905,74 @@ exports[`with title and description array 1`] = ` letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } -.emotion-14::-moz-focus-inner { +.emotion-13::-moz-focus-inner { border-style: none; } -.emotion-14.Mui-disabled { +.emotion-13.Mui-disabled { pointer-events: none; cursor: default; } @media print { - .emotion-14 { + .emotion-13 { -webkit-print-color-adjust: exact; color-adjust: exact; } } -.emotion-14:hover { +.emotion-13:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-13.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-13:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { - .emotion-14:hover { - background-color: #1976d2; + .emotion-13:hover { + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } -.emotion-14:active { +.emotion-13:active { box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); } -.emotion-14.Mui-focusVisible { +.emotion-13.Mui-focusVisible { box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12); } -.emotion-14.Mui-disabled { +.emotion-13.Mui-disabled { color: rgba(0, 0, 0, 0.26); box-shadow: none; background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-13:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    Test field
    @@ -5231,12 +5057,9 @@ exports[`with title and description array 1`] = ` viewBox="0 0 24 24" > -
    @@ -5246,10 +5069,10 @@ exports[`with title and description array 1`] = `
    @@ -5277,9 +5097,6 @@ exports[`with title and description array 1`] = ` exports[`with title and description array icons 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -5299,7 +5116,8 @@ exports[`with title and description array icons 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -5342,9 +5160,6 @@ exports[`with title and description array icons 1`] = ` .emotion-7 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -5433,9 +5248,6 @@ exports[`with title and description array icons 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -5456,14 +5268,13 @@ exports[`with title and description array icons 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(133% - 32px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, -9px) scale(0.75); @@ -5506,15 +5317,11 @@ exports[`with title and description array icons 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -5527,15 +5334,18 @@ exports[`with title and description array icons 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-16:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-16:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-16.Mui-error .MuiOutlinedInput-notchedOutline { @@ -5550,7 +5360,7 @@ exports[`with title and description array icons 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -5564,7 +5374,6 @@ exports[`with title and description array icons 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-17::-webkit-input-placeholder { @@ -5581,13 +5390,6 @@ exports[`with title and description array icons 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-17:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-17::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -5615,10 +5417,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-ms-input-placeholder { opacity: 0!important; } @@ -5631,10 +5429,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-placeholder { opacity: 0.42; } @@ -5715,9 +5509,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-23 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5734,8 +5525,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -5746,20 +5537,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: rgba(0, 0, 0, 0.54); text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - padding: 5px; - font-size: 1.125rem; } .emotion-23::-moz-focus-inner { @@ -5801,19 +5586,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.25rem; } .emotion-29 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5830,8 +5612,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -5842,21 +5624,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #d32f2f; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #d32f2f; - padding: 5px; - font-size: 1.125rem; } .emotion-29::-moz-focus-inner { @@ -5885,6 +5660,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } +.emotion-29.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-29:hover { background-color: rgba(211, 47, 47, 0.04); } @@ -5895,16 +5675,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } -.emotion-29.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-55 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -5925,9 +5697,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-58 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5944,8 +5713,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -5956,19 +5725,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #1976d2; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #1976d2; } .emotion-58::-moz-focus-inner { @@ -5997,6 +5761,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } +.emotion-58.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-58:hover { background-color: rgba(25, 118, 210, 0.04); } @@ -6007,11 +5776,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } -.emotion-58.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-59 { -webkit-user-select: none; -moz-user-select: none; @@ -6020,12 +5784,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } @@ -6034,9 +5798,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-61 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -6049,12 +5810,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -6065,7 +5826,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -6073,13 +5834,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-61::-moz-focus-inner { @@ -6101,13 +5863,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- .emotion-61:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-61.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-61:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-61:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -6125,6 +5893,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-61:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    Test field
    @@ -6182,6 +5965,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -6349,7 +6138,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -6390,7 +6179,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -6431,7 +6220,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -6453,6 +6242,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -6620,7 +6415,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -6661,7 +6456,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -6702,7 +6497,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -6745,7 +6540,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -6760,7 +6555,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- className="MuiBox-root emotion-60" >
    @@ -7395,9 +7165,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p exports[`with title and description fixed array 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -7417,7 +7184,8 @@ exports[`with title and description fixed array 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -7460,9 +7228,6 @@ exports[`with title and description fixed array 1`] = ` .emotion-7 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -7551,9 +7316,6 @@ exports[`with title and description fixed array 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -7574,14 +7336,13 @@ exports[`with title and description fixed array 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, 16px) scale(1); @@ -7620,15 +7381,11 @@ exports[`with title and description fixed array 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -7641,15 +7398,18 @@ exports[`with title and description fixed array 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-16:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-16:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-16.Mui-error .MuiOutlinedInput-notchedOutline { @@ -7664,7 +7424,7 @@ exports[`with title and description fixed array 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -7678,7 +7438,6 @@ exports[`with title and description fixed array 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-17::-webkit-input-placeholder { @@ -7695,13 +7454,6 @@ exports[`with title and description fixed array 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-17:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-17::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -7729,10 +7481,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-ms-input-placeholder { opacity: 0!important; } @@ -7745,10 +7493,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-placeholder { opacity: 0.42; } @@ -7825,9 +7569,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-38 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -7840,12 +7581,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -7856,7 +7597,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -7864,13 +7605,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-38::-moz-focus-inner { @@ -7892,13 +7634,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- .emotion-38:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-38.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-38:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-38:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -7916,6 +7664,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-38:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    Test field
    @@ -7973,6 +7736,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -8598,10 +8364,10 @@ exports[`with title and description from both array 1`] = `
    @@ -8629,9 +8392,6 @@ exports[`with title and description from both array 1`] = ` exports[`with title and description from both array icons 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -8651,7 +8411,8 @@ exports[`with title and description from both array icons 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -8694,9 +8455,6 @@ exports[`with title and description from both array icons 1`] = ` .emotion-7 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -8785,9 +8543,6 @@ exports[`with title and description from both array icons 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -8808,14 +8563,13 @@ exports[`with title and description from both array icons 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(133% - 32px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, -9px) scale(0.75); @@ -8858,15 +8612,11 @@ exports[`with title and description from both array icons 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -8879,15 +8629,18 @@ exports[`with title and description from both array icons 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-16:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-16:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-16.Mui-error .MuiOutlinedInput-notchedOutline { @@ -8902,7 +8655,7 @@ exports[`with title and description from both array icons 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -8916,7 +8669,6 @@ exports[`with title and description from both array icons 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-17::-webkit-input-placeholder { @@ -8933,13 +8685,6 @@ exports[`with title and description from both array icons 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-17:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-17::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -8967,10 +8712,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-ms-input-placeholder { opacity: 0!important; } @@ -8983,10 +8724,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-placeholder { opacity: 0.42; } @@ -9067,9 +8804,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-23 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9086,8 +8820,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -9098,20 +8832,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: rgba(0, 0, 0, 0.54); text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - padding: 5px; - font-size: 1.125rem; } .emotion-23::-moz-focus-inner { @@ -9153,19 +8881,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.25rem; } .emotion-29 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9182,8 +8907,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -9194,21 +8919,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #d32f2f; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #d32f2f; - padding: 5px; - font-size: 1.125rem; } .emotion-29::-moz-focus-inner { @@ -9237,6 +8955,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } +.emotion-29.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-29:hover { background-color: rgba(211, 47, 47, 0.04); } @@ -9247,16 +8970,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } -.emotion-29.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-55 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -9277,9 +8992,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-58 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9296,8 +9008,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -9308,19 +9020,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #1976d2; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #1976d2; } .emotion-58::-moz-focus-inner { @@ -9349,6 +9056,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } +.emotion-58.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-58:hover { background-color: rgba(25, 118, 210, 0.04); } @@ -9359,11 +9071,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } -.emotion-58.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-59 { -webkit-user-select: none; -moz-user-select: none; @@ -9372,12 +9079,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } @@ -9386,9 +9093,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-61 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9401,12 +9105,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -9417,7 +9121,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -9425,13 +9129,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-61::-moz-focus-inner { @@ -9453,13 +9158,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- .emotion-61:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-61.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-61:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-61:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -9477,6 +9188,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-61:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    My Field
    @@ -9534,6 +9260,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -9701,7 +9433,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -9742,7 +9474,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -9783,7 +9515,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -9805,6 +9537,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -9972,7 +9710,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -10013,7 +9751,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -10054,7 +9792,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -10097,7 +9835,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -10112,7 +9850,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- className="MuiBox-root emotion-60" >
    @@ -10747,9 +10460,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p exports[`with title and description from both fixed array 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -10769,7 +10479,8 @@ exports[`with title and description from both fixed array 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -10812,9 +10523,6 @@ exports[`with title and description from both fixed array 1`] = ` .emotion-7 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -10903,9 +10611,6 @@ exports[`with title and description from both fixed array 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -10926,14 +10631,13 @@ exports[`with title and description from both fixed array 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, 16px) scale(1); @@ -10972,15 +10676,11 @@ exports[`with title and description from both fixed array 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -10993,15 +10693,18 @@ exports[`with title and description from both fixed array 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-16:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-16:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-16.Mui-error .MuiOutlinedInput-notchedOutline { @@ -11016,7 +10719,7 @@ exports[`with title and description from both fixed array 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -11030,7 +10733,6 @@ exports[`with title and description from both fixed array 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-17::-webkit-input-placeholder { @@ -11047,13 +10749,6 @@ exports[`with title and description from both fixed array 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-17:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-17::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -11081,10 +10776,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-ms-input-placeholder { opacity: 0!important; } @@ -11097,10 +10788,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-placeholder { opacity: 0.42; } @@ -11177,9 +10864,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-38 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -11192,12 +10876,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -11208,7 +10892,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -11216,13 +10900,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-38::-moz-focus-inner { @@ -11244,13 +10929,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- .emotion-38:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-38.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-38:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-38:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -11268,6 +10959,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-38:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    My Field
    @@ -11325,6 +11031,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -11950,10 +11659,10 @@ exports[`with title and description from uiSchema array 1`] = `
    @@ -11981,9 +11687,6 @@ exports[`with title and description from uiSchema array 1`] = ` exports[`with title and description from uiSchema array icons 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -12003,7 +11706,8 @@ exports[`with title and description from uiSchema array icons 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -12046,9 +11750,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` .emotion-7 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -12137,9 +11838,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -12160,14 +11858,13 @@ exports[`with title and description from uiSchema array icons 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(133% - 32px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, -9px) scale(0.75); @@ -12210,15 +11907,11 @@ exports[`with title and description from uiSchema array icons 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -12231,15 +11924,18 @@ exports[`with title and description from uiSchema array icons 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-16:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-16:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-16.Mui-error .MuiOutlinedInput-notchedOutline { @@ -12254,7 +11950,7 @@ exports[`with title and description from uiSchema array icons 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -12268,7 +11964,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-17::-webkit-input-placeholder { @@ -12285,13 +11980,6 @@ exports[`with title and description from uiSchema array icons 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-17:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-17::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -12319,23 +12007,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-ms-input-placeholder { opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-webkit-input-placeholder { - opacity: 0.42; -} - -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-moz-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-webkit-input-placeholder { opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus:-ms-input-placeholder { +label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-moz-placeholder { opacity: 0.42; } @@ -12419,9 +12099,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-23 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -12438,8 +12115,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -12450,20 +12127,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: rgba(0, 0, 0, 0.54); text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - padding: 5px; - font-size: 1.125rem; } .emotion-23::-moz-focus-inner { @@ -12505,19 +12176,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.25rem; } .emotion-29 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -12534,8 +12202,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -12546,21 +12214,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #d32f2f; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #d32f2f; - padding: 5px; - font-size: 1.125rem; } .emotion-29::-moz-focus-inner { @@ -12589,6 +12250,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } +.emotion-29.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-29:hover { background-color: rgba(211, 47, 47, 0.04); } @@ -12599,16 +12265,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } -.emotion-29.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-55 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -12629,9 +12287,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-58 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -12648,8 +12303,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -12660,19 +12315,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #1976d2; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #1976d2; } .emotion-58::-moz-focus-inner { @@ -12701,6 +12351,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } +.emotion-58.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-58:hover { background-color: rgba(25, 118, 210, 0.04); } @@ -12711,11 +12366,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } } -.emotion-58.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-59 { -webkit-user-select: none; -moz-user-select: none; @@ -12724,12 +12374,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } @@ -12738,9 +12388,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-61 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -12753,12 +12400,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -12769,7 +12416,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -12777,13 +12424,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-61::-moz-focus-inner { @@ -12805,13 +12453,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- .emotion-61:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-61.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-61:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-61:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -12829,6 +12483,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-61:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    My Field
    @@ -12886,6 +12555,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -13053,7 +12728,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -13094,7 +12769,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -13135,7 +12810,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -13157,6 +12832,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -13324,7 +13005,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -13365,7 +13046,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -13406,7 +13087,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -13449,7 +13130,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- viewBox="0 0 24 24" > @@ -13464,7 +13145,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- className="MuiBox-root emotion-60" >
    @@ -14099,9 +13755,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p exports[`with title and description from uiSchema fixed array 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -14121,7 +13774,8 @@ exports[`with title and description from uiSchema fixed array 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -14164,9 +13818,6 @@ exports[`with title and description from uiSchema fixed array 1`] = ` .emotion-7 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -14255,9 +13906,6 @@ exports[`with title and description from uiSchema fixed array 1`] = ` } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -14278,14 +13926,13 @@ exports[`with title and description from uiSchema fixed array 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, 16px) scale(1); @@ -14324,15 +13971,11 @@ exports[`with title and description from uiSchema fixed array 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -14345,15 +13988,18 @@ exports[`with title and description from uiSchema fixed array 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-16:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-16.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-16:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-16.Mui-error .MuiOutlinedInput-notchedOutline { @@ -14368,7 +14014,7 @@ exports[`with title and description from uiSchema fixed array 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -14382,7 +14028,6 @@ exports[`with title and description from uiSchema fixed array 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-17::-webkit-input-placeholder { @@ -14399,13 +14044,6 @@ exports[`with title and description from uiSchema fixed array 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-17:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-17::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -14433,10 +14071,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17::-ms-input-placeholder { opacity: 0!important; } @@ -14449,10 +14083,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input-placeholder { opacity: 0.42; } @@ -14529,9 +14159,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-38 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -14544,12 +14171,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -14560,7 +14187,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -14568,13 +14195,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-38::-moz-focus-inner { @@ -14596,13 +14224,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- .emotion-38:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-38.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-38:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-38:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -14620,6 +14254,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-38:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    My Field
    @@ -14677,6 +14326,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- >
    @@ -15244,10 +14895,10 @@ exports[`with title and description with global label off array 1`] = `
    @@ -15275,9 +14923,6 @@ exports[`with title and description with global label off array 1`] = ` exports[`with title and description with global label off array icons 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -15297,7 +14942,8 @@ exports[`with title and description with global label off array icons 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -15306,9 +14952,6 @@ exports[`with title and description with global label off array icons 1`] = ` .emotion-3 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -15397,9 +15040,6 @@ exports[`with title and description with global label off array icons 1`] = ` } .emotion-9 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -15422,15 +15062,11 @@ exports[`with title and description with global label off array icons 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -15443,15 +15079,18 @@ exports[`with title and description with global label off array icons 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-10:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-10:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-10.Mui-error .MuiOutlinedInput-notchedOutline { @@ -15466,7 +15105,7 @@ exports[`with title and description with global label off array icons 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -15480,7 +15119,6 @@ exports[`with title and description with global label off array icons 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-11::-webkit-input-placeholder { @@ -15497,13 +15135,6 @@ exports[`with title and description with global label off array icons 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-11:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-11::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -15531,10 +15162,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-ms-input-placeholder { opacity: 0!important; } @@ -15547,10 +15174,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-placeholder { opacity: 0.42; } @@ -15608,9 +15231,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-15 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -15627,8 +15247,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -15639,20 +15259,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: rgba(0, 0, 0, 0.54); text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - padding: 5px; - font-size: 1.125rem; } .emotion-15::-moz-focus-inner { @@ -15694,19 +15308,16 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.25rem; } .emotion-21 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -15723,8 +15334,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 5px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -15735,21 +15346,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #d32f2f; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; - font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); + font-size: 1.125rem; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #d32f2f; - padding: 5px; - font-size: 1.125rem; } .emotion-21::-moz-focus-inner { @@ -15778,6 +15382,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } } +.emotion-21.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-21:hover { background-color: rgba(211, 47, 47, 0.04); } @@ -15788,16 +15397,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } } -.emotion-21.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-43 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -15818,9 +15419,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-46 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -15837,8 +15435,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 8px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -15849,19 +15447,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: #1976d2; text-align: center; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: 1.5rem; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: rgba(0, 0, 0, 0.54); -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #1976d2; } .emotion-46::-moz-focus-inner { @@ -15890,6 +15483,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } } +.emotion-46.Mui-disabled { + background-color: transparent; + color: rgba(0, 0, 0, 0.26); +} + .emotion-46:hover { background-color: rgba(25, 118, 210, 0.04); } @@ -15900,11 +15498,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } } -.emotion-46.Mui-disabled { - background-color: transparent; - color: rgba(0, 0, 0, 0.26); -} - .emotion-47 { -webkit-user-select: none; -moz-user-select: none; @@ -15913,12 +15506,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } @@ -15927,9 +15520,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-49 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -15942,12 +15532,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -15958,7 +15548,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -15966,13 +15556,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-49::-moz-focus-inner { @@ -15994,13 +15585,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- .emotion-49:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-49.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-49:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-49:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -16018,6 +15615,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-49:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    @@ -16188,7 +15804,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > @@ -16229,7 +15845,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > @@ -16270,7 +15886,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > @@ -16292,6 +15908,11 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- >
    @@ -16429,7 +16050,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > @@ -16470,7 +16091,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > @@ -16511,7 +16132,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > @@ -16554,7 +16175,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- viewBox="0 0 24 24" > @@ -16569,7 +16190,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- className="MuiBox-root emotion-48" >
    @@ -17204,9 +16800,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p exports[`with title and description with global label off fixed array 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -17226,7 +16819,8 @@ exports[`with title and description with global label off fixed array 1`] = ` -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-radius: 4px; - box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + box-shadow: var(--Paper-shadow); + background-image: var(--Paper-overlay); } .emotion-2 { @@ -17235,9 +16829,6 @@ exports[`with title and description with global label off fixed array 1`] = ` .emotion-3 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; @@ -17326,9 +16917,6 @@ exports[`with title and description with global label off fixed array 1`] = ` } .emotion-9 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -17351,15 +16939,11 @@ exports[`with title and description with global label off fixed array 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -17372,15 +16956,18 @@ exports[`with title and description with global label off fixed array 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-10:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-10.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-10:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-10.Mui-error .MuiOutlinedInput-notchedOutline { @@ -17395,7 +16982,7 @@ exports[`with title and description with global label off fixed array 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -17409,7 +16996,6 @@ exports[`with title and description with global label off fixed array 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-11::-webkit-input-placeholder { @@ -17426,13 +17012,6 @@ exports[`with title and description with global label off fixed array 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-11:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-11::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -17460,10 +17039,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-11::-ms-input-placeholder { opacity: 0!important; } @@ -17476,10 +17051,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-moz-place opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input-placeholder { opacity: 0.42; } @@ -17533,9 +17104,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-26 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -17548,12 +17116,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -17564,7 +17132,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -17572,13 +17140,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-26::-moz-focus-inner { @@ -17600,13 +17169,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- .emotion-26:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-26.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-26:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-26:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -17624,6 +17199,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-26:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    @@ -358,9 +342,6 @@ exports[`single fields checkbox field 1`] = ` exports[`single fields checkbox field with label 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -375,9 +356,6 @@ exports[`single fields checkbox field with label 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -399,9 +377,6 @@ exports[`single fields checkbox field with label 1`] = ` } .emotion-2 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -418,8 +393,8 @@ exports[`single fields checkbox field with label 1`] = ` outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 9px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -430,9 +405,6 @@ exports[`single fields checkbox field with label 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; - padding: 9px; - border-radius: 50%; color: rgba(0, 0, 0, 0.6); } @@ -456,12 +428,6 @@ exports[`single fields checkbox field with label 1`] = ` background-color: rgba(25, 118, 210, 0.04); } -@media (hover: none) { - .emotion-2:hover { - background-color: transparent; - } -} - .emotion-2.Mui-checked, .emotion-2.MuiCheckbox-indeterminate { color: #1976d2; @@ -471,6 +437,12 @@ exports[`single fields checkbox field with label 1`] = ` color: rgba(0, 0, 0, 0.26); } +@media (hover: none) { + .emotion-2:hover { + background-color: transparent; + } +} + .emotion-3 { cursor: inherit; position: absolute; @@ -492,12 +464,12 @@ exports[`single fields checkbox field with label 1`] = ` width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } @@ -515,9 +487,6 @@ exports[`single fields checkbox field with label 1`] = ` } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -530,12 +499,12 @@ exports[`single fields checkbox field with label 1`] = ` position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -546,7 +515,7 @@ exports[`single fields checkbox field with label 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -554,13 +523,14 @@ exports[`single fields checkbox field with label 1`] = ` letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -582,13 +552,19 @@ exports[`single fields checkbox field with label 1`] = ` .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -606,6 +582,15 @@ exports[`single fields checkbox field with label 1`] = ` background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    test @@ -673,7 +659,7 @@ exports[`single fields checkbox field with label 1`] = ` className="MuiBox-root emotion-6" >
    @@ -1263,9 +1224,6 @@ exports[`single fields checkboxes field 1`] = ` exports[`single fields field with description 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -1281,20 +1239,16 @@ exports[`single fields field with description 1`] = ` .emotion-1 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; + width: calc(100% + 16px); -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-top: -16px; - width: calc(100% + 16px); margin-left: -16px; } @@ -1375,9 +1329,6 @@ exports[`single fields field with description 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -1398,14 +1349,13 @@ exports[`single fields field with description 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, 16px) scale(1); @@ -1440,15 +1390,11 @@ exports[`single fields field with description 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -1461,15 +1407,18 @@ exports[`single fields field with description 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-6:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-6:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-6.Mui-error .MuiOutlinedInput-notchedOutline { @@ -1484,7 +1433,7 @@ exports[`single fields field with description 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -1498,7 +1447,6 @@ exports[`single fields field with description 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-7::-webkit-input-placeholder { @@ -1515,13 +1463,6 @@ exports[`single fields field with description 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-7:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-7::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -1549,10 +1490,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-7::-ms-input-placeholder { opacity: 0!important; } @@ -1565,10 +1502,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-placeholder { opacity: 0.42; } @@ -1654,9 +1587,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -1669,12 +1599,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -1685,7 +1615,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -1693,13 +1623,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-13::-moz-focus-inner { @@ -1721,13 +1652,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p .emotion-13:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-13.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-13:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-13:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -1745,16 +1682,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } -.emotion-14 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; +@media (hover: hover) { + .emotion-13:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } }
    @@ -1889,9 +1821,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p exports[`single fields field with description in uiSchema 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -1907,20 +1836,16 @@ exports[`single fields field with description in uiSchema 1`] = ` .emotion-1 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; + width: calc(100% + 16px); -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-top: -16px; - width: calc(100% + 16px); margin-left: -16px; } @@ -2001,9 +1926,6 @@ exports[`single fields field with description in uiSchema 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -2024,14 +1946,13 @@ exports[`single fields field with description in uiSchema 1`] = ` line-height: 1.4375em; letter-spacing: 0.00938em; padding: 0; - position: relative; + position: absolute; display: block; transform-origin: top left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); - position: absolute; left: 0; top: 0; -webkit-transform: translate(14px, 16px) scale(1); @@ -2066,15 +1987,11 @@ exports[`single fields field with description in uiSchema 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -2087,15 +2004,18 @@ exports[`single fields field with description in uiSchema 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-6:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-6.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-6:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-6.Mui-error .MuiOutlinedInput-notchedOutline { @@ -2110,7 +2030,7 @@ exports[`single fields field with description in uiSchema 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -2124,7 +2044,6 @@ exports[`single fields field with description in uiSchema 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-7::-webkit-input-placeholder { @@ -2141,13 +2060,6 @@ exports[`single fields field with description in uiSchema 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-7:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-7::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -2175,10 +2087,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-7::-ms-input-placeholder { opacity: 0!important; } @@ -2191,10 +2099,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-placeholder { opacity: 0.42; } @@ -2280,9 +2184,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p } .emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -2295,12 +2196,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -2311,7 +2212,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -2319,13 +2220,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-13::-moz-focus-inner { @@ -2347,13 +2249,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p .emotion-13:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-13.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-13:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-13:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -2371,6 +2279,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-13:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    @@ -2912,9 +2805,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields format date 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -2929,9 +2819,6 @@ exports[`single fields format date 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -2954,15 +2841,11 @@ exports[`single fields format date 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -2975,15 +2858,18 @@ exports[`single fields format date 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -2998,7 +2884,7 @@ exports[`single fields format date 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -3012,7 +2898,6 @@ exports[`single fields format date 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3::-webkit-input-placeholder { @@ -3029,13 +2914,6 @@ exports[`single fields format date 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -3063,10 +2941,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -3079,10 +2953,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -3136,9 +3006,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3151,12 +3018,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -3167,7 +3034,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -3175,13 +3042,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -3203,13 +3071,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -3227,6 +3101,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    @@ -3721,9 +3579,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields format time 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -3738,9 +3593,6 @@ exports[`single fields format time 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -3763,15 +3615,11 @@ exports[`single fields format time 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -3784,15 +3632,18 @@ exports[`single fields format time 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -3807,7 +3658,7 @@ exports[`single fields format time 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -3821,7 +3672,6 @@ exports[`single fields format time 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3::-webkit-input-placeholder { @@ -3838,13 +3688,6 @@ exports[`single fields format time 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -3872,10 +3715,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -3888,10 +3727,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -3945,9 +3780,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -3960,12 +3792,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -3976,7 +3808,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -3984,13 +3816,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -4012,13 +3845,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -4036,6 +3875,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    @@ -4788,9 +4583,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-12:focus::-ms-input- exports[`single fields hidden field 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -4806,20 +4598,16 @@ exports[`single fields hidden field 1`] = ` .emotion-1 { box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; + width: calc(100% + 16px); -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-top: -16px; - width: calc(100% + 16px); margin-left: -16px; } @@ -4836,9 +4624,6 @@ exports[`single fields hidden field 1`] = ` } .emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -4851,12 +4636,12 @@ exports[`single fields hidden field 1`] = ` position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -4867,7 +4652,7 @@ exports[`single fields hidden field 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -4875,13 +4660,14 @@ exports[`single fields hidden field 1`] = ` letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-3::-moz-focus-inner { @@ -4903,13 +4689,19 @@ exports[`single fields hidden field 1`] = ` .emotion-3:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-3.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-3:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-3:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -4927,6 +4719,15 @@ exports[`single fields hidden field 1`] = ` background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-3:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    @@ -5557,9 +5343,6 @@ exports[`single fields null field 1`] = ` exports[`single fields number field 0 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -5574,9 +5357,6 @@ exports[`single fields number field 0 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -5599,15 +5379,11 @@ exports[`single fields number field 0 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -5620,15 +5396,18 @@ exports[`single fields number field 0 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -5643,7 +5422,7 @@ exports[`single fields number field 0 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -5657,7 +5436,6 @@ exports[`single fields number field 0 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3::-webkit-input-placeholder { @@ -5674,13 +5452,6 @@ exports[`single fields number field 0 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -5708,10 +5479,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -5724,10 +5491,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -5781,9 +5544,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -5796,12 +5556,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -5812,7 +5572,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -5820,13 +5580,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -5848,13 +5609,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -5872,6 +5639,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    @@ -6368,9 +6119,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields password field 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -6385,9 +6133,6 @@ exports[`single fields password field 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -6410,15 +6155,11 @@ exports[`single fields password field 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -6431,15 +6172,18 @@ exports[`single fields password field 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -6454,7 +6198,7 @@ exports[`single fields password field 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -6468,7 +6212,6 @@ exports[`single fields password field 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3::-webkit-input-placeholder { @@ -6485,13 +6228,6 @@ exports[`single fields password field 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -6519,10 +6255,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -6535,10 +6267,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -6592,9 +6320,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -6607,12 +6332,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -6623,7 +6348,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -6631,13 +6356,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -6659,13 +6385,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -6683,16 +6415,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } -.emotion-8 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } }
    @@ -6780,9 +6506,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields radio field 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -6820,9 +6543,6 @@ exports[`single fields radio field 1`] = ` } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -6834,9 +6554,6 @@ exports[`single fields radio field 1`] = ` } .emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -6858,9 +6575,6 @@ exports[`single fields radio field 1`] = ` } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -6877,8 +6591,8 @@ exports[`single fields radio field 1`] = ` outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 9px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -6889,9 +6603,6 @@ exports[`single fields radio field 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; - padding: 9px; - border-radius: 50%; color: rgba(0, 0, 0, 0.6); } @@ -6911,22 +6622,22 @@ exports[`single fields radio field 1`] = ` } } -.emotion-4:hover { - background-color: rgba(25, 118, 210, 0.04); +.emotion-4.Mui-disabled { + color: rgba(0, 0, 0, 0.26); } -@media (hover: none) { - .emotion-4:hover { - background-color: transparent; - } +.emotion-4:hover { + background-color: rgba(25, 118, 210, 0.04); } .emotion-4.Mui-checked { color: #1976d2; } -.emotion-4.Mui-disabled { - color: rgba(0, 0, 0, 0.26); +@media (hover: none) { + .emotion-4:hover { + background-color: transparent; + } } .emotion-5 { @@ -6944,9 +6655,6 @@ exports[`single fields radio field 1`] = ` .emotion-6 { position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; } @@ -6958,12 +6666,12 @@ exports[`single fields radio field 1`] = ` width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; -webkit-transform: scale(1); -moz-transform: scale(1); @@ -6979,12 +6687,12 @@ exports[`single fields radio field 1`] = ` width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; + transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; + fill: currentColor; font-size: 1.5rem; left: 0; position: absolute; @@ -6992,8 +6700,6 @@ exports[`single fields radio field 1`] = ` -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); - -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; - transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; } .emotion-9 { @@ -7010,9 +6716,6 @@ exports[`single fields radio field 1`] = ` } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -7025,12 +6728,12 @@ exports[`single fields radio field 1`] = ` position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -7041,7 +6744,7 @@ exports[`single fields radio field 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -7049,13 +6752,14 @@ exports[`single fields radio field 1`] = ` letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-18::-moz-focus-inner { @@ -7077,13 +6781,19 @@ exports[`single fields radio field 1`] = ` .emotion-18:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-18.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-18:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-18:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -7101,6 +6811,15 @@ exports[`single fields radio field 1`] = ` background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-18:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    Yes @@ -7246,6 +6966,7 @@ exports[`single fields radio field 1`] = ` No @@ -7257,7 +6978,7 @@ exports[`single fields radio field 1`] = ` className="MuiBox-root emotion-17" >
    @@ -8719,9 +8395,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields select field multiple choice enumDisabled 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -8736,9 +8409,6 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -8761,15 +8431,11 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -8782,15 +8448,18 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -8813,7 +8482,7 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -8827,15 +8496,10 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3:focus { - border-radius: 4px; -} - -.emotion-3::-ms-expand { - display: none; + border-radius: 0; } .emotion-3.Mui-disabled { @@ -8851,6 +8515,10 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` background-color: #fff; } +.emotion-3:focus { + border-radius: 4px; +} + .emotion-3.emotion-3.emotion-3 { padding-right: 32px; } @@ -8877,13 +8545,6 @@ exports[`single fields select field multiple choice enumDisabled 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -8911,10 +8572,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -8927,10 +8584,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -8969,12 +8622,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; position: absolute; right: 7px; @@ -9020,9 +8673,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-9 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9035,12 +8685,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -9051,7 +8701,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -9059,13 +8709,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-9::-moz-focus-inner { @@ -9087,13 +8738,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-9:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-9.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-9:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-9:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -9111,16 +8768,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } -.emotion-10 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; +@media (hover: hover) { + .emotion-9:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } }
    @@ -9236,9 +8887,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields select field multiple choice enumDisabled using checkboxes 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -9276,9 +8924,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -9290,9 +8935,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe } .emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9314,9 +8956,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9333,8 +8972,8 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 9px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -9345,9 +8984,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; - padding: 9px; - border-radius: 50%; color: rgba(0, 0, 0, 0.6); } @@ -9371,12 +9007,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe background-color: rgba(25, 118, 210, 0.04); } -@media (hover: none) { - .emotion-4:hover { - background-color: transparent; - } -} - .emotion-4.Mui-checked, .emotion-4.MuiCheckbox-indeterminate { color: #1976d2; @@ -9386,6 +9016,12 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe color: rgba(0, 0, 0, 0.26); } +@media (hover: none) { + .emotion-4:hover { + background-color: transparent; + } +} + .emotion-5 { cursor: inherit; position: absolute; @@ -9407,12 +9043,12 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; } @@ -9430,9 +9066,6 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe } .emotion-24 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -9445,12 +9078,12 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -9461,7 +9094,7 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -9469,13 +9102,14 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-24::-moz-focus-inner { @@ -9497,13 +9131,19 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe .emotion-24:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-24.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-24:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-24:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -9521,6 +9161,15 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-24:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    foo @@ -9637,6 +9287,7 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe bar @@ -9687,6 +9338,7 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe fuzz @@ -9737,6 +9389,7 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe qux @@ -9748,7 +9401,7 @@ exports[`single fields select field multiple choice enumDisabled using checkboxe className="MuiBox-root emotion-23" >
    @@ -11293,9 +10901,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields select field single choice enumDisabled using radio widget 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -11333,9 +10938,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -11347,9 +10949,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-3 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -11371,9 +10970,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -11390,8 +10986,8 @@ exports[`single fields select field single choice enumDisabled using radio widge outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 50%; + padding: 9px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -11402,9 +10998,6 @@ exports[`single fields select field single choice enumDisabled using radio widge -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; - padding: 9px; - border-radius: 50%; color: rgba(0, 0, 0, 0.6); } @@ -11424,22 +11017,22 @@ exports[`single fields select field single choice enumDisabled using radio widge } } -.emotion-4:hover { - background-color: rgba(25, 118, 210, 0.04); +.emotion-4.Mui-disabled { + color: rgba(0, 0, 0, 0.26); } -@media (hover: none) { - .emotion-4:hover { - background-color: transparent; - } +.emotion-4:hover { + background-color: rgba(25, 118, 210, 0.04); } .emotion-4.Mui-checked { color: #1976d2; } -.emotion-4.Mui-disabled { - color: rgba(0, 0, 0, 0.26); +@media (hover: none) { + .emotion-4:hover { + background-color: transparent; + } } .emotion-5 { @@ -11457,9 +11050,6 @@ exports[`single fields select field single choice enumDisabled using radio widge .emotion-6 { position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; } @@ -11471,12 +11061,12 @@ exports[`single fields select field single choice enumDisabled using radio widge width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + fill: currentColor; font-size: 1.5rem; -webkit-transform: scale(1); -moz-transform: scale(1); @@ -11492,12 +11082,12 @@ exports[`single fields select field single choice enumDisabled using radio widge width: 1em; height: 1em; display: inline-block; - fill: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; - -webkit-transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; + transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; + fill: currentColor; font-size: 1.5rem; left: 0; position: absolute; @@ -11505,8 +11095,6 @@ exports[`single fields select field single choice enumDisabled using radio widge -moz-transform: scale(0); -ms-transform: scale(0); transform: scale(0); - -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; - transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; } .emotion-9 { @@ -11523,9 +11111,6 @@ exports[`single fields select field single choice enumDisabled using radio widge } .emotion-18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -11538,12 +11123,12 @@ exports[`single fields select field single choice enumDisabled using radio widge position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -11554,7 +11139,7 @@ exports[`single fields select field single choice enumDisabled using radio widge -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -11562,13 +11147,14 @@ exports[`single fields select field single choice enumDisabled using radio widge letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-18::-moz-focus-inner { @@ -11590,13 +11176,19 @@ exports[`single fields select field single choice enumDisabled using radio widge .emotion-18:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-18.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-18:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-18:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -11614,6 +11206,15 @@ exports[`single fields select field single choice enumDisabled using radio widge background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-18:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +
    foo @@ -11760,6 +11362,7 @@ exports[`single fields select field single choice enumDisabled using radio widge bar @@ -11771,7 +11374,7 @@ exports[`single fields select field single choice enumDisabled using radio widge className="MuiBox-root emotion-17" >
    @@ -12310,9 +11888,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields slider field 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -12356,19 +11931,13 @@ exports[`single fields slider field 1`] = ` position: relative; cursor: pointer; touch-action: none; - color: #1976d2; -webkit-tap-highlight-color: transparent; + color: #1976d2; height: 4px; width: 100%; padding: 13px 0; } -@media (pointer: coarse) { - .emotion-2 { - padding: 20px 0; - } -} - @media print { .emotion-2 { -webkit-print-color-adjust: exact; @@ -12388,6 +11957,12 @@ exports[`single fields slider field 1`] = ` transition: none; } +@media (pointer: coarse) { + .emotion-2 { + padding: 20px 0; + } +} + .emotion-3 { display: block; position: absolute; @@ -12427,9 +12002,6 @@ exports[`single fields slider field 1`] = ` border-radius: 50%; outline: 0; background-color: currentColor; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -12471,6 +12043,10 @@ exports[`single fields slider field 1`] = ` transform: translate(-50%, -50%); } +.emotion-5.Mui-disabled:hover { + box-shadow: none; +} + .emotion-5:hover, .emotion-5.Mui-focusVisible { box-shadow: 0px 0px 0px 8px rgba(25, 118, 210, 0.16); @@ -12487,10 +12063,6 @@ exports[`single fields slider field 1`] = ` box-shadow: 0px 0px 0px 14px rgba(25, 118, 210, 0.16); } -.emotion-5.Mui-disabled:hover { - box-shadow: none; -} - .emotion-6 { z-index: 1; white-space: nowrap; @@ -12501,17 +12073,10 @@ exports[`single fields slider field 1`] = ` letter-spacing: 0.01071em; -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - -webkit-transform: translateY(-100%) scale(0); - -moz-transform: translateY(-100%) scale(0); - -ms-transform: translateY(-100%) scale(0); - transform: translateY(-100%) scale(0); position: absolute; background-color: #757575; border-radius: 2px; color: #fff; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; @@ -12522,17 +12087,14 @@ exports[`single fields slider field 1`] = ` -webkit-justify-content: center; justify-content: center; padding: 0.25rem 0.75rem; + -webkit-transform: translateY(-100%) scale(0); + -moz-transform: translateY(-100%) scale(0); + -ms-transform: translateY(-100%) scale(0); + transform: translateY(-100%) scale(0); top: -10px; transform-origin: bottom center; } -.emotion-6.MuiSlider-valueLabelOpen { - -webkit-transform: translateY(-100%) scale(1); - -moz-transform: translateY(-100%) scale(1); - -ms-transform: translateY(-100%) scale(1); - transform: translateY(-100%) scale(1); -} - .emotion-6::before { position: absolute; content: ""; @@ -12547,14 +12109,18 @@ exports[`single fields slider field 1`] = ` left: 50%; } +.emotion-6.MuiSlider-valueLabelOpen { + -webkit-transform: translateY(-100%) scale(1); + -moz-transform: translateY(-100%) scale(1); + -ms-transform: translateY(-100%) scale(1); + transform: translateY(-100%) scale(1); +} + .emotion-7 { margin-top: 24px; } .emotion-8 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -12567,12 +12133,12 @@ exports[`single fields slider field 1`] = ` position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -12583,7 +12149,7 @@ exports[`single fields slider field 1`] = ` -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -12591,13 +12157,14 @@ exports[`single fields slider field 1`] = ` letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-8::-moz-focus-inner { @@ -12619,13 +12186,19 @@ exports[`single fields slider field 1`] = ` .emotion-8:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-8.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-8:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-8:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -12643,16 +12216,13 @@ exports[`single fields slider field 1`] = ` background-color: rgba(0, 0, 0, 0.12); } -.emotion-9 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; +@media (hover: hover) { + .emotion-8:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } }
    @@ -12784,9 +12352,6 @@ exports[`single fields slider field 1`] = ` exports[`single fields string field format data-url 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -12801,9 +12366,6 @@ exports[`single fields string field format data-url 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -12826,15 +12388,11 @@ exports[`single fields string field format data-url 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -12847,15 +12405,18 @@ exports[`single fields string field format data-url 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -12870,7 +12431,7 @@ exports[`single fields string field format data-url 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -12884,7 +12445,6 @@ exports[`single fields string field format data-url 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3::-webkit-input-placeholder { @@ -12901,13 +12461,6 @@ exports[`single fields string field format data-url 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -12935,10 +12488,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -12951,10 +12500,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -13008,9 +12553,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -13023,12 +12565,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -13039,7 +12581,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -13047,13 +12589,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -13075,13 +12618,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -13099,16 +12648,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } -.emotion-8 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } }
    @@ -13198,9 +12741,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields string field format email 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -13215,9 +12755,6 @@ exports[`single fields string field format email 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -13240,15 +12777,11 @@ exports[`single fields string field format email 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -13261,15 +12794,18 @@ exports[`single fields string field format email 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -13284,7 +12820,7 @@ exports[`single fields string field format email 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -13298,7 +12834,6 @@ exports[`single fields string field format email 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3::-webkit-input-placeholder { @@ -13315,13 +12850,6 @@ exports[`single fields string field format email 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -13349,10 +12877,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -13365,10 +12889,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -13422,9 +12942,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -13437,12 +12954,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -13453,7 +12970,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -13461,13 +12978,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -13489,13 +13007,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -13513,16 +13037,13 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } -.emotion-8 { - overflow: hidden; - pointer-events: none; - position: absolute; - z-index: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: inherit; +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } }
    @@ -13610,9 +13128,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p exports[`single fields string field format uri 1`] = ` .emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -13627,9 +13142,6 @@ exports[`single fields string field format uri 1`] = ` } .emotion-1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -13652,15 +13164,11 @@ exports[`single fields string field format uri 1`] = ` box-sizing: border-box; position: relative; cursor: text; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; - position: relative; border-radius: 4px; } @@ -13673,15 +13181,18 @@ exports[`single fields string field format uri 1`] = ` border-color: rgba(0, 0, 0, 0.87); } -@media (hover: none) { - .emotion-2:hover .MuiOutlinedInput-notchedOutline { - border-color: rgba(0, 0, 0, 0.23); - } +.emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { + border-width: 2px; } .emotion-2.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #1976d2; - border-width: 2px; +} + +@media (hover: none) { + .emotion-2:hover .MuiOutlinedInput-notchedOutline { + border-color: rgba(0, 0, 0, 0.23); + } } .emotion-2.Mui-error .MuiOutlinedInput-notchedOutline { @@ -13696,7 +13207,7 @@ exports[`single fields string field format uri 1`] = ` font: inherit; letter-spacing: inherit; color: currentColor; - padding: 4px 0 5px; + padding: 16.5px 14px; border: 0; box-sizing: content-box; background: none; @@ -13710,7 +13221,6 @@ exports[`single fields string field format uri 1`] = ` animation-name: mui-auto-fill-cancel; -webkit-animation-duration: 10ms; animation-duration: 10ms; - padding: 16.5px 14px; } .emotion-3::-webkit-input-placeholder { @@ -13727,13 +13237,6 @@ exports[`single fields string field format uri 1`] = ` transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } -.emotion-3:-ms-input-placeholder { - color: currentColor; - opacity: 0.42; - -webkit-transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; -} - .emotion-3::-ms-input-placeholder { color: currentColor; opacity: 0.42; @@ -13761,10 +13264,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-moz-placeholder opacity: 0!important; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:-ms-input-placeholder { - opacity: 0!important; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3::-ms-input-placeholder { opacity: 0!important; } @@ -13777,10 +13276,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-moz-placeh opacity: 0.42; } -label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus:-ms-input-placeholder { - opacity: 0.42; -} - label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-placeholder { opacity: 0.42; } @@ -13834,9 +13329,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p } .emotion-7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; -webkit-align-items: center; -webkit-box-align: center; @@ -13849,12 +13341,12 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p position: relative; box-sizing: border-box; -webkit-tap-highlight-color: transparent; - background-color: transparent; + background-color: var(--variant-containedBg); outline: 0; border: 0; margin: 0; - border-radius: 0; - padding: 0; + border-radius: 4px; + padding: 6px 16px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -13865,7 +13357,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p -webkit-appearance: none; -webkit-text-decoration: none; text-decoration: none; - color: inherit; + color: var(--variant-containedColor); font-family: "Roboto","Helvetica","Arial",sans-serif; font-weight: 500; font-size: 0.875rem; @@ -13873,13 +13365,14 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p letter-spacing: 0.02857em; text-transform: uppercase; min-width: 64px; - padding: 6px 16px; - border-radius: 4px; -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - color: #fff; - background-color: #1976d2; box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); + --variant-textColor: #1976d2; + --variant-outlinedColor: #1976d2; + --variant-outlinedBorder: rgba(25, 118, 210, 0.5); + --variant-containedColor: #fff; + --variant-containedBg: #1976d2; } .emotion-7::-moz-focus-inner { @@ -13901,13 +13394,19 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p .emotion-7:hover { -webkit-text-decoration: none; text-decoration: none; - background-color: #1565c0; +} + +.emotion-7.Mui-disabled { + color: rgba(0, 0, 0, 0.26); +} + +.emotion-7:hover { box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); } @media (hover: none) { .emotion-7:hover { - background-color: #1976d2; + box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); } } @@ -13925,6 +13424,15 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p background-color: rgba(0, 0, 0, 0.12); } +@media (hover: hover) { + .emotion-7:hover { + --variant-containedBg: #1565c0; + --variant-textBg: rgba(25, 118, 210, 0.04); + --variant-outlinedBorder: #1976d2; + --variant-outlinedBg: rgba(25, 118, 210, 0.04); + } +} +