@symbo.ls/atoms 2.11.263 → 2.11.269

package/Block.js

@@ -217,6 +217,7 @@ export const Hr = {
   props: { margin: 'C1 0' }
 }
 export const Br = { tag: 'br' }
+export const Div = { tag: 'div' }
 export const Span = { tag: 'span' }
 export const Ul = {
   tag: 'ul',

package/Svg.js

@@ -31,12 +31,12 @@ export const Svg = {
 
     SVGKey = SVG[symbolId] = Math.random()
     if (props.src) {
-      deps.init({
-        svg: { [SVGKey]: props.src }
-      }, {
-        document: context.document,
-        emotion: context.emotion
-      })
+      // deps.init({
+      //   svg: { [SVGKey]: props.src }
+      // }, {
+      //   document: context.document,
+      //   emotion: context.emotion
+      // })
     }
 
     return useSVGSymbol(SVGKey)

package/Text.js

@@ -24,6 +24,7 @@ export const Text = {
     // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
     textDecoration: ({ props }) => !isUndefined(props.textDecoration) && ({ textDecoration: props.textDecoration }),
     textTransform: ({ props }) => !isUndefined(props.textTransform) && ({ textTransform: props.textTransform }),
+    wordBreak: ({ props }) => !isUndefined(props.wordBreak) && ({ wordBreak: props.wordBreak }),
     whiteSpace: ({ props }) => !isUndefined(props.whiteSpace) && ({ whiteSpace: props.whiteSpace }),
     wordWrap: ({ props }) => !isUndefined(props.wordWrap) && ({ wordWrap: props.wordWrap }),
     letterSpacing: ({ props }) => !isUndefined(props.letterSpacing) && ({ letterSpacing: props.letterSpacing }),
@@ -71,5 +72,3 @@ export const Footnote = {
 export const B = { tag: 'b' }
 
 export const I = { tag: 'i' }
-
-// export const Paragraph = { tag: 'p' }

package/Theme.js

@@ -38,8 +38,14 @@ export const Theme = {
       const { props, deps } = element
       const globalTheme = deps.getSystemTheme(element)
       if (!props.theme) return
-      const getMediaTheme = deps.getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
-      return getMediaTheme
+      const hasSubtheme = props.theme.includes(' ') && !props.theme.includes('@')
+      const globalThemeForced = `@${props.themeModifier || globalTheme}`
+      if (hasSubtheme) {
+        const themeAppliedInVal = props.theme.split(' ')
+        themeAppliedInVal.splice(1, 0, globalThemeForced)
+        return deps.getMediaTheme(themeAppliedInVal)
+      } else if (props.theme.includes('@{globalTheme}')) props.theme.replace('@{globalTheme}', globalThemeForced)
+      return deps.getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
     },
 
     color: (element) => {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.263",
+  "version": "2.11.269",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "d9a23448de2c05c7eb8577e0f53eecd2513a5041",
+  "gitHead": "9539c62d29cc279dbe7e149aa96bb8ee019c7119",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",