@symbo.ls/uikit 2.10.253 → 2.10.267

package/Dropdown/node_modules/@symbo.ls/utils/src/codify.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { toDashCase } from './'
+// import { convert } from 'domql-to-mitosis/src/convert'
+
+export const stringifyProps = (props, indent = 2) => JSON.stringify(props, null, indent)
+export const replaceKeysWithAttr = str => str
+  .replaceAll('": "', '="')
+  .replaceAll('\n  "', ' ')
+  .replaceAll('{ ', '\n  ')
+  .replaceAll('}', '')
+  .replaceAll(', ', '\n  ')
+
+export const codify = (key, props) => ({
+  react: `import { ${key} } from '@symbo.ls/react'
+
+const props = ${stringifyProps(props)}
+
+<${key} {...props} />`,
+
+  domql: `import { ${key} } from 'smbls'
+
+const props = ${stringifyProps(props)}
+
+const component = {
+  extend: ${key},
+  props
+}`,
+
+  iframe: `<iframe
+  title="${key}"
+  style="border: 0; resize: both; padding: 0 10px 10px 0"
+  src="https://demo.symbols.app/scene/${key}/fullscreen/smbls.symbo.ls" 
+  referrerpolicy="no-referrer-when-downgrade"
+></iframe>`,
+
+  html: `<script src="smbls.js"></script>
+
+<${key && toDashCase(key)} ${replaceKeysWithAttr(stringifyProps(props))}/>`
+})

package/Dropdown/node_modules/@symbo.ls/utils/src/date.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const formatDate = (timestamp) => {
+  if (!timestamp) return ''
+  const d = new Date(timestamp)
+  const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d)
+  const mo = new Intl.DateTimeFormat('en', { month: 'short' }).format(d)
+  const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d)
+  return `${da} ${mo}, ${ye}`
+}

package/Dropdown/node_modules/@symbo.ls/utils/src/detectHeight.js

@@ -0,0 +1,31 @@
+'use strict'
+
+export const detectHeightOnInit = (element, state) => {
+  const heightTimeout = setTimeout(() => {
+    const { props } = element
+    if (!state.clientHeight) {
+      const { node: { clientHeight } } = element
+      if (clientHeight) {
+        state.clientHeight = clientHeight
+      }
+    }
+
+    if (state.active) {
+      if (props.height === 'auto') return
+      element.update({
+        props: { height: state.clientHeight }
+      }, { ignoreInitUpdate: true, preventChildrenUpdate: true })
+      const setAutoTimeout = setTimeout(() => {
+        element.update({
+          props: { height: 'auto' }
+        }, { ignoreInitUpdate: true, preventChildrenUpdate: true })
+        clearTimeout(setAutoTimeout)
+      }, 450)
+    } else {
+      element.update({
+        props: { height: '0' }
+      }, { ignoreInitUpdate: true, preventChildrenUpdate: true })
+    }
+    clearTimeout(heightTimeout)
+  })
+}

package/Dropdown/node_modules/@symbo.ls/utils/src/index.js

@@ -0,0 +1,46 @@
+'use strict'
+
+import { isString, isObject, isArray } from '@domql/utils'
+
+export * from './navigation'
+export * from './scaling'
+export * from './codify'
+export * from './date'
+
+export const copyStringToClipboard = str => {
+  const el = document.createElement('textarea')
+  el.value = str
+  el.setAttribute('readonly', '')
+  el.style = { position: 'absolute', left: '-9999px' }
+  document.body.appendChild(el)
+  el.select()
+  document.execCommand('copy')
+  document.body.removeChild(el)
+}
+
+export const toCamelCase = str => {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+    return index === 0 ? word.toLowerCase() : word.toUpperCase()
+  }).replaceAll(/\s+/g, '')
+}
+
+export const toTitleCase = str => str.replace(
+  /\w\S*/g, txt => {
+    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+  }
+)
+
+export const toDashCase = val => val
+  .replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase())
+  .replace('.', '-')
+
+export const toDescriptionCase = str => {
+  const result = str.replace(/([A-Z])/g, ' $1')
+  return result.charAt(0).toUpperCase() + result.slice(1)
+}
+
+export const arrayzeValue = val => {
+  if (isString(val)) return val.split(' ')
+  if (isObject(val)) return Object.keys(val).map(v => val[v])
+  if (isArray(val)) return val
+}

package/Dropdown/node_modules/@symbo.ls/utils/src/navigation.js

@@ -0,0 +1,66 @@
+'use strict'
+
+export const filterHrefs = (sitemap) => {
+  return Object.values(sitemap)
+    .map(({ href, sub_links }) => // eslint-disable-line
+      [href, sub_links.map(({ href }) => href) // eslint-disable-line
+        .filter(v => v.indexOf('#') === -1)]
+        .filter(v => v.length > 0)
+    )
+}
+
+export const findCurrentIndex = (sitemap) => { // eslint-disable-line
+  const { pathname } = window.location
+  const hrefArray = filterHrefs(sitemap)
+  let index
+
+  hrefArray.forEach((v, k) => {
+    if (v[0] === pathname) index = k
+    if (v[1] && v[1].indexOf(pathname) > -1) {
+      const i = v[1].indexOf(pathname)
+      index = `${k}.${i}`
+    }
+  })
+
+  return { active: index }
+}
+
+/** Parses sitemap and detects current, active, and previous pages from current url path */
+export const setPaginationNames = (sitemap) => {
+  const { pathname } = window.location
+  const hrefArray = filterHrefs(sitemap)
+  const state = {}
+
+  hrefArray.forEach((v, k) => {
+    const categoryRoute = v[0]
+    const subcategoryRoutes = v[1]
+    const previousCat = sitemap[k - 1]
+    const activeCat = sitemap[k]
+    const nextCat = sitemap[k + 1]
+
+    const isRootCategory = categoryRoute === pathname
+    const isSubcategory = subcategoryRoutes && subcategoryRoutes.indexOf(pathname) > -1
+
+    if (isRootCategory) {
+      const previousSubcat = hrefArray[k - 1] && hrefArray[k - 1][1] && previousCat.sub_links[previousCat.sub_links.length - 1]
+      const nextSubcat = subcategoryRoutes && activeCat.sub_links[0]
+
+      state.previous = previousSubcat || previousCat
+      state.active = activeCat
+      state.next = nextSubcat || nextCat
+      state.moveOn = nextSubcat && nextCat
+    } else if (isSubcategory) {
+      const i = subcategoryRoutes.indexOf(pathname)
+      const activeSubcat = activeCat.sub_links[i]
+      const previousSubcat = subcategoryRoutes[i - 1] && activeCat.sub_links[i - 1]
+      const nextSubcat = subcategoryRoutes[i + 1] && activeCat.sub_links[i + 1]
+
+      state.previous = previousSubcat || activeCat
+      state.active = activeSubcat
+      state.next = nextSubcat || nextCat
+      state.moveOn = nextSubcat && nextCat
+    }
+  })
+
+  return state
+}

package/Dropdown/node_modules/@symbo.ls/utils/src/scaling.js

@@ -0,0 +1,15 @@
+'use strict'
+
+import { isObject, isArray } from '@domql/utils'
+
+export const findClosestNumber = (number, arr) => {
+  return (isArray(arr) ? arr : Object.values(arr)).reduce((prev, curr) => {
+    return (Math.abs(curr - number) < Math.abs(prev - number) ? curr : prev)
+  })
+}
+
+export const findClosestNumberInFactory = (val, factory) => {
+  val = parseFloat(val)
+  if (isObject(factory)) factory = Object.values(factory)
+  return findClosestNumber(val, factory)
+}

package/Dropdown/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@symbo.ls/dropdown",
+  "version": "2.10.266",
+  "main": "index.js",
+  "license": "MIT",
+  "gitHead": "8684a21bb716d5f5e7811068ec4a017e8b516cf1",
+  "dependencies": {
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/button": "latest"
+  },
+  "source": "src/index.js"
+}

package/Field/index.js

@@ -0,0 +1,43 @@
+'use strict'
+
+import { Focusable } from '@symbo.ls/atoms'
+import { IconText } from '@symbo.ls/icon'
+import { Input } from '@symbo.ls/input'
+
+export const Field = {
+  extend: [IconText],
+
+  props: ({ state, key }) => ({
+    value: state[key],
+
+    depth: 16,
+    placeholder: '',
+    padding: 'A B',
+    round: 'C',
+    type: 'text',
+    position: 'relative',
+    width: '16em',
+
+    style: {
+      appearance: 'none',
+      outline: 0,
+      border: 'none',
+      cursor: 'pointer',
+      fontFamily: 'inherit',
+      boxSizing: 'border-box'
+    },
+
+    input: {
+      width: '100%',
+      height: '100%',
+      border: 'none'
+    },
+
+    svg: {
+      position: 'absolute',
+      right: '1em'
+    }
+  }),
+
+  input: { extend: [Focusable, Input] }
+}

package/Field/node_modules/@symbo.ls/atoms/Animation.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
+import { isObject } from '@domql/utils'
+import { emotion } from '@symbo.ls/create-emotion'
+const { keyframes } = emotion
+
+const applyAnimationProps = (animation, element) => {
+  if (isObject(animation)) return { animationName: keyframes(animation) }
+  const { ANIMATION } = element.context && element.context.designSystem
+  const record = ANIMATION[animation]
+  return keyframes(record)
+}
+
+export const Animation = {
+  class: {
+    animation: (el) => el.props.animation && {
+      animationName: applyAnimationProps(el.props.animation, el),
+      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
+      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
+      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
+      animationFillMode: el.props.animationFillMode || 'both',
+      animationPlayState: el.props.animationPlayState,
+      animationDirection: el.props.animationDirection
+    },
+    animationName: (el) => el.props.animationName && {
+      animationName: applyAnimationProps(el.props.animationName, el)
+    },
+
+    animationDuration: ({ props }) => props.animationDuration && ({
+      animationDuration: getTimingByKey(props.animationDuration).timing
+    }),
+    animationDelay: ({ props }) => props.animationDelay && ({
+      animationDelay: getTimingByKey(props.animationDelay).timing
+    }),
+    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
+      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
+    }),
+    animationFillMode: ({ props }) => props.animationFillMode && ({
+      animationFillMode: props.animationFillMode
+    }),
+    animationPlayState: ({ props }) => props.animationPlayState && ({
+      animationPlayState: props.animationPlayState
+    }),
+    animationIterationCount: ({ props }) => props.animationIterationCount && ({
+      animationIterationCount: props.animationIterationCount || 1
+    }),
+    animationDirection: ({ props }) => props.animationDirection && ({
+      animationDirection: props.animationDirection
+    })
+  }
+}

package/Field/node_modules/@symbo.ls/atoms/Block.js

@@ -0,0 +1,165 @@
+'use strict'
+
+import { getSpacingBasedOnRatio, getSpacingByKey, transfromGap } from '@symbo.ls/scratch'
+
+export const Block = {
+  class: {
+    boxSizing: ({ props }) => props.boxSizing
+      ? ({ boxSizing: props.boxSizing })
+      : {
+          boxSizing: 'border-box'
+        },
+
+    display: ({ props }) => props.display && ({ display: props.display }),
+
+    hide: ({ props }) => props.hide && ({ display: 'none' }),
+
+    width: ({ props }) => props.width && getSpacingBasedOnRatio(props, 'width'),
+    height: ({ props }) => props.height && getSpacingBasedOnRatio(props, 'height'),
+    boxSize: ({ props }) => {
+      if (typeof props.boxSize !== 'string') return
+      const [height, width] = props.boxSize.split(' ')
+      return {
+        ...getSpacingByKey(height, 'height'),
+        ...getSpacingByKey(width || height, 'width')
+      }
+    },
+
+    maxWidth: ({ props }) => props.maxWidth && getSpacingBasedOnRatio(props, 'maxWidth'),
+    minWidth: ({ props }) => props.minWidth && getSpacingBasedOnRatio(props, 'minWidth'),
+    widthRange: ({ props }) => {
+      if (typeof props.widthRange !== 'string') return
+      const [minWidth, maxWidth] = props.widthRange.split(' ')
+      return {
+        ...getSpacingByKey(minWidth, 'minWidth'),
+        ...getSpacingByKey(maxWidth || minWidth, 'maxWidth')
+      }
+    },
+
+    maxHeight: ({ props }) => props.maxHeight && getSpacingBasedOnRatio(props, 'maxHeight'),
+    minHeight: ({ props }) => props.minHeight && getSpacingBasedOnRatio(props, 'minHeight'),
+    heightRange: ({ props }) => {
+      if (typeof props.heightRange !== 'string') return
+      const [minHeight, maxHeight] = props.heightRange.split(' ')
+      return {
+        ...getSpacingByKey(minHeight, 'minHeight'),
+        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+      }
+    },
+
+    direction: ({ props }) => props.direction && ({ direction: props.direction }),
+
+    aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
+
+    borderWidth: ({ props }) => props.borderWidth ? getSpacingBasedOnRatio(props, 'borderWidth') : null,
+
+    padding: ({ props }) => props.padding ? getSpacingBasedOnRatio(props, 'padding') : null,
+    paddingInline: ({ props }) => {
+      if (typeof props.paddingInline !== 'string') return
+      const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
+      return {
+        ...getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
+        ...getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
+      }
+    },
+    paddingBlock: ({ props }) => {
+      if (typeof props.paddingBlock !== 'string') return
+      const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
+      return {
+        ...getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
+        ...getSpacingByKey(paddingBlockEnd || paddingBlockStart, 'paddingBlockEnd')
+      }
+    },
+    paddingInlineStart: ({ props }) => props.paddingInlineStart ? getSpacingBasedOnRatio(props, 'paddingInlineStart') : null,
+    paddingInlineEnd: ({ props }) => props.paddingInlineEnd ? getSpacingBasedOnRatio(props, 'paddingInlineEnd') : null,
+    paddingBlockStart: ({ props }) => props.paddingBlockStart ? getSpacingBasedOnRatio(props, 'paddingBlockStart') : null,
+    paddingBlockEnd: ({ props }) => props.paddingBlockEnd ? getSpacingBasedOnRatio(props, 'paddingBlockEnd') : null,
+
+    margin: ({ props }) => props.margin ? getSpacingBasedOnRatio(props, 'margin') : null,
+    marginInline: ({ props }) => {
+      if (typeof props.marginInline !== 'string') return
+      const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
+      return {
+        ...getSpacingByKey(marginInlineStart, 'marginInlineStart'),
+        ...getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
+      }
+    },
+    marginBlock: ({ props }) => {
+      if (typeof props.marginBlock !== 'string') return
+      const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
+      return {
+        ...getSpacingByKey(marginBlockStart, 'marginBlockStart'),
+        ...getSpacingByKey(marginBlockEnd || marginBlockStart, 'marginBlockEnd')
+      }
+    },
+    marginInlineStart: ({ props }) => props.marginInlineStart ? getSpacingBasedOnRatio(props, 'marginInlineStart') : null,
+    marginInlineEnd: ({ props }) => props.marginInlineEnd ? getSpacingBasedOnRatio(props, 'marginInlineEnd') : null,
+    marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
+    marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
+
+    gap: ({ props }) => props.gap
+      ? ({
+          gap: transfromGap(props.gap)
+        })
+      : null,
+    gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
+
+    flex: ({ props }) => props.flex && ({ flex: props.flex }),
+    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
+    alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
+    alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
+    justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
+    justifyItems: ({ props }) => props.justifyItems && ({ justifyItems: props.justifyItems }),
+    alignSelf: ({ props }) => props.alignSelf && ({ alignSelf: props.alignSelf }),
+    order: ({ props }) => props.order && ({ order: props.order }),
+
+    flexWrap: ({ props }) => props.flexWrap && ({
+      display: 'flex',
+      flexFlow: props.flexWrap
+    }),
+    flexFlow: ({ props }) => props.flexFlow && ({
+      display: 'flex',
+      flexFlow: props.flexFlow
+    }),
+    flexAlign: ({ props }) => {
+      if (typeof props.flexAlign !== 'string') return
+      const [alignItems, justifyContent] = props.flexAlign.split(' ')
+      return {
+        display: 'flex',
+        alignItems,
+        justifyContent
+      }
+    },
+
+    gridColumn: ({ props }) => props.gridColumn && ({ gridColumn: props.gridColumn }),
+    gridColumnStart: ({ props }) => props.columnStart
+      ? ({
+          gridColumnStart: props.columnStart
+        })
+      : null,
+    gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
+    gridRowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
+
+    size: ({ props }) => {
+      if (typeof props.heightRange !== 'string') return
+      const [minHeight, maxHeight] = props.heightRange.split(' ')
+      return {
+        ...getSpacingByKey(minHeight, 'minHeight'),
+        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+      }
+    },
+
+    columns: ({ props }) => props.columns && ({ columns: props.columns }),
+    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
+    columnSpan: ({ props }) => props.columnSpan && ({ columns: props.columnSpan }),
+    columnFill: ({ props }) => props.columnFill && ({ columns: props.columnFill }),
+    columnCount: ({ props }) => props.columnCount && ({ columns: props.columnCount })
+  }
+}
+
+export const Span = { tag: 'span' }
+export const List = {
+  tag: 'ul',
+  childExtend: { tag: 'li' }
+}
+// export const Article = { tag: 'article' }

package/Field/node_modules/@symbo.ls/atoms/Collection.js

@@ -0,0 +1,84 @@
+'use strict'
+
+import { isNot, isArray, isObject, isObjectLike, diff, deepClone } from '@domql/utils'
+
+export const Collection = {
+  define: {
+    $setCollection: (param, el, state) => {
+      if (!param) return
+
+      let data = isArray(param) ? param : []
+
+      if (isObject(param)) {
+        for (const obj in param) { data.push(param[obj]) }
+      }
+
+      data = data.map(item => !isObjectLike(item)
+        ? {
+            props: { value: item }
+          }
+        : item)
+
+      if (data.length) {
+        const t = setTimeout(() => {
+          el.set({ tag: 'fragment', ...data }, { preventDefineUpdate: '$setCollection' })
+          clearTimeout(t)
+        })
+      }
+
+      return data
+    },
+
+    $setStateCollection: (param, el, state) => {
+      if (!param) return
+      if (param.parse) param = param.parse()
+      if (isNot(param)('array', 'object')) return
+
+      if (el.key === 'cnt') {
+        if (el.__ref.__stateCollectionCache) {
+          const d = diff(param, el.__ref.__stateCollectionCache) // eslint-disable-line
+        } else {
+          el.__ref.__stateCollectionCache = deepClone(param)
+        }
+      }
+
+      const obj = { tag: 'fragment' }
+
+      for (const key in param) {
+        const value = param[key]
+        obj[key] = { state: isObjectLike(value) ? value : { value } }
+      }
+
+      const set = () => {
+        el.set(obj, { preventDefineUpdate: '$setStateCollection' })
+      }
+
+      if (el.props.lazyLoad) {
+        window.requestAnimationFrame(set)
+      } else set()
+
+      return obj
+    },
+
+    $setPropsCollection: (param, el, state) => {
+      if (!param) return
+      if (isNot(param)('array', 'object')) return
+
+      const obj = { tag: 'fragment' }
+      for (const key in param) {
+        const value = param[key]
+        obj[key] = { props: isObjectLike(value) ? value : { value } }
+      }
+
+      const set = () => {
+        el.set(obj, { preventDefineUpdate: '$setStateCollection' })
+      }
+
+      if (el.props.lazyLoad) {
+        window.requestAnimationFrame(set)
+      } else set()
+
+      return obj
+    }
+  }
+}

package/Field/node_modules/@symbo.ls/atoms/Direction.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const Direction = {
+  props: {
+    direction: 'ltr'
+  },
+  class: {
+    direction: ({ props }) => ({ direction: props.direction })
+  }
+}

package/Field/node_modules/@symbo.ls/atoms/Flex.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export const Flex = {
+  props: {
+    display: 'flex'
+  },
+
+  class: {
+    flow: ({ props }) => props.flow && ({ flexFlow: props.flow }),
+    wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }),
+    align: ({ props }) => {
+      if (typeof props.align !== 'string') return
+      const [alignItems, justifyContent] = props.align.split(' ')
+      return { alignItems, justifyContent }
+    }
+  }
+}

package/Field/node_modules/@symbo.ls/atoms/Form.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export const Form = {
+  tag: 'form',
+  props: {},
+  attr: {
+    action: ({ props }) => props.action,
+    method: ({ props }) => props.method,
+    enctype: ({ props }) => props.enctype
+  }
+}

package/Field/node_modules/@symbo.ls/atoms/Grid.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
+
+export const Grid = {
+  props: { display: 'grid' },
+
+  class: {
+    area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
+    template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
+    templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
+
+    column: ({ props }) => props.column ? ({ gridColumn: props.column }) : null,
+    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
+    templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null,
+    autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null,
+    columnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
+
+    row: ({ props }) => props.row ? ({ gridRow: props.row }) : null,
+    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
+    templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
+    autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
+    rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
+
+    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
+
+    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
+  }
+}

package/Field/node_modules/@symbo.ls/atoms/Iframe.js

@@ -0,0 +1,16 @@
+'use strict'
+
+export const Iframe = {
+  tag: 'iframe',
+  props: {
+    position: 'relative',
+    minWidth: 'H',
+    minHeight: 'H'
+  },
+  attr: {
+    src: ({ props }) => props.src,
+    loading: ({ props }) => props.loading,
+    allowfullscreen: ({ props }) => props.allowfullscreen,
+    referrerpolicy: ({ props }) => props.referrerpolicy
+  }
+}

package/Field/node_modules/@symbo.ls/atoms/Img.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export const Img = {
+  tag: 'img',
+
+  props: {
+    src: '',
+    alt: '',
+    title: ''
+  },
+
+  attr: {
+    src: ({ props }) => props.src,
+    alt: ({ props }) => props.alt,
+    title: ({ props }) => props.title || props.alt
+  }
+}