@symbo.ls/atoms 2.11.160 → 2.11.164

package/Animation.js

@@ -3,9 +3,10 @@
 import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
 import { isObject } from '@domql/utils'
 import { emotion } from '@symbo.ls/emotion'
-const { keyframes } = emotion
 
 const applyAnimationProps = (animation, element) => {
+  const { emotion: ctxEmotion } = element.context
+  const { keyframes } = ctxEmotion || emotion
   if (isObject(animation)) return { animationName: keyframes(animation) }
   const { ANIMATION } = element.context && element.context.designSystem
   const record = ANIMATION[animation]
@@ -13,28 +14,29 @@ const applyAnimationProps = (animation, element) => {
 }
 
 export const Animation = {
+  deps: { isObject, getTimingByKey, getTimingFunction, applyAnimationProps },
   class: {
     animation: (el) => el.props.animation && {
-      animationName: applyAnimationProps(el.props.animation, el),
-      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
-      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
-      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
+      animationName: el.deps.applyAnimationProps(el.props.animation, el),
+      animationDuration: el.deps.getTimingByKey(el.props.animationDuration || 'A').timing,
+      animationDelay: el.deps.getTimingByKey(el.props.animationDelay || '0s').timing,
+      animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || 'ease'),
       animationFillMode: el.props.animationFillMode || 'both',
       animationPlayState: el.props.animationPlayState,
       animationDirection: el.props.animationDirection
     },
     animationName: (el) => el.props.animationName && {
-      animationName: applyAnimationProps(el.props.animationName, el)
+      animationName: el.deps.applyAnimationProps(el.props.animationName, el)
     },
 
-    animationDuration: ({ props }) => props.animationDuration && ({
-      animationDuration: getTimingByKey(props.animationDuration).timing
+    animationDuration: ({ props, deps }) => props.animationDuration && ({
+      animationDuration: deps.getTimingByKey(props.animationDuration).timing
     }),
-    animationDelay: ({ props }) => props.animationDelay && ({
-      animationDelay: getTimingByKey(props.animationDelay).timing
+    animationDelay: ({ props, deps }) => props.animationDelay && ({
+      animationDelay: deps.getTimingByKey(props.animationDelay).timing
     }),
-    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
-      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
+    animationTimingFunction: ({ props, deps }) => props.animationTimingFunction && ({
+      animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
     }),
     animationFillMode: ({ props }) => props.animationFillMode && ({
       animationFillMode: props.animationFillMode

package/Block.js

@@ -3,6 +3,8 @@
 import { getSpacingBasedOnRatio, getSpacingByKey, transfromGap } from '@symbo.ls/scratch'
 
 export const Block = {
+  deps: { getSpacingBasedOnRatio, getSpacingByKey, transfromGap },
+
   class: {
     boxSizing: ({ props }) => props.boxSizing
       ? ({ boxSizing: props.boxSizing })
@@ -14,36 +16,36 @@ export const Block = {
 
     hide: ({ props }) => props.hide && ({ display: 'none !important' }),
 
-    width: ({ props }) => props.width && getSpacingBasedOnRatio(props, 'width'),
-    height: ({ props }) => props.height && getSpacingBasedOnRatio(props, 'height'),
-    boxSize: ({ props }) => {
+    width: ({ props, deps }) => props.width && deps.getSpacingBasedOnRatio(props, 'width'),
+    height: ({ props, deps }) => props.height && deps.getSpacingBasedOnRatio(props, 'height'),
+    boxSize: ({ props, deps }) => {
       if (typeof props.boxSize !== 'string') return
       const [height, width] = props.boxSize.split(' ')
       return {
-        ...getSpacingByKey(height, 'height'),
-        ...getSpacingByKey(width || height, 'width')
+        ...deps.getSpacingByKey(height, 'height'),
+        ...deps.getSpacingByKey(width || height, 'width')
       }
     },
 
-    maxWidth: ({ props }) => props.maxWidth && getSpacingBasedOnRatio(props, 'maxWidth'),
-    minWidth: ({ props }) => props.minWidth && getSpacingBasedOnRatio(props, 'minWidth'),
-    widthRange: ({ props }) => {
+    maxWidth: ({ props, deps }) => props.maxWidth && deps.getSpacingBasedOnRatio(props, 'maxWidth'),
+    minWidth: ({ props, deps }) => props.minWidth && deps.getSpacingBasedOnRatio(props, 'minWidth'),
+    widthRange: ({ props, deps }) => {
       if (typeof props.widthRange !== 'string') return
       const [minWidth, maxWidth] = props.widthRange.split(' ')
       return {
-        ...getSpacingByKey(minWidth, 'minWidth'),
-        ...getSpacingByKey(maxWidth || minWidth, 'maxWidth')
+        ...deps.getSpacingByKey(minWidth, 'minWidth'),
+        ...deps.getSpacingByKey(maxWidth || minWidth, 'maxWidth')
       }
     },
 
-    maxHeight: ({ props }) => props.maxHeight && getSpacingBasedOnRatio(props, 'maxHeight'),
-    minHeight: ({ props }) => props.minHeight && getSpacingBasedOnRatio(props, 'minHeight'),
-    heightRange: ({ props }) => {
+    maxHeight: ({ props, deps }) => props.maxHeight && deps.getSpacingBasedOnRatio(props, 'maxHeight'),
+    minHeight: ({ props, deps }) => props.minHeight && deps.getSpacingBasedOnRatio(props, 'minHeight'),
+    heightRange: ({ props, deps }) => {
       if (typeof props.heightRange !== 'string') return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
-        ...getSpacingByKey(minHeight, 'minHeight'),
-        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+        ...deps.getSpacingByKey(minHeight, 'minHeight'),
+        ...deps.getSpacingByKey(maxHeight || minHeight, 'maxHeight')
       }
     },
 
@@ -51,58 +53,58 @@ export const Block = {
 
     aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
 
-    borderWidth: ({ props }) => props.borderWidth ? getSpacingBasedOnRatio(props, 'borderWidth') : null,
+    borderWidth: ({ props, deps }) => props.borderWidth ? deps.getSpacingBasedOnRatio(props, 'borderWidth') : null,
 
-    padding: ({ props }) => props.padding ? getSpacingBasedOnRatio(props, 'padding') : null,
-    paddingInline: ({ props }) => {
+    padding: ({ props, deps }) => props.padding ? deps.getSpacingBasedOnRatio(props, 'padding') : null,
+    paddingInline: ({ props, deps }) => {
       if (typeof props.paddingInline !== 'string') return
       const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
       return {
-        ...getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
-        ...getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
+        ...deps.getSpacingByKey(paddingInlineStart, 'paddingInlineStart'),
+        ...deps.getSpacingByKey(paddingInlineEnd || paddingInlineStart, 'paddingInlineEnd')
       }
     },
-    paddingBlock: ({ props }) => {
+    paddingBlock: ({ props, deps }) => {
       if (typeof props.paddingBlock !== 'string') return
       const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
       return {
-        ...getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
-        ...getSpacingByKey(paddingBlockEnd || paddingBlockStart, 'paddingBlockEnd')
+        ...deps.getSpacingByKey(paddingBlockStart, 'paddingBlockStart'),
+        ...deps.getSpacingByKey(paddingBlockEnd || paddingBlockStart, 'paddingBlockEnd')
       }
     },
-    paddingInlineStart: ({ props }) => props.paddingInlineStart ? getSpacingBasedOnRatio(props, 'paddingInlineStart') : null,
-    paddingInlineEnd: ({ props }) => props.paddingInlineEnd ? getSpacingBasedOnRatio(props, 'paddingInlineEnd') : null,
-    paddingBlockStart: ({ props }) => props.paddingBlockStart ? getSpacingBasedOnRatio(props, 'paddingBlockStart') : null,
-    paddingBlockEnd: ({ props }) => props.paddingBlockEnd ? getSpacingBasedOnRatio(props, 'paddingBlockEnd') : null,
+    paddingInlineStart: ({ props, deps }) => props.paddingInlineStart ? deps.getSpacingBasedOnRatio(props, 'paddingInlineStart') : null,
+    paddingInlineEnd: ({ props, deps }) => props.paddingInlineEnd ? deps.getSpacingBasedOnRatio(props, 'paddingInlineEnd') : null,
+    paddingBlockStart: ({ props, deps }) => props.paddingBlockStart ? deps.getSpacingBasedOnRatio(props, 'paddingBlockStart') : null,
+    paddingBlockEnd: ({ props, deps }) => props.paddingBlockEnd ? deps.getSpacingBasedOnRatio(props, 'paddingBlockEnd') : null,
 
-    margin: ({ props }) => props.margin ? getSpacingBasedOnRatio(props, 'margin') : null,
-    marginInline: ({ props }) => {
+    margin: ({ props, deps }) => props.margin ? deps.getSpacingBasedOnRatio(props, 'margin') : null,
+    marginInline: ({ props, deps }) => {
       if (typeof props.marginInline !== 'string') return
       const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
       return {
-        ...getSpacingByKey(marginInlineStart, 'marginInlineStart'),
-        ...getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
+        ...deps.getSpacingByKey(marginInlineStart, 'marginInlineStart'),
+        ...deps.getSpacingByKey(marginInlineEnd || marginInlineStart, 'marginInlineEnd')
       }
     },
-    marginBlock: ({ props }) => {
+    marginBlock: ({ props, deps }) => {
       if (typeof props.marginBlock !== 'string') return
       const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
       return {
-        ...getSpacingByKey(marginBlockStart, 'marginBlockStart'),
-        ...getSpacingByKey(marginBlockEnd || marginBlockStart, 'marginBlockEnd')
+        ...deps.getSpacingByKey(marginBlockStart, 'marginBlockStart'),
+        ...deps.getSpacingByKey(marginBlockEnd || marginBlockStart, 'marginBlockEnd')
       }
     },
-    marginInlineStart: ({ props }) => props.marginInlineStart ? getSpacingBasedOnRatio(props, 'marginInlineStart') : null,
-    marginInlineEnd: ({ props }) => props.marginInlineEnd ? getSpacingBasedOnRatio(props, 'marginInlineEnd') : null,
-    marginBlockStart: ({ props }) => props.marginBlockStart ? getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
-    marginBlockEnd: ({ props }) => props.marginBlockEnd ? getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
+    marginInlineStart: ({ props, deps }) => props.marginInlineStart ? deps.getSpacingBasedOnRatio(props, 'marginInlineStart') : null,
+    marginInlineEnd: ({ props, deps }) => props.marginInlineEnd ? deps.getSpacingBasedOnRatio(props, 'marginInlineEnd') : null,
+    marginBlockStart: ({ props, deps }) => props.marginBlockStart ? deps.getSpacingBasedOnRatio(props, 'marginBlockStart') : null,
+    marginBlockEnd: ({ props, deps }) => props.marginBlockEnd ? deps.getSpacingBasedOnRatio(props, 'marginBlockEnd') : null,
 
     gap: ({ props }) => props.gap
       ? ({
           gap: transfromGap(props.gap)
         })
       : null,
-    gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
+    gridArea: ({ props, deps }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
     flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
@@ -140,17 +142,17 @@ export const Block = {
     gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
     gridRowStart: ({ props }) => props.gridRowStart ? ({ gridRowStart: props.gridRowStart }) : null,
 
-    size: ({ props }) => {
+    size: ({ props, deps }) => {
       if (typeof props.heightRange !== 'string') return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
-        ...getSpacingByKey(minHeight, 'minHeight'),
-        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
+        ...deps.getSpacingByKey(minHeight, 'minHeight'),
+        ...deps.getSpacingByKey(maxHeight || minHeight, 'maxHeight')
       }
     },
 
     columns: ({ props }) => props.columns && ({ columns: props.columns }),
-    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
+    columnGap: ({ props, deps }) => props.columnGap ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
     columnSpan: ({ props }) => props.columnSpan && ({ columns: props.columnSpan }),
     columnFill: ({ props }) => props.columnFill && ({ columns: props.columnFill }),
     columnCount: ({ props }) => props.columnCount && ({ columns: props.columnCount })
@@ -170,16 +172,17 @@ export const Ul = {
 // export const Article = { tag: 'article' }
 
 export const Gutter = {
+  deps: { getSpacingByKey },
   props: {
     size: 'C1'
   },
   class: {
-    size: ({ props }) => {
+    size: ({ props, deps }) => {
       if (typeof props.size !== 'string') return
       const [height, width] = props.size.split(' ')
       return {
-        ...getSpacingByKey(height, 'height'),
-        ...getSpacingByKey(width || height, 'width')
+        ...deps.getSpacingByKey(height, 'height'),
+        ...deps.getSpacingByKey(width || height, 'width')
       }
     }
   }

package/Grid.js

@@ -3,6 +3,8 @@
 import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
 
 export const Grid = {
+  deps: { getSpacingBasedOnRatio },
+
   props: { display: 'grid' },
 
   class: {
@@ -24,7 +26,7 @@ export const Grid = {
 
     autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
 
-    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
-    rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
+    columnGap: ({ props, deps }) => props.columnGap ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props, deps }) => props.rowGap ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null
   }
 }

package/Picture.js

@@ -3,15 +3,16 @@
 import { getSystemTheme } from './Theme'
 
 export const Picture = {
+  deps: { getSystemTheme },
   tag: 'picture',
 
   childExtend: {
     tag: 'source',
     attr: {
       media: (element) => {
-        const { props, key, context } = element
+        const { props, key, context, deps } = element
         const { MEDIA } = context.designSystem
-        const globalTheme = getSystemTheme(element)
+        const globalTheme = deps.getSystemTheme(element)
         const mediaName = (props.media || key).slice(1)
 
         if (mediaName === globalTheme) return '(min-width: 0px)'

package/Position.js

@@ -3,19 +3,21 @@
 import { getSpacingByKey } from '@symbo.ls/scratch'
 
 export const Position = {
+  deps: { getSpacingByKey },
+
   props: {},
 
   class: {
     position: ({ props }) => props.position && ({ position: props.position }),
-    inset: ({ props }) => {
+    inset: ({ props, deps }) => {
       const { inset } = props
       if (typeof inset !== 'string') return
-      return { inset: inset.split(' ').map(v => getSpacingByKey(v, 'k').k).join(' ') }
+      return { inset: inset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k).join(' ') }
     },
 
-    left: ({ props }) => getSpacingByKey(props.left, 'left'),
-    top: ({ props }) => getSpacingByKey(props.top, 'top'),
-    right: ({ props }) => getSpacingByKey(props.right, 'right'),
-    bottom: ({ props }) => getSpacingByKey(props.bottom, 'bottom')
+    left: ({ props, deps }) => deps.getSpacingByKey(props.left, 'left'),
+    top: ({ props, deps }) => deps.getSpacingByKey(props.top, 'top'),
+    right: ({ props, deps }) => deps.getSpacingByKey(props.right, 'right'),
+    bottom: ({ props, deps }) => deps.getSpacingByKey(props.bottom, 'bottom')
   }
 }

package/Shape/index.js

@@ -15,10 +15,12 @@ const transformBorderRadius = (radius, props, propertyName) => {
 export const Shape = {
   extend: Pseudo,
 
+  deps: { exec, getSpacingBasedOnRatio, getMediaColor, transformBorderRadius },
+
   class: {
-    shape: ({ props }) => {
+    shape: ({ props, deps }) => {
       const { shape } = props
-      return exec(SHAPES[shape], ({ props }))
+      return deps.exec(SHAPES[shape], ({ props, deps }))
     },
     shapeDirection: ({ props }) => {
       const { shape, shapeDirection } = props
@@ -26,16 +28,16 @@ export const Shape = {
       const shapeDir = SHAPES[shape + 'Direction']
       return shape && shapeDir ? shapeDir[shapeDirection || 'left'] : null
     },
-    shapeDirectionColor: ({ props }) => {
+    shapeDirectionColor: ({ props, deps }) => {
       const { background, backgroundColor } = props
       const borderColor = {
-        borderColor: getMediaColor(background || backgroundColor)
+        borderColor: deps.getMediaColor(background || backgroundColor)
       }
       return props.shapeDirection ? borderColor : null
     },
 
-    round: ({ props, key, ...el }) => transformBorderRadius(props.round || props.borderRadius, props, 'round'),
-    borderRadius: ({ props, key, ...el }) => transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius')
+    round: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.round || props.borderRadius, props, 'round'),
+    borderRadius: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius')
   }
 }
 

package/Shape/style.js

@@ -21,8 +21,8 @@ const getComputedBackgroundColor = ({ props }) => {
     getColor(props.background)
 }
 
-const inheritTransition = ({ props }) => {
-  const exec = Timing.class.transition({ props })
+const inheritTransition = ({ props, deps }) => {
+  const exec = Timing.class.transition({ props, deps })
   return exec && exec.transition
 }
 
@@ -34,7 +34,7 @@ export const SHAPES = {
     borderRadius: '1.15em/2.5em'
   },
 
-  tooltip: ({ props }) => ({
+  tooltip: ({ props, deps }) => ({
     position: props.position || 'relative',
     '&:before': {
       content: '""',
@@ -42,8 +42,8 @@ export const SHAPES = {
       width: '0px',
       height: '0px',
       border: '.35em solid',
-      borderColor: getComputedBackgroundColor({ props }),
-      transition: inheritTransition({ props }),
+      borderColor: getComputedBackgroundColor({ props, deps }),
+      transition: inheritTransition({ props, deps }),
       transitionProperty: 'border-color',
       position: 'absolute',
       borderRadius: '.15em'
@@ -81,13 +81,13 @@ export const SHAPES = {
     }
   },
 
-  tag: ({ props }) => ({
+  tag: ({ props, deps }) => ({
     position: 'relative',
     '&:before': {
       content: '""',
       display: 'block',
-      background: getComputedBackgroundColor({ props }),
-      transition: inheritTransition({ props }),
+      background: getComputedBackgroundColor({ props, deps }),
+      transition: inheritTransition({ props, deps }),
       transitionProperty: 'background',
       borderRadius: '.25em',
       position: 'absolute',
@@ -130,7 +130,7 @@ export const SHAPES = {
     }
   },
 
-  hexagon: ({ props }) => ({
+  hexagon: ({ props, deps }) => ({
     position: 'relative',
     '&:before, &:after': {
       content: '""',
@@ -142,8 +142,8 @@ export const SHAPES = {
       top: '50%',
       transformOrigin: '50% 50%',
       height: '73%',
-      background: getComputedBackgroundColor({ props }),
-      transition: inheritTransition({ props }),
+      background: getComputedBackgroundColor({ props, deps }),
+      transition: inheritTransition({ props, deps }),
       transitionProperty: 'background'
     },
     '&:before': {
@@ -156,7 +156,7 @@ export const SHAPES = {
     }
   }),
 
-  chevron: ({ props }) => ({
+  chevron: ({ props, deps }) => ({
     position: 'relative',
     // overflow: 'hidden',
     '&:before, &:after': {
@@ -167,15 +167,15 @@ export const SHAPES = {
       aspectRatio: '1/1',
       top: '50%',
       transformOrigin: '50% 50%',
-      transition: inheritTransition({ props }),
+      transition: inheritTransition({ props, deps }),
       transitionProperty: 'background'
 
     },
     '&:before': {
-      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props })} 25%, transparent 25%)`
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props, deps })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props, deps })} 25%, transparent 25%)`
     },
     '&:after': {
-      background: getComputedBackgroundColor({ props }),
+      background: getComputedBackgroundColor({ props, deps }),
       borderRadius: '.25em'
     }
   }),

package/Text.js

@@ -4,10 +4,12 @@ import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
 
 export const Text = {
   deps: { getFontSizeByKey, getFontFamily },
+
   text: ({ key, props, state, deps }) => {
     if (props.text === true) return (state && state[key]) || (props && props[key])
     return props.text
   },
+
   class: {
     fontSize: (el) => {
       const { props, deps } = el

package/Theme.js

@@ -27,6 +27,7 @@ export const Theme = {
     transformBorder,
     transformBackgroundImage
   },
+
   class: {
     depth: ({ props, deps }) => props.depth && deps.depth[props.depth],
 

package/Timing.js

@@ -7,21 +7,27 @@ import {
 } from '@symbo.ls/scratch'
 
 export const Timing = {
+  deps: {
+    getTimingFunction,
+    splitTransition,
+    transformDuration
+  },
+
   class: {
-    transition: ({ props }) => props.transition && ({
-      transition: splitTransition(props.transition)
+    transition: ({ props, deps }) => props.transition && ({
+      transition: deps.splitTransition(props.transition)
     }),
     willChange: ({ props }) => props.willChange && ({
       willChange: props.willChange
     }),
-    transitionDuration: ({ props }) => props.transitionDuration && ({
-      transitionDuration: transformDuration(props.transitionDuration)
+    transitionDuration: ({ props, deps }) => props.transitionDuration && ({
+      transitionDuration: deps.transformDuration(props.transitionDuration)
     }),
-    transitionDelay: ({ props }) => props.transitionDelay && ({
-      transitionDelay: transformDuration(props.transitionDelay)
+    transitionDelay: ({ props, deps }) => props.transitionDelay && ({
+      transitionDelay: deps.transformDuration(props.transitionDelay)
     }),
-    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({
-      transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
+    transitionTimingFunction: ({ props, deps }) => props.transitionTimingFunction && ({
+      transitionTimingFunction: deps.getTimingFunction(props.transitionTimingFunction)
     }),
     transitionProperty: ({ props }) => props.transitionProperty && ({
       transitionProperty: props.transitionProperty,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.160",
+  "version": "2.11.164",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "f36bc99a2d0c1b771e3d8e104d1b1005b2b0a33a",
+  "gitHead": "943a48800e5959b8c1f15d5d8d49224565038c23",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",