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

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

@@ -1,224 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const textInputRules: Rules = {
-  'text-input': {
-    '--font-family': vars.font.text.family,
-
-    '@nest': {
-      '& > span': {
-        borderRadius: 'inherit',
-      },
-    },
-  },
-
-  'text-input-prefix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderLeft': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopRightRadius': '0 !important',
-    'borderBottomRightRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  'text-input-suffix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderRight': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopLeftRadius': '0 !important',
-    'borderBottomLeftRadius': '0 !important',
-
-    '@nest': {
-      '& > span': {
-        display: 'block',
-        margin: '-1px',
-      },
-    },
-  },
-
-  'text-input-presentation': {
-    // position: 'absolute',
-    // top: 0,
-    // left: 0,
-    // right: 0,
-    // bottom: 0,
-    // display: 'block',
-    // pointerEvents: 'none',
-    // zIndex: 0,
-    // backgroundColor: 'var(--input-bg-color)',
-    // 'boxShadow': 'var(--input-box-shadow)',
-    // '--input-border-color': 'var(--color-input-default-enabled-border)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-    //   --card-bg-color: ${color.input.default.enabled.bg};
-    //   --card-fg-color: ${color.input.default.enabled.fg};
-    //   /* enabled */
-    //   *:not(:disabled) + &[data-border] {
-    //     --input-box-shadow: ${focusRingBorderStyle({
-    //       color: color.input.default.enabled.border,
-    //       width: input.border.width,
-    //     })};
-    //   }
-    //   /* invalid */
-    //   *:not(:disabled):invalid + & {
-    //     --card-bg-color: ${color.input.invalid.enabled.bg};
-    //     --card-fg-color: ${color.input.invalid.enabled.fg};
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.enabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* focused */
-    //   *:not(:disabled):focus + & {
-    //     &[data-border] {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({
-    //             border: {color: color.input.default.enabled.border, width: input.border.width},
-    //             focusRing: input.text.focusRing,
-    //           })};
-    //     }
-    //     &:not([data-border]) {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({focusRing: input.text.focusRing})};
-    //     }
-    //   }
-    //   /* disabled */
-    //   *:not(:invalid):disabled + & {
-    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   *:invalid:disabled + & {
-    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* readOnly */
-    //   *:not(:invalid):read-only + & {
-    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
-    //   }
-    //   *:invalid:read-only + & {
-    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-    //   }
-    //   /* hovered */
-    //   @media (hover: hover) {
-    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-    //       --card-bg-color: ${color.input.default.hovered.bg};
-    //       --card-fg-color: ${color.input.default.hovered.fg};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):hover + & {
-    //       --card-bg-color: ${color.input.invalid.hovered.bg};
-    //       --card-fg-color: ${color.input.invalid.hovered.fg};
-    //     }
-    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    // }
-  },
-}
-
-// 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/token/rules.ts

@@ -1,45 +0,0 @@
-import type {Rules} from '../../types'
-
-export const tokenRules: Rules = {
-  token: {
-    '@nest': {
-      '&.atrule': {color: 'var(--color-token-atrule)'},
-      '&.attr-name': {color: 'var(--color-token-attr-name)'},
-      '&.attr-value': {color: 'var(--color-token-attr-value)'},
-      '&.attribute': {color: 'var(--color-token-attribute)'},
-      '&.boolean': {color: 'var(--color-token-boolean)'},
-      '&.builtin': {color: 'var(--color-token-builtin)'},
-      '&.cdata': {color: 'var(--color-token-cdata)'},
-      '&.char': {color: 'var(--color-token-char)'},
-      '&.class': {color: 'var(--color-token-class)'},
-      '&.class-name': {color: 'var(--color-token-class-name)'},
-      '&.comment': {color: 'var(--color-token-comment)'},
-      '&.constant': {color: 'var(--color-token-constant)'},
-      '&.deleted': {color: 'var(--color-token-deleted)'},
-      '&.doctype': {color: 'var(--color-token-doctype)'},
-      '&.entity': {color: 'var(--color-token-entity)'},
-      '&.function': {color: 'var(--color-token-function)'},
-      '&.hexcode': {color: 'var(--color-token-hexcode)'},
-      '&.id': {color: 'var(--color-token-id)'},
-      '&.important': {color: 'var(--color-token-important)'},
-      '&.inserted': {color: 'var(--color-token-inserted)'},
-      '&.keyword': {color: 'var(--color-token-keyword)'},
-      '&.number': {color: 'var(--color-token-number)'},
-      '&.operator': {color: 'var(--color-token-operator)'},
-      '&.prolog': {color: 'var(--color-token-prolog)'},
-      '&.property': {color: 'var(--color-token-property)'},
-      '&.pseudo-class': {color: 'var(--color-token-pseudo-class)'},
-      '&.pseudo-element': {color: 'var(--color-token-pseudo-element)'},
-      '&.punctuation': {color: 'var(--color-token-punctuation)'},
-      '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
-      '&.regex': {color: 'var(--color-token-regex)'},
-      '&.selector': {color: 'var(--color-token-selector)'},
-      '&.string': {color: 'var(--color-token-string)'},
-      '&.symbol': {color: 'var(--color-token-symbol)'},
-      '&.tag': {color: 'var(--color-token-tag)'},
-      '&.unit': {color: 'var(--color-token-unit)'},
-      '&.url': {color: 'var(--color-token-url)'},
-      '&.variable': {color: 'var(--color-token-variable)'},
-    },
-  },
-}

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

@@ -1,19 +0,0 @@
-import {Rules} from '../../types'
-
-export const tooltipRules: Rules = {
-  'tooltip': {
-    pointerEvents: 'none',
-  },
-
-  'tooltip-card': {
-    'willChange': 'transform',
-
-    '@nest': {
-      '&[data-animate] > *': {
-        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        opacity: `var(--motion-content-opacity, 1)`,
-        willChange: 'opacity',
-      },
-    },
-  },
-}

package/src/css/responsiveRules.ts

@@ -1,25 +0,0 @@
-import {type Properties, type Rules} from './types'
-
-export function responsiveRules(className: string, props: Properties): Rules {
-  return {
-    [className]: props,
-    [`_1:${className}`]: {
-      '@media': {'screen and (min-width: 360px)': props},
-    },
-    [`_2:${className}`]: {
-      '@media': {'screen and (min-width: 600px)': props},
-    },
-    [`_3:${className}`]: {
-      '@media': {'screen and (min-width: 900px)': props},
-    },
-    [`_4:${className}`]: {
-      '@media': {'screen and (min-width: 1200px)': props},
-    },
-    [`_5:${className}`]: {
-      '@media': {'screen and (min-width: 1800px)': props},
-    },
-    [`_6:${className}`]: {
-      '@media': {'screen and (min-width: 2400px)': props},
-    },
-  }
-}

package/src/css/rules.ts

@@ -1,113 +0,0 @@
-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 {toastRules} from './components/toast/rules'
-import {_arrowRules} from './primitives/_arrow/rules'
-import {_inputRules} from './primitives/_input/rules'
-import {_selectableRules} from './primitives/_selectable/rules'
-import {avatarRules} from './primitives/avatar/rules'
-import {badgeRules} from './primitives/badge/rules'
-import {boxRules} from './primitives/box/rules'
-import {buttonRules} from './primitives/button/rules'
-import {cardRules} from './primitives/card/rules'
-import {checkboxRules} from './primitives/checkbox/rules'
-import {codeRules} from './primitives/code/rules'
-import {containerRules} from './primitives/container/rules'
-import {headingRules} from './primitives/heading/rules'
-import {kbdRules} from './primitives/kbd/rules'
-import {labelRules} from './primitives/label/rules'
-import {popoverRules} from './primitives/popover/rules'
-import {radioRules} from './primitives/radio/rules'
-import {selectRules} from './primitives/select/rules'
-import {spinnerRules} from './primitives/spinner/rules'
-import {switchRules} from './primitives/switch/rules'
-import {textRules} from './primitives/text/rules'
-import {textAreaRules} from './primitives/textArea/rules'
-import {textInputRules} from './primitives/textInput/rules'
-import {tokenRules} from './primitives/token/rules'
-import {tooltipRules} from './primitives/tooltip/rules'
-import {borderRules} from './styles/border/rules'
-import {displayRules} from './styles/display/rules'
-import {flexRules} from './styles/flex/rules'
-import {flexItemRules} from './styles/flexItem/rules'
-import {fontRules} from './styles/font/rules'
-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 {insetRules} from './styles/inset/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 {paddingRules} from './styles/padding/rules'
-import {pointerEventsRules} from './styles/pointerEvents/rules'
-import {positionRules} from './styles/position/rules'
-import {radiusRules} from './styles/radius/rules'
-import {shadowRules} from './styles/shadow/rules'
-import {textOverflowRules} from './styles/textOverflow/rules'
-import {widthRules} from './styles/width/rules'
-import {type Rules} from './types'
-import {srOnlyRules} from './utils/srOnly/rules'
-
-export const rules: Rules = {
-  // styles
-  ...borderRules,
-  ...displayRules,
-  ...flexItemRules,
-  ...flexRules,
-  ...fontRules,
-  ...gapRules,
-  ...gridItemRules,
-  ...gridRules,
-  ...heightRules,
-  ...insetRules,
-  ...marginRules,
-  ...outlineRules,
-  ...overflowRules,
-  ...paddingRules,
-  ...pointerEventsRules,
-  ...positionRules,
-  ...radiusRules,
-  ...shadowRules,
-  ...widthRules,
-
-  // utils
-  ...srOnlyRules,
-
-  // primitives
-  ..._arrowRules,
-  ..._inputRules,
-  ..._selectableRules,
-  ...avatarRules,
-  ...badgeRules,
-  ...boxRules,
-  ...buttonRules,
-  ...cardRules,
-  ...checkboxRules,
-  ...codeRules,
-  ...containerRules,
-  ...headingRules,
-  ...kbdRules,
-  ...labelRules,
-  ...maxWidthRules,
-  ...popoverRules,
-  ...radioRules,
-  ...selectRules,
-  ...spinnerRules,
-  ...switchRules,
-  ...textAreaRules,
-  ...textInputRules,
-  ...textOverflowRules,
-  ...textRules,
-  ...tokenRules,
-  ...tooltipRules,
-
-  // components
-  ...breadcrumbsRules,
-  ...dialogRules,
-  ...menuRules,
-  ...skeletonRules,
-  ...toastRules,
-}

package/src/css/styles/border/border.ts

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

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

@@ -1,24 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-
-export const borderRules: Rules = {
-  ...responsiveRules('border', {
-    border: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-t', {
-    borderTop: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-r', {
-    borderRight: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-b', {
-    borderBottom: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-l', {
-    borderLeft: '1px solid var(--card-border-color)',
-  }),
-}

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

@@ -1,10 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface BorderStyleProps {
-  border?: ResponsiveProp<boolean>
-  borderTop?: ResponsiveProp<boolean>
-  borderRight?: ResponsiveProp<boolean>
-  borderBottom?: ResponsiveProp<boolean>
-  borderLeft?: ResponsiveProp<boolean>
-}

package/src/css/styles/display/display.ts

@@ -1,7 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {DisplayStyleProps} from './types'
-
-export function display(props: DisplayStyleProps): string | undefined {
-  return composeClassNames(_resp(undefined, props.display))
-}

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

@@ -1,62 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
-
-export const displayRules: Rules = {
-  ...responsiveRules('block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  }),
-
-  ...responsiveRules('inline-block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-    },
-  }),
-
-  ...responsiveRules('flex', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'flex',
-      },
-    },
-  }),
-
-  ...responsiveRules('inline-flex', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-flex',
-      },
-    },
-  }),
-
-  ...responsiveRules('grid', {
-    'gridTemplateRows': 'auto',
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'grid',
-      },
-    },
-  }),
-
-  ...responsiveRules('inline-grid', {
-    'gridTemplateRows': 'auto',
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-grid',
-      },
-    },
-  }),
-
-  ...responsiveRules('none', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'none',
-      },
-    },
-  }),
-}

package/src/css/styles/flex/flex.ts

@@ -1,20 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FlexStyleProps} from './types'
-
-const prefixes = {
-  align: `align`, // `flex-align`
-  direction: undefined, // `
-  justify: `justify`, // `flex-justify`
-  wrap: `wrap`, // `flex-wrap`
-}
-
-/** @public */
-export function flex(props: FlexStyleProps): string | undefined {
-  return composeClassNames(
-    _resp(prefixes.align, props.align),
-    _resp(prefixes.direction, props.direction),
-    _resp(prefixes.justify, props.justify),
-    _resp(prefixes.wrap, props.wrap),
-  )
-}

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

@@ -1,28 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
-
-export const flexRules: Rules = {
-  // direction
-  ...responsiveRules('row', {flexDirection: 'row'}),
-  ...responsiveRules('column', {flexDirection: 'column'}),
-
-  // align
-  ...responsiveRules('align-flex-start', {alignItems: 'flex-start'}),
-  ...responsiveRules('align-flex-end', {alignItems: 'end'}),
-  ...responsiveRules('align-center', {alignItems: 'center'}),
-  ...responsiveRules('align-stretch', {alignItems: 'stretch'}),
-  ...responsiveRules('align-baseline', {alignItems: 'baseline'}),
-
-  // justify
-  ...responsiveRules('justify-flex-start', {justifyContent: 'flex-start'}),
-  ...responsiveRules('justify-flex-end', {justifyContent: 'flex-end'}),
-  ...responsiveRules('justify-center', {justifyContent: 'center'}),
-  ...responsiveRules('justify-between', {justifyContent: 'space-between'}),
-  ...responsiveRules('justify-around', {justifyContent: 'space-around'}),
-  ...responsiveRules('justify-evenly', {justifyContent: 'space-evenly'}),
-
-  // wrap
-  ...responsiveRules('wrap-nowrap', {flexWrap: 'nowrap'}),
-  ...responsiveRules('wrap-wrap', {flexWrap: 'wrap'}),
-  ...responsiveRules('wrap-reverse', {flexWrap: 'wrap-reverse'}),
-}

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

@@ -1,35 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-
-/**
- * @public
- */
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
-
-/**
- * @public
- */
-export type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-
-/**
- * @public
- */
-export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
-
-/** @public */
-export interface FlexStyleProps {
-  align?: ResponsiveProp<FlexAlign>
-  direction?: ResponsiveProp<FlexDirection>
-  justify?: ResponsiveProp<FlexJustify>
-  wrap?: ResponsiveProp<FlexWrap>
-}

package/src/css/styles/flexItem/flexItem.ts

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

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

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

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

@@ -1,12 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
-
-export const flexItemRules: Rules = {
-  ...responsiveRules('flex-none', {flex: 'none'}),
-  ...responsiveRules('flex-auto', {flex: 'auto'}),
-  ...responsiveRules('flex-1', {flex: 1}),
-  ...responsiveRules('flex-2', {flex: 2}),
-  ...responsiveRules('flex-3', {flex: 3}),
-  ...responsiveRules('flex-4', {flex: 4}),
-  ...responsiveRules('flex-5', {flex: 5}),
-}