@symbo.ls/atoms 2.11.375 → 2.11.380

package/Img.js

@@ -17,7 +17,7 @@ export const Img = {
       try { isUrl = new URL(src) } catch (e) {}
       if (isUrl) return src
       const file = context.files && context.files[src]
-      if (file) return file.content?.src
+      if (file) return file.content && file.content.src
     },
     alt: ({ props }) => props.alt,
     title: ({ props }) => props.title || props.alt

package/Media.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
-import { getSystemTheme } from './Theme'
+import { getSystemGlobalTheme } from './Theme'
 
 export const keySetters = {
   '@': (key, props, result, element, isSubtree) => applyMediaProps(
@@ -83,9 +83,9 @@ const convertPropsToClass = (props, result, element) => {
 const applyMediaProps = (key, props, result, element) => {
   const { context } = element
   if (!context.designSystem || !context.designSystem.MEDIA) return
-  const globalTheme = getSystemTheme(element)
+  const globalTheme = getSystemGlobalTheme(element)
   const { MEDIA } = context.designSystem
-  const mediaName = MEDIA[key.slice(1)]
+  const mediaValue = MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
 
   const name = key.slice(1)
@@ -97,7 +97,7 @@ const applyMediaProps = (key, props, result, element) => {
     return
   }
 
-  const mediaKey = mediaName ? `@media screen and ${mediaName}` : key
+  const mediaKey = mediaValue ? `@media screen and ${mediaValue}` : key
   result[mediaKey] = generatedClass
   return result[mediaKey]
 }

package/Picture.js

@@ -1,9 +1,9 @@
 'use strict'
 
-import { getSystemTheme } from './Theme'
+import { getSystemGlobalTheme } from './Theme'
 
 export const Picture = {
-  deps: { getSystemTheme },
+  deps: { getSystemGlobalTheme },
   tag: 'picture',
 
   childExtend: {
@@ -12,7 +12,7 @@ export const Picture = {
       media: (element) => {
         const { props, key, context, deps } = element
         const { MEDIA } = context.designSystem
-        const globalTheme = deps.getSystemTheme(element)
+        const globalTheme = deps.getSystemGlobalTheme(element)
         const mediaName = (props.media || key).slice(1)
 
         if (mediaName === globalTheme) return '(min-width: 0px)'

package/Theme.js

@@ -13,7 +13,7 @@ import {
 import { depth } from './Shape/style'
 import { isUndefined, isString } from '@domql/utils'
 
-export const getSystemTheme = ({ context, state }) => {
+export const getSystemGlobalTheme = ({ context, state }) => {
   const rootState = state && state.root
   return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
 }
@@ -21,7 +21,7 @@ export const getSystemTheme = ({ context, state }) => {
 export const Theme = {
   deps: {
     depth,
-    getSystemTheme,
+    getSystemGlobalTheme,
     getMediaTheme,
     getMediaColor,
     transformTextStroke,
@@ -36,7 +36,7 @@ export const Theme = {
 
     theme: (element) => {
       const { props, deps } = element
-      const globalTheme = deps.getSystemTheme(element)
+      const globalTheme = deps.getSystemGlobalTheme(element)
       if (!props.theme) return
       const hasSubtheme = props.theme.includes(' ') && !props.theme.includes('@')
       const globalThemeForced = `@${props.themeModifier || globalTheme}`
@@ -50,7 +50,7 @@ export const Theme = {
 
     color: (element) => {
       const { props, deps } = element
-      const globalTheme = deps.getSystemTheme(element)
+      const globalTheme = deps.getSystemGlobalTheme(element)
       if (!props.color) return
       return {
         color: deps.getMediaColor(props.color, globalTheme)
@@ -59,7 +59,7 @@ export const Theme = {
 
     background: (element) => {
       const { props, deps } = element
-      const globalTheme = deps.getSystemTheme(element)
+      const globalTheme = deps.getSystemGlobalTheme(element)
       if (!props.background) return
       return {
         background: deps.getMediaColor(props.background, globalTheme)
@@ -68,7 +68,7 @@ export const Theme = {
 
     backgroundColor: (element) => {
       const { props, deps } = element
-      const globalTheme = deps.getSystemTheme(element)
+      const globalTheme = deps.getSystemGlobalTheme(element)
       if (!props.backgroundColor) return
       return {
         backgroundColor: deps.getMediaColor(props.backgroundColor, globalTheme)
@@ -77,7 +77,7 @@ export const Theme = {
 
     backgroundImage: (element) => {
       const { props, deps } = element
-      const globalTheme = deps.getSystemTheme(element)
+      const globalTheme = deps.getSystemGlobalTheme(element)
       if (!props.backgroundImage) return
       return ({
         backgroundImage: deps.transformBackgroundImage(props.backgroundImage, globalTheme)
@@ -115,7 +115,7 @@ export const Theme = {
 
     borderColor: (element) => {
       const { props, deps } = element
-      const globalTheme = deps.getSystemTheme(element)
+      const globalTheme = deps.getSystemGlobalTheme(element)
       if (!props.borderColor) return
       return {
         borderColor: deps.getMediaColor(props.borderColor, globalTheme)
@@ -140,7 +140,7 @@ export const Theme = {
 
     shadow: (element) => {
       const { props, deps } = element
-      const globalTheme = deps.getSystemTheme(element)
+      const globalTheme = deps.getSystemGlobalTheme(element)
       if (!props.backgroundImage) return
       return ({
         boxShadow: deps.transformShadow(props.shadow, globalTheme)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.375",
+  "version": "2.11.380",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "4fddad68b778dbfd8298ac6ca8d500bdabbb2282",
+  "gitHead": "e7cf06697ab58d0d31fdcafddc125cc03d16dd22",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",