@symbo.ls/preview 3.1.1 → 3.2.3

package/articles/Colors.js

@@ -4,44 +4,41 @@ import { ColorBlock } from '../blocks'
 
 export const Colors = {
   tag: 'article',
-  extends: 'Flex',
+  display: 'flex',
 
-  props: {
-    margin: 'auto',
-    minWidth: '100%'
-  },
+  margin: 'auto',
+  minWidth: '100%',
 
   Banner: {
     tag: 'header',
-    props: {},
 
     Title: { text: 'Colors' },
 
     Paragraph: {
-      props: {},
       P: {},
       Flex: {
-        props: {},
         Title: {},
-        Paragraph: [{
-          props: { text: 'Brand color pallete' }
-        }, {
-          props: { text: 'Semantic colors' }
-        }, {
-          props: { text: 'Theming' }
-        }]
+        Paragraph: [
+          {
+            text: 'Brand color pallete'
+          },
+          {
+            text: 'Semantic colors'
+          },
+          {
+            text: 'Theming'
+          }
+        ]
       }
     }
   },
 
   Flex: {
-    props: {
-      flow: 'column',
-      overflow: 'auto',
-      padding: '- D E D',
-      '@mobileM': { padding: '- C' },
-      '@mobileS': { padding: '- B' }
-    },
+    flow: 'column',
+    overflow: 'auto',
+    padding: '- D E D',
+    '@mobileM': { padding: '- C' },
+    '@mobileS': { padding: '- B' },
 
     childExtends: ColorBlock,
 
@@ -50,7 +47,8 @@ export const Colors = {
       Paragraph: {
         children: ({ context }) => {
           const { COLOR } = context.designSystem
-          return Object.keys(COLOR).filter(v => COLOR[v].value)
+          return Object.keys(COLOR)
+            .filter(v => COLOR[v].value)
             .map(v => ({
               Color: { background: v },
               Description: {
@@ -64,14 +62,10 @@ export const Colors = {
     },
 
     semantics: {
-      Title: { props: { text: 'Themes' } },
+      Title: { text: 'Themes' },
       Paragraph: {
-        props: {
-          childProps: { theme: 'dialog' }
-        },
-        ...[
-          {}, {}, {}, {}, {}, {}, {}, {}
-        ]
+        childProps: { theme: 'dialog' },
+        ...[{}, {}, {}, {}, {}, {}, {}, {}]
       }
     }
   }

package/articles/Icons.js

@@ -4,7 +4,7 @@ import { icon } from '../blocks'
 
 export const Icons = {
   tag: 'article',
-  extends: 'Flex',
+  display: 'flex',
 
   Header: {
     tag: 'header',
@@ -15,11 +15,14 @@ export const Icons = {
       Flex: {
         Title: {},
         Paragraph: {
-          ...[{
-            props: { text: 'Brand font' }
-          }, {
-            props: { text: 'Functional font' }
-          }]
+          ...[
+            {
+              text: 'Brand font'
+            },
+            {
+              text: 'Functional font'
+            }
+          ]
         }
       }
     }

package/articles/Shadows.js

@@ -4,7 +4,7 @@ import { shadow } from '../blocks'
 
 export const Shadows = {
   tag: 'article',
-  extends: 'Flex',
+  display: 'flex',
 
   Header: {
     tag: 'header',
@@ -16,11 +16,14 @@ export const Shadows = {
       Flex: {
         Title: {},
         Paragraph: {
-          ...[{
-            props: { text: 'Brand font' }
-          }, {
-            props: { text: 'Functional font' }
-          }]
+          ...[
+            {
+              text: 'Brand font'
+            },
+            {
+              text: 'Functional font'
+            }
+          ]
         }
       }
     }

package/articles/Shapes.js

@@ -4,28 +4,29 @@ import { shape } from '../blocks'
 
 export const Shapes = {
   tag: 'article',
-  extends: 'Flex',
+  display: 'flex',
 
   Header: {
     tag: 'header',
     extends: 'Banner',
 
     Title: {
-      props: {
-        text: 'Shapes',
-        lineHeight: '1.15em'
-      }
+      text: 'Shapes',
+      lineHeight: '1.15em'
     },
     Paragraph: {
       P: {},
       Flex: {
         Title: {},
         Paragraph: {
-          ...[{
-            props: { text: 'Brand font' }
-          }, {
-            props: { text: 'Functional font' }
-          }]
+          ...[
+            {
+              text: 'Brand font'
+            },
+            {
+              text: 'Functional font'
+            }
+          ]
         }
       }
     }

package/articles/Spacing.js

@@ -2,28 +2,29 @@
 
 export const Spacing = {
   tag: 'article',
-  extends: 'Flex',
+  display: 'flex',
 
   Header: {
     tag: 'header',
     extends: 'Banner',
 
     Title: {
-      props: {
-        text: 'Spacing',
-        lineHeight: '1.15em'
-      }
+      text: 'Spacing',
+      lineHeight: '1.15em'
     },
     Paragraph: {
       P: {},
       Flex: {
         Title: {},
         Paragraph: {
-          ...[{
-            props: { text: 'Brand font' }
-          }, {
-            props: { text: 'Functional font' }
-          }]
+          ...[
+            {
+              text: 'Brand font'
+            },
+            {
+              text: 'Functional font'
+            }
+          ]
         }
       }
     }

package/articles/Themes.js

@@ -4,21 +4,16 @@ import { ColorBlock } from '../blocks'
 
 export const Themes = {
   tag: 'article',
-  extends: 'Flex',
+  display: 'flex',
 
   Banner: {
-    Title: { props: { text: 'Themes' } },
+    Title: { text: 'Themes' },
     Paragraph: {
-      props: {
-        alignItems: 'flex-end'
-      },
-      list: {
+      alignItems: 'flex-end',
+      List: {
         Title: { text: 'What you’ll find' },
         Paragraph: {
-          ...[
-            { text: 'Dark theme' },
-            { text: 'Light theme' }
-          ]
+          ...[{ text: 'Dark theme' }, { text: 'Light theme' }]
         }
       },
       P: {
@@ -28,62 +23,47 @@ export const Themes = {
   },
 
   Flex: {
-    props: {
-      flow: 'column',
-      padding: 'E C1 - C1',
-      gap: 'E'
-    },
+    flow: 'column',
+    padding: 'E C1 - C1',
+    gap: 'E',
     childExtends: {
       extends: ColorBlock,
       Hgroup: {},
       Grid: {
-        props: {
-          columns: 'repeat(5, 1fr)',
-          childProps: {
-            theme: 'primary',
-            border: 'none !important'
-          }
+        columns: 'repeat(5, 1fr)',
+        childProps: {
+          theme: 'primary',
+          border: 'none !important'
         },
         childExtends: {
-          extends: 'Flex',
-          props: {
-            flow: 'column',
-            align: 'flex-start space-between',
-            padding: 'Z1 Z2'
-          },
-          icons: {
-            extends: 'Flex',
-            props: {
-              gap: 'B',
-              align: 'center space-between',
-              minWidth: '100%'
-            },
+          display: 'flex',
+          flow: 'column',
+          align: 'flex-start space-between',
+          padding: 'Z1 Z2',
+          Icons: {
+            display: 'flex',
+            gap: 'B',
+            align: 'center space-between',
+            minWidth: '100%',
             childExtends: 'Icon',
-            children: [
-              { name: 'sun' },
-              { name: 'moon' }
-            ]
+            children: [{ name: 'sun' }, { name: 'moon' }]
           },
-          title: {
+          Title: {
             tag: 'h6',
-            props: {
-              text: 'primary',
-              textTransform: 'capitalize',
-              fontWeight: '500'
-            }
+            text: 'primary',
+            textTransform: 'capitalize',
+            fontWeight: '500'
           }
         },
         ...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
       }
-
     },
     ...[
       {
         Hgroup: {
-          Title: { props: { text: 'Dark Theme' } }
+          Title: { text: 'Dark Theme' }
         },
-        Grid: {
-        }
+        Grid: {}
       }
     ]
   }

package/articles/Typography.js

@@ -4,41 +4,40 @@ import { FontsBlock } from '../blocks'
 
 export const Typography = {
   tag: 'article',
-  extends: 'Flex',
+  display: 'flex',
 
   Header: {
     tag: 'header',
     extends: 'Banner',
     Title: {
-      props: {
-        text: 'type',
-        lineHeight: '1.15em'
-      }
+      text: 'type',
+      lineHeight: '1.15em'
     },
     Paragraph: {
       P: {},
       Flex: {
         Title: {},
         Paragraph: {
-          ...[{
-            props: { text: 'Brand font' }
-          }, {
-            props: { text: 'Functional font' }
-          }]
+          ...[
+            {
+              text: 'Brand font'
+            },
+            {
+              text: 'Functional font'
+            }
+          ]
         }
       }
     }
   },
 
   Flex: {
-    props: {
-      flow: 'column',
-      padding: 'B - C -',
-      childProps: {
-        ':not(:last-child)': {
-          border: 'solid, white .15',
-          borderWidth: '0 0 1px 0'
-        }
+    flow: 'column',
+    padding: 'B - C -',
+    childProps: {
+      ':not(:last-child)': {
+        border: 'solid, white .15',
+        borderWidth: '0 0 1px 0'
       }
     },
     childExtends: FontsBlock,
@@ -69,7 +68,7 @@ export const Typography = {
   // Section: {
   //   extends: font,
   //   Title: {
-  //     props: { text: 'Sans Serif' }
+  //     text: 'Sans Serif'
   //   },
   //   Paragraph: {
   //     letters: {

package/blocks/Default.js

@@ -3,37 +3,29 @@
 export const DefaultBlock = {
   tag: 'section',
   extends: 'Hgroup',
-  props: {
-    flow: 'row',
-    boxSizing: 'border-box',
-    // padding: 'E D2 F1 D1',
-    gap: 'B'
-    // border: '2px solid red'
-    // minWidth: '100%'
-  },
-
+  flow: 'row',
+  boxSizing: 'border-box',
+  // padding: 'E D2 F1 D1',
+  gap: 'B',
+  // border: '2px solid red'
+  // minWidth: '100%'
   Title: {
     tag: 'h5',
-    props: {
-      fontSize: 'B2',
-      margin: '- - - B',
-      padding: 'X - - -',
-      // padding: '- - - X',
-      // letterSpacing: '-0.02em',
-      // padding: 'Z2 C X -',
-      // padding: 'A - A C1+X',
-      fontWeight: '900',
-      '@tabletS<': { alignItems: 'flex-end' },
-      letterSpacing: '0.07em',
-      style: {
-        writingMode: 'vertical-rl',
-        textOrientation: 'mixed',
-        transform: 'rotate(180deg)'
-      }
-    }
-
+    fontSize: 'B2',
+    margin: '- - - B',
+    padding: 'X - - -',
+    // padding: '- - - X',
+    // letterSpacing: '-0.02em',
+    // padding: 'Z2 C X -',
+    // padding: 'A - A C1+X',
+    fontWeight: '900',
+    '@tabletS<': { alignItems: 'flex-end' },
+    letterSpacing: '0.07em',
+    writingMode: 'vertical-rl',
+    textOrientation: 'mixed',
+    transform: 'rotate(180deg)'
   },
   Paragraph: {
-    props: { flex: '1' }
+    flex: '1'
   }
 }

package/blocks/color.js

@@ -3,11 +3,8 @@
 import { DefaultBlock } from './section'
 
 const ColorTemplate = {
-  extends: 'Flex',
-  props: {
-    gap: 'A'
-  },
-
+  display: 'flex',
+  gap: 'A',
   Color: {
     boxSize: 'D1',
     aspectRatio: '1 / 1',
@@ -16,8 +13,9 @@ const ColorTemplate = {
   },
 
   Description: {
-    extends: 'Flex',
-    props: { gap: 'X', flow: 'column' },
+    display: 'flex',
+    gap: 'X',
+    flow: 'column',
     Title: { color: 'title' },
     Value: { margin: 'X - -', color: 'paragraph' },
     Var: { color: 'paragraph' }
@@ -28,24 +26,19 @@ export const ColorBlock = {
   extends: DefaultBlock,
 
   Title: {
-    props: {
-      text: 'Primary color',
-      padding: 'C1 - B1 -'
-    }
+    text: 'Primary color',
+    padding: 'C1 - B1 -'
   },
 
   Paragraph: {
-    extends: 'Grid',
-
-    props: {
-      columns: 'repeat(4, 1fr)',
-      gap: 'D',
-      '@tabletS': { columns: 'repeat(3, 1fr)' },
-      '@mobileL': { columns: 'repeat(2, 1fr)' },
-      '@mobileS': { columns: 'repeat(1, 1fr)' },
-      '@mobileXS': { gap: 'A2' }
-    },
-
+    display: 'grid',
+
+    columns: 'repeat(4, 1fr)',
+    gap: 'D',
+    '@tabletS': { columns: 'repeat(3, 1fr)' },
+    '@mobileL': { columns: 'repeat(2, 1fr)' },
+    '@mobileS': { columns: 'repeat(1, 1fr)' },
+    '@mobileXS': { gap: 'A2' },
     childExtends: ColorTemplate
   }
 }

package/blocks/font.js

@@ -4,57 +4,47 @@ import { DefaultBlock } from './section'
 
 export const FontsBlock = {
   extends: DefaultBlock,
-  props: {
-    flex: '1',
-    padding: 'D D D1 D',
-    '@mobileL': { padding: 'C C' },
-    '@mobileS': { padding: 'C B' }
-  },
+  flex: '1',
+  padding: 'D D D1 D',
+  '@mobileL': { padding: 'C C' },
+  '@mobileS': { padding: 'C B' },
 
   Title: {
-    props: { text: 'Sans-Serif' }
+    text: 'Sans-Serif'
   },
   Paragraph: {
     tag: 'p',
-    props: {
-      theme: 'dialog',
-      fontSize: 'G2',
-      maxWidth: '100%',
-      boxSizing: 'border-box',
-      padding: 'A',
-      flow: 'column',
-      gap: '0',
-      round: 'V2',
-      lineHeight: '1.1em',
-      '@mobileL': {
-        fontSize: 'G',
-        padding: 'Z1 Z1'
-      },
-      '@mobileS': {
-        fontSize: 'F2',
-        padding: 'Z1 Z'
-      },
+    theme: 'dialog',
+    fontSize: 'G2',
+    maxWidth: '100%',
+    boxSizing: 'border-box',
+    padding: 'A',
+    flow: 'column',
+    gap: '0',
+    round: 'V2',
+    lineHeight: '1.1em',
+    '@mobileL': {
+      fontSize: 'G',
+      padding: 'Z1 Z1'
+    },
+    '@mobileS': {
+      fontSize: 'F2',
+      padding: 'Z1 Z'
+    },
 
-      childProps: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        maxWidth: '100%',
-        whiteSpace: 'nowrap',
-        minWidth: '0',
-        text: 'Today is a big day for our tribe. The year ends.',
-        ':first-child': { fontWeight: '900' },
-        ':nth-child(2)': { fontWeight: '700' },
-        ':nth-child(3)': { fontWeight: '500' },
-        ':nth-child(4)': { fontWeight: '400' },
-        ':last-child': { fontWeight: '100' }
-      }
+    childProps: {
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      minWidth: '0',
+      text: 'Today is a big day for our tribe. The year ends.',
+      ':first-child': { fontWeight: '900' },
+      ':nth-child(2)': { fontWeight: '700' },
+      ':nth-child(3)': { fontWeight: '500' },
+      ':nth-child(4)': { fontWeight: '400' },
+      ':last-child': { fontWeight: '100' }
     },
-    ...[
-      { },
-      {},
-      {},
-      {},
-      {}
-    ]
+    ...[{}, {}, {}, {}, {}]
   }
 }

package/blocks/icon.js

@@ -4,33 +4,27 @@ import { DefaultBlock } from './section'
 
 export const icon = {
   extends: DefaultBlock,
-  props: {
-    padding: 'E D E1 D',
-    '@mobileL': { padding: 'D C' },
-    '@mobileS': { padding: 'D B' }
-  },
-
+  padding: 'E D E1 D',
+  '@mobileL': { padding: 'D C' },
+  '@mobileS': { padding: 'D B' },
   Title: null,
   Paragraph: {
-    extends: 'Grid',
-    props: {
-      columns: 'repeat(7, 1fr)',
-      gap: 'C',
-      '@tabletS': { gap: 'B1' },
-      '@mobileL': { gap: 'A2' },
-      '@mobileM': { gap: 'A' },
-      '@mobileS': { gap: 'Z' }
-      // padding: 'E D E2 D'
-    },
+    display: 'grid',
+    columns: 'repeat(7, 1fr)',
+    gap: 'C',
+    '@tabletS': { gap: 'B1' },
+    '@mobileL': { gap: 'A2' },
+    '@mobileM': { gap: 'A' },
+    '@mobileS': { gap: 'Z' },
+    // padding: 'E D E2 D'
+
     childExtends: {
-      extends: 'Flex',
-      props: {
-        align: 'center',
-        aspectRatio: '1/1',
-        theme: 'dialog',
-        round: 'Z'
-        // padding: 'D B'
-      },
+      display: 'flex',
+      align: 'center',
+      aspectRatio: '1/1',
+      theme: 'dialog',
+      round: 'Z',
+      // padding: 'D B'
       Icon: {
         margin: 'auto',
         fontSize: 'D',
@@ -48,6 +42,5 @@ export const icon = {
         Icon: { name }
       }))
     }
-
   }
 }

package/blocks/section.js

@@ -3,18 +3,15 @@
 export const DefaultBlock = {
   tag: 'section',
   extends: 'Hgroup',
-
-  props: { gap: 'A' },
+  gap: 'A',
 
   Title: {
     tag: 'h5',
-    props: {
-      fontSize: 'A',
-      fontWeight: '500',
-      '@tabletS<': { alignItems: 'flex-end' },
-      letterSpacing: '.2em',
-      padding: '- Z1',
-      textTransform: 'uppercase'
-    }
+    fontSize: 'A',
+    fontWeight: '500',
+    '@tabletS<': { alignItems: 'flex-end' },
+    letterSpacing: '.2em',
+    padding: '- Z1',
+    textTransform: 'uppercase'
   }
 }

package/blocks/shadow.js

@@ -4,86 +4,55 @@ import { DefaultBlock } from './section'
 
 export const shadow = {
   extends: DefaultBlock,
-  props: {
-    padding: 'D2 D',
-    '@mobileL': { padding: 'E C' },
-    '@mobileS': { padding: 'E B' }
-  },
+  padding: 'D2 D',
+  '@mobileL': { padding: 'E C' },
+  '@mobileS': { padding: 'E B' },
 
   Title: null,
 
   Paragraph: {
-    extends: 'Grid',
-    props: {
-      columns: 'repeat(8, 1fr)',
-      gap: 'C2',
-      '@tabletM': { gap: 'B2' },
-      '@tabletS': { columns: 'repeat(4, 1fr)' },
-      '@mobileL': { gap: 'B1' },
-      '@mobileS': { gap: 'B' },
-      '@mobileXS': { gap: 'A1' },
-      childProps: {
-        theme: 'dialog',
-        aspectRatio: '1 / 1',
-        round: 'Z'
-      }
+    display: 'grid',
+    columns: 'repeat(8, 1fr)',
+    gap: 'C2',
+    '@tabletM': { gap: 'B2' },
+    '@tabletS': { columns: 'repeat(4, 1fr)' },
+    '@mobileL': { gap: 'B1' },
+    '@mobileS': { gap: 'B' },
+    '@mobileXS': { gap: 'A1' },
+    childProps: {
+      theme: 'dialog',
+      aspectRatio: '1 / 1',
+      round: 'Z'
     },
     ...[
       {
-        props: {
-          style: {
-            boxShadow: 'rgb(38, 57, 77) 0px 20px 30px -10px'
-          }
-        }
+        boxShadow: 'rgb(38, 57, 77) 0px 20px 30px -10px'
       },
       {
-        props: {
-          style: {
-            boxShadow: 'rgba(38, 57, 77, 0.56) 0px 22px 70px 4px'
-          }
-        }
+        boxShadow: 'rgba(38, 57, 77, 0.56) 0px 22px 70px 4px'
       },
       {
-        props: {
-          style: {
-            boxShadow: 'rgba(38, 57, 77, 0.19) 0px 10px 20px, rgba(38, 57, 77, 0.23) 0px 6px 6px'
-          }
-        }
+        boxShadow:
+          'rgba(38, 57, 77, 0.19) 0px 10px 20px, rgba(38, 57, 77, 0.23) 0px 6px 6px'
       },
       {
-        props: {
-          style: {
-            boxShadow: 'rgba(38, 57, 77, 0.12) 0px 2px 4px 0px, rgba(38, 57, 77, 0.32) 0px 2px 16px 0px'
-          }
-        }
+        boxShadow:
+          'rgba(38, 57, 77, 0.12) 0px 2px 4px 0px, rgba(38, 57, 77, 0.32) 0px 2px 16px 0px'
       },
       {
-        props: {
-          style: {
-            boxShadow: 'rgba(38, 57, 77, 0.3) 0px 19px 38px, rgba(38, 57, 77, 0.22) 0px 15px 12px'
-          }
-        }
+        boxShadow:
+          'rgba(38, 57, 77, 0.3) 0px 19px 38px, rgba(38, 57, 77, 0.22) 0px 15px 12px'
       },
       {
-        props: {
-          style: {
-            boxShadow: 'rgba(38, 57, 77, 0.35) 0px 5px 15px'
-          }
-        }
+        boxShadow: 'rgba(38, 57, 77, 0.35) 0px 5px 15px'
       },
       {
-        props: {
-          style: {
-            boxShadow: 'rgba(38, 57, 77, 0.25) 0px 13px 27px -5px, rgba(38, 57, 77, 0.35) 0px 8px 16px -8px'
-          }
-        }
+        boxShadow:
+          'rgba(38, 57, 77, 0.25) 0px 13px 27px -5px, rgba(38, 57, 77, 0.35) 0px 8px 16px -8px'
       },
       {
-        props: {
-          style: {
-            boxShadow: 'rgba(38, 57, 77, 0.25) 0px 30px 60px -12px, rgba(38, 57, 77, 0.25) 0px 18px 36px -18px'
-          }
-        }
+        boxShadow:
+          'rgba(38, 57, 77, 0.25) 0px 30px 60px -12px, rgba(38, 57, 77, 0.25) 0px 18px 36px -18px'
       }
     ]
   }

package/blocks/shape.js

@@ -6,29 +6,26 @@ export const shape = {
   extends: shadow,
   Title: null,
   Paragraph: {
-    props: {
-      // gap: 'E',
-      columns: 'repeat(8, 1fr)',
-      childProps: {
-        border: 'solid, white .05',
-        borderWidth: '2px',
-        style: {
-          boxShadow: 'rgba(38, 57, 77, 0.12) 0px 2px 4px 0px, rgba(38, 57, 77, 0.32) 0px 2px 16px 0px'
-        },
-        ':first-child': { round: 'A 0 0 0' },
-        ':nth-child(2)': { round: 'E A 0 0' },
-        ':nth-child(3)': {
-          round: '100%',
-          aspectRatio: '1/1'
-        },
-        ':nth-child(4)': { round: '0 D 0 A' },
-        ':nth-child(5)': { round: '0 0 G 0' },
-        ':nth-child(7)': { round: '0 0 E1 E1' },
-        ':nth-child(8)': { round: 'G 0 0 0' }
-      }
+    // gap: 'E',
+    columns: 'repeat(8, 1fr)',
+    childProps: {
+      border: 'solid, white .05',
+      borderWidth: '2px',
+      style: {
+        boxShadow:
+          'rgba(38, 57, 77, 0.12) 0px 2px 4px 0px, rgba(38, 57, 77, 0.32) 0px 2px 16px 0px'
+      },
+      ':first-child': { round: 'A 0 0 0' },
+      ':nth-child(2)': { round: 'E A 0 0' },
+      ':nth-child(3)': {
+        round: '100%',
+        aspectRatio: '1/1'
+      },
+      ':nth-child(4)': { round: '0 D 0 A' },
+      ':nth-child(5)': { round: '0 0 G 0' },
+      ':nth-child(7)': { round: '0 0 E1 E1' },
+      ':nth-child(8)': { round: 'G 0 0 0' }
     },
-    ...[
-      {}, {}, {}, {}, {}, {}, {}, {}
-    ]
+    ...[{}, {}, {}, {}, {}, {}, {}, {}]
   }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/preview",
-  "version": "3.1.1",
+  "version": "3.2.3",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "39fb7a8c07355468ccce79e2f787ca3fa0715692",
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "source": "src/index.js"
 }

package/pages/Component.js

@@ -1,26 +1,24 @@
 'use strict'
 
 export const Component = {
-  extends: 'Flex',
-  props: {
-    align: 'center center',
-    minHeight: '100vh'
-  },
-
+  display: 'flex',
+  align: 'center center',
+  minHeight: '100vh',
   smblsHeader: {
     if: () => {
       const urlParams = new URLSearchParams(window.location.search)
       return !urlParams.get('hideUi') || !urlParams.get('fullsize')
     },
-    extends: 'Flex',
-    props: {
-      align: 'center space-between',
-      position: 'absolute',
-      inset: '0 0 auto 0',
-      background: 'black 0.15',
-      padding: 'Z A'
+    display: 'flex',
+    align: 'center space-between',
+    position: 'absolute',
+    inset: '0 0 auto 0',
+    background: 'black 0.15',
+    padding: 'Z A',
+    'Link+SquareButton': {
+      Icon: { name: 'symbols', fontSize: 'B' },
+      href: '/'
     },
-    'Link+SquareButton': { Icon: { name: 'symbols', fontSize: 'B' }, href: '/' },
     OpenInSymbols: () => {
       const urlParams = new URLSearchParams(window.location.search)
       const key = urlParams.get('key') || 'Logo'
@@ -49,13 +47,11 @@ export const Component = {
     const schema = ctx.schema[factory][key]
     return {
       key,
-      extends: 'Flex',
+      display: 'flex',
       state: schema.state,
-      props: () => ({
-        class: 'component',
-        align: 'center center',
-        boxSize: fullsize ? '100dvh 100dvw' : `${height} ${width}`
-      }),
+      class: 'component',
+      align: 'center center',
+      boxSize: fullsize ? '100dvh 100dvw' : `${height} ${width}`,
       [key]: fullsize
         ? {
             ...schema.props?.demoComponent,

package/pages/Components.js

@@ -1,13 +1,13 @@
 'use strict'
 
 export const ComponentsPage = {
-  extends: 'Flex',
+  display: 'flex',
   state: {
     globalTheme: 'dark',
     value: ''
   },
 
-  FleX: {
+  Flex: {
     flow: 'column',
     padding: 'F E E D',
     gap: 'E+C',
@@ -219,11 +219,9 @@ export const ComponentsPage = {
       border: '1px solid #3F3F43',
       background: 'transparent',
       Input: {
-        props: {
-          fontSize: 'Z1',
-          placeholder: 'Find component ...',
-          ':focus ~ svg': { opacity: '0' }
-        },
+        fontSize: 'Z1',
+        placeholder: 'Find component ...',
+        ':focus ~ svg': { opacity: '0' },
         onKeyup: (event, el, s) => {
           const value = el.node.value.toLowerCase()
           s.update({ value })

package/pages/Styleguide.js

@@ -1,32 +1,34 @@
 'use strict'
 
-import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from '../articles'
+import {
+  Colors,
+  Typography,
+  Shadows,
+  Icons,
+  Spacing,
+  Shapes
+} from '../articles'
 
 export const Styleguide = {
-  extends: 'Flex',
   tag: 'main',
-
-  props: {
-    theme: 'document',
-    position: 'relative',
-    flow: 'column',
-    overflow: 'hidden auto',
-    height: '100%',
-    width: '100%',
-    '@tabletM': {
-      fontSize: 'Z1'
-    }
+  display: 'flex',
+  theme: 'document',
+  position: 'relative',
+  flow: 'column',
+  overflow: 'hidden auto',
+  height: '100%',
+  width: '100%',
+  '@tabletM': {
+    fontSize: 'Z1'
   },
 
   childExtends: {
-    props: {
-      flow: 'column',
-      '> header': {
-        border: 'solid, white .15',
-        borderWidth: '.5px 0 .5px 0'
-      },
-      theme: null
-    }
+    flow: 'column',
+    '> header': {
+      border: 'solid, white .15',
+      borderWidth: '.5px 0 .5px 0'
+    },
+    theme: null
   },
 
   Colors,