@symbo.ls/atoms 2.29.60 → 2.29.61

package/Box.js

@@ -16,8 +16,8 @@ import {
   addAdditionalExtend
 } from '@domql/utils'
 
-import { depth, SHAPES } from './Shape'
-import { beforeClassAssign } from './Media'
+import { depth, SHAPES } from './Shape.js'
+import { beforeClassAssign } from './Media.js'
 
 import {
   getTimingFunction,
@@ -68,7 +68,7 @@ const applyAnimationProps = (animation, element) => {
 
 const PropsCSS = {
   class: {
-    style: el => el.props && el.props.style
+    style: (el) => el.props && el.props.style
   }
 }
 
@@ -102,16 +102,17 @@ export const 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,
+    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,
     'data-testid': (el, s) =>
       (s.root.ENV === 'testing' || s.root.ENV === 'staging') &&
       ((el.__ref.path.length > 5
@@ -138,7 +139,7 @@ export const Box = {
           if (children.$$typeof) return el.call('renderReact', children, el)
           if (childrenAsDefault && childrenAsDefault !== 'state') {
             param = deepClone(children)
-            param = Object.keys(param).map(v => {
+            param = Object.keys(param).map((v) => {
               const val = param[v]
               return addAdditionalExtend(v, val)
             })
@@ -146,13 +147,13 @@ export const Box = {
         } else if (isArray(children)) {
           param = deepClone(children)
           if (childrenAsDefault && childrenAsDefault !== 'element') {
-            param = param.map(v => ({
+            param = param.map((v) => ({
               ...(childExtends && { extend: childExtends }),
               [childrenAsDefault]: isObjectLike(v)
                 ? v
                 : childrenAsDefault === 'state'
-                ? { value: v }
-                : { text: v }
+                  ? { value: v }
+                  : { text: v }
             }))
           }
         } else if (isString(children) || isNumber(children)) {
@@ -164,9 +165,9 @@ export const Box = {
 
       if (!param) return
 
-      const filterReact = param.filter(v => !v.$$typeof)
+      const filterReact = param.filter((v) => !v.$$typeof)
       if (filterReact.length !== param.length) {
-        const extractedReactComponents = param.filter(v => v.$$typeof)
+        const extractedReactComponents = param.filter((v) => v.$$typeof)
         el.call('renderReact', extractedReactComponents, el)
       }
       param = filterReact
@@ -223,7 +224,7 @@ export const Box = {
 
       const data = (
         isArray(param) ? param : isObject(param) ? Object.values(param) : []
-      ).map(item => (!isObjectLike(item) ? { props: { value: item } } : item))
+      ).map((item) => (!isObjectLike(item) ? { props: { value: item } } : item))
 
       if (data.length) {
         const t = setTimeout(() => {
@@ -683,7 +684,7 @@ export const Box = {
         return {
           inset: inset
             .split(' ')
-            .map(v => deps.getSpacingByKey(v, 'k').k)
+            .map((v) => deps.getSpacingByKey(v, 'k').k)
             .join(' ')
         }
       },
@@ -698,7 +699,7 @@ export const Box = {
         if (typeof verticalInset !== 'string') return
         const vi = verticalInset
           .split(' ')
-          .map(v => deps.getSpacingByKey(v, 'k').k)
+          .map((v) => deps.getSpacingByKey(v, 'k').k)
         return {
           top: vi[0],
           bottom: vi[1] || vi[0]
@@ -710,7 +711,7 @@ export const Box = {
         if (typeof horizontalInset !== 'string') return
         const vi = horizontalInset
           .split(' ')
-          .map(v => deps.getSpacingByKey(v, 'k').k)
+          .map((v) => deps.getSpacingByKey(v, 'k').k)
         return {
           left: vi[0],
           right: vi[1] || vi[0]
@@ -824,7 +825,7 @@ export const Box = {
       depth: ({ props, deps }) =>
         !isUndefined(props.depth) && deps.depth[props.depth],
 
-      theme: element => {
+      theme: (element) => {
         const { props, deps } = element
         const globalTheme = deps.getSystemGlobalTheme(element)
         if (!props.theme) return
@@ -843,7 +844,7 @@ export const Box = {
         )
       },
 
-      color: element => {
+      color: (element) => {
         const { props, deps } = element
         const globalTheme = deps.getSystemGlobalTheme(element)
         if (!props.color) return
@@ -852,7 +853,7 @@ export const Box = {
         }
       },
 
-      background: element => {
+      background: (element) => {
         const { props, deps } = element
         const globalTheme = deps.getSystemGlobalTheme(element)
         if (!props.background) return
@@ -861,7 +862,7 @@ export const Box = {
         }
       },
 
-      backgroundColor: element => {
+      backgroundColor: (element) => {
         const { props, deps } = element
         const globalTheme = deps.getSystemGlobalTheme(element)
         if (!props.backgroundColor) return
@@ -922,7 +923,7 @@ export const Box = {
           border: deps.transformBorder(props.border)
         },
 
-      borderColor: element => {
+      borderColor: (element) => {
         const { props, deps } = element
         const globalTheme = deps.getSystemGlobalTheme(element)
         if (!props.borderColor) return
@@ -952,7 +953,7 @@ export const Box = {
           borderBottom: deps.transformBorder(props.borderBottom)
         },
 
-      shadow: element => {
+      shadow: (element) => {
         const { props, deps } = element
         const globalTheme = deps.getSystemGlobalTheme(element)
         if (!props.backgroundImage) return
@@ -1027,7 +1028,7 @@ export const Box = {
 
     // animation
     ...{
-      animation: el =>
+      animation: (el) =>
         el.props.animation && {
           animationName: el.deps.applyAnimationProps(el.props.animation, el),
           animationDuration: el.deps.getTimingByKey(
@@ -1043,7 +1044,7 @@ export const Box = {
           animationPlayState: el.props.animationPlayState,
           animationDirection: el.props.animationDirection
         },
-      animationName: el =>
+      animationName: (el) =>
         el.props.animationName && {
           animationName: el.deps.applyAnimationProps(el.props.animationName, el)
         },

package/Media.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
-import { getSystemGlobalTheme } from './Box'
+import { getSystemGlobalTheme } from './Box.js'
 
 export const keySetters = {
   '@': (key, props, result, element, isSubtree) =>

package/Picture.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { getSystemGlobalTheme } from './Box'
+import { getSystemGlobalTheme } from './Box.js'
 
 export const Picture = {
   deps: { getSystemGlobalTheme },
@@ -9,7 +9,7 @@ export const Picture = {
   childExtend: {
     tag: 'source',
     attr: {
-      media: element => {
+      media: (element) => {
         const { props, key, context, deps } = element
         const { MEDIA } = context.designSystem
         const globalTheme = deps.getSystemGlobalTheme(element)

package/Shape.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { getActiveConfig, getColor } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
-import { Box } from './Box'
+import { Box } from './Box.js'
 
 const CONFIG = getActiveConfig()
 

package/index.js

@@ -1,16 +1,16 @@
 'use strict'
 
-export * from './Box'
-export * from './Flex'
-export * from './Grid'
-export * from './Img'
-export * from './Form'
-export * from './Media'
-export * from './Iframe'
-export * from './InteractiveComponent'
-export * from './Picture'
-export * from './Svg'
-export * from './Shape'
-export * from './Video'
-export * from './Text'
-export * from './Hgroup'
+export * from './Box.js'
+export * from './Flex.js'
+export * from './Grid.js'
+export * from './Img.js'
+export * from './Form.js'
+export * from './Media.js'
+export * from './Iframe.js'
+export * from './InteractiveComponent.js'
+export * from './Picture.js'
+export * from './Svg.js'
+export * from './Shape.js'
+export * from './Video.js'
+export * from './Text.js'
+export * from './Hgroup.js'

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.29.60",
+  "version": "2.29.61",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "c55341edaa6d160bf3f3a3de09bc681d66a7fde5",
+  "gitHead": "53e60f9e1f43297ee433fd51df253fbbbba391be",
   "dependencies": {
-    "@domql/state": "^2.29.60",
-    "@domql/utils": "^2.29.60",
-    "@symbo.ls/emotion": "^2.29.60",
-    "@symbo.ls/scratch": "^2.29.60"
+    "@domql/state": "^2.29.61",
+    "@domql/utils": "^2.29.61",
+    "@symbo.ls/emotion": "^2.29.61",
+    "@symbo.ls/scratch": "^2.29.61"
   },
   "source": "src/index.js",
   "devDependencies": {