@sanity/ui 3.0.0-static.23 → 3.0.0-static.24

package/src/css/props/gridColumnStart/gridColumnStart.css.ts

@@ -4,43 +4,43 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridColumnStart} from './types'
 
 export const options: ResponsiveRuleOptions<GridColumnStart> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     gridColumnStart: 'auto',
   }),
-  1: _responsiveStyle(layers.utils, {
+  1: _responsiveStyle(layers.props, {
     gridColumnStart: '1',
   }),
-  2: _responsiveStyle(layers.utils, {
+  2: _responsiveStyle(layers.props, {
     gridColumnStart: '2',
   }),
-  3: _responsiveStyle(layers.utils, {
+  3: _responsiveStyle(layers.props, {
     gridColumnStart: '3',
   }),
-  4: _responsiveStyle(layers.utils, {
+  4: _responsiveStyle(layers.props, {
     gridColumnStart: '4',
   }),
-  5: _responsiveStyle(layers.utils, {
+  5: _responsiveStyle(layers.props, {
     gridColumnStart: '5',
   }),
-  6: _responsiveStyle(layers.utils, {
+  6: _responsiveStyle(layers.props, {
     gridColumnStart: '6',
   }),
-  7: _responsiveStyle(layers.utils, {
+  7: _responsiveStyle(layers.props, {
     gridColumnStart: '7',
   }),
-  8: _responsiveStyle(layers.utils, {
+  8: _responsiveStyle(layers.props, {
     gridColumnStart: '8',
   }),
-  9: _responsiveStyle(layers.utils, {
+  9: _responsiveStyle(layers.props, {
     gridColumnStart: '9',
   }),
-  10: _responsiveStyle(layers.utils, {
+  10: _responsiveStyle(layers.props, {
     gridColumnStart: '10',
   }),
-  11: _responsiveStyle(layers.utils, {
+  11: _responsiveStyle(layers.props, {
     gridColumnStart: '11',
   }),
-  12: _responsiveStyle(layers.utils, {
+  12: _responsiveStyle(layers.props, {
     gridColumnStart: '12',
   }),
 }

package/src/css/props/gridRow/gridRow.css.ts

@@ -4,46 +4,46 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridRow} from './types'
 
 export const options: ResponsiveRuleOptions<GridRow> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     gridRow: 'auto',
   }),
-  full: _responsiveStyle(layers.utils, {
+  full: _responsiveStyle(layers.props, {
     gridRow: '1 / -1',
   }),
-  1: _responsiveStyle(layers.utils, {
+  1: _responsiveStyle(layers.props, {
     gridRow: 'span 1 / span 1',
   }),
-  2: _responsiveStyle(layers.utils, {
+  2: _responsiveStyle(layers.props, {
     gridRow: 'span 2 / span 2',
   }),
-  3: _responsiveStyle(layers.utils, {
+  3: _responsiveStyle(layers.props, {
     gridRow: 'span 3 / span 3',
   }),
-  4: _responsiveStyle(layers.utils, {
+  4: _responsiveStyle(layers.props, {
     gridRow: 'span 4 / span 4',
   }),
-  5: _responsiveStyle(layers.utils, {
+  5: _responsiveStyle(layers.props, {
     gridRow: 'span 5 / span 5',
   }),
-  6: _responsiveStyle(layers.utils, {
+  6: _responsiveStyle(layers.props, {
     gridRow: 'span 6 / span 6',
   }),
-  7: _responsiveStyle(layers.utils, {
+  7: _responsiveStyle(layers.props, {
     gridRow: 'span 7 / span 7',
   }),
-  8: _responsiveStyle(layers.utils, {
+  8: _responsiveStyle(layers.props, {
     gridRow: 'span 8 / span 8',
   }),
-  9: _responsiveStyle(layers.utils, {
+  9: _responsiveStyle(layers.props, {
     gridRow: 'span 9 / span 9',
   }),
-  10: _responsiveStyle(layers.utils, {
+  10: _responsiveStyle(layers.props, {
     gridRow: 'span 10 / span 10',
   }),
-  11: _responsiveStyle(layers.utils, {
+  11: _responsiveStyle(layers.props, {
     gridRow: 'span 11 / span 11',
   }),
-  12: _responsiveStyle(layers.utils, {
+  12: _responsiveStyle(layers.props, {
     gridRow: 'span 12 / span 12',
   }),
 }

package/src/css/props/gridRowEnd/gridRowEnd.css.ts

@@ -4,43 +4,43 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridRowEnd} from './types'
 
 export const options: ResponsiveRuleOptions<GridRowEnd> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     gridRowEnd: 'auto',
   }),
-  1: _responsiveStyle(layers.utils, {
+  1: _responsiveStyle(layers.props, {
     gridRowEnd: '1',
   }),
-  2: _responsiveStyle(layers.utils, {
+  2: _responsiveStyle(layers.props, {
     gridRowEnd: '2',
   }),
-  3: _responsiveStyle(layers.utils, {
+  3: _responsiveStyle(layers.props, {
     gridRowEnd: '3',
   }),
-  4: _responsiveStyle(layers.utils, {
+  4: _responsiveStyle(layers.props, {
     gridRowEnd: '4',
   }),
-  5: _responsiveStyle(layers.utils, {
+  5: _responsiveStyle(layers.props, {
     gridRowEnd: '5',
   }),
-  6: _responsiveStyle(layers.utils, {
+  6: _responsiveStyle(layers.props, {
     gridRowEnd: '6',
   }),
-  7: _responsiveStyle(layers.utils, {
+  7: _responsiveStyle(layers.props, {
     gridRowEnd: '7',
   }),
-  8: _responsiveStyle(layers.utils, {
+  8: _responsiveStyle(layers.props, {
     gridRowEnd: '8',
   }),
-  9: _responsiveStyle(layers.utils, {
+  9: _responsiveStyle(layers.props, {
     gridRowEnd: '9',
   }),
-  10: _responsiveStyle(layers.utils, {
+  10: _responsiveStyle(layers.props, {
     gridRowEnd: '10',
   }),
-  11: _responsiveStyle(layers.utils, {
+  11: _responsiveStyle(layers.props, {
     gridRowEnd: '11',
   }),
-  12: _responsiveStyle(layers.utils, {
+  12: _responsiveStyle(layers.props, {
     gridRowEnd: '12',
   }),
 }

package/src/css/props/gridRowStart/gridRowStart.css.ts

@@ -4,43 +4,43 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridRowStart} from './types'
 
 export const options: ResponsiveRuleOptions<GridRowStart> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     gridRowStart: 'auto',
   }),
-  1: _responsiveStyle(layers.utils, {
+  1: _responsiveStyle(layers.props, {
     gridRowStart: '1',
   }),
-  2: _responsiveStyle(layers.utils, {
+  2: _responsiveStyle(layers.props, {
     gridRowStart: '2',
   }),
-  3: _responsiveStyle(layers.utils, {
+  3: _responsiveStyle(layers.props, {
     gridRowStart: '3',
   }),
-  4: _responsiveStyle(layers.utils, {
+  4: _responsiveStyle(layers.props, {
     gridRowStart: '4',
   }),
-  5: _responsiveStyle(layers.utils, {
+  5: _responsiveStyle(layers.props, {
     gridRowStart: '5',
   }),
-  6: _responsiveStyle(layers.utils, {
+  6: _responsiveStyle(layers.props, {
     gridRowStart: '6',
   }),
-  7: _responsiveStyle(layers.utils, {
+  7: _responsiveStyle(layers.props, {
     gridRowStart: '7',
   }),
-  8: _responsiveStyle(layers.utils, {
+  8: _responsiveStyle(layers.props, {
     gridRowStart: '8',
   }),
-  9: _responsiveStyle(layers.utils, {
+  9: _responsiveStyle(layers.props, {
     gridRowStart: '9',
   }),
-  10: _responsiveStyle(layers.utils, {
+  10: _responsiveStyle(layers.props, {
     gridRowStart: '10',
   }),
-  11: _responsiveStyle(layers.utils, {
+  11: _responsiveStyle(layers.props, {
     gridRowStart: '11',
   }),
-  12: _responsiveStyle(layers.utils, {
+  12: _responsiveStyle(layers.props, {
     gridRowStart: '12',
   }),
 }

package/src/css/props/gridTemplateColumns/gridTemplateColumns.css.ts

@@ -4,40 +4,40 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridTemplateColumns} from './types'
 
 export const options: ResponsiveRuleOptions<GridTemplateColumns> = {
-  1: _responsiveStyle(layers.utils, {
+  1: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(1, 1fr)',
   }),
-  2: _responsiveStyle(layers.utils, {
+  2: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(2, 1fr)',
   }),
-  3: _responsiveStyle(layers.utils, {
+  3: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(3, 1fr)',
   }),
-  4: _responsiveStyle(layers.utils, {
+  4: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(4, 1fr)',
   }),
-  5: _responsiveStyle(layers.utils, {
+  5: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(5, 1fr)',
   }),
-  6: _responsiveStyle(layers.utils, {
+  6: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(6, 1fr)',
   }),
-  7: _responsiveStyle(layers.utils, {
+  7: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(7, 1fr)',
   }),
-  8: _responsiveStyle(layers.utils, {
+  8: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(8, 1fr)',
   }),
-  9: _responsiveStyle(layers.utils, {
+  9: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(9, 1fr)',
   }),
-  10: _responsiveStyle(layers.utils, {
+  10: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(10, 1fr)',
   }),
-  11: _responsiveStyle(layers.utils, {
+  11: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(11, 1fr)',
   }),
-  12: _responsiveStyle(layers.utils, {
+  12: _responsiveStyle(layers.props, {
     gridTemplateColumns: 'repeat(12, 1fr)',
   }),
 }

package/src/css/props/gridTemplateRows/gridTemplateRows.css.ts

@@ -4,40 +4,40 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridTemplateRows} from './types'
 
 export const options: ResponsiveRuleOptions<GridTemplateRows> = {
-  1: _responsiveStyle(layers.utils, {
+  1: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(1, 1fr)',
   }),
-  2: _responsiveStyle(layers.utils, {
+  2: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(2, 1fr)',
   }),
-  3: _responsiveStyle(layers.utils, {
+  3: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(3, 1fr)',
   }),
-  4: _responsiveStyle(layers.utils, {
+  4: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(4, 1fr)',
   }),
-  5: _responsiveStyle(layers.utils, {
+  5: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(5, 1fr)',
   }),
-  6: _responsiveStyle(layers.utils, {
+  6: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(6, 1fr)',
   }),
-  7: _responsiveStyle(layers.utils, {
+  7: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(7, 1fr)',
   }),
-  8: _responsiveStyle(layers.utils, {
+  8: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(8, 1fr)',
   }),
-  9: _responsiveStyle(layers.utils, {
+  9: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(9, 1fr)',
   }),
-  10: _responsiveStyle(layers.utils, {
+  10: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(10, 1fr)',
   }),
-  11: _responsiveStyle(layers.utils, {
+  11: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(11, 1fr)',
   }),
-  12: _responsiveStyle(layers.utils, {
+  12: _responsiveStyle(layers.props, {
     gridTemplateRows: 'repeat(12, 1fr)',
   }),
 }

package/src/css/props/height/height.css.ts

@@ -4,22 +4,22 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {Height} from './types'
 
 export const options: ResponsiveRuleOptions<Height> = {
-  fill: _responsiveStyle(layers.utils, {
+  fill: _responsiveStyle(layers.props, {
     height: '100%',
   }),
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     height: 'auto',
   }),
-  min: _responsiveStyle(layers.utils, {
+  min: _responsiveStyle(layers.props, {
     height: 'min-content',
   }),
-  max: _responsiveStyle(layers.utils, {
+  max: _responsiveStyle(layers.props, {
     height: 'max-content',
   }),
-  fit: _responsiveStyle(layers.utils, {
+  fit: _responsiveStyle(layers.props, {
     height: 'fit-content',
   }),
-  stretch: _responsiveStyle(layers.utils, {
+  stretch: _responsiveStyle(layers.props, {
     height: 'stretch',
   }),
 }

package/src/css/props/inset/inset.css.ts

@@ -4,7 +4,7 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {Inset} from './types'
 
 export const insetOptions: ResponsiveRuleOptions<Inset> = {
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     top: 0,
     right: 0,
     bottom: 0,
@@ -13,25 +13,25 @@ export const insetOptions: ResponsiveRuleOptions<Inset> = {
 }
 
 export const insetTopOptions: ResponsiveRuleOptions<Inset> = {
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     top: 0,
   }),
 }
 
 export const insetRightOptions: ResponsiveRuleOptions<Inset> = {
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     right: 0,
   }),
 }
 
 export const insetBottomOptions: ResponsiveRuleOptions<Inset> = {
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     bottom: 0,
   }),
 }
 
 export const insetLeftOptions: ResponsiveRuleOptions<Inset> = {
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     left: 0,
   }),
 }

package/src/css/props/justifyContent/justifyContent.css.ts

@@ -4,22 +4,22 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {JustifyContent} from './types'
 
 export const options: ResponsiveRuleOptions<JustifyContent> = {
-  'flex-start': _responsiveStyle(layers.utils, {
+  'flex-start': _responsiveStyle(layers.props, {
     justifyContent: 'flex-start',
   }),
-  'flex-end': _responsiveStyle(layers.utils, {
+  'flex-end': _responsiveStyle(layers.props, {
     justifyContent: 'flex-end',
   }),
-  'center': _responsiveStyle(layers.utils, {
+  'center': _responsiveStyle(layers.props, {
     justifyContent: 'center',
   }),
-  'space-between': _responsiveStyle(layers.utils, {
+  'space-between': _responsiveStyle(layers.props, {
     justifyContent: 'space-between',
   }),
-  'space-around': _responsiveStyle(layers.utils, {
+  'space-around': _responsiveStyle(layers.props, {
     justifyContent: 'space-around',
   }),
-  'space-evenly': _responsiveStyle(layers.utils, {
+  'space-evenly': _responsiveStyle(layers.props, {
     justifyContent: 'space-evenly',
   }),
 }

package/src/css/props/margin/margin.css.ts

@@ -8,14 +8,14 @@ import {vars} from '../../vars.css'
 import type {Margin} from './types'
 
 export const marginOptions: ResponsiveRuleOptions<Margin> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     margin: 'auto',
   }),
 
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         margin: vars.space[index],
       }),
     ]),
@@ -23,7 +23,7 @@ export const marginOptions: ResponsiveRuleOptions<Margin> = {
 }
 
 export const marginXOptions: ResponsiveRuleOptions<Margin> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     marginLeft: 'auto',
     marginRight: 'auto',
   }),
@@ -31,7 +31,7 @@ export const marginXOptions: ResponsiveRuleOptions<Margin> = {
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         marginLeft: vars.space[index],
         marginRight: vars.space[index],
       }),
@@ -40,7 +40,7 @@ export const marginXOptions: ResponsiveRuleOptions<Margin> = {
 }
 
 export const marginYOptions: ResponsiveRuleOptions<Margin> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     marginTop: 'auto',
     marginBottom: 'auto',
   }),
@@ -48,7 +48,7 @@ export const marginYOptions: ResponsiveRuleOptions<Margin> = {
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         marginTop: vars.space[index],
         marginBottom: vars.space[index],
       }),
@@ -57,14 +57,14 @@ export const marginYOptions: ResponsiveRuleOptions<Margin> = {
 }
 
 export const marginTopOptions: ResponsiveRuleOptions<Margin> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     marginTop: 'auto',
   }),
 
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         marginTop: vars.space[index],
       }),
     ]),
@@ -72,14 +72,14 @@ export const marginTopOptions: ResponsiveRuleOptions<Margin> = {
 }
 
 export const marginRightOptions: ResponsiveRuleOptions<Margin> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     marginRight: 'auto',
   }),
 
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         marginRight: vars.space[index],
       }),
     ]),
@@ -87,14 +87,14 @@ export const marginRightOptions: ResponsiveRuleOptions<Margin> = {
 }
 
 export const marginBottomOptions: ResponsiveRuleOptions<Margin> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     marginBottom: 'auto',
   }),
 
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         marginBottom: vars.space[index],
       }),
     ]),
@@ -102,14 +102,14 @@ export const marginBottomOptions: ResponsiveRuleOptions<Margin> = {
 }
 
 export const marginLeftOptions: ResponsiveRuleOptions<Margin> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     marginLeft: 'auto',
   }),
 
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         marginLeft: vars.space[index],
       }),
     ]),

package/src/css/props/maxWidth/maxWidth.css.ts

@@ -5,28 +5,28 @@ import {vars} from '../../vars.css'
 import type {MaxWidth} from './types'
 
 export const options: ResponsiveRuleOptions<MaxWidth> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     maxWidth: 'none',
   }),
-  fill: _responsiveStyle(layers.utils, {
+  fill: _responsiveStyle(layers.props, {
     maxWidth: '100%',
   }),
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     maxWidth: vars.container[0],
   }),
-  1: _responsiveStyle(layers.utils, {
+  1: _responsiveStyle(layers.props, {
     maxWidth: vars.container[1],
   }),
-  2: _responsiveStyle(layers.utils, {
+  2: _responsiveStyle(layers.props, {
     maxWidth: vars.container[2],
   }),
-  3: _responsiveStyle(layers.utils, {
+  3: _responsiveStyle(layers.props, {
     maxWidth: vars.container[3],
   }),
-  4: _responsiveStyle(layers.utils, {
+  4: _responsiveStyle(layers.props, {
     maxWidth: vars.container[4],
   }),
-  5: _responsiveStyle(layers.utils, {
+  5: _responsiveStyle(layers.props, {
     maxWidth: vars.container[5],
   }),
 }

package/src/css/props/minHeight/minHeight.css.ts

@@ -4,10 +4,10 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {MinHeight} from './types'
 
 export const options: ResponsiveRuleOptions<MinHeight> = {
-  full: _responsiveStyle(layers.utils, {
+  full: _responsiveStyle(layers.props, {
     minHeight: '100%',
   }),
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     minHeight: 0,
   }),
 }

package/src/css/props/minWidth/minWidth.css.ts

@@ -4,22 +4,22 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {MinWidth} from './types'
 
 export const options: ResponsiveRuleOptions<MinWidth> = {
-  0: _responsiveStyle(layers.utils, {
+  0: _responsiveStyle(layers.props, {
     minWidth: 0,
   }),
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     minWidth: 'auto',
   }),
-  full: _responsiveStyle(layers.utils, {
+  full: _responsiveStyle(layers.props, {
     minWidth: '100%',
   }),
-  min: _responsiveStyle(layers.utils, {
+  min: _responsiveStyle(layers.props, {
     minWidth: 'min-content',
   }),
-  max: _responsiveStyle(layers.utils, {
+  max: _responsiveStyle(layers.props, {
     minWidth: 'max-content',
   }),
-  fit: _responsiveStyle(layers.utils, {
+  fit: _responsiveStyle(layers.props, {
     minWidth: 'fit-content',
   }),
 }

package/src/css/props/outline/outline.css.ts

@@ -4,7 +4,7 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {Outline} from './types'
 
 export const options: ResponsiveRuleOptions<Outline> = {
-  none: _responsiveStyle(layers.utils, {
+  none: _responsiveStyle(layers.props, {
     outline: 'none',
   }),
 }

package/src/css/props/overflow/overflow.css.ts

@@ -4,13 +4,13 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {Overflow} from './types'
 
 export const options: ResponsiveRuleOptions<Overflow> = {
-  visible: _responsiveStyle(layers.utils, {
+  visible: _responsiveStyle(layers.props, {
     overflow: 'visible',
   }),
-  hidden: _responsiveStyle(layers.utils, {
+  hidden: _responsiveStyle(layers.props, {
     overflow: 'hidden',
   }),
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     overflow: 'auto',
   }),
 }