curls/dist/cjs/Grid/styles.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

'use strict'

exports.__esModule = true
exports.areas = exports.flow = exports.gap = exports.autoCols = exports.autoRows = exports.cols = exports.rows = exports.inline = void 0

var _core = require('@emotion/core')

var _utils = require('../utils')

var _styles = require('../Box/styles')

var dT = _interopRequireWildcard(require('./defaultTheme'))

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj
  } else {
    var newObj = {}
    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc =
            Object.defineProperty && Object.getOwnPropertyDescriptor
              ? Object.getOwnPropertyDescriptor(obj, key)
              : {}
          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc)
          } else {
            newObj[key] = obj[key]
          }
        }
      }
    }
    newObj.default = obj
    return newObj
  }
}

const ws = /\s+/g,
  getSizes = (v, u) => {
    let vals = v.split(ws),
      i = 0,
      output = []

    for (; i < vals.length; i++) output.push((0, _utils.unit)(vals[i], u))

    return output.join(' ')
  }

const inline = _styles.d.inlineGrid,
  rows = (0, _utils.memoTheme)((v, t) =>
    /*#__PURE__*/
    (0, _core.css)(
      'grid-template-rows:',
      getSizes(v, (0, _utils.get)(t.grid, 'templateUnit', dT)),
      ';'
    )
  ),
  cols = (0, _utils.memoTheme)((v, t) =>
    /*#__PURE__*/
    (0, _core.css)(
      'grid-template-columns:',
      getSizes(v, (0, _utils.get)(t.grid, 'templateUnit', dT)),
      ';'
    )
  ),
  autoRows = (0, _utils.memoTheme)((v, t) =>
    /*#__PURE__*/
    (0, _core.css)(
      'grid-auto-rows:',
      (0, _utils.unit)(v, (0, _utils.get)(t.grid, 'templateUnit', dT)),
      ';'
    )
  ),
  autoCols = (0, _utils.memoTheme)((v, t) =>
    /*#__PURE__*/
    (0, _core.css)(
      'grid-auto-columns:',
      (0, _utils.unit)(v, (0, _utils.get)(t.grid, 'templateUnit', dT)),
      ';'
    )
  ),
  gap = (0, _utils.memoTheme)((v, t) =>
    /*#__PURE__*/
    (0, _core.css)(
      'grid-gap:',
      getSizes(v, (0, _utils.get)(t.grid, 'gapUnit', dT)),
      ';'
    )
  ),
  flow = {
    row: {
      name: '1x6bia0',
      styles: 'grid-auto-flow:row;',
    },
    column: {
      name: 'qdmemo',
      styles: 'grid-auto-flow:column;',
    },
  },
  areas = (0, _utils.memoValue)(v =>
    /*#__PURE__*/
    (0, _core.css)('grid-template-areas:', v, ';')
  )
exports.areas = areas
exports.flow = flow
exports.gap = gap
exports.autoCols = autoCols
exports.autoRows = autoRows
exports.cols = cols
exports.rows = rows
exports.inline = inline