@symbo.ls/atoms 2.11.438 → 2.11.440

package/Collection.js

@@ -7,18 +7,19 @@ export const Collection = {
   define: {
     $collection: (param, el, state) => {
       const { __ref: ref } = el
-      const { children, childrenAs, childrenExtend } = (el.props || {})
+      const { children, childrenAs, childrenExtends } = (el.props || {})
       const childrenExec = children && exec(children, el, state)
 
       if (isArray(childrenExec)) {
         param = deepCloneWithExtend(childrenExec)
-        if (childrenAs) param = param.map(v => ({ extend: childrenExtend, [childrenAs]: v }))
+        if (childrenAs) param = param.map(v => ({ extend: childrenExtends, [childrenAs]: v }))
       } else if (isObject(childrenExec)) {
         param = deepCloneWithExtend(childrenExec)
         param = Object.keys(param).map(v => {
           const val = param[v]
           return addAdditionalExtend(v, val)
         })
+        if (childrenAs) param = param.map(v => ({ extend: childrenExtends, [childrenAs]: v }))
       }
 
       if (!param) return

package/Theme.js

@@ -148,12 +148,29 @@ export const Theme = {
       })
     },
 
-    boxShadow: ({ props, deps }) => isString(props.boxShadow) && ({
-      boxShadow: deps.transformBoxShadow(props.boxShadow)
-    }),
+    // boxShadow: ({ props, deps }) => isString(props.boxShadow) && ({
+    //   boxShadow: deps.transformBoxShadow(props.boxShadow)
+    // }),
+
+    boxShadow: (element, state, context) => {
+      const { props, deps } = element
+      if (!isString(props.boxShadow)) return
+      const [val, hasImportant] = props.boxShadow.split('!importan')
+      const globalTheme = getSystemGlobalTheme(element)
+      const important = hasImportant ? ' !important' : ''
+      if (important) {
+        console.log(val.trim())
+        console.log(deps.transformBoxShadow(val.trim(), globalTheme))
+        console.log(getMediaColor('canvas-card', globalTheme), globalTheme)
+      }
+
+      return {
+        boxShadow: deps.transformBoxShadow(val.trim(), globalTheme) + important
+      }
+    },
 
-    textShadow: ({ props, deps }) => !isUndefined(props.textShadow) && ({
-      textShadow: deps.transformBoxShadow(props.textShadow)
+    textShadow: ({ props, deps, context }) => !isUndefined(props.textShadow) && ({
+      textShadow: deps.transformBoxShadow(props.textShadow, context.designSystem.globalTheme)
     }),
 
     backdropFilter: ({ props, deps }) => !isUndefined(props.backdropFilter) && ({

package/Transform.js

@@ -6,6 +6,7 @@ export const Transform = {
   class: {
     zoom: ({ props }) => !isUndefined(props.zoom) && ({ zoom: props.zoom }),
     transform: ({ props }) => !isUndefined(props.transform) && ({ transform: props.transform }),
-    transformOrigin: ({ props }) => !isUndefined(props.transformOrigin) && ({ transformOrigin: props.transformOrigin })
+    transformOrigin: ({ props }) => !isUndefined(props.transformOrigin) && ({ transformOrigin: props.transformOrigin }),
+    backfaceVisibility: ({ props }) => !isUndefined(props.backfaceVisibility) && ({ backfaceVisibility: props.backfaceVisibility })
   }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.438",
+  "version": "2.11.440",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "57bac07f08cd6a88591767f41a408e0915815237",
+  "gitHead": "2c0cfa861152d979e4c49d0fe945b4671710ac63",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",