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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.22",
+  "version": "3.0.0-static.24",
   "keywords": [
     "react",
     "ui",
@@ -128,25 +128,25 @@
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.1.2",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-a11y": "^8.6.14",
+    "@storybook/addon-docs": "^8.6.14",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-links": "^8.6.14",
     "@storybook/addon-mdx-gfm": "^8.6.12",
     "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/addon-themes": "^8.6.14",
     "@storybook/blocks": "^8.6.12",
     "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
     "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^20.12.7",
+    "@types/node": "^22.15.29",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "@types/react-is": "^19.0.0",
@@ -158,6 +158,7 @@
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
+    "cssnano": "^7.0.7",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
@@ -182,17 +183,16 @@
     "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.3",
-    "postcss-merge-at-rules": "^1.2.0",
     "postcss-preset-env": "^10.2.0",
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",
     "refractor": "^4.9.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.10",
     "semantic-release": "^24.2.3",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.12",
+    "storybook": "^8.6.14",
     "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",

package/src/css/layers.css.ts

@@ -3,7 +3,7 @@ import {layer} from '@vanilla-extract/css'
 /** @public */
 export const layers = {
   theme: layer('theme'),
-  utils: layer('utils'),
+  props: layer('props'),
   primitives: layer('primitives'),
   components: layer('components'),
 }

package/src/css/primitives/_input/_input.css.ts

@@ -37,6 +37,7 @@ export const element = _style(layers.primitives, {
   display: 'block',
   boxSizing: 'border-box',
   resize: 'none',
+  // See https://caniuse.com/?search=width%3A%20stretch
   width: ['-moz-available', '-webkit-fill-available', 'stretch'],
 
   selectors: {

package/src/css/primitives/card/card.css.ts

@@ -36,7 +36,8 @@ export const root = _style(layers.primitives, {
       font: 'inherit',
       textAlign: 'inherit',
       border: 'none',
-      width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
+      // See https://caniuse.com/?search=width%3A%20stretch
+      width: ['-moz-available', '-webkit-fill-available', 'stretch'],
     },
 
     'a.&': {

package/src/css/props/alignItems/alignItems.css.ts

@@ -4,19 +4,19 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {AlignItems} from './types'
 
 export const options: ResponsiveRuleOptions<AlignItems> = {
-  'baseline': _responsiveStyle(layers.utils, {
+  'baseline': _responsiveStyle(layers.props, {
     alignItems: 'baseline',
   }),
-  'center': _responsiveStyle(layers.utils, {
+  'center': _responsiveStyle(layers.props, {
     alignItems: 'center',
   }),
-  'flex-end': _responsiveStyle(layers.utils, {
+  'flex-end': _responsiveStyle(layers.props, {
     alignItems: 'flex-end',
   }),
-  'flex-start': _responsiveStyle(layers.utils, {
+  'flex-start': _responsiveStyle(layers.props, {
     alignItems: 'flex-start',
   }),
-  'stretch': _responsiveStyle(layers.utils, {
+  'stretch': _responsiveStyle(layers.props, {
     alignItems: 'stretch',
   }),
 }

package/src/css/props/border/border.css.ts

@@ -5,61 +5,61 @@ import {vars} from '../../vars.css'
 import type {BorderStyle} from './types'
 
 export const borderOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.utils, {
+  solid: _responsiveStyle(layers.props, {
     border: `1px solid ${vars.color.border}`,
   }),
-  muted: _responsiveStyle(layers.utils, {
+  muted: _responsiveStyle(layers.props, {
     border: `1px solid ${vars.color.muted.border}`,
   }),
-  none: _responsiveStyle(layers.utils, {
+  none: _responsiveStyle(layers.props, {
     border: 'none',
   }),
 }
 
 export const borderTopOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.utils, {
+  solid: _responsiveStyle(layers.props, {
     borderTop: `1px solid ${vars.color.border}`,
   }),
-  muted: _responsiveStyle(layers.utils, {
+  muted: _responsiveStyle(layers.props, {
     borderTop: `1px solid ${vars.color.muted.border}`,
   }),
-  none: _responsiveStyle(layers.utils, {
+  none: _responsiveStyle(layers.props, {
     borderTop: 'none',
   }),
 }
 
 export const borderRightOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.utils, {
+  solid: _responsiveStyle(layers.props, {
     borderRight: `1px solid ${vars.color.border}`,
   }),
-  muted: _responsiveStyle(layers.utils, {
+  muted: _responsiveStyle(layers.props, {
     borderRight: `1px solid ${vars.color.muted.border}`,
   }),
-  none: _responsiveStyle(layers.utils, {
+  none: _responsiveStyle(layers.props, {
     borderRight: 'none',
   }),
 }
 
 export const borderBottomOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.utils, {
+  solid: _responsiveStyle(layers.props, {
     borderBottom: `1px solid ${vars.color.border}`,
   }),
-  muted: _responsiveStyle(layers.utils, {
+  muted: _responsiveStyle(layers.props, {
     borderBottom: `1px solid ${vars.color.muted.border}`,
   }),
-  none: _responsiveStyle(layers.utils, {
+  none: _responsiveStyle(layers.props, {
     borderBottom: 'none',
   }),
 }
 
 export const borderLeftOptions: ResponsiveRuleOptions<BorderStyle> = {
-  solid: _responsiveStyle(layers.utils, {
+  solid: _responsiveStyle(layers.props, {
     borderLeft: `1px solid ${vars.color.border}`,
   }),
-  muted: _responsiveStyle(layers.utils, {
+  muted: _responsiveStyle(layers.props, {
     borderLeft: `1px solid ${vars.color.muted.border}`,
   }),
-  none: _responsiveStyle(layers.utils, {
+  none: _responsiveStyle(layers.props, {
     borderLeft: 'none',
   }),
 }

package/src/css/props/boxSizing/boxSizing.css.ts

@@ -2,10 +2,10 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const options = {
-  border: _style(layers.utils, {
+  border: _style(layers.props, {
     boxSizing: 'border-box',
   }),
-  content: _style(layers.utils, {
+  content: _style(layers.props, {
     boxSizing: 'content-box',
   }),
 } as const

package/src/css/props/display/display.css.ts

@@ -4,49 +4,49 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {Display} from './types'
 
 export const options: ResponsiveRuleOptions<Display> = {
-  'block': _responsiveStyle(layers.utils, {
+  'block': _responsiveStyle(layers.props, {
     selectors: {
       '&:not([hidden])': {
         display: 'block',
       },
     },
   }),
-  'flex': _responsiveStyle(layers.utils, {
+  'flex': _responsiveStyle(layers.props, {
     selectors: {
       '&:not([hidden])': {
         display: 'flex',
       },
     },
   }),
-  'grid': _responsiveStyle(layers.utils, {
+  'grid': _responsiveStyle(layers.props, {
     selectors: {
       '&:not([hidden])': {
         display: 'grid',
       },
     },
   }),
-  'inline-block': _responsiveStyle(layers.utils, {
+  'inline-block': _responsiveStyle(layers.props, {
     selectors: {
       '&:not([hidden])': {
         display: 'inline-block',
       },
     },
   }),
-  'inline-flex': _responsiveStyle(layers.utils, {
+  'inline-flex': _responsiveStyle(layers.props, {
     selectors: {
       '&:not([hidden])': {
         display: 'inline-flex',
       },
     },
   }),
-  'inline-grid': _responsiveStyle(layers.utils, {
+  'inline-grid': _responsiveStyle(layers.props, {
     selectors: {
       '&:not([hidden])': {
         display: 'inline-grid',
       },
     },
   }),
-  'none': _responsiveStyle(layers.utils, {
+  'none': _responsiveStyle(layers.props, {
     selectors: {
       '&:not([hidden])': {
         display: 'none',

package/src/css/props/flex/flex.css.ts

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

package/src/css/props/flexDirection/flexDirection.css.ts

@@ -4,16 +4,16 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {FlexDirection} from './types'
 
 export const options: ResponsiveRuleOptions<FlexDirection> = {
-  'row': _responsiveStyle(layers.utils, {
+  'row': _responsiveStyle(layers.props, {
     flexDirection: 'row',
   }),
-  'row-reverse': _responsiveStyle(layers.utils, {
+  'row-reverse': _responsiveStyle(layers.props, {
     flexDirection: 'row-reverse',
   }),
-  'column': _responsiveStyle(layers.utils, {
+  'column': _responsiveStyle(layers.props, {
     flexDirection: 'column',
   }),
-  'column-reverse': _responsiveStyle(layers.utils, {
+  'column-reverse': _responsiveStyle(layers.props, {
     flexDirection: 'column-reverse',
   }),
 }

package/src/css/props/flexWrap/flexWrap.css.ts

@@ -4,13 +4,13 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {FlexWrap} from './types'
 
 export const options: ResponsiveRuleOptions<FlexWrap> = {
-  'wrap': _responsiveStyle(layers.utils, {
+  'wrap': _responsiveStyle(layers.props, {
     flexWrap: 'wrap',
   }),
-  'wrap-reverse': _responsiveStyle(layers.utils, {
+  'wrap-reverse': _responsiveStyle(layers.props, {
     flexWrap: 'wrap-reverse',
   }),
-  'nowrap': _responsiveStyle(layers.utils, {
+  'nowrap': _responsiveStyle(layers.props, {
     flexWrap: 'nowrap',
   }),
 }

package/src/css/props/font/font.css.ts

@@ -4,7 +4,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 import {vars} from '../../vars.css'
 
-export const root = _style(layers.utils, {
+export const root = _style(layers.props, {
   'fontFamily': vars.font.family,
   'fontFeatureSettings': vars.font.featureSettings,
   'fontSize': vars.font.fontSize,
@@ -40,7 +40,7 @@ export const root = _style(layers.utils, {
 
 globalStyle(`${root} svg`, {
   '@layer': {
-    [layers.utils]: {
+    [layers.props]: {
       // Certain popular CSS libraries changes the defaults for SVG display
       // Make sure SVGs are rendered as inline elements
       display: 'inline',
@@ -49,7 +49,7 @@ globalStyle(`${root} svg`, {
 })
 globalStyle(`${root} svg:not([data-sanity-icon])`, {
   '@layer': {
-    [layers.utils]: {
+    [layers.props]: {
       fontSize: vars.font.customIconSize,
       margin: vars.font.customIconOffset,
     },
@@ -58,7 +58,7 @@ globalStyle(`${root} svg:not([data-sanity-icon])`, {
 
 globalStyle(`${root} [data-sanity-icon]`, {
   '@layer': {
-    [layers.utils]: {
+    [layers.props]: {
       fontSize: vars.font.iconSize,
       margin: vars.font.iconOffset,
       // vectorEffect: 'non-scaling-stroke',
@@ -67,25 +67,25 @@ globalStyle(`${root} [data-sanity-icon]`, {
 })
 
 export const weights = {
-  regular: _style(layers.utils, {
+  regular: _style(layers.props, {
     vars: {
       [vars.font.fontWeight]: vars.font.weight.regular,
     },
   }),
 
-  medium: _style(layers.utils, {
+  medium: _style(layers.props, {
     vars: {
       [vars.font.fontWeight]: vars.font.weight.medium,
     },
   }),
 
-  semibold: _style(layers.utils, {
+  semibold: _style(layers.props, {
     vars: {
       [vars.font.fontWeight]: vars.font.weight.semibold,
     },
   }),
 
-  bold: _style(layers.utils, {
+  bold: _style(layers.props, {
     vars: {
       [vars.font.fontWeight]: vars.font.weight.bold,
     },

package/src/css/props/gap/gap.css.ts

@@ -10,7 +10,7 @@ export const gapOptions: ResponsiveRuleOptions<Space> = {
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         gap: vars.space[index],
       }),
     ]),
@@ -21,7 +21,7 @@ export const gapXOptions: ResponsiveRuleOptions<Space> = {
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         columnGap: vars.space[index],
       }),
     ]),
@@ -32,7 +32,7 @@ export const gapYOptions: ResponsiveRuleOptions<Space> = {
   ..._fromEntries(
     SPACE.map((index) => [
       index,
-      _responsiveStyle(layers.utils, {
+      _responsiveStyle(layers.props, {
         rowGap: vars.space[index],
       }),
     ]),

package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts

@@ -4,16 +4,16 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridAutoCols} from './types'
 
 export const options: ResponsiveRuleOptions<GridAutoCols> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     gridAutoColumns: 'auto',
   }),
-  min: _responsiveStyle(layers.utils, {
+  min: _responsiveStyle(layers.props, {
     gridAutoColumns: 'min-content',
   }),
-  max: _responsiveStyle(layers.utils, {
+  max: _responsiveStyle(layers.props, {
     gridAutoColumns: 'max-content',
   }),
-  fr: _responsiveStyle(layers.utils, {
+  fr: _responsiveStyle(layers.props, {
     gridAutoColumns: 'minmax(0, 1fr)',
   }),
 }

package/src/css/props/gridAutoFlow/gridAutoFlow.css.ts

@@ -4,16 +4,16 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridAutoFlow} from './types'
 
 export const options: ResponsiveRuleOptions<GridAutoFlow> = {
-  'row': _responsiveStyle(layers.utils, {
+  'row': _responsiveStyle(layers.props, {
     gridAutoFlow: 'row',
   }),
-  'column': _responsiveStyle(layers.utils, {
+  'column': _responsiveStyle(layers.props, {
     gridAutoFlow: 'column-content',
   }),
-  'row dense': _responsiveStyle(layers.utils, {
+  'row dense': _responsiveStyle(layers.props, {
     gridAutoFlow: 'row dense',
   }),
-  'column dense': _responsiveStyle(layers.utils, {
+  'column dense': _responsiveStyle(layers.props, {
     gridAutoFlow: 'column dense',
   }),
 }

package/src/css/props/gridAutoRows/gridAutoRows.css.ts

@@ -4,16 +4,16 @@ import type {ResponsiveRuleOptions} from '../../types'
 import type {GridAutoRows} from './types'
 
 export const options: ResponsiveRuleOptions<GridAutoRows> = {
-  auto: _responsiveStyle(layers.utils, {
+  auto: _responsiveStyle(layers.props, {
     gridAutoRows: 'auto',
   }),
-  min: _responsiveStyle(layers.utils, {
+  min: _responsiveStyle(layers.props, {
     gridAutoRows: 'min-content',
   }),
-  max: _responsiveStyle(layers.utils, {
+  max: _responsiveStyle(layers.props, {
     gridAutoRows: 'max-content',
   }),
-  fr: _responsiveStyle(layers.utils, {
+  fr: _responsiveStyle(layers.props, {
     gridAutoRows: 'minmax(0, 1fr)',
   }),
 }

package/src/css/props/gridColumn/gridColumn.css.ts

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

package/src/css/props/gridColumnEnd/gridColumnEnd.css.ts

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