@symbo.ls/atoms 3.5.1 → 3.6.1

package/Box.js

@@ -17,19 +17,6 @@ export const Box = {
 
   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
-  },
-
   onBeforeClassAssign
 }
 

package/Iframe.js

@@ -4,19 +4,5 @@ export const Iframe = {
   tag: 'iframe',
   position: 'relative',
   minWidth: 'H',
-  minHeight: 'H',
-
-  attr: {
-    src: (el, s) => {
-      let src = el.call('exec', el.props.src, el)
-
-      if (!src) return
-
-      if (el.call('isString', src) && src.includes('{{')) {
-        src = el.call('replaceLiteralsWithObjectFields', src)
-      }
-
-      return src
-    }
-  }
+  minHeight: 'H'
 }

package/Img.js

@@ -1,16 +1,14 @@
 'use strict'
 
+import { resolvePropValue } from 'attrs-in-props'
+
 export const Img = {
   tag: 'img',
 
   attr: {
     src: (el) => {
       const { props, context } = el
-      let src = (props.preSrc || '') + el.call('exec', props.src, el)
-
-      if (el.call('isString', src) && src.includes('{{')) {
-        src = el.call('replaceLiteralsWithObjectFields', src)
-      }
+      let src = (props.preSrc || '') + resolvePropValue(el, props.src)
 
       let isUrl
       try { isUrl = new URL(src) } catch (e) { }

package/Picture.js

@@ -7,6 +7,7 @@ export const Picture = {
   tag: 'picture',
 
   childExtends: {
+    deps: { getSystemGlobalTheme },
     tag: 'source',
     attr: {
       media: (element) => {
@@ -20,14 +21,14 @@ export const Picture = {
           return '(max-width: 0px)'
 
         return MEDIA[mediaName]
-      },
+      }
     }
   },
 
-  Img: ({ props }) => ({
+  Img: {
     width: 'inherit',
     ignoreChildExtends: true,
     height: 'inherit',
-    src: props.src
-  })
+    src: (element, state) => element.parent.src || state.src
+  }
 }

package/Video.js

@@ -7,19 +7,5 @@ export const Video = {
 
   childExtends: {
     tag: 'source'
-  },
-
-  attr: {
-    src: (el, s) => {
-      let src = el.call('exec', el.props.src, el)
-
-      if (!src) return
-
-      if (el.call('isString', src) && src.includes('{{')) {
-        src = el.call('replaceLiteralsWithObjectFields', src)
-      }
-
-      return src
-    }
   }
 }

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "3.5.1",
+  "version": "3.6.1",
   "main": "index.js",
   "license": "MIT",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "dependencies": {
-    "@domql/state": "^3.5.1",
-    "@domql/utils": "^3.5.1",
-    "smbls": "^3.5.1",
-    "@symbo.ls/scratch": "^3.5.1"
+    "@domql/state": "^3.6.1",
+    "@domql/utils": "^3.6.1",
+    "@symbo.ls/scratch": "^3.6.1"
   },
   "source": "index.js",
   "devDependencies": {
@@ -18,8 +17,10 @@
   "module": "index.js",
   "exports": {
     ".": {
-      "import": "./index.js",
-      "default": "./index.js"
+      "import": "./index.js"
     }
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/Collection.js

@@ -1,228 +0,0 @@
-'use strict'
-
-import { isState, getChildStateInKey } from '@domql/state'
-import {
-  isString,
-  isNumber,
-  isNot,
-  isArray,
-  isObject,
-  isObjectLike,
-  exec,
-  deepClone,
-  addAdditionalExtend
-} from '@domql/utils'
-
-export const Collection = {
-  define: {
-    $collection: async (param, el, state) => {
-      const { __ref: ref } = el
-      const {
-        children: childrenProps,
-        childrenAs,
-        childExtends
-      } = el.props || {}
-      const children = childrenProps && (await exec(childrenProps, el, state))
-
-      const childrenAsDefault = childrenAs || 'props'
-
-      if (children) {
-        if (isObject(children)) {
-          if (children.$$typeof) return el.call('renderReact', children, el)
-          param = deepClone(children)
-          param = Object.keys(param).map(v => {
-            const val = param[v]
-            return addAdditionalExtend(v, val)
-          })
-        } else if (isArray(children)) {
-          param = deepClone(children)
-          if (childrenAsDefault && childrenAsDefault !== 'element') {
-            param = param.map(v => ({
-              ...(childExtends && { extends: childExtends }),
-              [childrenAsDefault]: isObjectLike(v)
-                ? v
-                : childrenAsDefault === 'state'
-                ? { value: v }
-                : { text: v }
-            }))
-          }
-        } else if (isString(children) || isNumber(children)) {
-          el.removeContent()
-          el.content = { text: param }
-          return
-        }
-      }
-
-      if (!param) return
-
-      const filterReact = param.filter(v => !v.$$typeof)
-      if (filterReact.length !== param.length) {
-        const extractedReactComponents = param.filter(v => v.$$typeof)
-        el.call('renderReact', extractedReactComponents, el)
-      }
-      param = filterReact
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-      if (isState(param)) param = param.parse()
-      if (isNot(param)('array', 'object')) return
-
-      param = deepClone(param)
-
-      if (ref.__collectionCache) {
-        const equals =
-          JSON.stringify(param) === JSON.stringify(ref.__collectionCache)
-        if (equals) {
-          ref.__noCollectionDifference = true
-          return
-        } else {
-          ref.__collectionCache = deepClone(param)
-          delete ref.__noCollectionDifference
-        }
-      } else {
-        ref.__collectionCache = deepClone(param)
-      }
-
-      const obj = {
-        tag: 'fragment',
-        ignoreChildProps: true,
-        childProps: el.props && el.props.childProps
-      }
-
-      for (const key in param) {
-        const value = param[key]
-        if (value) obj[key] = isObjectLike(value) ? value : { value }
-      }
-
-      el.removeContent()
-      el.content = obj
-
-      // return deepClone(param)
-    },
-
-    $setCollection: async (param, el, state) => {
-      if (!param) return
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-
-      const data = (
-        isArray(param) ? param : isObject(param) ? Object.values(param) : []
-      ).map(item => (!isObjectLike(item) ? { value: item } : item))
-
-      if (data.length) {
-        const t = setTimeout(() => {
-          el.set(
-            { tag: 'fragment', ...data },
-            { preventDefineUpdate: '$setCollection' }
-          )
-          clearTimeout(t)
-        })
-      }
-
-      return data
-    },
-
-    $stateCollection: async (param, el, state, ctx) => {
-      const { children, childrenAs } = el.props || {}
-      if (!param || children || childrenAs) return
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-      if (isState(param)) param = param.parse()
-      if (isNot(param)('array', 'object')) return
-
-      const { __ref: ref } = el
-      param = deepClone(param)
-
-      if (ref.__stateCollectionCache) {
-        const equals =
-          JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache)
-        if (equals) {
-          ref.__noCollectionDifference = true
-          return
-        } else {
-          ref.__stateCollectionCache = deepClone(param)
-          delete ref.__noCollectionDifference
-        }
-      } else {
-        ref.__stateCollectionCache = deepClone(param)
-      }
-
-      const obj = {
-        tag: 'fragment',
-        ignoreChildProps: true,
-        childProps: el.props && el.props.childProps
-      }
-
-      for (const key in param) {
-        const value = param[key]
-        if (value) obj[key] = { state: isObjectLike(value) ? value : { value } }
-      }
-
-      el.removeContent()
-      el.content = obj
-
-      // return deepClone(param)
-    },
-
-    $propsCollection: async (param, el, state) => {
-      const { children, childrenAs } = el.props || {}
-      if (!param || children || childrenAs) return
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-      if (isState(param)) param = param.parse()
-      if (isNot(param)('array', 'object')) return
-
-      const { __ref: ref } = el
-      param = deepClone(param)
-
-      if (ref.__propsCollectionCache) {
-        const equals =
-          JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache) // eslint-disable-line
-        if (equals) {
-          ref.__noCollectionDifference = true
-          return
-        } else {
-          ref.__propsCollectionCache = deepClone(param)
-          delete ref.__noCollectionDifference
-        }
-      } else {
-        ref.__propsCollectionCache = deepClone(param)
-      }
-
-      const obj = {
-        tag: 'fragment',
-        ignoreChildProps: true,
-        childProps: el.props && el.props.childProps
-      }
-
-      for (const key in param) {
-        const value = param[key]
-        if (value) obj[key] = { props: isObjectLike(value) ? value : { value } }
-      }
-
-      el.removeContent()
-      el.content = obj
-
-      // const set = () => {
-      //   el.set(obj, { preventDefineUpdate: '$propsCollection' })
-      // }
-
-      // if (el.props && el.props.lazyLoad) {
-      //   window.requestAnimationFrame(set)
-      // } else set()
-
-      // return deepClone(param)
-    }
-  }
-}

package/Media copy.js

@@ -1,216 +0,0 @@
-'use strict'
-
-import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
-import { getSystemGlobalTheme } from './Theme'
-
-export const keySetters = {
-  '@': (key, props, result, element, isSubtree) => applyMediaProps(
-    key, props, isSubtree ? result : (result && result.media), element
-  ),
-  ':': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '[': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '*': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '+': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '~': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '&': (key, props, result, element, isSubtree) => applyAndProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '>': (key, props, result, element, isSubtree) => applyAndProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  $: (key, props, result, element, isSubtree) => applyCaseProps(
-    key, props, isSubtree ? result : (result && result.case), element
-  ),
-  '-': (key, props, result, element, isSubtree) => applyVariableProps(
-    key, props, isSubtree ? result : (result && result.variable), element
-  ),
-  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(
-    key, props, isSubtree ? result : (result && result.case), element
-  ),
-  '!': (key, props, result, element, isSubtree) => applyConditionalFalsyProps(
-    key, props, isSubtree ? result : (result && result.case), element
-  )
-}
-
-const execClass = (key, props, result, element) => {
-  const { class: className } = element
-  const classnameExec = className[key]
-
-  if (typeof classnameExec !== 'function') return
-
-  let classExec = classnameExec({
-    props,
-    context: element.context,
-    state: element.state,
-    deps: element.deps
-  }, element.state, element.context)
-
-  if (isArray(classExec)) classExec = classExec.reduce((a, c) => merge(a, c), {})
-
-  for (const finalProp in classExec) {
-    result[finalProp] = classExec[finalProp]
-  }
-
-  return classExec
-}
-
-const convertPropsToClass = (props, result, element) => {
-  const propsClassObj = {}
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (setter) {
-      setter(key, props[key], propsClassObj, element, true)
-      continue
-    } else {
-      execClass(key, props, propsClassObj, element)
-    }
-  }
-
-  return propsClassObj
-}
-
-const applyMediaProps = (key, props, result, element) => {
-  const { context } = element
-  if (!context.designSystem || !context.designSystem.MEDIA) return
-  const globalTheme = getSystemGlobalTheme(element)
-  const { MEDIA } = context.designSystem
-  const mediaValue = MEDIA[key.slice(1)]
-  const generatedClass = convertPropsToClass(props, result, element)
-
-  const name = key.slice(1)
-  const isTheme = ['dark', 'light'].includes(name)
-  const matchesGlobal = name === globalTheme
-
-  if (globalTheme && isTheme) {
-    if (matchesGlobal) return merge(result, generatedClass)
-    return
-  }
-
-  const printValue = '@media ' + (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`)
-  const mediaKey = mediaValue ? printValue : key
-  result[mediaKey] = generatedClass
-  return result[mediaKey]
-}
-
-const applyAndProps = (key, props, result, element) => {
-  result[key] = convertPropsToClass(props, result, element)
-  return result[key]
-}
-
-const applySelectorProps = (key, props, result, element) => {
-  const selectorKey = `&${key}`
-  result[selectorKey] = convertPropsToClass(props, result, element)
-  return result[selectorKey]
-}
-
-const applyCaseProps = (key, props, result, element) => {
-  const { CASES } = element.context && element.context.designSystem
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey]
-  if (!CASES[caseKey] && !isPropTrue) return
-  return merge(result, convertPropsToClass(props, result, element))
-}
-
-const applyVariableProps = (key, props, result, element) => {
-  result[key] = props
-  return result
-}
-
-const applyConditionalCaseProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
-  if (!isPropTrue) return // remove classname if not here
-  return overwriteDeep(result, convertPropsToClass(props, result, element))
-}
-
-const applyConditionalFalsyProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
-  if (!isPropTrue) return overwriteDeep(result, convertPropsToClass(props, result, element))
-}
-
-const applyTrueProps = (props, result, element) => merge(result, convertPropsToClass(props, result, element))
-
-const getSetter = (key, element) => {
-  const { props } = element
-  const setter = keySetters[key.slice(0, 1)]
-
-  if (setter) setter(key, props[key], CLASS_NAMES, element)
-  else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
-}
-
-const beforeClassAssign = (element, s) => {
-  const { props, class: className, context } = element
-
-  const CLASS_NAMES = {
-    media: {},
-    selector: {},
-    case: {},
-    variable: {}
-  }
-
-  if (!context) return
-  const globalTheme = context.designSystem.globalTheme
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (globalTheme) {
-      if (key === 'theme' && !props.themeModifier) {
-        props.update({
-          themeModifier: globalTheme
-        }, {
-          preventListeners: true,
-          preventRecursive: true,
-          isForced: true,
-          preventDefineUpdate: true
-        })
-      }
-    }
-    if (setter) setter(key, props[key], CLASS_NAMES, element)
-    else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
-  }
-
-  // override props
-  // if (props['^']) {
-  //   for (const key in props['^']) {
-  //     execClass(key, props, CLASS_NAMES, element)
-  //   }
-  // }
-
-  const parentProps = element.parent && element.parent.props
-  if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
-    element.setProps({
-      spacingRatio: parentProps.spacingRatio,
-      inheritSpacingRatio: true
-    }, {
-      preventListeners: true,
-      preventRecursive: true,
-      isForced: true,
-      preventDefineUpdate: true
-    })
-  }
-
-  overwriteShallow(className, CLASS_NAMES)
-}
-
-export const Media = {
-  class: {
-    case: (el, s) => {
-      return {
-        //
-      }
-    }
-  },
-  on: { beforeClassAssign }
-}

package/Media.js

@@ -1,280 +0,0 @@
-'use strict'
-
-import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
-import { getSystemGlobalTheme } from './Theme.js'
-
-export const keySetters = {
-  '@': (key, props, result, element, isSubtree) =>
-    applyMediaProps(
-      key,
-      props,
-      isSubtree ? result : result && result.media,
-      element
-    ),
-  ':': (key, props, result, element, isSubtree) =>
-    applySelectorProps(
-      key,
-      props,
-      isSubtree ? result : result && result.selector,
-      element
-    ),
-  '[': (key, props, result, element, isSubtree) =>
-    applySelectorProps(
-      key,
-      props,
-      isSubtree ? result : result && result.selector,
-      element
-    ),
-  '*': (key, props, result, element, isSubtree) =>
-    applySelectorProps(
-      key,
-      props,
-      isSubtree ? result : result && result.selector,
-      element
-    ),
-  '+': (key, props, result, element, isSubtree) =>
-    applySelectorProps(
-      key,
-      props,
-      isSubtree ? result : result && result.selector,
-      element
-    ),
-  '~': (key, props, result, element, isSubtree) =>
-    applySelectorProps(
-      key,
-      props,
-      isSubtree ? result : result && result.selector,
-      element
-    ),
-  '&': (key, props, result, element, isSubtree) =>
-    applyAndProps(
-      key,
-      props,
-      isSubtree ? result : result && result.selector,
-      element
-    ),
-  '>': (key, props, result, element, isSubtree) =>
-    applyAndProps(
-      key,
-      props,
-      isSubtree ? result : result && result.selector,
-      element
-    ),
-  $: (key, props, result, element, isSubtree) =>
-    applyCaseProps(
-      key,
-      props,
-      isSubtree ? result : result && result.case,
-      element
-    ),
-  '-': (key, props, result, element, isSubtree) =>
-    applyVariableProps(
-      key,
-      props,
-      isSubtree ? result : result && result.variable,
-      element
-    ),
-  '.': (key, props, result, element, isSubtree) =>
-    applyConditionalCaseProps(
-      key,
-      props,
-      isSubtree ? result : result && result.case,
-      element
-    ),
-  '!': (key, props, result, element, isSubtree) =>
-    applyConditionalFalsyProps(
-      key,
-      props,
-      isSubtree ? result : result && result.case,
-      element
-    )
-}
-
-const execClass = (key, props, result, element) => {
-  const { class: className } = element
-  const classnameExec = className[key]
-
-  if (typeof classnameExec !== 'function') return
-
-  let classExec = classnameExec(
-    {
-      props,
-      context: element.context,
-      state: element.state,
-      deps: element.deps
-    },
-    element.state,
-    element.context
-  )
-
-  if (isArray(classExec))
-    classExec = classExec.reduce((a, c) => merge(a, c), {})
-
-  for (const finalProp in classExec) {
-    result[finalProp] = classExec[finalProp]
-  }
-
-  return classExec
-}
-
-const convertPropsToClass = (props, result, element) => {
-  const propsClassObj = {}
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (setter) {
-      setter(key, props[key], propsClassObj, element, true)
-      continue
-    } else {
-      execClass(key, props, propsClassObj, element)
-    }
-  }
-
-  return propsClassObj
-}
-
-const applyMediaProps = (key, props, result, element) => {
-  const { context } = element
-  if (!context.designSystem || !context.designSystem.MEDIA) return
-  const globalTheme = getSystemGlobalTheme(element)
-  const { MEDIA } = context.designSystem
-  const mediaValue = MEDIA[key.slice(1)]
-  const generatedClass = convertPropsToClass(props, result, element)
-
-  const name = key.slice(1)
-  const isTheme = ['dark', 'light'].includes(name)
-  const matchesGlobal = name === globalTheme
-
-  if (globalTheme && isTheme) {
-    if (matchesGlobal) return merge(result, generatedClass)
-    return
-  }
-
-  const printValue =
-    '@media ' +
-    (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`)
-  const mediaKey = mediaValue ? printValue : key
-  result[mediaKey] = generatedClass
-  return result[mediaKey]
-}
-
-const applyAndProps = (key, props, result, element) => {
-  result[key] = convertPropsToClass(props, result, element)
-  return result[key]
-}
-
-const applySelectorProps = (key, props, result, element) => {
-  const selectorKey = `&${key}`
-  result[selectorKey] = convertPropsToClass(props, result, element)
-  return result[selectorKey]
-}
-
-const applyCaseProps = (key, props, result, element) => {
-  const { CASES } = element.context && element.context.designSystem
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey]
-  if (!CASES[caseKey] && !isPropTrue) return
-  return merge(result, convertPropsToClass(props, result, element))
-}
-
-const applyVariableProps = (key, props, result, element) => {
-  result[key] = props
-  return result
-}
-
-const applyConditionalCaseProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue =
-    element.props[caseKey] === true ||
-    element.state[caseKey] ||
-    element[caseKey]
-  if (!isPropTrue) return // remove classname if not here
-  return overwriteDeep(result, convertPropsToClass(props, result, element))
-}
-
-const applyConditionalFalsyProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue =
-    element.props[caseKey] === true ||
-    element.state[caseKey] ||
-    element[caseKey]
-  if (!isPropTrue)
-    return overwriteDeep(result, convertPropsToClass(props, result, element))
-}
-
-const applyTrueProps = (props, result, element) =>
-  merge(result, convertPropsToClass(props, result, element))
-
-export const beforeClassAssign = (element, s, ctx) => {
-  const { props, class: className, context } = element
-
-  const CLASS_NAMES = {
-    media: {},
-    selector: {},
-    case: {},
-    variable: {}
-  }
-
-  if (!context) return
-  const globalTheme = context.designSystem.globalTheme
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (globalTheme) {
-      if (key === 'theme' && !props.themeModifier) {
-        props.themeModifier = globalTheme
-        // props.update(
-        //   {
-        //     themeModifier: globalTheme
-        //   },
-        //   {
-        //     preventListeners: true,
-        //     preventRecursive: true,
-        //     isForced: true,
-        //     preventDefineUpdate: true
-        //   }
-        // )
-      }
-    }
-    if (setter) setter(key, props[key], CLASS_NAMES, element)
-    else if (key === 'class') {
-      const value = element.props.class
-      if (!element.call('isString', value)) return
-      const classArr = value.split(' ')
-      const scratchClasses = ctx.designSystem.CLASS
-      CLASS_NAMES.class = classArr.reduce((accumulator, current) => {
-        const scratchClass = scratchClasses[current]
-        return merge(accumulator, scratchClass)
-      }, {})
-    } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
-  }
-
-  // override props
-  // if (props['^']) {
-  //   for (const key in props['^']) {
-  //     execClass(key, props, CLASS_NAMES, element)
-  //   }
-  // }
-
-  const parentProps = element.parent && element.parent.props
-  if (
-    parentProps &&
-    parentProps.spacingRatio &&
-    parentProps.inheritSpacingRatio
-  ) {
-    element.setProps(
-      {
-        spacingRatio: parentProps.spacingRatio,
-        inheritSpacingRatio: true
-      },
-      {
-        preventListeners: true,
-        preventRecursive: true,
-        isForced: true,
-        preventDefineUpdate: true
-      }
-    )
-  }
-
-  overwriteShallow(className, CLASS_NAMES)
-}