diff --git a/.gitignore b/.gitignore index ca97eec3b87c62..ae434b09246d30 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,5 @@ -# The best pattern people should follow is ignoring the editors' files in their -# global .gitignore configuration file. -# However, in order to prevent issues. We also ignore editors' files here. +# The best pattern to follow is ignoring editor files in a global .gitignore configuration file. +# However, in order to prevent issues, editor files are ignored here. .idea .vscode diff --git a/docs/pages/api/checkbox.md b/docs/pages/api/checkbox.md index ec526b761536b5..4ffe427ad4be27 100644 --- a/docs/pages/api/checkbox.md +++ b/docs/pages/api/checkbox.md @@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | -| disabled | bool | | If `true`, the switch will be disabled. | +| disabled | bool | false | If `true`, the switch will be disabled. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | icon | node | <CheckBoxOutlineBlankIcon /> | The icon to display when the component is unchecked. | | id | string | | The id of the `input` element. | diff --git a/docs/pages/api/list-item.md b/docs/pages/api/list-item.md index 0a3e6cbdfc51d3..3420b064d1e362 100644 --- a/docs/pages/api/list-item.md +++ b/docs/pages/api/list-item.md @@ -32,7 +32,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last | component | elementType | | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. | | ContainerComponent | elementType | 'li' | The container component used when a `ListItemSecondaryAction` is the last child. | | ContainerProps | object | {} | Props applied to the container component if used. | -| dense | bool | | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | +| dense | bool | false | If `true`, compact vertical padding designed for keyboard and mouse input will be used. | | disabled | bool | false | If `true`, the list item will be disabled. | | disableGutters | bool | false | If `true`, the left and right padding is removed. | | divider | bool | false | If `true`, a 1px light border is added to the bottom of the list item. | diff --git a/docs/pages/api/radio.md b/docs/pages/api/radio.md index 5c84e35b705a16..404ec1ea1b125a 100644 --- a/docs/pages/api/radio.md +++ b/docs/pages/api/radio.md @@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | checkedIcon | node | | The icon to display when the component is checked. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | -| disabled | bool | | If `true`, the switch will be disabled. | +| disabled | bool | false | If `true`, the switch will be disabled. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | icon | node | | The icon to display when the component is unchecked. | | id | string | | The id of the `input` element. | diff --git a/docs/pages/api/switch.md b/docs/pages/api/switch.md index e33b56c704c50c..c2e8109decddc7 100644 --- a/docs/pages/api/switch.md +++ b/docs/pages/api/switch.md @@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | checkedIcon | node | | The icon to display when the component is checked. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | -| disabled | bool | | If `true`, the switch will be disabled. | +| disabled | bool | false | If `true`, the switch will be disabled. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | edge | 'start'
| 'end'
| false | false | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). | | icon | node | | The icon to display when the component is unchecked. | diff --git a/docs/pages/api/text-field.md b/docs/pages/api/text-field.md index d57d8798b8c9d6..74388651c716ff 100644 --- a/docs/pages/api/text-field.md +++ b/docs/pages/api/text-field.md @@ -54,14 +54,14 @@ For advanced cases, please look at the source of TextField by clicking on the | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | -| autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | +| autoFocus | bool | false | If `true`, the `input` element will be focused during the first mount. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | defaultValue | any | | The default value of the `input` element. | -| disabled | bool | | If `true`, the `input` element will be disabled. | -| error | bool | | If `true`, the label will be displayed in an error state. | +| disabled | bool | false | If `true`, the `input` element will be disabled. | +| error | bool | false | If `true`, the label will be displayed in an error state. | | FormHelperTextProps | object | | Props applied to the [`FormHelperText`](/api/form-helper-text/) element. | -| fullWidth | bool | | If `true`, the input will take up the full width of its container. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | helperText | node | | The helper text content. | | id | string | | The id of the `input` element. Use this prop to make `label` and `helperText` accessible for screen readers. | | InputLabelProps | object | | Props applied to the [`InputLabel`](/api/input-label/) element. | @@ -70,7 +70,7 @@ For advanced cases, please look at the source of TextField by clicking on the | inputRef | ref | | Pass a ref to the `input` element. | | label | node | | The label content. | | margin | 'none'
| 'dense'
| 'normal' | | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | -| multiline | bool | | If `true`, a textarea element will be rendered instead of an input. | +| multiline | bool | false | If `true`, a textarea element will be rendered instead of an input. | | name | string | | Name attribute of the `input` element. | | onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | | placeholder | string | | The short hint displayed in the input before the user enters a value. | diff --git a/docs/src/modules/utils/defaultPropsHandler.js b/docs/src/modules/utils/defaultPropsHandler.js index b21528917e5fa3..0d31847cabb74d 100644 --- a/docs/src/modules/utils/defaultPropsHandler.js +++ b/docs/src/modules/utils/defaultPropsHandler.js @@ -1,5 +1,5 @@ -import * as astTypes from 'ast-types'; -import { utils as docgenUtils } from 'react-docgen'; +const astTypes = require('ast-types'); +const { utils: docgenUtils } = require('react-docgen'); const { getPropertyName, isReactForwardRefCall, printValue, resolveToValue } = docgenUtils; @@ -81,10 +81,10 @@ function getPropsPath(functionBody) { return propsPath; } -export default function defaultPropsHandler(documentation, componentDefinition) { +module.exports = function defaultPropsHandler(documentation, componentDefinition) { const renderBody = getRenderBody(componentDefinition); const props = getPropsPath(renderBody); if (props !== undefined) { getDefaultValuesFromProps(props.get('properties'), documentation); } -} +}; diff --git a/framer/.prettierignore b/framer/.prettierignore new file mode 100644 index 00000000000000..58dab90db2ccfe --- /dev/null +++ b/framer/.prettierignore @@ -0,0 +1,3 @@ +Material-UI.framerfx/design/* +Material-UI.framerfx/build/* +canvas.tsx diff --git a/framer/Material-UI.framerfx/.gitignore b/framer/Material-UI.framerfx/.gitignore new file mode 100644 index 00000000000000..7e92afe4f64bdc --- /dev/null +++ b/framer/Material-UI.framerfx/.gitignore @@ -0,0 +1,9 @@ +build +.backups +.cache +.project.log +yarn-error.log +.yarnrc +.framer-lock +canvas.tsx +dist \ No newline at end of file diff --git a/framer/Material-UI.framerfx/.npmrc b/framer/Material-UI.framerfx/.npmrc new file mode 100644 index 00000000000000..5cc32faf8a8f4b --- /dev/null +++ b/framer/Material-UI.framerfx/.npmrc @@ -0,0 +1,3 @@ +@framer:registry=https://registry.framer.com/ +always-auth=true +//registry.framer.com/:_authToken=f326029a-e8b0-43b7-a65d-9cb1ff2de882 diff --git a/framer/Material-UI.framerfx/README.md b/framer/Material-UI.framerfx/README.md new file mode 100644 index 00000000000000..1df43de787749c --- /dev/null +++ b/framer/Material-UI.framerfx/README.md @@ -0,0 +1,58 @@ +# Material-UI + +This is the official resource for Material-UI React components in Framer. + +## 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 Material-UI documentation](https://material-ui.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 + +- [Material-UI documentation](https://material-ui.com/) +- [GitHub repo](https://github.com/mui-org/material-ui/tree/master/framer) diff --git a/framer/Material-UI.framerfx/code/AppBar.tsx b/framer/Material-UI.framerfx/code/AppBar.tsx new file mode 100644 index 00000000000000..12bc30fe797717 --- /dev/null +++ b/framer/Material-UI.framerfx/code/AppBar.tsx @@ -0,0 +1,114 @@ +import * as React from 'react'; +import { PropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiAppBar from '@material-ui/core/AppBar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Toolbar from '@material-ui/core/Toolbar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Typography from '@material-ui/core/Typography'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Button from '@material-ui/core/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: 'Material-UI', + 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 new file mode 100644 index 00000000000000..6d14037dc59706 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Avatar.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiAvatar from '@material-ui/core/Avatar'; +import { Icon } from './Icon'; + +interface Props { + backgroundColor?: string; + textColor?: string; + icon?: string; + imageFile?: string; + imageUrl?: string; + label?: string; + width?: number; + height?: number; +} + +const defaultProps: Props = { + backgroundColor: '#4154af', + textColor: undefined, + icon: 'face', + imageFile: '', + imageUrl: 'https://i.pravatar.cc/300', + label: 'MB', + width: 40, + height: 40, +}; + +export const Avatar: React.SFC = (props: Props) => { + const { + backgroundColor, + height, + icon, + imageFile, + imageUrl, + label, + textColor, + width, + ...other + } = props; + + return imageFile || imageUrl ? ( + + ) : ( + + {icon === '' ? label : } + + ); +}; + +Avatar.defaultProps = defaultProps; + +addPropertyControls(Avatar, { + backgroundColor: { + type: ControlType.Color, + title: 'Background color', + }, + textColor: { + type: ControlType.Color, + title: 'Text color', + }, + icon: { + type: ControlType.String, + title: 'Icon', + }, + imageFile: { + type: ControlType.Image, + title: 'Image File', + hidden: function hidden(props) { + return props.primaryAction && props.primaryAction !== 'avatar'; + }, + }, + imageUrl: { + type: ControlType.String, + title: 'Image URL', + hidden: function hidden(props) { + return props.imageFile !== '' || (props.primaryAction && props.primaryAction !== 'avatar'); + }, + }, + label: { + type: ControlType.String, + title: 'Label', + }, +}); diff --git a/framer/Material-UI.framerfx/code/Badge.tsx b/framer/Material-UI.framerfx/code/Badge.tsx new file mode 100644 index 00000000000000..7843721cebac13 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Badge.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiBadge from '@material-ui/core/Badge'; +import { Icon } from './Icon'; + +interface Props { + badgeContent?: string; + max?: number; + showZero?: boolean; + variant?: 'dot' | 'standard'; + icon?: string; + theme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; + badgeColor?: 'default' | 'primary' | 'secondary' | 'error'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + badgeContent: '8', + max: 99, + showZero: false, + variant: 'standard', + icon: '', + theme: 'Filled', + badgeColor: 'primary', + width: 22, + height: 22, +}; + +const style: React.CSSProperties = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; + +export const Badge: React.SFC = (props: Props) => { + const { badgeColor: color, badgeContent, icon, theme, width, height, ...other } = props; + const content = + icon === '' ? ( + badgeContent + ) : ( + // @ts-ignore + + ); + + return ; +}; + +Badge.defaultProps = defaultProps; + +addPropertyControls(Badge, { + badgeContent: { + type: ControlType.String, + title: 'Badge content', + }, + max: { + type: ControlType.Number, + title: 'Max', + }, + showZero: { + type: ControlType.Boolean, + title: 'Show zero', + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: ['dot', 'standard'], + }, + 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 new file mode 100644 index 00000000000000..0c06b4123ea70f --- /dev/null +++ b/framer/Material-UI.framerfx/code/BottomNavigation.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiBottomNavigation from '@material-ui/core/BottomNavigation'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiBottomNavigationAction from '@material-ui/core/BottomNavigationAction'; +import { Icon } from './Icon'; + +interface Props { + showLabels?: boolean; + icons?: string[]; + labels?: string[]; + width?: number; + height?: number; +} + +const defaultProps: Props = { + showLabels: false, + icons: ['restore', 'favorite', 'location_on', 'folder'], + labels: ['Recents', 'Favorites', 'Nearby', 'Saved'], + width: 500, + height: 56, +}; + +export const BottomNavigation: React.SFC = (props: Props) => { + const { labels, icons, ...other } = props; + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + const [value, setValue] = React.useState(0); + + const handleChange = (event, value) => { + setValue(value); + }; + + const items = icons.length > labels.length ? icons : labels; + + return ( + + {items.map( + (item, index) => + (labels[index] !== undefined || icons[index] !== undefined) && ( + } + /> + ), + )} + + ); +}; + +BottomNavigation.defaultProps = defaultProps; + +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 new file mode 100644 index 00000000000000..8202375a9df6d7 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Button.tsx @@ -0,0 +1,116 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiButton from '@material-ui/core/Button'; +import { Icon } from './Icon'; + +interface Props { + color?: 'default' | 'inherit' | 'primary' | 'secondary'; + disabled?: boolean; + endIcon?: string; + fullWidth?: boolean; + href?: string; + size?: 'small' | 'medium' | 'large'; + startIcon?: string; + variant?: 'text' | 'outlined' | 'contained'; + startIconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; + endIconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; + label?: string; + width?: number; + height?: number; +} + +const defaultProps: Props = { + color: 'default', + disabled: false, + endIcon: undefined, + fullWidth: false, + size: 'medium', + startIcon: undefined, + variant: 'text', + startIconTheme: 'Filled', + endIconTheme: 'Filled', + label: 'Button', + width: 100, + height: 38, +}; + +export const Button: React.SFC = (props: Props) => { + const { + endIcon, + endIconTheme, + height, + label, + startIcon, + startIconTheme, + variant, + width, + ...other + } = props; + + const StartIcon = startIcon === '' ? undefined : ; + const EndIcon = endIcon === '' ? undefined : ; + + return ( +
+ + {label} + +
+ ); +}; + +Button.defaultProps = defaultProps; + +addPropertyControls(Button, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['default', 'inherit', 'primary', 'secondary'], + }, + disabled: { + type: ControlType.Boolean, + title: 'Disabled', + }, + endIcon: { + type: ControlType.String, + title: 'End icon', + }, + fullWidth: { + type: ControlType.Boolean, + title: 'Full width', + }, + href: { + type: ControlType.String, + title: 'Href', + }, + size: { + type: ControlType.Enum, + title: 'Size', + options: ['small', 'medium', 'large'], + }, + startIcon: { + type: ControlType.String, + title: 'Start icon', + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: ['text', 'outlined', 'contained'], + }, + 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', + }, +}); diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx new file mode 100644 index 00000000000000..1ed4354c358651 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiCheckbox from '@material-ui/core/Checkbox'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +export function Checkbox(props) { + const { checked: checkedProp, label, onChange, ...other } = props; + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + + const [checked, setChecked] = React.useState(false); + + const handleChange = (event: React.ChangeEvent) => { + if (onChange) { + onChange(event); + } + setChecked((event.target as HTMLInputElement).checked); + }; + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + React.useEffect(() => { + setChecked(checkedProp); + }, [checkedProp]); + + const control = ; + + return ; +} + +Checkbox.defaultProps = { + checked: false, + color: 'secondary', + disabled: false, + label: 'Checkbox', + width: 100, + height: 42, +}; + +addPropertyControls(Checkbox, { + checked: { + type: ControlType.Boolean, + title: 'Checked', + }, + color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary', 'default'], + }, + 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 new file mode 100644 index 00000000000000..58f98a46ce8eec --- /dev/null +++ b/framer/Material-UI.framerfx/code/Chip.tsx @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiChip from '@material-ui/core/Chip'; +import { Icon } from './Icon'; +import { Avatar } from './Avatar'; + +interface Props { + clickable?: boolean; + color?: 'default' | 'primary' | 'secondary'; + deleteIcon?: string; + disabled?: boolean; + icon?: string; + label?: string; + size?: 'small' | 'medium'; + variant?: 'default' | 'outlined'; + avatarImageFile?: string; + avatarImageUrl?: string; + deletable?: boolean; + iconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + clickable: true, + color: 'default', + deleteIcon: '', + disabled: false, + icon: 'star', + label: 'Chip', + size: 'medium', + variant: 'default', + avatarImageFile: '', + avatarImageUrl: '', + deletable: false, + iconTheme: 'Filled', + width: 100, + height: 32, +}; + +export const Chip: React.SFC = (props: Props) => { + const { + avatarImageFile, + avatarImageUrl, + deletable, + deleteIcon, + height, + icon, + iconTheme, + width, + ...other + } = props; + + return ( + + ) : ( + undefined + ) + } + icon={} + onDelete={deletable ? () => {} : undefined} + deleteIcon={deleteIcon === '' ? undefined : } + {...other} + /> + ); +}; + +Chip.defaultProps = defaultProps; + +addPropertyControls(Chip, { + clickable: { + type: ControlType.Boolean, + title: 'Clickable', + }, + color: { + type: ControlType.Enum, + title: 'Color', + options: ['default', 'primary', 'secondary'], + }, + 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', + }, + size: { + type: ControlType.Enum, + title: 'Size', + options: ['small', 'medium'], + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: ['default', 'outlined'], + }, + avatarImageFile: { + type: ControlType.Image, + title: 'Avatar Image File', + }, + avatarImageUrl: { + type: ControlType.String, + title: 'Avatar Image URL', + hidden: function 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 new file mode 100644 index 00000000000000..0d96ab1c80e8ae --- /dev/null +++ b/framer/Material-UI.framerfx/code/CircularProgress.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiCircularProgress from '@material-ui/core/CircularProgress'; + +interface Props { + color?: 'primary' | 'secondary' | 'inherit'; + thickness?: number; + value?: number; + variant?: 'determinate' | 'indeterminate' | 'static'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + color: 'primary', + thickness: 4, + value: 75, + variant: 'static', + width: 44, + height: 44, +}; + +export const CircularProgress: React.SFC = (props: Props) => { + const { width, height, ...other } = props; + const style: React.CSSProperties = { + width: 'width', + height: 'height', + }; + + return ; +}; + +CircularProgress.defaultProps = defaultProps; + +addPropertyControls(CircularProgress, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary', 'inherit'], + }, + thickness: { + type: ControlType.Number, + title: 'Thickness', + min: 0, + max: 22, + }, + value: { + type: ControlType.Number, + title: 'Value', + hidden: function hidden(props) { + return props.variant === 'indeterminate' || props.variant === 'query'; + }, + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: ['determinate', 'indeterminate', 'static'], + }, +}); diff --git a/framer/Material-UI.framerfx/code/Fab.tsx b/framer/Material-UI.framerfx/code/Fab.tsx new file mode 100644 index 00000000000000..3499efaa49c5b3 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Fab.tsx @@ -0,0 +1,88 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiFab from '@material-ui/core/Fab'; +import { Icon } from './Icon'; + +interface Props { + color?: 'default' | 'inherit' | 'primary' | 'secondary'; + disabled?: boolean; + href?: string; + size?: 'small' | 'medium' | 'large'; + variant?: 'round' | 'extended'; + icon?: string; + iconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; + label?: string; + width?: number; + height?: number; +} + +const defaultProps: Props = { + color: 'default', + disabled: false, + size: 'large', + variant: 'round', + icon: 'add', + iconTheme: 'Filled', + label: 'extended', + width: 56, + height: 56, +}; + +export const Fab: React.SFC = (props: Props) => { + const { height, icon, label, iconTheme, variant, width, ...other } = props; + return ( + + + {variant === 'extended' ? label : null} + + ); +}; + +Fab.defaultProps = defaultProps; + +addPropertyControls(Fab, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['default', 'inherit', 'primary', 'secondary'], + }, + disabled: { + type: ControlType.Boolean, + title: 'Disabled', + }, + href: { + type: ControlType.String, + title: 'Href', + }, + size: { + type: ControlType.Enum, + title: 'Size', + options: ['small', 'medium', 'large'], + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: ['round', 'extended'], + }, + 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 new file mode 100644 index 00000000000000..af4ebb1e609cdd --- /dev/null +++ b/framer/Material-UI.framerfx/code/Icon.tsx @@ -0,0 +1,51 @@ +import * as React from 'react'; +import { pascal } from 'naming-style'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import * as Icons from '@material-ui/icons'; + +interface Props { + color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'error' | 'disabled'; + icon?: string; + theme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + color: 'inherit', + icon: 'add', + theme: 'Filled', + width: 24, + height: 24, +}; + +export const Icon: React.SFC = (props: Props) => { + const { height, icon: iconProp, theme, width, ...other } = props; + const iconName = `${iconProp && pascal(iconProp)}${theme === 'Filled' ? '' : theme}`; + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + const Icon = Object.keys(Icons).includes(iconName) ? Icons[iconName] : undefined; + + return Icon ? : null; +}; + +Icon.defaultProps = defaultProps; + +addPropertyControls(Icon, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['inherit', 'primary', 'secondary', 'action', 'error', 'disabled'], + }, + 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 new file mode 100644 index 00000000000000..e02795d1725dc4 --- /dev/null +++ b/framer/Material-UI.framerfx/code/IconButton.tsx @@ -0,0 +1,84 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiIconButton from '@material-ui/core/IconButton'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiBadge from '@material-ui/core/Badge'; +import { Icon } from './Icon'; + +interface Props { + color?: 'default' | 'inherit' | 'primary' | 'secondary'; + disabled?: boolean; + size?: 'small' | 'medium'; + icon?: string; + iconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; + badgeContent?: string; + badgeColor?: 'default' | 'primary' | 'secondary' | 'error'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + color: 'default', + disabled: false, + size: 'medium', + icon: 'favorite', + iconTheme: 'Filled', + badgeContent: '', + badgeColor: 'default', + width: 48, + height: 48, +}; + +export const IconButton: React.SFC = (props: Props) => { + const { badgeColor, badgeContent, height, icon, iconTheme, width, ...other } = props; + const IconBadge = + badgeContent === '' ? ( + + ) : ( + + + + ); + + return {IconBadge}; +}; + +IconButton.defaultProps = defaultProps; + +addPropertyControls(IconButton, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['default', 'inherit', 'primary', 'secondary'], + }, + disabled: { + type: ControlType.Boolean, + title: 'Disabled', + }, + size: { + type: ControlType.Enum, + title: 'Size', + options: ['small', 'medium'], + }, + 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 new file mode 100644 index 00000000000000..1a59a4c3cd62a3 --- /dev/null +++ b/framer/Material-UI.framerfx/code/LinearProgress.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiLinearProgress from '@material-ui/core/LinearProgress'; + +interface Props { + color?: 'primary' | 'secondary'; + value?: number; + valueBuffer?: number; + variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + color: 'primary', + value: 75, + valueBuffer: 75, + variant: 'determinate', + width: 200, + height: 5, +}; + +export const LinearProgress: React.SFC = (props: Props) => { + const { width, height, ...other } = props; + const style: React.CSSProperties = {}; + + return ; +}; + +LinearProgress.defaultProps = defaultProps; + +addPropertyControls(LinearProgress, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary'], + }, + value: { + type: ControlType.Number, + title: 'Value', + hidden: function hidden(props) { + return props.variant === 'indeterminate' || props.variant === 'query'; + }, + }, + valueBuffer: { + type: ControlType.Number, + title: 'Value buffer', + hidden: function hidden(props) { + return props.variant !== 'buffer'; + }, + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: ['determinate', 'indeterminate', 'buffer', 'query'], + }, +}); diff --git a/framer/Material-UI.framerfx/code/List.tsx b/framer/Material-UI.framerfx/code/List.tsx new file mode 100644 index 00000000000000..5359c6108634e3 --- /dev/null +++ b/framer/Material-UI.framerfx/code/List.tsx @@ -0,0 +1,148 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType, Frame, Scroll } from 'framer'; +import { ListItem } from './ListItem'; + +interface Props { + alignItems?: 'flex-start' | 'center'; + autoFocus?: boolean; + dense?: boolean; + disabled?: boolean; + disableGutters?: boolean; + divider?: boolean; + width?: number; + height?: number; + inset?: boolean; + labels?: string[]; + secondaryLabels?: string[]; + primaryAction?: 'none' | 'icon' | 'avatar' | 'checkbox'; + primaryIcon?: string; + imageFile?: string; + imageUrl?: string; + secondaryAction?: 'none' | 'icon' | 'iconButton' | 'checkbox' | 'switch'; + secondaryIcon?: string; +} + +const defaultProps: Props = { + alignItems: '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', + primaryIcon: 'star', + imageFile: '', + imageUrl: '', + secondaryIcon: '', +}; + +export const List: React.SFC = (props: Props) => { + const { height, labels, secondaryLabels, width, ...other } = props; + + return ( + + + {labels.map((label, index) => ( + + ))} + + + ); + + return ; +}; + +List.defaultProps = defaultProps; + +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 && props.primaryAction !== 'avatar'; + }, + }, + imageUrl: { + type: ControlType.String, + title: 'Image URL', + hidden: function hidden(props) { + return props.imageFile !== '' || (props.primaryAction && 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 !== 'icon' && 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 new file mode 100644 index 00000000000000..80a4003b8ab21c --- /dev/null +++ b/framer/Material-UI.framerfx/code/ListItem.tsx @@ -0,0 +1,232 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItem from '@material-ui/core/ListItem'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemIcon from '@material-ui/core/ListItemIcon'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemAvatar from '@material-ui/core/ListItemAvatar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemText from '@material-ui/core/ListItemText'; +import { Avatar } from './Avatar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiCheckbox from '@material-ui/core/Checkbox'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiSwitch from '@material-ui/core/Switch'; +import { Icon } from './Icon'; +import { IconButton } from './IconButton'; + +interface Props { + alignItems?: 'flex-start' | 'center'; + autoFocus?: boolean; + button?: boolean; + dense?: boolean; + disabled?: boolean; + disableGutters?: boolean; + divider?: boolean; + selected?: boolean; + width?: number; + height?: number; + inset?: boolean; + label?: string; + secondaryLabel?: string; + primaryAction?: 'none' | 'icon' | 'avatar' | 'checkbox'; + primaryIcon?: string; + imageFile?: string; + imageUrl?: string; + secondaryAction?: 'none' | 'iconButton' | 'checkbox' | 'switch'; + secondaryIcon?: string; +} + +const defaultProps: Props = { + alignItems: 'center', + autoFocus: false, + button: false, + dense: false, + disabled: false, + disableGutters: false, + divider: false, + selected: false, + width: 568, + height: 48, + inset: false, + label: 'Primary label', + secondaryLabel: '', + primaryAction: 'icon', + primaryIcon: 'star', + imageFile: '', + imageUrl: '', + secondaryIcon: '', +}; + +export const ListItem: React.SFC = (props: Props) => { + const { + 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; + } + + switch (secondaryAction) { + case 'iconButton': + secondary = ; + break; + case 'checkbox': + secondary = ; + break; + case 'switch': + secondary = ; + break; + } + + return ( + + {primary} + + {/* MuiListItemSecondaryAction causes the text to have a bullet. No idea why! */} + {/* */} + {secondary} + {/* */} + + ); +}; + +ListItem.defaultProps = defaultProps; + +addPropertyControls(ListItem, { + alignItems: { + type: ControlType.Enum, + title: 'Align items', + options: ['flex-start', 'center'], + }, + 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', + }, + divider: { + type: ControlType.Boolean, + title: 'Divider', + }, + 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: 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 && props.primaryAction !== 'avatar'; + }, + }, + imageUrl: { + type: ControlType.String, + title: 'Image URL', + hidden: function hidden(props) { + return props.imageFile !== '' || (props.primaryAction && props.primaryAction !== 'avatar'); + }, + }, + secondaryAction: { + type: ControlType.Enum, + title: 'Secondary action', + options: ['none', 'iconButton', 'checkbox', 'switch'], + }, + secondaryIcon: { + type: ControlType.String, + title: 'Secondary icon', + hidden: function hidden(props) { + return props.secondaryAction !== 'icon' && props.secondaryAction !== 'iconButton'; + }, + }, +}); diff --git a/framer/Material-UI.framerfx/code/MediaCard.tsx b/framer/Material-UI.framerfx/code/MediaCard.tsx new file mode 100644 index 00000000000000..90fdbd8b74b422 --- /dev/null +++ b/framer/Material-UI.framerfx/code/MediaCard.tsx @@ -0,0 +1,151 @@ +import * as React from 'react'; +import { PropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Card from '@material-ui/core/Card'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import CardActionArea from '@material-ui/core/CardActionArea'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import CardActions from '@material-ui/core/CardActions'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import CardContent from '@material-ui/core/CardContent'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import CardMedia from '@material-ui/core/CardMedia'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiButton from '@material-ui/core/Button'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiTypography from '@material-ui/core/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 Material-UI, 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 new file mode 100644 index 00000000000000..88f0ecc95ac9a0 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Paper.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiPaper from '@material-ui/core/Paper'; + +interface Props { + elevation?: number; + square?: boolean; + width?: number; + height?: number; +} + +const defaultProps: Props = { + elevation: 2, + square: false, + width: 100, + height: 100, +}; + +export const Paper: React.SFC = (props: Props) => { + const { width, height, ...other } = props; + + return ; +}; + +Paper.defaultProps = defaultProps; + +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 new file mode 100644 index 00000000000000..65aa36ae13c3fc --- /dev/null +++ b/framer/Material-UI.framerfx/code/Radio.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiRadio from '@material-ui/core/Radio'; + +interface Props { + color?: 'primary' | 'secondary' | 'default'; + disabled?: boolean; + label?: string; + width?: number; + height?: number; +} + +export function Radio(props) { + const { label, ...other } = props; + + return } label={label} {...other} />; +} + +Radio.defaultProps = { + color: 'secondary', + disabled: false, + label: 'Radio', + width: '100%', + height: 42, +}; + +addPropertyControls(Radio, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary', 'default'], + }, + 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 new file mode 100644 index 00000000000000..ce52dcdd4398b6 --- /dev/null +++ b/framer/Material-UI.framerfx/code/RadioGroup.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiRadioGroup from '@material-ui/core/RadioGroup'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiFormLabel from '@material-ui/core/FormLabel'; +import { Radio } from './Radio'; + +export function RadioGroup(props) { + 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 new file mode 100644 index 00000000000000..af5b8e64a1baf1 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Slider.tsx @@ -0,0 +1,77 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiSlider from '@material-ui/core/Slider'; + +interface Props { + color?: 'primary' | 'secondary'; + disabled?: boolean; + max?: number; + min?: number; + orientation?: 'horizontal' | 'vertical'; + step?: number; + track?: 'normal' | false | 'inverted'; + valueLabelDisplay?: 'on' | 'auto' | 'off'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + color: 'primary', + disabled: false, + max: 100, + min: 0, + orientation: 'horizontal', + step: 1, + track: 'normal', + valueLabelDisplay: 'off', + width: 160, + height: 24, +}; + +export const Slider: React.SFC = (props: Props) => { + const { width, height, ...other } = props; + return ; +}; + +Slider.defaultProps = defaultProps; + +addPropertyControls(Slider, { + color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary'], + }, + disabled: { + type: ControlType.Boolean, + title: 'Disabled', + }, + 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', + }, + track: { + type: ControlType.Enum, + title: 'Track', + options: ['normal', false, 'inverted'], + }, + valueLabelDisplay: { + type: ControlType.Enum, + title: 'Value label display', + options: ['on', 'auto', 'off'], + }, +}); diff --git a/framer/Material-UI.framerfx/code/SnackbarContent.tsx b/framer/Material-UI.framerfx/code/SnackbarContent.tsx new file mode 100644 index 00000000000000..de8c947ba04d54 --- /dev/null +++ b/framer/Material-UI.framerfx/code/SnackbarContent.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiSnackbarContent from '@material-ui/core/SnackbarContent'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiButton from '@material-ui/core/Button'; + +interface Props { + message?: string; + width?: number; + height?: number; + label?: string; +} + +const defaultProps: Props = { + message: 'I love candy. I love cookies. I love cupcakes.', + width: 568, + height: 48, + label: 'Nom nom nom', +}; + +export const SnackbarContent: React.SFC = (props: Props) => { + const { height, label, width, ...other } = props; + const action = + label !== '' ? ( + + {label} + + ) : ( + undefined + ); + + return ; +}; + +SnackbarContent.defaultProps = defaultProps; + +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 new file mode 100644 index 00000000000000..ffd5d2b026d198 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Switch.tsx @@ -0,0 +1,68 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiSwitch from '@material-ui/core/Switch'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +export function Switch(props) { + const { checked: checkedProp, label, onChange, size, ...other } = props; + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + + const [checked, setChecked] = React.useState(false); + + const handleChange = (event: React.ChangeEvent) => { + if (onChange) { + onChange(event); + } + setChecked((event.target as HTMLInputElement).checked); + }; + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + React.useEffect(() => { + setChecked(checkedProp); + }, [checkedProp]); + + const control = ; + + return ; +} + +Switch.defaultProps = { + checked: false, + color: 'secondary', + disabled: false, + size: 'medium', + label: 'Switch', + width: 100, + height: 38, +}; + +addPropertyControls(Switch, { + checked: { + type: ControlType.Boolean, + title: 'Checked', + }, + color: { + type: ControlType.Enum, + title: 'Color', + options: ['primary', 'secondary', 'default'], + }, + disabled: { + type: ControlType.Boolean, + title: 'Disabled', + }, + size: { + type: ControlType.Enum, + title: 'Size', + options: ['small', 'medium'], + }, + label: { + type: ControlType.String, + title: 'Label', + }, +}); diff --git a/framer/Material-UI.framerfx/code/Tabs.tsx b/framer/Material-UI.framerfx/code/Tabs.tsx new file mode 100644 index 00000000000000..ea1485cd778999 --- /dev/null +++ b/framer/Material-UI.framerfx/code/Tabs.tsx @@ -0,0 +1,115 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiAppBar from '@material-ui/core/AppBar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiTabs from '@material-ui/core/Tabs'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiTab from '@material-ui/core/Tab'; +import { Icon } from './Icon'; + +interface Props { + centered?: boolean; + indicatorColor?: 'secondary' | 'primary'; + scrollButtons?: 'auto' | 'desktop' | 'on' | 'off'; + textColor?: 'secondary' | 'primary' | 'inherit'; + variant?: 'standard' | 'scrollable' | 'fullWidth'; + appBarColor?: 'default' | 'primary' | 'secondary' | 'inherit'; + icons?: string[]; + labels?: string[]; + width?: number; + height?: number; +} + +const defaultProps: Props = { + centered: false, + indicatorColor: 'secondary', + scrollButtons: 'auto', + textColor: 'inherit', + variant: 'standard', + icons: ['phone', 'favorite', 'person_pin'], + labels: ['Tab 1', 'Tab 2', 'Tab 3'], + width: 500, + height: 64, +}; + +export const Tabs: React.SFC = (props: Props) => { + const { appBarColor, labels, icons, width, height, ...other } = props; + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + const [value, setValue] = React.useState(0); + + const handleChange = (event: React.ChangeEvent<{}>, 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 = defaultProps; + +addPropertyControls(Tabs, { + centered: { + type: ControlType.Boolean, + title: 'Centered', + }, + indicatorColor: { + type: ControlType.Enum, + title: 'Indicator color', + options: ['secondary', 'primary'], + }, + scrollButtons: { + type: ControlType.Enum, + title: 'Scroll buttons', + options: ['auto', 'desktop', 'on', 'off'], + }, + textColor: { + type: ControlType.Enum, + title: 'Text color', + options: ['secondary', 'primary', 'inherit'], + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: ['standard', 'scrollable', 'fullWidth'], + }, + 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 new file mode 100644 index 00000000000000..9275aaf5e35859 --- /dev/null +++ b/framer/Material-UI.framerfx/code/TextField.tsx @@ -0,0 +1,87 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiTextField from '@material-ui/core/TextField'; + +interface Props { + autoFocus?: boolean; + disabled?: boolean; + error?: boolean; + fullWidth?: boolean; + helperText?: string; + label?: string; + multiline?: boolean; + placeholder?: string; + required?: boolean; + variant?: 'standard' | 'outlined' | 'filled'; + width?: number; + height?: number; +} + +const defaultProps: Props = { + autoFocus: false, + disabled: false, + error: false, + fullWidth: true, + helperText: '', + label: 'TextField', + multiline: false, + required: false, + variant: 'standard', + width: 280, + height: 56, +}; + +export const TextField: React.SFC = (props: Props) => { + const { width, height, ...other } = props; + const style: React.CSSProperties = {}; + + return ; +}; + +TextField.defaultProps = defaultProps; + +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: ['standard', 'outlined', 'filled'], + }, +}); diff --git a/framer/Material-UI.framerfx/code/ThemeProvider.tsx b/framer/Material-UI.framerfx/code/ThemeProvider.tsx new file mode 100644 index 00000000000000..75be9bd42904bf --- /dev/null +++ b/framer/Material-UI.framerfx/code/ThemeProvider.tsx @@ -0,0 +1,60 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; + +interface Props { + paletteType?: 'dark' | 'light'; + primary?: string; + secondary?: string; + error?: string; +} + +const defaultProps: Props = { + paletteType: 'light', + primary: '#3f51b5', + secondary: '#f50057', + error: '#f44336', +}; + +export const Theme: React.SFC = (props: Props) => { + const { children, error, paletteType, primary, secondary, ...other } = props; + + const theme = createMuiTheme({ + palette: { + type: paletteType, + primary: { main: primary }, + secondary: { main: secondary }, + error: { main: error }, + }, + }); + + return ( + + {children} + + ); +}; + +Theme.defaultProps = defaultProps; + +addPropertyControls(Theme, { + paletteType: { + 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', + }, +}); diff --git a/framer/Material-UI.framerfx/code/Typography.tsx b/framer/Material-UI.framerfx/code/Typography.tsx new file mode 100644 index 00000000000000..52ba496255dd4b --- /dev/null +++ b/framer/Material-UI.framerfx/code/Typography.tsx @@ -0,0 +1,104 @@ +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiTypography from '@material-ui/core/Typography'; + +interface Props { + align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; + color?: + | 'initial' + | 'inherit' + | 'primary' + | 'secondary' + | 'textPrimary' + | 'textSecondary' + | 'error'; + noWrap?: boolean; + variant?: + | 'h1' + | 'h2' + | 'h3' + | 'h4' + | 'h5' + | 'h6' + | 'subtitle1' + | 'subtitle2' + | 'body1' + | 'body2' + | 'caption' + | 'button' + | 'overline' + | 'srOnly' + | 'inherit'; + label?: string; + width?: number; + height?: number; +} + +const defaultProps: Props = { + align: 'inherit', + color: 'initial', + noWrap: false, + variant: 'body1', + label: 'Typography', + width: 100, + height: 38, +}; + +export const Typography: React.SFC = (props: Props) => { + const { height, label, width, ...other } = props; + return {label}; +}; + +Typography.defaultProps = defaultProps; + +addPropertyControls(Typography, { + align: { + type: ControlType.Enum, + title: 'Align', + options: ['inherit', 'left', 'center', 'right', 'justify'], + }, + color: { + type: ControlType.Enum, + title: 'Color', + options: [ + 'initial', + 'inherit', + 'primary', + 'secondary', + 'textPrimary', + 'textSecondary', + 'error', + ], + }, + noWrap: { + type: ControlType.Boolean, + title: 'No wrap', + }, + variant: { + type: ControlType.Enum, + title: 'Variant', + options: [ + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'subtitle1', + 'subtitle2', + 'body1', + 'body2', + 'caption', + 'button', + 'overline', + 'srOnly', + 'inherit', + ], + }, + label: { + type: ControlType.String, + title: 'Label', + }, +}); 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 new file mode 100644 index 00000000000000..1d3e859af6de87 Binary files /dev/null and b/framer/Material-UI.framerfx/design/assets/blue_sky_blue_water-2560x1600.jpg differ diff --git a/framer/Material-UI.framerfx/design/document.json b/framer/Material-UI.framerfx/design/document.json new file mode 100644 index 00000000000000..165581d17b8a1d --- /dev/null +++ b/framer/Material-UI.framerfx/design/document.json @@ -0,0 +1,6773 @@ +{ + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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 + }, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "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.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, + "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.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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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" + }, + "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, + "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.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, + "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.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, + "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.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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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" + }, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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%)" + }, + "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, + "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.10000000000000001, + "centerAnchorY" : 0.081521739130434784, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "default", + "disabled" : 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, + "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.092810457516339873, + "centerAnchorY" : 0.16459627329192547, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "primary", + "disabled" : 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, + "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.11895424836601307, + "centerAnchorY" : 0.24068322981366461, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "secondary", + "disabled" : 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, + "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.26666666666666666, + "centerAnchorY" : 0.086956521739130432, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "default", + "disabled" : 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, + "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.2803921568627451, + "centerAnchorY" : 0.16459627329192547, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "primary", + "disabled" : 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, + "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.30718954248366015, + "centerAnchorY" : 0.24534161490683229, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "secondary", + "disabled" : 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, + "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.47254901960784312, + "centerAnchorY" : 0.086180124223602481, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "default", + "disabled" : 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, + "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.48692810457516339, + "centerAnchorY" : 0.16459627329192547, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "primary", + "disabled" : 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, + "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.49215686274509801, + "centerAnchorY" : 0.2391304347826087, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/Button.tsx_Button", + "codeComponentProps" : { + "color" : "secondary", + "disabled" : 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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "disabled" : false, + "error" : true, + "fullWidth" : true, + "helperText" : "Helper text", + "label" : "TextField", + "multiline" : false, + "placeholder" : "Text", + "required" : false, + "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, + "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.78169934640522876, + "centerAnchorY" : 0.41459627329192544, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/TextField.tsx_TextField", + "codeComponentProps" : { + "autoFocus" : false, + "disabled" : false, + "error" : false, + "fullWidth" : true, + "helperText" : "", + "label" : "TextField", + "multiline" : false, + "placeholder" : "Text", + "required" : false, + "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, + "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.78431372549019607, + "centerAnchorY" : 0.3105590062111801, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/TextField.tsx_TextField", + "codeComponentProps" : { + "autoFocus" : false, + "disabled" : false, + "error" : false, + "fullWidth" : true, + "helperText" : "", + "label" : "TextField", + "multiline" : false, + "placeholder" : "Text", + "required" : false, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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" + }, + "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" + }, + "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", + "paletteType" : "light", + "primary" : "#3577CB", + "secondary" : "#CA2B51" + }, + "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" : 604, + "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" : -1254, + "visible" : true, + "width" : 804, + "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.51058631921824105, + "centerAnchorY" : 1.0134892086330936, + "children" : [ + + ], + "clip" : true, + "codeComponentIdentifier" : ".\/AppBar.tsx_AppBar", + "codeComponentProps" : { + "action1" : "", + "action2" : "", + "icon1" : "", + "icon1Badge" : "", + "icon2" : "", + "icon2Badge" : "", + "leftIcon" : "", + "title" : "Material-UI" + }, + "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, + "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" : ".\/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, + "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" : ".\/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, + "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" : ".\/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, + "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.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" : "Material-UI" + }, + "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, + "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" : ".\/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, + "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.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, + "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.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, + "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.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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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 Material-UI, 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 + }, + "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" : "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 Material-UI, 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, + "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" : 123, + "centerAnchorX" : 0.64169787765293385, + "centerAnchorY" : 0.77500000000000002, + "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" : "ddt2Dw_RN", + "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" : 187, + "rotation" : 0, + "top" : null, + "visible" : true, + "width" : 200, + "widthType" : 0 + }, + { + "__class" : "CodeComponentNode", + "aspectRatio" : null, + "bottom" : 170, + "centerAnchorX" : 0.64169787765293385, + "centerAnchorY" : 0.71250000000000002, + "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" : 187, + "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, + "disabled" : false, + "error" : false, + "fullWidth" : true, + "helperText" : "", + "label" : "TextField", + "multiline" : true, + "placeholder" : "", + "required" : false, + "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, + "disabled" : false, + "error" : false, + "fullWidth" : true, + "helperText" : "", + "label" : "TextField", + "multiline" : true, + "placeholder" : "", + "required" : false, + "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, + "disabled" : false, + "error" : false, + "fullWidth" : true, + "helperText" : "", + "label" : "TextField", + "multiline" : true, + "placeholder" : "", + "required" : false, + "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" + }, + "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" + }, + "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, + "blurEnabled" : 0, + "blurType" : "layer", + "borderBottom" : 1, + "borderColor" : "#222", + "borderEnabled" : 0, + "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" : "Material-UI" + }, + "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 + } + ], + "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 new file mode 100644 index 00000000000000..deb744cc24740e Binary files /dev/null and b/framer/Material-UI.framerfx/metadata/artwork.png differ diff --git a/framer/Material-UI.framerfx/metadata/icon.png b/framer/Material-UI.framerfx/metadata/icon.png new file mode 100644 index 00000000000000..96838e1dffa408 Binary files /dev/null and b/framer/Material-UI.framerfx/metadata/icon.png differ diff --git a/framer/Material-UI.framerfx/package.json b/framer/Material-UI.framerfx/package.json new file mode 100644 index 00000000000000..1bfbf40a077cf4 --- /dev/null +++ b/framer/Material-UI.framerfx/package.json @@ -0,0 +1,31 @@ +{ + "name": "@framer/material-ui.material-ui", + "author": "Material-UI Team", + "version": "1.0.0", + "description": "Material-UI Framer components", + "repository": { + "type": "git", + "url": "https://github.com/mui-org/material-ui.git" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/mui-org/material-ui/issues" + }, + "homepage": "http://material-ui.com/", + "devDependencies": { + "@types/react": "^16.8" + }, + "dependencies": { + "@material-ui/core": "^4.5.0", + "@material-ui/icons": "^4.4.0", + "naming-style": "^1.0.0" + }, + "peerDependencies": { + "framer": "^1", + "react": "^16.8.0" + }, + "framer": { + "displayName": "Material-UI", + "id": "782bb5b9-336e-4307-af36-8a9b1420594c" + } +} \ No newline at end of file diff --git a/framer/Material-UI.framerfx/yarn.lock b/framer/Material-UI.framerfx/yarn.lock new file mode 100644 index 00000000000000..4eb9598806662e --- /dev/null +++ b/framer/Material-UI.framerfx/yarn.lock @@ -0,0 +1,343 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" + integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== + dependencies: + regenerator-runtime "^0.13.2" + +"@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2": + version "7.6.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f" + integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA== + dependencies: + regenerator-runtime "^0.13.2" + +"@emotion/hash@^0.7.1": + version "0.7.2" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.2.tgz#53211e564604beb9befa7a4400ebf8147473eeef" + integrity sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q== + +"@material-ui/core@^4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.5.0.tgz#7e57cc40988c71b6340e3b2569b47dbac1820351" + integrity sha512-UHVAjU+1uDtA+OMBNBHb4RlCZOu514XeYPafNJv+GTdXBDr1SCPK7yqRE6TV1/bulxlDusTgu5Q6BAUgpmO4MA== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles" "^4.5.0" + "@material-ui/system" "^4.5.0" + "@material-ui/types" "^4.1.1" + "@material-ui/utils" "^4.4.0" + "@types/react-transition-group" "^4.2.0" + clsx "^1.0.2" + convert-css-length "^2.0.1" + deepmerge "^4.0.0" + hoist-non-react-statics "^3.2.1" + is-plain-object "^3.0.0" + normalize-scroll-left "^0.2.0" + popper.js "^1.14.1" + prop-types "^15.7.2" + react-transition-group "^4.3.0" + +"@material-ui/icons@^4.4.0": + version "4.4.3" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.4.3.tgz#5d4346ddbb2673a1b57ebc78fd6d50bcd88711db" + integrity sha512-HVVvUyc/78kmaBd93LkfWyGkXMM+zOMKzUfulWXxaV/fFAZ3N0pD0oHjWUd94zrOoF3tZP9JC7EPlIpIcZSNow== + dependencies: + "@babel/runtime" "^7.4.4" + +"@material-ui/styles@^4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.5.0.tgz#4e591b8d44c7ecce318634bd8ac652499b6c277a" + integrity sha512-O0NSAECHK9f3DZK6wy56PZzp8b/7KSdfpJs8DSC7vnXUAoMPCTtchBKLzMtUsNlijiJFeJjSxNdQfjWXgyur5A== + dependencies: + "@babel/runtime" "^7.4.4" + "@emotion/hash" "^0.7.1" + "@material-ui/types" "^4.1.1" + "@material-ui/utils" "^4.1.0" + clsx "^1.0.2" + csstype "^2.5.2" + deepmerge "^4.0.0" + hoist-non-react-statics "^3.2.1" + jss "^10.0.0" + jss-plugin-camel-case "^10.0.0" + jss-plugin-default-unit "^10.0.0" + jss-plugin-global "^10.0.0" + jss-plugin-nested "^10.0.0" + jss-plugin-props-sort "^10.0.0" + jss-plugin-rule-value-function "^10.0.0" + jss-plugin-vendor-prefixer "^10.0.0" + prop-types "^15.7.2" + +"@material-ui/system@^4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.5.0.tgz#3235f5d7da8b8af4df425e4f065990c16dee8097" + integrity sha512-vR0PbMTzLnuuVCoYNQ13zyhLa/4s/UA9P9JbNuHBOOkfrHn53ShINiG0v05EgfwizfULLtc7mNvsGAgIyyp/hQ== + dependencies: + "@babel/runtime" "^7.4.4" + deepmerge "^4.0.0" + prop-types "^15.7.2" + +"@material-ui/types@^4.1.1": + version "4.1.1" + resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b" + integrity sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ== + dependencies: + "@types/react" "*" + +"@material-ui/utils@^4.1.0": + version "4.1.0" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.1.0.tgz#45fd6698db49f3528fe45c922c496235021d76ec" + integrity sha512-muwmVU799tzPjzb+Q5E/CTDle0rXwkCAdvMVyU0BfbJhenkUsFmuYiCmbvMVOU1m6F1S5HWfXz8EP4pXwwAvrw== + dependencies: + "@babel/runtime" "^7.2.0" + prop-types "^15.7.2" + react-is "^16.8.0" + +"@material-ui/utils@^4.4.0": + version "4.4.0" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.4.0.tgz#9275421e2798a067850d201212d46f12725828ad" + integrity sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg== + dependencies: + "@babel/runtime" "^7.4.4" + prop-types "^15.7.2" + react-is "^16.8.6" + +"@types/prop-types@*": + version "15.5.6" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c" + +"@types/react-transition-group@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.3.tgz#4924133f7268694058e415bf7aea2d4c21131470" + integrity sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA== + dependencies: + "@types/react" "*" + +"@types/react@*": + version "16.4.18" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.18.tgz#2e28a2e7f92d3fa7d6a65f2b73275c3e3138a13d" + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + +"@types/react@^16.8": + version "16.9.4" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.4.tgz#de8cf5e5e2838659fb78fa93181078469eeb19fc" + integrity sha512-ItGNmJvQ0IvWt8rbk5PLdpdQhvBVxAaXI9hDlx7UMd8Ie1iMIuwMNiKeTfmVN517CdplpyXvA22X4zm4jGGZnw== + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + +clsx@^1.0.2: + version "1.0.4" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec" + integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg== + +convert-css-length@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c" + integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg== + +css-vendor@^2.0.6: + version "2.0.7" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda" + integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg== + dependencies: + "@babel/runtime" "^7.6.2" + is-in-browser "^1.0.2" + +csstype@^2.2.0, csstype@^2.5.2: + version "2.5.7" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff" + +csstype@^2.6.5, csstype@^2.6.6: + version "2.6.7" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" + integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ== + +deepmerge@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.0.0.tgz#3e3110ca29205f120d7cb064960a39c3d2087c09" + integrity sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww== + +dom-helpers@^5.0.1: + version "5.1.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.0.tgz#57a726de04abcc2a8bbfe664b3e21c584bde514e" + integrity sha512-zRRYDhpiKuAJHasOqCm7lBnsd22nrM4+OYI4ASWCxen+ocTMl7BIAKgGag97TlLiTl6rrau5aPe1VGUm9jQBng== + dependencies: + "@babel/runtime" "^7.5.5" + csstype "^2.6.6" + +hoist-non-react-statics@^3.2.1: + version "3.3.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" + integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== + dependencies: + react-is "^16.7.0" + +hyphenate-style-name@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" + integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ== + +is-in-browser@^1.0.2, is-in-browser@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" + +is-plain-object@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928" + integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg== + dependencies: + isobject "^4.0.0" + +isobject@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0" + integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA== + +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + +jss-plugin-camel-case@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248" + integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA== + dependencies: + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.0.0" + +jss-plugin-default-unit@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3" + integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0" + +jss-plugin-global@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6" + integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0" + +jss-plugin-nested@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b" + integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0" + tiny-warning "^1.0.2" + +jss-plugin-props-sort@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18" + integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0" + +jss-plugin-rule-value-function@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e" + integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.0.0" + +jss-plugin-vendor-prefixer@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb" + integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw== + dependencies: + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.6" + jss "10.0.0" + +jss@10.0.0, jss@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2" + integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ== + dependencies: + "@babel/runtime" "^7.3.1" + csstype "^2.6.5" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + +loose-envify@^1.3.1, loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + +naming-style@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/naming-style/-/naming-style-1.0.0.tgz#0b0299b9a5122c61c971461d435f16fddb9ecd3d" + +normalize-scroll-left@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz#9445d74275f303cc661e113329aefa492f58114c" + integrity sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA== + +object-assign@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" + +popper.js@^1.14.1: + version "1.14.4" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6" + +prop-types@^15.6.2: + version "15.6.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" + dependencies: + loose-envify "^1.3.1" + object-assign "^4.1.1" + +prop-types@^15.7.2: + version "15.7.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + +react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" + integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== + +react-is@^16.8.6: + version "16.10.2" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab" + integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA== + +react-transition-group@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683" + integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + +regenerator-runtime@^0.13.2: + version "0.13.3" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" + integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== + +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== diff --git a/framer/package.json b/framer/package.json new file mode 100644 index 00000000000000..66d607af9056a0 --- /dev/null +++ b/framer/package.json @@ -0,0 +1,23 @@ +{ + "name": "framer", + "version": "1.0.0", + "description": "Builds Material-UI for Framer X", + "main": "index.js", + "repository": "https://github.com/mui-org/material-ui", + "author": "Material-UI Team", + "license": "MIT", + "private": true, + "dependencies": { + "case": "1.6.2", + "deepmerge": "^4.0.0", + "docs": "^4.0.0", + "mustache": "^3.1.0", + "react-docgen": "^5.0.0-beta.1" + }, + "scripts": { + "build": "yarn build:core && yarn build:styles && yarn prettier", + "build:core": "cross-env BABEL_ENV=test babel-node --config-file ../babel.config.js ./scripts/buildFramer.js ../packages/material-ui/src ./Material-UI.framerfx/code", + "build:styles": "cross-env BABEL_ENV=test babel-node --config-file ../babel.config.js ./scripts/buildFramer.js ../packages/material-ui-styles/src ./Material-UI.framerfx/code", + "prettier": "prettier --write --config ../prettier.config.js './**/*.{js,tsx}'" + } +} \ No newline at end of file diff --git a/framer/scripts/additionalProps.js b/framer/scripts/additionalProps.js new file mode 100644 index 00000000000000..f8cffc1fe51e6b --- /dev/null +++ b/framer/scripts/additionalProps.js @@ -0,0 +1,342 @@ +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; + }, + }, + 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'" }, + }, + error: { + type: { name: 'color' }, + defaultValue: { value: componentSettings[component].propValues.error }, + }, + 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 && props.primaryAction !== 'avatar'; + }, + }, + defaultValue: { value: componentSettings[component].propValues.imageFile }, + }, + imageUrl: { + type: { + name: 'string', + title: "'Image URL'", + hidden(props) { + return ( + props.imageFile !== '' || (props.primaryAction && 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 }, + }, + paletteType: { + type: { name: 'enum', value: [{ value: "'dark'" }, { value: "'light'" }] }, + description: 'Theme palette type', + defaultValue: { value: "'light'" }, + }, + primary: { + type: { name: 'color' }, + defaultValue: { value: componentSettings[component].propValues.primary }, + }, + 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' || props.variant === 'query'; + }, + }, + defaultValue: { value: componentSettings[component].propValues.progressValue }, + }, + secondary: { + type: { name: 'color' }, + defaultValue: { value: componentSettings[component].propValues.secondary }, + }, + secondaryAction: { + type: { + name: 'enum', + value: [ + { value: "'none'" }, + { value: "'iconButton'" }, + { value: "'checkbox'" }, + { value: "'switch'" }, + ], + }, + }, + secondaryIcon: { + type: { + name: 'string', + hidden(props) { + return props.secondaryAction !== 'icon' && 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: 'number' }, + 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 new file mode 100644 index 00000000000000..b3776eacde35f3 --- /dev/null +++ b/framer/scripts/buildFramer.js @@ -0,0 +1,267 @@ +/* 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]; + prop.name = propName; + + if (ignore(reactAPI, prop)) { + return; + } + + /** + * TS Interface + */ + const propTypeTS = Object.assign({}, prop.type); + + // TODO: Refactor as switch? + if (propTypeTS.name === 'bool') { + propTypeTS.name = 'boolean'; + } + if (propTypeTS.name === 'color') { + propTypeTS.name = 'string'; + } + if (propTypeTS.name === 'file') { + propTypeTS.name = 'string'; + } + if (propTypeTS.name === 'image') { + propTypeTS.name = 'string'; + } + if (propTypeTS.name === 'node') { + propTypeTS.name = 'React.ReactNode'; + } + if (propTypeTS.name === 'element') { + propTypeTS.name = 'React.ReactElement'; + } + if (propTypeTS.name === 'func') { + propTypeTS.name = '() => void'; + } + if (propTypeTS.name === 'array') { + propTypeTS.name = 'string[]'; + } + + tsInterface += ` ${propName}${propTypeTS.required ? '' : '?'}: ${ + propTypeTS.value ? `${options(propTypeTS, ' | ')}` : `${propTypeTS.name}` + };\n`; + + /** + * Default values + */ + if (prop.defaultValue) { + defaults += ` ${propName}: ${prop.defaultValue.value},\n`; + } + + /** + * Property controls + */ + const propTypeControls = Object.assign({}, prop.type); + + if (propTypeControls.name === 'bool') { + propTypeControls.name = 'boolean'; + } + + const { name, value, hidden, 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: ${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 new file mode 100644 index 00000000000000..56c49ef9a6f6f5 --- /dev/null +++ b/framer/scripts/framerConfig.js @@ -0,0 +1,326 @@ +// 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'], + propValues: { + // Note: MUI Avatar doesn't have the normal `color` prop. + backgroundColor: "'#4154af'", + textColor: "'#ffffff'", + icon: "'face'", + imageFile: "''", + imageUrl: "'https://i.pravatar.cc/300'", + label: "'MB'", + width: 40, + height: 40, + }, + template: 'avatar.txt', + }, + Badge: { + ignoredProps: [ + 'anchorOrigin', + 'children', + 'color', + 'disableFocusRipple', + 'invisible', + 'overlap', + ], + 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'], + propValues: { + icons: "['restore', 'favorite', 'location_on', 'folder']", + labels: "['Recents', 'Favorites', 'Nearby', 'Saved']", + width: 500, + height: 56, + }, + template: 'bottom_navigation.txt', + }, + Button: { + ignoredProps: ['children', 'disableFocusRipple'], + propValues: { + startIcon: "''", + startIconTheme: 'Filled', + endIcon: "''", + endIconTheme: 'Filled', + label: "'Button'", + width: 100, + height: 38, + }, + template: 'button.txt', + }, + Checkbox: { + ignoredProps: [ + 'checkedIcon', + 'icon', + 'indeterminate', + 'indeterminateIcon', + 'onChange', + 'required', + 'type', + 'value', + ], + propValues: { + label: "'Checkbox'", + width: 100, + height: 42, + checked: false, + }, + template: 'selection_control.txt', + }, + Chip: { + ignoredProps: ['avatar', 'children', 'onDelete'], + propValues: { + avatarImageFile: "''", + avatarImageUrl: "''", + clickable: true, + deletable: false, + deleteIcon: "''", + icon: "'star'", + iconTheme: 'Filled', + label: "'Chip'", + width: 100, + height: 32, + }, + template: 'chip.txt', + }, + CircularProgress: { + ignoredProps: ['disableShrink', 'size'], + propValues: { + width: 44, + height: 44, + size: 44, + thickness: 4, + progressValue: 75, + variant: "'static'", + }, + style: { + width: 'width', + height: 'height', + }, + template: 'circular_progress.txt', + }, + Fab: { + ignoredProps: ['children', 'disableFocusRipple'], + propValues: { + icon: "'add'", + iconTheme: 'Filled', + label: "'extended'", + width: 56, + height: 56, + }, + template: 'fab.txt', + }, + Icon: { + ignoredProps: ['children', 'fontSize'], + propValues: { + icon: "'add'", + theme: 'Filled', + width: 24, + height: 24, + }, + template: 'icon.txt', + }, + IconButton: { + ignoredProps: ['children', 'edge', 'disableRipple', 'disableFocusRipple'], + propValues: { + icon: "'favorite'", + iconTheme: 'Filled', + badgeContent: "''", + badgeColor: "'default'", + width: 48, + height: 48, + }, + template: 'icon_button.txt', + }, + ListItem: { + ignoredProps: ['children', 'ContainerComponent', 'ContainerProps'], + 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: [], + propValues: { + width: 200, + height: 5, + progressValue: 75, + valueBuffer: 75, + variant: "'determinate'", + }, + template: 'self_closing.txt', + }, + ThemeProvider: { + ignoredProps: ['theme'], + propValues: { + paletteType: 'light', + primary: "'#3f51b5'", + secondary: "'#f50057'", + error: "'#f44336'", + }, + template: 'theme_provider.txt', + }, + Paper: { + ignoredProps: [], + propValues: { + width: 100, + height: 100, + elevation: 2, + }, + template: 'paper.txt', + }, + Radio: { + ignoredProps: ['checked', 'checkedIcon', 'icon', 'onChange', 'required', 'type', 'value'], + propValues: { + label: "'Radio'", + width: "'100%'", + height: 42, + }, + 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: [ + 'defaultValue', + 'getAriaLabel', + 'getAriaValueText', + 'onChange', + 'onChangeCommitted', + 'ThumbComponent', + 'value', + 'ValueLabelComponent', + 'valueLabelFormat', + 'marks', + ], + propValues: { + width: 160, + height: 24, + }, + template: 'slider.txt', + }, + SnackbarContent: { + ignoredProps: ['action', 'role'], + 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', 'type', 'value'], + propValues: { + label: "'Switch'", + width: 100, + height: 38, + checked: 'false', + }, + template: 'switch.txt', + }, + Tabs: { + ignoredProps: [ + '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', + 'rowsMax', + 'select', + 'type', + 'value', + ], + propValues: { + helperText: "''", + label: "'TextField'", + width: 280, + height: 56, + fullWidth: true, + }, + template: 'self_closing.txt', + }, + Typography: { + ignoredProps: [ + 'children', + 'display', + 'gutterBottom', + 'internalDeprecatedVariant', + 'paragraph', + '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 new file mode 100644 index 00000000000000..8b597362e5c30b --- /dev/null +++ b/framer/scripts/templates/avatar.txt @@ -0,0 +1,43 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +import { Icon } from './Icon'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { + backgroundColor, + height, + icon, + imageFile, + 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 new file mode 100644 index 00000000000000..d72e6839cf301e --- /dev/null +++ b/framer/scripts/templates/badge.txt @@ -0,0 +1,38 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +import { Icon } from './Icon'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +const style: React.CSSProperties = { +«& style» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { badgeColor: color, badgeContent, icon, theme, width, height, ...other } = props; + const content = + icon === '' ? ( + badgeContent + ) : ( + // @ts-ignore + + ); + + return ; +}; + +«componentName».defaultProps = defaultProps; + +addPropertyControls(«componentName», { +«& propertyControls» +}); diff --git a/framer/scripts/templates/bottom_navigation.txt b/framer/scripts/templates/bottom_navigation.txt new file mode 100644 index 00000000000000..cae8521fb133ca --- /dev/null +++ b/framer/scripts/templates/bottom_navigation.txt @@ -0,0 +1,55 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiBottomNavigationAction from '@material-ui/core/BottomNavigationAction'; +import { Icon } from './Icon'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { labels, icons, ...other } = props; + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + const [value, setValue] =React.useState(0) + + const handleChange = (event, value) => { + setValue(value); + }; + + 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 new file mode 100644 index 00000000000000..691d15db136c57 --- /dev/null +++ b/framer/scripts/templates/button.txt @@ -0,0 +1,46 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +import { Icon } from './Icon'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { + endIcon, + endIconTheme, + height, + label, + startIcon, + startIconTheme, + variant, + width, + ...other + } = props; + + const StartIcon = startIcon === '' ? undefined : + const EndIcon = endIcon === '' ? undefined : + + return ( +
+ + {label} + +
+ ); +} + +«componentName».defaultProps = defaultProps; + +addPropertyControls(«componentName», { +«& propertyControls» +}); diff --git a/framer/scripts/templates/chip.txt b/framer/scripts/templates/chip.txt new file mode 100644 index 00000000000000..9044732037cbd4 --- /dev/null +++ b/framer/scripts/templates/chip.txt @@ -0,0 +1,52 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +import { Icon } from './Icon'; +import { Avatar } from './Avatar'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + 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 new file mode 100644 index 00000000000000..540729634ee795 --- /dev/null +++ b/framer/scripts/templates/circular_progress.txt @@ -0,0 +1,31 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { width, height, ...other } = props; + const style: React.CSSProperties = { +«& style» + }; + + 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 new file mode 100644 index 00000000000000..a4142df2c81a99 --- /dev/null +++ b/framer/scripts/templates/controlled_self_closing.txt @@ -0,0 +1,49 @@ +{{=« »=}} +import * as React from 'react'; +import { PropertyControls, ControlType } from 'framer'; +import Mui«componentName» from '@material-ui/core/«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 new file mode 100644 index 00000000000000..6214a1bf2735c4 --- /dev/null +++ b/framer/scripts/templates/fab.txt @@ -0,0 +1,37 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +import { Icon } from './Icon'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + 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 new file mode 100644 index 00000000000000..42e33bff372cb6 --- /dev/null +++ b/framer/scripts/templates/icon.txt @@ -0,0 +1,31 @@ +{{=« »=}} +import * as React from 'react'; +import { pascal } from 'naming-style'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import * as Icons from '@material-ui/icons'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { height, icon: iconProp, theme, width, ...other } = props; + const iconName = `${iconProp && pascal(iconProp)}${theme === 'Filled' ? '' : theme}`; + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + const Icon = Object.keys(Icons).includes(iconName) ? Icons[iconName] : undefined; + + return Icon ? : null; +}; + +«componentName».defaultProps = defaultProps; + +addPropertyControls(«componentName», { +«& propertyControls» +}); diff --git a/framer/scripts/templates/icon_button.txt b/framer/scripts/templates/icon_button.txt new file mode 100644 index 00000000000000..62dc1c40122938 --- /dev/null +++ b/framer/scripts/templates/icon_button.txt @@ -0,0 +1,40 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiBadge from '@material-ui/core/Badge'; +import { Icon } from './Icon'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + 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 new file mode 100644 index 00000000000000..44cdac0b984e6e --- /dev/null +++ b/framer/scripts/templates/label_as_children.txt @@ -0,0 +1,25 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + 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 new file mode 100644 index 00000000000000..9012106f94a055 --- /dev/null +++ b/framer/scripts/templates/list_item.txt @@ -0,0 +1,112 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItem from '@material-ui/core/ListItem'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemIcon from '@material-ui/core/ListItemIcon'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemAvatar from '@material-ui/core/ListItemAvatar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiListItemText from '@material-ui/core/ListItemText'; +import { Avatar } from './Avatar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiCheckbox from '@material-ui/core/Checkbox'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiSwitch from '@material-ui/core/Switch'; +import { Icon } from './Icon'; +import { IconButton } from './IconButton'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { + 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; + } + + switch (secondaryAction) { + case 'iconButton': + secondary = ; + break; + case 'checkbox': + secondary = ; + break; + case 'switch': + secondary = ; + break; + } + + return ( + + {primary} + + {/* 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 new file mode 100644 index 00000000000000..b3cccc891d34ab --- /dev/null +++ b/framer/scripts/templates/paper.txt @@ -0,0 +1,26 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + 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 new file mode 100644 index 00000000000000..036580cc880917 --- /dev/null +++ b/framer/scripts/templates/radio.txt @@ -0,0 +1,29 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; + +interface Props { +«& tsInterface» +} + +export function «componentName»(props) { + const { label, ...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 new file mode 100644 index 00000000000000..03918f1c7c2fc8 --- /dev/null +++ b/framer/scripts/templates/radio_group.txt @@ -0,0 +1,36 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiFormLabel from '@material-ui/core/FormLabel'; +import { Radio } from './Radio'; + +export function RadioGroup(props) { + 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 new file mode 100644 index 00000000000000..25fe8b6db11bc8 --- /dev/null +++ b/framer/scripts/templates/selection_control.txt @@ -0,0 +1,42 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +export function «componentName»(props) { + const { checked: checkedProp, label, onChange, ...other } = props; + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + + const [checked, setChecked] = React.useState(false); + + const handleChange = (event: React.ChangeEvent) => { + if (onChange) { + onChange(event); + } + setChecked((event.target as HTMLInputElement).checked); + }; + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + 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 new file mode 100644 index 00000000000000..9ac47abdf41b38 --- /dev/null +++ b/framer/scripts/templates/self_closing.txt @@ -0,0 +1,29 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + 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 new file mode 100644 index 00000000000000..491673d66b2e1f --- /dev/null +++ b/framer/scripts/templates/slider.txt @@ -0,0 +1,25 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + const { width, height, ...other } = props; + return ; +} + +«componentName».defaultProps = defaultProps; + +addPropertyControls(«componentName», { +«& propertyControls» +}); diff --git a/framer/scripts/templates/snackbar_content.txt b/framer/scripts/templates/snackbar_content.txt new file mode 100644 index 00000000000000..04eabded9bd98c --- /dev/null +++ b/framer/scripts/templates/snackbar_content.txt @@ -0,0 +1,30 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiButton from '@material-ui/core/Button'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { + 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 new file mode 100644 index 00000000000000..874071d4e48808 --- /dev/null +++ b/framer/scripts/templates/switch.txt @@ -0,0 +1,42 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import FormControlLabel from '@material-ui/core/FormControlLabel'; + +export function «componentName»(props) { + const { checked: checkedProp, label, onChange, size, ...other } = props; + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + + const [checked, setChecked] = React.useState(false); + + const handleChange = (event: React.ChangeEvent) => { + if (onChange) { + onChange(event); + } + setChecked((event.target as HTMLInputElement).checked); + }; + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + 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 new file mode 100644 index 00000000000000..5590670d3124a3 --- /dev/null +++ b/framer/scripts/templates/tabs.txt @@ -0,0 +1,61 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiAppBar from '@material-ui/core/AppBar'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import Mui«componentName» from '@material-ui/core/«componentName»'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import MuiTab from '@material-ui/core/Tab'; +import { Icon } from './Icon'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const «componentName»: React.SFC = (props: Props) => { +const { appBarColor, labels, icons, width, height, ...other } = props + + // tslint:disable-next-line: ban-ts-ignore + // @ts-ignore + const [value, setValue] = React.useState(0); + + const handleChange = (event: React.ChangeEvent<{}>, 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/scripts/templates/theme_provider.txt b/framer/scripts/templates/theme_provider.txt new file mode 100644 index 00000000000000..cc545f2d8e0c24 --- /dev/null +++ b/framer/scripts/templates/theme_provider.txt @@ -0,0 +1,39 @@ +{{=« »=}} +import * as React from 'react'; +import { addPropertyControls, ControlType } from 'framer'; +// tslint:disable-next-line: ban-ts-ignore +// @ts-ignore +import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; + +interface Props { +«& tsInterface» +} + +const defaultProps: Props = { +«& defaultProps» +}; + +export const Theme: React.SFC = (props: Props) => { + const { children, error, paletteType, primary, secondary, ...other } = props; + + const theme = createMuiTheme({ + palette: { + type: paletteType, + primary: { main: primary }, + secondary: { main: secondary }, + error: { main: error }, + }, + }); + + return ( + + {children} + + ); +} + +Theme.defaultProps = defaultProps; + +addPropertyControls(Theme, { +«& propertyControls» +}); diff --git a/lerna.json b/lerna.json index 3464f588684934..6cd5c8e18d5433 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "packages": ["packages/*", "docs"], + "packages": ["packages/*", "docs", "framer"], "npmClient": "yarn", "useWorkspaces": true, "version": "independent" diff --git a/package.json b/package.json index 98784d7323ed57..4ad06f7a035307 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "docs:typescript:check": "yarn workspace docs typescript", "docs:typescript:formatted": "yarn workspace docs typescript:transpile", "docs:mdicons:synonyms": "babel-node --config-file ./babel.config.js ./docs/scripts/updateIconSynonyms", + "framer:build": "yarn workspace framer build", "jsonlint": "yarn --silent jsonlint:files | xargs -n1 jsonlint -q -c && echo \"jsonlint: no lint errors\"", "jsonlint:files": "find . -name \"*.json\" | grep -v -f .eslintignore", "lint": "eslint . --cache --report-unused-disable-directives", @@ -163,7 +164,8 @@ }, "workspaces": [ "packages/*", - "docs" + "docs", + "framer" ], "dependencies": {} } diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 92ca767a66d6d3..0b538602f4ef76 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -64,6 +64,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) { checkedIcon = defaultCheckedIcon, classes, color = 'secondary', + disabled = false, icon = defaultIcon, indeterminate = false, indeterminateIcon = defaultIndeterminateIcon, @@ -89,6 +90,7 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) { }} icon={indeterminate ? indeterminateIcon : icon} ref={ref} + disabled={disabled} {...other} /> ); diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index d663d8934cf765..bb14d8aec86998 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -99,7 +99,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) { component: componentProp, ContainerComponent = 'li', ContainerProps: { className: ContainerClassName, ...ContainerProps } = {}, - dense, + dense = false, disabled = false, disableGutters = false, divider = false, diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 220a66cdd9f821..5fc1a3eb9896ee 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -61,6 +61,7 @@ const Radio = React.forwardRef(function Radio(props, ref) { checked: checkedProp, classes, color = 'secondary', + disabled = false, name: nameProp, onChange: onChangeProp, ...other @@ -95,6 +96,7 @@ const Radio = React.forwardRef(function Radio(props, ref) { checked={checked} onChange={onChange} ref={ref} + disabled={disabled} {...other} /> ); diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index e4f44553556279..2ac77ed0857c76 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -148,6 +148,7 @@ const Switch = React.forwardRef(function Switch(props, ref) { classes, className, color = 'secondary', + disabled = false, edge = false, size = 'medium', ...other @@ -178,6 +179,7 @@ const Switch = React.forwardRef(function Switch(props, ref) { disabled: classes.disabled, }} ref={ref} + disabled={disabled} {...other} /> diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js index fd8a3f100af069..34b4d1c4d055b2 100644 --- a/packages/material-ui/src/TextField/TextField.js +++ b/packages/material-ui/src/TextField/TextField.js @@ -58,15 +58,16 @@ export const styles = { const TextField = React.forwardRef(function TextField(props, ref) { const { autoComplete, - autoFocus, + autoFocus = false, children, classes, className, color = 'primary', defaultValue, - error, + disabled = false, + error = false, FormHelperTextProps, - fullWidth, + fullWidth = false, helperText, hiddenLabel, id, @@ -75,7 +76,7 @@ const TextField = React.forwardRef(function TextField(props, ref) { InputProps, inputRef, label, - multiline, + multiline = false, name, onBlur, onChange, @@ -158,6 +159,7 @@ const TextField = React.forwardRef(function TextField(props, ref) { return (