@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

package/src/css/_system.style.ts

@@ -0,0 +1,166 @@
+import {_mergeStyles} from './_mergeStyles'
+import {borderStyle} from './aspects/border/border.style'
+import {boxSizingStyle} from './aspects/boxSizing/boxSizing.style'
+import {displayStyle} from './aspects/display/display.style'
+import {flexAlignStyle} from './aspects/flex/flexAlign.style'
+import {flexDirectionStyle} from './aspects/flex/flexDirection.style'
+import {flexJustifyStyle} from './aspects/flex/flexJustify.style'
+import {flexWrapStyle} from './aspects/flex/flexWrap.style'
+import {flexStyle} from './aspects/flexItem/flex.style'
+import {fontStyle} from './aspects/font/font.style'
+import {gapStyle} from './aspects/gap/gap.style'
+import {gridAutoColumnsStyle} from './aspects/grid/gridAutoColumns.style'
+import {gridAutoFlowStyle} from './aspects/grid/gridAutoFlow.style'
+import {gridAutoRowsStyle} from './aspects/grid/gridAutoRows.style'
+import {gridColumnsStyle} from './aspects/grid/gridColumns.style'
+import {gridRowsStyle} from './aspects/grid/gridRows.style'
+import {gridColumnStyle} from './aspects/gridItem/gridColumn.style'
+import {gridColumnEndStyle} from './aspects/gridItem/gridColumnEnd.style'
+import {gridColumnStartStyle} from './aspects/gridItem/gridColumnStart.style'
+import {gridRowStyle} from './aspects/gridItem/gridRow.style'
+import {gridRowEndStyle} from './aspects/gridItem/gridRowEnd.style'
+import {gridRowStartStyle} from './aspects/gridItem/gridRowStart.style'
+import {heightStyle} from './aspects/height/height.style'
+import {insetStyle} from './aspects/inset/inset.style'
+import {marginStyle} from './aspects/margin/margin.style'
+import {maxWidthStyle} from './aspects/maxWidth/maxWidth.style'
+import {minHeightStyle} from './aspects/minHeight/minHeight.style'
+import {minWidthStyle} from './aspects/minWidth/minWidth.style'
+import {outlineStyle} from './aspects/outline/outline.style'
+import {overflowStyle} from './aspects/overflow/overflow.style'
+import {paddingStyle} from './aspects/padding/padding.style'
+import {pointerEventsStyle} from './aspects/pointerEvents/pointerEvents.style'
+import {positionStyle} from './aspects/position/position.style'
+import {radiusStyle} from './aspects/radius/radius.style'
+import {shadowStyle} from './aspects/shadow/shadow.style'
+import {textAlignStyle} from './aspects/textAlign/textAlign.style'
+import {textOverflowStyle} from './aspects/textOverflow/textOverflow.style'
+import {widthStyle} from './aspects/width/width.style'
+import {breadcrumbsStyle} from './components/breadcrumbs/breadcrumbs.style'
+import {dialogStyle} from './components/dialog/dialog.style'
+import {menuStyle} from './components/menu/menu.style'
+import {skeletonStyle} from './components/skeleton/skeleton.style'
+import {toastStyle} from './components/toast/toast.style'
+import {treeStyle} from './components/tree/tree.style'
+import {_arrowStyle} from './primitives/_arrow/_arrow.style'
+import {_inputStyle} from './primitives/_input/_input.style'
+import {_selectableStyle} from './primitives/_selectable/_selectable.style'
+import {avatarStyle} from './primitives/avatar/avatar.style'
+import {badgeStyle} from './primitives/badge/badge.style'
+import {boxStyle} from './primitives/box/box.style'
+import {buttonStyle} from './primitives/button/button.style'
+import {cardStyle} from './primitives/card/card.style'
+import {checkboxStyle} from './primitives/checkbox/checkbox.style'
+import {codeStyle} from './primitives/code/code.style'
+import {containerStyle} from './primitives/container/container.style'
+import {headingStyle} from './primitives/heading/heading.style'
+import {kbdStyle} from './primitives/kbd/kbd.style'
+import {labelStyle} from './primitives/label/label.style'
+import {popoverStyle} from './primitives/popover/popover.style'
+import {radioStyle} from './primitives/radio/radio.style'
+import {selectStyle} from './primitives/select/select.style'
+import {spinnerStyle} from './primitives/spinner/spinner.style'
+import {stackStyle} from './primitives/stack/stack.style'
+import {switchStyle} from './primitives/switch/switch.style'
+import {textStyle} from './primitives/text/text.style'
+import {textAreaStyle} from './primitives/textArea/textArea.style'
+import {textInputStyle} from './primitives/textInput/textInput.style'
+import {tokenStyle} from './primitives/token/token.style'
+import {tooltipStyle} from './primitives/tooltip/tooltip.style'
+import {type Style} from './types'
+import {srOnlyStyle} from './utils/srOnly/srOnly.style'
+
+/** @internal */
+export const _systemStyle: Style = _mergeStyles([
+  // NOTE: Order matters in CSS!
+
+  {
+    // define order of layers
+    layers: {
+      palette: {},
+      theme: {},
+      base: {},
+      util: {},
+      primitive: {},
+    },
+  },
+
+  // aspects
+  borderStyle,
+  boxSizingStyle,
+  displayStyle,
+  flexStyle,
+  flexAlignStyle,
+  flexDirectionStyle,
+  flexJustifyStyle,
+  flexWrapStyle,
+  fontStyle,
+  gapStyle,
+  gridAutoColumnsStyle,
+  gridAutoFlowStyle,
+  gridAutoRowsStyle,
+  gridColumnsStyle,
+  gridRowsStyle,
+  gridColumnStyle,
+  gridColumnStartStyle,
+  gridColumnEndStyle,
+  gridRowStyle,
+  gridRowStartStyle,
+  gridRowEndStyle,
+  heightStyle,
+  insetStyle,
+  marginStyle,
+  maxWidthStyle,
+  minHeightStyle,
+  minWidthStyle,
+  outlineStyle,
+  overflowStyle,
+  paddingStyle,
+  pointerEventsStyle,
+  positionStyle,
+  radiusStyle,
+  shadowStyle,
+  textAlignStyle,
+  textOverflowStyle,
+  widthStyle,
+
+  // utils
+  srOnlyStyle,
+
+  // primitives
+  _arrowStyle,
+  _inputStyle,
+  _selectableStyle,
+  avatarStyle,
+  badgeStyle,
+  boxStyle,
+  buttonStyle,
+  cardStyle,
+  checkboxStyle,
+  codeStyle,
+  containerStyle,
+  headingStyle,
+  kbdStyle,
+  labelStyle,
+  maxWidthStyle,
+  popoverStyle,
+  radioStyle,
+  selectStyle,
+  spinnerStyle,
+  stackStyle,
+  switchStyle,
+  textAreaStyle,
+  textInputStyle,
+  textOverflowStyle,
+  textStyle,
+  tokenStyle,
+  tooltipStyle,
+
+  // components
+  breadcrumbsStyle,
+  dialogStyle,
+  menuStyle,
+  skeletonStyle,
+  toastStyle,
+  treeStyle,
+])

package/src/css/aspects/border/border.style.ts

@@ -0,0 +1,13 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'border', {border: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-t', {borderTop: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-r', {borderRight: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-b', {borderBottom: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-l', {borderLeft: `1px solid ${vars.color.border}`})
+
+export const borderStyle: Style = {layers: {util}}

package/src/css/aspects/border/border.ts

@@ -0,0 +1,14 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {BorderStyleProps} from './types'
+
+/** @public */
+export function border(props: BorderStyleProps): string | undefined {
+  return _scopeClassNames(
+    _resp('border', props.border),
+    _resp('border-t', props.borderTop),
+    _resp('border-r', props.borderRight),
+    _resp('border-b', props.borderBottom),
+    _resp('border-l', props.borderLeft),
+  )
+}

package/src/css/{styles → aspects}/border/types.ts

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface BorderStyleProps {

package/src/css/aspects/boxSizing/boxSizing.style.ts

@@ -0,0 +1,10 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'box-border', {boxSizing: 'border-box'})
+
+_responsiveRule(util, 'box-content', {boxSizing: 'content-box'})
+
+export const boxSizingStyle: Style = {layers: {util}}

package/src/css/aspects/boxSizing/boxSizing.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {BoxSizingStyleProps} from './types'
+
+/** @internal */
+export function boxSizing(props: BoxSizingStyleProps): string | undefined {
+  return _scopeClassNames(_resp('box', props.boxSizing))
+}

package/src/css/aspects/boxSizing/index.ts

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

package/src/css/aspects/boxSizing/types.ts

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type BoxSizing = 'content' | 'border'
+
+/** @public */
+export interface BoxSizingStyleProps {
+  boxSizing?: ResponsiveProp<BoxSizing>
+}

package/src/css/aspects/display/display.style.ts

@@ -0,0 +1,34 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'block', {
+  nest: {'&:not([hidden])': {display: 'block'}},
+})
+
+_responsiveRule(util, 'flex', {
+  nest: {'&:not([hidden])': {display: 'flex'}},
+})
+
+_responsiveRule(util, 'grid', {
+  nest: {'&:not([hidden])': {display: 'grid'}},
+})
+
+_responsiveRule(util, 'inline-block', {
+  nest: {'&:not([hidden])': {display: 'inline-block'}},
+})
+
+_responsiveRule(util, 'inline-flex', {
+  nest: {'&:not([hidden])': {display: 'inline-flex'}},
+})
+
+_responsiveRule(util, 'inline-grid', {
+  nest: {'&:not([hidden])': {display: 'inline-grid'}},
+})
+
+_responsiveRule(util, 'none', {
+  nest: {'&:not([hidden])': {display: 'none'}},
+})
+
+export const displayStyle: Style = {layers: {util}}

package/src/css/aspects/display/display.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {DisplayStyleProps} from './types'
+
+/** @internal */
+export function display(props: DisplayStyleProps): string | undefined {
+  return _scopeClassNames(_resp(undefined, props.display))
+}

package/src/css/{styles → aspects}/display/types.ts

@@ -1,8 +1,6 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type Display =
   | 'block'
   | 'inline-block'
@@ -12,6 +10,7 @@ export type Display =
   | 'inline-grid'
   | 'none'
 
+/** @public */
 export interface DisplayStyleProps {
   display?: ResponsiveProp<Display>
 }

package/src/css/aspects/flex/flex.ts

@@ -0,0 +1,13 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {FlexStyleProps} from './types'
+
+/** @public */
+export function flex(props: FlexStyleProps): string | undefined {
+  return _scopeClassNames(
+    _resp('flex-align', props.align),
+    _resp('f', props.direction),
+    _resp('flex-justify', props.justify),
+    _resp('flex', props.wrap),
+  )
+}

package/src/css/aspects/flex/flexAlign.style.ts

@@ -0,0 +1,12 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'flex-align-flex-start', {alignItems: 'flex-start'})
+_responsiveRule(util, 'flex-align-flex-end', {alignItems: 'flex-end'})
+_responsiveRule(util, 'flex-align-center', {alignItems: 'center'})
+_responsiveRule(util, 'flex-align-stretch', {alignItems: 'stretch'})
+_responsiveRule(util, 'flex-align-baseline', {alignItems: 'baseline'})
+
+export const flexAlignStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexDirection.style.ts

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'f-row', {flexDirection: 'row'})
+_responsiveRule(util, 'f-column', {flexDirection: 'column'})
+// _responsiveRule(util, 'f-row-reverse', {flexDirection: 'row-reverse'})
+// _responsiveRule(util, 'f-column-reverse', {flexDirection: 'column-reverse'})
+
+export const flexDirectionStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexJustify.style.ts

@@ -0,0 +1,13 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
+_responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
+_responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
+_responsiveRule(util, 'flex-justify-space-between', {justifyContent: 'space-between'})
+_responsiveRule(util, 'flex-justify-space-around', {justifyContent: 'space-around'})
+_responsiveRule(util, 'flex-justify-space-evenly', {justifyContent: 'space-evenly'})
+
+export const flexJustifyStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexWrap.style.ts

@@ -0,0 +1,10 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'flex-nowrap', {flexWrap: 'nowrap'})
+_responsiveRule(util, 'flex-wrap', {flexWrap: 'wrap'})
+_responsiveRule(util, 'flex-wrap-reverse', {flexWrap: 'wrap-reverse'})
+
+export const flexWrapStyle: Style = {layers: {util}}

package/src/css/{styles → aspects}/flex/types.ts

@@ -1,18 +1,12 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
 
-/**
- * @public
- */
+/** @public */
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
-/**
- * @public
- */
+/** @public */
 export type FlexJustify =
   | 'flex-start'
   | 'flex-end'
@@ -21,9 +15,7 @@ export type FlexJustify =
   | 'space-around'
   | 'space-evenly'
 
-/**
- * @public
- */
+/** @public */
 export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
 /** @public */

package/src/css/aspects/flexItem/flex.style.ts

@@ -0,0 +1,22 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'f-none', {flex: 'none'})
+_responsiveRule(util, 'f-auto', {flex: 'auto'})
+_responsiveRule(util, 'f-initial', {flex: 'initial'})
+_responsiveRule(util, 'f-1', {flex: 1})
+_responsiveRule(util, 'f-2', {flex: 2})
+_responsiveRule(util, 'f-3', {flex: 3})
+_responsiveRule(util, 'f-4', {flex: 4})
+_responsiveRule(util, 'f-5', {flex: 5})
+_responsiveRule(util, 'f-6', {flex: 6})
+_responsiveRule(util, 'f-7', {flex: 7})
+_responsiveRule(util, 'f-8', {flex: 8})
+_responsiveRule(util, 'f-9', {flex: 9})
+_responsiveRule(util, 'f-10', {flex: 10})
+_responsiveRule(util, 'f-11', {flex: 11})
+_responsiveRule(util, 'f-12', {flex: 12})
+
+export const flexStyle: Style = {layers: {util}}

package/src/css/aspects/flexItem/flexItem.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {FlexItemStyleProps} from './types'
+
+/** @public */
+export function flexItem(props: FlexItemStyleProps): string | undefined {
+  return _scopeClassNames(_resp(`f`, props.flex))
+}

package/src/css/aspects/flexItem/types.ts

@@ -0,0 +1,25 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type FlexValue =
+  | 'none'
+  | 'auto'
+  | 'initial'
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+
+/** @public */
+export interface FlexItemStyleProps {
+  flex?: ResponsiveProp<FlexValue>
+}

package/src/css/aspects/font/font.style.ts

@@ -0,0 +1,83 @@
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+export const primitive: StyleRules = {
+  '.font': {
+    fontFamily: vars.font.family,
+    fontFeatureSettings: vars.font.featureSettings,
+    fontSize: vars.font.fontSize,
+    lineHeight: vars.font.lineHeight,
+    letterSpacing: vars.font.letterSpacing,
+    fontWeight: vars.font.fontWeight,
+    transform: `translateY(${vars.font.descenderHeight})`,
+    padding: '1px 0',
+    margin: '0',
+
+    vars: {
+      [varNames.font.capHeight]:
+        `calc(${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight})`,
+      [varNames.font.iconOffset]: `calc((${vars.font.capHeight} - ${vars.font.iconSize}) / 2)`,
+      [varNames.font.customIconOffset]:
+        `calc((${vars.font.capHeight} - ${vars.font.customIconSize}) / 2)`,
+    },
+
+    nest: {
+      '&:before': {
+        content: '""',
+        display: 'block',
+        height: 0,
+        marginTop: `calc((0px - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - 1px)`,
+      },
+
+      '&:after': {
+        content: '""',
+        display: 'block',
+        height: 0,
+        marginBottom: '-1px',
+      },
+
+      '& svg': {
+        // Certain popular CSS libraries changes the defaults for SVG display
+        // Make sure SVGs are rendered as inline elements
+        display: 'inline',
+      },
+
+      '& svg:not([data-sanity-icon])': {
+        fontSize: vars.font.customIconSize,
+        margin: vars.font.customIconOffset,
+      },
+
+      '& [data-sanity-icon]': {
+        fontSize: vars.font.iconSize,
+        margin: vars.font.iconOffset,
+        vectorEffect: 'non-scaling-stroke',
+      },
+    },
+  },
+
+  '.font-regular': {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.regular,
+    },
+  },
+
+  '.font-medium': {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.medium,
+    },
+  },
+
+  '.font-semibold': {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.semibold,
+    },
+  },
+
+  '.font-bold': {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.bold,
+    },
+  },
+}
+
+export const fontStyle: Style = {layers: {primitive}}

package/src/css/aspects/font/font.ts

@@ -0,0 +1,7 @@
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {FontStyleProps} from './types'
+
+/** @public */
+export function font(props: FontStyleProps): string | undefined {
+  return _scopeClassNames('font', props.weight && `font-${props.weight}`)
+}

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

@@ -0,0 +1,6 @@
+import type {FontWeight} from '@sanity/ui/theme'
+
+/** @public */
+export interface FontStyleProps {
+  weight?: FontWeight
+}

package/src/css/aspects/gap/gap.style.ts

@@ -0,0 +1,21 @@
+import {SPACE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `g-${space}`, {gap: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `gx-${space}`, {columnGap: vars.space[space]})
+}
+
+for (const space of SPACE) {
+  _responsiveRule(util, `gy-${space}`, {rowGap: vars.space[space]})
+}
+
+export const gapStyle: Style = {layers: {util}}

package/src/css/aspects/gap/gap.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {GapStyleProps} from './types'
+
+/** @public */
+export function gap(props: GapStyleProps): string | undefined {
+  return _scopeClassNames(_resp(`g`, props.gap), _resp(`gx`, props.gapX), _resp(`gy`, props.gapY))
+}

package/src/css/{styles → aspects}/gap/types.ts

@@ -1,6 +1,6 @@
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface GapStyleProps {

package/src/css/{styles → aspects}/grid/grid.ts

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

package/src/css/aspects/grid/gridAutoColumns.style.ts

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'auto-cols-auto', {gridAutoColumns: 'auto'})
+_responsiveRule(util, 'auto-cols-min', {gridAutoColumns: 'min-content'})
+_responsiveRule(util, 'auto-cols-max', {gridAutoColumns: 'max-content'})
+_responsiveRule(util, 'auto-cols-fr', {gridAutoColumns: 'minmax(0, 1fr)'})
+
+export const gridAutoColumnsStyle: Style = {layers: {util}}

package/src/css/aspects/grid/gridAutoFlow.style.ts

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'auto-flow-row', {gridAutoFlow: 'row'})
+_responsiveRule(util, 'auto-flow-column', {gridAutoFlow: 'column'})
+_responsiveRule(util, 'auto-flow-row-dense', {gridAutoFlow: 'row dense'})
+_responsiveRule(util, 'auto-flow-column-dense', {gridAutoFlow: 'column dense'})
+
+export const gridAutoFlowStyle: Style = {layers: {util}}