@symbo.ls/preview 2.11.315 → 2.11.360

package/articles/Shadows.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { Flex, Banner } from '@symbo.ls/uikit'
+import { Banner } from '@symbo.ls/uikit'
 import { shadow } from '../blocks'
 
 export const Shadows = {
   tag: 'article',
-  extend: Flex,
+  extend: 'Flex',
 
   Header: {
     tag: 'header',

package/articles/Shapes.js

@@ -1,15 +1,14 @@
 'use strict'
 
-import { Flex, Banner } from '@symbo.ls/uikit'
 import { shape } from '../blocks'
 
 export const Shapes = {
   tag: 'article',
-  extend: Flex,
+  extend: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: Banner,
+    extend: 'Banner',
 
     Title: {
       props: {

package/articles/Spacing.js

@@ -1,14 +1,12 @@
 'use strict'
 
-import { Flex, Banner } from '@symbo.ls/uikit'
-
 export const Spacing = {
   tag: 'article',
-  extend: Flex,
+  extend: 'Flex',
 
   Header: {
     tag: 'header',
-    extend: Banner,
+    extend: 'Banner',
 
     Title: {
       props: {

package/articles/Themes.js

@@ -1,11 +1,10 @@
 'use strict'
 
-import { Flex, Icon } from '@symbo.ls/uikit'
 import { ColorBlock } from '../blocks'
 
 export const Themes = {
   tag: 'article',
-  extend: Flex,
+  extend: 'Flex',
 
   Banner: {
     Title: { props: { text: 'Themes' } },
@@ -46,23 +45,23 @@ export const Themes = {
           }
         },
         childExtend: {
-          extend: Flex,
+          extend: 'Flex',
           props: {
             flow: 'column',
             align: 'flex-start space-between',
             padding: 'Z1 Z2'
           },
           icons: {
-            extend: Flex,
+            extend: 'Flex',
             props: {
               gap: 'B',
               align: 'center space-between',
               minWidth: '100%'
             },
-            childExtend: Icon,
-            ...[
-              { props: { icon: 'sun' } },
-              { props: { icon: 'moon' } }
+            childExtend: 'Icon',
+            $propsCollection: [
+              { name: 'sun' },
+              { name: 'moon' }
             ]
           },
           title: {

package/blocks/Default.js

@@ -1,10 +1,8 @@
 'use strict'
 
-import { Hgroup } from 'smbls'
-
 export const DefaultBlock = {
   tag: 'section',
-  extend: Hgroup,
+  extend: 'Hgroup',
   props: {
     flow: 'row',
     boxSizing: 'border-box',

package/blocks/icon.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import { Grid } from '@symbo.ls/uikit'
 import { DefaultBlock } from './section'
 
 export const icon = {
@@ -13,7 +12,7 @@ export const icon = {
 
   Title: null,
   Paragraph: {
-    extend: Grid,
+    extend: 'Grid',
     props: {
       columns: 'repeat(7, 1fr)',
       gap: 'C',

package/blocks/section.js

@@ -1,10 +1,8 @@
 'use strict'
 
-import { Hgroup } from '@symbo.ls/uikit'
-
 export const DefaultBlock = {
   tag: 'section',
-  extend: Hgroup,
+  extend: 'Hgroup',
 
   props: { gap: 'A' },
 

package/blocks/shadow.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import { Grid } from '@symbo.ls/uikit'
 import { DefaultBlock } from './section'
 
 export const shadow = {
@@ -14,7 +13,7 @@ export const shadow = {
   Title: null,
 
   Paragraph: {
-    extend: Grid,
+    extend: 'Grid',
     props: {
       columns: 'repeat(8, 1fr)',
       gap: 'C2',

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/preview",
-  "version": "2.11.315",
+  "version": "2.11.360",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "f7e5836ff0fad163a721cd8a823e2da1a7f346ef",
+  "gitHead": "87c62e587157ba9c3ef135e31dbc79f165cdaa38",
   "dependencies": {
     "smbls": "latest"
   },