├── .npmignore
├── .gitignore
├── .travis.yml
├── demo
    ├── README.md
    ├── demo-screenshot.png
    ├── data.js
    ├── package.json
    ├── Button.js
    ├── Root.js
    └── index.html
├── src
    ├── index.js
    ├── get-permutations.js
    └── get-options.js
├── package.json
├── README.md
└── test
    └── index.js


/.npmignore:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | dist
3 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 5.6
4 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
1 | # Demo
2 | 
3 | ```sh
4 | npm i && npm start
5 | ```
6 | 
7 | 


--------------------------------------------------------------------------------
/demo/demo-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxnblk/react-component-permutations/HEAD/demo/demo-screenshot.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { parse } from 'react-docgen'
 3 | import getPermutations from './get-permutations'
 4 | 
 5 | export default function (src, opts) {
 6 |   opts = opts || {}
 7 | 
 8 |   try {
 9 |     const info = parse(src)
10 |     const result = getPermutations(info.props, opts)
11 |     return result
12 |   } catch (e) {
13 |     console.log('Could not read component')
14 |     return false
15 |   }
16 | }
17 | 
18 | 


--------------------------------------------------------------------------------
/demo/data.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import fs from 'fs'
 3 | import path from 'path'
 4 | import colors from 'colors.css'
 5 | import permutations from '../src'
 6 | 
 7 | const ButtonSrc = fs.readFileSync('Button.js', 'utf8')
 8 | 
 9 | const colorKeys = Object.keys(colors)
10 |   .filter(key => key !== 'white')
11 | 
12 | const data = {
13 |   ButtonSrc,
14 |   permutations: permutations(ButtonSrc),
15 |   permutationsColors: permutations(ButtonSrc, {
16 |     color: colorKeys
17 |   })
18 | }
19 | 
20 | export default data
21 | 
22 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-component-permutations-demo",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "test": "static-react Root.js",
 6 |     "start": "static-react Root.js > index.html"
 7 |   },
 8 |   "devDependencies": {
 9 |     "babel-preset-es2015": "^6.5.0",
10 |     "babel-preset-react": "^6.5.0",
11 |     "babel-preset-stage-0": "^6.5.0",
12 |     "colors.css": "^3.0.0",
13 |     "react": "^0.14.7",
14 |     "static-react": "^3.1.0"
15 |   },
16 |   "babel": {
17 |     "presets": [
18 |       "es2015",
19 |       "stage-0",
20 |       "react"
21 |     ]
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/get-permutations.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import getOptions from './get-options'
 3 | 
 4 | function getPermutations (props, opts) {
 5 |   const result = []
 6 |   const obj = getOptions(props, opts)
 7 |   const keys = Object.keys(obj)
 8 |   const max = keys.length - 1
 9 | 
10 |   function combine (a, i) {
11 |     const key = keys[i]
12 |     obj[key].forEach((prop, j) => {
13 |       const b = Object.assign({}, a)
14 |       b[key] = prop
15 | 
16 |       if (i === max) {
17 |         result.push(b)
18 |       } else {
19 |         combine(b, i + 1)
20 |       }
21 |     })
22 |   }
23 |   combine({}, 0)
24 | 
25 |   return result
26 | }
27 | 
28 | export default getPermutations
29 | 
30 | 


--------------------------------------------------------------------------------
/demo/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import colors from 'colors.css'
 3 | 
 4 | const colorKeys = Object.keys(colors)
 5 | 
 6 | const Button = ({ big, color, pill, outline, ...props }) => (
 7 |   <button
 8 |     style={{
 9 |       fontFamily: 'inherit',
10 |       fontSize: 'inherit',
11 |       display: 'inline-block',
12 |       padding: big ? 16 : 12,
13 |       border: 0,
14 |       borderRadius: pill ? 9999 : 2,
15 |       color: outline ? colors[color] : 'white',
16 |       backgroundColor: outline ? 'transparent' : colors[color],
17 |       boxShadow: outline ? 'inset 0 0 0 2px' : null
18 |     }}
19 |     {...props} />
20 | )
21 | 
22 | Button.propTypes = {
23 |   big: React.PropTypes.bool,
24 |   color: React.PropTypes.oneOf(colorKeys),
25 |   pill: React.PropTypes.bool,
26 |   outline: React.PropTypes.bool
27 | }
28 | 
29 | Button.defaultProps = {
30 |   color: 'blue'
31 | }
32 | 
33 | export default Button
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-component-permutations",
 3 |   "version": "1.0.0-beta1",
 4 |   "description": "Uses propTypes to create an array of React component props to display various permutations",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "prepublish": "mkdir -p dist && babel src --out-dir dist",
 8 |     "test": "standard && ava test/index.js"
 9 |   },
10 |   "keywords": [
11 |     "react",
12 |     "style-guide",
13 |     "documentation"
14 |   ],
15 |   "author": "Brent Jackson",
16 |   "license": "MIT",
17 |   "babel": {
18 |     "presets": [
19 |       "es2015",
20 |       "stage-0",
21 |       "react"
22 |     ]
23 |   },
24 |   "devDependencies": {
25 |     "ava": "^0.11.0",
26 |     "babel": "^6.5.2",
27 |     "babel-cli": "^6.5.1",
28 |     "babel-preset-es2015": "^6.5.0",
29 |     "babel-preset-react": "^6.5.0",
30 |     "babel-preset-stage-0": "^6.5.0",
31 |     "babel-register": "^6.5.2",
32 |     "react": "^0.14.7",
33 |     "react-dom": "^0.14.7",
34 |     "react-geomicons": "^2.0.4",
35 |     "standard": "^5.4.1"
36 |   },
37 |   "dependencies": {
38 |     "react-docgen": "^2.7.0"
39 |   },
40 |   "ava": {
41 |     "require": [
42 |       "babel-register"
43 |     ]
44 |   },
45 |   "standard": {
46 |     "ignore": [
47 |       "demo"
48 |     ]
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/get-options.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function getOptions (props, opts) {
 3 |   opts = opts || {}
 4 |   const result = {}
 5 | 
 6 |   Object.keys(props).forEach(key => {
 7 |     const variations = []
 8 |     const t = props[key].type
 9 |     if (!t) {
10 |       return false
11 |     } else if (opts[key] && Array.isArray(opts[key])) {
12 |       opts[key].forEach(v => variations.push(v))
13 |     } else if (t.name === 'bool') {
14 |       variations.push(true)
15 |       variations.push(false)
16 |     } else if (t.name === 'enum') {
17 |       if (!t.computed && Array.isArray(t.value)) {
18 |         t.value.forEach(val => {
19 |           variations.push(val.value.replace(/^\'|\'$/g, ''))
20 |         })
21 |       } else {
22 |         return false
23 |       }
24 |     } else if (t.name === 'string' && opts.strings && Array.isArray(opts.strings)) {
25 |       opts.strings.forEach(str => variations.push(str))
26 |     } else if (t.name === 'number' && opts.numbers && Array.isArray(opts.numbers)) {
27 |       opts.numbers.forEach(n => variations.push(n))
28 |     } else if (t.name === 'array') {
29 |       if (opts.arrays && Array.isArray(opts.arrays)) {
30 |         opts.arrays.forEach(a => {
31 |           variations.push(a)
32 |         })
33 |       }
34 |     } else if (t.name === 'object' && opts.objects && Array.isArray(opts.objects)) {
35 |       opts.objects.forEach(o => variations.push(o))
36 |     } else {
37 |       // console.log('type not handled', t.name, t)
38 |     }
39 |     if (variations.length) {
40 |       result[key] = variations
41 |     }
42 |   })
43 | 
44 |   return result
45 | }
46 | 
47 | export default getOptions
48 | 
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # react-component-permutations
 3 | # WIP
 4 | 
 5 | Uses propTypes to create an array of React component props to display various permutations.
 6 | 
 7 | [![Build Status](https://travis-ci.org/jxnblk/react-component-permutations.svg)](https://travis-ci.org/jxnblk/react-component-permutations)
 8 | [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
 9 | 
10 | ```sh
11 | npm i react-component-permutations
12 | ```
13 | 
14 | ## Usage
15 | 
16 | ```js
17 | import fs from 'fs'
18 | import getPermutations from 'react-component-permutations'
19 | 
20 | const src = fs.readFileSync('./components/Button.js', 'utf8')
21 | const options = {}
22 | const permutations = getPermutations(src, options)
23 | ```
24 | 
25 | ## Options
26 | 
27 | - `strings` - Array - strings to render for `PropType.string`
28 | - `numbers` - Array - numbers to render for `PropType.number`
29 | - `arrays` - Array - arrays to render for `PropType.array`
30 | - `objects` - Array - objects to render for `PropType.object`
31 | - `nodes` - Array - nodes to render for `PropTypes.node`
32 | - `[key]` - Array - any prop name to add to the returned objects array
33 | 
34 | ## Demo
35 | 
36 | Given a button component with these `propTypes`:
37 | 
38 | ```js
39 | Button.propTypes = {
40 |   big: React.PropTypes.bool,
41 |   color: React.PropTypes.oneOf(colorKeys),
42 |   pill: React.PropTypes.bool,
43 |   outline: React.PropTypes.bool
44 | }
45 | ```
46 | 
47 | The rendered result would look something like this:
48 | 
49 | ![Demo Screenshot](/demo/demo-screenshot.png)
50 | 
51 | <http://jxnblk.com/react-component-permutations/demo>
52 | 
53 | See the [`/demo`](demo) folder.
54 | 
55 | MIT License
56 | 
57 | 


--------------------------------------------------------------------------------
/demo/Root.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import data from './data'
 4 | import Button from './Button'
 5 | 
 6 | const css = `
 7 | .blue { color: #07b }
 8 | .b4 { border-width: 4px }
 9 | `.replace(/\n/g, '')
10 | 
11 | class Root extends React.Component {
12 | 
13 |   render () {
14 |     const { ButtonSrc, permutations, permutationsColors } = data
15 | 
16 |     return (
17 |       <div className='p3'>
18 |         <meta charSet='utf-8' />
19 |         <link href='https://npmcdn.com/basscss-basic/index.css' rel='stylesheet' />
20 |         <link href='https://npmcdn.com/basscss@8.0.0/css/basscss.min.css' rel='stylesheet' />
21 |         <style dangerouslySetInnerHTML={{ __html: css }} />
22 | 
23 |         <header>
24 |           <h1>react-component-permutations demo</h1>
25 |           <p>Reads a component’s <code>propTypes</code> to return an array of permutations that can be used to show component variations.</p>
26 |         </header>
27 |         <hr />
28 |         <p>Given a Button component with <code>propTypes</code> defined, the module returns {permutations.length} permutations for showing variations.</p>
29 |         <div className='sm-flex mxn2'>
30 |           <div className='sm-col-6 px2'>
31 |             <h3>Button.js</h3>
32 |             <pre children={ButtonSrc}
33 |               className='py0 pl2 border-left b4 blue' />
34 |           </div>
35 |           <div className='sm-col-6 px2'>
36 |             <h3>Default Permutations</h3>
37 |             <pre children={'permutations(buttonSourceString)'}
38 |               className='py0 pl2 border-left b4 blue' />
39 |             <div className='flex flex-wrap items-center'>
40 |               {permutations.map((p, i) => (
41 |                 <div key={i} className='m1 flex-auto'
42 |                   style={{ flexBasis: 128 }}>
43 |                   <Button children='Hello' {...p} />
44 |                 </div>
45 |               ))}
46 |             </div>
47 |           </div>
48 |         </div>
49 |         <hr />
50 |         <h3>With Options</h3>
51 |         <p>By configuring options for the <code>colors</code> prop, there are now {permutationsColors.length} permutations.</p>
52 |         <pre children={'permutations(buttonSourceString, { colors: colorKeys })'}
53 |           className='py0 pl2 border-left b4 blue' />
54 |         <div className='flex flex-wrap items-center'>
55 |           {permutationsColors.map((p, i) => (
56 |             <div key={i} className='m1 flex-auto'
57 |               style={{ flexBasis: 128 }}>
58 |               <Button children='Hello' {...p} />
59 |             </div>
60 |           ))}
61 |         </div>
62 |         <hr />
63 |         <footer className='py3'>
64 |           <a href='//github.com/jxnblk/react-component-permutations' className='mr2'>GitHub</a>
65 |           <a href='//npmjs.com/package/react-component-permutations'>npm</a>
66 |         </footer>
67 |       </div>
68 |     )
69 |   }
70 | 
71 | }
72 | 
73 | export default Root
74 | 
75 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import ava from 'ava'
  3 | import permutations from '../src/index.js'
  4 | 
  5 | const components = {
  6 |   Button: `
  7 |     import React from 'react'
  8 | 
  9 |     const Button = ({ big, color, outline, title, padding, config, children, ...props }) => {
 10 | 
 11 |       const style = {
 12 |         display: 'inline-block',
 13 |         padding: padding,
 14 |         border: 0,
 15 |         borderRadius: 2,
 16 |         color: 'white',
 17 |         backgroundColor: color,
 18 |       }
 19 | 
 20 |       return (
 21 |         <button {...props} style={style}>
 22 |           {children}
 23 |         </button>
 24 |       )
 25 |     }
 26 | 
 27 |     Root.propTypes = {
 28 |       big: React.PropTypes.bool,
 29 |       color: React.PropTypes.oneOf([ 'blue', 'green', 'red' ]),
 30 |       outline: React.PropTypes.bool,
 31 |       title: React.PropTypes.string,
 32 |       padding: React.PropTypes.number,
 33 |       items: React.PropTypes.array,
 34 |       nums: React.PropTypes.arrayOf(React.PropTypes.number),
 35 |       config: React.PropTypes.object
 36 |     }
 37 | 
 38 |     Root.defaultProps = {
 39 |       color: 'blue',
 40 |       icon: 'check',
 41 |       padding: 16
 42 |     }
 43 | 
 44 |     export default Button
 45 |   `,
 46 |   Root: `
 47 |     import React from 'react'
 48 | 
 49 |     class Root extends React.Component {
 50 |       render () {
 51 |         const { title } = this.props
 52 |         return <html>{title}</html>
 53 |       }
 54 |     }
 55 | 
 56 |     Root.propTypes = {
 57 |       title: React.PropTypes.string,
 58 |       responsive: React.PropTypes.bool,
 59 |       fontFamily: React.PropTypes.oneOf(['Georgia', 'Helvetica', 'Verdana'])
 60 |     }
 61 | 
 62 |     export default Root
 63 |   `,
 64 |   Input: `
 65 |     import React from 'react'
 66 | 
 67 |     var sizes = [ 8, 16, 24 ]
 68 | 
 69 |     var Input = React.createClass({
 70 |       propTypes: {
 71 |         size: React.PropTypes.oneOf(sizes)
 72 |       },
 73 |       render: function () {
 74 |         var style = {
 75 |           padding: size
 76 |         }
 77 |         return (
 78 |           <input {...this.props} style={style} />
 79 |         )
 80 |       }
 81 |     })
 82 |     module.exports = Input
 83 |   `
 84 | }
 85 | 
 86 | ava('is a function', t => {
 87 |   t.same(typeof permutations, 'function')
 88 | })
 89 | 
 90 | ava('returns an array', t => {
 91 |   const p = permutations(components.Button)
 92 |   t.same(Array.isArray(p), true)
 93 | })
 94 | 
 95 | ava('returns false if no component is found', t => {
 96 |   const p = permutations('Not a component')
 97 |   t.same(p, false)
 98 | })
 99 | 
100 | ava('returns 12 permutations for Button', t => {
101 |   const p = permutations(components.Button)
102 |   t.same(p.length, 12)
103 | })
104 | 
105 | ava('returns 6 permutations for Root', t => {
106 |   const p = permutations(components.Root)
107 |   t.same(p.length, 6)
108 | })
109 | 
110 | ava('allows configurable keys', t => {
111 |   const p = permutations(components.Button, {
112 |     color: ['green', 'blue']
113 |   })
114 |   t.same(p.length, 8)
115 | })
116 | 
117 | ava('returns correct values for configurable keys', t => {
118 |   const p = permutations(components.Button, {
119 |     color: ['green', 'blue']
120 |   })
121 |   t.same(p[0].color, 'green')
122 | })
123 | 
124 | ava('should handle computed enum', t => {
125 |   const p = permutations(components.Input)
126 |   t.same(p[0], undefined)
127 | })
128 | 
129 | ava('allows configurable strings', t => {
130 |   const p = permutations(components.Button, { strings: [ 'Hello', 'Button' ] })
131 |   t.same(p.length, 24)
132 | })
133 | 
134 | ava('allows configurable numbers', t => {
135 |   const p = permutations(components.Button, { numbers: [ 2, 4, 8 ] })
136 |   t.same(p.length, 36)
137 | })
138 | 
139 | ava('allows configurable arrays', t => {
140 |   const p = permutations(components.Button, {
141 |     arrays: [
142 |       [1, 2, 3],
143 |       [4, 5, 6]
144 |     ]
145 |   })
146 |   t.same(p.length, 24)
147 | })
148 | 
149 | ava('allows configurable objects', t => {
150 |   const p = permutations(components.Button, {
151 |     objects: [
152 |       { name: 'Hello' },
153 |       { name: 'Test' }
154 |     ]
155 |   })
156 |   t.same(p.length, 24)
157 | })
158 | 
159 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><div class="p3"><meta charset="utf-8"/><link href="https://npmcdn.com/basscss-basic/index.css" rel="stylesheet"/><link href="https://npmcdn.com/basscss@8.0.0/css/basscss.min.css" rel="stylesheet"/><style>.blue { color: #07b }.b4 { border-width: 4px }</style><header><h1>react-component-permutations demo</h1><p>Reads a component’s <code>propTypes</code> to return an array of permutations that can be used to show component variations.</p></header><hr/><p>Given a Button component with <code>propTypes</code> defined, the module returns 8 permutations for showing variations.</p><div class="sm-flex mxn2"><div class="sm-col-6 px2"><h3>Button.js</h3><pre class="py0 pl2 border-left b4 blue">import React from &#x27;react&#x27;
 2 | import colors from &#x27;colors.css&#x27;
 3 | 
 4 | const colorKeys = Object.keys(colors)
 5 | 
 6 | const Button = ({ big, color, pill, outline, ...props }) =&gt; (
 7 |   &lt;button
 8 |     style={{
 9 |       fontFamily: &#x27;inherit&#x27;,
10 |       fontSize: &#x27;inherit&#x27;,
11 |       display: &#x27;inline-block&#x27;,
12 |       padding: big ? 16 : 12,
13 |       border: 0,
14 |       borderRadius: pill ? 9999 : 2,
15 |       color: outline ? colors[color] : &#x27;white&#x27;,
16 |       backgroundColor: outline ? &#x27;transparent&#x27; : colors[color],
17 |       boxShadow: outline ? &#x27;inset 0 0 0 2px&#x27; : null
18 |     }}
19 |     {...props} /&gt;
20 | )
21 | 
22 | Button.propTypes = {
23 |   big: React.PropTypes.bool,
24 |   color: React.PropTypes.oneOf(colorKeys),
25 |   pill: React.PropTypes.bool,
26 |   outline: React.PropTypes.bool
27 | }
28 | 
29 | Button.defaultProps = {
30 |   color: &#x27;blue&#x27;
31 | }
32 | 
33 | export default Button
34 | </pre></div><div class="sm-col-6 px2"><h3>Default Permutations</h3><pre class="py0 pl2 border-left b4 blue">permutations(buttonSourceString)</pre><div class="flex flex-wrap items-center"><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#0074d9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#0074d9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#0074d9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#0074d9;">Hello</button></div></div></div></div><hr/><h3>With Options</h3><p>By configuring options for the <code>colors</code> prop, there are now 128 permutations.</p><pre class="py0 pl2 border-left b4 blue">permutations(buttonSourceString, { colors: colorKeys })</pre><div class="flex flex-wrap items-center"><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#7fdbff;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#7fdbff;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#7fdbff;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#7fdbff;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#0074d9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#0074d9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#01ff70;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#01ff70;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#01ff70;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#01ff70;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#001f3f;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#001f3f;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#001f3f;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#001f3f;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#39cccc;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#39cccc;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#39cccc;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#39cccc;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#3d9970;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#3d9970;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#3d9970;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#3d9970;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#2ecc40;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#2ecc40;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#2ecc40;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#2ecc40;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#ff4136;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#ff4136;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#ff4136;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#ff4136;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#85144b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#85144b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#85144b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#85144b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#ff851b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#ff851b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#ff851b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#ff851b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#b10dc9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#b10dc9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#b10dc9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#b10dc9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#ffdc00;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#ffdc00;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#ffdc00;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#ffdc00;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#f012be;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#f012be;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#f012be;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#f012be;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#aaaaaa;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#aaaaaa;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#aaaaaa;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#aaaaaa;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#111111;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#111111;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#111111;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#111111;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:#dddddd;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:9999px;color:white;background-color:#dddddd;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:#dddddd;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:16px;border:0;border-radius:2px;color:white;background-color:#dddddd;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#7fdbff;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#7fdbff;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#7fdbff;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#7fdbff;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#0074d9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#0074d9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#0074d9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#01ff70;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#01ff70;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#01ff70;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#01ff70;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#001f3f;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#001f3f;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#001f3f;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#001f3f;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#39cccc;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#39cccc;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#39cccc;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#39cccc;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#3d9970;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#3d9970;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#3d9970;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#3d9970;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#2ecc40;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#2ecc40;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#2ecc40;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#2ecc40;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#ff4136;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#ff4136;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#ff4136;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#ff4136;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#85144b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#85144b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#85144b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#85144b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#ff851b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#ff851b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#ff851b;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#ff851b;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#b10dc9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#b10dc9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#b10dc9;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#b10dc9;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#ffdc00;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#ffdc00;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#ffdc00;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#ffdc00;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#f012be;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#f012be;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#f012be;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#f012be;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#aaaaaa;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#aaaaaa;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#aaaaaa;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#aaaaaa;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#111111;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#111111;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#111111;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#111111;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:#dddddd;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:9999px;color:white;background-color:#dddddd;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:#dddddd;background-color:transparent;box-shadow:inset 0 0 0 2px;">Hello</button></div><div class="m1 flex-auto" style="flex-basis:128px;"><button style="font-family:inherit;font-size:inherit;display:inline-block;padding:12px;border:0;border-radius:2px;color:white;background-color:#dddddd;">Hello</button></div></div><hr/><footer class="py3"><a href="//github.com/jxnblk/react-component-permutations" class="mr2">GitHub</a><a href="//npmjs.com/package/react-component-permutations">npm</a></footer></div>


--------------------------------------------------------------------------------