How to use @xstyled/util - 10 common examples

function useProps(props) {
  const as = props.as || props.forwardedAs || undefined
  return { as, safeProps: omit(props, omittedProps) }
}

const SystemComponent = forwardRef(function SystemComponent(
    { as, ...props },
    ref,
  ) {
    const omittedProps = omit(props, system.meta.props)
    const Component = as || defaultComponent
    return createElement(Component, { ref, ...omittedProps })
  })
  SystemComponent.displayName = 'SystemComponent'

const getter = value => props => {
    let res = value
    if (!string(value) && !num(value)) return res
    const cache = getCacheNamespace(props.theme, `__themeGetter${id}`)
    if (cache.has(value)) return cache.get(value)
    let variants = is(key) ? getThemeValue(props, key) : null
    variants = is(variants) ? variants : defaultVariants
    res = is(variants) ? getThemeValue(props, value, variants) : null
    res = is(res) ? res : value
    const transform =
      (name && props.theme && props.theme.transformers
        ? props.theme.transformers[name]
        : null) || defaultTransform
    if (transform) {
      res = transform(res, {
        rawValue: value,
        variants,
        props,
      })
    }
    res = compose ? compose(res)(props) : res
    cache.set(value, res)

transform: (_, { rawValue, variants, props }) => {
    if (string(rawValue)) {
      const neg = rawValue.startsWith('-')
      const absoluteValue = neg ? rawValue.substr(1) : rawValue
      const variantValue = getThemeValue(props, absoluteValue, variants)
      const value = is(variantValue) ? variantValue : absoluteValue
      return neg ? toNegative(value) : value
    }
    const abs = Math.abs(rawValue)
    const neg = negative(rawValue)
    const value = is(variants[abs]) ? variants[abs] : abs
    return neg ? toNegative(value) : value
  },
})

}) => props => {
  const themeVariants = is(key) ? getThemeValue(props, key) : null
  const computedVariants = merge(assign({}, variants), themeVariants)
  const value = props[prop] !== undefined ? props[prop] : defaultValue
  const result = getThemeValue(props, value, computedVariants)
  warn(is(result), `variant "${value}" not found`)
  return result
}

const getter = value => props => {
    let res = value
    if (!string(value) && !num(value)) return res
    const cache = getCacheNamespace(props.theme, `__themeGetter${id}`)
    if (cache.has(value)) return cache.get(value)
    let variants = is(key) ? getThemeValue(props, key) : null
    variants = is(variants) ? variants : defaultVariants
    res = is(variants) ? getThemeValue(props, value, variants) : null
    res = is(res) ? res : value
    const transform =
      (name && props.theme && props.theme.transformers
        ? props.theme.transformers[name]
        : null) || defaultTransform
    if (transform) {
      res = transform(res, {
        rawValue: value,
        variants,
        props,
      })
    }
    res = compose ? compose(res)(props) : res
    cache.set(value, res)
    return res

return function getStyle(props) {
    const value = props[prop]
    if (!is(value)) return null
    const cache = getCacheNamespace(props.theme, prop)

    if (obj(value)) {
      return reduceBreakpoints(
        props,
        value,
        breakpointValue =>
          styleFromValue(
            cssProperties,
            breakpointValue,
            props,
            themeGet,
            cache,
          ),
        cache,
      )

export const th = path => props => {
  const value = getThemeValue(props, path)
  warn(is(value), `value "${path}" not found in theme`)
  return value
}
;[

const getter = value => props => {
    let res = value
    if (!string(value) && !num(value)) return res
    const cache = getCacheNamespace(props.theme, `__themeGetter${id}`)
    if (cache.has(value)) return cache.get(value)
    let variants = is(key) ? getThemeValue(props, key) : null
    variants = is(variants) ? variants : defaultVariants
    res = is(variants) ? getThemeValue(props, value, variants) : null
    res = is(res) ? res : value
    const transform =
      (name && props.theme && props.theme.transformers
        ? props.theme.transformers[name]
        : null) || defaultTransform
    if (transform) {
      res = transform(res, {
        rawValue: value,
        variants,
        props,
      })
    }
    res = compose ? compose(res)(props) : res
    cache.set(value, res)
    return res
  }
  getter.meta = { name, transform: defaultTransform }

export function getBreakpoints(props) {
  const themeBreakpoints = getThemeValue(props, 'breakpoints')
  if (is(themeBreakpoints)) return themeBreakpoints
  return DEFAULT_BREAKPOINTS
}