diff --git a/.circleci/config.yml b/.circleci/config.yml index 2b00a64a8219ed..4957511907cb86 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -234,12 +234,6 @@ jobs: - run: name: '`yarn docs:i18n` changes committed?' command: git diff --exit-code - - run: - name: '`yarn framer:build` changes committed?' - command: yarn workspace framer build - - run: - name: '`yarn workspace framer build` changes committed?' - command: git diff --exit-code - run: name: '`yarn extract-error-codes` changes committed?' command: | diff --git a/.eslintignore b/.eslintignore index b9130ad1f4b84b..994e23efd8ff66 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,8 +7,6 @@ /examples/gatsby/public/ /examples/preact/config /examples/preact/scripts -# auto-generated by Framer -/framer/Material-UI.framerfx/design/document.json /packages/mui-codemod/lib /packages/mui-codemod/src/*/*.test/* /packages/mui-icons-material/fixtures diff --git a/.eslintrc.js b/.eslintrc.js index 0c8198b47cc3a6..fee270cca4bfe3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -343,13 +343,6 @@ module.exports = { 'react/static-property-placement': 'off', }, }, - { - files: ['framer/Material-UI.framerfx/code/**/*.tsx'], - rules: { - // framer requires named exports - 'import/prefer-default-export': 'off', - }, - }, { files: ['packages/typescript-to-proptypes/src/**/*.ts'], rules: { diff --git a/CHANGELOG.md b/CHANGELOG.md index e83922f98029c0..5326a22dcc3acd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,70 @@ # [Versions](https://mui.com/versions/) +## 5.4.2 + +_Feb 15, 2022_ + +A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨: + +- 🛠 @sydneyjodon-wk improved propTypes of the ToggleButton components (#30883) +- Several 🐛 bug fixes and 📚 documentation improvements + +### `@mui/material@5.4.2` + +- [Select] Allow customizing Select based on its variant (#30788) @michaldudak +- [Portal] Re-export 'Portal' in material (#31003) @liradb2000 +- [ToggleButton] Add prop types for `onClick` and `onChange` (#30883) @sydneyjodon-wk +- [Typescript] Added TypeText declaration to the exports file (#30890) @agauravdev + +### `@mui/system@5.4.2` + +- [system] Fix broken behavior when breakpoints input are not ordered (#30996) @mnajdova + +### `@mui/lab@5.0.0-alpha.69` + +- [DatePicker] Fix passing clearable prop (#30786) @alisasanib + +### `@mui/joy@5.0.0-alpha.15` + +- [Joy] Improve variant customization experience (#30878) @siriwatknp +- [Joy] Make `sx` prop work in Joy (#30955) @siriwatknp + +### Framer + +- [design] Remove framer components (#30983) @mbrookes +- [design] Remove framer leftovers (#31070) @michaldudak + +### Docs + +- [docs] Update installation guide of the icons package (#31026) @huyenltnguyen +- [docs] Improve the indication for the legacy APIs (#30995) @mnajdova +- [docs] Specify which props are added in the default `shouldForwardProp` option (#30978) @mnajdova +- [docs] Fix layout shift on loading (#31017) @oliviertassinari +- [docs] Increase scroll affordance in wide tables (#30713) @danilo-leal +- [docs] Fix look & feel of the Masonry demos (#30971) @oliviertassinari +- [docs] Improve Base component demos (#30884) @danilo-leal +- [docs] Use full product names (Material UI, MUI System) (#30960) @oliviertassinari +- [docs] Prefer useEnhancedEffect to avoid server side warnings (#30977) @mnajdova +- [docs] Fix force redirection to a different locale (#30967) @oliviertassinari +- [docs] Add live Tailwind CSS demo (#30966) @oliviertassinari +- [website] Add banner for promoting priority open roles (#31076) @danilo-leal +- [website] Open Full-stack Engineer role for studio (#31038) @newguy-123 +- [website] Minor security improvements (#31062) @oliviertassinari +- [website] Improve title of open roles (#30963) @DanailH +- [website] Add BIMI avatar (#30444) @oliviertassinari +- [website] Add Sycamore to About page (#31000) @samuelsycamore + +### Core + +- [benchmark] Add missing dependency (#30994) @michaldudak +- [core] Bump date-io version (#31016) @michaldudak +- [core] Fix typo in useSlider (#31061) @ryohey +- [core] Remove unused draft-js types package (#30993) @michaldudak +- [test] Test if certain Base members are exported from Material UI (#31067) @michaldudak +- [core] Remove dead code (#31064) @oliviertassinari + +All contributors of this release in alphabetical order: @agauravdev, @alisasanib, @DanailH, @danilo-leal, @huyenltnguyen, @l10nbot, @liradb2000, @mbrookes, @michaldudak, @mnajdova, @newguy-123, @oliviertassinari, @ryohey, @samuelsycamore, @siriwatknp, @sydneyjodon-wk + ## 5.4.1 diff --git a/benchmark/package.json b/benchmark/package.json index ca1fda90044750..66435989674038 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -15,9 +15,9 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mdx-js/react": "^2.0.0", - "@mui/material": "^5.4.1", - "@mui/styles": "^5.4.1", - "@mui/system": "^5.4.1", + "@mui/material": "^5.4.2", + "@mui/styles": "^5.4.2", + "@mui/system": "^5.4.2", "@styled-system/css": "^5.1.5", "benchmark": "^2.1.4", "playwright": "^1.17.1", diff --git a/docs/data/material/components/accordion/accordion-zh.md b/docs/data/material/components/accordion/accordion-zh.md index 4d4459b5d803a8..850069de3a2faf 100644 --- a/docs/data/material/components/accordion/accordion-zh.md +++ b/docs/data/material/components/accordion/accordion-zh.md @@ -2,7 +2,7 @@ product: material title: React Accordion （扩展面板）组件 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary -githubLabel: 'component: Accordion' +githubLabel: 'component: accordion' materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' --- @@ -41,7 +41,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' ``` -不过对所有情况下的性能优化，这并不是灵丹妙药。 Be sure to identify bottlenecks first and then try out these optimization strategies. +不过对所有情况下的性能优化，这并不是灵丹妙药。 一定要先确定哪些地方存在瓶颈，然后再尝试这些优化策略。 ## 无障碍设计 diff --git a/docs/data/material/components/alert/alert-zh.md b/docs/data/material/components/alert/alert-zh.md index c5c36d29ec7200..0307fcba047a96 100644 --- a/docs/data/material/components/alert/alert-zh.md +++ b/docs/data/material/components/alert/alert-zh.md @@ -2,7 +2,7 @@ product: material title: React Alert （警告提示）组件 components: Alert, AlertTitle -githubLabel: 'component: Alert' +githubLabel: 'component: alert' waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert' --- diff --git a/docs/data/material/components/app-bar/app-bar-zh.md b/docs/data/material/components/app-bar/app-bar-zh.md index 90625d23a0173f..cd64db23fcf249 100644 --- a/docs/data/material/components/app-bar/app-bar-zh.md +++ b/docs/data/material/components/app-bar/app-bar-zh.md @@ -136,7 +136,7 @@ function HideOnScroll(props) { const trigger = useScrollTrigger(); return ( -
你好
+
Hello
 ); } diff --git a/docs/data/material/components/autocomplete/autocomplete-zh.md b/docs/data/material/components/autocomplete/autocomplete-zh.md index df97d4dd550ce4..2be3b61c6379e9 100644 --- a/docs/data/material/components/autocomplete/autocomplete-zh.md +++ b/docs/data/material/components/autocomplete/autocomplete-zh.md @@ -281,12 +281,7 @@ const filterOptions = (options, { inputValue }) => matchSorter(options, inputVal { if (event.key === 'Enter') { - // 阻止默认的 'Enter' 行为. - event.defaultMuiPrevented = true; - // 你的处理程序代码 - } - }} -/> + // Prevent's default 'Enter' behavior. event.defaultMuiPrevented = true; // your handler code } diff --git a/docs/data/material/components/avatars/avatars-zh.md b/docs/data/material/components/avatars/avatars-zh.md index 4f376d54276715..9133e9cf792237 100644 --- a/docs/data/material/components/avatars/avatars-zh.md +++ b/docs/data/material/components/avatars/avatars-zh.md @@ -23,7 +23,7 @@ githubLabel: 'component: avatar' {{"demo": "LetterAvatars.js"}} -You can use different background colors for the avatar. The following demo generates the color based on the name of the person. +你可以为头像添加不同的背景颜色。 下面的例子基于人物的姓名生成背景色。 {{"demo": "BackgroundLetterAvatars.js"}} @@ -57,13 +57,13 @@ You can use different background colors for the avatar. The following demo gener ## 分组 -`AvatarGroup` renders its children as a stack. `AvatarGroup` renders its children as a stack. Use the `max` prop to limit the number of avatars. +`AvatarGroup` 将其子元素渲染为堆栈。 用 `max` 属性限制渲染的头像数量。 {{"demo": "GroupAvatars.js"}} -### Total avatars +### 头像总数 -If you need to control the total number of avatars not shown, you can use the `total` prop. +您可以使用 `total` 属性来控制未显示的头像总数。 {{"demo": "TotalAvatars.js"}} diff --git a/docs/data/material/components/backdrop/backdrop-zh.md b/docs/data/material/components/backdrop/backdrop-zh.md index 01fbddecbc66bf..cc02b0d6603a0b 100644 --- a/docs/data/material/components/backdrop/backdrop-zh.md +++ b/docs/data/material/components/backdrop/backdrop-zh.md @@ -1,8 +1,8 @@ --- product: material -title: React Backdrop（背景暗化）组件 +title: React Backdrop（蒙版）组件 components: Backdrop, BackdropUnstyled -githubLabel: '组件：背景暗化' +githubLabel: 'component: backdrop' --- # 蒙版 @@ -19,7 +19,7 @@ githubLabel: '组件：背景暗化' ## 素颜模式 -The backdrop also comes with the Base package. The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size. It's ideal for doing heavy customizations and minimizing bundle size. +蒙版组件同样来自基础包。 当你有大量的自定义样式需求时，使用它可以更好的帮助你控制住包的大小。 ```js import BackdropUnstyled from '@mui/base/BackdropUnstyled'; diff --git a/docs/data/material/components/badges/badges-zh.md b/docs/data/material/components/badges/badges-zh.md index cbdb9ee852c01c..9a0815f800429f 100644 --- a/docs/data/material/components/badges/badges-zh.md +++ b/docs/data/material/components/badges/badges-zh.md @@ -65,7 +65,7 @@ Use `color` prop to apply theme palette to component. ## Unstyled -Badge 组件还有一个无样式的版本。 It's ideal for doing heavy customizations and minimizing bundle size. +Badge 组件还有一个无样式的版本。 当你有大量的自定义样式需求时，使用它可以更好的帮助你控制住包的大小。 ```js import BadgeUnstyled from '@mui/base/BadgeUnstyled'; @@ -75,6 +75,6 @@ import BadgeUnstyled from '@mui/base/BadgeUnstyled'; ## Accessibility -You can't rely on the content of the badge to be announced correctly. You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: 那您应该提供一个完整的描述，例如， 使用 `aria-label`： +您不能指望徽章的内容被正确的读出。 您应该提供一个完整的描述，例如， 使用 `aria-label`： {{"demo": "AccessibleBadges.js"}} diff --git a/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md b/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md index 24c0212fdd8d40..91f9b11a3c75c6 100644 --- a/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md +++ b/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md @@ -32,6 +32,6 @@ materialDesign: https://material.io/components/bottom-navigation {{"demo": "FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}} -## Third-party routing library（第三方路由库） +## 第三方路由库 -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The `BottomNavigationAction` component provides the `component` prop to handle this use case. Here is a [more detailed guide](/guides/routing/). +一种常见的用例是仅在客户端上执行导航，而无需通过 HTTP 往返服务器。 针对这种用法，`Link` 组件了提供 `component` 属性来适配它。 这里是 [更详细的指南](/guides/routing/)。 diff --git a/docs/data/material/components/box/box-zh.md b/docs/data/material/components/box/box-zh.md index 160d56fff3ab1b..df3389168923c3 100644 --- a/docs/data/material/components/box/box-zh.md +++ b/docs/data/material/components/box/box-zh.md @@ -18,19 +18,19 @@ githubLabel: 'component: Box' ## `sx` 属性 -All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop). In addition, the `sx` prop allows you to specify any other CSS rules you may need. 下面是一个如何使用的示例： 此外，`sx` 属性允许您指定您可能需要的任何其他 CSS 样式。 In addition, the `sx` prop allows you to specify any other CSS rules you may need. 下面是一个如何使用的示例： +所有的样式功能都可以通过 [`sx` 属性 ](/system/basics/#the-sx-prop)设置。 同时，您也可通过`sx` 属性指定任何您想添加的 CSS 规则。 下面是一个如何使用的示例： {{"demo": "BoxSx.js", "defaultCodeOpen": true }} ## 覆盖 Material-UI 组件 -Box 组件能够封装您的组件。 It creates a new DOM element, a `
` that by default can be changed with the `component` prop. 假设反之你想使用一个 ``： 假设反之你想使用一个 ``： +Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素，默认情况下为 `
`，并可以通过 ` component ` 属性进行更改。 假设您想使用 ``： {{"demo": "BoxComponent.js", "defaultCodeOpen": true }} 当所需的更改与新的 DOM 元素分开时比较有效。 例如，您可以使用这个方法来更改边距。 -但是，有时您必须针对到底层的 DOM 元素。 As an example, you may want to change the border of the Button. The Button component defines its own styles. 所以使用 CSS 继承是于事无补的。 想要解决这个问题，可以将[`sx`](/system/basics/#the-sx-prop)作为 MUI 组件的 props 使用 +但是，有时您的目标是下层的 DOM 元素。 例如，你可能想要更改 Button 组件的边框。 Button 组件已经定义好了它自己的样式。 所以使用 CSS 继承是于事无补的。 为了回避这个CSS继承无效的问题， 如该组件的子组件是一个 Material-UI 组件，您可直接在该组件上定义 [`sx`](/system/basics/#the-sx-prop) 属性。 ```diff - @@ -39,7 +39,7 @@ Box 组件能够封装您的组件。 It creates a new DOM element, a `
` th + ``` -For non-Material-UI components, use the `component` prop. +对于非 MUI 组件，使用 `component` 属性。 ```diff - diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index 4404e6f7f114c4..af68f794013dc7 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -55,7 +55,7 @@ You can use the following actions. You can add ornaments to the beginning of the component. -Use the `avatar` prop to added a avatar or use the `icon` prop to added a icon. +Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon. ### Avatar chip diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index 2e415cc3ec7bea..310a418b04f658 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -36,15 +36,7 @@ yarn add @mui/icons-material These components use the MUI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`. -If you aren't already using MUI in your project, you can add it with: - -```sh -// with npm -npm install @mui/material - -// with yarn -yarn add @mui/material -``` +If you aren't already using Material UI in your project, you can add it following the [installation guide](/getting-started/installation/). ### Usage diff --git a/docs/data/material/components/stack/stack-pt.md b/docs/data/material/components/stack/stack-pt.md index 0dc3c6dfe75968..b63f82dc2b00d9 100644 --- a/docs/data/material/components/stack/stack-pt.md +++ b/docs/data/material/components/stack/stack-pt.md @@ -7,7 +7,7 @@ githubLabel: 'component: Stack' # Stack -

The Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing and/or dividers between each child.

+

O componente Stack gerencia o leiaute de filhos imediatos ao longo do eixo vertical ou horizontal com espaçamento e/ou divisão opcional entre cada filho.

{{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/getting-started/example-projects/example-projects-pt.md b/docs/data/material/getting-started/example-projects/example-projects-pt.md index 8503463c0c49d4..3c1bd2b7d7a7c3 100644 --- a/docs/data/material/getting-started/example-projects/example-projects-pt.md +++ b/docs/data/material/getting-started/example-projects/example-projects-pt.md @@ -8,14 +8,14 @@ Você pode encontrar alguns exemplos de projetos no repositório [GitHub](https: -- [Next.js](https://github.com/mui/material-ui/tree/next/examples/nextjs) ([Versão TypeScript](https://github.com/mui/material-ui/tree/next/examples/nextjs-with-typescript)) -- [Create React App](https://github.com/mui/material-ui/tree/next/examples/create-react-app) ([versão TypeScript](https://github.com/mui/material-ui/tree/next/examples/create-react-app-with-typescript)) +- [Next.js](https://github.com/mui/material-ui/tree/master/examples/nextjs) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript)) +- [Create React App](https://github.com/mui/material-ui/tree/master/examples/create-react-app) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-typescript)) - [Remix](https://github.com/mui/material-ui/tree/master/examples/remix-with-typescript) - [Gatsby](https://github.com/mui/material-ui/tree/master/examples/gatsby) - [Preact](https://github.com/mui/material-ui/tree/master/examples/preact) - [CDN](https://github.com/mui/material-ui/tree/master/examples/cdn) - [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/ssr) -- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind) +- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind-css) - [Vite.js](https://github.com/mui/material-ui/tree/master/examples/vitejs) - [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript)) diff --git a/docs/data/material/getting-started/example-projects/example-projects-zh.md b/docs/data/material/getting-started/example-projects/example-projects-zh.md index 467302683d1b82..1effbe63e98cab 100644 --- a/docs/data/material/getting-started/example-projects/example-projects-zh.md +++ b/docs/data/material/getting-started/example-projects/example-projects-zh.md @@ -15,7 +15,7 @@ - [Preact](https://github.com/mui/material-ui/tree/master/examples/preact) - [CDN](https://github.com/mui/material-ui/tree/master/examples/cdn) - [Plain server-side](https://github.com/mui/material-ui/tree/master/examples/ssr) -- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind) +- [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind-css) - [Vite.js](https://github.com/mui/material-ui/tree/master/examples/vitejs) - [Use styled-components as style engine](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components) ([TypeScript version](https://github.com/mui/material-ui/tree/master/examples/create-react-app-with-styled-components-typescript)) diff --git a/docs/data/material/getting-started/faq/faq-zh.md b/docs/data/material/getting-started/faq/faq-zh.md index 9648a166e39f79..1243d4cf487c05 100644 --- a/docs/data/material/getting-started/faq/faq-zh.md +++ b/docs/data/material/getting-started/faq/faq-zh.md @@ -28,7 +28,7 @@ 涟漪效果完全来自 `BaseButton` 组件。 您可以通过在您的主题中提供以下内容，来全局地禁用涟漪效果： ```js -import { createTheme } from '@material-ui/core'; +import { createTheme } from '@mui/material'; const theme = createTheme({ components: { @@ -40,14 +40,6 @@ const theme = createTheme({ }, }, }, -}); - }, - }, - }, -}); - }, - }, - }, }); ``` @@ -56,7 +48,7 @@ const theme = createTheme({ Material-UI 使用相同的主题助手来创建其所有的过渡动画。 因此，您可以通过覆盖主题助手来禁用所有的过渡： ```js -import { createTheme } from '@material-ui/core'; +import { createTheme } from '@mui/material'; const theme = createTheme({ transitions: { @@ -71,7 +63,7 @@ const theme = createTheme({ 您可以更进一步地禁用所有的过渡和动画效果。 ```js -import { createTheme } from '@material-ui/core'; +import { createTheme } from '@mui/material'; const theme = createTheme({ components: { @@ -166,7 +158,7 @@ const element = ref.current; ```diff resolve: { + alias: { -+ "@material-ui/styles": path.resolve(appFolder, "node_modules", "@material-ui/styles"), ++ "@mui/styles": path.resolve(appFolder, "node_modules", "@mui/styles"), + } } ``` @@ -208,7 +200,7 @@ Lerna 根目录下的 package.json 文件示例： ```diff module.exports = { entry: { -+ vendor: ["@material-ui/styles"], ++ vendor: ["@mui/styles"], app1: "./src/app.1.js", app2: "./src/app.2.js", }, @@ -305,14 +297,6 @@ return ( selected ? 'Mui-selected' : '' }`} /> -); 'Mui-disabled' : ''} ${ - selected ? 'Mui-selected' : '' - }`} - /> -); 'Mui-disabled' : ''} ${ - selected ? 'Mui-selected' : '' - }`} - /> ); ``` @@ -416,16 +400,10 @@ The class names value relies on the concept of [class name generator](/styles/ad ```diff "dependencies": { ... - "dependencies": { - ... - "dependencies": { - ... - - "@material-ui/core": "^4.0.0", - + "@material-ui/core": "4.0.0", + - "@mui/material": "^4.0.0", + + "@mui/material": "4.0.0", ... }, - }, - }, ``` - 请确保服务端和客户端之间所共享的是相同的 `process.env.NODE_ENV` 值。 diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md index 84230fd532cb4b..fd0ba5f6a9500a 100644 --- a/docs/data/material/getting-started/support/support.md +++ b/docs/data/material/getting-started/support/support.md @@ -52,23 +52,7 @@ Receive the latest news on MUI. ### Supported versions -MUI Core has been open-source ([MIT](https://tldrlegal.com/license/mit-license)) since the very beginning, and always will be. -Developers can ensure MUI is the right choice for their React applications through MUI's community maintenance strategy. -The MUI team regularly ships new releases, bug fixes, and is very welcoming to community pull requests. - -Given the reality of time and resource constraints, as well as the desire to keep innovating, over time it becomes necessary to shift focus to newer versions of the framework ([our release schedule](https://mui.com/versions/#release-frequency)), while making the transition to newer versions as smooth as possible, including publishing migration guides such as [this one for v5](/guides/migration-v4/). -The open-source community is always welcome to submit new features and bug fixes as well. - -The current status of each MUI version is as follows: - -- MUI Core v5 (emotion): ✅ In active development. -- MUI Core v4 (hooks): ⚠️ Only handle security fixes. -- MUI Core v3 (change supported browsers): ❌ Inactive. -- ~MUI Core v2 (never existed)~. -- MUI Core v1 (rewrite): ❌ Inactive. -- MUI Core v0.x: ❌ Inactive. - -For teams and organizations that require additional support for older versions, MUI has [options available](#professional-support-premium). +Find details on the [supported versions](/versions/#supported-versions). ## Professional support (premium) diff --git a/docs/data/material/getting-started/usage/usage-zh.md b/docs/data/material/getting-started/usage/usage-zh.md index 26eadc68b26b6c..c7d3024178d06d 100644 --- a/docs/data/material/getting-started/usage/usage-zh.md +++ b/docs/data/material/getting-started/usage/usage-zh.md @@ -13,7 +13,7 @@ MUI components work in isolation. MUI components work in isolation. **它们是 ```jsx import * as React from 'react'; import ReactDOM from 'react-dom'; -import Button from '@material-ui/core/Button'; +import Button from '@mui/material/Button'; function App() { return ; diff --git a/docs/data/material/guides/interoperability/interoperability-pt.md b/docs/data/material/guides/interoperability/interoperability-pt.md index 32f826c1854baa..388855827d6fc9 100644 --- a/docs/data/material/guides/interoperability/interoperability-pt.md +++ b/docs/data/material/guides/interoperability/interoperability-pt.md @@ -594,10 +594,12 @@ Funciona exatamente como styled components. Você pode [usar o mesmo guia](/guid ![stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/tailwindcss) +### Setup + If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind) example project. If you use a different framework, or already have set up your project, follow these steps: 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation. -2. Remove Tailwind's `base` directive in favor of the `CSSBaseline` component provided by `@mui/material`, as it plays nicer with the MUI components. +2. Remove Tailwind's `base` directive in favor of the `CssBaseline` component provided by `@mui/material`, as it plays nicer with the MUI components. **index.css** @@ -607,7 +609,7 @@ If you are used to Tailwind CSS and want to use it together with the MUI compone @tailwind utilities; ``` -3. Add the `important` option, using the id of your app wrapper, for example `"#root"`. +3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js and `"#root"` for CRA: **tailwind.config.js** @@ -625,11 +627,9 @@ If you are used to Tailwind CSS and want to use it together with the MUI compone ``` -This is necessary for ensuring that the [deeper elements](#deeper-elements-5), can be customized using Tailwind's utility classes. More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy - -4. Fix the CSS injection order +Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary. However, in a few edge cases, MUI uses nested CSS selectors that win over Tailwind CSS. Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes. More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: +4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: ```jsx import * as React from 'react'; @@ -670,9 +670,15 @@ export default function CssModulesPriority() { **Note:** If you are using styled-components and have `StyleSheetManager` with a custom `target`, make sure that the target is the first element in the HTML ``. If you are curious to see how it can be done, you can take a look at the [`StyledEngineProvider`](https://github.com/mui/material-ui/blob/master/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.js) implementation in the `@mui/styled-engine-sc` package. +### Usage + Now it's all set up and you can start using Tailwind CSS on the MUI components! -**App.js** +{{"demo": "StyledComponents.js", "hideToolbar": true}} + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-ndkshy?file=pages%2Findex.tsx) + +**index.tsx** ```jsx import * as React from 'react'; @@ -681,7 +687,8 @@ import Slider from '@mui/material/Slider'; export default function App() { return (
- + +
); } @@ -691,9 +698,11 @@ export default function App() { If you attempt to style the Slider, for example, you'll likely want to customize its child elements. -This example showcases how to override the Slider's `thumb`style. +This example showcases how to override the Slider's `thumb` style. -**SliderThumbOverrides.js** +{{"demo": "StyledComponentsDeep.js", "hideToolbar": true}} + +**SliderThumbOverrides.tsx** ```jsx import * as React from 'react'; @@ -701,10 +710,14 @@ import Slider from '@mui/material/Slider'; export default function SliderThumbOverrides() { return ( - +
+ + +
); } ``` @@ -713,14 +726,14 @@ export default function SliderThumbOverrides() { If you want to style a component's pseudo-state, you can use the appropriate key in the `classes` prop. Here is an example of how you can style the Slider's active state: -**SliderPseudoStateOverrides.js** +**SliderPseudoStateOverrides.tsx** ```jsx import * as React from 'react'; import Slider from '@mui/material/Slider'; export default function SliderThumbOverrides() { - return ; + return ; } ``` diff --git a/docs/data/material/guides/interoperability/interoperability-zh.md b/docs/data/material/guides/interoperability/interoperability-zh.md index 5bbfa031bf5777..200a6a05650a2f 100644 --- a/docs/data/material/guides/interoperability/interoperability-zh.md +++ b/docs/data/material/guides/interoperability/interoperability-zh.md @@ -588,10 +588,12 @@ Emotion 的 **css()** 方法与 Material-UI 无缝协作。 ![stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/tailwindcss) +### Setup + If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/tailwind) example project. If you use a different framework, or already have set up your project, follow these steps: 1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation. -2. Remove Tailwind's `base` directive in favor of the `CSSBaseline` component provided by `@mui/material`, as it plays nicer with the MUI components. +2. Remove Tailwind's `base` directive in favor of the `CssBaseline` component provided by `@mui/material`, as it plays nicer with the MUI components. **index.css** @@ -601,7 +603,7 @@ If you are used to Tailwind CSS and want to use it together with the MUI compone @tailwind utilities; ``` -3. Add the `important` option, using the id of your app wrapper, for example `"#root"`. +3. Add the `important` option, using the id of your app wrapper. For example, `#__next` for Next.js and `"#root"` for CRA: **tailwind.config.js** @@ -619,11 +621,9 @@ If you are used to Tailwind CSS and want to use it together with the MUI compone ``` -This is necessary for ensuring that the [deeper elements](#deeper-elements-5), can be customized using Tailwind's utility classes. More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy - -4. Fix the CSS injection order +Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary. However, in a few edge cases, MUI uses nested CSS selectors that win over Tailwind CSS. Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes. More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: +4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives MUI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in MUI: ```jsx import * as React from 'react'; @@ -662,11 +662,17 @@ export default function PlainCssPriority() { } ``` -**Note:** If you are using styled-components and have `StyleSheetManager` with a custom `target`, make sure that the target is the first element in the HTML ``. If you are curious to see how it can be done, you can take a look on the `StylesProvider` implementation in the `@material-ui/styled-engine-sc` package. If you are curious to see how it can be done, you can take a look on the `StylesProvider` implementation in the `@mui/styled-engine-sc` package. If you are curious to see how it can be done, you can take a look at the [`StyledEngineProvider`](https://github.com/mui/material-ui/blob/master/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.js) implementation in the `@mui/styled-engine-sc` package. +**Note:** If you are using styled-components and have `StyleSheetManager` with a custom `target`, make sure that the target is the first element in the HTML ``. If you are curious to see how it can be done, you can take a look at the [`StyledEngineProvider`](https://github.com/mui/material-ui/blob/master/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.js) implementation in the `@mui/styled-engine-sc` package. + +### Usage Now it's all set up and you can start using Tailwind CSS on the MUI components! -**App.js** +{{"demo": "StyledComponents.js", "hideToolbar": true}} + +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-ndkshy?file=pages%2Findex.tsx) + +**index.tsx** ```jsx import * as React from 'react'; @@ -675,7 +681,8 @@ import Slider from '@mui/material/Slider'; export default function App() { return (
- + +
); } @@ -685,9 +692,11 @@ export default function App() { If you attempt to style the Slider, for example, you'll likely want to customize its child elements. -This example showcases how to override the Slider's `thumb`style. +This example showcases how to override the Slider's `thumb` style. + +{{"demo": "StyledComponentsDeep.js", "hideToolbar": true}} -**SliderThumbOverrides.js** +**SliderThumbOverrides.tsx** ```jsx import * as React from 'react'; @@ -695,10 +704,14 @@ import Slider from '@mui/material/Slider'; export default function SliderThumbOverrides() { return ( - +
+ + +
); } ``` @@ -707,16 +720,15 @@ export default function SliderThumbOverrides() { If you want to style a component's pseudo-state, you can use the appropriate key in the `classes` prop. Here is an example of how you can style the Slider's active state: -**SliderPseudoStateOverrides.js** +**SliderPseudoStateOverrides.tsx** ```jsx import * as React from 'react'; -import { StyledEngineProvider } from '@mui/material/styles'; +import Slider from '@mui/material/Slider'; -export default function GlobalCssPriority() { - return ( - - {/* Your component tree. 现在你可以覆盖 Material-UI 的样式。 +export default function SliderThumbOverrides() { + return ; +} ``` ## ~~JSS~~ TSS diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md index 9705e5a6c16c89..a6e6ca5a1a4986 100644 --- a/docs/data/styles/advanced/advanced.md +++ b/docs/data/styles/advanced/advanced.md @@ -1,8 +1,12 @@ -# Advanced +# Advanced (LEGACY)

This section covers more advanced usage of @mui/styles.

-> **Note**: `@mui/styles` is the _**legacy**_ styling solution for MUI. It is deprecated in v5. It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore. If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. +> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative. + +> ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18. ## Theming diff --git a/docs/data/styles/api/api.md b/docs/data/styles/api/api.md index 7721e0222ad004..208d0fde0bb1be 100644 --- a/docs/data/styles/api/api.md +++ b/docs/data/styles/api/api.md @@ -2,10 +2,16 @@ title: Styles API --- -# API +# API (LEGACY)

The API reference of @mui/styles.

+> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. +> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative. + +> ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18. + ## `createGenerateClassName([options]) => class name generator` A function which returns [a class name generator function](https://cssinjs.org/jss-api/#generate-your-class-names). diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md index c96d61337565ea..000657052dd2db 100644 --- a/docs/data/styles/basics/basics.md +++ b/docs/data/styles/basics/basics.md @@ -1,12 +1,11 @@ -# @mui/styles +# @mui/styles (LEGACY)

The legacy styling solution of MUI.

> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. -> It is deprecated in v5. -> It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore. +> It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. > If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative. -> + > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18. MUI aims to provide a strong foundation for building dynamic UIs. diff --git a/docs/data/system/box/box-zh.md b/docs/data/system/box/box-zh.md index fa6e8a227ba78a..ae05e1bc8c6b84 100644 --- a/docs/data/system/box/box-zh.md +++ b/docs/data/system/box/box-zh.md @@ -17,7 +17,7 @@ githubLabel: 'component: Box' ## `sx` 属性 -All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop). In addition, the `sx` prop allows you to specify any other CSS rules you may need. 下面是一个如何使用的示例： In addition, the `sx` prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: In addition, the `sx` prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: +所有的样式功能都可以通过 [`sx` 属性 ](/system/basics/#the-sx-prop)更改。 同时，您也可通过`sx` 属性 指定任何您想添加的 CSS 规则。 下面是一个使用例： {{"demo": "BoxSx.js", "defaultCodeOpen": true }} @@ -29,7 +29,7 @@ Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素，默 当所需的更改与新的 DOM 元素分开时比较有效。 例如，您可以使用这个方法来更改边距。 -但是，有时您必须针对到底层的 DOM 元素。 As an example, you may want to change the border of the Button. 但是按钮组件已经定义自己的样式。 The Button component defines its own styles. CSS 继承于事无补。 CSS inheritance doesn't help. To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a Material-UI component. +但是，有时您的目标是下层的 DOM 元素。 例如，您想更改按钮的边线， 但是按钮组件已经定义自己的样式， 此时您无法使用CSS继承来解决这个问题。 为了回避这个CSS继承无效的问题， 如该组件的子组件是一个 Material-UI 组件，您可直接在该组件上定义 [`sx`](/system/basics/#the-sx-prop) 属性。 ```diff - @@ -38,7 +38,7 @@ Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素，默 + ``` -For non-Material-UI components, use the `component` prop. +如该组件的子组件不是一个 Material-UI 组件，您可通过使用 `component` 属性来达到效果。 ```diff - @@ -59,17 +59,17 @@ import Box from '@material-ui/core/Box'; | component | union: string |
 func |
 object
 | 'div' | component 用于根节点。 可以是一个使用 DOM 元素或者一个组件的字符串。 | | sx | object | {} | 接受所有系统属性，以及任何有效的 CSS 属性。 | -## System props +## 系统属性 -As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component. For instance, a margin-top: You can use them as prop directly on the component. For instance, a margin-top: You can use them as prop directly on the component. For instance, a margin-top: +作为一个CSS通用组件，`Box` 组件同时支持所有的 [`system`](/system/properties/) 属性。 与定义属性一样，您可在组件中直接定义它们。 例如您想定义 margin-top 时 ```jsx ``` -## Create your own `Box` component +## 创造您专用的 `Box` 组件 -If you want to have a different default theme for the `Box` component, you can create your own version of it, using the `createBox()` utility. +如您想使用与系统默认主题不同主题的 `Box` 组件，您可以通过`createBox()` 方式创造您专用的版本。 ```js import { createBox, createTheme } from '@mui/system'; diff --git a/docs/data/system/styled/styled-pt.md b/docs/data/system/styled/styled-pt.md index 6747992c85f559..286a38b8ec2897 100644 --- a/docs/data/system/styled/styled-pt.md +++ b/docs/data/system/styled/styled-pt.md @@ -17,7 +17,7 @@ The utility can be used as a replacement for emotion's or styled-components' sty 1. It uses MUI's default `theme` if no theme is available in React context. 2. It supports the theme's [`styleOverrides`](/customization/theme-components/#global-style-overrides) and [`variants`](/customization/theme-components/#adding-new-component-variants) to be applied, based on the `name` applied in the options (can be skipped). 3. It adds support for the [the `sx` prop](/system/basics/#the-sx-prop) (can be skipped). -4. It adds by default `shouldForwardProp` option that is taking into account all props used internally in the MUI components (can be overridden). +4. It adds by default the `shouldForwardProp` option (that can be overridden), taking into account all props used internally in the MUI components: `ownerState`, `theme`, `sx`, and `as`. ## API diff --git a/docs/data/system/styled/styled-zh.md b/docs/data/system/styled/styled-zh.md index 172673d6925ce9..2a9e66dea71191 100644 --- a/docs/data/system/styled/styled-zh.md +++ b/docs/data/system/styled/styled-zh.md @@ -17,7 +17,7 @@ The utility can be used as a replacement for emotion's or styled-components' sty 1. It uses MUI's default `theme` if no theme is available in React context. 2. 支持根据`name`属性设置主题中的[`styleOverrides`](/customization/theme-components/#global-style-overrides) 和 [`variants`](/customization/theme-components/#adding-new-component-variants)（可忽略）。 3. 新增对`sx`属性的支持(可忽略） -4. It adds by default `shouldForwardProp` option that is taking into account all props used internally in the MUI components (can be overridden). +4. It adds by default the `shouldForwardProp` option (that can be overridden), taking into account all props used internally in the MUI components: `ownerState`, `theme`, `sx`, and `as`. ## API diff --git a/docs/package.json b/docs/package.json index e5afeb7cafbd47..9cb7854b6a311a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,8 +21,8 @@ "@babel/core": "^7.17.0", "@babel/plugin-transform-object-assign": "^7.16.7", "@babel/runtime-corejs2": "^7.17.0", - "@date-io/core": "^2.11.0", - "@date-io/date-fns-jalali": "^2.11.0", + "@date-io/core": "^2.13.1", + "@date-io/date-fns-jalali": "^2.13.1", "@docsearch/react": "^3.0.0-alpha.50", "@emotion/cache": "^11.7.1", "@emotion/react": "^11.7.1", @@ -31,20 +31,20 @@ "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.17", - "@mui/base": "5.0.0-alpha.68", - "@mui/docs": "^5.4.1", - "@mui/icons-material": "^5.4.1", - "@mui/lab": "5.0.0-alpha.68", - "@mui/material": "^5.4.1", - "@mui/material-next": "6.0.0-alpha.22", - "@mui/styled-engine": "^5.4.1", - "@mui/styled-engine-sc": "^5.4.1", - "@mui/styles": "^5.4.1", - "@mui/system": "^5.4.1", - "@mui/types": "^7.1.1", - "@mui/x-data-grid": "^5.5.0", - "@mui/x-data-grid-generator": "^5.5.0", - "@mui/x-data-grid-pro": "^5.5.0", + "@mui/base": "5.0.0-alpha.69", + "@mui/docs": "^5.4.2", + "@mui/icons-material": "^5.4.2", + "@mui/lab": "5.0.0-alpha.69", + "@mui/material": "^5.4.2", + "@mui/material-next": "6.0.0-alpha.23", + "@mui/styled-engine": "^5.4.2", + "@mui/styled-engine-sc": "^5.4.2", + "@mui/styles": "^5.4.2", + "@mui/system": "^5.4.2", + "@mui/types": "^7.1.2", + "@mui/x-data-grid": "^5.5.1", + "@mui/x-data-grid-generator": "^5.5.1", + "@mui/x-data-grid-pro": "^5.5.1", "@trendmicro/react-interpolate": "^0.5.5", "@types/autosuggest-highlight": "^3.2.0", "@types/css-mediaquery": "^0.1.1", @@ -109,7 +109,7 @@ "react-virtualized": "^9.22.3", "react-window": "^1.8.6", "recast": "^0.20.5", - "recharts": "^2.1.8", + "recharts": "^2.1.9", "rimraf": "^3.0.2", "styled-components": "^5.3.3", "stylis": "^4.0.13", diff --git a/docs/packages/feedback/package.json b/docs/packages/feedback/package.json index ee8e2de4d1bc38..e773bebcd162a8 100644 --- a/docs/packages/feedback/package.json +++ b/docs/packages/feedback/package.json @@ -25,6 +25,6 @@ "claudia": "^5.14.0" }, "optionalDependencies": { - "aws-sdk": "^2.1070.0" + "aws-sdk": "^2.1073.0" } } diff --git a/docs/pages/api-docs/desktop-date-picker.json b/docs/pages/api-docs/desktop-date-picker.json index ed3c0712eabff1..5fe77364f550ca 100644 --- a/docs/pages/api-docs/desktop-date-picker.json +++ b/docs/pages/api-docs/desktop-date-picker.json @@ -8,6 +8,8 @@ }, "allowSameDateSelection": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", diff --git a/docs/pages/api-docs/desktop-date-range-picker.json b/docs/pages/api-docs/desktop-date-range-picker.json index 2bf4719ca0a5eb..b70e2ee33250e1 100644 --- a/docs/pages/api-docs/desktop-date-range-picker.json +++ b/docs/pages/api-docs/desktop-date-range-picker.json @@ -19,6 +19,8 @@ "default": "2" }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", diff --git a/docs/pages/api-docs/desktop-date-time-picker.json b/docs/pages/api-docs/desktop-date-time-picker.json index 96ccbac3f44297..e25c8c80430fc5 100644 --- a/docs/pages/api-docs/desktop-date-time-picker.json +++ b/docs/pages/api-docs/desktop-date-time-picker.json @@ -10,6 +10,8 @@ "ampm": { "type": { "name": "bool" } }, "ampmInClock": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", diff --git a/docs/pages/api-docs/desktop-time-picker.json b/docs/pages/api-docs/desktop-time-picker.json index 02a1be7acbe9f2..96b19851736b8e 100644 --- a/docs/pages/api-docs/desktop-time-picker.json +++ b/docs/pages/api-docs/desktop-time-picker.json @@ -9,6 +9,8 @@ "ampm": { "type": { "name": "bool" } }, "ampmInClock": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", "description": "{ OpenPickerIcon?: elementType }" } }, diff --git a/docs/pages/api-docs/toggle-button.json b/docs/pages/api-docs/toggle-button.json index aa53465ce92619..2ad2c182b9290a 100644 --- a/docs/pages/api-docs/toggle-button.json +++ b/docs/pages/api-docs/toggle-button.json @@ -14,6 +14,8 @@ "disableFocusRipple": { "type": { "name": "bool" } }, "disableRipple": { "type": { "name": "bool" } }, "fullWidth": { "type": { "name": "bool" } }, + "onChange": { "type": { "name": "func" } }, + "onClick": { "type": { "name": "func" } }, "selected": { "type": { "name": "bool" } }, "size": { "type": { diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx index c3ff8e97d788d5..7695cf4f379e0f 100644 --- a/docs/pages/careers.tsx +++ b/docs/pages/careers.tsx @@ -145,90 +145,86 @@ const faqData = [ const openRolesData = [ { - // 1 title: 'Product', roles: [ { title: 'Designer', description: 'Design is critical to the success of our mission. We are looking for skills that complement our Lead Designer. You will empower our audience that seeks to build outstanding-looking UIs with new tools.', - url: '/company/designer/', + url: '/careers/designer/', + }, + ], + }, + { + title: 'Engineering', + roles: [ + { + title: 'Full-stack Engineer - Studio', + description: + 'You will join the MUI Studio team, to explore the role of MUI in the low code space and help bring the early prototypes to a usable product.', + url: '/careers/fullstack-engineer/', + }, + { + title: 'React Support Engineer - X', + description: + "You will provide support, remove blockers and unwrap potential features from reported issues for the advanced components team. You will directly impact developers' satisfaction and success.", + url: '/careers/react-support-engineer/', }, ], }, { - // 5 title: 'Developer Experience', roles: [ { title: 'Developer Experience Engineer', - description: 'You will focus on providing experiences that delight developers using MUI.', - url: '/company/developer-experience-engineer/', + description: + 'You will focus on providing experiences that delight developers using MUI. This role is mostly about MUI Core.', + url: '/careers/developer-experience-engineer/', }, ], }, +]; + +const nextRolesData = [ { - // 2 title: 'Engineering', roles: [ { title: 'React Engineer - X', description: 'You will strengthen the advanced components team, build new ambitious complex features, work on strategic problems, and help grow the adoption.', - url: '/company/react-engineer/', - }, - { - title: 'React Support Engineer - X', - description: - "You will provide support, remove blockers and unwrap potential features from reported issues for the advanced components team. You will directly impact developers' satisfaction and success.", - url: '/company/react-support-engineer/', + url: '/careers/react-engineer/', }, { title: 'Product Engineer - Store', description: 'You will lead the technical and operational development of MUI Store.', - url: '/company/product-engineer/', + url: '/careers/product-engineer/', }, ], }, { - // 3 title: 'People', roles: [ { title: 'People Operations Manager', description: 'You will build the HR function from the ground up at a high-growth tech company.', - url: '/company/people-operations-manager/', + url: '/careers/people-operations-manager/', }, ], }, { - // 4 title: 'Support', roles: [ { title: 'Support Agent - Store', description: "You will provide support for the customers of MUI Store. You will directly impact customers' satisfaction and success.", - url: '/company/support-agent/', + url: '/careers/support-agent/', }, ], }, -]; - -const futureRolesData = [ - { - title: 'Engineering', - roles: [ - { - title: 'Full-stack Engineer', - description: - 'You will strengthen the team working on a new low-code product. We are looking for an experienced and ambitious full-stack engineer that is ready to work in an entrepreneurial environment. You are a manager of one, you are curious, enjoy taking risks, and learning.', - url: undefined, - }, - ], - }, -]; +] as typeof openRolesData; function renderFAQItem(index: number, defaultExpanded?: boolean) { const faq = faqData[index]; @@ -475,59 +471,65 @@ function CareersContent() { })} - {/* Future roles */} - - - - -
- - Future roles - - - In the future, we will need to fill the following positions. If you don't - want to wait for the positions to be opened, you can jump ahead and submit an{' '} - open application. - -
- - - } - > - {futureRolesData.map((category) => { - const roles = category.roles; - return ( - - - {category.title} - - {roles.length > 0 ? ( - roles.map((role) => ( - - )) - ) : ( - No plans yet. - )} - - ); - })} - - - - + {/* Next roles */} + {nextRolesData.length > 0 ? ( + + + + +
+ + Next roles + + + We hire in batches, we collect applications a few months before we actively aim + to fill the roles. If none of these roles fit with what you are looking for, you + can apply to the{' '} + + Dream job + {' '} + role. + +
+ + + } + > + {nextRolesData.map((category) => { + const roles = category.roles; + return ( + + + {category.title} + + {roles.length > 0 ? ( + roles.map((role) => ( + + )) + ) : ( + No plans yet. + )} + + ); + })} + + + + + ) : null} {/* Frequently asked questions */} diff --git a/docs/pages/careers/designer.js b/docs/pages/careers/designer.js new file mode 100644 index 00000000000000..3e624a07d719b1 --- /dev/null +++ b/docs/pages/careers/designer.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany'; +import { demos, docs, demoComponents } from 'docs/src/pages/careers/designer.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/company/developer-advocate.js b/docs/pages/careers/developer-advocate.js similarity index 78% rename from docs/pages/company/developer-advocate.js rename to docs/pages/careers/developer-advocate.js index 1673e0a11da7a3..1885e280888d28 100644 --- a/docs/pages/company/developer-advocate.js +++ b/docs/pages/careers/developer-advocate.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/developer-advocate.md?@mui/markdown'; +} from 'docs/src/pages/careers/developer-advocate.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/developer-experience-engineer.js b/docs/pages/careers/developer-experience-engineer.js similarity index 75% rename from docs/pages/company/developer-experience-engineer.js rename to docs/pages/careers/developer-experience-engineer.js index 25c756ac82c34c..bc40c9c15c5b00 100644 --- a/docs/pages/company/developer-experience-engineer.js +++ b/docs/pages/careers/developer-experience-engineer.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/developer-experience-engineer.md?@mui/markdown'; +} from 'docs/src/pages/careers/developer-experience-engineer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/designer.js b/docs/pages/careers/fullstack-engineer.js similarity index 79% rename from docs/pages/company/designer.js rename to docs/pages/careers/fullstack-engineer.js index 97f83ae591f5ae..4eb4b6b077efb8 100644 --- a/docs/pages/company/designer.js +++ b/docs/pages/careers/fullstack-engineer.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/designer.md?@mui/markdown'; +} from 'docs/src/pages/careers/full-stack-engineer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/people-operations-manager.js b/docs/pages/careers/people-operations-manager.js similarity index 77% rename from docs/pages/company/people-operations-manager.js rename to docs/pages/careers/people-operations-manager.js index 83f91e9f203b78..89e4585bb5df7b 100644 --- a/docs/pages/company/people-operations-manager.js +++ b/docs/pages/careers/people-operations-manager.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/people-operation-manager.md?@mui/markdown'; +} from 'docs/src/pages/careers/people-operation-manager.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/product-engineer.js b/docs/pages/careers/product-engineer.js similarity index 78% rename from docs/pages/company/product-engineer.js rename to docs/pages/careers/product-engineer.js index 123bc2bddae0e3..e24e036b806382 100644 --- a/docs/pages/company/product-engineer.js +++ b/docs/pages/careers/product-engineer.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/product-engineer.md?@mui/markdown'; +} from 'docs/src/pages/careers/product-engineer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/react-engineer.js b/docs/pages/careers/react-engineer.js similarity index 79% rename from docs/pages/company/react-engineer.js rename to docs/pages/careers/react-engineer.js index 33190155f8bd26..c9839941f83961 100644 --- a/docs/pages/company/react-engineer.js +++ b/docs/pages/careers/react-engineer.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/react-engineer.md?@mui/markdown'; +} from 'docs/src/pages/careers/react-engineer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/react-support-engineer.js b/docs/pages/careers/react-support-engineer.js similarity index 77% rename from docs/pages/company/react-support-engineer.js rename to docs/pages/careers/react-support-engineer.js index ca979c6d4fd40f..a656792294a353 100644 --- a/docs/pages/company/react-support-engineer.js +++ b/docs/pages/careers/react-support-engineer.js @@ -4,7 +4,7 @@ import { demos, docs, demoComponents, -} from 'docs/src/pages/company/careers/react-support-engineer.md?@mui/markdown'; +} from 'docs/src/pages/careers/react-support-engineer.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/company/support-agent.js b/docs/pages/careers/support-agent.js similarity index 66% rename from docs/pages/company/support-agent.js rename to docs/pages/careers/support-agent.js index 01ac510eb78faa..54832c4a855408 100644 --- a/docs/pages/company/support-agent.js +++ b/docs/pages/careers/support-agent.js @@ -1,10 +1,6 @@ import * as React from 'react'; import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany'; -import { - demos, - docs, - demoComponents, -} from 'docs/src/pages/company/careers/support-agent.md?@mui/markdown'; +import { demos, docs, demoComponents } from 'docs/src/pages/careers/support-agent.md?@mui/markdown'; export default function Page() { return ; diff --git a/docs/pages/experiments/joy/variant-overrides.tsx b/docs/pages/experiments/joy/variant-overrides.tsx new file mode 100644 index 00000000000000..68fb2a8f1b9ad5 --- /dev/null +++ b/docs/pages/experiments/joy/variant-overrides.tsx @@ -0,0 +1,222 @@ +import * as React from 'react'; +import { GlobalStyles } from '@mui/system'; +import Box, { BoxProps } from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import IconButton from '@mui/joy/IconButton'; +import Typography from '@mui/joy/Typography'; +import { CssVarsProvider, ColorPaletteProp, VariantProp, useColorScheme } from '@mui/joy/styles'; +import CodeRounded from '@mui/icons-material/CodeRounded'; +import ScheduleRounded from '@mui/icons-material/ScheduleRounded'; +import DeleteForeverRounded from '@mui/icons-material/DeleteForeverRounded'; +import Moon from '@mui/icons-material/DarkMode'; +import Sun from '@mui/icons-material/LightMode'; + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +// how to add more color and use with variants +const Tile = ({ + children, + variant = 'light', + color = 'primary', + sx = [], + ...props +}: { + variant?: 'light' | 'contained'; + color?: ColorPaletteProp | 'secondary' | 'alternate'; +} & Omit) => { + return ( + theme.variants[variant][color], + ...(Array.isArray(sx) ? sx : [sx]), + ]} + {...props} + > + {children} + + ); +}; + +export default function JoyVariant() { + const renderContent = (variant: VariantProp, color: ColorPaletteProp) => ( + + + + + March 25th + + + + + + + + Check the docs for getting every component API + + + + + + + Assigned to + + + Michael Scott + + + + + + + + + ); + return ( + ({ + ...(ownerState.fontSize && + ownerState.fontSize !== 'inherit' && { + fontSize: theme.vars.fontSize[ownerState.fontSize], + }), + ...(ownerState.color && + ownerState.color !== 'inherit' && { + color: theme.vars.palette[ownerState.color].textColor, + }), + }), + }, + }, + }, + }} + > + + + + + + ({ + '--shadow-channel': '0 0 0', + minWidth: 280, + maxWidth: 360, + minHeight: 280, + display: 'flex', + flexDirection: 'column', + p: 2.5, + boxShadow: 'md', + borderRadius: 'sm', + ...theme.variants.contained.primary, + ...theme.variants.containedOverrides.primary, + })} + > + {renderContent('contained', 'primary')} + + ({ + minWidth: 280, + maxWidth: 360, + minHeight: 280, + display: 'flex', + flexDirection: 'column', + p: 2.5, + boxShadow: 'md', + borderRadius: 'sm', + ...theme.variants.text.info, + ...theme.variants.textOverrides.info, + })} + > + {renderContent('text', 'info')} + + ({ + minWidth: 280, + maxWidth: 360, + minHeight: 280, + display: 'flex', + flexDirection: 'column', + p: 2.5, + boxShadow: 'md', + borderRadius: 'sm', + ...theme.variants.outlined.neutral, + ...theme.variants.outlinedOverrides.neutral, + })} + > + {renderContent('outlined', 'neutral')} + + ({ + minWidth: 280, + maxWidth: 360, + minHeight: 280, + display: 'flex', + flexDirection: 'column', + p: 2.5, + boxShadow: 'md', + borderRadius: 'sm', + ...theme.variants.light.success, + ...theme.variants.lightOverrides.success, + })} + > + {renderContent('light', 'success')} + + + + ); +} diff --git a/docs/pages/experiments/joy/variant.tsx b/docs/pages/experiments/joy/variant.tsx new file mode 100644 index 00000000000000..09568657c8c156 --- /dev/null +++ b/docs/pages/experiments/joy/variant.tsx @@ -0,0 +1,831 @@ +import * as React from 'react'; +import { GlobalStyles, CSSObject } from '@mui/system'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import Box, { BoxProps } from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Typography from '@mui/joy/Typography'; +import { CssVarsProvider, ColorPaletteProp } from '@mui/joy/styles'; +import Info from '@mui/icons-material/Info'; +import Code from '@mui/icons-material/Code'; +import PlayArrow from '@mui/icons-material/PlayArrow'; +import HistoryEdu from '@mui/icons-material/HistoryEdu'; +import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; + +declare module '@mui/joy/styles' { + interface PaletteNeutral { + 150: string; + 0: string; + } + + interface Palette { + outlinedFocusBorder: string; + } + + interface VariantLight { + secondary: CSSObject; + alternate: CSSObject; + } + + interface VariantContained { + secondary: CSSObject; + alternate: CSSObject; + } +} + +// how to add more color and use with variants +const Tile = ({ + children, + variant = 'light', + color = 'primary', + sx = [], + ...props +}: { + variant?: 'light' | 'contained'; + color?: ColorPaletteProp | 'secondary' | 'alternate'; +} & Omit) => { + return ( + theme.variants[variant][color], + ...(Array.isArray(sx) ? sx : [sx]), + ]} + {...props} + > + {children} + + ); +}; + +export default function JoyVariant() { + return ( + + + ({ + ...(ownerState.fontSize && + ownerState.fontSize !== 'inherit' && { + fontSize: theme.vars.fontSize[ownerState.fontSize], + }), + ...(ownerState.color && + ownerState.color !== 'inherit' && { + color: theme.vars.palette[ownerState.color].textColor, + }), + }), + }, + }, + }, + }} + > + + + Variant demonstration + + + Default + + + Joy provides default style for each variant. + + theme.variants.outlined.neutral, + ]} + > + + + + + + +
+ + Default context overrides feature + + theme.variants.contained.primary, + (theme) => theme.variants.containedOverrides.primary, + ]} + > + + + + + + + + + + + ({ + '--Button-gutter': '1rem', + borderRadius: '4px', + ...(ownerState.size === 'sm' && { + minHeight: 32, + }), + ...(ownerState.size === 'md' && { + minHeight: 36, + }), + ...(ownerState.size === 'lg' && { + minHeight: 40, + }), + '&.Mui-focusVisible': { + ...(ownerState.variant === 'outlined' && { + borderColor: 'var(--strapi-palette-outlinedFocusBorder)', + }), + }, + '&.Mui-disabled': { + backgroundColor: 'var(--strapi-palette-neutral-outlinedDisabledBg)', + color: 'var(--strapi-palette-neutral-outlinedDisabledColor)', + border: '1px solid', + borderColor: 'var(--strapi-palette-neutral-outlinedDisabledBorder)', + }, + }), + }, + }, + MuiSvgIcon: { + defaultProps: { + fontSize: 'xl', + }, + styleOverrides: { + root: ({ ownerState, theme }) => ({ + ...(ownerState.fontSize && + ownerState.fontSize !== 'inherit' && { + fontSize: theme.vars.fontSize[ownerState.fontSize], + }), + ...(ownerState.color && + ownerState.color !== 'inherit' && { + color: theme.vars.palette[ownerState.color].textColor, + }), + }), + }, + }, + }, + }} + > + + + Custom (Strapi design system) + + + Palette + + + Strapi defines 7 palettes (primary, neutral, danger, success, warning, secondary, and + alternate). However, leave the secondary and alternate blank for now.
This + example only focus on the light mode because the Figma does not provide the UIs for dark + mode. See{' '} + + design tokens in Figma + + + + + `} + language="jsx" + /> + +
+ + Variant + + + Strapi does not define variant, so I have to translate the design myself to map with Joy + variant.
+ From what I see, Strapi defines 2 styles for the Button, `contained` and `outlined`.{' '} + Here is how to customize the variant token for each palette. Note that disabled state is + the same across colors, so it is best to configure under theme.components.MuiButton + + + ({ + '--Button-gutter': '1rem', + borderRadius: '4px', + ...(ownerState.size === 'sm' && { + minHeight: 32, + }), + ...(ownerState.size === 'md' && { + minHeight: 36, + }), + ...(ownerState.size === 'lg' && { + minHeight: 40, + }), + '&.Mui-focusVisible': { + ...(ownerState.variant === 'outlined' && { + borderColor: 'var(--strapi-palette-outlinedFocusBorder)', + }), + }, + '&.Mui-disabled': { + backgroundColor: 'var(--strapi-palette-neutral-outlinedDisabledBg)', + color: 'var(--strapi-palette-neutral-outlinedDisabledColor)', + border: '1px solid', + borderColor: 'var(--strapi-palette-neutral-outlinedDisabledBorder)', + }, + }), + }, + }, + }} +/> + `} + language="jsx" + /> + + theme.variants.outlined.neutral, + ]} + > + + + + + + + + + + + + + + + + + + + + + + Developer does not need to deal with the variant style sheet (eg. border, + background-color, :hover, :active) because Joy will create those styles based on the + final variables which means developers can also remove the default tokens by providing + undefined. + +
+ + Even though, Strapi does not have context override concept, it still work out-of-the + box. + + theme.variants.contained.primary, + (theme) => theme.variants.containedOverrides.primary, + ]} + > + + + + +
+ + Focus + + + Strapi defines different focus style from Joy. This can be easily configure in + theme.focus.default to apply to all focusable components. + + + + `} + language="jsx" + /> + + theme.variants.outlined.neutral, + ]} + > + + +
+
+ + Custom component + + theme.variants.outlined.neutral, + ]} + > + + + + + + + + + + + + + + + + + + + + + + + The above UI looks exactly like the contained variant on top of light variant. In this + case, developers should extend only light & contained variants to support secondary & + alternate colors. (Joy does not provide secondary & alternate colors by default) + + + + +// Custom component for Strapi use-case. +const Tile = ({ + children, + variant = 'light', + color = 'primary', + sx = [], + ...props +}: { + variant?: 'light' | 'contained'; + color?: 'primary' | 'warning' | 'secondary' | 'alternate'; +} & Omit) => { + return ( + theme.variants[variant][color], // easy + ...(Array.isArray(sx) ? sx : [sx]), + ]} + {...props} + > + {children} + + ); +}; + + + + + + + + + + + + + + + + + + + + + + `} + language="jsx" + /> + + + + + ); +} diff --git a/docs/pages/material/api/desktop-date-picker.json b/docs/pages/material/api/desktop-date-picker.json index 0eca9afd22594b..2553ec7ecbc346 100644 --- a/docs/pages/material/api/desktop-date-picker.json +++ b/docs/pages/material/api/desktop-date-picker.json @@ -8,6 +8,8 @@ }, "allowSameDateSelection": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", diff --git a/docs/pages/material/api/desktop-date-range-picker.json b/docs/pages/material/api/desktop-date-range-picker.json index 42d3d020d80092..f9b7d34eb065c0 100644 --- a/docs/pages/material/api/desktop-date-range-picker.json +++ b/docs/pages/material/api/desktop-date-range-picker.json @@ -19,6 +19,8 @@ "default": "2" }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", diff --git a/docs/pages/material/api/desktop-date-time-picker.json b/docs/pages/material/api/desktop-date-time-picker.json index 6bfdbc38b97737..bde6e97566a093 100644 --- a/docs/pages/material/api/desktop-date-time-picker.json +++ b/docs/pages/material/api/desktop-date-time-picker.json @@ -10,6 +10,8 @@ "ampm": { "type": { "name": "bool" } }, "ampmInClock": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", diff --git a/docs/pages/material/api/desktop-time-picker.json b/docs/pages/material/api/desktop-time-picker.json index 6ac821a7889296..c5673e298a0ca8 100644 --- a/docs/pages/material/api/desktop-time-picker.json +++ b/docs/pages/material/api/desktop-time-picker.json @@ -9,6 +9,8 @@ "ampm": { "type": { "name": "bool" } }, "ampmInClock": { "type": { "name": "bool" } }, "className": { "type": { "name": "string" } }, + "clearable": { "type": { "name": "bool" } }, + "clearText": { "type": { "name": "node" }, "default": "'Clear'" }, "components": { "type": { "name": "shape", "description": "{ OpenPickerIcon?: elementType }" } }, diff --git a/docs/pages/material/api/toggle-button.json b/docs/pages/material/api/toggle-button.json index dc7c5123d92820..9ceabc34d96f91 100644 --- a/docs/pages/material/api/toggle-button.json +++ b/docs/pages/material/api/toggle-button.json @@ -14,6 +14,8 @@ "disableFocusRipple": { "type": { "name": "bool" } }, "disableRipple": { "type": { "name": "bool" } }, "fullWidth": { "type": { "name": "bool" } }, + "onChange": { "type": { "name": "func" } }, + "onClick": { "type": { "name": "func" } }, "selected": { "type": { "name": "bool" } }, "size": { "type": { diff --git a/docs/public/_headers b/docs/public/_headers index 08dd7e227c5044..46b8676011bd06 100644 --- a/docs/public/_headers +++ b/docs/public/_headers @@ -9,3 +9,12 @@ /* Strict-Transport-Security: max-age=31536000; includeSubDomains; preload + # Block usage in iframes. + X-Frame-Options: DENY + # Force the browser to trust the Content-Type header + # https://stackoverflow.com/questions/18337630/what-is-x-content-type-options-nosniff + X-Content-Type-Options: nosniff + # Disable it (default) as it can cause security issues. + X-XSS-Protection: 0 + Referrer-Policy: strict-origin-when-cross-origin + Content-Security-Policy: default-src * data: 'unsafe-inline' 'unsafe-eval'; report-uri https://o210809.ingest.sentry.io/api/6201480/security/?sentry_key=e4a6f58c6cd9470fa2600a8ff6cde99f diff --git a/docs/public/_redirects b/docs/public/_redirects index 69dee5791188c3..7cfe5bf87f18a1 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -13,22 +13,6 @@ # TODO add back # https://material-ui.com/* https://mui.com/:splat 301! -# Redirect all except /store/ -https://material-ui.com https://mui.com 301! -https://material-ui.com/api-docs/* https://mui.com/api-docs/:splat 301! -https://material-ui.com/api/* https://mui.com/api/:splat 301! -https://material-ui.com/blog/* https://mui.com/blog/:splat 301! -https://material-ui.com/company/* https://mui.com/company/:splat 301! -https://material-ui.com/components/* https://mui.com/components/:splat 301! -https://material-ui.com/customization/* https://mui.com/customization/:splat 301! -https://material-ui.com/discover-more/* https://mui.com/discover-more/:splat 301! -https://material-ui.com/getting-started/* https://mui.com/getting-started/:splat 301! -https://material-ui.com/guides/* https://mui.com/guides/:splat 301! -https://material-ui.com/performance/* https://mui.com/performance/:splat 301! -https://material-ui.com/styles/* https://mui.com/styles/:splat 301! -https://material-ui.com/system/* https://mui.com/system/:splat 301! -https://material-ui.com/versions https://mui.com/versions 301! - # Temporarily access the store from the legacy domain https://mui.com/store/* https://material-ui.com/store/:splat 302! diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx new file mode 100644 index 00000000000000..418c7156a122ca --- /dev/null +++ b/docs/src/components/banner/AppFrameBanner.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import Link from 'docs/src/modules/components/Link'; +import ROUTES from 'docs/src/route'; +import FEATURE_TOGGLE from 'docs/src/featureToggle'; +import { alpha } from '@mui/material/styles'; + +export default function AppFrameBanner() { + return FEATURE_TOGGLE.enable_docsnav_banner ? ( + ({ + display: { xs: 'none', lg: 'block' }, + p: 1, + maxHeight: '34px', + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primary[900], 0.3) + : theme.palette.primary[50], + border: '1px solid', + borderColor: + theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200], + borderRadius: 1, + transitionProperty: 'all', + transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionDuration: '150ms', + color: + theme.palette.mode === 'dark' ? theme.palette.primary[100] : theme.palette.primary[600], + fontWeight: 500, + '&:hover, &:focus-visible': { + backgroundColor: + theme.palette.mode === 'dark' + ? alpha(theme.palette.primary[900], 0.6) + : alpha(theme.palette.primary[100], 0.4), + borderColor: + theme.palette.mode === 'dark' + ? theme.palette.primaryDark[500] + : theme.palette.primary[200], + }, + })} + > + 🚀  We're hiring a Designer, Full-stack Engineer, React Support Engineer, and + more!  +
+ + ) : null; +} diff --git a/docs/src/components/banner/AppHeaderBanner.tsx b/docs/src/components/banner/AppHeaderBanner.tsx index 9c923fa5c76914..36acedb138b4bc 100644 --- a/docs/src/components/banner/AppHeaderBanner.tsx +++ b/docs/src/components/banner/AppHeaderBanner.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Link from 'docs/src/modules/components/Link'; import ROUTES from 'docs/src/route'; @@ -7,37 +6,39 @@ import FEATURE_TOGGLE from 'docs/src/featureToggle'; export default function AppHeaderBanner() { return FEATURE_TOGGLE.enable_website_banner ? ( - theme.palette.mode === 'dark' ? `linear-gradient(90deg, ${theme.palette.primary[900]}, ${theme.palette.primary[600]} 120%)` : `linear-gradient(-90deg, ${theme.palette.primary[700]}, ${theme.palette.primary[500]} 120%)`, + fontSize: (theme) => theme.typography.pxToRem(13), }} > - - Fix me!   - - Fix me! - - - + Check the careers page → + + ) : null; } diff --git a/docs/src/components/banner/TableOfContentsBanner.tsx b/docs/src/components/banner/TableOfContentsBanner.tsx index b6ac915a18cfda..18550d14cf28ab 100644 --- a/docs/src/components/banner/TableOfContentsBanner.tsx +++ b/docs/src/components/banner/TableOfContentsBanner.tsx @@ -5,7 +5,7 @@ import ROUTES from 'docs/src/route'; import FEATURE_TOGGLE from 'docs/src/featureToggle'; export default function TableOfContentsBanner() { - return FEATURE_TOGGLE.enable_website_banner ? ( + return FEATURE_TOGGLE.enable_toc_banner ? ( , - title: 'Accessible in mind', + title: 'Accessibility in mind', description: 'We care about making it great for everyone. We improve accessibility for all of our components constantly, helping you to reach the largest audience possible!', }, diff --git a/docs/src/featureToggle.js b/docs/src/featureToggle.js index 5585b224bcff3b..640aac9ad6e3d9 100644 --- a/docs/src/featureToggle.js +++ b/docs/src/featureToggle.js @@ -1,7 +1,9 @@ // need to use commonjs export so that docs/packages/markdown can use module.exports = { nav_products: true, - enable_website_banner: false, + enable_website_banner: true, + enable_toc_banner: false, + enable_docsnav_banner: true, // TODO: cleanup once migration is done enable_product_scope: true, // related to new structure change enable_redirects: false, // related to new structure change diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index a6305d1ca6d3b0..24ec50bfc70c85 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -25,11 +25,13 @@ declare module '@mui/material/styles/createPalette' { declare module '@mui/material/styles/createTypography' { interface TypographyOptions { + fontWeightSemiBold?: number; fontWeightExtraBold?: number; fontFamilyCode?: string; } interface Typography { + fontWeightSemiBold: number; fontWeightExtraBold: number; fontFamilyCode: string; } @@ -200,6 +202,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') => ].join(','), fontFamilyTagline: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','), fontFamilySystem: systemFont.join(','), + fontWeightSemiBold: 600, fontWeightExtraBold: 800, h1: { fontFamily: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','), diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 43258be67ce17e..96150a7af261b5 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -24,6 +24,7 @@ import { useTranslate } from 'docs/src/modules/utils/i18n'; import { debounce } from '@mui/material/utils'; import NextLink from 'next/link'; import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo'; +import AppFrameBanner from 'docs/src/components/banner/AppFrameBanner'; const nProgressStart = debounce(() => { NProgress.start(); @@ -219,6 +220,7 @@ function AppFrame(props) { + {renderNavItems({ onClose, pages: page.children, activePage, depth: depth + 1, t })} @@ -434,6 +435,7 @@ function reduceChildRoutes(context) { key={title} title={title} href={page.pathname} + legacy={page.legacy} onClick={onClose} icon={page.icon} />, diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index 817f2258ac5086..0ff9c39249e481 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -2,8 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'; -import { alpha, styled } from '@mui/material/styles'; +import { alpha, styled, experimental_sx as sx } from '@mui/material/styles'; import Collapse from '@mui/material/Collapse'; +import Chip from '@mui/material/Chip'; import ButtonBase from '@mui/material/ButtonBase'; import Link from 'docs/src/modules/components/Link'; import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded'; @@ -173,6 +174,37 @@ const StyledLi = styled('li', { shouldForwardProp: (prop) => prop !== 'depth' }) }, ); +const LegacyChip = styled(function LegacyChip(props) { + return ; +})( + sx({ + ml: 1, + '&:hover': { + bgcolor: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.warning[900], 0.5) + : alpha(theme.palette.warning[100], 0.5), + }, + '& .MuiChip-label': { px: 0.6 }, + fontSize: (theme) => theme.typography.pxToRem(10), + fontWeight: 600, + textTransform: 'uppercase', + letterSpacing: '.04rem', + height: '16px', + border: 1, + borderColor: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.warning[800], 0.5) + : theme.palette.warning[300], + bgcolor: (theme) => + theme.palette.mode === 'dark' + ? alpha(theme.palette.warning[900], 0.5) + : alpha(theme.palette.warning[100], 0.5), + color: (theme) => + theme.palette.mode === 'dark' ? theme.palette.warning[300] : theme.palette.warning[700], + }), +); + export default function AppNavDrawerItem(props) { const { children, @@ -184,6 +216,7 @@ export default function AppNavDrawerItem(props) { title, linkProps, icon, + legacy, ...other } = props; const [open, setOpen] = React.useState(openImmediately); @@ -226,6 +259,7 @@ export default function AppNavDrawerItem(props) { > {iconElement} {title} + {legacy && } @@ -245,6 +279,7 @@ export default function AppNavDrawerItem(props) { > {iconElement} {title} + {legacy && } {depth === 0 && } {depth === 0 ? ( @@ -264,6 +299,7 @@ AppNavDrawerItem.propTypes = { depth: PropTypes.number.isRequired, href: PropTypes.string, icon: PropTypes.string, + legacy: PropTypes.bool, linkProps: PropTypes.object, onClick: PropTypes.func, openImmediately: PropTypes.bool, diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index bade3fa44344fb..f482823a6d300f 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -96,10 +96,10 @@ const DemoRoot = styled('div', { }), /* Make no difference between the demo and the markdown. */ ...(bg === 'inline' && { - padding: theme.spacing(3), + padding: theme.spacing(0), }), ...(hiddenToolbar && { - paddingTop: theme.spacing(3), + paddingTop: theme.spacing(1), }), }, /* Isolate the demo with an outline. */ diff --git a/docs/src/pages.ts b/docs/src/pages.ts index 93b19e319be5d2..66c5f217515015 100644 --- a/docs/src/pages.ts +++ b/docs/src/pages.ts @@ -5,6 +5,10 @@ export interface MuiPage { children?: MuiPage[]; disableDrawer?: boolean; icon?: string; + /** + * Indicates if the pages are regarding some legacy API. + */ + legacy?: boolean; /** * In case the children have pathnames out of pathname value, use this field to scope other pathnames */ @@ -325,8 +329,9 @@ const pages: readonly MuiPage[] = [ }, { pathname: '/styles', - title: 'Styles (legacy)', + title: 'Styles', icon: 'StyleIcon', + legacy: true, children: [ { pathname: '/styles/basics' }, { pathname: '/styles/advanced' }, diff --git a/docs/src/pages/company/careers/TEMPLATE.md b/docs/src/pages/careers/TEMPLATE.md similarity index 96% rename from docs/src/pages/company/careers/TEMPLATE.md rename to docs/src/pages/careers/TEMPLATE.md index b96f4e4159556d..d606bbcfa058e0 100644 --- a/docs/src/pages/company/careers/TEMPLATE.md +++ b/docs/src/pages/careers/TEMPLATE.md @@ -15,7 +15,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -65,4 +65,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=XXXXXX) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=XXXXXX&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/designer.md b/docs/src/pages/careers/designer.md similarity index 95% rename from docs/src/pages/company/careers/designer.md rename to docs/src/pages/careers/designer.md index f15055ac849448..cf3970064aa52a 100644 --- a/docs/src/pages/company/careers/designer.md +++ b/docs/src/pages/careers/designer.md @@ -6,7 +6,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -69,7 +69,7 @@ You'll also be the second designer of a growing design team, so we'll also need You should be capable of tweaking JSX and CSS, ensuring that your designs are implemented with the highest fidelity. But don't worry, you'll always have the support of your teams' developers. -Previous experience with design systems would be great, but is not required. +Previous experience with design systems would be great but is not required. ## Benefits & Compensation @@ -79,7 +79,7 @@ Other perks are described on [the careers page](/careers/#perks-amp-benefits/). ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Designer). +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Designer&prefill_source=mui.com). ## What happens next? @@ -88,7 +88,7 @@ If your application stands out, we'll contact you for a get-to-know conversation If that goes well, you'll be invited to up to four additional conversations, those being: -- A walkthrough on one or two selected projects of your career that you believe demonstrates [comparable experience.](https://articles.uie.com/ux-hiring-lets-talk-about-comparable-experience/) +- A walkthrough of one or two selected projects that you believe demonstrate [comparable experience.](https://articles.uie.com/ux-hiring-lets-talk-about-comparable-experience/) - A chat with one of the product managers or engineers that you will work closely with. - A chat with one of MUI's founders. - A possible follow-up chat if we missed addressing anything relevant in the previous conversations. diff --git a/docs/src/pages/company/careers/developer-advocate.md b/docs/src/pages/careers/developer-advocate.md similarity index 98% rename from docs/src/pages/company/careers/developer-advocate.md rename to docs/src/pages/careers/developer-advocate.md index 3668fd7431056f..714fa3866bc8f9 100644 --- a/docs/src/pages/company/careers/developer-advocate.md +++ b/docs/src/pages/careers/developer-advocate.md @@ -14,7 +14,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -107,4 +107,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Developer%20Advocate) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Developer%20Advocate&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/developer-experience-engineer.md b/docs/src/pages/careers/developer-experience-engineer.md similarity index 97% rename from docs/src/pages/company/careers/developer-experience-engineer.md rename to docs/src/pages/careers/developer-experience-engineer.md index 090e0bc9a0c1b3..fb2397c63f6a4e 100644 --- a/docs/src/pages/company/careers/developer-experience-engineer.md +++ b/docs/src/pages/careers/developer-experience-engineer.md @@ -1,6 +1,6 @@ # Developer Experience Engineer -

You will focus on providing experiences that delight developers using MUI.

+

You will focus on providing experiences that delight developers using MUI. This role is mostly about MUI Core.

## Details of the Role @@ -15,7 +15,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -99,4 +99,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Developer%20Experience%20Engineer) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Developer%20Experience%20Engineer&prefill_source=mui.com) diff --git a/docs/src/pages/careers/full-stack-engineer.md b/docs/src/pages/careers/full-stack-engineer.md new file mode 100644 index 00000000000000..942204e2189912 --- /dev/null +++ b/docs/src/pages/careers/full-stack-engineer.md @@ -0,0 +1,119 @@ +# Full-stack Engineer + +

We are looking for a full-stack engineer to pioneer the development of a new product vertical.

+ +## Details of the Role + +- Location: Remote (preference for UTC-6 to UTC+3). +- Type of work: Full-time (contractor or employee [depending on circumstances](https://mui-org.notion.site/Hiring-FAQ-64763b756ae44c37b47b081f98915501)) +- Start date: Immediately. +- Level: [4 or above](https://docs.google.com/spreadsheets/d/1dDdPD-flNXlgZ0E3ZxVvCDx27RFuhVWJrcfcjNu_I8k/edit#gid=0). +- We're a remote company, we prefer asynchronous communication over meetings. +- We work independently, the rest of us won't know what you're doing day-to-day unless you tell us. + +## About the company + +MUI started with Material-UI, the most successful React implementation of Google's Material Design. +It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. +Today, countless teams and organizations rely on our open-source projects to build their design system. + +A couple of years ago, we started to expand our suite of products. +We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. +We've seen rapid growth with all of them (2-3x per year) and we have more to come. + +We are a fully distributed team, spread across multiple timezones. +We work mainly asynchronously, relying mostly on written collaboration. +Every contributor has the freedom to define how they work — the rest of us won't know what you're doing day-to-day unless you tell us. +For additional details about the MUI team and culture, you can check our [careers](/careers/) and [about](/about/) pages and also our [public Handbook](https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b). + +## Why we're hiring + +Both our open-source community and our premium products are growing fast (x2-3 YoY). +We need talented people to keep that going! + +Our mission is to empower as many people as possible to build great UIs, faster. +The faster and simpler it is, and the broader the audience that can create custom UIs, the better. +We believe that the best way to improve on these dimensions is to eliminate [80%](https://www.youtube.com/watch?v=GnO7D5UaDig&t=2451s) of the code that has to be written. + +We’re in the early stages of exploring what our role could be in the currently emerging low-code space. We’ve assembled a team to work on a new product and plan to bring it to market in 2022. We have made our initial research and need help to accelerate the development of our MVP. + +## About the role + +### Why this is interesting + +The MUI Studio application offers a wide variety of engineering challenges. Including + +- In-browser sandboxing and manipulation of live web applications +- Drag & drop visual editor +- Interfacing with many different types of backends +- Databinding and complex state management + +### What you'll do on a day-to-day basis + +Depending on the day, you'll: + +- **Help guide architectural decisions**. You'll join us in defining and refining the initial product and also help bring the conversation public as the MVP grows. You’ll also interface with other teams at MUI as you’ll be building on top of their work. +- **Contribute to implementing new features**. MUI is a complex codebase. It’s built on top of cutting edge web technologies to build the low-code tool for the future. +- **Reduce friction**. A large amount of the work on MUI Studio is reducing friction and making it easier to use. As our MVP grows, our focus will shift from “making it work” towards “making it easy to work with”. +- **Collaborate with the community**. MUI Studio will be open-sourced. As the community grows you’ll act as a steward to steer it towards success. This includes reviewing issues, pull requests and questions, and guiding aspiring contributors to make meaningful contributions. +- **Experiment and play**. Great, unexpected features and heisenbug fixes have come from a number of sources — relentlessly methodical processes of elimination, free-flowing team collaboration, inspiration by adjacent libraries and projects, and difficult-to-explain individual strokes of brilliance. Whatever your preferred style is for creating new things that others might not have thought of, you'll find a welcome home on the team. +- **Take ownership of features from idea/mockup to live deployment**. You'll shape and guide the direction of crucial new features. +- **Ship. Early and often**. You'll iterate and ship frequently. You'll have a real impact on the end-user experience and you'll love working on a team that builds stunning UIs and prioritizes delivering real user value as often as possible. +- **You'll be interacting with the users** on a regular basis, handling inbound support and feature requests (every developer helps with developer requests). + +## The best parts of this job + +- **You'll be at the cutting edge of application development** — working on one of the fastest-growing UI libraries on the market. +- **You'll be part of an active, open, friendly community** of developers that are excited about building awesome applications. +- **Your role will be key to making MUI Studio the go-to low code tool** for internal application building. + +## The worst parts of this job + +- **We move quickly but don't sacrifice quality**. We ship early, often, and quickly. You may not be initially comfortable with the cadence with which we ship high-quality features and improvements to end-users. By doing so, we sacrifice on solving each problem 100% in exchange for fast feedback. Solving 50-70% of the issue with quality should be enough for any given iteration. Our users quickly tell us when we haven't pushed a solution far enough. +- **In open-source, you're faced with a nonstop stream of bug reports and support requests**. That means you need to develop an intuition for when to ignore something, and when to dig in further. +- As **The product is in very early stages of development**, expect to enter an environment with incomplete and quickly changing requirements. + +## About you + +We're looking for someone with both strong front-end and back-end skills. More important than specific technical skills though is that you're a strong problem solver who loves to learn. Details matter to you. + +### Skills you should have + +- **Expertise in the modern JavaScript ecosystem**. MUI Studio is built on the shoulders of giants, making use of technologies such as ES2021, TypeScript, Node.js, React, Next.js, webpack, and Babel. +- **Expertise in backend development**. MUI Studio interfaces with multiple databases, both SQL and NoSQL, as well as APIs such as REST and GraphQL. You’ll need to be comfortable in learning and integrating new backend technologies fast. +- **A track record of demonstrating an eye for product and solving real-world user problems**. If you have a knack for solving problems at the root cause, shipping beautiful user interfaces and intuitive APIs, we want you on our team. +- **Experience building and shipping production code in a team setting** with a passion for writing tested, performant, and high-quality code. +- **Strong written and verbal communication skills**. As part of the team, you'll interface both directly and indirectly with community members and enterprise customers, and contribute to user documentation. Clear communication is fundamental in creating intuitive and compelling resources. +- **Ability to dive into complex problems**. You should be able to quickly assess, understand, and iterate upon aspects of our codebase. +- **Ready and willing to ask and answer questions**. If you're comfortable saying you're unsure, asking for help; but equally reaching out to assist others, you'll be an incredible addition to our team. We thrive because of continuous learning. First-time mistakes should be celebrated, not blamed. +- **Avoid monolithic deliverables**. You scope and stage your work into well-defined milestones to ship. + +### What would be nice if you had, but isn't required + +- **You've maintained an active repository before**. Maybe you've helped maintain a popular open-source repository, or perhaps you've worked on internal repositories that saw contributions from multiple teams. Previous experience with highly active repository workflows is a definite plus for this role. +- **You have contributed code to MUI before**. A history of contributing to MUI would be a definite plus. + +## Benefits & Compensation + +Competitive compensation depending on the profile and location. +We are ready to pay top market rates for a person that can significantly push the mission forward. +You can find the other perks & benefits on the [careers](/careers/#perks-amp-benefits) page. + +## How to apply? + +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Full-stack%20Engineer%20-%20Studio) + +## What happens next? + +We start by screening applications, looking for candidates that showcase the desired skills and experience. If your application stands out, we'll contact you for a get-to-know conversation, where we'll meet each other. + +If that goes well, you'll be invited to up to four additional conversations, those being: + +- A technical challenge. +- A chat with one of the product managers or engineers that you will work closely with. +- A chat with one of MUI's founders. +- A possible follow-up chat if we missed addressing anything relevant in the previous conversations. + +All these conversations will be 1:1 and over video chat. Please ask as many questions as you wish throughout the whole process, it's a two-way discussion. If you happen to need additional conversations as well, feel free to ask; we'll be happy to schedule them. Lastly, please note that we're unable to offer individual feedback during the initial screening process, as we're a small team and don't have the bandwidth to do so. + +We look forward to hearing from you! ☺️ diff --git a/docs/src/pages/company/careers/people-operation-manager.md b/docs/src/pages/careers/people-operation-manager.md similarity index 97% rename from docs/src/pages/company/careers/people-operation-manager.md rename to docs/src/pages/careers/people-operation-manager.md index 4df6b2456b3e04..a898ba8cc17a22 100644 --- a/docs/src/pages/company/careers/people-operation-manager.md +++ b/docs/src/pages/careers/people-operation-manager.md @@ -14,7 +14,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -85,4 +85,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=People%20Operations%20Manager) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=People%20Operations%20Manager&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/product-engineer.md b/docs/src/pages/careers/product-engineer.md similarity index 97% rename from docs/src/pages/company/careers/product-engineer.md rename to docs/src/pages/careers/product-engineer.md index d806fa85f77f50..2d9b1dae43b103 100644 --- a/docs/src/pages/company/careers/product-engineer.md +++ b/docs/src/pages/careers/product-engineer.md @@ -15,7 +15,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -92,4 +92,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Product%20Engineer%20-%20Store) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Product%20Engineer%20-%20Store&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/product-manager.md b/docs/src/pages/careers/product-manager.md similarity index 97% rename from docs/src/pages/company/careers/product-manager.md rename to docs/src/pages/careers/product-manager.md index 3f27d19c812d68..f291e893ebe632 100644 --- a/docs/src/pages/company/careers/product-manager.md +++ b/docs/src/pages/careers/product-manager.md @@ -14,7 +14,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -79,4 +79,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Product%20Manager) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Product%20Manager&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/react-engineer.md b/docs/src/pages/careers/react-engineer.md similarity index 98% rename from docs/src/pages/company/careers/react-engineer.md rename to docs/src/pages/careers/react-engineer.md index c2735b891ca69a..f57e4aa60e8835 100644 --- a/docs/src/pages/company/careers/react-engineer.md +++ b/docs/src/pages/careers/react-engineer.md @@ -15,7 +15,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -125,4 +125,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=React%20Engineer%20-%20X) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=React%20Engineer%20-%20X&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/react-support-engineer.md b/docs/src/pages/careers/react-support-engineer.md similarity index 99% rename from docs/src/pages/company/careers/react-support-engineer.md rename to docs/src/pages/careers/react-support-engineer.md index 21701966da2f9c..4ce2e4d4f0c71f 100644 --- a/docs/src/pages/company/careers/react-support-engineer.md +++ b/docs/src/pages/careers/react-support-engineer.md @@ -15,7 +15,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -118,4 +118,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=React%20Support%20Engineer%20-%20X) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=React%20Support%20Engineer%20-%20X&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/support-agent.md b/docs/src/pages/careers/support-agent.md similarity index 96% rename from docs/src/pages/company/careers/support-agent.md rename to docs/src/pages/careers/support-agent.md index ed9dd05cfc0ab9..87fe7ecb9e0424 100644 --- a/docs/src/pages/company/careers/support-agent.md +++ b/docs/src/pages/careers/support-agent.md @@ -14,7 +14,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -69,4 +69,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Support%20Agent%20-%20Store) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Support%20Agent%20-%20Store&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/technical-product-manager.md b/docs/src/pages/careers/technical-product-manager.md similarity index 97% rename from docs/src/pages/company/careers/technical-product-manager.md rename to docs/src/pages/careers/technical-product-manager.md index 661aee3266f700..7fa7627817b3c9 100644 --- a/docs/src/pages/company/careers/technical-product-manager.md +++ b/docs/src/pages/careers/technical-product-manager.md @@ -14,7 +14,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -77,4 +77,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Technical%20Product%20Manager) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Technical%20Product%20Manager&prefill_source=mui.com) diff --git a/docs/src/pages/company/careers/full-stack-engineer.md b/docs/src/pages/company/careers/full-stack-engineer.md index 1035ab1f32fd92..25821423505bf5 100644 --- a/docs/src/pages/company/careers/full-stack-engineer.md +++ b/docs/src/pages/company/careers/full-stack-engineer.md @@ -15,7 +15,7 @@ MUI started with Material-UI, the most successful React implementation of Google's Material Design. It has gained a large following, not only due to the fidelity to Material Design, but also because of the number of components, its carefully designed component API, obsession for details, and community engagement. -Today, countless teams and organizations rely on our open-source projects to build their design system. +Today, countless teams and organizations rely on our open-source libraries to build their design system. A couple of years ago, we started to expand our suite of products. We released [MUI X](/x/), a collection of advanced components; [MUI Design kits](/design-kits/), the MUI components available for the most popular design tools; and also host [Templates](/templates/), a set of pre-built UI kits. @@ -83,4 +83,4 @@ You can find the other perks & benefits on the [careers](/careers/#perks-amp-ben ## How to apply? -[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Full-stack%20Engineer%20-%20Studio) +[Apply now for this position 📮](https://airtable.com/shrdqo1Z6srZXGcvh?prefill_Applying+for=Full-stack%20Engineer%20-%20Studio&prefill_source=mui.com) diff --git a/docs/src/pages/versions/versions.md b/docs/src/pages/versions/versions.md index 53fda2ddbece9c..59523ef4c9ca7e 100644 --- a/docs/src/pages/versions/versions.md +++ b/docs/src/pages/versions/versions.md @@ -54,9 +54,29 @@ You can follow the [milestones](https://github.com/mui/material-ui/milestones) f > ⚠️ **Disclaimer**: We operate in a dynamic environment, and things are subject to change. The information provided is intended to outline the general framework direction, for informational purposes only. We may decide to add or remove new items at any time, depending on our capability to deliver while meeting our quality standards. The development, releases, and timing of any features or functionality remains at the sole discretion of MUI. The roadmap does not represent a commitment, obligation, or promise to deliver at any time. -## Support policy +## Supported versions -Find details on the [supported versions](/getting-started/support/#supported-versions). +MUI Core has been open-source ([MIT](https://tldrlegal.com/license/mit-license)) since the very beginning, and always will be. +Developers can ensure MUI is the right choice for their React applications through MUI's community maintenance strategy. +The MUI team regularly ships new releases, bug fixes, and is very welcoming to community pull requests. + +Given the reality of time and resource constraints, as well as the desire to keep innovating, over time it becomes necessary to shift focus to newer versions of the framework ([our release schedule](#release-frequency)), while making the transition to newer versions as smooth as possible, including publishing migration guides such as [this one for v5](/guides/migration-v4/). +The open-source community is always welcome to submit new features and bug fixes as well. + +The current status of each MUI version is as follows: + +- MUI Core v5: ✅ Active development and continuous support. +- [MUI Core v4](https://v4.mui.com/): ⚠️ Guaranteed Support (only) for security issues and regressions. +- [MUI Core v3](https://v3.mui.com/): 🅧 No longer supported. +- ~MUI Core v2 (never existed)~. +- [MUI Core v1](https://v1.mui.com/): 🅧 No longer supported. +- [MUI Core v0.x](https://v0.mui.com/#/): 🅧 No longer supported. + +For teams and organizations that require additional support for older versions, MUI has [options available](/getting-started/support/#professional-support-premium). + +### Long-term support + +MUI will continue to give security updates and regressions support (for example, if there's any regression caused by Chrome, React, etc) to the version prior to the current major until the next one is released. ## Deprecation practices diff --git a/docs/translations/api-docs/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/desktop-date-picker/desktop-date-picker.json index 32a0a6825c16a6..22117d66e97fe4 100644 --- a/docs/translations/api-docs/desktop-date-picker/desktop-date-picker.json +++ b/docs/translations/api-docs/desktop-date-picker/desktop-date-picker.json @@ -4,6 +4,8 @@ "acceptRegex": "Regular expression to detect "accepted" symbols.", "allowSameDateSelection": "If true, onChange is fired on click even if the same date is selected.", "className": "className applied to the root component.", + "clearable": "If true, it shows the clear action in the picker dialog.", + "clearText": "Clear text message.", "components": "The components used for each slot. Either a string to use a HTML element or a component.", "componentsProps": "The props used for each slot inside.", "defaultCalendarMonth": "Default calendar month displayed when value={null}.", diff --git a/docs/translations/api-docs/desktop-date-range-picker/desktop-date-range-picker.json b/docs/translations/api-docs/desktop-date-range-picker/desktop-date-range-picker.json index 121867c745cda4..1b1d9e0a16ff8f 100644 --- a/docs/translations/api-docs/desktop-date-range-picker/desktop-date-range-picker.json +++ b/docs/translations/api-docs/desktop-date-range-picker/desktop-date-range-picker.json @@ -5,6 +5,8 @@ "allowSameDateSelection": "If true, onChange is fired on click even if the same date is selected.", "calendars": "The number of calendars that render on desktop.", "className": "className applied to the root component.", + "clearable": "If true, it shows the clear action in the picker dialog.", + "clearText": "Clear text message.", "components": "The components used for each slot. Either a string to use a HTML element or a component.", "componentsProps": "The props used for each slot inside.", "defaultCalendarMonth": "Default calendar month displayed when value={null}.", diff --git a/docs/translations/api-docs/desktop-date-time-picker/desktop-date-time-picker.json b/docs/translations/api-docs/desktop-date-time-picker/desktop-date-time-picker.json index b1527a57500b87..26ea2961e051a7 100644 --- a/docs/translations/api-docs/desktop-date-time-picker/desktop-date-time-picker.json +++ b/docs/translations/api-docs/desktop-date-time-picker/desktop-date-time-picker.json @@ -6,6 +6,8 @@ "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", "className": "className applied to the root component.", + "clearable": "If true, it shows the clear action in the picker dialog.", + "clearText": "Clear text message.", "components": "The components used for each slot. Either a string to use a HTML element or a component.", "componentsProps": "The props used for each slot inside.", "dateRangeIcon": "Date tab icon.", diff --git a/docs/translations/api-docs/desktop-time-picker/desktop-time-picker.json b/docs/translations/api-docs/desktop-time-picker/desktop-time-picker.json index 738a34c0a975ab..c7cf88858c917b 100644 --- a/docs/translations/api-docs/desktop-time-picker/desktop-time-picker.json +++ b/docs/translations/api-docs/desktop-time-picker/desktop-time-picker.json @@ -5,6 +5,8 @@ "ampm": "12h/24h view for hour selection clock.", "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).", "className": "className applied to the root component.", + "clearable": "If true, it shows the clear action in the picker dialog.", + "clearText": "Clear text message.", "components": "The components used for each slot. Either a string to use a HTML element or a component.", "disableCloseOnSelect": "If true the popup or dialog will immediately close after submitting full date.", "disabled": "If true, the picker and text field are disabled.", diff --git a/docs/translations/api-docs/toggle-button/toggle-button.json b/docs/translations/api-docs/toggle-button/toggle-button.json index 175be96f779b6a..8029acc7559c48 100644 --- a/docs/translations/api-docs/toggle-button/toggle-button.json +++ b/docs/translations/api-docs/toggle-button/toggle-button.json @@ -8,6 +8,8 @@ "disableFocusRipple": "If true, the keyboard focus ripple is disabled.", "disableRipple": "If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.", "fullWidth": "If true, the button will take up the full width of its container.", + "onChange": "Callback fired when the state changes.

Signature:
function(event: React.MouseEvent<HTMLElement>, value: any) => void
event: The event source of the callback.
value: of the selected button.", + "onClick": "Callback fired when the button is clicked.

Signature:
function(event: React.MouseEvent<HTMLElement>, value: any) => void
event: The event source of the callback.
value: of the selected button.", "selected": "If true, the button is rendered in an active state.", "size": "The size of the component. The prop defaults to the value inherited from the parent ToggleButtonGroup component.", "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", diff --git a/docs/translations/translations.json b/docs/translations/translations.json index eef02a8bc5a4ef..0529aad8667ca3 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -322,7 +322,7 @@ "/guides/content-security-policy": "Content Security Policy", "/guides/right-to-left": "Right-to-left", "/guides/flow": "Flow", - "/styles": "Styles (legacy)", + "/styles": "Styles", "/styles/basics": "Basics", "/styles/advanced": "Advanced", "/discover-more": "Discover More", diff --git a/framer/.prettierignore b/framer/.prettierignore deleted file mode 100644 index 9a491997b37ad0..00000000000000 --- a/framer/.prettierignore +++ /dev/null @@ -1,4 +0,0 @@ -Material-UI.framerfx/design/* -Material-UI.framerfx/build/* -Material-UI.framerfx/dist/* -canvas.tsx diff --git a/framer/Material-UI.framerfx/.gitignore b/framer/Material-UI.framerfx/.gitignore deleted file mode 100644 index d745bb15830da7..00000000000000 --- a/framer/Material-UI.framerfx/.gitignore +++ /dev/null @@ -1,17 +0,0 @@ -# General -.DS_Store -Icon\r - -# Framer -/.backups -/.cache -/build -/dist -node_modules -.config.json -.project.log -.framer-lock -.npmrc -.yarnrc -yarn-error.log -canvas.tsx diff --git a/framer/Material-UI.framerfx/.npmrc b/framer/Material-UI.framerfx/.npmrc deleted file mode 100644 index b2fd3963eab639..00000000000000 --- a/framer/Material-UI.framerfx/.npmrc +++ /dev/null @@ -1,3 +0,0 @@ -@framer:registry=https://registry.framer.com/ -always-auth=true -//registry.framer.com/:_authToken=${FRAMER_TOKEN} diff --git a/framer/Material-UI.framerfx/.yarnignore b/framer/Material-UI.framerfx/.yarnignore deleted file mode 100644 index 3a18e4d79e8ffb..00000000000000 --- a/framer/Material-UI.framerfx/.yarnignore +++ /dev/null @@ -1,16 +0,0 @@ -# General -.DS_Store -Icon\r - -# Framer -/.backups -/.cache -/build -/design -node_modules -.config.json -.project.log -.framer-lock -.npmrc -.yarnrc -yarn-error.log diff --git a/framer/Material-UI.framerfx/README.md b/framer/Material-UI.framerfx/README.md deleted file mode 100644 index cccb302ecedb14..00000000000000 --- a/framer/Material-UI.framerfx/README.md +++ /dev/null @@ -1,79 +0,0 @@ -# MUI - -This is the official resource for MUI React components in Framer. - -[MUI](https://mui.com/) is a library of React components for faster and simpler web development. -You can build your own design system, or start with Material Design. - -## Supported components - -The following components are currently supported: - -- App bar -- Avatar -- Badge -- Bottom navigation -- Button -- Checkbox -- Chip -- Circular progress -- Floating action button (Fab) -- Icon (all 1100+ Material Icons in 5 themes, plus social icons) -- Icon button (with optional badge) -- Linear progress -- List -- List item -- Media card -- Paper -- Radio -- Radio group -- Slider -- Snackbar content -- Switch -- Tabs -- Text field -- Theme (to globally set primary, secondary and error colors) -- Typography - -## Usage - -### Icons - -Icons can be specified using either snake_case (as documented on material.io), -or PascalCase, as used in [the MUI documentation](https://mui.com/components/material-icons/). -Simply type the icon name in the appropriate property control. - -The icon theme can be chosen from the related select field. - -### Children - -Where a component (such as Avatar) accepts a variety of child types, these can be configured through Framer property controls. -If multiple options are supplied, they take the following priority: - -- Local image -- Image URL -- Icon -- Text - -## Resources - -- [MUI documentation](https://mui.com/) -- [GitHub repository](https://github.com/mui/material-ui/tree/HEAD/framer) - -## Releases - -### 1.1.0 2020-02-21 - -- Add support for Framer shared colors to the Theme component. -- Add Info, Success and Warning colors to the Theme component. -- Add variant (circle, rounded or square) to the Avatar component. -- Add disable elevation (to remove the drop shadow) to the Button component. -- Add size (medium or small) to the Checkbox and Radio and TextField components. -- Add variant (elevation or outlined) to the Paper component. -- Add color (primary or secondary) to the TextField component. -- Fix an issue that caused the MUI Framer package to appear to have no components, - and existing projects using MUI to break. - -### 1.0.0 2019-11-11 - -- Initial release. diff --git a/framer/Material-UI.framerfx/code/AppBar.tsx b/framer/Material-UI.framerfx/code/AppBar.tsx deleted file mode 100644 index 03bc5f6a83f3fd..00000000000000 --- a/framer/Material-UI.framerfx/code/AppBar.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import * as React from 'react'; -import { PropertyControls, ControlType } from 'framer'; -import MuiAppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import { IconButton } from './IconButton'; - -// Define type of property -interface Props { - title?: string; - leftIcon?: string; - icon1?: string; - icon1Badge?: string; - icon2?: string; - icon2Badge?: string; - action1?: string; - action2?: string; -} - -export class AppBar extends React.Component { - // Set default properties - static defaultProps = { - width: 300, - height: 56, - leftIcon: 'menu', - title: 'MUI', - action1: 'Login', - action2: '', - icon1: 'notifications', - icon1Badge: '8', - icon2: 'account_circle', - icon2Badge: '', - }; - - // Items shown in property panel - static propertyControls: PropertyControls = { - leftIcon: { type: ControlType.String, title: 'Left icon' }, - title: { type: ControlType.String, title: 'Title' }, - action1: { type: ControlType.String, title: 'Action 1' }, - action2: { - type: ControlType.String, - title: 'Action 2', - hidden(props) { - return props.action1 === '' && props.action2 !== ''; - }, - }, - icon1: { type: ControlType.String, title: 'Icon 1' }, - icon1Badge: { type: ControlType.String, title: 'Icon 1 badge' }, - icon2: { - type: ControlType.String, - title: 'Icon 2', - hidden(props) { - return props.icon1 === '' && props.icon2 !== ''; - }, - }, - icon2Badge: { type: ControlType.String, title: 'Icon 2 badge' }, - }; - - render() { - const { action1, action2, icon1, icon1Badge, icon2, icon2Badge, leftIcon, title } = this.props; - return ( -
- - - {leftIcon && ( - - )} - - {title} - - {action1 && } - {action2 && } - {icon1 && ( - - )} - {icon2 && ( - - )} - - -
- ); - } -} diff --git a/framer/Material-UI.framerfx/code/Avatar.tsx b/framer/Material-UI.framerfx/code/Avatar.tsx deleted file mode 100644 index 88ad193b101444..00000000000000 --- a/framer/Material-UI.framerfx/code/Avatar.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiAvatar from '@mui/material/Avatar'; -import { Icon } from './Icon'; - -interface Props { - backgroundColor: string; - textColor: string; - icon: string; - avatarImageFile: string; - avatarImageUrl: string; - label: string; - width: number | string; - height: number; -} - -export function Avatar(props: Props): JSX.Element { - const { - backgroundColor, - height, - icon, - avatarImageFile: imageFile, - avatarImageUrl: imageUrl, - label, - textColor, - width, - ...other - } = props; - - return imageFile || imageUrl ? ( - - ) : ( - - {icon === '' ? label : } - - ); -} - -Avatar.defaultProps = { - backgroundColor: '#4154af', - textColor: undefined, - icon: 'face', - avatarImageFile: '', - avatarImageUrl: 'https://i.pravatar.cc/300', - label: 'MB', - width: 40, - height: 40, -}; - -addPropertyControls(Avatar, { - backgroundColor: { - type: ControlType.Color, - title: 'Background color', - }, - textColor: { - type: ControlType.Color, - title: 'Text color', - }, - icon: { - type: ControlType.String, - title: 'Icon', - }, - avatarImageFile: { - type: ControlType.Image, - title: 'Avatar Image File', - }, - avatarImageUrl: { - type: ControlType.String, - title: 'Avatar Image URL', - hidden(props) { - return props.avatarImageFile !== ''; - }, - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Badge.tsx b/framer/Material-UI.framerfx/code/Badge.tsx deleted file mode 100644 index 53769c4647acfb..00000000000000 --- a/framer/Material-UI.framerfx/code/Badge.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiBadge from '@mui/material/Badge'; -import { Icon } from './Icon'; - -interface Props { - badgeContent: string; - max?: number; - showZero: boolean; - icon: string; - theme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; - badgeColor: 'default' | 'primary' | 'secondary' | 'error'; - width: number | string; - height: number; -} - -const style: React.CSSProperties = { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -}; - -export function Badge(props: Props): JSX.Element { - const { badgeColor: color, badgeContent, icon, theme, width, height, ...other } = props; - const content = - icon === '' ? ( - badgeContent - ) : ( - - ); - - return ; -} - -Badge.defaultProps = { - badgeContent: '8', - showZero: false, - icon: '', - theme: 'Filled' as 'Filled', - badgeColor: 'primary' as 'primary', - width: 22, - height: 22, -}; - -addPropertyControls(Badge, { - badgeContent: { - type: ControlType.String, - title: 'Badge content', - }, - max: { - type: ControlType.Number, - title: 'Max', - }, - showZero: { - type: ControlType.Boolean, - title: 'Show zero', - }, - icon: { - type: ControlType.String, - title: 'Icon', - }, - theme: { - type: ControlType.Enum, - title: 'Theme', - options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'], - }, - badgeColor: { - type: ControlType.Enum, - title: 'Badge color', - options: ['default', 'primary', 'secondary', 'error'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/BottomNavigation.tsx b/framer/Material-UI.framerfx/code/BottomNavigation.tsx deleted file mode 100644 index 05459e6a300000..00000000000000 --- a/framer/Material-UI.framerfx/code/BottomNavigation.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiBottomNavigation from '@mui/material/BottomNavigation'; -import MuiBottomNavigationAction from '@mui/material/BottomNavigationAction'; -import { Icon } from './Icon'; - -interface Props { - showLabels: boolean; - icons: readonly string[]; - labels: readonly string[]; - width: number | string; - height: number; -} - -export function BottomNavigation(props: Props): JSX.Element { - const { labels, icons, ...other } = props; - - const [value, setValue] = React.useState(0); - - const handleChange = (event: React.SyntheticEvent, newValue: any) => { - setValue(newValue); - }; - - const items = icons.length > labels.length ? icons : labels; - - return ( - - {items.map( - (item, index) => - (labels[index] !== undefined || icons[index] !== undefined) && ( - } - /> - ), - )} - - ); -} - -BottomNavigation.defaultProps = { - showLabels: false, - icons: ['restore', 'favorite', 'location_on', 'folder'], - labels: ['Recents', 'Favorites', 'Nearby', 'Saved'], - width: 500, - height: 56, -}; - -addPropertyControls(BottomNavigation, { - showLabels: { - type: ControlType.Boolean, - title: 'Show labels', - }, - icons: { - type: ControlType.Array, - title: 'Icons', - propertyControl: { type: ControlType.String }, - }, - labels: { - type: ControlType.Array, - title: 'Labels', - propertyControl: { type: ControlType.String }, - }, -}); diff --git a/framer/Material-UI.framerfx/code/Button.tsx b/framer/Material-UI.framerfx/code/Button.tsx deleted file mode 100644 index 1a559bbe1db0d8..00000000000000 --- a/framer/Material-UI.framerfx/code/Button.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiButton from '@mui/material/Button'; -import { Icon } from './Icon'; - -interface Props { - disabled: boolean; - disableElevation: boolean; - endIcon: string; - fullWidth: boolean; - href?: string; - startIcon: string; - startIconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; - endIconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; - label: string; - width: number | string; - height: number; - variant?: 'contained' | 'outlined' | 'text'; -} - -export function Button(props: Props): JSX.Element { - const { - endIcon, - endIconTheme, - height, - label, - startIcon, - startIconTheme, - variant, - width, - ...other - } = props; - - const StartIcon = startIcon === '' ? undefined : ; - const EndIcon = endIcon === '' ? undefined : ; - - return ( -
- - {label} - -
- ); -} - -Button.defaultProps = { - disabled: false, - disableElevation: false, - endIcon: undefined, - fullWidth: false, - startIcon: undefined, - startIconTheme: 'Filled' as 'Filled', - endIconTheme: 'Filled' as 'Filled', - label: 'Button', - width: 100, - height: 38, - variant: 'text' as 'text', -}; - -addPropertyControls(Button, { - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - disableElevation: { - type: ControlType.Boolean, - title: 'Disable elevation', - }, - endIcon: { - type: ControlType.String, - title: 'End icon', - }, - fullWidth: { - type: ControlType.Boolean, - title: 'Full width', - }, - href: { - type: ControlType.String, - title: 'Href', - }, - startIcon: { - type: ControlType.String, - title: 'Start icon', - }, - startIconTheme: { - type: ControlType.Enum, - title: 'Start icon theme', - options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'], - }, - endIconTheme: { - type: ControlType.Enum, - title: 'End icon theme', - options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'], - }, - label: { - type: ControlType.String, - title: 'Label', - }, - variant: { - type: ControlType.Enum, - title: 'Variant', - options: ['contained', 'outlined', 'text'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx deleted file mode 100644 index 77538ac649fbcb..00000000000000 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiCheckbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -interface Props { - checked: boolean; - defaultChecked?: boolean; - disabled: boolean; - label: string; - width: number | string; - height: number; - onChange?: React.ChangeEventHandler; -} - -export function Checkbox(props: Props): JSX.Element { - const { - checked: checkedProp, - label, - onChange, - // @ts-ignore -- untyped - size, - ...other - } = props; - - const [checked, setChecked] = React.useState(false); - - const handleChange = (event: React.ChangeEvent) => { - if (onChange) { - onChange(event); - } - setChecked(event.target.checked); - }; - - React.useEffect(() => { - setChecked(checkedProp); - }, [checkedProp]); - - const control = ; - - return ; -} - -Checkbox.defaultProps = { - checked: false, - disabled: false, - label: 'Checkbox', - width: 100, - height: 42, -}; - -addPropertyControls(Checkbox, { - checked: { - type: ControlType.Boolean, - title: 'Checked', - }, - defaultChecked: { - type: ControlType.Boolean, - title: 'Default checked', - }, - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Chip.tsx b/framer/Material-UI.framerfx/code/Chip.tsx deleted file mode 100644 index ba0080568c47dd..00000000000000 --- a/framer/Material-UI.framerfx/code/Chip.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiChip from '@mui/material/Chip'; -import { Icon } from './Icon'; -import { Avatar } from './Avatar'; - -interface Props { - clickable: boolean; - deleteIcon: string; - disabled: boolean; - icon: string; - label: string; - avatarImageFile: string; - avatarImageUrl: string; - deletable: boolean; - iconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; - width: number | string; - height: number; -} - -export function Chip(props: Props): JSX.Element { - const { - avatarImageFile, - avatarImageUrl, - deletable, - deleteIcon, - height, - icon, - iconTheme, - width, - ...other - } = props; - - return ( - - ) : undefined - } - icon={} - onDelete={deletable ? () => {} : undefined} - deleteIcon={deleteIcon === '' ? undefined : } - {...other} - /> - ); -} - -Chip.defaultProps = { - clickable: true, - deleteIcon: '', - disabled: false, - icon: 'star', - label: 'Chip', - avatarImageFile: '', - avatarImageUrl: '', - deletable: false, - iconTheme: 'Filled' as 'Filled', - width: 100, - height: 32, -}; - -addPropertyControls(Chip, { - clickable: { - type: ControlType.Boolean, - title: 'Clickable', - }, - deleteIcon: { - type: ControlType.String, - title: 'Delete icon', - }, - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - icon: { - type: ControlType.String, - title: 'Icon', - }, - label: { - type: ControlType.String, - title: 'Label', - }, - avatarImageFile: { - type: ControlType.Image, - title: 'Avatar Image File', - }, - avatarImageUrl: { - type: ControlType.String, - title: 'Avatar Image URL', - hidden(props) { - return props.avatarImageFile !== ''; - }, - }, - deletable: { - type: ControlType.Boolean, - title: 'Deletable', - }, - iconTheme: { - type: ControlType.Enum, - title: 'Icon theme', - options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/CircularProgress.tsx b/framer/Material-UI.framerfx/code/CircularProgress.tsx deleted file mode 100644 index cdf43b70c5af7c..00000000000000 --- a/framer/Material-UI.framerfx/code/CircularProgress.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiCircularProgress from '@mui/material/CircularProgress'; - -interface Props { - thickness: number; - value: number; - variant: 'determinate' | 'indeterminate'; - width: number | string; - height: number; -} - -export function CircularProgress(props: Props): JSX.Element { - const { width, height, ...other } = props; - - return ; -} - -CircularProgress.defaultProps = { - thickness: 4, - value: 75, - variant: 'determinate' as 'determinate', - width: 44, - height: 44, -}; - -addPropertyControls(CircularProgress, { - thickness: { - type: ControlType.Number, - title: 'Thickness', - min: 0, - max: 22, - }, - value: { - type: ControlType.Number, - title: 'Value', - hidden(props) { - return props.variant === 'indeterminate'; - }, - }, - variant: { - type: ControlType.Enum, - title: 'Variant', - options: ['determinate', 'indeterminate'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/Fab.tsx b/framer/Material-UI.framerfx/code/Fab.tsx deleted file mode 100644 index ee39b291004265..00000000000000 --- a/framer/Material-UI.framerfx/code/Fab.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiFab from '@mui/material/Fab'; -import { Icon } from './Icon'; - -interface Props { - disabled: boolean; - href?: string; - icon: string; - iconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; - label: string; - width: number | string; - height: number; -} - -export function Fab(props: Props): JSX.Element { - // @ts-ignore - const { height, icon, label, iconTheme, variant, width, ...other } = props; - return ( - - - {variant === 'extended' ? label : null} - - ); -} - -Fab.defaultProps = { - disabled: false, - icon: 'add', - iconTheme: 'Filled' as 'Filled', - label: 'extended', - width: 56, - height: 56, -}; - -addPropertyControls(Fab, { - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - href: { - type: ControlType.String, - title: 'Href', - }, - icon: { - type: ControlType.String, - title: 'Icon', - }, - iconTheme: { - type: ControlType.Enum, - title: 'Icon theme', - options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'], - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Icon.tsx b/framer/Material-UI.framerfx/code/Icon.tsx deleted file mode 100644 index f9e1f3ee241594..00000000000000 --- a/framer/Material-UI.framerfx/code/Icon.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import * as Icons from '@mui/icons-material'; -import { SvgIconProps } from '@mui/material/SvgIcon'; -import { pascalCase } from './utils'; - -interface Props extends SvgIconProps { - baseClassName: string; - icon: string; - theme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; - width: number | string; - height: number; -} - -export function Icon(props: Props): JSX.Element | null { - const { height, icon: iconProp, theme, width, ...other } = props; - const iconName = `${iconProp && pascalCase(iconProp)}${theme === 'Filled' ? '' : theme}`; - const MuiIcon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined; - - return MuiIcon ? : null; -} - -Icon.defaultProps = { - baseClassName: 'material-icons', - icon: 'add', - theme: 'Filled' as 'Filled', - width: 24, - height: 24, -}; - -addPropertyControls(Icon, { - baseClassName: { - type: ControlType.String, - title: 'Base class name', - }, - icon: { - type: ControlType.String, - title: 'Icon', - }, - theme: { - type: ControlType.Enum, - title: 'Theme', - options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/IconButton.tsx b/framer/Material-UI.framerfx/code/IconButton.tsx deleted file mode 100644 index 38a2942d4ca787..00000000000000 --- a/framer/Material-UI.framerfx/code/IconButton.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiIconButton, { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton'; -import MuiBadge from '@mui/material/Badge'; -import { Icon } from './Icon'; - -interface Props extends MuiIconButtonProps { - disabled: boolean; - icon: string; - iconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; - badgeContent: string; - badgeColor: 'default' | 'primary' | 'secondary' | 'error'; - width: number | string; - height: number; -} - -export function IconButton(props: Props): JSX.Element { - const { badgeColor, badgeContent, height, icon, iconTheme, width, ...other } = props; - const IconBadge = - badgeContent === '' ? ( - - ) : ( - - - - ); - - return {IconBadge}; -} - -IconButton.defaultProps = { - disabled: false, - icon: 'favorite', - iconTheme: 'Filled' as 'Filled', - badgeContent: '', - badgeColor: 'default' as 'default', - width: 48, - height: 48, -}; - -addPropertyControls(IconButton, { - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - icon: { - type: ControlType.String, - title: 'Icon', - }, - iconTheme: { - type: ControlType.Enum, - title: 'Icon theme', - options: ['Filled', 'Outlined', 'Rounded', 'TwoTone', 'Sharp'], - }, - badgeContent: { - type: ControlType.String, - title: 'Badge content', - }, - badgeColor: { - type: ControlType.Enum, - title: 'Badge color', - options: ['default', 'primary', 'secondary', 'error'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/LinearProgress.tsx b/framer/Material-UI.framerfx/code/LinearProgress.tsx deleted file mode 100644 index ffc0a52ac67c94..00000000000000 --- a/framer/Material-UI.framerfx/code/LinearProgress.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiLinearProgress from '@mui/material/LinearProgress'; - -interface Props { - value: number; - valueBuffer: number; - variant: 'buffer' | 'determinate' | 'indeterminate' | 'query'; - width: number | string; - height: number; -} - -export function LinearProgress(props: Props): JSX.Element { - const { width, height, ...other } = props; - const style: React.CSSProperties = {}; - - return ; -} - -LinearProgress.defaultProps = { - value: 75, - valueBuffer: 75, - variant: 'determinate' as 'determinate', - width: 200, - height: 5, -}; - -addPropertyControls(LinearProgress, { - value: { - type: ControlType.Number, - title: 'Value', - hidden(props) { - return props.variant === 'indeterminate'; - }, - }, - valueBuffer: { - type: ControlType.Number, - title: 'Value buffer', - hidden(props) { - return props.variant !== 'buffer'; - }, - }, - variant: { - type: ControlType.Enum, - title: 'Variant', - options: ['buffer', 'determinate', 'indeterminate', 'query'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/List.tsx b/framer/Material-UI.framerfx/code/List.tsx deleted file mode 100644 index 25ef6199a4b90a..00000000000000 --- a/framer/Material-UI.framerfx/code/List.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType, Frame, Scroll } from 'framer'; -import { ListItem } from './ListItem'; - -interface Props { - alignItems: 'flex-start' | 'center'; - autoFocus: boolean; - children?: React.ReactNode; - dense: boolean; - disabled: boolean; - disableGutters: boolean; - divider: boolean; - width: number; - height: number; - inset: boolean; - labels: readonly string[]; - secondaryLabels: readonly string[]; - primaryAction: 'none' | 'icon' | 'avatar' | 'checkbox'; - primaryIcon: string; - imageFile: string; - imageUrl: string; - secondaryAction: 'none' | 'iconButton' | 'checkbox' | 'switch'; - secondaryIcon: string; -} - -export function List(props: Props): JSX.Element { - const { height, labels, secondaryLabels, width, ...other } = props; - - return ( - - - {labels.map((label, index) => ( - - ))} - - - ); -} - -List.defaultProps = { - alignItems: 'center' as 'center', - autoFocus: false, - dense: false, - disabled: false, - disableGutters: false, - divider: false, - width: 568, - height: 300, - inset: false, - labels: ['Brunch this weekend?', 'Summer BBQ', 'Oui Oui'], - secondaryLabels: [ - "I'll be in your neighborhood doing errands this…", - "Wish I could come, but I'm out of town this…", - 'Do you have Paris recommendations? Have you ever…', - ], - primaryAction: 'icon' as 'icon', - primaryIcon: 'star' as 'star', - imageFile: '', - imageUrl: '', - secondaryIcon: '', -}; - -addPropertyControls(List, { - alignItems: { - type: ControlType.Enum, - title: 'Align items', - options: ['flex-start', 'center'], - }, - autoFocus: { - type: ControlType.Boolean, - title: 'Auto focus', - }, - dense: { - type: ControlType.Boolean, - title: 'Dense', - }, - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - disableGutters: { - type: ControlType.Boolean, - title: 'Disable gutters', - }, - divider: { - type: ControlType.Boolean, - title: 'Divider', - }, - inset: { - type: ControlType.Boolean, - title: 'Inset', - }, - primaryAction: { - type: ControlType.Enum, - title: 'Primary action', - options: ['none', 'icon', 'avatar', 'checkbox'], - }, - primaryIcon: { - type: ControlType.String, - title: 'Primary icon', - hidden: function hidden(props) { - return ( - (props.primaryAction !== 'icon' && props.primaryAction !== 'avatar') || - props.imageFile !== '' || - props.imageUrl !== '' - ); - }, - }, - imageFile: { - type: ControlType.Image, - title: 'Image File', - hidden: function hidden(props) { - return props.primaryAction !== undefined && props.primaryAction !== 'avatar'; - }, - }, - imageUrl: { - type: ControlType.String, - title: 'Image URL', - hidden: function hidden(props) { - return ( - props.imageFile !== '' || - (props.primaryAction !== undefined && props.primaryAction !== 'avatar') - ); - }, - }, - secondaryAction: { - type: ControlType.Enum, - title: 'Secondary action', - options: ['none', 'icon', 'iconButton', 'checkbox', 'switch'], - }, - secondaryIcon: { - type: ControlType.String, - title: 'Secondary icon', - hidden: function hidden(props) { - return props.secondaryAction !== 'iconButton'; - }, - }, - labels: { - type: ControlType.Array, - title: 'Labels', - propertyControl: { type: ControlType.String }, - }, - secondaryLabels: { - type: ControlType.Array, - title: 'Secondary labels', - propertyControl: { type: ControlType.String }, - }, -}); diff --git a/framer/Material-UI.framerfx/code/ListItem.tsx b/framer/Material-UI.framerfx/code/ListItem.tsx deleted file mode 100644 index 8fa4a470f2fca0..00000000000000 --- a/framer/Material-UI.framerfx/code/ListItem.tsx +++ /dev/null @@ -1,232 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiListItem from '@mui/material/ListItem'; -import MuiListItemIcon from '@mui/material/ListItemIcon'; -import MuiListItemAvatar from '@mui/material/ListItemAvatar'; -// import MuiListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; -import MuiListItemText from '@mui/material/ListItemText'; -import MuiCheckbox from '@mui/material/Checkbox'; -import MuiSwitch from '@mui/material/Switch'; -import { Avatar } from './Avatar'; -import { Icon } from './Icon'; -import { IconButton } from './IconButton'; - -interface Props { - alignItems: 'center' | 'flex-start'; - autoFocus: boolean; - button: boolean; - dense: boolean; - disabled: boolean; - disableGutters: boolean; - disablePadding: boolean; - divider: boolean; - secondaryAction?: 'none' | 'iconButton' | 'checkbox' | 'switch'; - selected: boolean; - width: number | string; - height: number; - inset: boolean; - label: string; - secondaryLabel: string; - primaryAction: 'none' | 'icon' | 'avatar' | 'checkbox'; - primaryIcon: string; - imageFile: string; - imageUrl: string; - secondaryIcon: string; -} - -export function ListItem(props: Props): JSX.Element { - const { - button, - height, - imageFile, - imageUrl, - inset, - label, - primaryAction, - primaryIcon, - secondaryAction, - secondaryIcon, - secondaryLabel, - width, - ...other - } = props; - - let primary = null; - let secondary = null; - - switch (primaryAction) { - case 'icon': - primary = ( - - - - ); - break; - case 'avatar': - primary = ( - - - - ); - break; - case 'checkbox': - primary = ( - - - - ); - break; - default: - primary = null; - break; - } - - switch (secondaryAction) { - case 'iconButton': - secondary = ; - break; - case 'checkbox': - secondary = ; - break; - case 'switch': - secondary = ; - break; - default: - secondary = null; - break; - } - - return ( - - {primary} - 0 ? secondaryLabel : undefined} - /> - {/* MuiListItemSecondaryAction causes the text to have a bullet. No idea why! */} - {/* */} - {secondary} - {/* */} - - ); -} - -ListItem.defaultProps = { - alignItems: 'center' as 'center', - autoFocus: false, - button: false, - dense: false, - disabled: false, - disableGutters: false, - disablePadding: false, - divider: false, - selected: false, - width: 568, - height: 48, - inset: false, - label: 'Primary label', - secondaryLabel: '', - primaryAction: 'icon' as 'icon', - primaryIcon: 'star', - imageFile: '', - imageUrl: '', - secondaryIcon: '', -}; - -addPropertyControls(ListItem, { - alignItems: { - type: ControlType.Enum, - title: 'Align items', - options: ['center', 'flex-start'], - }, - autoFocus: { - type: ControlType.Boolean, - title: 'Auto focus', - }, - button: { - type: ControlType.Boolean, - title: 'Button', - }, - dense: { - type: ControlType.Boolean, - title: 'Dense', - }, - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - disableGutters: { - type: ControlType.Boolean, - title: 'Disable gutters', - }, - disablePadding: { - type: ControlType.Boolean, - title: 'Disable padding', - }, - divider: { - type: ControlType.Boolean, - title: 'Divider', - }, - secondaryAction: { - type: ControlType.Enum, - title: 'Secondary action', - options: ['none', 'iconButton', 'checkbox', 'switch'], - }, - selected: { - type: ControlType.Boolean, - title: 'Selected', - }, - inset: { - type: ControlType.Boolean, - title: 'Inset', - }, - label: { - type: ControlType.String, - title: 'Label', - }, - secondaryLabel: { - type: ControlType.String, - title: 'Secondary label', - }, - primaryAction: { - type: ControlType.Enum, - title: 'Primary action', - options: ['none', 'icon', 'avatar', 'checkbox'], - }, - primaryIcon: { - type: ControlType.String, - title: 'Primary icon', - hidden(props) { - return ( - (props.primaryAction !== 'icon' && props.primaryAction !== 'avatar') || - props.imageFile !== '' || - props.imageUrl !== '' - ); - }, - }, - imageFile: { - type: ControlType.Image, - title: 'Image File', - hidden(props) { - return props.primaryAction !== undefined && props.primaryAction !== 'avatar'; - }, - }, - imageUrl: { - type: ControlType.String, - title: 'Image URL', - hidden(props) { - return ( - props.imageFile !== '' || - (props.primaryAction !== undefined && props.primaryAction !== 'avatar') - ); - }, - }, - secondaryIcon: { - type: ControlType.String, - title: 'Secondary icon', - hidden(props) { - return props.secondaryAction !== 'iconButton'; - }, - }, -}); diff --git a/framer/Material-UI.framerfx/code/MediaCard.tsx b/framer/Material-UI.framerfx/code/MediaCard.tsx deleted file mode 100644 index 2d91166570f280..00000000000000 --- a/framer/Material-UI.framerfx/code/MediaCard.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import * as React from 'react'; -import { PropertyControls, ControlType } from 'framer'; -import Card from '@mui/material/Card'; -import CardActionArea from '@mui/material/CardActionArea'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; -import MuiButton from '@mui/material/Button'; -import MuiTypography from '@mui/material/Typography'; -import { IconButton } from './IconButton'; - -// Define type of property -interface Props { - imageFile?: string; - imageUrl?: string; - title?: string; - subtitle?: string; - body?: string; - action1?: string; - action2?: string; - icon1?: string; - icon2?: string; -} - -export class MediaCard extends React.Component { - // Set default properties - static defaultProps = { - width: 300, - height: 230, - action1: 'View', - imageFile: '', - imageUrl: 'https://source.unsplash.com/random/320x180?laptop', - title: 'Material Improvement', - subtitle: 'by Laura Philips', - body: "Discover how MUI, the leading React Material Design component library, can help to improve your users' experience.", - icon1: 'share', - icon2: 'more_vert', - }; - - // Items shown in property panel - static propertyControls: PropertyControls = { - imageFile: { - type: ControlType.Image, - title: 'Image file', - }, - imageUrl: { - type: ControlType.String, - title: 'Image URL', - hidden(props) { - return props.imageFile !== ''; - }, - }, - title: { type: ControlType.String, title: 'Title' }, - subtitle: { type: ControlType.String, title: 'Subtitle' }, - body: { type: ControlType.String, title: 'Body text' }, - action1: { type: ControlType.String, title: 'Action one' }, - action2: { - type: ControlType.String, - title: 'Action two', - hidden(props) { - return props.action1 === '' && props.action2 === ''; - }, - }, - icon1: { type: ControlType.String, title: 'Icon one' }, - icon2: { - type: ControlType.String, - title: 'Icon two', - hidden(props) { - return props.icon1 === '' && props.icon2; - }, - }, - }; - - render() { - const { action1, action2, body, icon1, icon2, imageFile, imageUrl, subtitle, title, ...other } = - this.props; - - return ( - - - {(imageFile || imageUrl) && ( - - )} - - {title && ( - - {title} - - )} - {subtitle && ( - - {subtitle} - - )} - {body && ( - - {body} - - )} - - - {(action1 !== '' || icon1 !== '') && ( - - {action1 !== '' && ( - - {action1} - - )} - {action2 !== '' && ( - - {action2} - - )} -
- {icon1 !== '' && } - {icon2 !== '' && } - - )} - - ); - } -} diff --git a/framer/Material-UI.framerfx/code/Paper.tsx b/framer/Material-UI.framerfx/code/Paper.tsx deleted file mode 100644 index f7ed3290bc5758..00000000000000 --- a/framer/Material-UI.framerfx/code/Paper.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiPaper from '@mui/material/Paper'; - -interface Props { - elevation: number; - square: boolean; - width: number | string; - height: number; -} - -export function Paper(props: Props): JSX.Element { - const { width, height, ...other } = props; - - return ; -} - -Paper.defaultProps = { - elevation: 2, - square: false, - width: 100, - height: 100, -}; - -addPropertyControls(Paper, { - elevation: { - type: ControlType.Number, - title: 'Elevation', - min: 0, - max: 24, - }, - square: { - type: ControlType.Boolean, - title: 'Square', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Radio.tsx b/framer/Material-UI.framerfx/code/Radio.tsx deleted file mode 100644 index 1232a2d06452d9..00000000000000 --- a/framer/Material-UI.framerfx/code/Radio.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel'; -import MuiRadio from '@mui/material/Radio'; - -interface Props extends Omit { - disabled: boolean; - label: string; - width: number | string; - height: number; -} - -export function Radio(props: Props): JSX.Element { - const { - label, - // @ts-ignore -- untyped - size, - ...other - } = props; - - return } label={label} {...other} />; -} - -Radio.defaultProps = { - disabled: false, - label: 'Radio', - width: '100%', - height: 42, -}; - -addPropertyControls(Radio, { - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/RadioGroup.tsx b/framer/Material-UI.framerfx/code/RadioGroup.tsx deleted file mode 100644 index 0d597f593fc4d2..00000000000000 --- a/framer/Material-UI.framerfx/code/RadioGroup.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiRadioGroup from '@mui/material/RadioGroup'; -import MuiFormLabel from '@mui/material/FormLabel'; -import { Radio } from './Radio'; - -interface Props { - labels: readonly string[]; - label: string; - width: number | string; - height: number; -} - -export function RadioGroup(props: Props): JSX.Element { - const { label, labels, ...other } = props; - - return ( -
- {label} - - {labels.map((radioLabel) => { - return ; - })} - -
- ); -} - -RadioGroup.defaultProps = { - labels: ['Paris', 'New York', 'London'], - label: 'Radio group', - width: 160, - height: 180, -}; - -addPropertyControls(RadioGroup, { - labels: { - type: ControlType.Array, - title: 'Labels', - propertyControl: { type: ControlType.String }, - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Slider.tsx b/framer/Material-UI.framerfx/code/Slider.tsx deleted file mode 100644 index 0967116bb0fabf..00000000000000 --- a/framer/Material-UI.framerfx/code/Slider.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiSlider from '@mui/material/Slider'; - -interface Props { - disabled?: boolean; - disableSwap?: boolean; - max?: number; - min?: number; - orientation?: 'horizontal' | 'vertical'; - step?: number; - tabIndex?: number; - track?: 'inverted' | 'normal' | false; - valueLabelDisplay?: 'auto' | 'off' | 'on'; - width: number | string; - height: number; -} - -export function Slider(props: Props): JSX.Element { - const { width, height, ...other } = props; - return ; -} - -Slider.defaultProps = { - width: 160, - height: 24, -}; - -addPropertyControls(Slider, { - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - disableSwap: { - type: ControlType.Boolean, - title: 'Disable swap', - }, - max: { - type: ControlType.Number, - title: 'Max', - }, - min: { - type: ControlType.Number, - title: 'Min', - }, - orientation: { - type: ControlType.Enum, - title: 'Orientation', - options: ['horizontal', 'vertical'], - }, - step: { - type: ControlType.Number, - title: 'Step', - }, - tabIndex: { - type: ControlType.Number, - title: 'Tab index', - }, - track: { - type: ControlType.Enum, - title: 'Track', - options: ['inverted', 'normal', false], - }, - valueLabelDisplay: { - type: ControlType.Enum, - title: 'Value label display', - options: ['auto', 'off', 'on'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/SnackbarContent.tsx b/framer/Material-UI.framerfx/code/SnackbarContent.tsx deleted file mode 100644 index 9735dfc5d1f4c9..00000000000000 --- a/framer/Material-UI.framerfx/code/SnackbarContent.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiSnackbarContent from '@mui/material/SnackbarContent'; -import MuiButton from '@mui/material/Button'; - -interface Props { - message: string; - width: number | string; - height: number; - label: string; -} - -export function SnackbarContent(props: Props): JSX.Element { - const { height, label, width, ...other } = props; - const action = - label !== '' ? ( - - {label} - - ) : undefined; - - return ; -} - -SnackbarContent.defaultProps = { - message: 'I love candy. I love cookies. I love cupcakes.', - width: 568, - height: 48, - label: 'Nom nom nom', -}; - -addPropertyControls(SnackbarContent, { - message: { - type: ControlType.String, - title: 'Message', - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Switch.tsx b/framer/Material-UI.framerfx/code/Switch.tsx deleted file mode 100644 index 0ee0ff5af40eb0..00000000000000 --- a/framer/Material-UI.framerfx/code/Switch.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiSwitch from '@mui/material/Switch'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -interface Props { - checked: boolean; - defaultChecked?: boolean; - disabled: boolean; - label: string; - width: number | string; - height: number; -} - -export function Switch(props: Props) { - const { - checked: checkedProp, - label, - // @ts-ignore -- untyped - onChange, - // @ts-ignore -- untyped - size, - ...other - } = props; - const [checked, setChecked] = React.useState(false); - - const handleChange = (event: React.ChangeEvent) => { - if (onChange) { - onChange(event); - } - setChecked((event.target as HTMLInputElement).checked); - }; - - React.useEffect(() => { - setChecked(checkedProp); - }, [checkedProp]); - - const control = ; - - return ; -} - -Switch.defaultProps = { - checked: false, - disabled: false, - label: 'Switch', - width: 100, - height: 38, -}; - -addPropertyControls(Switch, { - checked: { - type: ControlType.Boolean, - title: 'Checked', - }, - defaultChecked: { - type: ControlType.Boolean, - title: 'Default checked', - }, - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Tabs.tsx b/framer/Material-UI.framerfx/code/Tabs.tsx deleted file mode 100644 index 73f04bf7cbeff5..00000000000000 --- a/framer/Material-UI.framerfx/code/Tabs.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiAppBar from '@mui/material/AppBar'; -import MuiTabs from '@mui/material/Tabs'; -import MuiTab from '@mui/material/Tab'; -import { Icon } from './Icon'; - -interface Props { - allowScrollButtonsMobile: boolean; - centered: boolean; - indicatorColor: 'primary' | 'secondary'; - scrollButtons: 'auto' | false | true; - selectionFollowsFocus?: boolean; - textColor: 'inherit' | 'primary' | 'secondary'; - variant: 'fullWidth' | 'scrollable' | 'standard'; - visibleScrollbar: boolean; - appBarColor?: 'default' | 'primary' | 'secondary' | 'inherit'; - icons: readonly string[]; - labels: readonly string[]; - width: number | string; - height: number; -} - -export function Tabs(props: Props): JSX.Element { - const { appBarColor, labels, icons, width, height, ...other } = props; - - const [value, setValue] = React.useState(0); - - const handleChange = (event: React.SyntheticEvent, newValue: number) => { - setValue(newValue); - }; - - const items = icons.length > labels.length ? icons : labels; - - return ( -
- - - {items.map( - (item, index) => - (labels[index] !== undefined || icons[index] !== undefined) && ( - } - /> - ), - )} - - -
- ); -} - -Tabs.defaultProps = { - allowScrollButtonsMobile: false, - centered: false, - indicatorColor: 'primary' as 'primary', - scrollButtons: 'auto' as 'auto', - textColor: 'primary' as 'primary', - variant: 'standard' as 'standard', - visibleScrollbar: false, - icons: ['phone', 'favorite', 'person_pin'], - labels: ['Tab 1', 'Tab 2', 'Tab 3'], - width: 500, - height: 64, -}; - -addPropertyControls(Tabs, { - allowScrollButtonsMobile: { - type: ControlType.Boolean, - title: 'Allow scroll buttons mobile', - }, - centered: { - type: ControlType.Boolean, - title: 'Centered', - }, - indicatorColor: { - type: ControlType.Enum, - title: 'Indicator color', - options: ['primary', 'secondary'], - }, - scrollButtons: { - type: ControlType.Enum, - title: 'Scroll buttons', - options: ['auto', false, true], - }, - selectionFollowsFocus: { - type: ControlType.Boolean, - title: 'Selection follows focus', - }, - textColor: { - type: ControlType.Enum, - title: 'Text color', - options: ['inherit', 'primary', 'secondary'], - }, - variant: { - type: ControlType.Enum, - title: 'Variant', - options: ['fullWidth', 'scrollable', 'standard'], - }, - visibleScrollbar: { - type: ControlType.Boolean, - title: 'Visible scrollbar', - }, - appBarColor: { - type: ControlType.Enum, - title: 'App bar color', - options: ['default', 'primary', 'secondary', 'inherit'], - }, - icons: { - type: ControlType.Array, - title: 'Icons', - propertyControl: { type: ControlType.String }, - }, - labels: { - type: ControlType.Array, - title: 'Labels', - propertyControl: { type: ControlType.String }, - }, -}); diff --git a/framer/Material-UI.framerfx/code/TextField.tsx b/framer/Material-UI.framerfx/code/TextField.tsx deleted file mode 100644 index b16143d0902d45..00000000000000 --- a/framer/Material-UI.framerfx/code/TextField.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiTextField from '@mui/material/TextField'; - -interface Props { - autoFocus: boolean; - disabled: boolean; - error: boolean; - fullWidth: boolean; - helperText: string; - label: string; - multiline: boolean; - placeholder?: string; - required: boolean; - variant: 'filled' | 'outlined' | 'standard'; - width: number | string; - height: number; -} - -export function TextField(props: Props): JSX.Element { - const { width, height, ...other } = props; - const style: React.CSSProperties = {}; - - return ; -} - -TextField.defaultProps = { - autoFocus: false, - disabled: false, - error: false, - fullWidth: true, - helperText: '', - label: 'TextField', - multiline: false, - required: false, - variant: 'outlined' as 'outlined', - width: 280, - height: 56, -}; - -addPropertyControls(TextField, { - autoFocus: { - type: ControlType.Boolean, - title: 'Auto focus', - }, - disabled: { - type: ControlType.Boolean, - title: 'Disabled', - }, - error: { - type: ControlType.Boolean, - title: 'Error', - }, - fullWidth: { - type: ControlType.Boolean, - title: 'Full width', - }, - helperText: { - type: ControlType.String, - title: 'Helper text', - }, - label: { - type: ControlType.String, - title: 'Label', - }, - multiline: { - type: ControlType.Boolean, - title: 'Multiline', - }, - placeholder: { - type: ControlType.String, - title: 'Placeholder', - }, - required: { - type: ControlType.Boolean, - title: 'Required', - }, - variant: { - type: ControlType.Enum, - title: 'Variant', - options: ['filled', 'outlined', 'standard'], - }, -}); diff --git a/framer/Material-UI.framerfx/code/ThemeProvider.tsx b/framer/Material-UI.framerfx/code/ThemeProvider.tsx deleted file mode 100644 index 989527c68a7c7a..00000000000000 --- a/framer/Material-UI.framerfx/code/ThemeProvider.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import { parseColor } from './utils'; - -interface Props { - children?: React.ReactNode; - paletteMode: 'dark' | 'light'; - primary: string; - secondary: string; - error: string; - info: string; - warning: string; - success: string; -} - -export function Theme(props: Props): JSX.Element { - const { children, error, paletteMode, primary, secondary, info, warning, success, ...other } = - props; - - const theme = createTheme({ - palette: { - mode: paletteMode, - primary: { main: parseColor(primary) }, - secondary: { main: parseColor(secondary) }, - error: { main: parseColor(error) }, - info: { main: parseColor(info) }, - warning: { main: parseColor(warning) }, - success: { main: parseColor(success) }, - }, - }); - - return ( - - {children} - - ); -} - -Theme.defaultProps = { - paletteMode: 'light' as const, - primary: '#3f51b5', - secondary: '#f50057', - error: '#f44336', - info: '#2196f3', - warning: '#ff9800', - success: '#4caf4f', -}; - -addPropertyControls(Theme, { - paletteMode: { - type: ControlType.Enum, - title: 'Palette type', - options: ['dark', 'light'], - }, - primary: { - type: ControlType.Color, - title: 'Primary', - }, - secondary: { - type: ControlType.Color, - title: 'Secondary', - }, - error: { - type: ControlType.Color, - title: 'Error', - }, - info: { - type: ControlType.Color, - title: 'Info', - }, - warning: { - type: ControlType.Color, - title: 'Warning', - }, - success: { - type: ControlType.Color, - title: 'Success', - }, -}); diff --git a/framer/Material-UI.framerfx/code/Typography.tsx b/framer/Material-UI.framerfx/code/Typography.tsx deleted file mode 100644 index b269a92f12726c..00000000000000 --- a/framer/Material-UI.framerfx/code/Typography.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiTypography from '@mui/material/Typography'; - -interface Props { - align: 'center' | 'inherit' | 'justify' | 'left' | 'right'; - noWrap: boolean; - label: string; - width: number | string; - height: number; -} - -export function Typography(props: Props): JSX.Element { - const { height, label, width, ...other } = props; - return {label}; -} - -Typography.defaultProps = { - align: 'inherit' as 'inherit', - noWrap: false, - label: 'Typography', - width: 100, - height: 38, -}; - -addPropertyControls(Typography, { - align: { - type: ControlType.Enum, - title: 'Align', - options: ['center', 'inherit', 'justify', 'left', 'right'], - }, - noWrap: { - type: ControlType.Boolean, - title: 'No wrap', - }, - label: { - type: ControlType.String, - title: 'Label', - }, -}); diff --git a/framer/Material-UI.framerfx/code/utils/index.ts b/framer/Material-UI.framerfx/code/utils/index.ts deleted file mode 100644 index 6cc6a10c097027..00000000000000 --- a/framer/Material-UI.framerfx/code/utils/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import camelCase from 'lodash/camelCase'; - -/** - * Checks if the color string is a Framer Shared Color token and extracts - * the underlying color or returns the original string. - * @param {string} color - A Framer Shared Color Token/regular CSS color - * @returns {string} A valid HTML color string - * - * @example - * console.log(parseColor('var(--token-73eaaa94-88d1-416e-9e22-e09837612534, rgb(0, 0, 0))')); // rgb(0, 0, 0) - * - */ -export function parseColor(color: string): string { - const colorTokenRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/; - - const colorToken = color.match(colorTokenRegex); - - return colorToken ? colorToken[2] : color; -} - -export function pascalCase(s: string): string { - return s.charAt(0).toUpperCase() + camelCase(s).slice(1); -} diff --git a/framer/Material-UI.framerfx/design/assets/blue_sky_blue_water-2560x1600.jpg b/framer/Material-UI.framerfx/design/assets/blue_sky_blue_water-2560x1600.jpg deleted file mode 100644 index e8e34f8505ad9a..00000000000000 Binary files a/framer/Material-UI.framerfx/design/assets/blue_sky_blue_water-2560x1600.jpg and /dev/null differ diff --git a/framer/Material-UI.framerfx/design/document.json b/framer/Material-UI.framerfx/design/document.json deleted file mode 100644 index e564ec5410bfba..00000000000000 --- a/framer/Material-UI.framerfx/design/document.json +++ /dev/null @@ -1,6673 +0,0 @@ -{ - "root" : { - "__class" : "RootNode", - "children" : [ - { - "__class" : "FrameNode", - "aspectRatio" : null, - "blendingEnabled" : 0, - "blendingMode" : "normal", - "blur" : 12, - "blurEnabled" : 0, - "blurType" : "layer", - "borderBottom" : 1, - "borderColor" : "#222", - "borderEnabled" : 0, - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 12, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.48769430051813473, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Paper.tsx_Paper", - "codeComponentProps" : { - "elevation" : 9, - "square" : false, - "variant" : "elevation" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 620, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "uKnIy1ujk", - "intrinsicHeight" : 100, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 4, - "locked" : true, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 23, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 12, - "visible" : true, - "width" : 745, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 101, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.17516339869281045, - "centerAnchorY" : 0.84316770186335399, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/LinearProgress.tsx_LinearProgress", - "codeComponentProps" : { - "color" : "secondary", - "value" : 50, - "valueBuffer" : 71, - "variant" : "determinate" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 0, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "fsVlf1yOf", - "intrinsicHeight" : 44, - "intrinsicWidth" : 200, - "invert" : 0, - "invertEnabled" : 0, - "left" : 32, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 204, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 121, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.14248366013071895, - "centerAnchorY" : 0.77795031055900621, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/CircularProgress.tsx_CircularProgress", - "codeComponentProps" : { - "color" : "primary", - "thickness" : 4, - "value" : 50, - "variant" : "static" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 44, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "RSoeuLFzt", - "intrinsicHeight" : 44, - "intrinsicWidth" : 44, - "invert" : 0, - "invertEnabled" : 0, - "left" : 87, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 44, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 121, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.073202614379084971, - "centerAnchorY" : 0.77795031055900621, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/CircularProgress.tsx_CircularProgress", - "codeComponentProps" : { - "color" : "primary", - "thickness" : 4, - "value" : 25, - "variant" : "static" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 44, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "KQiTYINBC", - "intrinsicHeight" : 44, - "intrinsicWidth" : 44, - "invert" : 0, - "invertEnabled" : 0, - "left" : 34, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 44, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 121, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.27973856209150327, - "centerAnchorY" : 0.77795031055900621, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/CircularProgress.tsx_CircularProgress", - "codeComponentProps" : { - "color" : "primary", - "thickness" : 4, - "value" : 100, - "variant" : "static" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 44, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "gj4dGo61L", - "intrinsicHeight" : 44, - "intrinsicWidth" : 44, - "invert" : 0, - "invertEnabled" : 0, - "left" : 192, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 44, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.78431372549019607, - "centerAnchorY" : 0.21816770186335405, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Typography.tsx_Typography", - "codeComponentProps" : { - "align" : "inherit", - "color" : "textSecondary", - "label" : "Typography - words go here", - "noWrap" : false, - "variant" : "h5" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 67, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "aEQsk4ZrJ", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 69, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 107, - "visible" : true, - "width" : 192, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.78431372549019607, - "centerAnchorY" : 0.098602484472049695, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Typography.tsx_Typography", - "codeComponentProps" : { - "align" : "justify", - "color" : "textSecondary", - "label" : "Big title", - "noWrap" : false, - "variant" : "h3" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 47, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "Z4EGekCkc", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 69, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 40, - "visible" : true, - "width" : 192, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 57, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.80326797385620918, - "centerAnchorY" : 0.77717391304347827, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/RadioGroup.tsx_RadioGroup", - "codeComponentProps" : { - "label" : "Radio group", - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Paris" - }, - { - "enabled" : true, - "type" : "string", - "value" : "New York" - }, - { - "enabled" : true, - "type" : "string", - "value" : "London" - } - ] - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 173, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "qAymu8lfB", - "intrinsicHeight" : 200, - "intrinsicWidth" : 200, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 36, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 229, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 111, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.54183006535947709, - "centerAnchorY" : 0.7996894409937888, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Switch.tsx_Switch", - "codeComponentProps" : { - "checked" : false, - "color" : "primary", - "disabled" : false, - "label" : "Switch", - "size" : "medium" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 36, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "aYG471naS", - "intrinsicHeight" : 56, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 298, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 105, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 158, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.55032679738562096, - "centerAnchorY" : 0.72515527950310554, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Checkbox.tsx_Checkbox", - "codeComponentProps" : { - "checked" : false, - "color" : "secondary", - "disabled" : false, - "label" : "Checkbox", - "size" : "medium" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 38, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "ln6jPYo2X", - "intrinsicHeight" : 56, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 287, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 114, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.30849673202614381, - "centerAnchorY" : 0.47981366459627328, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Chip.tsx_Chip", - "codeComponentProps" : { - "avatarImageFile" : "", - "avatarImageUrl" : "", - "clickable" : false, - "color" : "primary", - "deletable" : true, - "deleteIcon" : "delete", - "disabled" : false, - "icon" : "flag", - "iconTheme" : "Filled", - "label" : "Chip", - "size" : "medium", - "variant" : "default" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 32, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "LJpKpjj1x", - "intrinsicHeight" : 32, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 186, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 293, - "visible" : true, - "width" : 100, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.20392156862745098, - "centerAnchorY" : 0.47981366459627328, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Chip.tsx_Chip", - "codeComponentProps" : { - "avatarImageFile" : "", - "avatarImageUrl" : "", - "clickable" : true, - "color" : "secondary", - "deletable" : true, - "deleteIcon" : "", - "disabled" : false, - "icon" : "", - "iconTheme" : "Filled", - "label" : "Chip", - "size" : "medium", - "variant" : "default" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 32, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "bmDnke8io", - "intrinsicHeight" : 32, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 106, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 293, - "visible" : true, - "width" : 100, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.083006535947712415, - "centerAnchorY" : 0.47981366459627328, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Chip.tsx_Chip", - "codeComponentProps" : { - "avatarImageFile" : "", - "avatarImageUrl" : "", - "clickable" : true, - "color" : "default", - "deletable" : false, - "deleteIcon" : "", - "disabled" : false, - "icon" : "", - "iconTheme" : "Filled", - "label" : "Chip", - "size" : "medium", - "variant" : "default" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 32, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "p1UegbS5I", - "intrinsicHeight" : 32, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 37, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 293, - "visible" : true, - "width" : 53, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 251, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.22091503267973855, - "centerAnchorY" : 0.57919254658385089, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Avatar.tsx_Avatar", - "codeComponentProps" : { - "backgroundColor" : "rgba(198, 102, 250, 0.36)", - "icon" : "face", - "imageFile" : "", - "imageUrl" : "", - "label" : "MB", - "textColor" : "#09F", - "variant" : "circle" - }, - "codeOverrideEnabled" : true, - "codeOverrideFile" : ".\/Examples.tsx", - "codeOverrideIdentifier" : ".\/Examples.tsx_Hover", - "codeOverrideName" : "Hover", - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 40, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "b42hC2huS", - "intrinsicHeight" : 40, - "intrinsicWidth" : 40, - "invert" : 0, - "invertEnabled" : 0, - "left" : 149, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 40, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 251, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.074509803921568626, - "centerAnchorY" : 0.57919254658385089, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Avatar.tsx_Avatar", - "codeComponentProps" : { - "backgroundColor" : "hsl(123, 100%, 34%)", - "icon" : "", - "imageFile" : "", - "imageUrl" : "", - "label" : "MB", - "textColor" : "hsl(0, 0%, 100%)", - "variant" : "circle" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 40, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "ncHQ_uaYV", - "intrinsicHeight" : 40, - "intrinsicWidth" : 40, - "invert" : 0, - "invertEnabled" : 0, - "left" : 37, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 40, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.10000000000000001, - "centerAnchorY" : 0.081521739130434784, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "default", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "small", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "text" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 27, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "cTF81XkKB", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 42, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 39, - "visible" : true, - "width" : 69, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.092810457516339873, - "centerAnchorY" : 0.16459627329192547, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "medium", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "text" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 38, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "gH2P5ajZS", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 34, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 87, - "visible" : true, - "width" : 74, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.11895424836601307, - "centerAnchorY" : 0.24068322981366461, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "secondary", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "large", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "text" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 38, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "UAYbLpbQl", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 34, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 136, - "visible" : true, - "width" : 114, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.26666666666666666, - "centerAnchorY" : 0.086956521739130432, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "default", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "small", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "outlined" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 32, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "qjbrctp5m", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 166, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 40, - "visible" : true, - "width" : 76, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.2803921568627451, - "centerAnchorY" : 0.16459627329192547, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "medium", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "outlined" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 38, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "p78dyfHG3", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 166, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 87, - "visible" : true, - "width" : 97, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.30718954248366015, - "centerAnchorY" : 0.24534161490683229, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "secondary", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "large", - "startIcon" : "fingerprint", - "startIconTheme" : "Filled", - "variant" : "outlined" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 44, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "RAut_4_AJ", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 166, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 136, - "visible" : true, - "width" : 138, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.47254901960784312, - "centerAnchorY" : 0.086180124223602481, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "default", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "small", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "contained" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 33, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "p5OaBzMZw", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 324, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 39, - "visible" : true, - "width" : 75, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.48692810457516339, - "centerAnchorY" : 0.16459627329192547, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "medium", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "contained" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 38, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "WwZcN3rH7", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 324, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 87, - "visible" : true, - "width" : 97, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.49215686274509801, - "centerAnchorY" : 0.2391304347826087, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "secondary", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "star", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "large", - "startIcon" : "", - "startIconTheme" : "Filled", - "variant" : "contained" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 40, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "EWICS0NZy", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "invert" : 0, - "invertEnabled" : 0, - "left" : 323, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 134, - "visible" : true, - "width" : 107, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 243, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.39084967320261438, - "centerAnchorY" : 0.5854037267080745, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/IconButton.tsx_IconButton", - "codeComponentProps" : { - "badgeColor" : "primary", - "badgeContent" : "12", - "color" : "secondary", - "disabled" : false, - "icon" : "favorite", - "iconTheme" : "Filled", - "size" : "medium" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 48, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "wZTA1bDKa", - "intrinsicHeight" : 48, - "intrinsicWidth" : 48, - "invert" : 0, - "invertEnabled" : 0, - "left" : 275, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 48, - "widthType" : 0 - }, - { - "__class" : "FrameNode", - "aspectRatio" : null, - "blendingEnabled" : 0, - "blendingMode" : "normal", - "blur" : 12, - "blurEnabled" : 0, - "blurType" : "layer", - "borderBottom" : 1, - "borderColor" : "#222", - "borderEnabled" : 0, - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 196, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.16470588235294117, - "centerAnchorY" : 0.67701863354037262, - "children" : [ - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 0, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.75268817204301075, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Icon.tsx_Icon", - "codeComponentProps" : { - "color" : "action", - "icon" : "fingerprint", - "theme" : "Filled" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 24, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "ipYOnNJLW", - "intrinsicHeight" : 24, - "intrinsicWidth" : 24, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "iRwoAR2c0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 34, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 0, - "visible" : true, - "width" : 24, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 0, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.93548387096774188, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Icon.tsx_Icon", - "codeComponentProps" : { - "color" : "disabled", - "icon" : "explore", - "theme" : "TwoTone" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 24, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "SmiFm2KTV", - "intrinsicHeight" : 24, - "intrinsicWidth" : 24, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "iRwoAR2c0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 0, - "visible" : true, - "width" : 24, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 0, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.58064516129032262, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Icon.tsx_Icon", - "codeComponentProps" : { - "color" : "error", - "icon" : "favorite", - "theme" : "Filled" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 24, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "Z6QMvFOyl", - "intrinsicHeight" : 24, - "intrinsicWidth" : 24, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "iRwoAR2c0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 66, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 0, - "visible" : true, - "width" : 24, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 0, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.40860215053763443, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Icon.tsx_Icon", - "codeComponentProps" : { - "color" : "secondary", - "icon" : "alarm", - "theme" : "Filled" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 24, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "ZXD7jFWTQ", - "intrinsicHeight" : 24, - "intrinsicWidth" : 24, - "invert" : 0, - "invertEnabled" : 0, - "left" : 64, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "iRwoAR2c0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 0, - "visible" : true, - "width" : 24, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 0, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.23655913978494625, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Icon.tsx_Icon", - "codeComponentProps" : { - "color" : "primary", - "icon" : "map", - "theme" : "Filled" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 24, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "Cmq5hZBdJ", - "intrinsicHeight" : 24, - "intrinsicWidth" : 24, - "invert" : 0, - "invertEnabled" : 0, - "left" : 32, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "iRwoAR2c0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 0, - "visible" : true, - "width" : 24, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 0, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.064516129032258063, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Icon.tsx_Icon", - "codeComponentProps" : { - "color" : "inherit", - "icon" : "Add", - "theme" : "Filled" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 24, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "VyJiTOlnf", - "intrinsicHeight" : 24, - "intrinsicWidth" : 24, - "invert" : 0, - "invertEnabled" : 0, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "iRwoAR2c0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 0, - "visible" : true, - "width" : 24, - "widthType" : 0 - } - ], - "clip" : false, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillLinearGradient" : { - "__class" : "LinearGradient", - "alpha" : 1, - "angle" : 180, - "stops" : [ - { - "__class" : "GradientColorStop", - "position" : 0, - "value" : "rgba(0,0,0,0)" - }, - { - "__class" : "GradientColorStop", - "position" : 1, - "value" : "black" - } - ] - }, - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "guidesX" : [ - - ], - "guidesY" : [ - - ], - "height" : 24, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "iRwoAR2c0", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "invert" : 0, - "invertEnabled" : 0, - "isExternalMaster" : null, - "isMaster" : false, - "isTarget" : false, - "left" : 33, - "locked" : false, - "name" : null, - "navigationTarget" : null, - "navigationTransition" : "push", - "navigationTransitionBackdropColor" : "rgba(4,4,15,.4)", - "navigationTransitionDirection" : "left", - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "replicaInfo" : null, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 186, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 271, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.78169934640522876, - "centerAnchorY" : 0.53649068322981364, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/TextField.tsx_TextField", - "codeComponentProps" : { - "autoFocus" : false, - "color" : "primary", - "disabled" : false, - "error" : true, - "fullWidth" : true, - "helperText" : "Helper text", - "label" : "TextField", - "multiline" : false, - "placeholder" : "Text", - "required" : false, - "size" : "small", - "variant" : "outlined" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 55, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "tdMctOo3y", - "intrinsicHeight" : 56, - "intrinsicWidth" : 280, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 69, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 196, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.78169934640522876, - "centerAnchorY" : 0.41459627329192544, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/TextField.tsx_TextField", - "codeComponentProps" : { - "autoFocus" : false, - "color" : "primary", - "disabled" : false, - "error" : false, - "fullWidth" : true, - "helperText" : "", - "label" : "TextField", - "multiline" : false, - "placeholder" : "Text", - "required" : false, - "size" : "small", - "variant" : "filled" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 56, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "nKSP47jaJ", - "intrinsicHeight" : 56, - "intrinsicWidth" : 280, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 69, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 239, - "visible" : true, - "width" : 196, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.78431372549019607, - "centerAnchorY" : 0.3105590062111801, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/TextField.tsx_TextField", - "codeComponentProps" : { - "autoFocus" : false, - "color" : "primary", - "disabled" : false, - "error" : false, - "fullWidth" : true, - "helperText" : "", - "label" : "TextField", - "multiline" : false, - "placeholder" : "Text", - "required" : false, - "size" : "small", - "variant" : "standard" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 52, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "tDU_7rcKF", - "intrinsicHeight" : 56, - "intrinsicWidth" : 280, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 69, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 174, - "visible" : true, - "width" : 192, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 282, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.23071895424836603, - "centerAnchorY" : 0.55279503105590067, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Badge.tsx_Badge", - "codeComponentProps" : { - "badgeColor" : "primary", - "badgeContent" : "9", - "icon" : "", - "max" : 99, - "showZero" : false, - "theme" : "Filled", - "variant" : "standard" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 12, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "b9c79c4ku", - "intrinsicHeight" : 22, - "intrinsicWidth" : 22, - "invert" : 0, - "invertEnabled" : 0, - "left" : 169, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 15, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.3457516339869281, - "centerAnchorY" : 0.37422360248447206, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Fab.tsx_Fab", - "codeComponentProps" : { - "color" : "secondary", - "disabled" : false, - "href" : "", - "icon" : "add", - "iconTheme" : "Filled", - "label" : "extended", - "size" : "medium", - "variant" : "extended" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 42, - "heightType" : 0, - "id" : "XKe8AZHKh", - "intrinsicHeight" : 64, - "intrinsicWidth" : 64, - "left" : 189, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : 220, - "visible" : true, - "width" : 151, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.14248366013071895, - "centerAnchorY" : 0.37422360248447206, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Fab.tsx_Fab", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "href" : "", - "icon" : "add", - "iconTheme" : "Filled", - "label" : "extended", - "size" : "medium", - "variant" : "extended" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 42, - "heightType" : 0, - "id" : "cmptuiJ7Q", - "intrinsicHeight" : 64, - "intrinsicWidth" : 64, - "left" : 32, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : 220, - "visible" : true, - "width" : 154, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.55032679738562096, - "centerAnchorY" : 0.37111801242236025, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Fab.tsx_Fab", - "codeComponentProps" : { - "color" : "default", - "disabled" : false, - "href" : "", - "icon" : "add", - "iconTheme" : "Filled", - "label" : "extended", - "size" : "large", - "variant" : "round" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 56, - "heightType" : 0, - "id" : "BuQOP8BaF", - "intrinsicHeight" : 56, - "intrinsicWidth" : 56, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 316, - "rotation" : 0, - "top" : 211, - "visible" : true, - "width" : 56, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.54967320261437913, - "centerAnchorY" : 0.47981366459627328, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Fab.tsx_Fab", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "href" : "", - "icon" : "add", - "iconTheme" : "Filled", - "label" : "extended", - "size" : "medium", - "variant" : "round" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 48, - "heightType" : 0, - "id" : "DodnLTHL0", - "intrinsicHeight" : 56, - "intrinsicWidth" : 56, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 320, - "rotation" : 0, - "top" : 285, - "visible" : true, - "width" : 49, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 251, - "centerAnchorX" : 0.54967320261437913, - "centerAnchorY" : 0.57919254658385089, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Fab.tsx_Fab", - "codeComponentProps" : { - "color" : "secondary", - "disabled" : false, - "href" : "", - "icon" : "add", - "iconTheme" : "Filled", - "label" : "extended", - "size" : "small", - "variant" : "round" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 40, - "heightType" : 0, - "id" : "DQiEiN5lO", - "intrinsicHeight" : 56, - "intrinsicWidth" : 56, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 324, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 41, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 251, - "centerAnchorX" : 0.1477124183006536, - "centerAnchorY" : 0.57919254658385089, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Avatar.tsx_Avatar", - "codeComponentProps" : { - "backgroundColor" : "#bdbdbd", - "icon" : "face", - "imageFile" : "", - "imageUrl" : "https:\/\/i.pravatar.cc\/300", - "label" : "MB", - "textColor" : "#09F", - "variant" : "circle" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 40, - "heightType" : 0, - "id" : "U1xJlNJL3", - "intrinsicHeight" : 40, - "intrinsicWidth" : 40, - "left" : 93, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 40, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 65, - "centerAnchorX" : 0.54183006535947709, - "centerAnchorY" : 0.86645962732919257, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Radio.tsx_Radio", - "codeComponentProps" : { - "color" : "secondary", - "disabled" : false, - "label" : "Radio", - "size" : "medium" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 42, - "heightType" : 0, - "id" : "COoY9vYQB", - "intrinsicHeight" : 42, - "intrinsicWidth" : null, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 297, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 107, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 53, - "centerAnchorX" : 0.1758169934640523, - "centerAnchorY" : 0.89906832298136641, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Slider.tsx_Slider", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "max" : 100, - "min" : 0, - "orientation" : "horizontal", - "step" : 1, - "track" : "normal", - "valueLabelDisplay" : "off" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 24, - "heightType" : 0, - "id" : "Wo5ifgmlV", - "intrinsicHeight" : 24, - "intrinsicWidth" : 160, - "left" : 33, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "l0xy8PUi0", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 203, - "widthType" : 0 - } - ], - "clip" : true, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillLinearGradient" : { - "__class" : "LinearGradient", - "alpha" : 1, - "angle" : 180, - "stops" : [ - { - "__class" : "GradientColorStop", - "position" : 0, - "value" : "rgba(0,0,0,0)" - }, - { - "__class" : "GradientColorStop", - "position" : 1, - "value" : "black" - } - ] - }, - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "guidesX" : [ - - ], - "guidesY" : [ - - ], - "height" : 644, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "l0xy8PUi0", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "invert" : 0, - "invertEnabled" : 0, - "isExternalMaster" : null, - "isMaster" : false, - "isTarget" : false, - "left" : -1944, - "locked" : false, - "name" : null, - "navigationTarget" : null, - "navigationTransition" : "push", - "navigationTransitionBackdropColor" : "rgba(4,4,15,.4)", - "navigationTransitionDirection" : "left", - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "replicaInfo" : null, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : -537, - "visible" : true, - "width" : 765, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/ThemeProvider.tsx_Theme", - "codeComponentProps" : { - "children" : [ - { - "enabled" : true, - "type" : "componentinstance", - "value" : "sqbNjMafZ" - } - ], - "error" : "#f44336", - "info" : "#2196f3", - "paletteMode" : "light", - "primary" : "#3577CB", - "secondary" : "#CA2B51", - "success" : "#4caf4f", - "warning" : "#ff9800" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 600, - "heightType" : 0, - "id" : "OkSNSUKKs", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "left" : -1944, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : -1252, - "visible" : true, - "width" : 800, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.51058631921824105, - "centerAnchorY" : 1.0134892086330936, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/AppBar.tsx_AppBar", - "codeComponentProps" : { - "action1" : "", - "action2" : "", - "icon1" : "", - "icon1Badge" : "", - "icon2" : "", - "icon2Badge" : "", - "leftIcon" : "", - "title" : "MUI" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 81, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "Sc1IYPXPV", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "invert" : 0, - "invertEnabled" : 0, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : -537, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Tabs.tsx_Tabs", - "codeComponentProps" : { - "appBarColor" : "inherit", - "centered" : true, - "icons" : [ - { - "enabled" : true, - "type" : "string", - "value" : "star" - }, - { - "enabled" : true, - "type" : "string", - "value" : "favorite" - }, - { - "enabled" : true, - "type" : "string", - "value" : "person_pin" - } - ], - "indicatorColor" : "secondary", - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Tab 1" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Tab 2" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Tab 3" - } - ], - "scrollButtons" : "on", - "textColor" : "secondary", - "variant" : "fullWidth" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 79, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "D1hYM7zs2", - "intrinsicHeight" : 48, - "intrinsicWidth" : 500, - "invert" : 0, - "invertEnabled" : 0, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : -188, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Tabs.tsx_Tabs", - "codeComponentProps" : { - "appBarColor" : "primary", - "centered" : false, - "icons" : [ - { - "enabled" : true, - "type" : "string", - "value" : "star" - }, - { - "enabled" : true, - "type" : "string", - "value" : "favorite" - }, - { - "enabled" : true, - "type" : "string", - "value" : "person_pin" - } - ], - "indicatorColor" : "secondary", - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Tab 1" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Tab 2" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Tab 3" - } - ], - "scrollButtons" : "off", - "textColor" : "inherit", - "variant" : "fullWidth" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 74, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "oyULVDfIk", - "intrinsicHeight" : 48, - "intrinsicWidth" : 500, - "invert" : 0, - "invertEnabled" : 0, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : -304, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Tabs.tsx_Tabs", - "codeComponentProps" : { - "appBarColor" : "secondary", - "centered" : false, - "icons" : [ - { - "enabled" : true, - "type" : "string", - "value" : "star" - }, - { - "enabled" : true, - "type" : "string", - "value" : "favorite" - }, - { - "enabled" : true, - "type" : "string", - "value" : "person_pin" - } - ], - "indicatorColor" : "primary", - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Tab one" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Tab two" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Tab three" - } - ], - "scrollButtons" : "on", - "textColor" : "inherit", - "variant" : "standard" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 80, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "FruW36As0", - "intrinsicHeight" : 48, - "intrinsicWidth" : 500, - "invert" : 0, - "invertEnabled" : 0, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : -66, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.51058631921824105, - "centerAnchorY" : 1.0134892086330936, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/AppBar.tsx_AppBar", - "codeComponentProps" : { - "action1" : "login", - "action2" : "", - "icon1" : "notifications", - "icon1Badge" : "8", - "icon2" : "account_circle", - "icon2Badge" : "", - "leftIcon" : "menu", - "title" : "MUI" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 64, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "kDhkUGILq", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "invert" : 0, - "invertEnabled" : 0, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : -430, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/SnackbarContent.tsx_SnackbarContent", - "codeComponentProps" : { - "label" : "Nom nom nom", - "message" : "I love candy. I love cookies. I love cupcakes." - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 46, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "Q5qEPpCM6", - "intrinsicHeight" : 56, - "intrinsicWidth" : 280, - "invert" : 0, - "invertEnabled" : 0, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 292, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "blurEnabled" : 0, - "blurType" : "layer", - "borderBottom" : 1, - "borderColor" : "#222", - "borderEnabled" : 0, - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : "framer\/Scroll", - "codeComponentProps" : { - "children" : [ - { - "enabled" : true, - "type" : "componentinstance", - "value" : "MS2ScTJEQ" - } - ], - "direction" : "vertical", - "directionLock" : true, - "dragEnabled" : true, - "wheelEnabled" : true - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillLinearGradient" : { - "__class" : "LinearGradient", - "alpha" : 1, - "angle" : 180, - "stops" : [ - { - "__class" : "GradientColorStop", - "position" : 0, - "value" : "rgba(0,0,0,0)" - }, - { - "__class" : "GradientColorStop", - "position" : 1, - "value" : "black" - } - ] - }, - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 195, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "ksndZXiRp", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "invert" : 0, - "invertEnabled" : 0, - "left" : -1113, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : -15, - "visible" : true, - "width" : 279, - "widthType" : 0 - }, - { - "__class" : "FrameNode", - "aspectRatio" : null, - "blendingEnabled" : 0, - "blendingMode" : "normal", - "blur" : 12, - "blurEnabled" : 0, - "blurType" : "layer", - "borderBottom" : 1, - "borderColor" : "#222", - "borderEnabled" : 0, - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.10588235294117647, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/ListItem.tsx_ListItem", - "codeComponentProps" : { - "alignItems" : "center", - "autoFocus" : false, - "button" : false, - "dense" : false, - "disabled" : false, - "disableGutters" : false, - "divider" : false, - "imageFile" : "", - "imageUrl" : "", - "inset" : false, - "label" : "Primary label", - "primaryAction" : "icon", - "primaryIcon" : "star", - "secondaryAction" : "none", - "secondaryIcon" : "star", - "secondaryLabel" : "", - "selected" : false - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 48, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "UZ4amxRTC", - "intrinsicHeight" : 48, - "intrinsicWidth" : 568, - "invert" : 0, - "invertEnabled" : 0, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "MS2ScTJEQ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 2, - "visible" : true, - "width" : 403, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.25294117647058822, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/ListItem.tsx_ListItem", - "codeComponentProps" : { - "alignItems" : "center", - "autoFocus" : false, - "button" : false, - "dense" : false, - "disabled" : false, - "disableGutters" : false, - "divider" : false, - "imageFile" : "", - "imageUrl" : "", - "inset" : false, - "label" : "Primary label", - "primaryAction" : "avatar", - "primaryIcon" : "star", - "secondaryAction" : "none", - "secondaryIcon" : "star", - "secondaryLabel" : "26 Oct 2018", - "selected" : false - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 72, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "q1ZOfnUT1", - "intrinsicHeight" : 48, - "intrinsicWidth" : 568, - "invert" : 0, - "invertEnabled" : 0, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "MS2ScTJEQ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 50, - "visible" : true, - "width" : 403, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : null, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.42941176470588233, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/ListItem.tsx_ListItem", - "codeComponentProps" : { - "alignItems" : "center", - "autoFocus" : false, - "button" : false, - "dense" : false, - "disabled" : false, - "disableGutters" : false, - "divider" : false, - "imageFile" : "", - "imageUrl" : "", - "inset" : false, - "label" : "Primary label", - "primaryAction" : "checkbox", - "primaryIcon" : "star", - "secondaryAction" : "iconButton", - "secondaryIcon" : "star", - "secondaryLabel" : "", - "selected" : false - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 48, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "UsRks3lbM", - "intrinsicHeight" : 48, - "intrinsicWidth" : 568, - "invert" : 0, - "invertEnabled" : 0, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "MS2ScTJEQ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 122, - "visible" : true, - "width" : 403, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 122, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.57058823529411762, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/ListItem.tsx_ListItem", - "codeComponentProps" : { - "alignItems" : "center", - "autoFocus" : false, - "button" : false, - "dense" : false, - "disabled" : false, - "disableGutters" : false, - "divider" : false, - "imageFile" : "", - "imageUrl" : "", - "inset" : false, - "label" : "Primary label", - "primaryAction" : "checkbox", - "primaryIcon" : "star", - "secondaryAction" : "checkbox", - "secondaryIcon" : "star", - "secondaryLabel" : "", - "selected" : false - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 48, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "p8CuUt_db", - "intrinsicHeight" : 48, - "intrinsicWidth" : 568, - "invert" : 0, - "invertEnabled" : 0, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "MS2ScTJEQ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 403, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 74, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.71176470588235297, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/ListItem.tsx_ListItem", - "codeComponentProps" : { - "alignItems" : "center", - "autoFocus" : false, - "button" : false, - "dense" : false, - "disabled" : false, - "disableGutters" : false, - "divider" : false, - "imageFile" : "", - "imageUrl" : "", - "inset" : false, - "label" : "Primary label", - "primaryAction" : "icon", - "primaryIcon" : "star", - "secondaryAction" : "switch", - "secondaryIcon" : "star", - "secondaryLabel" : "", - "selected" : false - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 48, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "gJVSCYiKn", - "intrinsicHeight" : 48, - "intrinsicWidth" : 568, - "invert" : 0, - "invertEnabled" : 0, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "MS2ScTJEQ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 403, - "widthType" : 0 - } - ], - "clip" : true, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - { - "__class" : "ExportOptions", - "enabled" : true, - "nameExtension" : "", - "nameExtensionMode" : "Suffix", - "scale" : 2, - "type" : "png" - } - ], - "fillColor" : "white", - "fillEnabled" : true, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillLinearGradient" : { - "__class" : "LinearGradient", - "alpha" : 1, - "angle" : 180, - "stops" : [ - { - "__class" : "GradientColorStop", - "position" : 0, - "value" : "rgba(0,0,0,0)" - }, - { - "__class" : "GradientColorStop", - "position" : 1, - "value" : "black" - } - ] - }, - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "guidesX" : [ - - ], - "guidesY" : [ - - ], - "height" : 339, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "MS2ScTJEQ", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "invert" : 0, - "invertEnabled" : 0, - "isExternalMaster" : null, - "isMaster" : false, - "isTarget" : false, - "left" : -1113, - "locked" : false, - "name" : null, - "navigationTarget" : null, - "navigationTransition" : "push", - "navigationTransitionBackdropColor" : "rgba(4,4,15,.4)", - "navigationTransitionDirection" : "left", - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "replicaInfo" : null, - "right" : null, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : 277, - "visible" : true, - "width" : 279, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/MediaCard.tsx_MediaCard", - "codeComponentProps" : { - "action1" : "View", - "action2" : "", - "body" : "Discover MUI, a popular React Material Design component library.", - "icon1" : "share", - "icon2" : "more_vert", - "imageFile" : "", - "imageUrl" : "https:\/\/source.unsplash.com\/random\/320x180?www", - "subtitle" : "by Laura Philips", - "title" : "Material Improvement" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 451, - "heightType" : 0, - "id" : "Sop_2HJX3", - "intrinsicHeight" : 230, - "intrinsicWidth" : 300, - "left" : -1113, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : -537, - "visible" : true, - "width" : 412, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/BottomNavigation.tsx_BottomNavigation", - "codeComponentProps" : { - "icons" : [ - { - "enabled" : true, - "type" : "string", - "value" : "restore" - }, - { - "enabled" : true, - "type" : "string", - "value" : "favorite" - }, - { - "enabled" : true, - "type" : "string", - "value" : "location_on" - }, - { - "enabled" : true, - "type" : "string", - "value" : "folder" - } - ], - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Recents" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Favorites" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Nearby" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Saved" - } - ], - "showLabels" : false - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 56, - "heightType" : 0, - "id" : "cHgINEBUz", - "intrinsicHeight" : 56, - "intrinsicWidth" : 500, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : 76, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/BottomNavigation.tsx_BottomNavigation", - "codeComponentProps" : { - "icons" : [ - { - "enabled" : true, - "type" : "string", - "value" : "restore" - }, - { - "enabled" : true, - "type" : "string", - "value" : "favorite" - }, - { - "enabled" : true, - "type" : "string", - "value" : "location_on" - }, - { - "enabled" : true, - "type" : "string", - "value" : "folder" - } - ], - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Recents" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Favorites" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Nearby" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Saved" - } - ], - "showLabels" : true - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 56, - "heightType" : 0, - "id" : "HGTFAYs4R", - "intrinsicHeight" : 56, - "intrinsicWidth" : 500, - "left" : -587, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : 174, - "visible" : true, - "width" : 569, - "widthType" : 0 - }, - { - "__class" : "FrameNode", - "aspectRatio" : null, - "blendingEnabled" : 0, - "blendingMode" : "normal", - "bottom" : null, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 0, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Paper.tsx_Paper", - "codeComponentProps" : { - "elevation" : 2, - "square" : false, - "variant" : "elevation" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - { - "__class" : "ExportOptions", - "enabled" : true, - "nameExtension" : "", - "nameExtensionMode" : "Suffix", - "scale" : 1, - "type" : "png" - } - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 600, - "heightType" : 0, - "id" : "OO3kKeUuc", - "intrinsicHeight" : 100, - "intrinsicWidth" : 100, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "top" : 0, - "visible" : true, - "width" : 800, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 50, - "centerAnchorX" : 0.24906367041198502, - "centerAnchorY" : 0.55083333333333329, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/MediaCard.tsx_MediaCard", - "codeComponentProps" : { - "action1" : "View", - "action2" : "", - "body" : "Discover how MUI, the leading React Material Design component library, can help to improve your users' experience.", - "icon1" : "share", - "icon2" : "more_vert", - "imageFile" : "design\/assets\/blue_sky_blue_water-2560x1600.jpg", - "imageUrl" : "https:\/\/source.unsplash.com\/random\/320x180", - "subtitle" : "by Laura Philips", - "title" : "Material Improvement" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 439, - "heightType" : 0, - "id" : "GnGEWX2VN", - "intrinsicHeight" : 230, - "intrinsicWidth" : 300, - "left" : 22, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : null, - "rotation" : 0, - "top" : 111, - "visible" : true, - "width" : 355, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.55181023720349565, - "centerAnchorY" : 0.23333333333333334, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Fab.tsx_Fab", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "href" : "", - "icon" : "add", - "iconTheme" : "Filled", - "label" : "extended", - "size" : "large", - "variant" : "round" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 56, - "heightType" : 0, - "id" : "ZEMEiFiAS", - "intrinsicHeight" : 56, - "intrinsicWidth" : 56, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 331, - "rotation" : 0, - "top" : 112, - "visible" : true, - "width" : 56, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.69038701622971288, - "centerAnchorY" : 0.23083333333333333, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Button.tsx_Button", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "disableElevation" : false, - "endIcon" : "", - "endIconTheme" : "Filled", - "fullWidth" : false, - "href" : "", - "label" : "Button", - "size" : "medium", - "startIcon" : "star", - "startIconTheme" : "Filled", - "variant" : "outlined" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 39, - "heightType" : 0, - "id" : "YO8AB7C2u", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 187, - "rotation" : 0, - "top" : 119, - "visible" : true, - "width" : 122, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 50, - "centerAnchorX" : 0.74094881398252188, - "centerAnchorY" : 0.87666666666666671, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/SnackbarContent.tsx_SnackbarContent", - "codeComponentProps" : { - "label" : "Nom nom nom", - "message" : "I love candy. I love cookies." - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 48, - "heightType" : 0, - "id" : "v1BIhaHHk", - "intrinsicHeight" : 48, - "intrinsicWidth" : 568, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 28, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 359, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 130, - "centerAnchorX" : 0.64249999999999996, - "centerAnchorY" : 0.77916666666666667, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/LinearProgress.tsx_LinearProgress", - "codeComponentProps" : { - "color" : "primary", - "value" : 75, - "valueBuffer" : 75, - "variant" : "determinate" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 5, - "heightType" : 0, - "id" : "Xj9xGd7TB", - "intrinsicHeight" : 5, - "intrinsicWidth" : 200, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 186, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 200, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.64294631710362049, - "centerAnchorY" : 0.35166666666666668, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/TextField.tsx_TextField", - "codeComponentProps" : { - "autoFocus" : false, - "color" : "primary", - "disabled" : false, - "error" : false, - "fullWidth" : true, - "helperText" : "", - "label" : "TextField", - "multiline" : false, - "placeholder" : "", - "required" : false, - "size" : "small", - "variant" : "standard" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 56, - "heightType" : 0, - "id" : "cyOOTfqxo", - "intrinsicHeight" : 56, - "intrinsicWidth" : 280, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 185, - "rotation" : 0, - "top" : 183, - "visible" : true, - "width" : 202, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.64294631710362049, - "centerAnchorY" : 0.47833333333333333, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/TextField.tsx_TextField", - "codeComponentProps" : { - "autoFocus" : false, - "color" : "primary", - "disabled" : false, - "error" : false, - "fullWidth" : true, - "helperText" : "", - "label" : "TextField", - "multiline" : false, - "placeholder" : "", - "required" : false, - "size" : "small", - "variant" : "outlined" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 56, - "heightType" : 0, - "id" : "IerwQu95H", - "intrinsicHeight" : 56, - "intrinsicWidth" : 280, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 185, - "rotation" : 0, - "top" : 259, - "visible" : true, - "width" : 202, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 204, - "centerAnchorX" : 0.64294631710362049, - "centerAnchorY" : 0.61333333333333329, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/TextField.tsx_TextField", - "codeComponentProps" : { - "autoFocus" : false, - "color" : "primary", - "disabled" : false, - "error" : false, - "fullWidth" : true, - "helperText" : "", - "label" : "TextField", - "multiline" : true, - "placeholder" : "", - "required" : false, - "size" : "small", - "variant" : "filled" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 56, - "heightType" : 0, - "id" : "r_kVBHFAX", - "intrinsicHeight" : 56, - "intrinsicWidth" : 280, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 185, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 202, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.89263420724094877, - "centerAnchorY" : 0.23333333333333334, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Checkbox.tsx_Checkbox", - "codeComponentProps" : { - "checked" : false, - "color" : "secondary", - "disabled" : false, - "label" : "Checkbox", - "size" : "medium" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 42, - "heightType" : 0, - "id" : "IPkoX0VC5", - "intrinsicHeight" : 42, - "intrinsicWidth" : 100, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 36, - "rotation" : 0, - "top" : 119, - "visible" : true, - "width" : 100, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.89263420724094877, - "centerAnchorY" : 0.33666666666666667, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Switch.tsx_Switch", - "codeComponentProps" : { - "checked" : false, - "color" : "secondary", - "disabled" : false, - "label" : "Switch", - "size" : "medium" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 38, - "heightType" : 0, - "id" : "a9tAfvueI", - "intrinsicHeight" : 38, - "intrinsicWidth" : 100, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 36, - "rotation" : 0, - "top" : 183, - "visible" : true, - "width" : 100, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 125, - "centerAnchorX" : 0.93757802746566787, - "centerAnchorY" : 0.7583333333333333, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Avatar.tsx_Avatar", - "codeComponentProps" : { - "backgroundColor" : "#bdbdbd", - "icon" : "face", - "imageFile" : "", - "imageUrl" : "https:\/\/i.pravatar.cc\/300", - "label" : "MB", - "textColor" : "#09F", - "variant" : "circle" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 40, - "heightType" : 0, - "id" : "WaSNzeZQN", - "intrinsicHeight" : 40, - "intrinsicWidth" : 40, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 30, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 40, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 181, - "centerAnchorX" : 0.90636704119850187, - "centerAnchorY" : 0.54833333333333334, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/RadioGroup.tsx_RadioGroup", - "codeComponentProps" : { - "label" : "Radio group", - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Paris" - }, - { - "enabled" : true, - "type" : "string", - "value" : "New York" - }, - { - "enabled" : true, - "type" : "string", - "value" : "London" - } - ] - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 180, - "heightType" : 0, - "id" : "nZMDvQNnQ", - "intrinsicHeight" : 180, - "intrinsicWidth" : 160, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 150, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "blur" : 12, - "borderBottom" : 1, - "borderColor" : "#222", - "borderLeft" : 1, - "borderPerSide" : false, - "borderRight" : 1, - "borderStyle" : "solid", - "borderTop" : 1, - "borderWidth" : 1, - "bottom" : 125, - "boxShadows" : [ - - ], - "brightness" : 100, - "brightnessEnabled" : 0, - "centerAnchorX" : 0.8651685393258427, - "centerAnchorY" : 0.755, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/CircularProgress.tsx_CircularProgress", - "codeComponentProps" : { - "color" : "primary", - "thickness" : 4, - "value" : 75, - "variant" : "static" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "contrast" : 100, - "contrastEnabled" : 0, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "grayscale" : 0, - "grayScaleEnabled" : 0, - "height" : 44, - "heightType" : 0, - "hueRotate" : 0, - "hueRotateEnabled" : 0, - "id" : "TgrXWeTOf", - "intrinsicHeight" : 44, - "intrinsicWidth" : 44, - "invert" : 0, - "invertEnabled" : 0, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 86, - "rotation" : 0, - "saturate" : 100, - "saturateEnabled" : 0, - "sepia" : 0, - "sepiaEnabled" : 0, - "top" : null, - "visible" : true, - "width" : 44, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : null, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.055, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/AppBar.tsx_AppBar", - "codeComponentProps" : { - "action1" : "Login", - "action2" : "", - "icon1" : "notifications", - "icon1Badge" : "8", - "icon2" : "account_circle", - "icon2Badge" : "", - "leftIcon" : "menu", - "title" : "MUI" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 66, - "heightType" : 0, - "id" : "lzCirtJDO", - "intrinsicHeight" : 56, - "intrinsicWidth" : 300, - "left" : 0, - "locked" : false, - "name" : "AppBar", - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "top" : 0, - "visible" : true, - "width" : 800, - "widthType" : 0 - }, - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 157, - "centerAnchorX" : 0.64249999999999996, - "centerAnchorY" : 0.71833333333333338, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/Slider.tsx_Slider", - "codeComponentProps" : { - "color" : "primary", - "disabled" : false, - "max" : 100, - "min" : 0, - "orientation" : "horizontal", - "step" : 1, - "track" : "normal", - "valueLabelDisplay" : "off" - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 24, - "heightType" : 0, - "id" : "RKYmZZsSl", - "intrinsicHeight" : 24, - "intrinsicWidth" : 160, - "left" : null, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "sqbNjMafZ", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 185, - "rotation" : 0, - "top" : null, - "visible" : true, - "width" : 202, - "widthType" : 0 - } - ], - "clip" : true, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - { - "__class" : "ExportOptions", - "enabled" : true, - "nameExtension" : "", - "nameExtensionMode" : "Suffix", - "scale" : 1, - "type" : "png" - } - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : true, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "guidesX" : [ - - ], - "guidesY" : [ - - ], - "height" : 600, - "heightType" : 0, - "id" : "sqbNjMafZ", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "isExternalMaster" : null, - "isMaster" : false, - "isTarget" : false, - "left" : -980, - "locked" : false, - "name" : null, - "navigationTarget" : null, - "navigationTransition" : "push", - "navigationTransitionBackdropColor" : "rgba(4,4,15,.4)", - "navigationTransitionDirection" : "left", - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "replicaInfo" : null, - "right" : null, - "rotation" : 0, - "top" : -1252, - "visible" : true, - "width" : 800, - "widthType" : 0 - }, - { - "__class" : "FrameNode", - "aspectRatio" : null, - "blendingEnabled" : 0, - "blendingMode" : "normal", - "bottom" : null, - "centerAnchorX" : 0, - "centerAnchorY" : 0, - "children" : [ - { - "__class" : "CodeComponentNode", - "aspectRatio" : null, - "bottom" : 0, - "centerAnchorX" : 0.5, - "centerAnchorY" : 0.5, - "children" : [ - - ], - "clip" : true, - "codeComponentIdentifier" : ".\/List.tsx_List", - "codeComponentProps" : { - "alignItems" : "center", - "autoFocus" : false, - "dense" : false, - "disabled" : false, - "disableGutters" : false, - "divider" : false, - "imageFile" : "", - "imageUrl" : "", - "inset" : false, - "labels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "Brunch this weekend?" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Summer BBQ" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Oui Oui" - } - ], - "primaryAction" : "icon", - "primaryIcon" : "star", - "secondaryAction" : "none", - "secondaryIcon" : "", - "secondaryLabels" : [ - { - "enabled" : true, - "type" : "string", - "value" : "I'll be in your neighborhood doing errands this…" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Wish I could come, but I'm out of town this…" - }, - { - "enabled" : true, - "type" : "string", - "value" : "Do you have Paris recommendations? Have you ever…" - } - ] - }, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : false, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "height" : 241, - "heightType" : 0, - "id" : "TRLe5xCqu", - "intrinsicHeight" : 300, - "intrinsicWidth" : 568, - "left" : 0, - "locked" : false, - "name" : null, - "opacity" : 1, - "originalid" : null, - "parentid" : "IYoHQn0XB", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "right" : 0, - "rotation" : 0, - "top" : 0, - "visible" : true, - "width" : 451, - "widthType" : 0 - } - ], - "clip" : true, - "codeOverrideEnabled" : false, - "constraintsLocked" : false, - "deviceType" : null, - "exportOptions" : [ - - ], - "fillColor" : "rgba(255,255,255,1)", - "fillEnabled" : true, - "fillImage" : null, - "fillImageOriginalName" : null, - "fillImagePixelHeight" : null, - "fillImagePixelWidth" : null, - "fillImageResize" : "fill", - "fillType" : "color", - "guidesX" : [ - - ], - "guidesY" : [ - - ], - "height" : 241, - "heightType" : 0, - "id" : "IYoHQn0XB", - "intrinsicHeight" : null, - "intrinsicWidth" : null, - "isExternalMaster" : null, - "isMaster" : false, - "isTarget" : false, - "left" : -1944, - "locked" : false, - "name" : null, - "navigationTarget" : null, - "navigationTransition" : "push", - "navigationTransitionBackdropColor" : "rgba(4,4,15,.4)", - "navigationTransitionDirection" : "left", - "opacity" : 1, - "originalid" : null, - "parentid" : "BnkWog8YS", - "previewSettings" : null, - "radius" : 0, - "radiusBottomLeft" : 0, - "radiusBottomRight" : 0, - "radiusIsRelative" : false, - "radiusPerCorner" : false, - "radiusTopLeft" : 0, - "radiusTopRight" : 0, - "replicaInfo" : null, - "right" : null, - "rotation" : 0, - "top" : 188, - "visible" : true, - "width" : 451, - "widthType" : 0 - } - ], - "guidesX" : [ - - ], - "guidesY" : [ - - ], - "id" : "BnkWog8YS", - "name" : null, - "originalid" : null, - "parentid" : null, - "tokens" : { - - }, - "tokensIndex" : [ - - ], - "visible" : false - }, - "version" : 55 -} \ No newline at end of file diff --git a/framer/Material-UI.framerfx/metadata/artwork.png b/framer/Material-UI.framerfx/metadata/artwork.png deleted file mode 100644 index 363d0d613a91e7..00000000000000 Binary files a/framer/Material-UI.framerfx/metadata/artwork.png and /dev/null differ diff --git a/framer/Material-UI.framerfx/metadata/icon.png b/framer/Material-UI.framerfx/metadata/icon.png deleted file mode 100644 index 90a963dc1f019e..00000000000000 Binary files a/framer/Material-UI.framerfx/metadata/icon.png and /dev/null differ diff --git a/framer/Material-UI.framerfx/package.json b/framer/Material-UI.framerfx/package.json deleted file mode 100644 index 7e11aeea9e817c..00000000000000 --- a/framer/Material-UI.framerfx/package.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "name": "@framer/material-ui.material-ui", - "private": true, - "author": "MUI Team", - "description": "MUI Framer components", - "version": "1.1.21", - "license": "MIT", - "homepage": "https://mui.com/", - "repository": { - "type": "git", - "url": "https://github.com/mui/material-ui.git", - "directory": "framer/Material-UI.framerfx" - }, - "bugs": { - "url": "https://github.com/mui/material-ui/issues" - }, - "dependencies": { - "@mui/icons-material": "^5.4.1", - "@mui/material": "^5.4.1", - "@mui/utils": "^5.4.1", - "lodash": "^4.17.21" - }, - "peerDependencies": { - "@types/react": "^17.0.33", - "framer": "^1.0.0", - "react": "^17.0.0", - "react-dom": "^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - }, - "framer": { - "displayName": "MUI", - "id": "ee255265-d0d6-4999-a685-9461c1248b6a" - } -} diff --git a/framer/Material-UI.framerfx/tsconfig.json b/framer/Material-UI.framerfx/tsconfig.json deleted file mode 100644 index f82f2d62b0f4e7..00000000000000 --- a/framer/Material-UI.framerfx/tsconfig.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "compilerOptions": { - "esModuleInterop": true, - "target": "es2015", - "lib": ["es2015", "dom"], - "module": "commonjs", - "jsx": "react", - "outDir": "build", - "sourceMap": false, - "declaration": false, - "resolveJsonModule": true, - "noImplicitAny": false - }, - "exclude": ["node_modules", "build"] -} diff --git a/framer/package.json b/framer/package.json deleted file mode 100644 index 86d5ea03c40459..00000000000000 --- a/framer/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "framer", - "version": "1.0.47", - "description": "Builds MUI for Framer X", - "repository": "https://github.com/mui/material-ui", - "author": "MUI Team", - "license": "MIT", - "private": true, - "dependencies": { - "@types/react": "^17.0.39", - "case": "1.6.3", - "deepmerge": "^4.2.2", - "docs": "^5.0.0", - "framer": "^1.2.5", - "framer-motion": "^4.1.17", - "mustache": "^4.2.0", - "react-docgen": "^5.4.0" - }, - "scripts": { - "build": "yarn build:core && yarn build:styles && yarn prettier", - "build:core": "cross-env BABEL_ENV=development babel-node --config-file ../babel.config.js ./scripts/buildFramer.js ../packages/mui-material/src ./Material-UI.framerfx/code", - "build:styles": "cross-env BABEL_ENV=development babel-node --config-file ../babel.config.js ./scripts/buildFramer.js ../packages/mui-styles/src ./Material-UI.framerfx/code", - "prettier": "prettier --write --config ../prettier.config.js ./**/*.{js,tsx}", - "typescript": "tsc -p tsconfig.json" - } -} diff --git a/framer/scripts/additionalProps.js b/framer/scripts/additionalProps.js deleted file mode 100644 index 04e207685fb966..00000000000000 --- a/framer/scripts/additionalProps.js +++ /dev/null @@ -1,335 +0,0 @@ -import { componentSettings } from './framerConfig'; - -const additionalProps = (component) => { - const templates = { - appBarColor: { - type: { - name: 'enum', - value: [ - { value: "'default'" }, - { value: "'primary'" }, - { value: "'secondary'" }, - { value: "'inherit'" }, - ], - }, - }, - avatarImageFile: { - type: { - name: 'image', - title: "'Avatar Image File'", - }, - defaultValue: { value: componentSettings[component].propValues.avatarImageFile }, - }, - avatarImageUrl: { - type: { - name: 'string', - title: "'Avatar Image URL'", - hidden(props) { - return props.avatarImageFile !== ''; - }, - }, - defaultValue: { value: componentSettings[component].propValues.avatarImageUrl }, - }, - badgeContent: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.badgeContent }, - }, - backgroundColor: { - type: { name: 'color' }, - defaultValue: { value: componentSettings[component].propValues.backgroundColor }, - }, - badgeColor: { - type: { - name: 'enum', - value: [ - { value: "'default'" }, - { value: "'primary'" }, - { value: "'secondary'" }, - { value: "'error'" }, - ], - }, - defaultValue: { value: componentSettings[component].propValues.badgeColor }, - }, - checked: { - type: { name: 'boolean' }, - description: 'Selection control default checked', - defaultValue: { value: false }, - }, - checkedIcon: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.icon }, - }, - checkedIconTheme: { - type: { - name: 'enum', - value: [ - { value: "'Filled'" }, - { value: "'Outlined'" }, - { value: "'Rounded'" }, - { value: "'TwoTone'" }, - { value: "'Sharp'" }, - ], - }, - }, - clickable: { - type: { name: 'boolean' }, - description: 'Chip - clickable (change default to `true`)', - defaultValue: { value: componentSettings[component].propValues.clickable }, - }, - textColor: { - type: { name: 'color' }, - defaultValue: { value: componentSettings[component].propValues.color }, - }, - deletable: { - type: { name: 'boolean' }, - description: 'Chip - deletable', - defaultValue: { value: componentSettings[component].propValues.deletable }, - }, - deleteIcon: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.deleteIcon }, - hidden(props) { - return props.deletable === false; - }, - }, - disabled: { - type: { name: 'boolean' }, - defaultValue: { value: false }, - }, - elevation: { - type: { name: 'number', min: 0, max: 24 }, - defaultValue: { value: componentSettings[component].propValues.elevation }, - }, - endIcon: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.icon }, - }, - endIconTheme: { - type: { - name: 'enum', - value: [ - { value: "'Filled'" }, - { value: "'Outlined'" }, - { value: "'Rounded'" }, - { value: "'TwoTone'" }, - { value: "'Sharp'" }, - ], - }, - defaultValue: { value: "'Filled'" }, - }, - fullWidth: { - type: { name: 'boolean' }, - description: 'TextField - fullWidth', - defaultValue: { value: componentSettings[component].propValues.fullWidth }, - }, - height: { - type: { name: 'number' }, - defaultValue: { value: componentSettings[component].propValues.height }, - }, - helperText: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.helperText }, - }, - icon: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.icon }, - }, - iconTheme: { - type: { - name: 'enum', - value: [ - { value: "'Filled'" }, - { value: "'Outlined'" }, - { value: "'Rounded'" }, - { value: "'TwoTone'" }, - { value: "'Sharp'" }, - ], - }, - defaultValue: { value: "'Filled'" }, - }, - imageFile: { - type: { - name: 'image', - title: "'Image File'", - hidden(props) { - return props.primaryAction !== undefined && props.primaryAction !== 'avatar'; - }, - }, - defaultValue: { value: componentSettings[component].propValues.imageFile }, - }, - imageUrl: { - type: { - name: 'string', - title: "'Image URL'", - hidden(props) { - return ( - props.imageFile !== '' || - (props.primaryAction !== undefined && props.primaryAction !== 'avatar') - ); - }, - }, - defaultValue: { value: componentSettings[component].propValues.imageUrl }, - }, - inset: { - type: { name: 'boolean' }, - description: 'ListItem/ListItemText - inset', - defaultValue: { value: componentSettings[component].propValues.inset }, - }, - icons: { - type: { - name: 'array', - title: "'Icons'", - propertyControl: '{ type: ControlType.String }', - }, - defaultValue: { value: componentSettings[component].propValues.icons }, - }, - label: { - type: { - name: 'string', - }, - defaultValue: { value: componentSettings[component].propValues.label }, - }, - labels: { - type: { - name: 'array', - propertyControl: '{ type: ControlType.String }', - }, - defaultValue: { value: componentSettings[component].propValues.labels }, - }, - message: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.message }, - }, - paletteMode: { - mode: { name: 'enum', value: [{ value: "'dark'" }, { value: "'light'" }] }, - description: 'Theme palette mode', - defaultValue: { value: "'light'" }, - }, - primaryAction: { - type: { - name: 'enum', - value: [ - { value: "'none'" }, - { value: "'icon'" }, - { value: "'avatar'" }, - { value: "'checkbox'" }, - ], - }, - defaultValue: { value: componentSettings[component].propValues.primaryAction }, - }, - primaryIcon: { - type: { - name: 'string', - hidden(props) { - return ( - (props.primaryAction !== 'icon' && props.primaryAction !== 'avatar') || - props.imageFile !== '' || - props.imageUrl !== '' - ); - }, - }, - defaultValue: { value: componentSettings[component].propValues.primaryIcon }, - }, - progressValue: { - type: { - name: 'number', - hidden(props) { - return props.variant === 'indeterminate'; - }, - }, - defaultValue: { value: componentSettings[component].propValues.progressValue }, - }, - secondaryAction: { - type: { - name: 'enum', - value: [ - { value: "'none'" }, - { value: "'iconButton'" }, - { value: "'checkbox'" }, - { value: "'switch'" }, - ], - }, - }, - secondaryIcon: { - type: { - name: 'string', - hidden(props) { - return props.secondaryAction !== 'iconButton'; - }, - }, - defaultValue: { value: componentSettings[component].propValues.secondaryIcon }, - }, - secondaryLabel: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.secondaryLabel }, - }, - size: { - type: { name: 'number', value: null }, - defaultValue: { value: componentSettings[component].propValues.size }, - }, - startIcon: { - type: { name: 'string' }, - defaultValue: { value: componentSettings[component].propValues.icon }, - }, - startIconTheme: { - type: { - name: 'enum', - value: [ - { value: "'Filled'" }, - { value: "'Outlined'" }, - { value: "'Rounded'" }, - { value: "'TwoTone'" }, - { value: "'Sharp'" }, - ], - }, - defaultValue: { value: "'Filled'" }, - }, - theme: { - type: { - name: 'enum', - value: [ - { value: "'Filled'" }, - { value: "'Outlined'" }, - { value: "'Rounded'" }, - { value: "'TwoTone'" }, - { value: "'Sharp'" }, - ], - }, - description: 'Icon theme', - defaultValue: { value: "'Filled'" }, - }, - thickness: { - type: { name: 'number', min: 0, max: 22 }, - defaultValue: { value: componentSettings[component].propValues.thickness }, - }, - valueBuffer: { - type: { - name: 'number', - hidden(props) { - return props.variant !== 'buffer'; - }, - }, - defaultValue: { value: componentSettings[component].propValues.valueBuffer }, - }, - variant: { - defaultValue: { value: componentSettings[component].propValues.variant }, - }, - width: { - type: { name: 'union', value: [{ name: 'number' }, { name: 'string' }] }, - defaultValue: { value: componentSettings[component].propValues.width }, - }, - }; - - // The props this component has default values for - const propNames = Object.keys(componentSettings[component].propValues); - - const reducer = (additionalPropsObj, propName) => { - const targetPropName = propName === 'progressValue' ? 'value' : propName; - additionalPropsObj[targetPropName] = templates[propName]; - return additionalPropsObj; - }; - - return propNames.reduce(reducer, {}); -}; - -export default additionalProps; diff --git a/framer/scripts/buildFramer.js b/framer/scripts/buildFramer.js deleted file mode 100644 index faab2415f7cce9..00000000000000 --- a/framer/scripts/buildFramer.js +++ /dev/null @@ -1,280 +0,0 @@ -/* eslint-disable no-console */ - -import { mkdir, readFileSync, writeFileSync } from 'fs'; -import path from 'path'; -import { defaultHandlers, parse as docgenParse } from 'react-docgen'; -import muiDefaultPropsHandler from 'docs/src/modules/utils/defaultPropsHandler'; -import Mustache from 'mustache'; -import Case from 'case'; -import deepmerge from 'deepmerge'; -import { findComponents } from 'docs/src/modules/utils/find'; -import { componentSettings, ignoredControls } from './framerConfig'; -import additionalProps from './additionalProps'; - -// const DEBUG = true; - -// Component(s) to update -// Use Empty array for all, or one or more components selectively. `['Button', 'CircularProgress']` -const COMPONENTS = []; - -// Read the command-line args -const args = process.argv; -const rootDirectory = path.resolve(__dirname, '../../'); -const framerDirectory = path.resolve(process.cwd(), args[3]); - -if (args.length < 4) { - console.log('\nERROR: syntax: buildFramer source-dir target-dir [ComponentName]\n'); - process.exit(); -} - -function getReactAPI(src, componentObject) { - let reactAPI; - try { - reactAPI = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), { - filename: componentObject.filename, - }); - } catch (err) { - console.log('Error parsing src for', componentObject.filename); - throw err; - } - - reactAPI.name = path.parse(componentObject.filename).name; - - return reactAPI; -} - -// Return true if a prop is in the ignoredProps list, or description contains `@ignore`. -function ignore(reactAPI, prop) { - // Test if the propName contains a (sub)string from ignoredProps - const blacklist = componentSettings.all.ignoredProps.concat( - componentSettings[reactAPI.name].ignoredProps, - ); - const reducer = (accumulator, currentValue) => - accumulator || new RegExp(`^${currentValue}$`).test(prop.name); - - return ( - (prop.description && prop.description.includes('@ignore')) || blacklist.reduce(reducer, false) - ); -} - -// Build the options list for Enum PropType / TS property types -function options(type, separator) { - let optionsString = ''; - if (type.value) { - if (type.name === 'enum') { - type.value.forEach((value) => { - optionsString += `${value.value}${separator}`; - }); - } else if (type.name === 'union') { - type.value.forEach((value) => { - optionsString += `${value.name}${separator}`; - }); - } - } - // Remove the trailing comma - return optionsString.slice(0, -separator.length); -} - -function otherValues(others) { - let result = ''; - const keys = Object.keys(others); - if (keys.length > 0) { - result += keys.reduce((acc, key) => `${acc}\n ${key}: ${others[key]},`, ''); - } - return result; -} - -function getTemplateStrings(reactAPI) { - let tsInterface = ''; - let defaults = ''; - let controls = ''; - let style = ''; - - reactAPI.propNames.forEach((propName) => { - const prop = reactAPI.props[propName]; - if (prop === undefined) { - throw new TypeError(`Prop '${propName}' does not exist in component '${reactAPI.name}'.`); - } - prop.name = propName; - - if (ignore(reactAPI, prop)) { - return; - } - - /** - * TS Interface - */ - const propTypeTS = { ...prop.type }; - - // Refactored as switch - - switch (propTypeTS.name) { - case 'bool': - propTypeTS.name = 'boolean'; - break; - - case 'color': - case 'file': - case 'image': - propTypeTS.name = 'string'; - break; - - case 'node': - propTypeTS.name = 'React.ReactNode'; - break; - - case 'element': - propTypeTS.name = 'React.ReactElement'; - break; - - case 'func': - propTypeTS.name = '() => void'; - break; - - case 'array': - propTypeTS.name = 'readonly string[]'; - break; - - default: - break; - } - - tsInterface += ` ${propName}${ - propTypeTS.required || prop.defaultValue !== undefined ? '' : '?' - }: ${propTypeTS.value ? `${options(propTypeTS, ' | ')}` : `${propTypeTS.name}`};\n`; - - const preventTypeWidening = propTypeTS.name === 'enum'; - /** - * Default values - */ - if (prop.defaultValue) { - defaults += ` ${propName}: ${prop.defaultValue.value}${ - preventTypeWidening ? ` as ${prop.defaultValue.value}` : '' - },\n`; - } - - /** - * Property controls - */ - const propTypeControls = { ...prop.type }; - - if (propTypeControls.name === 'bool') { - propTypeControls.name = 'boolean'; - } - - const { name, value, hidden, raw, title, ...other } = propTypeControls; - - if (!ignoredControls.includes(prop.name)) { - controls += ` -${propName}: { - type: ControlType.${Case.pascal(name)}, - title: ${title || `'${Case.sentence(propName)}'`},${ - value - ? ` - options: [${options(propTypeControls, ', ')}],` - : '' - }${ - hidden - ? ` - ${hidden},` - : '' - }${otherValues(other)} -},`; - } - }); - - if (componentSettings[reactAPI.name].style) { - const keys = Object.keys(componentSettings[reactAPI.name].style); - keys.forEach((key) => { - style += ` ${key}: '${componentSettings[reactAPI.name].style[key]}',\n`; - }); - } - - return { - componentName: reactAPI.name, - // Omit the trailing \n - tsInterface: tsInterface.slice(0, -1), - defaultProps: defaults.slice(0, -1), - propertyControls: controls.slice(1), - style: style.slice(0, -1), - }; -} - -function ensureExists(pat, mask, cb) { - mkdir(pat, mask, (err) => { - if (err) { - if (err.code === 'EEXIST') { - cb(null); // ignore the error if the folder already exists - } else { - cb(err); // something else went wrong - } - } else { - cb(null); // successfully created folder - } - }); -} - -function writeFile(reactAPI) { - ensureExists(framerDirectory, 0o744, (err) => { - if (err) { - console.log('Error creating directory', framerDirectory); - return; - } - - const template = readFileSync( - path.join(__dirname, `templates/${componentSettings[reactAPI.name].template}`), - 'utf8', - ); - const fileString = Mustache.render(template, getTemplateStrings(reactAPI)); - writeFileSync(path.resolve(framerDirectory, `${reactAPI.name}.tsx`), fileString); - console.log('Built Framer component for', reactAPI.name); - }); -} - -function buildFramer(componentObject) { - const src = readFileSync(componentObject.filename, 'utf8'); - - if (src.match(/@ignore - internal component\./) || src.match(/@ignore - do not document\./)) { - return; - } - - const reactAPI = getReactAPI(src, componentObject); - - if (COMPONENTS.length > 0) { - if (COMPONENTS.indexOf(reactAPI.name) === -1) { - return; - } - } - - // Add additional props, if the template values exist for this component - if (componentSettings[reactAPI.name].propValues) { - reactAPI.props = deepmerge(reactAPI.props, additionalProps(reactAPI.name)); - } - - reactAPI.propNames = Object.keys(reactAPI.props); - - // Relative location in the file system - reactAPI.filename = componentObject.filename.replace(rootDirectory, ''); - - if (typeof DEBUG !== 'undefined') { - console.log(reactAPI.props); - } - writeFile(reactAPI); -} - -function run() { - const components = findComponents(path.resolve(process.cwd(), args[2])); - - components.forEach((component) => { - if (args[4]) { - if (args[4] === path.parse(component.filename).name) { - buildFramer(component); - } - // Only convert components with settings - } else if (Object.keys(componentSettings).includes(path.parse(component.filename).name)) { - buildFramer(component); - } - }); -} - -run(); diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js deleted file mode 100644 index b70e90f278fb36..00000000000000 --- a/framer/scripts/framerConfig.js +++ /dev/null @@ -1,418 +0,0 @@ -// Generate types but not controls -export const ignoredControls = ['children', 'width', 'height']; - -export const componentSettings = { - all: { - ignoredProps: [ - 'children', - 'classes', - 'className', - 'component', - 'disableRipple', - 'id', - 'name', - '.*Props', - '.*Ref', - 'aria.*', - ], - }, - Avatar: { - ignoredProps: [ - 'alt', - 'imgProps', - 'sizes', - 'src', - 'srcSet', - 'sx', - // FIXME: `Union` - 'variant', - ], - propValues: { - // Note: MUI Avatar doesn't have the normal `color` prop. - backgroundColor: "'#4154af'", - textColor: "'#ffffff'", - icon: "'face'", - avatarImageFile: "''", - avatarImageUrl: "'https://i.pravatar.cc/300'", - label: "'MB'", - width: 40, - height: 40, - }, - template: 'avatar.txt', - }, - Badge: { - ignoredProps: [ - 'anchorOrigin', - 'children', - 'color', - 'disableFocusRipple', - 'invisible', - 'overlap', - 'components', - 'componentsProps', - // FIXME: `Union` - 'variant', - 'sx', - ], - propValues: { - icon: "''", - theme: 'Filled', - badgeContent: "'8'", - badgeColor: "'primary'", - width: 22, - height: 22, - }, - style: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - template: 'badge.txt', - }, - BottomNavigation: { - ignoredProps: ['children', 'onChange', 'ScrollButtonComponent', 'value', 'sx'], - propValues: { - icons: "['restore', 'favorite', 'location_on', 'folder']", - labels: "['Recents', 'Favorites', 'Nearby', 'Saved']", - width: 500, - height: 56, - }, - template: 'bottom_navigation.txt', - }, - Button: { - ignoredProps: [ - 'children', - 'disableFocusRipple', - 'sx', - // union not supported by framer ControlType - // interface, control types and default value need to be hardcoded - 'color', - 'size', - 'variant', - ], - propValues: { - startIcon: "''", - startIconTheme: 'Filled', - endIcon: "''", - endIconTheme: 'Filled', - label: "'Button'", - width: 100, - height: 38, - }, - template: 'button.txt', - }, - Checkbox: { - ignoredProps: [ - 'checkedIcon', - 'icon', - 'indeterminate', - 'indeterminateIcon', - 'onChange', - 'required', - 'sx', - 'type', - 'value', - 'color', - 'size', - ], - propValues: { - label: "'Checkbox'", - width: 100, - height: 42, - checked: false, - disabled: false, - }, - template: 'selection_control.txt', - }, - Chip: { - ignoredProps: [ - 'avatar', - 'children', - 'onDelete', - // FIXME: `Union` - 'sx', - 'variant', - 'color', - 'size', - ], - propValues: { - avatarImageFile: "''", - avatarImageUrl: "''", - clickable: true, - deletable: false, - deleteIcon: "''", - icon: "'star'", - iconTheme: 'Filled', - label: "'Chip'", - width: 100, - height: 32, - }, - template: 'chip.txt', - }, - CircularProgress: { - ignoredProps: ['color', 'disableShrink', 'size', 'sx'], - propValues: { - width: 44, - height: 44, - size: 44, - thickness: 4, - progressValue: 75, - variant: "'determinate'", - }, - style: { - width: 'width', - height: 'height', - }, - template: 'circular_progress.txt', - }, - Fab: { - ignoredProps: [ - 'children', - 'disableFocusRipple', - // FIXME: `Union` - 'variant', - 'color', - 'size', - 'sx', - ], - propValues: { - icon: "'add'", - iconTheme: 'Filled', - label: "'extended'", - width: 56, - height: 56, - }, - template: 'fab.txt', - }, - Icon: { - ignoredProps: ['children', 'fontSize', 'sx', 'color'], - propValues: { - icon: "'add'", - theme: 'Filled', - width: 24, - height: 24, - }, - template: 'icon.txt', - }, - IconButton: { - ignoredProps: [ - 'children', - 'color', - 'size', - 'edge', - 'disableRipple', - 'disableFocusRipple', - 'sx', - ], - propValues: { - icon: "'favorite'", - iconTheme: 'Filled', - badgeContent: "''", - badgeColor: "'default'", - width: 48, - height: 48, - }, - template: 'icon_button.txt', - }, - ListItem: { - ignoredProps: [ - 'children', - 'ContainerComponent', - 'ContainerProps', - 'components', - 'componentsProps', - 'sx', - ], - propValues: { - width: 568, - height: 48, - inset: false, - label: "'Primary label'", - secondaryLabel: "''", - primaryAction: "'icon'", - primaryIcon: "'star'", - imageFile: "''", - imageUrl: "''", - secondaryAction: "'none'", - secondaryIcon: "''", - }, - template: 'list_item.txt', - }, - LinearProgress: { - ignoredProps: ['color', 'sx'], - propValues: { - width: 200, - height: 5, - progressValue: 75, - valueBuffer: 75, - variant: "'determinate'", - }, - template: 'self_closing.txt', - }, - Paper: { - ignoredProps: [ - 'sx', - // FIXME: `Union` - 'variant', - ], - propValues: { - width: 100, - height: 100, - elevation: 2, - }, - template: 'paper.txt', - }, - Radio: { - ignoredProps: [ - 'checked', - 'checkedIcon', - 'icon', - 'onChange', - 'required', - 'sx', - 'type', - 'value', - 'color', - 'size', - ], - propValues: { - label: "'Radio'", - width: "'100%'", - height: 42, - disabled: false, - }, - template: 'radio.txt', - }, - RadioGroup: { - ignoredProps: ['children', 'defaultValue', 'onChange', 'value'], - propValues: { - labels: "['Paris', 'New York', 'London']", - label: "'Radio group'", - width: 160, - height: 180, - }, - template: 'radio_group.txt', - }, - Slider: { - ignoredProps: [ - 'components', - 'defaultValue', - 'getAriaLabel', - 'getAriaValueText', - 'isRtl', - 'onChange', - 'onChangeCommitted', - 'scale', - 'ThumbComponent', - 'value', - 'ValueLabelComponent', - 'valueLabelFormat', - 'marks', - 'sx', - // FIXME: `Union` - 'color', - 'size', - ], - propValues: { - width: 160, - height: 24, - }, - template: 'slider.txt', - }, - SnackbarContent: { - ignoredProps: ['action', 'role', 'sx'], - propValues: { - width: 568, - height: 48, - message: "'I love candy. I love cookies. I love cupcakes.'", - label: "'Nom nom nom'", - }, - template: 'snackbar_content.txt', - }, - Switch: { - ignoredProps: [ - 'checkedIcon', - 'edge', - 'icon', - 'onChange', - 'required', - 'sx', - 'type', - 'value', - 'color', - 'size', - ], - propValues: { - label: "'Switch'", - width: 100, - height: 38, - checked: 'false', - disabled: false, - }, - template: 'switch.txt', - }, - Tabs: { - ignoredProps: [ - 'sx', - 'action', - 'children', - 'onChange', - 'orientation', - 'ScrollButtonComponent', - 'value', - ], - propValues: { - appBarColor: "'primary'", - icons: "['phone', 'favorite', 'person_pin']", - labels: "['Tab 1', 'Tab 2', 'Tab 3']", - width: 500, - height: 64, - }, - template: 'tabs.txt', - }, - TextField: { - // FIXME: defaultValue - fix `Union` - ignoredProps: [ - 'autoComplete', - 'defaultValue', - 'margin', - 'onChange', - 'rows', - 'minRows', - 'maxRows', - 'select', - 'type', - 'value', - 'size', - 'color', - 'sx', - ], - propValues: { - helperText: "''", - label: "'TextField'", - width: 280, - height: 56, - fullWidth: true, - }, - template: 'self_closing.txt', - }, - Typography: { - ignoredProps: [ - 'children', - 'display', - 'gutterBottom', - 'internalDeprecatedVariant', - 'paragraph', - 'sx', - // FIXME: `Union` - 'variant', - 'variantMapping', - ], - propValues: { - label: "'Typography'", - width: 100, - height: 38, - }, - template: 'label_as_children.txt', - }, -}; diff --git a/framer/scripts/templates/avatar.txt b/framer/scripts/templates/avatar.txt deleted file mode 100644 index cb254b03d7d1ab..00000000000000 --- a/framer/scripts/templates/avatar.txt +++ /dev/null @@ -1,39 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import { Icon } from './Icon'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { - backgroundColor, - height, - icon, - avatarImageFile: imageFile, - avatarImageUrl: imageUrl, - label, - textColor, - width, - ...other - } = props; - - return imageFile || imageUrl ? ( - - ) : ( - - {icon === '' ? label : } - - ); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/badge.txt b/framer/scripts/templates/badge.txt deleted file mode 100644 index a0333bb4bee7d2..00000000000000 --- a/framer/scripts/templates/badge.txt +++ /dev/null @@ -1,33 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import { Icon } from './Icon'; - -interface Props { -«& tsInterface» -} - -const style: React.CSSProperties = { -«& style» -}; - -export function «componentName»(props: Props): JSX.Element { - const { badgeColor: color, badgeContent, icon, theme, width, height, ...other } = props; - const content = - icon === '' ? ( - badgeContent - ) : ( - - ); - - return ; -}; - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/bottom_navigation.txt b/framer/scripts/templates/bottom_navigation.txt deleted file mode 100644 index ccd702accc36c8..00000000000000 --- a/framer/scripts/templates/bottom_navigation.txt +++ /dev/null @@ -1,47 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import MuiBottomNavigationAction from '@mui/material/BottomNavigationAction'; -import { Icon } from './Icon'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { labels, icons, ...other } = props; - - const [value, setValue] =React.useState(0) - - const handleChange = (event: React.SyntheticEvent, newValue: any) => { - setValue(newValue); - }; - - const items = icons.length > labels.length ? icons : labels; - - return ( - - {items.map( - (item, index) => - (labels[index] !== undefined || icons[index] !== undefined) && ( - } - /> - ), - )} - - ); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); - diff --git a/framer/scripts/templates/button.txt b/framer/scripts/templates/button.txt deleted file mode 100644 index 0b0b4141b537e8..00000000000000 --- a/framer/scripts/templates/button.txt +++ /dev/null @@ -1,49 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import { Icon } from './Icon'; - -interface Props { -«& tsInterface» - variant?: 'contained' | 'outlined' | 'text'; -} - -export function «componentName»(props: Props): JSX.Element { - const { - endIcon, - endIconTheme, - height, - label, - startIcon, - startIconTheme, - variant, - width, - ...other - } = props; - - const StartIcon = startIcon === '' ? undefined : - const EndIcon = endIcon === '' ? undefined : - - return ( -
- - {label} - -
- ); -} - -«componentName».defaultProps = { -«& defaultProps» - variant: 'text' as 'text', -}; - -addPropertyControls(«componentName», { -«& propertyControls» - variant: { - type: ControlType.Enum, - title: 'Variant', - options: ['contained', 'outlined', 'text'], - }, -}); diff --git a/framer/scripts/templates/chip.txt b/framer/scripts/templates/chip.txt deleted file mode 100644 index 9929329b1a3815..00000000000000 --- a/framer/scripts/templates/chip.txt +++ /dev/null @@ -1,48 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import { Icon } from './Icon'; -import { Avatar } from './Avatar'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { - avatarImageFile, - avatarImageUrl, - deletable, - deleteIcon, - height, - icon, - iconTheme, - width, - ...other - } = props; - - return ( - - ) : ( - undefined - ) - } - icon={} - onDelete = {deletable ? () => {} : undefined} - deleteIcon={deleteIcon === '' ? undefined : } - {...other} - /> - ); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/circular_progress.txt b/framer/scripts/templates/circular_progress.txt deleted file mode 100644 index 9823f4cd95bbf2..00000000000000 --- a/framer/scripts/templates/circular_progress.txt +++ /dev/null @@ -1,24 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { width, height, ...other } = props; - - return ( - - ) -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/controlled_self_closing.txt b/framer/scripts/templates/controlled_self_closing.txt deleted file mode 100644 index d05b139aa3f947..00000000000000 --- a/framer/scripts/templates/controlled_self_closing.txt +++ /dev/null @@ -1,49 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { PropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; - -// Define type of property -interface Props { -«& tsInterface» -} - -export class «componentName» extends React.Component { - // Set default properties - static defaultProps = { -«& defaultProps» - }; - - // Items shown in property panel - static propertyControls: PropertyControls = { -«& propertyControls» - }; - - state = { - checked: false, - }; - - handleChange = () => { - this.setState({ - checked: !this.state.checked, - }); - }; - - render() { - const { height, width, ...other } = this.props; - - return ( -
- -
- ); - } -} diff --git a/framer/scripts/templates/fab.txt b/framer/scripts/templates/fab.txt deleted file mode 100644 index b9df4f35801424..00000000000000 --- a/framer/scripts/templates/fab.txt +++ /dev/null @@ -1,32 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import { Icon } from './Icon'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - // @ts-ignore - const { height, icon, label, iconTheme, variant, width, ...other } = props; - return ( - - - {variant === 'extended' ? label : null} - - ); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/icon.txt b/framer/scripts/templates/icon.txt deleted file mode 100644 index fa8c8a0c3e135d..00000000000000 --- a/framer/scripts/templates/icon.txt +++ /dev/null @@ -1,26 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import * as Icons from '@mui/icons-material'; -import { SvgIconProps } from '@mui/material/SvgIcon'; -import { pascalCase } from './utils'; - -interface Props extends SvgIconProps { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element | null { - const { height, icon: iconProp, theme, width, ...other } = props; - const iconName = `${iconProp && pascalCase(iconProp)}${theme === 'Filled' ? '' : theme}`; - const MuiIcon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined; - - return MuiIcon ? : null; -}; - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/icon_button.txt b/framer/scripts/templates/icon_button.txt deleted file mode 100644 index aee3f8f1db804d..00000000000000 --- a/framer/scripts/templates/icon_button.txt +++ /dev/null @@ -1,34 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiIconButton, { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton'; -import MuiBadge from '@mui/material/Badge'; -import { Icon } from './Icon'; - -interface Props extends MuiIconButtonProps { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { badgeColor, badgeContent, height, icon, iconTheme, width, ...other } = props; - const IconBadge = - badgeContent === '' ? ( - - ) : ( - - - - ); - - return ( - {IconBadge} - ); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/label_as_children.txt b/framer/scripts/templates/label_as_children.txt deleted file mode 100644 index c47def3df64ac0..00000000000000 --- a/framer/scripts/templates/label_as_children.txt +++ /dev/null @@ -1,21 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { height, label, width, ...other } = props; - return {label}; -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/list_item.txt b/framer/scripts/templates/list_item.txt deleted file mode 100644 index ec073fdeb623ff..00000000000000 --- a/framer/scripts/templates/list_item.txt +++ /dev/null @@ -1,103 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiListItem from '@mui/material/ListItem'; -import MuiListItemIcon from '@mui/material/ListItemIcon'; -import MuiListItemAvatar from '@mui/material/ListItemAvatar'; -// import MuiListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; -import MuiListItemText from '@mui/material/ListItemText'; -import MuiCheckbox from '@mui/material/Checkbox'; -import MuiSwitch from '@mui/material/Switch'; -import { Avatar } from './Avatar'; -import { Icon } from './Icon'; -import { IconButton } from './IconButton'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { - button, - height, - imageFile, - imageUrl, - inset, - label, - primaryAction, - primaryIcon, - secondaryAction, - secondaryIcon, - secondaryLabel, - width, - ...other - } = props; - - let primary = null; - let secondary = null; - - switch (primaryAction) { - case 'icon': - primary = ( - - - - ); - break; - case 'avatar': - primary = ( - - - - ); - break; - case 'checkbox': - primary = ( - - - - ); - break; - default: - primary = null; - break; - } - - switch (secondaryAction) { - case 'iconButton': - secondary = ; - break; - case 'checkbox': - secondary = ; - break; - case 'switch': - secondary = ; - break; - default: - secondary = null; - break; - } - - return ( - - {primary} - 0 ? secondaryLabel : undefined} - /> - {/* MuiListItemSecondaryAction causes the text to have a bullet. No idea why! */} - {/* */} - {secondary} - {/* */} - - ); -}; - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/paper.txt b/framer/scripts/templates/paper.txt deleted file mode 100644 index f456afc3444857..00000000000000 --- a/framer/scripts/templates/paper.txt +++ /dev/null @@ -1,22 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { width, height, ...other } = props; - - return (); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/radio.txt b/framer/scripts/templates/radio.txt deleted file mode 100644 index e813e2a3d0b723..00000000000000 --- a/framer/scripts/templates/radio.txt +++ /dev/null @@ -1,30 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel'; -import Mui«componentName» from '@mui/material/«componentName»'; - -interface Props extends Omit { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { - label, - // @ts-ignore -- untyped - size, - ...other - } = props; - - return ( - } label={label} {...other} /> - ); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/radio_group.txt b/framer/scripts/templates/radio_group.txt deleted file mode 100644 index c814a5a983e38e..00000000000000 --- a/framer/scripts/templates/radio_group.txt +++ /dev/null @@ -1,33 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import MuiFormLabel from '@mui/material/FormLabel'; -import { Radio } from './Radio'; - -interface Props { -«& tsInterface» -} - -export function RadioGroup(props: Props): JSX.Element { - const { label, labels, ...other } = props; - - return ( -
- {label} - - {labels.map(radioLabel => { - return ; - })} - -
- ); -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/selection_control.txt b/framer/scripts/templates/selection_control.txt deleted file mode 100644 index 09a50e2e5633cb..00000000000000 --- a/framer/scripts/templates/selection_control.txt +++ /dev/null @@ -1,46 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -interface Props { -«& tsInterface» - onChange?: React.ChangeEventHandler; -} - -export function «componentName»(props: Props): JSX.Element { - const { - checked: checkedProp, - label, - onChange, - // @ts-ignore -- untyped - size, - ...other - } = props; - - const [checked, setChecked] = React.useState(false); - - const handleChange = (event: React.ChangeEvent) => { - if (onChange) { - onChange(event); - } - setChecked(event.target.checked); - }; - - React.useEffect(() => { - setChecked(checkedProp); - }, [checkedProp]); - - const control = ; - - return ; -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/self_closing.txt b/framer/scripts/templates/self_closing.txt deleted file mode 100644 index dc9d6cd4328322..00000000000000 --- a/framer/scripts/templates/self_closing.txt +++ /dev/null @@ -1,25 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { width, height, ...other } = props; - const style: React.CSSProperties = { -«& style» - }; - - return ; -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/slider.txt b/framer/scripts/templates/slider.txt deleted file mode 100644 index 23d4984c549f48..00000000000000 --- a/framer/scripts/templates/slider.txt +++ /dev/null @@ -1,21 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { width, height, ...other } = props; - return ; -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); \ No newline at end of file diff --git a/framer/scripts/templates/snackbar_content.txt b/framer/scripts/templates/snackbar_content.txt deleted file mode 100644 index ff4c5b7a517d63..00000000000000 --- a/framer/scripts/templates/snackbar_content.txt +++ /dev/null @@ -1,24 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import MuiButton from '@mui/material/Button'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { - const { height, label, width, ...other } = props; - const action = label !== '' ? {label} : undefined; - - return ; -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/switch.txt b/framer/scripts/templates/switch.txt deleted file mode 100644 index 82626ed16c78c7..00000000000000 --- a/framer/scripts/templates/switch.txt +++ /dev/null @@ -1,45 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import Mui«componentName» from '@mui/material/«componentName»'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props) { - const { - checked: checkedProp, - label, - // @ts-ignore -- untyped - onChange, - // @ts-ignore -- untyped - size, - ...other - } = props; - const [checked, setChecked] = React.useState(false); - - const handleChange = (event: React.ChangeEvent) => { - if (onChange) { - onChange(event); - } - setChecked((event.target as HTMLInputElement).checked); - }; - - React.useEffect(() => { - setChecked(checkedProp); - }, [checkedProp]); - - const control = ; - - return ; -} - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/scripts/templates/tabs.txt b/framer/scripts/templates/tabs.txt deleted file mode 100644 index 4e6e30aa9c19d7..00000000000000 --- a/framer/scripts/templates/tabs.txt +++ /dev/null @@ -1,51 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -import MuiAppBar from '@mui/material/AppBar'; -import Mui«componentName» from '@mui/material/«componentName»'; -import MuiTab from '@mui/material/Tab'; -import { Icon } from './Icon'; - -interface Props { -«& tsInterface» -} - -export function «componentName»(props: Props): JSX.Element { -const { appBarColor, labels, icons, width, height, ...other } = props - - const [value, setValue] = React.useState(0); - - const handleChange = (event: React.SyntheticEvent, newValue: number) => { - setValue(newValue); - }; - - const items = icons.length > labels.length ? icons : labels; - - return ( -
- - - {items.map( - (item, index) => - (labels[index] !== undefined || icons[index] !== undefined) && ( - } - /> - ), - )} - - -
- ); -}; - -«componentName».defaultProps = { -«& defaultProps» -}; - -addPropertyControls(«componentName», { -«& propertyControls» -}); diff --git a/framer/tsconfig.json b/framer/tsconfig.json deleted file mode 100644 index b5b0379736b92c..00000000000000 --- a/framer/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "skipLibCheck": true, - "noUnusedLocals": true - }, - "include": ["Material-UI.framerfx/code", "types"] -} diff --git a/framer/types/icons.d.ts b/framer/types/icons.d.ts deleted file mode 100644 index a233a9782cf406..00000000000000 --- a/framer/types/icons.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare module '@mui/icons-material'; -declare module '@mui/icons-material/*'; diff --git a/package.json b/package.json index 1b8964e04a8591..926e52aef437d4 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "5.4.1", + "version": "5.4.2", "private": true, "scripts": { "proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts", @@ -31,7 +31,6 @@ "docs:migrate:pages": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/restructure.ts", "docs:post-migration": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/postMigration.ts", "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --parallel build:modern", - "framer:build": "yarn workspace framer build", "install:codesandbox": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn install --ignore-engines", "jsonlint": "node ./scripts/jsonlint.js", "lint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", @@ -96,7 +95,7 @@ "@types/jsdom": "^16.2.14", "@types/lodash": "^4.14.178", "@types/mocha": "^9.1.0", - "@types/prettier": "^2.4.3", + "@types/prettier": "^2.4.4", "@types/react": "^17.0.39", "@types/sinon": "^10.0.11", "@types/stylis": "^4.0.2", @@ -122,7 +121,7 @@ "core-js": "^2.6.11", "cpy-cli": "^3.1.1", "cross-env": "^7.0.3", - "danger": "^10.9.0", + "danger": "^11.0.2", "dom-accessibility-api": "^0.5.11", "dtslint": "^4.2.1", "enzyme": "^3.11.0", @@ -143,7 +142,7 @@ "html-webpack-plugin": "^5.5.0", "istanbul-instrumenter-loader": "^3.0.1", "jsdom": "^19.0.0", - "karma": "^6.3.15", + "karma": "^6.3.16", "karma-browserstack-launcher": "~1.4.0", "karma-chrome-launcher": "^3.1.0", "karma-coverage-istanbul-reporter": "^3.0.3", @@ -223,8 +222,6 @@ "packages/*", "docs", "docs/packages/*", - "framer", - "framer/Material-UI.framerfx", "test" ] } diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 00a3430dd32238..629dd48110e9e5 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -1,6 +1,6 @@ { "name": "@mui/base", - "version": "5.0.0-alpha.68", + "version": "5.0.0-alpha.69", "private": false, "author": "MUI Team", "description": "Unstyled React components with which to implement custom design systems.", @@ -53,14 +53,14 @@ "dependencies": { "@babel/runtime": "^7.17.0", "@emotion/is-prop-valid": "^1.1.1", - "@mui/utils": "^5.4.1", + "@mui/utils": "^5.4.2", "@popperjs/core": "^2.4.4", "clsx": "^1.1.1", "prop-types": "^15.7.2", "react-is": "^17.0.2" }, "devDependencies": { - "@mui/types": "^7.1.1" + "@mui/types": "^7.1.2" }, "sideEffects": false, "publishConfig": { diff --git a/packages/mui-base/src/SliderUnstyled/useSlider.ts b/packages/mui-base/src/SliderUnstyled/useSlider.ts index 0c26e5284eef46..66147ed2827f6c 100644 --- a/packages/mui-base/src/SliderUnstyled/useSlider.ts +++ b/packages/mui-base/src/SliderUnstyled/useSlider.ts @@ -285,7 +285,7 @@ export default function useSlider(props: UseSliderProps) { setOpen(index); otherHandlers?.onFocus?.(event); }; - const createHandleHidenInputBlur = + const createHandleHiddenInputBlur = (otherHandlers: Record>) => (event: React.FocusEvent) => { handleBlurVisible(event); if (isFocusVisibleRef.current === false) { @@ -653,7 +653,7 @@ export default function useSlider(props: UseSliderProps) { const ownEventHandlers = { onChange: createHandleHiddenInputChange(otherHandlers || {}), onFocus: createHandleHiddenInputFocus(otherHandlers || {}), - onBlur: createHandleHidenInputBlur(otherHandlers || {}), + onBlur: createHandleHiddenInputBlur(otherHandlers || {}), }; const mergedEventHandlers: Record> = { diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 0a7243e9292602..ff0f4ebff9acd7 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "5.4.1", + "version": "5.4.2", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index b8a52bcb126ff4..a5372e58a041d5 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", @@ -45,7 +45,7 @@ }, "dependencies": { "@babel/runtime": "^7.17.0", - "@mui/utils": "^5.4.1", + "@mui/utils": "^5.4.2", "nprogress": "^0.2.0" }, "publishConfig": { diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json index c7fa6f30bd6386..8b63b5f4ca100c 100644 --- a/packages/mui-envinfo/package.json +++ b/packages/mui-envinfo/package.json @@ -6,7 +6,7 @@ }, "license": "MIT", "description": "Logs infos about the environment relevant to @mui/*", - "version": "2.0.5", + "version": "2.0.6", "bin": "./envinfo.js", "dependencies": { "envinfo": "^7.8.1" diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 1d306de3677023..2ead934dc444b0 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index 0d0a26f5f648bb..030439c6a86fdc 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -1,6 +1,6 @@ { "name": "@mui/joy", - "version": "5.0.0-alpha.14", + "version": "5.0.0-alpha.15", "private": false, "author": "MUI Team", "description": "Joy design system — React components", @@ -57,10 +57,10 @@ }, "dependencies": { "@babel/runtime": "^7.17.0", - "@mui/base": "5.0.0-alpha.68", - "@mui/system": "^5.4.1", - "@mui/types": "^7.1.1", - "@mui/utils": "^5.4.1", + "@mui/base": "5.0.0-alpha.69", + "@mui/system": "^5.4.2", + "@mui/types": "^7.1.2", + "@mui/utils": "^5.4.2", "clsx": "^1.1.1", "csstype": "^3.0.10", "hoist-non-react-statics": "^3.3.2", diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx index 378542e2745a20..d3f80c4f27e19d 100644 --- a/packages/mui-joy/src/Button/Button.tsx +++ b/packages/mui-joy/src/Button/Button.tsx @@ -79,7 +79,7 @@ const ButtonRoot = styled('button', { padding: '0.25rem var(--Button-gutter)', // the padding-top, bottom act as a minimum spacing between content and root element ...(ownerState.variant === 'outlined' && { padding: - 'calc(0.25rem - var(--variant-outlined-borderWidth)) calc(var(--Button-gutter) - var(--variant-outlined-borderWidth))', // account for the border width + 'calc(0.25rem - var(--variant-outlinedBorderWidth)) calc(var(--Button-gutter) - var(--variant-outlinedBorderWidth))', // account for the border width }), minHeight: 'var(--Button-minHeight)', borderRadius: theme.vars.radius.sm, diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx index 6a98622df9b4b2..907b71996e8bbb 100644 --- a/packages/mui-joy/src/IconButton/IconButton.tsx +++ b/packages/mui-joy/src/IconButton/IconButton.tsx @@ -48,7 +48,7 @@ const IconButtonRoot = styled('button', { }), padding: 'var(--IconButton-padding)', ...(ownerState.variant === 'outlined' && { - padding: 'calc(var(--IconButton-padding) - var(--variant-outlined-borderWidth))', // account for the border width + padding: 'calc(var(--IconButton-padding) - var(--variant-outlinedBorderWidth))', // account for the border width }), minWidth: 'var(--IconButton-size)', // use min-width instead of height to make the button resilient to its content minHeight: 'var(--IconButton-size)', // use min-height instead of height to make the button resilient to its content diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx index 8e56ccf16a9d0b..11ced42d0e5dcb 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx @@ -92,6 +92,9 @@ describe('[Joy] CssVarsProvider', () => { containedHoverBg: 'var(--joy-palette-primary-containedHoverBg)', containedActiveBg: 'var(--joy-palette-primary-containedActiveBg)', containedDisabledBg: 'var(--joy-palette-primary-containedDisabledBg)', + overrideTextPrimary: 'var(--joy-palette-primary-overrideTextPrimary)', + overrideTextSecondary: 'var(--joy-palette-primary-overrideTextSecondary)', + overrideTextTertiary: 'var(--joy-palette-primary-overrideTextTertiary)', }), ); expect(screen.getByTestId('palette-neutral').textContent).to.equal( @@ -128,6 +131,9 @@ describe('[Joy] CssVarsProvider', () => { containedHoverBg: 'var(--joy-palette-neutral-containedHoverBg)', containedActiveBg: 'var(--joy-palette-neutral-containedActiveBg)', containedDisabledBg: 'var(--joy-palette-neutral-containedDisabledBg)', + overrideTextPrimary: 'var(--joy-palette-neutral-overrideTextPrimary)', + overrideTextSecondary: 'var(--joy-palette-neutral-overrideTextSecondary)', + overrideTextTertiary: 'var(--joy-palette-neutral-overrideTextTertiary)', }), ); expect(screen.getByTestId('palette-danger').textContent).to.equal( @@ -164,6 +170,9 @@ describe('[Joy] CssVarsProvider', () => { containedHoverBg: 'var(--joy-palette-danger-containedHoverBg)', containedActiveBg: 'var(--joy-palette-danger-containedActiveBg)', containedDisabledBg: 'var(--joy-palette-danger-containedDisabledBg)', + overrideTextPrimary: 'var(--joy-palette-danger-overrideTextPrimary)', + overrideTextSecondary: 'var(--joy-palette-danger-overrideTextSecondary)', + overrideTextTertiary: 'var(--joy-palette-danger-overrideTextTertiary)', }), ); expect(screen.getByTestId('palette-info').textContent).to.equal( @@ -200,6 +209,9 @@ describe('[Joy] CssVarsProvider', () => { containedHoverBg: 'var(--joy-palette-info-containedHoverBg)', containedActiveBg: 'var(--joy-palette-info-containedActiveBg)', containedDisabledBg: 'var(--joy-palette-info-containedDisabledBg)', + overrideTextPrimary: 'var(--joy-palette-info-overrideTextPrimary)', + overrideTextSecondary: 'var(--joy-palette-info-overrideTextSecondary)', + overrideTextTertiary: 'var(--joy-palette-info-overrideTextTertiary)', }), ); expect(screen.getByTestId('palette-success').textContent).to.equal( @@ -236,6 +248,9 @@ describe('[Joy] CssVarsProvider', () => { containedHoverBg: 'var(--joy-palette-success-containedHoverBg)', containedActiveBg: 'var(--joy-palette-success-containedActiveBg)', containedDisabledBg: 'var(--joy-palette-success-containedDisabledBg)', + overrideTextPrimary: 'var(--joy-palette-success-overrideTextPrimary)', + overrideTextSecondary: 'var(--joy-palette-success-overrideTextSecondary)', + overrideTextTertiary: 'var(--joy-palette-success-overrideTextTertiary)', }), ); expect(screen.getByTestId('palette-warning').textContent).to.equal( @@ -272,6 +287,9 @@ describe('[Joy] CssVarsProvider', () => { containedHoverBg: 'var(--joy-palette-warning-containedHoverBg)', containedActiveBg: 'var(--joy-palette-warning-containedActiveBg)', containedDisabledBg: 'var(--joy-palette-warning-containedDisabledBg)', + overrideTextPrimary: 'var(--joy-palette-warning-overrideTextPrimary)', + overrideTextSecondary: 'var(--joy-palette-warning-overrideTextSecondary)', + overrideTextTertiary: 'var(--joy-palette-warning-overrideTextTertiary)', }), ); expect(screen.getByTestId('palette-text').textContent).to.equal( @@ -475,6 +493,9 @@ describe('[Joy] CssVarsProvider', () => { 'containedHover', 'containedActive', 'containedDisabled', + 'textOverrides', + 'outlinedOverrides', + 'lightOverrides', 'containedOverrides', ].join(','), ); diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index 772c0828ed1479..3e3f1e6a546291 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -1,3 +1,4 @@ +import { deepmerge } from '@mui/utils'; import { unstable_createCssVarsProvider as createCssVarsProvider, BreakpointsOptions, @@ -15,23 +16,32 @@ import { Variants } from './types/variants'; import { ColorSystem } from './types/colorSystem'; import { TypographySystem } from './types/typography'; import { Components } from './components'; +import { createVariant, createTextOverrides, createContainedOverrides } from './variantUtils'; -type PartialDeep = { - [K in keyof T]?: PartialDeep; +type Partial2Level = { + [K in keyof T]?: T[K] extends Record + ? { + [J in keyof T[K]]?: T[K][J]; + } + : T[K]; }; -type PartialNested = { +type Partial3Level = { [K in keyof T]?: { - [J in keyof T[K]]?: T[K][J]; + [J in keyof T[K]]?: T[K][J] extends Record + ? { + [P in keyof T[K][J]]?: T[K][J][P]; + } + : T[K][J]; }; }; -// Use PartialNested instead of PartialDeep because nested value type is CSSObject which does not work with PartialDeep. -type ThemeInput = PartialNested< +// Use Partial2Level instead of PartialDeep because nested value type is CSSObject which does not work with PartialDeep. +type ThemeInput = Partial2Level< ThemeScales & { focus: Focus; typography: TypographySystem; - variants: Variants; + variants: Partial2Level; } > & { breakpoints?: BreakpointsOptions; @@ -40,11 +50,11 @@ type ThemeInput = PartialNested< }; type JoyThemeInput = ThemeInput & { - colorSchemes: Record>; + colorSchemes: Record>; }; type ApplicationThemeInput = ThemeInput & { - colorSchemes: Record>; + colorSchemes: Record>; }; const { palette, ...rest } = defaultTheme; @@ -67,6 +77,37 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV dark: 'dark', }, prefix: 'joy', + resolveTheme: (mergedTheme: JoyTheme) => { + mergedTheme.variants = deepmerge( + { + text: createVariant('text', mergedTheme), + textHover: createVariant('textHover', mergedTheme), + textActive: createVariant('textActive', mergedTheme), + textDisabled: createVariant('textDisabled', mergedTheme), + outlined: createVariant('outlined', mergedTheme), + outlinedHover: createVariant('outlinedHover', mergedTheme), + outlinedActive: createVariant('outlinedActive', mergedTheme), + outlinedDisabled: createVariant('outlinedDisabled', mergedTheme), + light: createVariant('light', mergedTheme), + lightHover: createVariant('lightHover', mergedTheme), + lightActive: createVariant('lightActive', mergedTheme), + lightDisabled: createVariant('lightDisabled', mergedTheme), + contained: createVariant('contained', mergedTheme), + containedHover: createVariant('containedHover', mergedTheme), + containedActive: createVariant('containedActive', mergedTheme), + containedDisabled: createVariant('containedDisabled', mergedTheme), + + // variant overrides + textOverrides: createTextOverrides(mergedTheme), + outlinedOverrides: createTextOverrides(mergedTheme), + lightOverrides: createTextOverrides(mergedTheme), + containedOverrides: createContainedOverrides(mergedTheme), + } as typeof mergedTheme.variants, + mergedTheme.variants, + { clone: false }, + ); + return mergedTheme; + }, shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' || keys[0] === 'variants' || diff --git a/packages/mui-joy/src/styles/ThemeProvider.tsx b/packages/mui-joy/src/styles/ThemeProvider.tsx index b0006a007ee56f..82a024cf28416b 100644 --- a/packages/mui-joy/src/styles/ThemeProvider.tsx +++ b/packages/mui-joy/src/styles/ThemeProvider.tsx @@ -3,10 +3,17 @@ import { deepmerge } from '@mui/utils'; import { ThemeProvider as SystemThemeProvider, useTheme as useSystemTheme } from '@mui/system'; import defaultTheme, { JoyTheme } from './defaultTheme'; import { Components } from './components'; -import { ExtendedColorScheme } from './types/colorScheme'; -type PartialDeep = { - [K in keyof T]?: PartialDeep; +type Partial3Level = { + [K in keyof T]?: T[K] extends Record + ? { + [J in keyof T[K]]?: T[K][J] extends Record + ? { + [P in keyof T[K][J]]?: T[K][J][P]; + } + : T[K][J]; + } + : T[K]; }; export const useTheme = () => { @@ -17,7 +24,7 @@ export default function ThemeProvider({ children, theme, }: React.PropsWithChildren<{ - theme?: PartialDeep, 'vars'>> & { + theme?: Partial3Level> & { components?: Components; }; }>) { @@ -27,6 +34,6 @@ export default function ThemeProvider({ ...mergedTheme, vars: mergedTheme, components, - } as JoyTheme & { components: Components }; + } as JoyTheme & { components: Components }; return {children}; } diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index a7fb1fb11ab100..71333121337a11 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -9,19 +9,14 @@ import { } from '@mui/system'; import colors from '../colors'; import { - ColorPaletteProp, ColorSystem, + ColorPaletteProp, Palette, PaletteText, PaletteRange, PaletteBackground, } from './types/colorSystem'; -import { Variants, DefaultVariantKey, DefaultContextualOverrides } from './types/variants'; -import { - createLightModeVariantVariables, - createDarkModeVariantVariables, - createVariant, -} from './variantUtils'; +import { Variants } from './types/variants'; import { DefaultColorScheme, ExtendedColorScheme } from './types/colorScheme'; import { Shadow } from './types/shadow'; import { Radius } from './types/radius'; @@ -36,7 +31,9 @@ import { type CSSProperties = CSS.Properties; -type Split = K extends string | number ? { [k in K]: T[K] } : never; +type Split = K extends string | number + ? { [k in K]: Exclude } + : never; type ConcatDeep = T extends Record ? keyof T extends string | number @@ -59,47 +56,17 @@ export interface Focus { * Internal type for definfing default Joy theme. * ============================================== */ -type BasePaletteRange = - | 50 - | 100 - | 200 - | 300 - | 400 - | 500 - | 600 - | 700 - | 800 - | 900 - | 'textColor' - | 'textHoverBg' - | 'textActiveBg' - | 'textDisabledColor' - | 'outlinedColor' - | 'outlinedBorder' - | 'outlinedHoverBg' - | 'outlinedHoverBorder' - | 'outlinedActiveBg' - | 'outlinedDisabledColor' - | 'outlinedDisabledBorder' - | 'lightColor' - | 'lightBg' - | 'lightHoverBg' - | 'lightActiveBg' - | 'lightDisabledColor' - | 'lightDisabledBg' - | 'containedColor' - | 'containedBg' - | 'containedHoverBg' - | 'containedActiveBg' - | 'containedDisabledBg'; +type BasePaletteRange = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; +type PartialRest = Pick & Partial>; type BaseDesignTokens = { palette: { - primary: Pick; - neutral: Pick; - danger: Pick; - info: Pick; - success: Pick; - warning: Pick; + // variant tokens are optional because the style will be generated after CSS variables has been prepared. + primary: PartialRest; + neutral: PartialRest; + danger: PartialRest; + info: PartialRest; + success: PartialRest; + warning: PartialRest; text: Pick; background: Pick; focusVisible: Palette['focusVisible']; @@ -120,6 +87,70 @@ type BaseDesignTokens = { type BaseColorSystem = Pick; +const createLightModeVariantVariables = (color: ColorPaletteProp) => ({ + textColor: `var(--joy-palette-${color}-600)`, + textHoverBg: `var(--joy-palette-${color}-100)`, + textActiveBg: `var(--joy-palette-${color}-200)`, + textDisabledColor: `var(--joy-palette-${color}-200)`, + + outlinedColor: `var(--joy-palette-${color}-600)`, + outlinedBorder: `var(--joy-palette-${color}-200)`, + outlinedHoverBg: `var(--joy-palette-${color}-100)`, + outlinedHoverBorder: `var(--joy-palette-${color}-300)`, + outlinedActiveBg: `var(--joy-palette-${color}-200)`, + outlinedDisabledColor: `var(--joy-palette-${color}-200)`, + outlinedDisabledBorder: `var(--joy-palette-${color}-100)`, + + lightColor: `var(--joy-palette-${color}-700)`, + lightBg: `var(--joy-palette-${color}-100)`, + lightHoverBg: `var(--joy-palette-${color}-200)`, + lightActiveBg: `var(--joy-palette-${color}-300)`, + lightDisabledColor: `var(--joy-palette-${color}-300)`, + lightDisabledBg: `var(--joy-palette-${color}-50)`, + + containedColor: '#fff', + containedBg: `var(--joy-palette-${color}-600)`, + containedHoverBg: `var(--joy-palette-${color}-700)`, + containedActiveBg: `var(--joy-palette-${color}-800)`, + containedDisabledBg: `var(--joy-palette-${color}-200)`, + + overrideTextPrimary: `var(--joy-palette-${color}-700)`, + overrideTextSecondary: `var(--joy-palette-${color}-500)`, + overrideTextTertiary: `var(--joy-palette-${color}-400)`, +}); + +const createDarkModeVariantVariables = (color: ColorPaletteProp) => ({ + textColor: `var(--joy-palette-${color}-300)`, + textHoverBg: `var(--joy-palette-${color}-800)`, + textActiveBg: `var(--joy-palette-${color}-700)`, + textDisabledColor: `var(--joy-palette-${color}-800)`, + + outlinedColor: `var(--joy-palette-${color}-200)`, + outlinedBorder: `var(--joy-palette-${color}-700)`, + outlinedHoverBg: `var(--joy-palette-${color}-900)`, + outlinedHoverBorder: `var(--joy-palette-${color}-600)`, + outlinedActiveBg: `var(--joy-palette-${color}-900)`, + outlinedDisabledColor: `var(--joy-palette-${color}-800)`, + outlinedDisabledBorder: `var(--joy-palette-${color}-800)`, + + lightColor: `var(--joy-palette-${color}-200)`, + lightBg: `var(--joy-palette-${color}-900)`, + lightHoverBg: `var(--joy-palette-${color}-800)`, + lightActiveBg: `var(--joy-palette-${color}-700)`, + lightDisabledColor: `var(--joy-palette-${color}-800)`, + lightDisabledBg: `var(--joy-palette-${color}-900)`, + + containedColor: `#fff`, + containedBg: `var(--joy-palette-${color}-600)`, + containedHoverBg: `var(--joy-palette-${color}-700)`, + containedActiveBg: `var(--joy-palette-${color}-800)`, + containedDisabledBg: `var(--joy-palette-${color}-300)`, + + overrideTextPrimary: `var(--joy-palette-${color}-200)`, + overrideTextSecondary: `var(--joy-palette-${color}-400)`, + overrideTextTertiary: `var(--joy-palette-${color}-500)`, +}); + export const lightColorSystem: BaseColorSystem = { palette: { primary: { @@ -275,8 +306,7 @@ const internalDefaultTheme: BaseDesignTokens & { TypographySystem, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'body3' >; - variants: Pick & - Record, CSSObject>>; + variants: {}; vars: BaseDesignTokens & BaseColorSystem; spacing: Spacing; breakpoints: Breakpoints; @@ -359,25 +389,7 @@ const internalDefaultTheme: BaseDesignTokens & { color: 'var(--joy-palette-text-tertiary)', }, }, - variants: { - text: createVariant('text'), - textHover: createVariant('textHover'), - textActive: createVariant('textActive'), - textDisabled: createVariant('textDisabled'), - outlined: createVariant('outlined'), - outlinedHover: createVariant('outlinedHover'), - outlinedActive: createVariant('outlinedActive'), - outlinedDisabled: createVariant('outlinedDisabled'), - light: createVariant('light'), - lightHover: createVariant('lightHover'), - lightActive: createVariant('lightActive'), - lightDisabled: createVariant('lightDisabled'), - contained: createVariant('contained'), - containedHover: createVariant('containedHover'), - containedActive: createVariant('containedActive'), - containedDisabled: createVariant('containedDisabled'), - containedOverrides: createVariant('containedOverrides'), - }, + variants: {}, vars: baseDesignTokens, breakpoints: defaultSystemTheme.breakpoints, spacing: defaultSystemTheme.spacing, @@ -401,15 +413,14 @@ export type ThemeVar = NormalizeVars; export const createGetCssVar = (prefix = 'joy') => systemCreateGetCssVar(prefix); -export interface JoyTheme - extends ThemeScales, - ColorSystem { - colorSchemes: Record; +export interface JoyTheme extends ThemeScales, ColorSystem { + colorSchemes: Record; focus: Focus; typography: TypographySystem; variants: Variants; spacing: Spacing; breakpoints: Breakpoints; + prefix: string; vars: Vars; getCssVar: ReturnType; } diff --git a/packages/mui-joy/src/styles/types/colorSystem.ts b/packages/mui-joy/src/styles/types/colorSystem.ts index 3a02785f6fbec1..09709216f4cb53 100644 --- a/packages/mui-joy/src/styles/types/colorSystem.ts +++ b/packages/mui-joy/src/styles/types/colorSystem.ts @@ -7,30 +7,59 @@ import { OverridableStringUnion } from '@mui/types'; */ export interface PaletteVariant { textColor: string; + // hover state + textHoverColor: string; textHoverBg: string; + // active state + textActiveColor: string; textActiveBg: string; + // disabled state textDisabledColor: string; outlinedColor: string; outlinedBorder: string; - outlinedHoverBg: string; + outlinedBg: string; + // hover state + outlinedHoverColor: string; outlinedHoverBorder: string; + outlinedHoverBg: string; + // active state + outlinedActiveColor: string; + outlinedActiveBorder: string; outlinedActiveBg: string; + // disabled state outlinedDisabledColor: string; outlinedDisabledBorder: string; + outlinedDisabledBg: string; lightColor: string; lightBg: string; + // hover state + lightHoverColor: string; lightHoverBg: string; + // active state + lightActiveColor: string; lightActiveBg: string; + // disabled state lightDisabledColor: string; lightDisabledBg: string; containedColor: string; containedBg: string; + // hover state + containedHoverColor: string; containedHoverBg: string; + // active state + containedActiveColor: string; containedActiveBg: string; + // disabled state + containedDisabledColor: string; containedDisabledBg: string; + + // override palette.text + overrideTextPrimary: string; + overrideTextSecondary: string; + overrideTextTertiary: string; } export interface PaletteRange extends PaletteVariant { 50: string; @@ -50,7 +79,6 @@ export interface PaletteText { secondary: string; tertiary: string; } - export interface PaletteBackground { body: string; level1: string; @@ -74,11 +102,22 @@ export type ColorPaletteProp = OverridableStringUnion< ColorPalettePropOverrides >; -export type ColorPalette = { - [k in Exclude]: PaletteRange; -}; +// Split interfaces into multiple chunks so that they can be augmented independently + +export interface PalettePrimary extends PaletteRange {} +export interface PaletteNeutral extends PaletteRange {} +export interface PaletteDanger extends PaletteRange {} +export interface PaletteInfo extends PaletteRange {} +export interface PaletteSuccess extends PaletteRange {} +export interface PaletteWarning extends PaletteRange {} -export interface Palette extends ColorPalette { +export interface Palette { + primary: PalettePrimary; + neutral: PaletteNeutral; + danger: PaletteDanger; + info: PaletteInfo; + success: PaletteSuccess; + warning: PaletteWarning; text: PaletteText; background: PaletteBackground; focusVisible: string; diff --git a/packages/mui-joy/src/styles/types/variants.ts b/packages/mui-joy/src/styles/types/variants.ts index c8c2bd703bab84..79f2d9a9138aec 100644 --- a/packages/mui-joy/src/styles/types/variants.ts +++ b/packages/mui-joy/src/styles/types/variants.ts @@ -10,7 +10,7 @@ export type DefaultVariantProp = 'text' | 'outlined' | 'light' | 'contained'; export type VariantProp = OverridableStringUnion; -export type DefaultContextualOverrides = 'containedOverrides'; +export type DefaultContextualOverrides = `${DefaultVariantProp}Overrides`; export type ContextualOverrideKeys = OverridableStringUnion< DefaultContextualOverrides, @@ -19,12 +19,57 @@ export type ContextualOverrideKeys = OverridableStringUnion< type State = 'Hover' | 'Active' | 'Disabled'; -type VariantKey = VariantProp | 'containedOverrides' | `${VariantProp}${State}`; +export type VariantKey = DefaultVariantProp | `${DefaultVariantProp}${State}`; -export type DefaultVariantKey = DefaultVariantProp | `${DefaultVariantProp}${State}`; +export type DefaultVariantKey = + | Exclude + | `${Exclude}${State}`; -export type Variants = { - [k in VariantKey]: Record; -} & { - [k in ContextualOverrideKeys]: Record, CSSObject>; -}; +type BaseContextOverrides = Record< + DefaultContextualOverrides, + Record, CSSObject> +>; + +// Split interfaces into multiple chunks so that they can be augmented independently + +export interface VariantText extends Record {} +export interface VariantTextHover extends Record {} +export interface VariantTextActive extends Record {} +export interface VariantTextDisabled extends Record {} + +export interface VariantOutlined extends Record {} +export interface VariantOutlinedHover extends Record {} +export interface VariantOutlinedActive extends Record {} +export interface VariantOutlinedDisabled extends Record {} + +export interface VariantLight extends Record {} +export interface VariantLightHover extends Record {} +export interface VariantLightActive extends Record {} +export interface VariantLightDisabled extends Record {} + +export interface VariantContained extends Record {} +export interface VariantContainedHover extends Record {} +export interface VariantContainedActive extends Record {} +export interface VariantContainedDisabled extends Record {} + +export interface Variants extends BaseContextOverrides { + text: VariantText; + textHover: VariantTextHover; + textActive: VariantTextActive; + textDisabled: VariantTextDisabled; + + outlined: VariantOutlined; + outlinedHover: VariantOutlinedHover; + outlinedActive: VariantOutlinedActive; + outlinedDisabled: VariantOutlinedDisabled; + + light: VariantLight; + lightHover: VariantLightHover; + lightActive: VariantLightActive; + lightDisabled: VariantLightDisabled; + + contained: VariantContained; + containedHover: VariantContainedHover; + containedActive: VariantContainedActive; + containedDisabled: VariantContainedDisabled; +} diff --git a/packages/mui-joy/src/styles/variantUtils.test.js b/packages/mui-joy/src/styles/variantUtils.test.js new file mode 100644 index 00000000000000..306049c10086fc --- /dev/null +++ b/packages/mui-joy/src/styles/variantUtils.test.js @@ -0,0 +1,423 @@ +import { expect } from 'chai'; +import sinon from 'sinon'; +import { + isVariantPalette, + createVariantStyle, + createVariant, + createContainedOverrides, +} from './variantUtils'; + +describe('variant utils', () => { + it('isVariantPalette', () => { + expect( + isVariantPalette({ + 100: '', + 200: '', + }), + ).to.equal(false); + expect(isVariantPalette({ text: '' })).to.equal(false); + + expect(isVariantPalette({ textColor: '' })).to.equal(true); + expect(isVariantPalette({ textHoverColor: '' })).to.equal(true); + expect(isVariantPalette({ textActiveColor: '' })).to.equal(true); + expect(isVariantPalette({ textDisabledColor: '' })).to.equal(true); + expect(isVariantPalette({ lightBg: '' })).to.equal(true); + expect(isVariantPalette({ lightHoverBg: '' })).to.equal(true); + expect(isVariantPalette({ lightActiveBg: '' })).to.equal(true); + expect(isVariantPalette({ lightDisabledBg: '' })).to.equal(true); + expect(isVariantPalette({ containedBg: '' })).to.equal(true); + expect(isVariantPalette({ containedHoverBg: '' })).to.equal(true); + expect(isVariantPalette({ containedActiveBg: '' })).to.equal(true); + expect(isVariantPalette({ containedDisabledBg: '' })).to.equal(true); + expect(isVariantPalette({ outlinedBorder: '' })).to.equal(true); + expect(isVariantPalette({ outlinedHoverBorder: '' })).to.equal(true); + expect(isVariantPalette({ outlinedActiveBorder: '' })).to.equal(true); + expect(isVariantPalette({ outlinedDisabledBorder: '' })).to.equal(true); + }); + + describe('initial state', () => { + it('[color] should create a variant', () => { + expect( + createVariantStyle('text', { + textColor: 'var(--any-token)', + }), + ).to.deep.equal({ + color: 'var(--any-token)', + }); + }); + + it('[bg] should create a variant', () => { + expect( + createVariantStyle('light', { + lightBg: 'var(--any-token)', + }), + ).to.deep.equal({ + backgroundColor: 'var(--any-token)', + }); + }); + + it('[border] should create a variant', () => { + expect( + createVariantStyle('outlined', { + outlinedBorder: 'var(--any-token)', + }), + ).to.deep.equal({ + '--variant-outlinedBorderWidth': '1px', + border: 'var(--variant-outlinedBorderWidth) solid', + borderColor: 'var(--any-token)', + }); + }); + }); + + describe('hover state', () => { + it('[color] should create a variant', () => { + expect( + createVariantStyle('textHover', { + textHoverColor: 'var(--any-token)', + }), + ).to.deep.equal({ + cursor: 'pointer', + '&:hover': { + color: 'var(--any-token)', + }, + }); + }); + + it('[bg] should create a variant', () => { + expect( + createVariantStyle('lightHover', { + lightHoverBg: 'var(--any-token)', + }), + ).to.deep.equal({ + cursor: 'pointer', + '&:hover': { + backgroundColor: 'var(--any-token)', + }, + }); + }); + + it('[border] should create a variant', () => { + expect( + createVariantStyle('outlinedHover', { + outlinedHoverBorder: 'var(--any-token)', + }), + ).to.deep.equal({ + cursor: 'pointer', + '&:hover': { + borderColor: 'var(--any-token)', + }, + }); + }); + }); + + describe('active state', () => { + it('[color] should create a variant', () => { + expect( + createVariantStyle('textActive', { + textActiveColor: 'var(--any-token)', + }), + ).to.deep.equal({ + '&:active': { + color: 'var(--any-token)', + }, + }); + }); + + it('[bg] should create a variant', () => { + expect( + createVariantStyle('lightActive', { + lightActiveBg: 'var(--any-token)', + }), + ).to.deep.equal({ + '&:active': { + backgroundColor: 'var(--any-token)', + }, + }); + }); + + it('[border] should create a variant', () => { + expect( + createVariantStyle('outlinedActive', { + outlinedActiveBorder: 'var(--any-token)', + }), + ).to.deep.equal({ + '&:active': { + borderColor: 'var(--any-token)', + }, + }); + }); + }); + + describe('disabled state', () => { + it('[color] should create a variant', () => { + expect( + createVariantStyle('textDisabled', { + textDisabledColor: 'var(--any-token)', + }), + ).to.deep.equal({ + '&.Mui-disabled': { + color: 'var(--any-token)', + pointerEvents: 'none', + cursor: 'default', + }, + }); + }); + + it('[bg] should create a variant', () => { + expect( + createVariantStyle('lightDisabled', { + lightDisabledBg: 'var(--any-token)', + }), + ).to.deep.equal({ + '&.Mui-disabled': { + backgroundColor: 'var(--any-token)', + pointerEvents: 'none', + cursor: 'default', + }, + }); + }); + + it('[border] should create a variant', () => { + expect( + createVariantStyle('outlinedDisabled', { + outlinedDisabledBorder: 'var(--any-token)', + }), + ).to.deep.equal({ + '&.Mui-disabled': { + borderColor: 'var(--any-token)', + pointerEvents: 'none', + cursor: 'default', + }, + }); + }); + }); + + it('should create a variant with all states', () => { + const vars = { + outlinedColor: 'var(--any-token)', + outlinedBorderColor: 'var(--any-token)', + outlinedBg: 'var(--any-token)', + outlinedHoverColor: 'var(--any-token)', + outlinedHoverBorder: 'var(--any-token)', + outlinedHoverBg: 'var(--any-token)', + outlinedActiveColor: 'var(--any-token)', + outlinedActiveBorder: 'var(--any-token)', + outlinedActiveBg: 'var(--any-token)', + outlinedDisabledColor: 'var(--any-token)', + outlinedDisabledBorder: 'var(--any-token)', + outlinedDisabledBg: 'var(--any-token)', + }; + expect({ + outlined: { + primary: createVariantStyle('outlined', vars), + }, + outlinedHover: { + primary: createVariantStyle('outlinedHover', vars), + }, + outlinedActive: { + primary: createVariantStyle('outlinedActive', vars), + }, + outlinedDisabled: { + primary: createVariantStyle('outlinedDisabled', vars), + }, + }).to.deep.equal({ + outlined: { + primary: { + color: 'var(--any-token)', + '--variant-outlinedBorderWidth': '1px', + border: 'var(--variant-outlinedBorderWidth) solid', + borderColor: 'var(--any-token)', + backgroundColor: 'var(--any-token)', + }, + }, + outlinedHover: { + primary: { + cursor: 'pointer', + '&:hover': { + color: 'var(--any-token)', + borderColor: 'var(--any-token)', + backgroundColor: 'var(--any-token)', + }, + }, + }, + outlinedActive: { + primary: { + '&:active': { + color: 'var(--any-token)', + borderColor: 'var(--any-token)', + backgroundColor: 'var(--any-token)', + }, + }, + }, + outlinedDisabled: { + primary: { + '&.Mui-disabled': { + color: 'var(--any-token)', + borderColor: 'var(--any-token)', + backgroundColor: 'var(--any-token)', + pointerEvents: 'none', + cursor: 'default', + }, + }, + }, + }); + }); + + it('should not include invalid value to variant', () => { + expect( + createVariantStyle('text', { + textColor: 'var(--any-token)', + textHoverColor: '', + textActiveColor: null, + textDisabledColor: undefined, + }), + ).to.deep.equal({ + color: 'var(--any-token)', + }); + }); + + it('create correct context color for text variant', () => { + const vars = { + textColor: 'var(--joy-variant-textColor)', + textHoverColor: `var(--joy-variant-textHoverColor, var(--joy-variant-textColor))`, + textHoverBg: 'var(--joy-variant-textHoverBg)', + textActiveColor: 'var(--joy-variant-textActiveColor, var(--joy-variant-textHoverColor))', + textDisabledColor: 'var(--joy-variant-textDisabledColor)', + }; + expect(createVariantStyle('text', vars)).to.deep.equal({ + color: 'var(--joy-variant-textColor)', + }); + expect(createVariantStyle('textHover', vars)).to.deep.equal({ + cursor: 'pointer', + '&:hover': { + color: 'var(--joy-variant-textHoverColor, var(--joy-variant-textColor))', + backgroundColor: 'var(--joy-variant-textHoverBg)', + }, + }); + expect(createVariantStyle('textActive', vars)).to.deep.equal({ + '&:active': { + color: 'var(--joy-variant-textActiveColor, var(--joy-variant-textHoverColor))', + }, + }); + expect(createVariantStyle('textDisabled', vars)).to.deep.equal({ + '&.Mui-disabled': { + pointerEvents: 'none', + cursor: 'default', + color: 'var(--joy-variant-textDisabledColor)', + }, + }); + }); + + describe('createVariant', () => { + it('should only create style with properties from palette variables', () => { + const result = createVariant('outlinedActive', { + palette: { + primary: { + outlinedActiveBorder: 'some-color', + outlinedActiveBg: null, // background-color will not be created + }, + }, + vars: { + palette: { + primary: { + outlinedActiveBorder: 'var(--any-token)', + outlinedActiveBg: 'var(--any-token)', + }, + }, + }, + }); + expect(result.primary).to.deep.equal({ + '&:active': { + borderColor: 'var(--any-token)', + }, + }); + }); + + it('automatically create variant style if the variable is in the correct format', () => { + const theme = { + palette: { + customColor: { + lightColor: 'some-color', + lightBg: 'some-color', + lightHoverColor: 'some-color', + }, + }, + vars: { + palette: { + customColor: { + lightColor: 'var(--any-token)', + lightBg: 'var(--any-token)', + lightHoverColor: 'var(--any-token)', + }, + }, + }, + }; + const lightResult = createVariant('light', theme); + expect(lightResult.customColor).to.deep.equal({ + color: 'var(--any-token)', + backgroundColor: 'var(--any-token)', + }); + + const lightHoverResult = createVariant('lightHover', theme); + expect(lightHoverResult.customColor).to.deep.equal({ + cursor: 'pointer', + '&:hover': { + color: 'var(--any-token)', + }, + }); + }); + + it('auto generate "context"', () => { + expect(createVariant('text').context).to.deep.equal({ + color: 'var(--variant-textColor)', + }); + expect(createVariant('outlined').context).to.deep.equal({ + color: 'var(--variant-outlinedColor)', + '--variant-outlinedBorderWidth': '1px', + border: 'var(--variant-outlinedBorderWidth) solid', + borderColor: 'var(--variant-outlinedBorder)', + }); + expect(createVariant('light').context).to.deep.equal({ + color: 'var(--variant-lightColor)', + backgroundColor: 'var(--variant-lightBg)', + }); + expect(createVariant('contained').context).to.deep.equal({ + backgroundColor: 'var(--variant-containedBg)', + }); + }); + }); + + describe('createContainedOverrides', () => { + it('automatically create contained overrides if the variable is in the correct format', () => { + const result = createContainedOverrides({ + prefix: 'foo', + palette: { + primary: { + textColor: '', + }, + secondary: { + lightBg: '', + }, + alternate: { + containedBg: '', + }, + }, + }); + // partially check the result + sinon.assert.match(result, { + primary: { + '--foo-palette-text-primary': '#fff', + '--variant-textColor': 'var(--foo-palette-primary-100)', + }, + secondary: { + '--foo-palette-text-secondary': 'var(--foo-palette-secondary-100)', + '--variant-lightBg': 'rgba(255 255 255 / 0.12)', + }, + alternate: { + '--foo-palette-text-tertiary': 'var(--foo-palette-alternate-200)', + '--variant-containedBg': 'var(--foo-palette-alternate-700, rgba(0 0 0 / 0.16))', + }, + }); + }); + }); +}); diff --git a/packages/mui-joy/src/styles/variantUtils.ts b/packages/mui-joy/src/styles/variantUtils.ts index 839690f44e17ce..2602658bc38b8d 100644 --- a/packages/mui-joy/src/styles/variantUtils.ts +++ b/packages/mui-joy/src/styles/variantUtils.ts @@ -1,315 +1,242 @@ -import { CSSObject } from '@mui/system'; -import { DefaultVariantKey, DefaultContextualOverrides } from './types/variants'; -import { ColorPaletteProp, DefaultColorPalette } from './types/colorSystem'; - -export const createLightModeVariantVariables = (color: ColorPaletteProp) => ({ - textColor: `var(--joy-palette-${color}-600)`, - textHoverBg: `var(--joy-palette-${color}-100)`, - textActiveBg: `var(--joy-palette-${color}-200)`, - textDisabledColor: `var(--joy-palette-${color}-200)`, - - outlinedColor: `var(--joy-palette-${color}-600)`, - outlinedBorder: `var(--joy-palette-${color}-200)`, - outlinedHoverBg: `var(--joy-palette-${color}-100)`, - outlinedHoverBorder: `var(--joy-palette-${color}-300)`, - outlinedActiveBg: `var(--joy-palette-${color}-200)`, - outlinedDisabledColor: `var(--joy-palette-${color}-200)`, - outlinedDisabledBorder: `var(--joy-palette-${color}-100)`, - - lightColor: `var(--joy-palette-${color}-700)`, - lightBg: `var(--joy-palette-${color}-100)`, - lightHoverBg: `var(--joy-palette-${color}-200)`, - lightActiveBg: `var(--joy-palette-${color}-300)`, - lightDisabledColor: `var(--joy-palette-${color}-300)`, - lightDisabledBg: `var(--joy-palette-${color}-50)`, - - containedColor: '#fff', - containedBg: `var(--joy-palette-${color}-600)`, - containedHoverBg: `var(--joy-palette-${color}-700)`, - containedActiveBg: `var(--joy-palette-${color}-800)`, - containedDisabledBg: `var(--joy-palette-${color}-200)`, -}); - -export const createDarkModeVariantVariables = (color: ColorPaletteProp) => ({ - textColor: `var(--joy-palette-${color}-300)`, - textHoverBg: `var(--joy-palette-${color}-800)`, - textActiveBg: `var(--joy-palette-${color}-700)`, - textDisabledColor: `var(--joy-palette-${color}-800)`, - - outlinedColor: `var(--joy-palette-${color}-200)`, - outlinedBorder: `var(--joy-palette-${color}-700)`, - outlinedHoverBg: `var(--joy-palette-${color}-900)`, - outlinedHoverBorder: `var(--joy-palette-${color}-600)`, - outlinedActiveBg: `var(--joy-palette-${color}-900)`, - outlinedDisabledColor: `var(--joy-palette-${color}-800)`, - outlinedDisabledBorder: `var(--joy-palette-${color}-800)`, - - lightColor: `var(--joy-palette-${color}-200)`, - lightBg: `var(--joy-palette-${color}-900)`, - lightHoverBg: `var(--joy-palette-${color}-800)`, - lightActiveBg: `var(--joy-palette-${color}-700)`, - lightDisabledColor: `var(--joy-palette-${color}-800)`, - lightDisabledBg: `var(--joy-palette-${color}-900)`, - - containedColor: `#fff`, - containedBg: `var(--joy-palette-${color}-600)`, - containedHoverBg: `var(--joy-palette-${color}-700)`, - containedActiveBg: `var(--joy-palette-${color}-800)`, - containedDisabledBg: `var(--joy-palette-${color}-300)`, -}); - -export const getTextDefaultVariant = (color: ColorPaletteProp) => ({ - color: - color === 'context' ? `var(--joy-variant-textColor)` : `var(--joy-palette-${color}-textColor)`, - backgroundColor: - color === 'context' ? `var(--joy-variant-textBg)` : `var(--joy-palette-${color}-textBg)`, -}); - -export const getTextHoverVariant = (color: ColorPaletteProp) => ({ - cursor: 'pointer', - '&:hover': { - color: - color === 'context' - ? `var(--joy-variant-textHoverColor, var(--joy-variant-textColor))` - : `var(--joy-palette-${color}-textHoverColor, var(--joy-palette-${color}-textColor))`, - backgroundColor: - color === 'context' - ? `var(--joy-variant-textHoverBg)` - : `var(--joy-palette-${color}-textHoverBg)`, - }, -}); - -export const getTextActiveVariant = (color: ColorPaletteProp) => ({ - '&:active': { - color: - color === 'context' - ? `var(--joy-variant-textActiveColor, var(--joy-variant-textColor))` - : `var(--joy-palette-${color}-textActiveColor, var(--joy-palette-${color}-textColor))`, - backgroundColor: - color === 'context' - ? `var(--joy-variant-textActiveBg)` - : `var(--joy-palette-${color}-textActiveBg)`, - }, -}); - -export const getTextDisabledVariant = (color: ColorPaletteProp) => ({ - '&.Mui-disabled': { - pointerEvents: 'none', - cursor: 'default', - color: - color === 'context' - ? `var(--joy-variant-textDisabledColor)` - : `var(--joy-palette-${color}-textDisabledColor)`, - }, -}); - -export const getOutlinedDefaultVariant = (color: ColorPaletteProp) => ({ - color: - color === 'context' - ? `var(--joy-variant-outlinedColor)` - : `var(--joy-palette-${color}-outlinedColor)`, - // this variable prefix cannot be configured. It is intended to be the used as a reference to the global outlined border's width - '--variant-outlined-borderWidth': '1px', - borderWidth: 'var(--variant-outlined-borderWidth, 1px)', - borderStyle: 'solid', - borderColor: - color === 'context' - ? `var(--joy-variant-outlinedBorder)` - : `var(--joy-palette-${color}-outlinedBorder)`, - backgroundColor: - color === 'context' - ? `var(--joy-variant-outlinedBg)` - : `var(--joy-palette-${color}-outlinedBg)`, -}); - -export const getOutlinedHoverVariant = (color: ColorPaletteProp) => ({ - cursor: 'pointer', - '&:hover': { - color: - color === 'context' - ? `var(--joy-variant-outlinedHoverColor, var(--joy-variant-outlinedColor))` - : `var(--joy-palette-${color}-outlinedHoverColor, var(--joy-palette-${color}-outlinedColor))`, - backgroundColor: - color === 'context' - ? `var(--joy-variant-outlinedHoverBg)` - : `var(--joy-palette-${color}-outlinedHoverBg)`, - borderColor: - color === 'context' - ? `var(--joy-variant-outlinedHoverBorder)` - : `var(--joy-palette-${color}-outlinedHoverBorder)`, - }, -}); - -export const getOutlinedActiveVariant = (color: ColorPaletteProp) => ({ - '&:active': { - color: - color === 'context' - ? `var(--joy-variant-outlinedActiveColor, var(--joy-variant-outlinedColor))` - : `var(--joy-palette-${color}-outlinedActiveColor, var(--joy-palette-${color}-outlinedColor))`, - backgroundColor: - color === 'context' - ? `var(--joy-variant-outlinedActiveBg)` - : `var(--joy-palette-${color}-outlinedActiveBg)`, - }, -}); - -export const getOutlinedDisabledVariant = (color: ColorPaletteProp) => ({ - '&.Mui-disabled': { - pointerEvents: 'none', - cursor: 'default', - color: - color === 'context' - ? `var(--joy-variant-outlinedDisabledColor)` - : `var(--joy-palette-${color}-outlinedDisabledColor)`, - borderColor: - color === 'context' - ? `var(--joy-variant-outlinedDisabledBorder)` - : `var(--joy-palette-${color}-outlinedDisabledBorder)`, - }, -}); - -export const getFilledDefaultVariant = (color: ColorPaletteProp) => ({ - color: - color === 'context' - ? `var(--joy-variant-lightColor)` - : `var(--joy-palette-${color}-lightColor)`, - backgroundColor: - color === 'context' ? `var(--joy-variant-lightBg)` : `var(--joy-palette-${color}-lightBg)`, -}); - -export const getFilledHoverVariant = (color: ColorPaletteProp) => ({ - cursor: 'pointer', - '&:hover': { - backgroundColor: - color === 'context' - ? `var(--joy-variant-lightHoverBg)` - : `var(--joy-palette-${color}-lightHoverBg)`, - }, -}); - -export const getFilledActiveVariant = (color: ColorPaletteProp) => ({ - '&:active': { - backgroundColor: - color === 'context' - ? `var(--joy-variant-lightActiveBg)` - : `var(--joy-palette-${color}-lightActiveBg)`, - }, -}); - -export const getFilledDisabledVariant = (color: ColorPaletteProp) => ({ - '&.Mui-disabled': { - pointerEvents: 'none', - cursor: 'default', - color: - color === 'context' - ? `var(--joy-variant-lightDisabledColor)` - : `var(--joy-palette-${color}-lightDisabledColor)`, - backgroundColor: - color === 'context' - ? `var(--joy-variant-lightDisabledBg)` - : `var(--joy-palette-${color}-lightDisabledBg)`, - }, -}); - -export const getContainedDefaultVariant = (color: ColorPaletteProp) => ({ - color: - color === 'context' - ? `var(--joy-variant-containedColor)` - : `var(--joy-palette-${color}-containedColor)`, - backgroundColor: - color === 'context' - ? `var(--joy-variant-containedBg)` - : `var(--joy-palette-${color}-containedBg)`, -}); - -export const getContainedHoverVariant = (color: ColorPaletteProp) => ({ - cursor: 'pointer', - '&:hover': { - backgroundColor: - color === 'context' - ? `var(--joy-variant-containedHoverBg)` - : `var(--joy-palette-${color}-containedHoverBg)`, - }, -}); - -export const getContainedActiveVariant = (color: ColorPaletteProp) => ({ - '&:active': { - backgroundColor: - color === 'context' - ? `var(--joy-variant-containedActiveBg)` - : `var(--joy-palette-${color}-containedActiveBg)`, - }, -}); +import { CSSObject, unstable_createGetCssVar as createGetCssVar } from '@mui/system'; +import { DefaultColorPalette, PaletteVariant, PaletteRange } from './types/colorSystem'; +import { VariantKey } from './types/variants'; +import { JoyTheme } from './defaultTheme'; + +export const isVariantPalette = (colorPalette: string | number | Record) => + colorPalette && + typeof colorPalette === 'object' && + Object.keys(colorPalette).some((value) => + value.match?.( + /^(text(Hover|Active|Disabled)?(Color|Bg)|outlined(Hover|Active|Disabled)?(Color|Border|Bg)|light(Hover|Active|Disabled)?(Color|Bg)|contained(Hover|Active|Disabled)?(Color|Bg))$/, + ), + ); + +const assignCss = (target: Record, variantVar: string, value: string) => { + if (variantVar.includes('Color')) { + target.color = value; + } + if (variantVar.includes('Bg')) { + target.backgroundColor = value; + } + if (variantVar.includes('Border')) { + target.borderColor = value; + } +}; -export const getContainedDisabledVariant = (color: ColorPaletteProp) => ({ - '&.Mui-disabled': { - pointerEvents: 'none', - cursor: 'default', - backgroundColor: - color === 'context' - ? `var(--joy-variant-containedDisabledBg)` - : `var(--joy-palette-${color}-containedDisabledBg)`, - }, -}); +const createPrefixVar = (prefix: string | undefined | null) => { + return (cssVar: string) => `--${prefix ? `${prefix}-` : ''}${cssVar.replace(/^--/, '')}`; +}; -export const getContainedOverrides = (color: ColorPaletteProp) => ({ - // typography - '--joy-palette-text-primary': `#fff`, - '--joy-palette-text-secondary': `var(--joy-palette-${color}-100)`, - '--joy-palette-text-tertiary': `var(--joy-palette-${color}-200)`, +/** + * + * @param name variant name + * @example 'text' + * + * @param palette object that contains palette tokens + * @example { primary: { textColor: '', textHoverColor: '', ...tokens }, ...other palete } + * + * @param getCssVar a function that receive variant token and return a CSS variable + * + * result will be the stylesheet based on the palette tokens + * @example { + * color: '--token', + * backgroundColor: '--token' + * } + * @example { + * cursor: 'pointer', + * '&:hover': { + * color: '--token', + * } + * } + * @example { + * '&:active': { + * color: '--token', + * } + * } + * @example { + * pointerEvents: 'none', + * cursor: 'default', + * '&.Mui-disabled': { + * color: '--token', + * } + * } + */ +export const createVariantStyle = ( + name: string, + palette: Partial | undefined, + getCssVar?: (variantVar: keyof PaletteVariant) => string, +) => { + const result: CSSObject = {}; + (Object.entries(palette || {}) as Array<[keyof PaletteVariant, string]>).forEach( + ([variantVar, value]) => { + if (variantVar.match(new RegExp(`${name}(color|bg|border)`, 'i')) && !!value) { + const cssVar = getCssVar ? getCssVar(variantVar) : value; + if (variantVar.includes('Hover')) { + if (!result['&:hover']) { + result.cursor = 'pointer'; + result['&:hover'] = {}; + } + assignCss(result['&:hover'] as any, variantVar, cssVar); + } else if (variantVar.includes('Active')) { + if (!result['&:active']) { + result['&:active'] = {}; + } + assignCss(result['&:active'] as any, variantVar, cssVar); + } else if (variantVar.includes('Disabled')) { + if (!result['&.Mui-disabled']) { + result['&.Mui-disabled'] = { + pointerEvents: 'none', + cursor: 'default', + }; + } + assignCss(result['&.Mui-disabled'] as any, variantVar, cssVar); + } else { + if (variantVar.includes('Border')) { + result['--variant-outlinedBorderWidth'] = '1px'; + result.border = 'var(--variant-outlinedBorderWidth) solid'; + } + // border color should come later + assignCss(result as any, variantVar, cssVar); + } + } + }, + ); + return result; +}; - // other variants - '--joy-variant-textColor': `var(--joy-palette-${color}-100)`, - '--joy-variant-textBg': `transparent`, - '--joy-variant-textHoverBg': `var(--joy-palette-${color}-${color === 'neutral' ? '500' : '400'})`, - '--joy-variant-textActiveBg': `var(--joy-palette-${color}-700)`, - '--joy-variant-outlinedColor': `#fff`, - '--joy-variant-outlinedBorder': `var(--joy-palette-${color}-400)`, - '--joy-variant-outlinedHoverBorder': `var(--joy-palette-${color}-400)`, - '--joy-variant-outlinedBg': `transparent`, - '--joy-variant-outlinedHoverBg': `rgba(255, 255, 255, 0.12)`, - '--joy-variant-outlinedActiveBg': `var(--joy-palette-${color}-700)`, - '--joy-variant-lightColor': `#fff`, - '--joy-variant-lightBg': `rgba(255, 255, 255, 0.2)`, - '--joy-variant-lightHoverBg': `var(--joy-palette-${color}-400)`, - '--joy-variant-lightActiveBg': `var(--joy-palette-${color}-400)`, -}); +export const createTextOverrides = (theme: JoyTheme) => { + const getCssVar = createGetCssVar(theme.prefix); + const prefixVar = createPrefixVar(theme.prefix); + let result = {} as Record; + Object.entries(theme.palette).forEach((entry) => { + const [color, colorPalette] = entry as [ + DefaultColorPalette, + string | number | Record, + ]; + if (isVariantPalette(colorPalette)) { + result = { + ...result, + [color]: { + [prefixVar('--palette-text-primary')]: getCssVar(`palette-${color}-overrideTextPrimary`), + [prefixVar('--palette-text-secondary')]: getCssVar( + `palette-${color}-overrideTextSecondary`, + ), + [prefixVar('--palette-text-tertiary')]: getCssVar( + `palette-${color}-overrideTextTertiary`, + ), + }, + }; + } + }); + return result; +}; -export const createVariant = (variant: DefaultVariantKey | DefaultContextualOverrides) => { - const colors: DefaultColorPalette[] = [ - 'neutral', - 'primary', - 'danger', - 'info', - 'success', - 'warning', - 'context', - ]; +export const createContainedOverrides = (theme: JoyTheme) => { + const getCssVar = createGetCssVar(theme.prefix); + const prefixVar = createPrefixVar(theme.prefix); let result = {} as Record; - const generatorMap: Record = { - text: getTextDefaultVariant, - textHover: getTextHoverVariant, - textActive: getTextActiveVariant, - textDisabled: getTextDisabledVariant, - outlined: getOutlinedDefaultVariant, - outlinedHover: getOutlinedHoverVariant, - outlinedActive: getOutlinedActiveVariant, - outlinedDisabled: getOutlinedDisabledVariant, - light: getFilledDefaultVariant, - lightHover: getFilledHoverVariant, - lightActive: getFilledActiveVariant, - lightDisabled: getFilledDisabledVariant, - contained: getContainedDefaultVariant, - containedHover: getContainedHoverVariant, - containedActive: getContainedActiveVariant, - containedDisabled: getContainedDisabledVariant, - containedOverrides: getContainedOverrides, - }; - colors.forEach((color) => { - // no need to add context node inside `containedOverrides` - if (color !== 'context' || (color === 'context' && variant !== 'containedOverrides')) { - result = { ...result, [color]: generatorMap[variant](color) }; + Object.entries(theme.palette).forEach((entry) => { + const [color, colorPalette] = entry as [ + DefaultColorPalette, + string | number | Record, + ]; + if (isVariantPalette(colorPalette)) { + result = { + ...result, + [color]: { + [prefixVar('--palette-text-primary')]: '#fff', + [prefixVar('--palette-text-secondary')]: getCssVar(`palette-${color}-100`), + [prefixVar('--palette-text-tertiary')]: getCssVar(`palette-${color}-200`), + '--variant-focusVisible': `rgba(255 255 255 / 0.32)`, + + '--variant-textColor': getCssVar(`palette-${color}-100`), + '--variant-textHoverColor': `#fff`, + '--variant-textHoverBg': `rgba(255 255 255 / 0.12)`, + '--variant-textActiveBg': `rgba(255 255 255 / 0.2)`, + '--variant-textDisabledColor': getCssVar(`palette-${color}-300`), + + '--variant-outlinedColor': getCssVar(`palette-${color}-100`), + '--variant-outlinedBorder': getCssVar(`palette-${color}-300`), + '--variant-outlinedHoverColor': `#fff`, + '--variant-outlinedHoverBorder': getCssVar(`palette-${color}-200`), + '--variant-outlinedHoverBg': `rgba(255 255 255 / 0.12)`, + '--variant-outlinedActiveBg': `rgba(255 255 255 / 0.2)`, + '--variant-outlinedDisabledColor': getCssVar(`palette-${color}-300`), + '--variant-outlinedDisabledBorder': `rgba(255 255 255 / 0.2)`, + + '--variant-lightColor': '#fff', + '--variant-lightBg': `rgba(255 255 255 / 0.12)`, + '--variant-lightHoverBg': `rgba(255 255 255 / 0.2)`, + '--variant-lightActiveBg': `rgba(255 255 255 / 0.08)`, + '--variant-lightDisabledColor': getCssVar(`palette-${color}-300`), + '--variant-lightDisabledBg': `rgba(255 255 255 / 0.08)`, + + '--variant-containedBg': getCssVar(`palette-${color}-700`, 'rgba(0 0 0 / 0.16)'), + '--variant-containedHoverBg': 'rgba(0 0 0 / 0.32)', + '--variant-containedActiveBg': 'rgba(0 0 0 / 0.48)', + '--variant-containedDisabledColor': getCssVar(`palette-${color}-300`), + '--variant-containedDisabledBg': `rgba(255 255 255 / 0.08)`, + }, + }; } }); return result; }; + +export const createVariant = (variant: VariantKey, theme?: JoyTheme) => { + let result = {} as Record; + + if (theme) { + Object.entries(theme.palette).forEach((entry) => { + const [color, colorPalette] = entry as [ + Exclude, + string | number | Record, + ]; + if (isVariantPalette(colorPalette)) { + result = { + ...result, + [color]: createVariantStyle( + variant, + // cannot use theme.vars because it is created from all color schemes. + // @example developer provides `primary.outlinedActiveBorder` to only dark mode. + // theme.vars.palette.primary.outlinedActiveBorder always exists regardless of the current color scheme. + theme.palette[color], + (variantVar) => theme.vars.palette[color][variantVar], + ), + }; + } + }); + } + + result.context = createVariantStyle(variant, { + textColor: 'var(--variant-textColor)', + textHoverColor: `var(--variant-textHoverColor)`, + textHoverBg: 'var(--variant-textHoverBg)', + textActiveBg: 'var(--variant-textActiveBg)', + textDisabledColor: 'var(--variant-textDisabledColor)', + + outlinedColor: 'var(--variant-outlinedColor)', + outlinedBorder: 'var(--variant-outlinedBorder)', + outlinedHoverColor: `var(--variant-outlinedHoverColor)`, + outlinedHoverBorder: `var(--variant-outlinedHoverBorder)`, + outlinedHoverBg: `var(--variant-outlinedHoverBg)`, + outlinedActiveBg: `var(--variant-outlinedActiveBg)`, + outlinedDisabledColor: `var(--variant-outlinedDisabledColor)`, + outlinedDisabledBorder: `var(--variant-outlinedDisabledBorder)`, + + lightColor: 'var(--variant-lightColor)', + lightBg: 'var(--variant-lightBg)', + lightHoverBg: 'var(--variant-lightHoverBg)', + lightActiveBg: 'var(--variant-lightActiveBg)', + lightDisabledColor: 'var(--variant-lightDisabledColor)', + lightDisabledBg: 'var(--variant-lightDisabledBg)', + + containedBg: 'var(--variant-containedBg)', + containedHoverBg: 'var(--variant-containedHoverBg)', + containedActiveBg: 'var(--variant-containedActiveBg)', + containedDisabledColor: 'var(--variant-containedDisabledColor)', + containedDisabledBg: 'var(--variant-containedDisabledBg)', + }); + return result; +}; diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 50d2a61e1a523c..ec99043950e711 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "5.0.0-alpha.68", + "version": "5.0.0-alpha.69", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", @@ -69,13 +69,13 @@ }, "dependencies": { "@babel/runtime": "^7.17.0", - "@date-io/date-fns": "^2.11.0", - "@date-io/dayjs": "^2.11.0", - "@date-io/luxon": "^2.11.1", - "@date-io/moment": "^2.11.0", - "@mui/base": "5.0.0-alpha.68", - "@mui/system": "^5.4.1", - "@mui/utils": "^5.4.1", + "@date-io/date-fns": "^2.13.1", + "@date-io/dayjs": "^2.13.1", + "@date-io/luxon": "^2.13.1", + "@date-io/moment": "^2.13.1", + "@mui/base": "5.0.0-alpha.69", + "@mui/system": "^5.4.2", + "@mui/utils": "^5.4.2", "clsx": "^1.1.1", "prop-types": "^15.7.2", "react-is": "^17.0.2", @@ -83,7 +83,7 @@ "rifm": "^0.12.1" }, "devDependencies": { - "@mui/types": "^7.1.1", + "@mui/types": "^7.1.2", "@types/luxon": "^2.0.9", "date-fns": "^2.28.0", "dayjs": "^1.10.7", diff --git a/packages/mui-lab/src/DatePicker/DatePicker.tsx b/packages/mui-lab/src/DatePicker/DatePicker.tsx index c986d201e7dd56..8b7cb9c0fdcc9f 100644 --- a/packages/mui-lab/src/DatePicker/DatePicker.tsx +++ b/packages/mui-lab/src/DatePicker/DatePicker.tsx @@ -57,6 +57,8 @@ const DatePicker = React.forwardRef(function DatePicker( ref={ref} PopperProps={PopperProps} TransitionComponent={TransitionComponent} + clearText={clearText} + clearable={clearable} {...other} /> ) : ( diff --git a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx index 71a9094e320e93..3a121cd469f3ca 100644 --- a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx +++ b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx @@ -268,6 +268,42 @@ describe('', () => { expect(screen.getByMuiTest('picker-toolbar')).toBeVisible(); }); + it('prop `clearable` - renders clear button in Desktop mode', () => { + function DesktopDatePickerClearable() { + const [value, setValue] = React.useState( + adapterToUse.date('2018-01-01T00:00:00.000'), + ); + const [open, setOpen] = React.useState(true); + const handleChange = (newValue: Date | null) => { + setValue(newValue); + }; + return ( + } + TransitionComponent={FakeTransitionComponent} + open={open} + onClose={() => { + setOpen(false); + }} + onOpen={() => { + setOpen(true); + }} + /> + ); + } + render(); + + expect(screen.getByRole('textbox')).to.have.value('01/01/2018'); + + fireEvent.click(screen.getByText('Clear')); + + expect(screen.getByRole('textbox')).to.have.value(''); + expect(screen.queryByRole('dialog')).to.equal(null); + }); + it('switches between views uncontrolled', () => { const handleViewChange = spy(); render( diff --git a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx index 6860970c8fe7b0..02db79c3a6fc9d 100644 --- a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -54,6 +54,8 @@ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker( ToolbarComponent = DatePickerToolbar, TransitionComponent, value, + clearText, + clearable, ...other } = props; const AllDateInputProps = { ...inputProps, ...other, ref, validationError }; @@ -66,6 +68,8 @@ const DesktopDatePicker = React.forwardRef(function DesktopDatePicker( PopperProps={PopperProps} PaperProps={PaperProps} TransitionComponent={TransitionComponent} + clearText={clearText} + clearable={clearable} > void; onBlur?: () => void; + onClear?: () => void; } const PickersPopperRoot = styled(Popper)<{ ownerState: PickerPopperProps }>(({ theme }) => ({ @@ -50,6 +63,19 @@ const PickersPopperPaper = styled(Paper)<{ }), })); +const PickersPopperAction = styled(DialogActions)<{ + ownerState: PickerPopperProps; +}>(({ ownerState }) => ({ + ...(ownerState.clearable + ? { + justifyContent: 'flex-start', + '& > *:first-of-type': { + marginRight: 'auto', + }, + } + : { padding: 0 }), +})); + function clickedRootScrollbar(event: MouseEvent, doc: Document) { return ( doc.documentElement.clientWidth < event.clientX || @@ -198,6 +224,9 @@ const PickersPopper = (props: PickerPopperProps) => { children, containerRef = null, onClose, + onClear, + clearable = false, + clearText = 'Clear', open, PopperProps, role, @@ -287,6 +316,13 @@ const PickersPopper = (props: PickerPopperProps) => { {...otherPaperProps} > {children} + + {clearable && ( + + )} + diff --git a/packages/mui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx b/packages/mui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx index bc225f7ae39fd5..103f48b09dd7bf 100644 --- a/packages/mui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx +++ b/packages/mui-lab/src/internal/pickers/wrappers/DesktopWrapper.tsx @@ -28,6 +28,9 @@ function DesktopWrapper(props: InternalDesktopWrapperProps) { PopperProps, PaperProps, TransitionComponent, + onClear, + clearText, + clearable, } = props; const ownInputRef = React.useRef(null); const inputRef = useForkRef(DateInputProps.inputRef, ownInputRef); @@ -43,6 +46,9 @@ function DesktopWrapper(props: InternalDesktopWrapperProps) { PopperProps={PopperProps} PaperProps={PaperProps} onClose={onDismiss} + onClear={onClear} + clearText={clearText} + clearable={clearable} > {children} diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index 17db90e277bb0e..7e4b30a80ca8ce 100644 --- a/packages/mui-material-next/package.json +++ b/packages/mui-material-next/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-next", - "version": "6.0.0-alpha.22", + "version": "6.0.0-alpha.23", "private": false, "author": "MUI Team", "description": "Material Design components built using @mui/base.", @@ -59,10 +59,10 @@ }, "dependencies": { "@babel/runtime": "^7.17.0", - "@mui/base": "5.0.0-alpha.68", - "@mui/system": "^5.4.1", - "@mui/types": "^7.1.1", - "@mui/utils": "^5.4.1", + "@mui/base": "5.0.0-alpha.69", + "@mui/system": "^5.4.2", + "@mui/types": "^7.1.2", + "@mui/utils": "^5.4.2", "@popperjs/core": "^2.4.4", "@types/react-transition-group": "^4.4.4", "clsx": "^1.1.1", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 9b6f742cdf1789..16bae06cf802ba 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.", @@ -61,10 +61,10 @@ }, "dependencies": { "@babel/runtime": "^7.17.0", - "@mui/base": "5.0.0-alpha.68", - "@mui/system": "^5.4.1", - "@mui/types": "^7.1.1", - "@mui/utils": "^5.4.1", + "@mui/base": "5.0.0-alpha.69", + "@mui/system": "^5.4.2", + "@mui/types": "^7.1.2", + "@mui/utils": "^5.4.2", "@types/react-transition-group": "^4.4.4", "clsx": "^1.1.1", "csstype": "^3.0.10", diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js index 0b7255a88e76f4..5c66b4f6fe9072 100644 --- a/packages/mui-material/src/Select/Select.js +++ b/packages/mui-material/src/Select/Select.js @@ -12,12 +12,26 @@ import FilledInput from '../FilledInput'; import OutlinedInput from '../OutlinedInput'; import useThemeProps from '../styles/useThemeProps'; import useForkRef from '../utils/useForkRef'; +import styled, { rootShouldForwardProp } from '../styles/styled'; const useUtilityClasses = (ownerState) => { const { classes } = ownerState; return classes; }; +const styledRootConfig = { + name: 'MuiSelect', + overridesResolver: (props, styles) => styles.root, + shouldForwardProp: (prop) => rootShouldForwardProp(prop) && prop !== 'variant', + slot: 'Root', +}; + +const StyledInput = styled(Input, styledRootConfig)(''); + +const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)(''); + +const StyledFilledInput = styled(FilledInput, styledRootConfig)(''); + const Select = React.forwardRef(function Select(inProps, ref) { const props = useThemeProps({ name: 'MuiSelect', props: inProps }); const { @@ -41,7 +55,7 @@ const Select = React.forwardRef(function Select(inProps, ref) { open, renderValue, SelectDisplayProps, - variant: variantProps = 'outlined', + variant: variantProp = 'outlined', ...other } = props; @@ -54,17 +68,17 @@ const Select = React.forwardRef(function Select(inProps, ref) { states: ['variant'], }); - const variant = fcs.variant || variantProps; + const variant = fcs.variant || variantProp; const InputComponent = input || { - standard: , - outlined: , - filled: , + standard: , + outlined: , + filled: , }[variant]; - const ownerState = { ...props, classes: classesProp }; + const ownerState = { ...props, variant, classes: classesProp }; const classes = useUtilityClasses(ownerState); const inputComponentRef = useForkRef(ref, InputComponent.ref); @@ -100,6 +114,7 @@ const Select = React.forwardRef(function Select(inProps, ref) { ...(multiple && native && variant === 'outlined' ? { notched: true } : {}), ref: inputComponentRef, className: clsx(InputComponent.props.className, className), + variant, ...other, }); }); diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js index 7e9f8f2ab6f10a..273f9f51caf3ad 100644 --- a/packages/mui-material/src/Select/Select.test.js +++ b/packages/mui-material/src/Select/Select.test.js @@ -1225,6 +1225,10 @@ describe('', () => { components: { MuiSelect: { styleOverrides: { + root: rootStyle, select: selectStyle, icon: iconStyle, nativeInput: nativeInputStyle, @@ -1255,15 +1260,16 @@ describe(' + , ); + expect(getByTestId('select')).toHaveComputedStyle(rootStyle); expect(container.getElementsByClassName(classes.icon)[0]).to.toHaveComputedStyle(iconStyle); expect(container.getElementsByClassName(classes.nativeInput)[0]).to.toHaveComputedStyle( nativeInputStyle, @@ -1271,6 +1277,40 @@ describe(' + + + + , + ); + + expect(getByTestId('input')).to.toHaveComputedStyle({ + fontWeight: '200', + }); + }); + }); + describe('prop: input', () => { it('merges `ref` of `Select` and `input`', () => { const Input = React.forwardRef(function Input(props, ref) { diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts index 75ba328a49b3be..594d81b07fd2c1 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts +++ b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts @@ -1,5 +1,6 @@ import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; +import * as React from 'react'; import { Theme } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; @@ -45,6 +46,20 @@ export type ToggleButtonTypeMap< * @default false */ fullWidth?: boolean; + /** + * Callback fired when the state changes. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. + */ + onChange?: (event: React.MouseEvent, value: any) => void; + /** + * Callback fired when the button is clicked. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. + */ + onClick?: (event: React.MouseEvent, value: any) => void; /** * If `true`, the button is rendered in an active state. */ diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index 647123d4c43804..eedbd71ef00a14 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -194,11 +194,17 @@ ToggleButton.propTypes /* remove-proptypes */ = { */ fullWidth: PropTypes.bool, /** - * @ignore + * Callback fired when the state changes. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. */ onChange: PropTypes.func, /** - * @ignore + * Callback fired when the button is clicked. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. */ onClick: PropTypes.func, /** diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx b/packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx new file mode 100644 index 00000000000000..49b3774937397c --- /dev/null +++ b/packages/mui-material/src/ToggleButton/ToggleButton.spec.tsx @@ -0,0 +1,4 @@ +import * as React from 'react'; +import ToggleButton from '@mui/material/ToggleButton'; + + {}} onClick={(event, value) => {}} />; diff --git a/packages/mui-material/src/index.test.js b/packages/mui-material/src/index.test.js index 5205d82131619f..a2b65507c17e23 100644 --- a/packages/mui-material/src/index.test.js +++ b/packages/mui-material/src/index.test.js @@ -17,4 +17,21 @@ describe('material-ui', () => { expect(Boolean(MaterialUI[exportKey])).to.equal(true), ); }); + + it('should reexport certain members from @mui/base', () => { + const expectedReexports = [ + 'ClickAwayListener', + 'generateUtilityClass', + 'generateUtilityClasses', + 'NoSsr', + 'Portal', + 'TextareaAutosize', + 'unstable_ClassNameGenerator', + 'unstable_composeClasses', + ]; + + const exportedNames = Object.keys(MaterialUI); + + expectedReexports.forEach((reexport) => expect(exportedNames).to.contain(reexport)); + }); }); diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index e6cb332328a229..5c9160e63045da 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -1,6 +1,6 @@ { "name": "@mui/private-theming", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "MUI Theming - The React theme context to be shared between `@mui/styles` and `@mui/material`.", @@ -48,7 +48,7 @@ }, "dependencies": { "@babel/runtime": "^7.17.0", - "@mui/utils": "^5.4.1", + "@mui/utils": "^5.4.2", "prop-types": "^15.7.2" }, "sideEffects": false, diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index 15934421599063..5c1fd346a4ddb5 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine-sc", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 6367fe4612f792..2677f381de2269 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 0503370ca780a5..ce72c1c6ede39c 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "MUI Styles - The styling solution of MUI.", @@ -49,9 +49,9 @@ "dependencies": { "@babel/runtime": "^7.17.0", "@emotion/hash": "^0.8.0", - "@mui/private-theming": "^5.4.1", - "@mui/types": "^7.1.1", - "@mui/utils": "^5.4.1", + "@mui/private-theming": "^5.4.2", + "@mui/types": "^7.1.2", + "@mui/utils": "^5.4.2", "clsx": "^1.1.1", "csstype": "^3.0.10", "hoist-non-react-statics": "^3.3.2", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index e22abb95c8c607..8669ad63bf8cb3 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "CSS utilities for rapidly laying out custom designs.", @@ -57,10 +57,10 @@ }, "dependencies": { "@babel/runtime": "^7.17.0", - "@mui/private-theming": "^5.4.1", - "@mui/styled-engine": "^5.4.1", - "@mui/types": "^7.1.1", - "@mui/utils": "^5.4.1", + "@mui/private-theming": "^5.4.2", + "@mui/styled-engine": "^5.4.2", + "@mui/types": "^7.1.2", + "@mui/utils": "^5.4.2", "clsx": "^1.1.1", "csstype": "^3.0.10", "prop-types": "^15.7.2" diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts index 6eacda87214d39..9a8b9dc8aac4b4 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts @@ -97,6 +97,13 @@ export default function createCssVarsProvider< * value = 'var(--test)' */ shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean; + /** + * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider. + * + * The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate + * variants from those tokens. + */ + resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system. }): { CssVarsProvider: ( props: React.PropsWithChildren< diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 5525fec764e0d5..5f49d6df37acad 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -26,6 +26,7 @@ export default function createCssVarsProvider(options) { enableColorScheme = true, prefix: designSystemPrefix = '', shouldSkipGeneratingVar, + resolveTheme, } = options; const systemSpacing = createSpacing(baseTheme.spacing); @@ -117,6 +118,7 @@ export default function createCssVarsProvider(options) { ...colorSchemes[resolvedColorScheme], components, colorSchemes, + prefix, vars: rootVars, spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing, breakpoints: themeProp.breakpoints @@ -215,7 +217,9 @@ export default function createCssVarsProvider(options) { > - {children} + + {children} + ); } diff --git a/packages/mui-system/src/cssVars/createGetCssVar.test.ts b/packages/mui-system/src/cssVars/createGetCssVar.test.ts index 451221a165d201..a22199d6ffe3ee 100644 --- a/packages/mui-system/src/cssVars/createGetCssVar.test.ts +++ b/packages/mui-system/src/cssVars/createGetCssVar.test.ts @@ -31,4 +31,12 @@ describe('createGetCssVar', () => { const getThemeVar = createGetCssVar('custom'); expect(getThemeVar('shadow-xs')).to.equal('var(--custom-shadow-xs)'); }); + + it('does not add var() to CSS value', () => { + const getCssVar = createGetCssVar(); + expect(getCssVar('palette-primary-500', 'rgba(255 255 255 / 0.1)')).to.equal( + 'var(--palette-primary-500, rgba(255 255 255 / 0.1))', + ); + expect(getCssVar('fontSize-sm', '1rem')).to.equal('var(--fontSize-sm, 1rem)'); + }); }); diff --git a/packages/mui-system/src/cssVars/createGetCssVar.ts b/packages/mui-system/src/cssVars/createGetCssVar.ts index 1d27fd61082f07..94f6a79d8d702a 100644 --- a/packages/mui-system/src/cssVars/createGetCssVar.ts +++ b/packages/mui-system/src/cssVars/createGetCssVar.ts @@ -7,7 +7,14 @@ export default function createGetCssVar(prefix: strin if (!vars.length) { return ''; } - return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`; + const value = vars[0]; + if ( + typeof value === 'string' && + !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/) + ) { + return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`; + } + return `, ${value}`; } // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error. diff --git a/packages/mui-system/src/cssVars/cssVarsParser.test.ts b/packages/mui-system/src/cssVars/cssVarsParser.test.ts index 0412c0a4ede056..ec21ba88ffe818 100644 --- a/packages/mui-system/src/cssVars/cssVarsParser.test.ts +++ b/packages/mui-system/src/cssVars/cssVarsParser.test.ts @@ -230,6 +230,29 @@ describe('cssVarsParser', () => { }); }); + it('replace default prefix if provided', () => { + const theme = { + fontFamily: { + body: '"Public Sans", var( --joy-fontFamily-fallback)', + display: '"Public Sans", var( --joy-fontFamily-fallback)', + }, + }; + const { css } = cssVarsParser(theme, { + prefix: 'foo-bar', + basePrefix: 'joy', + }); + expect(theme).to.deep.equal({ + fontFamily: { + body: '"Public Sans", var(--foo-bar-fontFamily-fallback)', + display: '"Public Sans", var(--foo-bar-fontFamily-fallback)', + }, + }); + expect(css).to.deep.equal({ + '--foo-bar-fontFamily-body': '"Public Sans", var(--foo-bar-fontFamily-fallback)', + '--foo-bar-fontFamily-display': '"Public Sans", var(--foo-bar-fontFamily-fallback)', + }); + }); + it('replace value starts with `var` if basePrefix, prefix are different', () => { const theme = { bg: 'var(--joy-palette-neutral-50)', diff --git a/packages/mui-system/src/cssVars/cssVarsParser.ts b/packages/mui-system/src/cssVars/cssVarsParser.ts index 5ebac759a91f6d..abc94f7cd0c983 100644 --- a/packages/mui-system/src/cssVars/cssVarsParser.ts +++ b/packages/mui-system/src/cssVars/cssVarsParser.ts @@ -125,14 +125,14 @@ export default function cssVarsParser( (keys, val, scope) => { if (typeof val === 'string' || typeof val === 'number') { let value = val; - if (typeof value === 'string' && value.startsWith('var')) { + if (typeof value === 'string' && value.match(/var\(\s*--/)) { // replace the value of the `scope` object with the prefix or remove basePrefix from the value if (!basePrefix && prefix) { - value = value.replace(/var\(--/g, `var(--${prefix}-`); + value = value.replace(/var\(\s*--/g, `var(--${prefix}-`); } else { value = prefix - ? value.replace(new RegExp(basePrefix, 'g'), prefix) - : value.replace(new RegExp(`${basePrefix}-`, 'g'), ''); + ? value.replace(new RegExp(`var\\(\\s*--${basePrefix}`, 'g'), `var(--${prefix}`) // removing spaces + : value.replace(new RegExp(`var\\(\\s*--${basePrefix}-`, 'g'), 'var(--'); } // scope is the deepest object in the tree, keys is the theme path keys diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js index 44dd1e035204a2..d1ddc7f6754e9c 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.js @@ -55,6 +55,9 @@ export function unstable_createStyleFunctionSx(styleFunctionMapping = defaultSty // value return sxInput; } + if (!sxObject) { + return null; + } const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints); const breakpointsKeys = Object.keys(emptyBreakpoints); diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js index 99c969dcc4578f..a55ef9ec3e7c8c 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js @@ -389,5 +389,14 @@ describe('styleFunctionSx', () => { }, ]); }); + + it('does not crash if the result is undefined', () => { + expect(() => + styleFunctionSx({ + theme, + sx: [(t) => t.typography.unknown], + }), + ).not.to.throw(); + }); }); }); diff --git a/packages/mui-types/package.json b/packages/mui-types/package.json index 66f18c544f78f2..e1d0a188ac035b 100644 --- a/packages/mui-types/package.json +++ b/packages/mui-types/package.json @@ -1,6 +1,6 @@ { "name": "@mui/types", - "version": "7.1.1", + "version": "7.1.2", "private": false, "author": "MUI Team", "description": "Utility types for MUI.", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 67a40ad2a16b6c..36a3f938da7a07 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "5.4.1", + "version": "5.4.2", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json index 0fcc1251184f49..3016a55a4df8d3 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages/typescript-to-proptypes/package.json @@ -27,7 +27,7 @@ "@types/doctrine": "^0.0.5", "@types/lodash": "^4.14.178", "@types/node": "^16.11.22", - "@types/prettier": "^2.4.3", + "@types/prettier": "^2.4.4", "@types/react": "^17.0.39", "@types/uuid": "^8.3.4", "fast-glob": "^3.2.11", diff --git a/yarn.lock b/yarn.lock index 755bf73037ab38..4dfb89bf59a075 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1297,45 +1297,45 @@ framesync "5.3.0" lodash.mergewith "4.6.2" -"@date-io/core@^2.11.0": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.11.0.tgz#28580cda1c8228ab2c7ed6aee673ef0495f913e6" - integrity sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw== +"@date-io/core@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.13.1.tgz#f041765aff5c55fbc7e37fdd75fc1792733426d6" + integrity sha512-pVI9nfkf2qClb2Cxdq0Q4zJhdawMG4ybWZUVGifT78FDwzRMX2SwXBb55s5NRJk0HcIicDuxktmCtemZqMH1Zg== -"@date-io/date-fns-jalali@^2.11.0": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@date-io/date-fns-jalali/-/date-fns-jalali-2.11.0.tgz#42b624d094d5bbfc052c59335e7049969be18ae2" - integrity sha512-YgWs9PzDp1p5iSvQ0N00+0h2YZlh5+Lt7hdHQI4TuwJPmKqdS0RAPdZUnbQmDlE8rqNu0WoeRQLkVjCorcNy5w== +"@date-io/date-fns-jalali@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/date-fns-jalali/-/date-fns-jalali-2.13.1.tgz#bdedc5dbf4604eea5e15ab3affee6090a4060df7" + integrity sha512-OCf90JJi3GTfd7rAC34wYATm2Vep7wgUni4pK9rVZEI7st/9CFWyGzOQ3xfTq49dym/nbysU8ajOeVOe395GWw== dependencies: - "@date-io/core" "^2.11.0" + "@date-io/core" "^2.13.1" -"@date-io/date-fns@^2.11.0": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.11.0.tgz#142fbf954eda7ad66514af7a2802d78c4ea40053" - integrity sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg== +"@date-io/date-fns@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.13.1.tgz#19d8a245dab61c03c95ba492d679d98d2b0b4af5" + integrity sha512-8fmfwjiLMpFLD+t4NBwDx0eblWnNcgt4NgfT/uiiQTGI81fnPu9tpBMYdAcuWxaV7LLpXgzLBx1SYWAMDVUDQQ== dependencies: - "@date-io/core" "^2.11.0" + "@date-io/core" "^2.13.1" -"@date-io/dayjs@^2.11.0": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.11.0.tgz#41f4b4b9629612e6012accffd848875d1aeffb74" - integrity sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ== +"@date-io/dayjs@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.13.1.tgz#98461d22ee98179b9f2dca3b36f1b618704ae593" + integrity sha512-5bL4WWWmlI4uGZVScANhHJV7Mjp93ec2gNeUHDqqLaMZhp51S0NgD25oqj/k0LqBn1cdU2MvzNpk/ObMmVv5cQ== dependencies: - "@date-io/core" "^2.11.0" + "@date-io/core" "^2.13.1" -"@date-io/luxon@^2.11.1": - version "2.11.1" - resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.11.1.tgz#31a72f7b5e163c74e8a3b29d8f16c4c30de6ed43" - integrity sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g== +"@date-io/luxon@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.13.1.tgz#3701b3cabfffda5102af302979aa6e58acfda91a" + integrity sha512-yG+uM7lXfwLyKKEwjvP8oZ7qblpmfl9gxQYae55ifbwiTs0CoCTkYkxEaQHGkYtTqGTzLqcb0O9Pzx6vgWg+yg== dependencies: - "@date-io/core" "^2.11.0" + "@date-io/core" "^2.13.1" -"@date-io/moment@^2.11.0": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.11.0.tgz#850f8dd090d401845b39276d034dbabe20224ef5" - integrity sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg== +"@date-io/moment@^2.13.1": + version "2.13.1" + resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.13.1.tgz#122a51e4bdedf71ff3babb264427737dc022c1e6" + integrity sha512-XX1X/Tlvl3TdqQy2j0ZUtEJV6Rl8tOyc5WOS3ki52He28Uzme4Ro/JuPWTMBDH63weSWIZDlbR7zBgp3ZA2y1A== dependencies: - "@date-io/core" "^2.11.0" + "@date-io/core" "^2.13.1" "@definitelytyped/header-parser@latest": version "0.0.85" @@ -1426,7 +1426,7 @@ dependencies: "@emotion/memoize" "0.7.1" -"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -2349,44 +2349,44 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" -"@mui/x-data-grid-generator@^5.5.0": - version "5.5.0" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid-generator/-/x-data-grid-generator-5.5.0.tgz#737e51d44e42a1dfb397ea97bc8fbf0c57f30179" - integrity sha512-Tb0X5lwdE2eeIwgGvrBu6pa/brfH85YcoomgKZohhU195QeNNyVMiEA6oo4Xt6F2o3krs2mp5zEtbsb7uOYoVg== +"@mui/x-data-grid-generator@^5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid-generator/-/x-data-grid-generator-5.5.1.tgz#a873f8ee2d16c8c377bb84d8c7768f2e38bba645" + integrity sha512-lMykoXORV8PcgwlDsnSfdm3rAfpiS4vzDkyZ3P7wF0J9NXKe199Kj+E8QLouGS6EPT8fE7gEJdIEd/++hT63hQ== dependencies: - "@mui/base" "^5.0.0-alpha.66" + "@mui/base" "^5.0.0-alpha.68" "@types/chance" "^1.1.3" chance "^1.1.7" clsx "^1.1.1" lru-cache "^6.0.0" -"@mui/x-data-grid-pro@^5.5.0": - version "5.5.0" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-5.5.0.tgz#b62e9e24bcbd603aa0456ac0924f2ba0e22f8284" - integrity sha512-N50cwNPCMfC30OyksBX8RayfzArl4XP/GABfwoOGCvfc5ZnRJuXiFrLrpatQX06t552p+vD+BW5Kss5DS/pTaw== +"@mui/x-data-grid-pro@^5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid-pro/-/x-data-grid-pro-5.5.1.tgz#2e11f9cb6d61f2ed5aebbb54c097a72447b84d5f" + integrity sha512-Fh5zWvu6Mz135uIAH7he64Zx4AWCp+ztgsc5EHISd457Mcc4rWJqpSVE6bMOo4tfNT32NFPoApJqc/LFK/33ng== dependencies: - "@mui/utils" "^5.3.0" - "@mui/x-license-pro" "5.5.0" + "@mui/utils" "^5.4.1" + "@mui/x-license-pro" "5.5.1" clsx "^1.0.4" prop-types "^15.8.1" reselect "^4.1.5" -"@mui/x-data-grid@^5.5.0": - version "5.5.0" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-5.5.0.tgz#93c15cfca67e8dabf32d73c3cc358b6ce43f7c18" - integrity sha512-qjOAqUHDsQ1elZuvL05k6bQITI2bbCRFrYYk03Y8mz7PpbSn1KrHlMVwJQbZByl/+uWO0Md1my/UUfaVWy9Puw== +"@mui/x-data-grid@^5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-5.5.1.tgz#7e0aafba7f28006057d7b7437c13d7609a958097" + integrity sha512-0Lf7P2wr1IoK//4KLsIIps++G6XGMdlxhGxNprM4DhQZRfccX97E3o+t15W4f4YP8IdTKmdD2TjM31xcGF+HxQ== dependencies: - "@mui/utils" "^5.3.0" + "@mui/utils" "^5.4.1" clsx "^1.1.1" prop-types "^15.8.1" reselect "^4.1.5" -"@mui/x-license-pro@5.5.0": - version "5.5.0" - resolved "https://registry.yarnpkg.com/@mui/x-license-pro/-/x-license-pro-5.5.0.tgz#3f6b703b3f134f5c4085bdaa0168a39be21b543c" - integrity sha512-X5byaKy/jdbIrKGEYNeKY2ORKoZD1PCHCRmVxNNAzggJDzhkBrQB+MBE6sjOcSq0Swx3jy4JKQdMKyyH2yn8cQ== +"@mui/x-license-pro@5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@mui/x-license-pro/-/x-license-pro-5.5.1.tgz#c135721cc547f985495a073935c67b691fbe2245" + integrity sha512-GPx9u9vceYwLZWbpgItVAtBFAruwGkeOKV7fPz1oGMQo7nF5yKbJAycLzFG6gAh7dxjzSi3w5Vg561QeV1TKFQ== dependencies: - "@mui/utils" "^5.3.0" + "@mui/utils" "^5.4.1" esm "^3.2.25" yargs "^17.3.1" @@ -2572,7 +2572,7 @@ puka "^1.0.1" read-package-json-fast "^2.0.1" -"@octokit/auth-token@^2.4.0", "@octokit/auth-token@^2.4.4": +"@octokit/auth-token@^2.4.4": version "2.4.5" resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3" integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA== @@ -2620,13 +2620,6 @@ resolved "https://registry.yarnpkg.com/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz#e07896739618dab8da7d4077c658003775f95437" integrity sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw== -"@octokit/plugin-paginate-rest@^1.1.1": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-1.1.2.tgz#004170acf8c2be535aba26727867d692f7b488fc" - integrity sha512-jbsSoi5Q1pj63sC16XIUboklNw+8tL9VOnJsWycWYR78TKss5PVpIPb1TUUcMQ+bBh7cY579cVAWmf5qG+dw+Q== - dependencies: - "@octokit/types" "^2.0.1" - "@octokit/plugin-paginate-rest@^2.16.8": version "2.16.9" resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.16.9.tgz#a844157ce7c294747bda19ea9b9996298e0948f0" @@ -2634,19 +2627,11 @@ dependencies: "@octokit/types" "^6.33.0" -"@octokit/plugin-request-log@^1.0.0", "@octokit/plugin-request-log@^1.0.4": +"@octokit/plugin-request-log@^1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz#5e50ed7083a613816b1e4a28aeec5fb7f1462e85" integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA== -"@octokit/plugin-rest-endpoint-methods@2.4.0": - version "2.4.0" - resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.4.0.tgz#3288ecf5481f68c494dd0602fc15407a59faf61e" - integrity sha512-EZi/AWhtkdfAYi01obpX0DF7U6b1VRr30QNQ5xSFPITMdLSfhcBqjamE3F+sKcxPbD7eZuMHu3Qkk2V+JGxBDQ== - dependencies: - "@octokit/types" "^2.0.1" - deprecation "^2.3.1" - "@octokit/plugin-rest-endpoint-methods@^5.12.0": version "5.12.1" resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.12.1.tgz#89747e3e39cbf411881de85dfdec18dfbc2e9b90" @@ -2655,15 +2640,6 @@ "@octokit/types" "^6.33.0" deprecation "^2.3.1" -"@octokit/request-error@^1.0.2": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-1.2.1.tgz#ede0714c773f32347576c25649dc013ae6b31801" - integrity sha512-+6yDyk1EES6WK+l3viRDElw96MvwfJxCt45GvmjDUKWjYIb3PJZQkq3i46TwGwoPD4h8NmTrENmtyA1FwbmhRA== - dependencies: - "@octokit/types" "^2.0.0" - deprecation "^2.0.0" - once "^1.4.0" - "@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.1.0.tgz#9e150357831bfc788d13a4fd4b1913d60c74d677" @@ -2673,7 +2649,7 @@ deprecation "^2.0.0" once "^1.4.0" -"@octokit/request@^5.2.0", "@octokit/request@^5.6.0": +"@octokit/request@^5.6.0": version "5.6.0" resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.6.0.tgz#6084861b6e4fa21dc40c8e2a739ec5eff597e672" integrity sha512-4cPp/N+NqmaGQwbh3vUsYqokQIzt7VjsgTYVXiwpUP2pxd5YiZB2XuTedbb0SPtv9XS7nzAKjAuQxmY8/aZkiA== @@ -2685,29 +2661,7 @@ node-fetch "^2.6.1" universal-user-agent "^6.0.0" -"@octokit/rest@^16.43.1": - version "16.43.2" - resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.43.2.tgz#c53426f1e1d1044dee967023e3279c50993dd91b" - integrity sha512-ngDBevLbBTFfrHZeiS7SAMAZ6ssuVmXuya+F/7RaVvlysgGa1JKJkKWY+jV6TCJYcW0OALfJ7nTIGXcBXzycfQ== - dependencies: - "@octokit/auth-token" "^2.4.0" - "@octokit/plugin-paginate-rest" "^1.1.1" - "@octokit/plugin-request-log" "^1.0.0" - "@octokit/plugin-rest-endpoint-methods" "2.4.0" - "@octokit/request" "^5.2.0" - "@octokit/request-error" "^1.0.2" - atob-lite "^2.0.0" - before-after-hook "^2.0.0" - btoa-lite "^1.0.0" - deprecation "^2.0.0" - lodash.get "^4.4.2" - lodash.set "^4.3.2" - lodash.uniq "^4.5.0" - octokit-pagination-methods "^1.1.0" - once "^1.4.0" - universal-user-agent "^4.0.0" - -"@octokit/rest@^18.1.0", "@octokit/rest@^18.12.0": +"@octokit/rest@^16.43.0 || ^17.11.0 || ^18.12.0", "@octokit/rest@^18.1.0", "@octokit/rest@^18.12.0": version "18.12.0" resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.12.0.tgz#f06bc4952fc87130308d810ca9d00e79f6988881" integrity sha512-gDPiOHlyGavxr72y0guQEhLsemgVjwRePayJ+FcKc2SJqKUbxbkvf5kAZEWA/MKvsfYlQAMVzNJE3ezQcxMJ2Q== @@ -2717,13 +2671,6 @@ "@octokit/plugin-request-log" "^1.0.4" "@octokit/plugin-rest-endpoint-methods" "^5.12.0" -"@octokit/types@^2.0.0", "@octokit/types@^2.0.1": - version "2.16.2" - resolved "https://registry.yarnpkg.com/@octokit/types/-/types-2.16.2.tgz#4c5f8da3c6fecf3da1811aef678fda03edac35d2" - integrity sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q== - dependencies: - "@types/node" ">= 8" - "@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.33.0": version "6.33.0" resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.33.0.tgz#7e5e664d65e88b74b6de76f328b80a344bef3f86" @@ -3383,7 +3330,7 @@ resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-9.1.0.tgz#baf17ab2cca3fcce2d322ebc30454bff487efad5" integrity sha512-QCWHkbMv4Y5U9oW10Uxbr45qMMSzl4OzijsozynUAgx3kEHUdXB00udx2dWDQ7f2TU2a2uuiFaRZjCe3unPpeg== -"@types/node@*", "@types/node@>= 8", "@types/node@>=10.0.0", "@types/node@^16.11.22": +"@types/node@*", "@types/node@>=10.0.0", "@types/node@^16.11.22": version "16.11.22" resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.22.tgz#e704150225bfc4195f8ce68a7ac8da02b753549a" integrity sha512-DYNtJWauMQ9RNpesl4aVothr97/tIJM8HbyOXJ0AYT1Z2bEjLHyfjOBPAQQVMLf8h3kSShYfNk8Wnto8B2zHUA== @@ -3413,10 +3360,10 @@ resolved "https://registry.yarnpkg.com/@types/parsimmon/-/parsimmon-1.10.6.tgz#8fcf95990514d2a7624aa5f630c13bf2427f9cdd" integrity sha512-FwAQwMRbkhx0J6YELkwIpciVzCcgEqXEbIrIn3a2P5d3kGEHQ3wVhlN3YdVepYP+bZzCYO6OjmD4o9TGOZ40rA== -"@types/prettier@*", "@types/prettier@^2.4.3": - version "2.4.3" - resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.3.tgz#a3c65525b91fca7da00ab1a3ac2b5a2a4afbffbf" - integrity sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w== +"@types/prettier@*", "@types/prettier@^2.4.4": + version "2.4.4" + resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.4.tgz#5d9b63132df54d8909fce1c3f8ca260fdd693e17" + integrity sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA== "@types/prop-types@*", "@types/prop-types@^15.7.4": version "15.7.4" @@ -4530,11 +4477,6 @@ at-least-node@^1.0.0: resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2" integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg== -atob-lite@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/atob-lite/-/atob-lite-2.0.0.tgz#0fef5ad46f1bd7a8502c65727f0367d5ee43d696" - integrity sha1-D+9a1G8b16hQLGVyfwNn1e5D1pY= - atob@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" @@ -4586,10 +4528,10 @@ available-typed-arrays@^1.0.2: dependencies: array-filter "^1.0.0" -aws-sdk@^2.1009.0, aws-sdk@^2.1070.0: - version "2.1070.0" - resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1070.0.tgz#e7a27c34ed3a92776aa9128ed3469cb94bba9655" - integrity sha512-tkmuycoJ9k0qF1iq03iqyhevxP3l0OlrnUxjd0x8nZ9Ko1TGjyj0yJS4Vbd4r5RBpKUwRqedB7TAyZ/71mcZKw== +aws-sdk@^2.1009.0, aws-sdk@^2.1073.0: + version "2.1073.0" + resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.1073.0.tgz#96c0c25c89f814c4aa4262e6eeef20eec9fda0da" + integrity sha512-TtyHDL4ZEs8Zh/DqWY/hv745DTWrIwOyBAvfjBJ45RE9h0TjpWqCIowEtb6gRPAKyPPyfGH4s+rEYu07vNK1Hg== dependencies: buffer "4.9.2" events "1.1.1" @@ -4888,7 +4830,7 @@ bcrypt-pbkdf@^1.0.0: dependencies: tweetnacl "^0.14.3" -before-after-hook@^2.0.0, before-after-hook@^2.2.0: +before-after-hook@^2.2.0: version "2.2.2" resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e" integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ== @@ -5148,11 +5090,6 @@ browserstacktunnel-wrapper@~2.0.2: https-proxy-agent "^2.2.1" unzipper "^0.9.3" -btoa-lite@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337" - integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc= - buffer-crc32@^0.2.1, buffer-crc32@^0.2.13, buffer-crc32@~0.2.3: version "0.2.13" resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242" @@ -5410,11 +5347,6 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.300012 resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c" integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw== -case@1.6.3: - version "1.6.3" - resolved "https://registry.yarnpkg.com/case/-/case-1.6.3.tgz#0a4386e3e9825351ca2e6216c60467ff5f1ea1c9" - integrity sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ== - caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -6589,13 +6521,13 @@ damerau-levenshtein@^1.0.7: resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d" integrity sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw== -danger@^10.9.0: - version "10.9.0" - resolved "https://registry.yarnpkg.com/danger/-/danger-10.9.0.tgz#0a5f6eae76029257f23246e2fb922cf401ac55ee" - integrity sha512-eEWQAaIPfWSfzlQiFx+w9fWuP3jwq8VAV9W22EZRxfmCBnkdDa5aN0Akr7lzfCKudzy+4uEmIGUtxnYeFgTthQ== +danger@^11.0.2: + version "11.0.2" + resolved "https://registry.yarnpkg.com/danger/-/danger-11.0.2.tgz#245b65aaf26c9b5eb3d0c65fcd403b5c31782138" + integrity sha512-TKE5E1Zrb0uV7Ft3mhbTA3bwVf4hZs7DVx6Mo8weVdIcaXJIIle3+aCjn259GX9/pF4ewoYuof7eLRPJligOgA== dependencies: "@babel/polyfill" "^7.2.5" - "@octokit/rest" "^16.43.1" + "@octokit/rest" "^18.12.0" async-retry "1.2.3" chalk "^2.3.0" commander "^2.18.0" @@ -6615,7 +6547,7 @@ danger@^10.9.0: lodash.keys "^4.0.8" lodash.mapvalues "^4.6.0" lodash.memoize "^4.1.2" - memfs-or-file-map-to-github-branch "^1.1.0" + memfs-or-file-map-to-github-branch "^1.2.1" micromatch "^4.0.4" node-cleanup "^2.1.2" node-fetch "^2.6.7" @@ -8345,24 +8277,6 @@ fragment-cache@^0.2.1: dependencies: map-cache "^0.2.2" -framer-motion@^4.1.17: - version "4.1.17" - resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.1.17.tgz#4029469252a62ea599902e5a92b537120cc89721" - integrity sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw== - dependencies: - framesync "5.3.0" - hey-listen "^1.0.8" - popmotion "9.3.6" - style-value-types "4.1.4" - tslib "^2.1.0" - optionalDependencies: - "@emotion/is-prop-valid" "^0.8.2" - -framer@^1.2.5: - version "1.2.5" - resolved "https://registry.yarnpkg.com/framer/-/framer-1.2.5.tgz#70cf754e2450ca159cc06c267165ec8479ac30f4" - integrity sha512-q8aDopljyDjzK1yN5M96wZYQzZOx8BgY0O+Bm+3IM3YQw8SOfmt/ifdiwv52GIBKZZ+TT+WHH2gr/vcZiLNgLA== - framesync@5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b" @@ -9040,11 +8954,6 @@ he@1.2.0, he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== -hey-listen@^1.0.8: - version "1.0.8" - resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" - integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== - history@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c" @@ -10660,10 +10569,10 @@ karma-webpack@^5.0.0: minimatch "^3.0.4" webpack-merge "^4.1.5" -karma@^6.3.15: - version "6.3.15" - resolved "https://registry.yarnpkg.com/karma/-/karma-6.3.15.tgz#6c3beedb2440b05589a502462140afed724481e7" - integrity sha512-4O5X6zVFdmwo/fgjRN84fPG3IvaiOxOjIeZBwBrQYz4nIyGqlF8Wm7C1Hr7idQ9NHgnvJM+LSjZwS1C+qALMGw== +karma@^6.3.16: + version "6.3.16" + resolved "https://registry.yarnpkg.com/karma/-/karma-6.3.16.tgz#76d1a705fd1cf864ee5ed85270b572641e0958ef" + integrity sha512-nEU50jLvDe5yvXqkEJRf8IuvddUkOY2x5Xc4WXHz6dxINgGDrgD2uqQWeVrJs4hbfNaotn+HQ1LZJ4yOXrL7xQ== dependencies: body-parser "^1.19.0" braces "^3.0.2" @@ -11077,11 +10986,6 @@ lodash.once@^4.0.0: resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac" integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w= -lodash.set@^4.3.2: - version "4.3.2" - resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23" - integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM= - lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" @@ -11117,11 +11021,6 @@ lodash.union@^4.6.0: resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88" integrity sha1-SLtQiECfFvGCFmZkHETdGqrjzYg= -lodash.uniq@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" - integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= - lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" @@ -11215,11 +11114,6 @@ lz-string@^1.4.4: resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26" integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY= -macos-release@^2.2.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.5.0.tgz#067c2c88b5f3fb3c56a375b2ec93826220fa1ff2" - integrity sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g== - magic-string@^0.22.5: version "0.22.5" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e" @@ -11422,12 +11316,12 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= -memfs-or-file-map-to-github-branch@^1.1.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/memfs-or-file-map-to-github-branch/-/memfs-or-file-map-to-github-branch-1.2.0.tgz#a56cd13443144a8c7fbe2a4b90b5f570fb39c845" - integrity sha512-PloI9AkRXrLQuBU1s7eYQpl+4hkL0U0h23lddMaJ3ZGUufn8pdNRxd1kCfBqL5gISCFQs78ttXS15e4/f5vcTA== +memfs-or-file-map-to-github-branch@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/memfs-or-file-map-to-github-branch/-/memfs-or-file-map-to-github-branch-1.2.1.tgz#fdb9a85408262316a9bd5567409bf89be7d72f96" + integrity sha512-I/hQzJ2a/pCGR8fkSQ9l5Yx+FQ4e7X6blNHyWBm2ojeFLT3GVzGkTj7xnyWpdclrr7Nq4dmx3xrvu70m3ypzAQ== dependencies: - "@octokit/rest" "^16.43.1" + "@octokit/rest" "^16.43.0 || ^17.11.0 || ^18.12.0" "memoize-one@>=3.1.1 <6": version "5.0.5" @@ -12516,11 +12410,6 @@ object.values@^1.1.1, object.values@^1.1.5: define-properties "^1.1.3" es-abstract "^1.19.1" -octokit-pagination-methods@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/octokit-pagination-methods/-/octokit-pagination-methods-1.1.0.tgz#cf472edc9d551055f9ef73f6e42b4dbb4c80bea4" - integrity sha512-fZ4qZdQ2nxJvtcasX7Ghl+WlWS/d9IgnBIwFZXVNNZUmzpno91SX5bc5vuxiuKoCtK78XxGGNuSCrDC7xYB3OQ== - oh-no-i-insist@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/oh-no-i-insist/-/oh-no-i-insist-1.1.1.tgz#af6f12e2d43366839bae45f8c870b976a11eee35" @@ -12600,14 +12489,6 @@ os-homedir@^1.0.0: resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3" integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M= -os-name@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/os-name/-/os-name-3.1.0.tgz#dec19d966296e1cd62d701a5a66ee1ddeae70801" - integrity sha512-h8L+8aNjNcMpo/mAIBPn5PXCM16iyPGjHNWo6U1YO8sJTMHtEtyczI6QJnLoplswm6goopQkqc7OAnjhWcugVg== - dependencies: - macos-release "^2.2.0" - windows-release "^3.1.0" - os-tmpdir@^1.0.0, os-tmpdir@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" @@ -13240,16 +13121,6 @@ pngjs@^5.0.0: resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb" integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw== -popmotion@9.3.6: - version "9.3.6" - resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.3.6.tgz#b5236fa28f242aff3871b9e23721f093133248d1" - integrity sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw== - dependencies: - framesync "5.3.0" - hey-listen "^1.0.8" - style-value-types "4.1.4" - tslib "^2.1.0" - posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -14174,10 +14045,10 @@ recharts-scale@^0.4.4: dependencies: decimal.js-light "^2.4.1" -recharts@*, recharts@^2.1.8: - version "2.1.8" - resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.1.8.tgz#ca8774fcec5f5d7ec15dedd638db9ee12faf1c09" - integrity sha512-Wi7ufdDGyvy/BPf1za1Ok7VeWB2KtEejaewO9ulmlUhvn5l5RPS4AOkrUfhtMRTTjgJ4K6AbWMDpwtDjczUHJA== +recharts@*, recharts@^2.1.9: + version "2.1.9" + resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.1.9.tgz#a52d411a7d822d118f7754cfc9c50db8fab46fb9" + integrity sha512-VozH5uznUvGqD7n224FGj7cmMAenlS0HPCs+7r2HeeHiQK6un6z0CTZfWVAB860xbcr4m+BN/EGMPZmYWd34Rg== dependencies: "@types/d3-interpolate" "^2.0.0" "@types/d3-scale" "^3.0.0" @@ -15618,14 +15489,6 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= -style-value-types@4.1.4: - version "4.1.4" - resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-4.1.4.tgz#80f37cb4fb024d6394087403dfb275e8bb627e75" - integrity sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg== - dependencies: - hey-listen "^1.0.8" - tslib "^2.1.0" - styled-components@^5.3.3: version "5.3.3" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743" @@ -16551,13 +16414,6 @@ universal-url@^2.0.0: hasurl "^1.0.0" whatwg-url "^7.0.0" -universal-user-agent@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-4.0.1.tgz#fd8d6cb773a679a709e967ef8288a31fcc03e557" - integrity sha512-LnST3ebHwVL2aNe4mejI9IQh2HfZ1RLo8Io2HugSif8ekzD1TlWpHpColOB/eh8JHMLkGH3Akqf040I+4ylNxg== - dependencies: - os-name "^3.1.0" - universal-user-agent@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee" @@ -17070,13 +16926,6 @@ wildcard@^2.0.0: resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.0.tgz#a77d20e5200c6faaac979e4b3aadc7b3dd7f8fec" integrity sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw== -windows-release@^3.1.0: - version "3.3.3" - resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-3.3.3.tgz#1c10027c7225743eec6b89df160d64c2e0293999" - integrity sha512-OSOGH1QYiW5yVor9TtmXKQvt2vjQqbYS+DqmsZw+r7xDwLXEeT3JGW0ZppFmHx4diyXmxt238KFR3N9jzevBRg== - dependencies: - execa "^1.0.0" - word-wrap@^1.2.3, word-wrap@~1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"