module.exports = {
  title: '`glamorousComponentFactory`',
  subtitle: '',
  description: ``.replace(/~/g, '`'),
  filename: __filename,
}

@@ -84,16 +84,2985 @@
 ption: %60
+%0A    Whether you create one yourself or use one of the built-in ones mentioned above, each ~glamorousComponentFactory~ allows you to invoke it with styles and it returns you a new component which will have those styles applied when it's rendered. This is accomplished by generating a ~className~ for the styles you give and forwarding that ~className~ onto the rendered element. So if you're wrapping a component you intend to style, you'll need to make sure you accept the ~className~ as a prop and apply it to where you want the styles applied in your custom component (normally the root element).%0A%0A    ~~~js%0A    const UnstyledComp = (%7B className, children %7D) =%3E %3Cdiv className=%7B~%5C$%7BclassName%7D other-class~%7D%3E%7Bchildren%7D%3C/div%3E%0A    const MyStyledComp = glamorous(UnstyledComp)(%7B margin: 1 %7D)%0A%0A    %3CMyStyledComp%3Econtent%3C/MyStyledComp%3E%0A    // rendered output: %3Cdiv class=%22%3Cglamor-generated-class%3E other-class%22%3Econtent%3C/div%3E%0A    // styles applied: %7Bmargin: 1%7D%0A    ~~~%0A    ##### ...styles%0A%0A    The ~glamorousComponentFactory~ accepts any number of style object arguments. These can be style objects or functions which are invoked with ~props~ on every render and return style objects. To learn more about what these style objects can look like, please take a look at the %5B~glamor~%5D(https://github.com/threepointone/glamor) documentation.%0A%0A    ~~~js%0A    const MyStyledDiv = glamorous.div(%0A      %7B%0A        margin: 1,%0A      %7D,%0A      (props) =%3E (%7B%0A        padding: props.noPadding ? 0 : 4,%0A      %7D)%0A    )%0A%0A    %3CMyStyledDiv /%3E // styles applied: %7Bmargin: 1, padding: 4%7D%0A    %3CMyStyledDiv noPadding /%3E // styles applied: %7Bmargin: 1, padding: 0%7D%0A    ~~~%0A%0A    ~~~callout %7Btitle: 'Tip', type: 'info'%7D%0A    Tip: glamorous simply takes these style objects and forwards them to ~glamor~.%0A    ~glamor~ will then merge those together in a way you would expect. One neat%0A    thing you can do is specify an array of style objects and ~glamor~ will treat%0A    that exactly the same. It's really expressive! See the %5Bexamples%5D%5B/examples/%5D%0A    for an example of how this works.%0A    ~~~%0A%0A    You can also specify other classes you'd like applied to the component as well. If these classes are generated by glamor, then their styles will be merged with the glamor style's, otherwise the class name will simply be forwarded. For example:%0A%0A    ~~~javascript%0A    const className1 = glamor.css(%7BpaddingTop: 1, paddingRight: 1%7D).toString()%0A    const styles2 = %7BpaddingRight: 2, paddingBottom: 2%7D%0A    const className3 = glamor.css(%7BpaddingBottom: 3, paddingLeft: 3%7D).toString()%0A    const styles4 = %7BpaddingLeft: 4%7D%0A    const styles5 = props =%3E (props.active ? 'active' : 'not-active')%0A    const MyStyledDiv = glamorous.div(%0A      className1,%0A      styles2,%0A      className3,%0A      styles4,%0A      styles5,%0A      'extra-thing',%0A    )%0A    %3CMyStyledDiv /%3E // styles applied: %7Bpadding-top: 1, padding-right: 2, padding-bottom: 3, padding-left: 4%7D, 'not-active' and anything coming from ~extra-thing~.%0A  ~~~%0A  
 %60.replac

add glamorous component factory info to docs (#90)