@symbo.ls/atoms 2.11.376 → 2.11.385

package/Block.js

@@ -171,12 +171,19 @@ export const Block = {
 
     flexWrap: ({ props }) => !isUndefined(props.flexWrap) && ({
       display: 'flex',
-      flexFlow: props.flexWrap
-    }),
-    flexFlow: ({ props }) => !isUndefined(props.flexFlow) && ({
-      display: 'flex',
-      flexFlow: props.flexFlow + (props.reverse ? '-reverse' : '')
+      flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap
     }),
+    flexFlow: ({ props }) => {
+      const { flexFlow, reverse } = props
+      if (!isString(flexFlow)) return
+      let [direction, wrap] = (flexFlow || 'row').split(' ')
+      if (flexFlow.startsWith('x') || flexFlow === 'row') direction = 'row'
+      if (flexFlow.startsWith('y') || flexFlow === 'column') direction = 'column'
+      return {
+        display: 'flex',
+        flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
+      }
+    },
     flexAlign: ({ props }) => {
       if (!isString(props.flexAlign)) return
       const [alignItems, justifyContent] = props.flexAlign.split(' ')

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.376",
+  "version": "2.11.385",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "da29bc13fda8314e880b1e2dfd6f17123497dc95",
+  "gitHead": "93391bf4aa83345d6883d7bedbdbfb80a0e588b9",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",