diff --git a/CHANGELOG_v6.md b/CHANGELOG_v6.md index dcb90e750f..5e25b502af 100644 --- a/CHANGELOG_v6.md +++ b/CHANGELOG_v6.md @@ -21,11 +21,13 @@ should change the heading of the (upcoming) version to include a major version b - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes +- Implemented the `GridTemplate` component, adding it to the `templates` for the theme ## @rjsf/chakra-ui - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes +- Implemented the `GridTemplate` component, adding it to the `templates` for the theme ## @rjsf/core @@ -33,6 +35,7 @@ should change the heading of the (upcoming) version to include a major version b - Added `ArrayFieldItemButtonsTemplate` component as a refactor of all the common buttons code from all the `ArrayFieldItemTemplate` implementations, adding a unique id using the `buttonId()` function - Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes +- Implemented the `GridTemplate` component, adding it to the `templates` for the theme ## @rjsf/fluent-ui @@ -42,16 +45,20 @@ should change the heading of the (upcoming) version to include a major version b - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes +- Implemented the `GridTemplate` component, adding it to the `templates` for the theme ## @rjsf/mui - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes +- Updated the theme to use `Grid2` instead of the deprecated `Grid` +- Implemented the `GridTemplate` component, adding it to the `templates` for the theme ## @rjsf/semantic-ui - BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate` - Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes +- Implemented the `GridTemplate` component, adding it to the `templates` for the theme ## @rjsf/utils diff --git a/packages/antd/src/templates/GridTemplate/index.tsx b/packages/antd/src/templates/GridTemplate/index.tsx new file mode 100644 index 0000000000..1425c17d59 --- /dev/null +++ b/packages/antd/src/templates/GridTemplate/index.tsx @@ -0,0 +1,15 @@ +import { Col, Row } from 'antd'; +import { GridTemplateProps } from '@rjsf/utils'; + +/** Renders a `GridTemplate` for antd, which is expecting the column sizing information coming in via the + * extra props provided by the caller, which are spread directly on the `Row`/`Col`. + * + * @param props - The GridTemplateProps, including the extra props containing the antd grid positioning details + */ +export default function GridTemplate(props: GridTemplateProps) { + const { children, column, ...rest } = props; + if (column) { + return {children}; + } + return {children}; +} diff --git a/packages/antd/src/templates/index.ts b/packages/antd/src/templates/index.ts index 116cefb798..c068485bfc 100644 --- a/packages/antd/src/templates/index.ts +++ b/packages/antd/src/templates/index.ts @@ -8,6 +8,7 @@ import ErrorList from './ErrorList'; import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton'; import FieldErrorTemplate from './FieldErrorTemplate'; import FieldTemplate from './FieldTemplate'; +import GridTemplate from './GridTemplate'; import ObjectFieldTemplate from './ObjectFieldTemplate'; import SubmitButton from './SubmitButton'; import TitleField from './TitleField'; @@ -34,6 +35,7 @@ export function generateTemplates< ErrorListTemplate: ErrorList, FieldErrorTemplate, FieldTemplate, + GridTemplate, ObjectFieldTemplate, TitleFieldTemplate: TitleField, WrapIfAdditionalTemplate, diff --git a/packages/chakra-ui/src/GridTemplate/GridTemplate.tsx b/packages/chakra-ui/src/GridTemplate/GridTemplate.tsx new file mode 100644 index 0000000000..e2b12337cd --- /dev/null +++ b/packages/chakra-ui/src/GridTemplate/GridTemplate.tsx @@ -0,0 +1,15 @@ +import { Grid, GridItem } from '@chakra-ui/react'; +import { GridTemplateProps } from '@rjsf/utils'; + +/** Renders a `GridTemplate` for chakra-ui, which is expecting the column sizing information coming in via the + * extra props provided by the caller, which are spread directly on the `Grid`/`GridItem`. + * + * @param props - The GridTemplateProps, including the extra props containing the chakra-ui grid positioning details + */ +export default function GridTemplate(props: GridTemplateProps) { + const { children, column, ...rest } = props; + if (column) { + return {children}; + } + return {children}; +} diff --git a/packages/chakra-ui/src/GridTemplate/index.ts b/packages/chakra-ui/src/GridTemplate/index.ts new file mode 100644 index 0000000000..ed6c2c4fc5 --- /dev/null +++ b/packages/chakra-ui/src/GridTemplate/index.ts @@ -0,0 +1,2 @@ +export { default } from './GridTemplate'; +export * from './GridTemplate'; diff --git a/packages/chakra-ui/src/Templates/Templates.ts b/packages/chakra-ui/src/Templates/Templates.ts index dd5705e011..89eb830828 100644 --- a/packages/chakra-ui/src/Templates/Templates.ts +++ b/packages/chakra-ui/src/Templates/Templates.ts @@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB import FieldErrorTemplate from '../FieldErrorTemplate'; import FieldHelpTemplate from '../FieldHelpTemplate'; import FieldTemplate from '../FieldTemplate'; +import GridTemplate from '../GridTemplate'; import ObjectFieldTemplate from '../ObjectFieldTemplate'; import SubmitButton from '../SubmitButton'; import TitleField from '../TitleField'; @@ -36,6 +37,7 @@ export function generateTemplates< FieldErrorTemplate, FieldHelpTemplate, FieldTemplate, + GridTemplate, ObjectFieldTemplate, TitleFieldTemplate: TitleField, WrapIfAdditionalTemplate, diff --git a/packages/core/src/components/templates/GridTemplate.tsx b/packages/core/src/components/templates/GridTemplate.tsx index d994a363e8..b92a7af768 100644 --- a/packages/core/src/components/templates/GridTemplate.tsx +++ b/packages/core/src/components/templates/GridTemplate.tsx @@ -1,13 +1,12 @@ import { GridTemplateProps } from '@rjsf/utils'; -/** Renders a `GridTemplate` for bootstrap 3, which is expecting the column - * information coming in via the `className` prop. +/** Renders a `GridTemplate` for bootstrap 3, which is expecting the column information coming in via the `className` + * prop. Also spreads all the other props provided by the user directly on the div. * - * @param props - The GridTemplateProps, including the expected className for - * the bootstrap 3 grid behavior + * @param props - The GridTemplateProps, including the expected className for the bootstrap 3 grid behavior */ export default function GridTemplate(props: GridTemplateProps) { - const { children, overrides, column, className, ...rest } = props; + const { children, column, className, ...rest } = props; const classNames = column ? className : `row ${className}`; return (
diff --git a/packages/fluentui-rc/src/GridTemplate/GridTemplate.tsx b/packages/fluentui-rc/src/GridTemplate/GridTemplate.tsx new file mode 100644 index 0000000000..657e597232 --- /dev/null +++ b/packages/fluentui-rc/src/GridTemplate/GridTemplate.tsx @@ -0,0 +1,12 @@ +import { Flex } from '@fluentui/react-migration-v0-v9'; +import { GridTemplateProps } from '@rjsf/utils'; + +/** Renders a `GridTemplate` for fluentui-rc, which is expecting the column sizing information coming in via the + * extra props provided by the caller, which are spread directly on the `Flex`. + * + * @param props - The GridTemplateProps, including the extra props containing the fluentui-rc grid positioning details + */ +export default function GridTemplate(props: GridTemplateProps) { + const { children, column, ...rest } = props; + return {children}; +} diff --git a/packages/fluentui-rc/src/GridTemplate/index.ts b/packages/fluentui-rc/src/GridTemplate/index.ts new file mode 100644 index 0000000000..ed6c2c4fc5 --- /dev/null +++ b/packages/fluentui-rc/src/GridTemplate/index.ts @@ -0,0 +1,2 @@ +export { default } from './GridTemplate'; +export * from './GridTemplate'; diff --git a/packages/fluentui-rc/src/Templates/Templates.ts b/packages/fluentui-rc/src/Templates/Templates.ts index 66337a0cb8..9a2d6096a2 100644 --- a/packages/fluentui-rc/src/Templates/Templates.ts +++ b/packages/fluentui-rc/src/Templates/Templates.ts @@ -8,6 +8,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB import FieldErrorTemplate from '../FieldErrorTemplate'; import FieldHelpTemplate from '../FieldHelpTemplate'; import FieldTemplate from '../FieldTemplate'; +import GridTemplate from '../GridTemplate'; import ObjectFieldTemplate from '../ObjectFieldTemplate'; import SubmitButton from '../SubmitButton'; import TitleField from '../TitleField'; @@ -36,6 +37,7 @@ export function generateTemplates< FieldErrorTemplate, FieldHelpTemplate, FieldTemplate, + GridTemplate, ObjectFieldTemplate, TitleFieldTemplate: TitleField, WrapIfAdditionalTemplate, diff --git a/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx index 3d91a79821..3bd0ebf1e6 100644 --- a/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx +++ b/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx @@ -1,6 +1,6 @@ import { CSSProperties } from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; +import Grid2 from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import { ArrayFieldTemplateItemType, @@ -35,19 +35,19 @@ export default function ArrayFieldItemTemplate< minWidth: 0, }; return ( - - + + {children} - + {hasToolbar && ( - + - + )} - + ); } diff --git a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx index b41b65030b..34b1a4ad29 100644 --- a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx +++ b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx @@ -1,5 +1,5 @@ import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; +import Grid2 from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import { getTemplate, @@ -66,8 +66,8 @@ export default function ArrayFieldTemplate< ))} {canAdd && ( - - + + (idSchema, 'add')} @@ -78,8 +78,8 @@ export default function ArrayFieldTemplate< registry={registry} /> - - + + )} diff --git a/packages/mui/src/GridTemplate/GridTemplate.tsx b/packages/mui/src/GridTemplate/GridTemplate.tsx new file mode 100644 index 0000000000..dc9a66c9c9 --- /dev/null +++ b/packages/mui/src/GridTemplate/GridTemplate.tsx @@ -0,0 +1,16 @@ +import Grid2 from '@mui/material/Grid2'; +import { GridTemplateProps } from '@rjsf/utils'; + +/** Renders a `GridTemplate` for mui, which is expecting the column sizing information coming in via the + * extra props provided by the caller, which are spread directly on the `Grid2`. + * + * @param props - The GridTemplateProps, including the extra props containing the mui grid positioning details + */ +export default function GridTemplate(props: GridTemplateProps) { + const { children, column, ...rest } = props; + return ( + + {children} + + ); +} diff --git a/packages/mui/src/GridTemplate/index.ts b/packages/mui/src/GridTemplate/index.ts new file mode 100644 index 0000000000..ed6c2c4fc5 --- /dev/null +++ b/packages/mui/src/GridTemplate/index.ts @@ -0,0 +1,2 @@ +export { default } from './GridTemplate'; +export * from './GridTemplate'; diff --git a/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx index 26480e3d2a..039f0c9042 100644 --- a/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx +++ b/packages/mui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx @@ -1,4 +1,4 @@ -import Grid from '@mui/material/Grid'; +import Grid2 from '@mui/material/Grid2'; import { FormContextType, ObjectFieldTemplateProps, @@ -69,21 +69,21 @@ export default function ObjectFieldTemplate< registry={registry} /> )} - + {properties.map((element, index) => - // Remove the if the inner element is hidden as the + // Remove the if the inner element is hidden as the // itself would otherwise still take up space. element.hidden ? ( element.content ) : ( - + {element.content} - + ) )} {canExpand(schema, uiSchema, formData) && ( - - + + (idSchema, 'add')} className='object-property-expand' @@ -92,10 +92,10 @@ export default function ObjectFieldTemplate< uiSchema={uiSchema} registry={registry} /> - - + + )} - + ); } diff --git a/packages/mui/src/Templates/Templates.ts b/packages/mui/src/Templates/Templates.ts index dcc96749db..86cdce6ea9 100644 --- a/packages/mui/src/Templates/Templates.ts +++ b/packages/mui/src/Templates/Templates.ts @@ -10,6 +10,7 @@ import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconB import FieldErrorTemplate from '../FieldErrorTemplate'; import FieldHelpTemplate from '../FieldHelpTemplate'; import FieldTemplate from '../FieldTemplate'; +import GridTemplate from '../GridTemplate'; import ObjectFieldTemplate from '../ObjectFieldTemplate'; import SubmitButton from '../SubmitButton'; import TitleField from '../TitleField'; @@ -37,6 +38,7 @@ export function generateTemplates< FieldErrorTemplate, FieldHelpTemplate, FieldTemplate, + GridTemplate, ObjectFieldTemplate, TitleFieldTemplate: TitleField, WrapIfAdditionalTemplate, diff --git a/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx b/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx index b20a477132..a6fc945bfb 100644 --- a/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx +++ b/packages/mui/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx @@ -1,5 +1,5 @@ import { CSSProperties, FocusEvent } from 'react'; -import Grid from '@mui/material/Grid'; +import Grid2 from '@mui/material/Grid2'; import TextField from '@mui/material/TextField'; import { ADDITIONAL_PROPERTY_FLAG, @@ -59,8 +59,8 @@ export default function WrapIfAdditionalTemplate< const handleBlur = ({ target }: FocusEvent) => onKeyChange(target && target.value); return ( - - + + - - - {children} - - + + {children} + (id, 'remove')} className='array-item-remove' @@ -87,7 +85,7 @@ export default function WrapIfAdditionalTemplate< uiSchema={uiSchema} registry={registry} /> - - + + ); } diff --git a/packages/mui/test/__snapshots__/Array.test.tsx.snap b/packages/mui/test/__snapshots__/Array.test.tsx.snap index a37430efc6..2cadb4c81f 100644 --- a/packages/mui/test/__snapshots__/Array.test.tsx.snap +++ b/packages/mui/test/__snapshots__/Array.test.tsx.snap @@ -30,28 +30,41 @@ exports[`array fields array 1`] = ` } .emotion-3 { + --Grid-columns: 12; + --Grid-columnSpacing: 0px; + --Grid-rowSpacing: 0px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + min-width: 0; box-sizing: border-box; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing); -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } +.emotion-3>* { + --Grid-parent-columns: 12; +} + +.emotion-3>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-3>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-4 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-5 { @@ -286,10 +299,10 @@ exports[`array fields array 1`] = ` className="MuiBox-root emotion-2" >
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-4 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-5 { @@ -664,11 +642,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-14 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-15 { @@ -839,22 +814,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-43 { + --Grid-columns: 12; + --Grid-columnSpacing: 0px; + --Grid-rowSpacing: 0px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + min-width: 0; box-sizing: border-box; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing); -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } +.emotion-43>* { + --Grid-parent-columns: 12; +} + +.emotion-43>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-43>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-45 { margin-top: 16px; } @@ -1087,10 +1078,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- className="MuiBox-root emotion-2" >
.MuiGrid-item { - padding-top: 16px; +.emotion-1>* { + --Grid-parent-columns: 12; } -.emotion-1>.MuiGrid-item { - padding-left: 16px; +.emotion-1>* { + --Grid-parent-columnSpacing: 16px; +} + +.emotion-1>* { + --Grid-parent-rowSpacing: 16px; } .emotion-2 { - box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 100%; -} - -@media (min-width:600px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:900px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1200px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1536px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns))); + min-width: 0; + box-sizing: border-box; } .emotion-4 { @@ -2557,7 +2499,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p className="MuiFormControl-root MuiFormControl-fullWidth emotion-0" >
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-4 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-5 { @@ -3095,10 +3002,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- className="MuiBox-root emotion-2" >
.MuiGrid-item { - padding-top: 16px; +.emotion-10>* { + --Grid-parent-columns: 12; } -.emotion-10>.MuiGrid-item { - padding-left: 16px; +.emotion-10>* { + --Grid-parent-columnSpacing: 16px; +} + +.emotion-10>* { + --Grid-parent-rowSpacing: 16px; } .emotion-11 { - box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 100%; -} - -@media (min-width:600px) { - .emotion-11 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:900px) { - .emotion-11 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1200px) { - .emotion-11 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1536px) { - .emotion-11 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns))); + min-width: 0; + box-sizing: border-box; } .emotion-13 { @@ -3960,7 +3818,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-16:focus::-ms-input- className="MuiFormControl-root MuiFormControl-fullWidth emotion-9" >
.MuiGrid-item { - padding-top: 16px; +.emotion-1>* { + --Grid-parent-columns: 12; } -.emotion-1>.MuiGrid-item { - padding-left: 16px; +.emotion-1>* { + --Grid-parent-columnSpacing: 16px; +} + +.emotion-1>* { + --Grid-parent-rowSpacing: 16px; } .emotion-2 { - box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 100%; -} - -@media (min-width:600px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:900px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1200px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1536px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns))); + min-width: 0; + box-sizing: border-box; } .emotion-4 { @@ -4542,7 +4351,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p className="MuiFormControl-root MuiFormControl-fullWidth emotion-0" >
* { + --Grid-parent-columns: 12; +} + +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-8 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-9 { @@ -4988,10 +4810,10 @@ exports[`with title and description array 1`] = ` a test description
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-8 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-9 { @@ -5470,11 +5257,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-22 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-23 { @@ -5645,22 +5429,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-55 { + --Grid-columns: 12; + --Grid-columnSpacing: 0px; + --Grid-rowSpacing: 0px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + min-width: 0; box-sizing: border-box; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing); -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } +.emotion-55>* { + --Grid-parent-columns: 12; +} + +.emotion-55>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-55>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-57 { margin-top: 16px; } @@ -5918,10 +5718,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- a test description
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-8 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-9 { @@ -7636,10 +7401,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- a test description
* { + --Grid-parent-columns: 12; +} + +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-8 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-9 { @@ -8231,10 +8009,10 @@ exports[`with title and description from both array 1`] = ` a fancier description
* { + --Grid-parent-columns: 12; } -@media (min-width:600px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:900px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1200px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } -} - -@media (min-width:1536px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-8 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-9 { @@ -8713,11 +8456,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-22 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-23 { @@ -8888,22 +8628,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-55 { + --Grid-columns: 12; + --Grid-columnSpacing: 0px; + --Grid-rowSpacing: 0px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + min-width: 0; box-sizing: border-box; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing); -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } +.emotion-55>* { + --Grid-parent-columns: 12; +} + +.emotion-55>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-55>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-57 { margin-top: 16px; } @@ -9161,10 +8917,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- a fancier description
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-8 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-9 { @@ -10879,10 +10600,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- a fancier description
* { + --Grid-parent-columns: 12; +} + +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-8 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-9 { @@ -11474,10 +11208,10 @@ exports[`with title and description from uiSchema array 1`] = ` a fancier description
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-8 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-9 { @@ -11956,11 +11655,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-22 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-23 { @@ -12131,22 +11827,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- } .emotion-55 { + --Grid-columns: 12; + --Grid-columnSpacing: 0px; + --Grid-rowSpacing: 0px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + min-width: 0; box-sizing: border-box; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing); -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } +.emotion-55>* { + --Grid-parent-columns: 12; +} + +.emotion-55>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-55>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-57 { margin-top: 16px; } @@ -12404,10 +12116,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- a fancier description
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-7>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-8 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-8 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-9 { @@ -14122,10 +13799,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-17:focus::-ms-input- a fancier description
* { + --Grid-parent-columns: 12; +} + +.emotion-3>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-3>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-4 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-5 { @@ -14658,10 +14348,10 @@ exports[`with title and description with global label off array 1`] = ` className="MuiBox-root emotion-2" >
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-4 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-5 { @@ -15036,11 +14691,8 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-14 { + min-width: 0; box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } .emotion-15 { @@ -15211,22 +14863,38 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- } .emotion-43 { + --Grid-columns: 12; + --Grid-columnSpacing: 0px; + --Grid-rowSpacing: 0px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + min-width: 0; box-sizing: border-box; display: flex; -webkit-box-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; - width: 100%; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; + gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing); -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } +.emotion-43>* { + --Grid-parent-columns: 12; +} + +.emotion-43>* { + --Grid-parent-columnSpacing: 0px; +} + +.emotion-43>* { + --Grid-parent-rowSpacing: 0px; +} + .emotion-45 { margin-top: 16px; } @@ -15459,10 +15127,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- className="MuiBox-root emotion-2" >
* { + --Grid-parent-columns: 12; } -@media (min-width:900px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-columnSpacing: 0px; } -@media (min-width:1200px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-3>* { + --Grid-parent-rowSpacing: 0px; } -@media (min-width:1536px) { - .emotion-4 { - -webkit-flex-basis: 0; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - max-width: 100%; - } +.emotion-4 { + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: none; + width: auto; + min-width: 0; + box-sizing: border-box; } .emotion-5 { @@ -16992,10 +16625,10 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-11:focus::-ms-input- className="MuiBox-root emotion-2" >
.MuiGrid-item { - padding-top: 16px; +.emotion-1>* { + --Grid-parent-columns: 12; } -.emotion-1>.MuiGrid-item { - padding-left: 16px; +.emotion-1>* { + --Grid-parent-columnSpacing: 16px; +} + +.emotion-1>* { + --Grid-parent-rowSpacing: 16px; } .emotion-2 { - box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 100%; -} - -@media (min-width:600px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:900px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1200px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1536px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns))); + min-width: 0; + box-sizing: border-box; } .emotion-4 { @@ -1722,7 +1673,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p className="MuiFormControl-root MuiFormControl-fullWidth emotion-0" >
.MuiGrid-item { - padding-top: 16px; +.emotion-1>* { + --Grid-parent-columns: 12; } -.emotion-1>.MuiGrid-item { - padding-left: 16px; +.emotion-1>* { + --Grid-parent-columnSpacing: 16px; +} + +.emotion-1>* { + --Grid-parent-rowSpacing: 16px; } .emotion-2 { - box-sizing: border-box; - margin: 0; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; -webkit-box-flex: 0; -webkit-flex-grow: 0; -ms-flex-positive: 0; flex-grow: 0; - max-width: 100%; -} - -@media (min-width:600px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:900px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1200px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } -} - -@media (min-width:1536px) { - .emotion-2 { - -webkit-flex-basis: 100%; - -ms-flex-preferred-size: 100%; - flex-basis: 100%; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - max-width: 100%; - } + -webkit-flex-basis: auto; + -ms-flex-preferred-size: auto; + flex-basis: auto; + width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns))); + min-width: 0; + box-sizing: border-box; } .emotion-4 { @@ -2324,7 +2226,7 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-7:focus::-ms-input-p className="MuiFormControl-root MuiFormControl-fullWidth emotion-0" >