@sanity/ui 3.0.0-static.0 → 3.0.0-static.1

package/src/css/primitives/textInput/rules.ts

@@ -1,72 +1,106 @@
+import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
+// import {_resp} from '../../_resp'
+import {responsiveRules} from '../../responsiveRules'
 import {Rules} from '../../types'
+import {vars} from '../../vars'
 
 export const textInputRules: Rules = {
   'text-input': {
-    //
+    '--font-family': vars.font.text.family,
   },
 
-  'text-input-wrapper': {
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`text-input-p-${space}`.replace('.', '_'), {
+        '--padding-top': `calc(${vars.space[space]} - var(--font-ascender-height))`,
+        '--padding-right': vars.space[space],
+        '--padding-bottom': `calc(${vars.space[space]} - var(--font-descender-height))`,
+        '--padding-left': vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...FONT_TEXT_SIZE.reduce<Rules>((acc, size) => {
+    return {
+      ...acc,
+      ...responsiveRules(`text-input-${size}`, {
+        '--font-size': vars.font.text.sizes[size].fontSize,
+        '--font-line-height': vars.font.text.sizes[size].lineHeight,
+        '--font-letter-spacing': vars.font.text.sizes[size].letterSpacing,
+        '--font-ascender-height': vars.font.text.sizes[size].ascenderHeight,
+        '--font-descender-height': vars.font.text.sizes[size].descenderHeight,
+      }),
+    }
+  }, {}),
+
+  'text-input-element': {
+    'appearance': 'none',
+    'background': 'none',
+    'border': 0,
+    'borderRadius': 0,
+    'outline': 'none',
+    'width': '100%',
+    'boxSizing': 'border-box',
+    'fontFamily': 'var(--font-family)',
+    'fontSize': 'var(--font-size)',
+    'fontWeight': 'var(--font-weight)',
+    'lineHeight': 'var(--font-line-height)',
+    'letterSpacing': 'var(--font-letter-spacing)',
+    'margin': 0,
+    'position': 'relative',
+    'zIndex': 1,
+    'display': 'block',
+    'color': 'var(--input-fg-color)',
+    'paddingTop': 'var(--padding-top)',
+    'paddingRight': 'var(--padding-right)',
+    'paddingBottom': 'var(--padding-bottom)',
+    'paddingLeft': 'var(--padding-left)',
+
+    '--input-fg-color': 'var(--color-input-default-enabled-fg)',
+
     '@nest': {
-      '& > input': {
-        'appearance': 'none',
-        'background': 'none',
-        'border': 0,
-        'borderRadius': 0,
-        'outline': 'none',
-        'width': '100%',
-        'boxSizing': 'border-box',
-        'fontFamily': 'var(--font-family)',
-        'fontSize': 'var(--font-size)',
-        /* font-family: ${font.text.family}, */
-        /* font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular}, */
-        'margin': 0,
-        'position': 'relative',
-        'zIndex': 1,
-        'display': 'block',
-        'color': 'var(--input-fg-color)',
-
-        '@nest': {
-          // NOTE: This is a hack to disable Chrome’s autofill styles
-          '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
-            {
-              WebkitTextFillColor: 'var(--input-fg-color) !important',
-              transition: 'background-color 5000s',
-              transitionDelay: '86400s', // 24h
-            },
-
-          // /* &:is(textarea) */
-          // &[data-as='textarea'] {
-          //   resize: none;
-          // }
-          // &::placeholder {
-          //   color: var(--input-placeholder-color);
-          // }
-          // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-          //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
-          //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-          //   /* enabled */
-          //   &:not(:invalid):not(:disabled):not(:read-only) {
-          //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
-          //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-          //   }
-          //   /* disabled */
-          //   &:not(:invalid):disabled {
-          //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
-          //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
-          //   }
-          //   /* invalid */
-          //   &:invalid {
-          //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
-          //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
-          //   }
-          //   /* readOnly */
-          //   &:read-only {
-          //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
-          //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
-          //   }
-          // }
+      // NOTE: This is a hack to disable Chrome’s autofill styles
+      '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
+        {
+          WebkitTextFillColor: 'var(--input-fg-color) !important',
+          transition: 'background-color 5000s',
+          transitionDelay: '86400s', // 24h
         },
+
+      /* &:is(textarea) */
+      // '&[data-as="textarea"]': {
+      //   resize: 'none',
+      // },
+
+      '&::placeholder': {
+        color: 'var(--input-placeholder-color)',
       },
+
+      // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
+      //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+      //   /* enabled */
+      //   &:not(:invalid):not(:disabled):not(:read-only) {
+      //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+      //   }
+      //   /* disabled */
+      //   &:not(:invalid):disabled {
+      //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
+      //   }
+      //   /* invalid */
+      //   &:invalid {
+      //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
+      //   }
+      //   /* readOnly */
+      //   &:read-only {
+      //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
+      //   }
+      // }
     },
   },
 
@@ -83,8 +117,8 @@ export const textInputRules: Rules = {
   },
 
   'text-input-suffix': {
-    'borderTopRightRadius': 0,
-    'borderBottomRightRadius': 0,
+    'borderTopLeftRadius': 0,
+    'borderBottomLeftRadius': 0,
 
     '@nest': {
       '& > span': {
@@ -95,7 +129,7 @@ export const textInputRules: Rules = {
   },
 
   'text-input-presentation': {
-    '--input-box-shadow': 'none',
+    '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
 
     'position': 'absolute',
     'top': 0,
@@ -106,9 +140,11 @@ export const textInputRules: Rules = {
     'pointerEvents': 'none',
     'zIndex': 0,
 
-    'backgroundColor': 'var(--card-bg-color)',
+    'backgroundColor': 'var(--input-bg-color)',
     'boxShadow': 'var(--input-box-shadow)',
 
+    '--input-border-color': 'var(--color-input-default-enabled-border)',
+
     // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
     // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
     // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
@@ -224,3 +260,62 @@ export const textInputRules: Rules = {
     // }
   },
 }
+
+// const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
+
+// const InputRoot = styled.span`
+//   flex: 1;
+//   min-width: 0;
+//   display: block;
+//   position: relative;
+// `
+
+// const Prefix = styled(Card).attrs({forwardedAs: 'span'})`
+//   border-top-right-radius: 0;
+//   border-bottom-right-radius: 0;
+
+//   & > span {
+//     display: block;
+//     margin: -1px;
+//   }
+// `
+
+// const Suffix = styled(Card).attrs({forwardedAs: 'span'})`
+//   border-top-left-radius: 0;
+//   border-bottom-left-radius: 0;
+
+//   & > span {
+//     display: block;
+//     margin: -1px;
+//   }
+// `
+
+// const Input = styled.input<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
+//   responsiveInputPaddingStyle,
+//   textInputBaseStyle,
+//   textInputFontSizeStyle,
+// )
+
+// const Presentation = styled.span<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
+//   responsiveRadiusStyle,
+//   textInputRepresentationStyle,
+// )
+
+// const LeftBox = styled(Box)`
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+// `
+
+// const RightBox = styled(Box)`
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+// `
+
+// const RightCard = styled(Card)`
+//   background-color: transparent;
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+// `

package/src/css/primitives/textInput/textInput.ts

@@ -1,7 +1,15 @@
 import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
-import {ResponsiveProp} from '../../types'
+import {TextInputStyleProps} from './types'
 
-export function textInput(props: {size: ResponsiveProp<number>}): string {
-  return composeClassNames('text-input', _resp('text-input', props.size))
+export function textInput(props: TextInputStyleProps): string {
+  return composeClassNames(
+    'text-input',
+    _resp('text-input', props.size),
+    _resp('text-input-p', props.padding),
+  )
+}
+
+export function textInputElement(): string {
+  return composeClassNames('text-input-element')
 }

package/src/css/primitives/textInput/types.ts

@@ -0,0 +1,8 @@
+import {FontTextSize, Space} from '@sanity/ui/theme'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface TextInputStyleProps {
+  padding: ResponsiveProp<Space>
+  size: ResponsiveProp<FontTextSize>
+}

package/src/css/rules.ts

@@ -1,5 +1,7 @@
 import {breadcrumbsRules} from './components/breadcrumbs/rules'
 import {dialogRules} from './components/dialog/rules'
+import {menuRules} from './components/menu/rules'
+import {skeletonRules} from './components/skeleton/rules'
 import {avatarRules} from './primitives/avatar/rules'
 import {badgeRules} from './primitives/badge/rules'
 import {boxRules} from './primitives/box/rules'
@@ -31,26 +33,11 @@ import {gapRules} from './styles/gap/rules'
 import {gridRules} from './styles/grid/rules'
 import {gridItemRules} from './styles/gridItem/rules'
 import {heightRules} from './styles/height/rules'
-import {
-  marginBottomRules,
-  marginLeftRules,
-  marginRightRules,
-  marginRules,
-  marginTopRules,
-  marginXRules,
-  marginYRules,
-} from './styles/margin/rules'
+import {marginRules} from './styles/margin/rules'
 import {maxWidthRules} from './styles/maxWidth/rules'
+import {outlineRules} from './styles/outline/rules'
 import {overflowRules} from './styles/overflow/rules'
-import {
-  paddingBottomRules,
-  paddingLeftRules,
-  paddingRightRules,
-  paddingRules,
-  paddingTopRules,
-  paddingXRules,
-  paddingYRules,
-} from './styles/padding/rules'
+import {paddingRules} from './styles/padding/rules'
 import {pointerEventsRules} from './styles/pointerEvents/rules'
 import {positionRules} from './styles/position/rules'
 import {radiusRules} from './styles/radius/rules'
@@ -59,32 +46,21 @@ import {widthRules} from './styles/width/rules'
 import {type Rules} from './types'
 
 export const rules: Rules = {
-  // styless
+  // styles
+  ...borderRules,
   ...displayRules,
-  ...flexRules,
   ...flexItemRules,
-  ...gridItemRules,
-  ...borderRules,
-  ...paddingRules,
-  ...paddingXRules,
-  ...paddingYRules,
-  ...paddingTopRules,
-  ...paddingRightRules,
-  ...paddingBottomRules,
-  ...paddingLeftRules,
-  ...pointerEventsRules,
-  ...marginRules,
-  ...marginXRules,
-  ...marginYRules,
-  ...marginTopRules,
-  ...marginRightRules,
-  ...marginBottomRules,
-  ...marginLeftRules,
+  ...flexRules,
   ...fontRules,
   ...gapRules,
+  ...gridItemRules,
   ...gridRules,
   ...heightRules,
+  ...marginRules,
+  ...outlineRules,
   ...overflowRules,
+  ...paddingRules,
+  ...pointerEventsRules,
   ...positionRules,
   ...radiusRules,
   ...shadowRules,
@@ -109,13 +85,15 @@ export const rules: Rules = {
   ...selectableRules,
   ...spinnerRules,
   ...switchRules,
-  ...textRules,
   ...textAreaRules,
   ...textInputRules,
+  ...textRules,
   ...tokenRules,
   ...tooltipRules,
 
   // components
   ...breadcrumbsRules,
   ...dialogRules,
+  ...menuRules,
+  ...skeletonRules,
 }

package/src/css/styles/font/font.ts

@@ -3,10 +3,15 @@ import {composeClassNames} from '../../composeClassNames'
 import {FontStyleProps} from './types'
 
 const prefixes = {
+  align: 'text-align',
   weight: 'font',
-}
+} as const
 
 /** @public */
 export function font(props: FontStyleProps): string {
-  return composeClassNames('font', _resp(prefixes.weight, props.weight))
+  return composeClassNames(
+    'font',
+    props.weight && `${prefixes.weight}-${props.weight}`,
+    _resp(prefixes.align, props.align),
+  )
 }

package/src/css/styles/font/rules.ts

@@ -1,3 +1,4 @@
+import {responsiveRules} from '../../responsiveRules'
 import {type Rules} from '../../types'
 
 export const fontRules: Rules = {
@@ -67,6 +68,28 @@ export const fontRules: Rules = {
   'font-bold': {
     '--font-weight': 'var(--font-weight-bold)',
   },
+
+  // align
+
+  ...responsiveRules('text-align-initial', {
+    textAlign: 'initial',
+  }),
+
+  ...responsiveRules('text-align-left', {
+    textAlign: 'left',
+  }),
+
+  ...responsiveRules('text-align-center', {
+    textAlign: 'center',
+  }),
+
+  ...responsiveRules('text-align-right', {
+    textAlign: 'right',
+  }),
+
+  ...responsiveRules('text-align-justify', {
+    textAlign: 'justify',
+  }),
 }
 
 // .font {

package/src/css/styles/font/types.ts

@@ -1,6 +1,12 @@
 import {FontWeight} from '@sanity/ui/theme'
 
+/**
+ * @public
+ */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
 /** @public */
 export interface FontStyleProps {
+  align?: TextAlign
   weight?: FontWeight
 }

package/src/css/styles/gap/rules.ts

@@ -7,8 +7,8 @@ export const gapRules: Rules = {
   ...SPACE.reduce<Rules>((acc, space) => {
     return {
       ...acc,
-      ...responsiveRules(`g-${space}`, {
-        gap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
+      ...responsiveRules(`g-${space}`.replace('.', '_'), {
+        gap: vars.space[space],
       }),
     }
   }, {}),
@@ -16,8 +16,8 @@ export const gapRules: Rules = {
   ...SPACE.reduce<Rules>((acc, space) => {
     return {
       ...acc,
-      ...responsiveRules(`gx-${space}`, {
-        columnGap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
+      ...responsiveRules(`gx-${space}`.replace('.', '_'), {
+        columnGap: vars.space[space],
       }),
     }
   }, {}),
@@ -25,8 +25,8 @@ export const gapRules: Rules = {
   ...SPACE.reduce<Rules>((acc, space) => {
     return {
       ...acc,
-      ...responsiveRules(`gy-${space}`, {
-        rowGap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
+      ...responsiveRules(`gy-${space}`.replace('.', '_'), {
+        rowGap: vars.space[space],
       }),
     }
   }, {}),

package/src/css/styles/grid/grid.ts

@@ -0,0 +1,13 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {GridStyleProps} from './types'
+
+export function grid(props: GridStyleProps): string {
+  return composeClassNames(
+    _resp('auto-cols', props.autoCols),
+    _resp('auto-rows', props.autoRows),
+    _resp('auto-flow', props.autoFlow),
+    _resp('columns', props.columns),
+    _resp('rows', props.rows),
+  )
+}

package/src/css/styles/grid/index.ts

@@ -0,0 +1,2 @@
+export * from './grid'
+export * from './types'

package/src/css/styles/grid/rules.ts

@@ -18,7 +18,7 @@ export const gridRules: Rules = {
   ...responsiveRules('auto-rows-auto', {gridAutoRows: 'auto'}),
   ...responsiveRules('auto-rows-min', {gridAutoRows: 'min-content'}),
   ...responsiveRules('auto-rows-max', {gridAutoRows: 'max-content'}),
-  // ...responsiveRules('auto-rows-fr', {gridAutoRows: 'fr'}),
+  ...responsiveRules('auto-rows-fr', {gridAutoRows: 'minmax(0, 1fr)'}),
 
   // columns
   ...responsiveRules('columns-1', {gridTemplateColumns: 'repeat(1, 1fr)'}),
@@ -32,4 +32,115 @@ export const gridRules: Rules = {
   ...responsiveRules('columns-9', {gridTemplateColumns: 'repeat(9, 1fr)'}),
   ...responsiveRules('columns-10', {gridTemplateColumns: 'repeat(10, 1fr)'}),
   ...responsiveRules('columns-12', {gridTemplateColumns: 'repeat(12, 1fr)'}),
+
+  // rows
+  ...responsiveRules('rows-1', {gridTemplateRows: 'repeat(1, 1fr)'}),
+  ...responsiveRules('rows-2', {gridTemplateRows: 'repeat(2, 1fr)'}),
+  ...responsiveRules('rows-3', {gridTemplateRows: 'repeat(3, 1fr)'}),
+  ...responsiveRules('rows-4', {gridTemplateRows: 'repeat(4, 1fr)'}),
+  ...responsiveRules('rows-5', {gridTemplateRows: 'repeat(5, 1fr)'}),
+  ...responsiveRules('rows-6', {gridTemplateRows: 'repeat(6, 1fr)'}),
+  ...responsiveRules('rows-7', {gridTemplateRows: 'repeat(7, 1fr)'}),
+  ...responsiveRules('rows-8', {gridTemplateRows: 'repeat(8, 1fr)'}),
+  ...responsiveRules('rows-9', {gridTemplateRows: 'repeat(9, 1fr)'}),
+  ...responsiveRules('rows-10', {gridTemplateRows: 'repeat(10, 1fr)'}),
+  ...responsiveRules('rows-12', {gridTemplateRows: 'repeat(12, 1fr)'}),
 }
+
+// import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+// import {rem, _responsive} from '../helpers'
+// import {ThemeProps} from '../types'
+// import {ResponsiveGridStyleProps} from './types'
+
+// const GRID_AUTO_COLUMS = {
+//   auto: 'auto',
+//   min: 'min-content',
+//   max: 'max-content',
+//   fr: 'minmax(0, 1fr)',
+// }
+
+// const GRID_AUTO_ROWS = {
+//   auto: 'auto',
+//   min: 'min-content',
+//   max: 'max-content',
+//   fr: 'minmax(0, 1fr)',
+// }
+
+// export function responsiveGridStyle(): Array<
+//   CSSObject | ((props: ResponsiveGridStyleProps & ThemeProps) => CSSObject[])
+// > {
+//   return [
+//     responsiveGridAutoFlowStyle,
+//     responsiveGridAutoRowsStyle,
+//     responsiveGridAutoColsStyle,
+//     responsiveGridColumnsStyle,
+//     responsiveGridRowsStyle,
+//     responsiveGridGapStyle,
+//     responsiveGridGapXStyle,
+//     responsiveGridGapYStyle,
+//   ]
+// }
+
+// function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoFlow, (autoFlow) => ({
+//     gridAutoFlow: autoFlow,
+//   }))
+// }
+
+// function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoRows, (autoRows) => ({
+//     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
+//   }))
+// }
+
+// function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$autoCols, (autoCols) => ({
+//     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
+//   }))
+// }
+
+// function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$columns, (columns) => ({
+//     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
+//   }))
+// }
+
+// function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$rows, (rows) => ({
+//     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
+//   }))
+// }
+
+// function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gap, (gap) => ({
+//     gridGap: gap ? rem(space[gap]) : undefined,
+//   }))
+// }
+
+// function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gapX, (gapX) => ({
+//     columnGap: gapX ? rem(space[gapX]) : undefined,
+//   }))
+// }
+
+// function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
+//   const {media, space} = getTheme_v2(props.theme)
+
+//   return _responsive(media, props.$gapY, (gapY) => ({
+//     rowGap: gapY ? rem(space[gapY]) : undefined,
+//   }))
+// }

package/src/css/styles/grid/types.ts

@@ -0,0 +1,29 @@
+import {ResponsiveProp} from '../../types'
+
+/**
+ * @public
+ */
+export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+
+export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+
+/** @public */
+export interface GridStyleProps {
+  autoRows?: ResponsiveProp<GridAutoRows>
+  autoCols?: ResponsiveProp<GridAutoCols>
+  autoFlow?: ResponsiveProp<GridAutoFlow>
+  columns?: ResponsiveProp<Columns>
+  rows?: ResponsiveProp<Rows>
+}