@sanity/ui 0.37.12 → 0.37.14-next.6

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -3,6 +3,21 @@ import styled from 'styled-components'
 
 const Root = styled.div`
   position: absolute;
+  pointer-events: none;
+  width: 15px;
+  height: 15px;
+  fill: none;
+
+  :empty + & {
+    display: none;
+  }
+
+  & > svg {
+    display: block;
+    transform-origin: 7.5px 7.5px;
+  }
+
+  /* position: absolute;
   width: 15px;
   height: 15px;
   fill: none;
@@ -16,30 +31,30 @@ const Root = styled.div`
       display: block;
     }
     transform-origin: 7.5px 7.5px;
-  }
+  } */
 
-  [data-popper-placement^='top'] > div > & {
-    bottom: -15px;
+  [data-placement^='top'] > & {
+    bottom: -27px;
   }
 
-  [data-popper-placement^='right'] > div > & {
-    left: -15px;
+  [data-placement^='right'] > & {
+    left: -27px;
 
     & > svg {
       transform: rotate(90deg);
     }
   }
 
-  [data-popper-placement^='left'] > div > & {
-    right: -15px;
+  [data-placement^='left'] > & {
+    right: -27px;
 
     & > svg {
       transform: rotate(-90deg);
     }
   }
 
-  [data-popper-placement^='bottom'] > div > & {
-    top: -15px;
+  [data-placement^='bottom'] > & {
+    top: -27px;
 
     & > svg {
       transform: rotate(180deg);
@@ -64,7 +79,7 @@ export const TooltipArrow = forwardRef(function TooltipArrow(
   const {...restProps} = props
 
   return (
-    <Root {...restProps} ref={ref}>
+    <Root data-ui="Tooltip__arrow" {...restProps} ref={ref}>
       <svg width="15" height="15" viewBox="0 0 15 15">
         <Border d="M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z" />
         <Shape d="M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z" />

package/src/primitives/types.ts

@@ -127,5 +127,5 @@ export interface ResponsiveShadowProps {
  * @public
  */
 export interface ResponsiveWidthProps {
-  width?: number | number[] | 'auto'
+  width?: number | 'auto' | (number | 'auto')[]
 }

package/src/styles/border/borderStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
@@ -15,7 +15,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$border), (value) =>
+  return _responsive(media, props.$border, (value) =>
     value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}}
   )
 }
@@ -24,7 +24,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderTop), (value) =>
+  return _responsive(media, props.$borderTop, (value) =>
     value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}}
   )
 }
@@ -33,7 +33,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderRight), (value) =>
+  return _responsive(media, props.$borderRight, (value) =>
     value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}}
   )
 }
@@ -42,7 +42,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderBottom), (value) =>
+  return _responsive(media, props.$borderBottom, (value) =>
     value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}}
   )
 }
@@ -51,7 +51,7 @@ function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$borderLeft), (value) =>
+  return _responsive(media, props.$borderLeft, (value) =>
     value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}}
   )
 }

package/src/styles/border/types.ts

@@ -2,9 +2,9 @@
  * @internal
  */
 export interface ResponsiveBorderStyleProps {
-  $border?: boolean | boolean[]
-  $borderTop?: boolean | boolean[]
-  $borderRight?: boolean | boolean[]
-  $borderBottom?: boolean | boolean[]
-  $borderLeft?: boolean | boolean[]
+  $border: boolean[]
+  $borderTop: boolean[]
+  $borderRight: boolean[]
+  $borderBottom: boolean[]
+  $borderLeft: boolean[]
 }

package/src/styles/box/boxStyle.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype'
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'
 
@@ -39,7 +39,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$display), (display) => ({
+  return _responsive(media, props.$display, (display) => ({
     '&:not([hidden])': {display},
   }))
 }
@@ -48,7 +48,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$sizing), (sizing) => ({
+  return _responsive(media, props.$sizing, (sizing) => ({
     boxSizing: BOX_SIZING[sizing],
   }))
 }
@@ -57,7 +57,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$height), (height) => ({
+  return _responsive(media, props.$height, (height) => ({
     height: BOX_HEIGHT[height],
   }))
 }
@@ -66,7 +66,7 @@ function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$overflow), (overflow) => ({
+  return _responsive(media, props.$overflow, (overflow) => ({
     overflow,
   }))
 }

package/src/styles/box/types.ts

@@ -4,8 +4,8 @@ import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
  * @internal
  */
 export interface ResponsiveBoxStyleProps {
-  $display?: BoxDisplay | BoxDisplay[]
-  $height?: BoxHeight | BoxHeight[]
-  $overflow?: BoxOverflow | BoxOverflow[]
-  $sizing?: BoxSizing | BoxSizing[]
+  $display: BoxDisplay[]
+  $height: BoxHeight[]
+  $overflow: BoxOverflow[]
+  $sizing: BoxSizing[]
 }

package/src/styles/flex/flexItemStyle.ts

@@ -1,5 +1,6 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {EMPTY_ARRAY} from '../../constants'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'
 
@@ -20,7 +21,7 @@ export function responsiveFlexItemStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$flex), (flex) => {
-    return {flex}
-  })
+  if (!props.$flex) return EMPTY_ARRAY
+
+  return _responsive(media, props.$flex, (flex) => ({flex}))
 }

package/src/styles/flex/flexStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive} from '../helpers'
+import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'
 
@@ -28,7 +28,7 @@ export function responsiveFlexAlignStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$align), (align) => {
+  return _responsive(media, props.$align, (align) => {
     return {alignItems: align}
   })
 }
@@ -37,7 +37,7 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$gap), (gap) => ({
+  return _responsive(media, props.$gap, (gap) => ({
     gap: gap ? rem(space[gap]) : undefined,
   }))
 }
@@ -46,7 +46,7 @@ export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeP
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$wrap), (wrap) => {
+  return _responsive(media, props.$wrap, (wrap) => {
     return {flexWrap: wrap}
   })
 }
@@ -57,7 +57,7 @@ export function responsiveFlexJustifyStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$justify), (justify) => {
+  return _responsive(media, props.$justify, (justify) => {
     return {justifyContent: justify}
   })
 }
@@ -68,7 +68,7 @@ export function responsiveFlexDirectionStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$direction), (direction) => {
+  return _responsive(media, props.$direction, (direction) => {
     return {flexDirection: direction}
   })
 }

package/src/styles/flex/types.ts

@@ -4,18 +4,18 @@ import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../
  * @internal
  */
 export interface ResponsiveFlexStyleProps {
-  $align?: FlexAlign | FlexAlign[]
-  $direction?: FlexDirection | FlexDirection[]
-  $gap?: number | number[]
-  $justify?: FlexJustify | FlexJustify[]
-  $wrap?: FlexWrap | FlexWrap[]
+  $align: FlexAlign[]
+  $direction: FlexDirection[]
+  $gap: number[]
+  $justify: FlexJustify[]
+  $wrap: FlexWrap[]
 }
 
 /**
  * @internal
  */
 export interface ResponsiveFlexItemStyleProps {
-  $flex?: FlexValue | FlexValue[]
+  $flex: FlexValue[]
 }
 
 /**

package/src/styles/font/responsiveFont.ts

@@ -1,6 +1,6 @@
 import {CSSObject} from 'styled-components'
 import {ThemeFontSize, ThemeFontKey} from '../../theme'
-import {getResponsiveProp, rem, responsive} from '../helpers'
+import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFontStyleProps} from './types'
 
@@ -14,7 +14,7 @@ export function responsiveFont(
 ): CSSObject[] {
   const {$size, $weight, theme} = props
   const {fonts, media} = theme.sanity
-  const {family, sizes, weights, horizontalOffset} = fonts[fontKey]
+  const {family, sizes, weights} = fonts[fontKey]
   const fontWeight = ($weight && weights[$weight]) || weights.regular
 
   // @todo: make this configurable
@@ -24,7 +24,7 @@ export function responsiveFont(
     position: 'relative',
     fontFamily: family,
     fontWeight,
-    padding: '1px',
+    padding: '1px 0',
     margin: 0,
 
     '&:before': {
@@ -48,14 +48,12 @@ export function responsiveFont(
     },
   }
 
-  const resp = responsive(media, getResponsiveProp($size), (sizeIndex) =>
-    fontSize(sizes[sizeIndex] || defaultSize, horizontalOffset)
-  )
+  const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
 
   return [base, ...resp]
 }
 
-export function fontSize(size: ThemeFontSize, horizontalOffset?: number): CSSObject {
+export function fontSize(size: ThemeFontSize): CSSObject {
   const {ascenderHeight, descenderHeight, fontSize, iconSize, letterSpacing, lineHeight} = size
   const negHeight = ascenderHeight + descenderHeight
   const capHeight = lineHeight - negHeight
@@ -77,32 +75,14 @@ export function fontSize(size: ThemeFontSize, horizontalOffset?: number): CSSObj
       marginBottom: '-1px',
     },
 
-    '& > code, & > span': {
-      margin: horizontalOffset ? `0 calc(${rem(0 - horizontalOffset * fontSize)} - 1px)` : '0 -1px',
-    },
-
     '& svg:not([data-sanity-icon])': {
       fontSize: `calc(${customIconSize} / 16 * 1rem)`,
-      margin: [
-        // top & bottom
-        rem(customIconOffset),
-        // left & right
-        horizontalOffset
-          ? `calc(${rem(customIconOffset)} + ${rem(horizontalOffset * fontSize)})`
-          : rem(customIconOffset),
-      ].join(' '),
+      margin: rem(customIconOffset),
     },
 
     '& [data-sanity-icon]': {
       fontSize: `calc(${iconSize} / 16 * 1rem)`,
-      margin: [
-        // top & bottom
-        rem(iconOffset),
-        // left & right
-        horizontalOffset
-          ? `calc(${rem(iconOffset)} + ${rem(horizontalOffset * fontSize)})`
-          : rem(iconOffset),
-      ].join(' '),
+      margin: rem(iconOffset),
     },
   }
 }

package/src/styles/font/textAlignStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveTextAlignStyleProps} from './types'
 
@@ -12,7 +12,7 @@ export function responsiveTextAlignStyle(
 ): CSSObject[] {
   const {theme} = props
 
-  return responsive(theme.sanity.media, getResponsiveProp(props.$align), (textAlign) => {
+  return _responsive(theme.sanity.media, props.$align, (textAlign) => {
     return {textAlign}
   })
 }

package/src/styles/font/types.ts

@@ -5,7 +5,7 @@ import {TextAlign} from '../../types'
  * @internal
  */
 export interface ResponsiveFontSizeStyleProps {
-  $size?: number | number[]
+  $size: number[]
 }
 
 /**
@@ -19,7 +19,7 @@ export interface FontWeightStyleProps {
  * @internal
  */
 export interface ResponsiveTextAlignStyleProps {
-  $align?: TextAlign | TextAlign[]
+  $align: TextAlign[]
 }
 
 /**
@@ -27,7 +27,8 @@ export interface ResponsiveTextAlignStyleProps {
  */
 export interface ResponsiveFontStyleProps
   extends FontWeightStyleProps,
-    ResponsiveFontSizeStyleProps {
+    ResponsiveFontSizeStyleProps,
+    ResponsiveTextAlignStyleProps {
   $accent?: boolean
   $muted?: boolean
 }

package/src/styles/grid/gridItemStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, responsive} from '../helpers'
+import {_responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'
 
@@ -30,7 +30,7 @@ function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeP
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$row), (row) => {
+  return _responsive(media, props.$row, (row) => {
     if (typeof row === 'number') {
       return {gridRow: `span ${row} / span ${row}`}
     }
@@ -43,7 +43,7 @@ function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & T
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$rowStart), (rowStart) => ({
+  return _responsive(media, props.$rowStart, (rowStart) => ({
     gridRowStart: rowStart,
   }))
 }
@@ -52,14 +52,14 @@ function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & The
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$rowEnd), (rowEnd) => ({gridRowEnd: rowEnd}))
+  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
 }
 
 function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$column), (column) => {
+  return _responsive(media, props.$column, (column) => {
     if (typeof column === 'number') {
       return {gridColumn: `span ${column} / span ${column}`}
     }
@@ -72,7 +72,7 @@ function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$columnStart), (columnStart) => ({
+  return _responsive(media, props.$columnStart, (columnStart) => ({
     gridColumnStart: columnStart,
   }))
 }
@@ -81,7 +81,7 @@ function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps &
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$columnEnd), (columnEnd) => ({
+  return _responsive(media, props.$columnEnd, (columnEnd) => ({
     gridColumnEnd: columnEnd,
   }))
 }

package/src/styles/grid/gridStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive} from '../helpers'
+import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
 
@@ -46,7 +46,7 @@ function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProp
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$autoFlow), (autoFlow) => ({
+  return _responsive(media, props.$autoFlow, (autoFlow) => ({
     gridAutoFlow: autoFlow,
   }))
 }
@@ -55,7 +55,7 @@ function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProp
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$autoRows), (autoRows) => ({
+  return _responsive(media, props.$autoRows, (autoRows) => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
   }))
 }
@@ -64,7 +64,7 @@ function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProp
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$autoCols), (autoCols) => ({
+  return _responsive(media, props.$autoCols, (autoCols) => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
   }))
 }
@@ -73,7 +73,7 @@ function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$columns), (columns) => ({
+  return _responsive(media, props.$columns, (columns) => ({
     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
   }))
 }
@@ -82,7 +82,7 @@ function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$rows), (rows) => ({
+  return _responsive(media, props.$rows, (rows) => ({
     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
   }))
 }
@@ -91,7 +91,7 @@ function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$gap), (gap) => ({
+  return _responsive(media, props.$gap, (gap) => ({
     gridGap: gap ? rem(space[gap]) : undefined,
   }))
 }
@@ -100,7 +100,7 @@ function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$gapX), (gapX) => ({
+  return _responsive(media, props.$gapX, (gapX) => ({
     columnGap: gapX ? rem(space[gapX]) : undefined,
   }))
 }
@@ -109,7 +109,7 @@ function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$gapY), (gapY) => ({
+  return _responsive(media, props.$gapY, (gapY) => ({
     rowGap: gapY ? rem(space[gapY]) : undefined,
   }))
 }

package/src/styles/grid/types.ts

@@ -14,24 +14,24 @@ import {
  * @internal
  */
 export interface ResponsiveGridStyleProps {
-  $autoRows?: GridAutoRows | GridAutoRows[]
-  $autoCols?: GridAutoCols | GridAutoCols[]
-  $autoFlow?: GridAutoFlow | GridAutoFlow[]
-  $columns?: number | number[]
-  $gap?: number | number[]
-  $gapX?: number | number[]
-  $gapY?: number | number[]
-  $rows?: number | number[]
+  $autoRows: GridAutoRows[]
+  $autoCols: GridAutoCols[]
+  $autoFlow: GridAutoFlow[]
+  $columns: number[]
+  $gap: number[]
+  $gapX: number[]
+  $gapY: number[]
+  $rows: number[]
 }
 
 /**
  * @internal
  */
 export interface ResponsiveGridItemStyleProps {
-  $column?: GridItemColumn | GridItemColumn[]
-  $columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  $columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  $row?: GridItemRow | GridItemRow[]
-  $rowStart?: GridItemRowStart | GridItemRowStart[]
-  $rowEnd?: GridItemRowEnd | GridItemRowEnd[]
+  $column: GridItemColumn[]
+  $columnStart: GridItemColumnStart[]
+  $columnEnd: GridItemColumnEnd[]
+  $row: GridItemRow[]
+  $rowStart: GridItemRowStart[]
+  $rowEnd: GridItemRowEnd[]
 }

package/src/styles/helpers.ts

@@ -5,11 +5,11 @@ import {Theme} from '../theme'
 /**
  * @internal
  */
-export function fillCSSObject(propKeys: string[], value: unknown): CSSObject {
-  return propKeys.reduce((obj: CSSObject, propKey) => {
-    obj[propKey] = value as any
+export function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject {
+  return keys.reduce<CSSObject>((style, key) => {
+    style[key] = value
 
-    return obj
+    return style
   }, {})
 }
 
@@ -25,7 +25,7 @@ export function rem(pixelValue: number): string | 0 {
 /**
  * @internal
  */
-export function responsive<T>(
+export function _responsive<T>(
   media: number[],
   values: T[],
   callback: (value: T, index: number, array: T[]) => CSSObject
@@ -42,7 +42,7 @@ export function responsive<T>(
 /**
  * @internal
  */
-export function getResponsiveProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
   if (val === undefined) return defaultVal || EMPTY_ARRAY
 
   return Array.isArray(val) ? val : [val]
@@ -51,7 +51,7 @@ export function getResponsiveProp<T = number>(val: T | T[] | undefined, defaultV
 /**
  * @internal
  */
-export function getResponsiveSpace(
+export function _getResponsiveSpace(
   theme: Theme,
   props: string[],
   spaceIndexes: number[] = EMPTY_ARRAY
@@ -64,7 +64,7 @@ export function getResponsiveSpace(
     return null
   }
 
-  return responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
-    fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
+  return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
+    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
   )
 }