@symbo.ls/atoms 2.11.523 → 3.0.1

package/Block.js

@@ -1,388 +1,29 @@
 'use strict'
 
-import { isUndefined, isString } from '@domql/utils'
-
-import {
-  getSpacingBasedOnRatio,
-  getSpacingByKey,
-  transformSize,
-  transformSizeRatio,
-  transfromGap
-} from '@symbo.ls/scratch'
-
-const props = {
-  show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && ({
-    display: 'none !important'
-  }),
-
-  hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && ({
-    display: 'none !important'
-  }),
-
-  height: ({ props, deps }) => deps.transformSizeRatio('height', props),
-  width: ({ props, deps }) => deps.transformSizeRatio('width', props),
-
-  boxSizing: ({ props, deps }) => !deps.isUndefined(props.boxSizing)
-    ? ({ boxSizing: props.boxSizing })
-    : { boxSizing: 'border-box' },
-
-  boxSize: ({ props, deps }) => {
-    if (!deps.isString(props.boxSize)) return
-    const [height, width] = props.boxSize.split(' ')
-    return {
-      ...deps.transformSize('height', height),
-      ...deps.transformSize('width', width || height)
-    }
-  },
-
-  inlineSize: ({ props, deps }) => deps.transformSizeRatio('inlineSize', props),
-  blockSize: ({ props, deps }) => deps.transformSizeRatio('blockSize', props),
-
-  minWidth: ({ props, deps }) => deps.transformSizeRatio('minWidth', props),
-  maxWidth: ({ props, deps }) => deps.transformSizeRatio('maxWidth', props),
-  widthRange: ({ props, deps }) => {
-    if (!deps.isString(props.widthRange)) return
-    const [minWidth, maxWidth] = props.widthRange.split(' ')
-    return {
-      ...deps.transformSize('minWidth', minWidth),
-      ...deps.transformSize('maxWidth', maxWidth || minWidth)
-    }
-  },
-
-  minHeight: ({ props, deps }) => deps.transformSizeRatio('minHeight', props),
-  maxHeight: ({ props, deps }) => deps.transformSizeRatio('maxHeight', props),
-  heightRange: ({ props, deps }) => {
-    if (!deps.isString(props.heightRange)) return
-    const [minHeight, maxHeight] = props.heightRange.split(' ')
-    return {
-      ...deps.transformSize('minHeight', minHeight),
-      ...deps.transformSize('maxHeight', maxHeight || minHeight)
-    }
-  },
-
-  size: ({ props, deps }) => {
-    if (!deps.isString(props.size)) return
-    const [inlineSize, blockSize] = props.size.split(' ')
-    return {
-      ...deps.transformSizeRatio('inlineSize', inlineSize),
-      ...deps.transformSizeRatio('blockSize', blockSize || inlineSize)
-    }
-  },
-
-  minBlockSize: ({ props, deps }) => deps.transformSizeRatio('minBlockSize', props),
-  minInlineSize: ({ props, deps }) => deps.transformSizeRatio('minInlineSize', props),
-
-  maxBlockSize: ({ props, deps }) => deps.transformSizeRatio('maxBlockSize', props),
-  maxInlineSize: ({ props, deps }) => deps.transformSizeRatio('maxInlineSize', props),
-
-  minSize: ({ props, deps }) => {
-    if (!deps.isString(props.minSize)) return
-    const [minInlineSize, minBlockSize] = props.minSize.split(' ')
-    return {
-      ...deps.transformSize('minInlineSize', minInlineSize),
-      ...deps.transformSize('minBlockSize', minBlockSize || minInlineSize)
-    }
-  },
-
-  maxSize: ({ props, deps }) => {
-    if (!deps.isString(props.maxSize)) return
-    const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ')
-    return {
-      ...deps.transformSize('maxInlineSize', maxInlineSize),
-      ...deps.transformSize('maxBlockSize', maxBlockSize || maxInlineSize)
-    }
-  },
-
-  borderWidth: ({ props, deps }) => deps.transformSizeRatio('borderWidth', props),
-
-  padding: ({ props, deps }) => deps.transformSizeRatio('padding', props),
-  scrollPadding: ({ props, deps }) => deps.transformSizeRatio('scrollPadding', props),
-  paddingInline: ({ props, deps }) => {
-    if (!deps.isString(props.paddingInline)) return
-    const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
-    return {
-      ...deps.transformSize('paddingInlineStart', paddingInlineStart),
-      ...deps.transformSize('paddingInlineEnd', paddingInlineEnd || paddingInlineStart)
-    }
-  },
-  paddingBlock: ({ props, deps }) => {
-    if (!deps.isString(props.paddingBlock)) return
-    const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
-    return {
-      ...deps.transformSize('paddingBlockStart', paddingBlockStart),
-      ...deps.transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart)
-    }
-  },
-  paddingInlineStart: ({ props, deps }) => deps.transformSizeRatio('paddingInlineStart', props),
-  paddingInlineEnd: ({ props, deps }) => deps.transformSizeRatio('paddingInlineEnd', props),
-  paddingBlockStart: ({ props, deps }) => deps.transformSizeRatio('paddingBlockStart', props),
-  paddingBlockEnd: ({ props, deps }) => deps.transformSizeRatio('paddingBlockEnd', props),
-
-  margin: ({ props, deps }) => deps.transformSizeRatio('margin', props),
-  marginInline: ({ props, deps }) => {
-    if (!deps.isString(props.marginInline)) return
-    const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
-    return {
-      ...deps.transformSize('marginInlineStart', marginInlineStart),
-      ...deps.transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart)
-    }
-  },
-  marginBlock: ({ props, deps }) => {
-    if (!deps.isString(props.marginBlock)) return
-    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
-    return {
-      ...deps.transformSize('marginBlockStart', marginBlockStart),
-      ...deps.transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart)
-    }
-  },
-  marginInlineStart: ({ props, deps }) => deps.transformSizeRatio('marginInlineStart', props),
-  marginInlineEnd: ({ props, deps }) => deps.transformSizeRatio('marginInlineEnd', props),
-  marginBlockStart: ({ props, deps }) => deps.transformSizeRatio('marginBlockStart', props),
-  marginBlockEnd: ({ props, deps }) => deps.transformSizeRatio('marginBlockEnd', props),
-
-  gap: ({ props, deps }) => !deps.isUndefined(props.gap) && ({
-    gap: transfromGap(props.gap)
-  }),
-
-  columnGap: ({ props, deps }) => !deps.isUndefined(props.columnGap) ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
-  rowGap: ({ props, deps }) => !deps.isUndefined(props.rowGap) ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null,
-
-  flexWrap: ({ props, deps }) => !deps.isUndefined(props.flexWrap) && ({
-    display: 'flex',
-    flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap
-  }),
-  flexFlow: ({ props, deps }) => {
-    const { flexFlow, reverse } = props
-    if (!deps.isString(flexFlow)) return
-    let [direction, wrap] = (flexFlow || 'row').split(' ')
-    if (flexFlow.startsWith('x') || flexFlow === 'row') direction = 'row'
-    if (flexFlow.startsWith('y') || flexFlow === 'column') direction = 'column'
-    return {
-      display: 'flex',
-      flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
-    }
-  },
-  flexAlign: ({ props, deps }) => {
-    if (!deps.isString(props.flexAlign)) return
-    const [alignItems, justifyContent] = props.flexAlign.split(' ')
-    return {
-      display: 'flex',
-      alignItems,
-      justifyContent
-    }
-  }
-
-}
-
 export const Block = {
-  deps: {
-    getSpacingBasedOnRatio,
-    getSpacingByKey,
-    transfromGap,
-    transformSizeRatio,
-    transformSize,
-    isUndefined,
-    isString
-  },
-
-  class: {
-    ...props,
-
-    display: ({ props, deps }) => !deps.isUndefined(props.display) && ({
-      display: props.display
-    }),
-
-    direction: ({ props, deps }) => !deps.isUndefined(props.direction) && ({
-      direction: props.direction
-    }),
-
-    objectFit: ({ props, deps }) => !deps.isUndefined(props.objectFit) && ({
-      objectFit: props.objectFit
-    }),
-
-    aspectRatio: ({ props, deps }) => !deps.isUndefined(props.aspectRatio) && ({
-      aspectRatio: props.aspectRatio
-    }),
-
-    gridArea: ({ props, deps }) => props.gridArea && ({ gridArea: props.gridArea }),
-
-    float: ({ props, deps }) => !deps.isUndefined(props.float) && ({
-      float: props.float
-    }),
-
-    flex: ({ props, deps }) => !deps.isUndefined(props.flex) && ({
-      flex: props.flex
-    }),
-    flexDirection: ({ props, deps }) => !deps.isUndefined(props.flexDirection) && ({
-      flexDirection: props.flexDirection
-    }),
-    alignItems: ({ props, deps }) => !deps.isUndefined(props.alignItems) && ({
-      alignItems: props.alignItems
-    }),
-    alignContent: ({ props, deps }) => !deps.isUndefined(props.alignContent) && ({
-      alignContent: props.alignContent
-    }),
-    justifyContent: ({ props, deps }) => !deps.isUndefined(props.justifyContent) && ({
-      justifyContent: props.justifyContent
-    }),
-    justifyItems: ({ props, deps }) => !deps.isUndefined(props.justifyItems) && ({
-      justifyItems: props.justifyItems
-    }),
-    alignSelf: ({ props, deps }) => !deps.isUndefined(props.alignSelf) && ({
-      alignSelf: props.alignSelf
-    }),
-    order: ({ props, deps }) => !deps.isUndefined(props.order) && ({
-      order: props.order
-    }),
-
-    gridColumn: ({ props, deps }) => !deps.isUndefined(props.gridColumn) && ({
-      gridColumn: props.gridColumn
-    }),
-    gridColumnStart: ({ props, deps }) => !deps.isUndefined(props.gridColumnStart) && ({
-      gridColumnStart: props.gridColumnStart
-    }),
-    gridRow: ({ props, deps }) => !deps.isUndefined(props.gridRow) && ({
-      gridRow: props.gridRow
-    }),
-    gridRowStart: ({ props, deps }) => !deps.isUndefined(props.gridRowStart) && ({
-      gridRowStart: props.gridRowStart
-    }),
-
-    resize: ({ props, deps }) => !deps.isUndefined(props.resize) && ({
-      resize: props.resize
-    }),
+  display: 'block'
+}
 
-    verticalAlign: ({ props, deps }) => !deps.isUndefined(props.verticalAlign) && ({
-      verticalAlign: props.verticalAlign
-    }),
+export const Inline = {
+  display: 'inline'
+}
 
-    columns: ({ props, deps }) => !deps.isUndefined(props.columns) && ({
-      columns: props.columns
-    }),
-    columnRule: ({ props, deps }) => !deps.isUndefined(props.columnRule) && ({
-      columnRule: props.columnRule
-    }),
-    columnWidth: ({ props, deps }) => !deps.isUndefined(props.columnWidth) && ({
-      columnWidth: props.columnWidth
-    }),
-    columnSpan: ({ props, deps }) => !deps.isUndefined(props.columnSpan) && ({
-      columnSpan: props.columnSpan
-    }),
-    columnFill: ({ props, deps }) => !deps.isUndefined(props.columnFill) && ({
-      columnFill: props.columnFill
-    }),
-    columnCount: ({ props, deps }) => !deps.isUndefined(props.columnCount) && ({
-      columnCount: props.columnCount
-    })
-  }
+export const Flex = {
+  display: 'flex'
 }
 
-export const Hr = {
-  tag: 'hr',
-  props: { margin: 'C1 0' }
+export const InlineFlex = {
+  display: 'inline-flex'
 }
-export const Br = { tag: 'br' }
-export const Div = { tag: 'div' }
-export const Span = { tag: 'span' }
-export const Li = { tag: 'li' }
-export const Ul = {
-  tag: 'ul',
-  childExtend: { extend: 'Li' }
+
+export const Grid = {
+  display: 'grid'
 }
-export const Ol = {
-  tag: 'ol',
-  childExtend: { extend: 'Li' }
+
+export const InlineGrid = {
+  display: 'inline-grid'
 }
-// export const Article = { tag: 'article' }
 
 export const Gutter = {
-  props: {
-    size: 'C1'
-  }
+  boxSize: 'C1'
 }
-
-// alt approach
-// blockProps: (el, s, ctx) => {
-//   const { props, deps } = el
-//   const styles = {}
-
-//   // Utility to conditionally add a style
-//   const addStyle = (key, value) => {
-//     if (deps.isObject(value)) deps.merge(styles, value)
-//     else if (value) styles[key] = value
-//   }
-
-//   // Box sizing
-//   addStyle('boxSizing', !deps.isUndefined(props.boxSizing) ? props.boxSizing : 'border-box')
-
-//   // Display
-//   addStyle('display', !deps.isUndefined(props.display) ? props.display : undefined)
-
-//   // Show/Hide
-//   if (ctx.utils.exec(el.props.show, el, s) === false) {
-//     addStyle('display', 'none !important')
-//   }
-//   if (ctx.utils.exec(el.props.hide, el, s)) {
-//     addStyle('display', 'none !important')
-//   }
-
-//   // Size transformations
-//   const sizeKeys = ['height', 'width', 'inlineSize', 'blockSize', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'minBlockSize', 'maxBlockSize', 'minInlineSize', 'maxInlineSize']
-//   sizeKeys.forEach(key => addStyle(key, deps.transformSizeRatio(key, props)))
-
-//   // Box size
-//   if (deps.isString(props.boxSize)) {
-//     const [height, width] = props.boxSize.split(' ')
-//     Object.assign(styles, deps.transformSize('height', height))
-//     Object.assign(styles, deps.transformSize('width', width || height))
-//   }
-
-//   // Size ranges
-//   const rangeKeys = ['widthRange', 'heightRange', 'minSize', 'maxSize']
-//   rangeKeys.forEach(key => {
-//     if (deps.isString(props[key])) {
-//       const [min, max] = props[key].split(' ')
-//       addStyle(`min${key.charAt(0).toUpperCase() + key.slice(1)}`, deps.transformSize('min' + key, min))
-//       addStyle(`max${key.charAt(0).toUpperCase() + key.slice(1)}`, deps.transformSize('max' + key, max || min))
-//     }
-//   })
-
-//   // Direction, objectFit, aspectRatio, etc.
-//   const simpleProps = ['direction', 'objectFit', 'aspectRatio', 'float', 'flex', 'flexDirection', 'alignItems', 'alignContent', 'justifyContent', 'justifyItems', 'alignSelf', 'order', 'resize', 'verticalAlign', 'columns', 'columnRule', 'columnWidth', 'columnSpan', 'columnFill', 'columnCount']
-//   simpleProps.forEach(key => addStyle(key, !deps.isUndefined(props[key]) ? props[key] : undefined))
-
-//   // Flex and grid specific properties
-//   if (props.flexWrap) {
-//     addStyle('flexWrap', props.flexWrap)
-//   }
-//   if (deps.isString(props.flexFlow)) {
-//     let [direction, wrap] = props.flexFlow.split(' ')
-//     direction = direction.startsWith('x') || direction === 'row' ? 'row' : 'column'
-//     addStyle('flexFlow', direction + ' ' + (wrap || ''))
-//   }
-
-//   if (deps.isString(props.flexAlign)) {
-//     const [alignItems, justifyContent] = props.flexAlign.split(' ')
-//     addStyle('alignItems', alignItems)
-//     addStyle('justifyContent', justifyContent)
-//   }
-
-//   // Gap properties
-//   if (!deps.isUndefined(props.gap)) {
-//     addStyle('gap', transfromGap(props.gap))
-//   }
-//   if (props.columnGap) {
-//     addStyle('columnGap', deps.getSpacingBasedOnRatio(props, 'columnGap'))
-//   }
-//   if (props.rowGap) {
-//     addStyle('rowGap', deps.getSpacingBasedOnRatio(props, 'rowGap'))
-//   }
-
-//   // Grid properties
-//   const gridProps = ['gridColumn', 'gridColumnStart', 'gridRow', 'gridRowStart']
-//   gridProps.forEach(key => addStyle(key, !deps.isUndefined(props[key]) ? props[key] : undefined))
-
-//   console.log(styles)
-
-//   return styles
-// }

package/Box.js

@@ -0,0 +1,53 @@
+'use strict'
+
+import { useCssInProps } from 'css-in-props'
+
+// Main class assignment handler
+const onBeforeClassAssign = (element) => {
+  if (!element.context) return
+  const { props, __ref: ref } = element
+  ref.__class = useCssInProps(props, element, { unpack: false })
+}
+
+export const Box = {
+  extends: [
+    'Shape',
+    'Theme'
+  ],
+
+  boxSizing: 'border-box',
+
+  attr: {
+    id: el => el.call('isString', el.props.id) && el.props.id,
+    title: el => el.call('isString', el.props.title) && el.props.title,
+    contentEditable: el => el.props.contentEditable || el.props.contenteditable,
+    dir: el => el.props.dir,
+    draggable: el => el.props.draggable,
+    hidden: el => el.props.hidden,
+    lang: el => el.props.lang,
+    spellcheck: el => el.props.spellcheck,
+    tabindex: el => el.props.tabindex,
+    translate: el => el.props.translate
+  },
+
+  class: {
+    style: el => el.style || el.props?.style
+  },
+
+  onBeforeClassAssign
+}
+
+export const Hr = {
+  tag: 'hr',
+  margin: 'C1 0'
+}
+export const Br = { tag: 'br' }
+export const Li = { tag: 'li' }
+export const Ul = {
+  tag: 'ul',
+  childExtends: { extends: 'Li' }
+}
+export const Ol = {
+  tag: 'ol',
+  childExtends: { extends: 'Li' }
+}

package/Hgroup.js

@@ -1,29 +1,26 @@
 'use strict'
 
 export const Hgroup = {
+  extends: 'Flex',
   tag: 'hgroup',
-  extend: [
-    'Flex'
-  ],
-  props: {
-    flow: 'y',
-    gap: 'Z'
-  },
+
+  flow: 'y',
+  gap: 'Y2',
+
   H: {
+    color: 'title',
     tag: 'h3',
-    text: 'Heading',
     lineHeight: '1em',
     margin: '0'
   },
   P: {
-    text: 'Paragraph',
     margin: '0',
     color: 'paragraph'
   }
 }
 
 export const HgroupRows = {
-  extend: 'Hgroup',
+  extends: 'Hgroup',
 
   H: {
     extends: 'Flex',
@@ -37,7 +34,7 @@ export const HgroupRows = {
 }
 
 export const HgroupButton = {
-  extend: 'HgroupRows',
+  extends: 'HgroupRows',
 
   H: {
     justifyContent: 'space-between',

package/Iframe.js

@@ -2,11 +2,10 @@
 
 export const Iframe = {
   tag: 'iframe',
-  props: {
-    position: 'relative',
-    minWidth: 'H',
-    minHeight: 'H'
-  },
+  position: 'relative',
+  minWidth: 'H',
+  minHeight: 'H',
+
   attr: {
     src: (el, s) => {
       let src = el.call('exec', el.props.src, el)

package/InteractiveComponent.js

@@ -31,7 +31,7 @@ export const Hoverable = {
 }
 
 export const Clickable = {
-  extend: Hoverable,
+  extends: 'Hoverable',
   props: {
     ':active': {
       opacity: 1,
@@ -60,7 +60,7 @@ export const Focusable = {
 }
 
 export const FocusableComponent = {
-  extend: Focusable,
+  extends: 'Focusable',
   tag: 'button',
   props: {
     fontSize: 'A',

package/Picture.js

@@ -6,7 +6,7 @@ export const Picture = {
   deps: { getSystemGlobalTheme },
   tag: 'picture',
 
-  childExtend: {
+  childExtends: {
     tag: 'source',
     attr: {
       media: (element) => {
@@ -26,7 +26,7 @@ export const Picture = {
 
   Img: ({ props }) => ({
     width: 'inherit',
-    ignoreChildExtend: true,
+    ignoreChildExtends: true,
     height: 'inherit',
     src: props.src
   })

package/Shape/index.js

@@ -1,26 +1,22 @@
 'use strict'
 
-import { exec, isString } from '@domql/utils'
+import { exec } from '@domql/utils'
 import { SHAPES } from './style'
 import { getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch'
 
-const transformBorderRadius = (radius, props, propertyName) => {
-  if (!isString(radius)) return
-  return {
-    borderRadius: radius.split(' ').map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(' ')
-  }
-}
-
 export const Shape = {
-  extend: 'Pseudo',
-
-  deps: { exec, getSpacingBasedOnRatio, getMediaColor, transformBorderRadius },
+  deps: { exec, getSpacingBasedOnRatio, getMediaColor },
 
   class: {
     shape: ({ props, deps }) => {
       const { shape } = props
       return deps.exec(SHAPES[shape], ({ props, deps }))
     },
+    // TODO: replace with this
+    // shape: (el) => {
+    //   const { shape } = el.props
+    //   return el.call('exec', SHAPES[shape], el)
+    // },
     shapeDirection: ({ props }) => {
       const { shape, shapeDirection } = props
       if (!shape || !shapeDirection) return
@@ -33,10 +29,13 @@ export const Shape = {
         borderColor: deps.getMediaColor(background || backgroundColor)
       }
       return props.shapeDirection ? borderColor : null
-    },
+    }
+  }
+}
 
-    round: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.round || props.borderRadius, props, 'round'),
-    borderRadius: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius')
+export const Circle = {
+  props: {
+    round: '100%'
   }
 }
 

package/Shape/style.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { getActiveConfig, getColor } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
-import { Timing } from '../Timing'
+import { TIMING_PROPS } from 'css-in-props/src/props'
 
 const CONFIG = getActiveConfig()
 
@@ -22,7 +22,7 @@ const getComputedBackgroundColor = ({ props }) => {
 }
 
 const inheritTransition = ({ props, deps }) => {
-  const exec = Timing.class.transition({ props, deps })
+  const exec = TIMING_PROPS.transition(props.transition, { props, deps })
   return exec && exec.transition
 }
 

package/Text.js

@@ -1,50 +1,6 @@
 'use strict'
 
-import { exec, isUndefined } from '@domql/utils'
-import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
-
-const props = {
-  fontSize: (el) => {
-    const { props, deps } = el
-    return props.fontSize ? deps.getFontSizeByKey(props.fontSize) : null
-  },
-  fontFamily: ({ props, deps }) => ({
-    fontFamily: deps.getFontFamily(props.fontFamily) || props.fontFamily
-  }),
-  fontWeight: ({ props }) => ({
-    fontWeight: props.fontWeight,
-    fontVariationSettings: '"wght" ' + props.fontWeight
-  })
-}
-
-export const Text = {
-  deps: { exec, getFontSizeByKey, getFontFamily },
-
-  text: (el) => {
-    const { key, props, state, deps } = el
-    if (props.text === true) return (state && state[key]) || (props && props[key])
-    // return console.log(el) || deps.exec(props.text, el)
-    return deps.exec(props.text, el)
-  },
-
-  class: {
-    font: ({ props }) => !isUndefined(props.font) && ({ font: props.font }),
-    lineHeight: ({ props }) => !isUndefined(props.lineHeight) && ({ lineHeight: props.lineHeight }),
-    // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-    textDecoration: ({ props }) => !isUndefined(props.textDecoration) && ({ textDecoration: props.textDecoration }),
-    textTransform: ({ props }) => !isUndefined(props.textTransform) && ({ textTransform: props.textTransform }),
-    wordBreak: ({ props }) => !isUndefined(props.wordBreak) && ({ wordBreak: props.wordBreak }),
-    whiteSpace: ({ props }) => !isUndefined(props.whiteSpace) && ({ whiteSpace: props.whiteSpace }),
-    wordWrap: ({ props }) => !isUndefined(props.wordWrap) && ({ wordWrap: props.wordWrap }),
-    letterSpacing: ({ props }) => !isUndefined(props.letterSpacing) && ({ letterSpacing: props.letterSpacing }),
-    textOverflow: ({ props }) => !isUndefined(props.textOverflow) && ({ textOverflow: props.textOverflow }),
-    textAlign: ({ props }) => !isUndefined(props.textAlign) && ({ textAlign: props.textAlign }),
-    writingMode: ({ props }) => !isUndefined(props.writingMode) && ({ writingMode: props.writingMode }),
-    textOrientation: ({ props }) => !isUndefined(props.textOrientation) && ({ textOrientation: props.textOrientation }),
-    textIndent: ({ props }) => !isUndefined(props.textIndent) && ({ textIndent: props.textIndent }),
-    ...props
-  }
-}
+export const Text = {}
 
 export const H1 = { tag: 'h1' }
 export const H2 = { tag: 'h2' }