function glamorousComponentFactory(...styles) {
      /**
       * This is a component which will render the comp (closure)
       * with the glamorous styles (closure). Forwards any valid
       * props to the underlying component.
       */
      const GlamorousComponent = withTheme(
        function GlamorousInnerComponent(props, context) {
          props = getPropsToApply(
            GlamorousComponent.propsToApply,
            {},
            props,
            context,
          )
          const updateClassName = shouldUpdate(props, context, this.previous)

          if (shouldClassNameUpdate) {
            this.previous = {props, context}
          }

          const {toForward, cssOverrides, cssProp} = splitProps(
            props,
            GlamorousComponent,
          )

          // create className to apply
          this.className = updateClassName
            ? getGlamorClassName({
                styles: GlamorousComponent.styles,
                props,
                cssOverrides,
                cssProp,
                context,
                displayName: GlamorousComponent.displayName,
              })
            : this.className

          return React.createElement(GlamorousComponent.comp, {
            // if innerRef is forwarded we don't want to apply it here
            ref: 'innerRef' in toForward ? undefined : props.innerRef,
            ...toForward,
            className: this.className,
          })
        },
        {noWarn: true, createElement: false},
      )

      GlamorousComponent.propTypes = {
        // className accepts an object due to glamor's css function
        // returning an object with a toString method that gives the className
        className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
        cssOverrides: PropTypes.object,
        innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
        glam: PropTypes.object,
      }

      function withComponent(newComp, options = {}) {
        const {
          forwardProps: fwp,
          filterProps: flp,
          ...componentProperties
        } = GlamorousComponent
        return glamorous(
          {
            ...componentProperties,
            comp: newComp,
            rootEl: getRootEl(newComp),
          },
          {
            // allows the forwardProps and filterProps to be overridden
            forwardProps: fwp,
            filterProps: flp,
            ...options,
          },
        )()
      }

      function withProps(...propsToApply) {
        return glamorous(GlamorousComponent, {withProps: propsToApply})()
      }

      function shouldUpdate(props, context, previous) {
        // exiting early so components which do not use this
        // optimization are not penalized by hanging onto
        // references to previous props and context
        if (!shouldClassNameUpdate) {
          return true
        }
        let update = true
        if (previous) {
          if (
            !shouldClassNameUpdate(
              previous.props,
              props,
              previous.context,
              context,
            )
          ) {
            update = false
          }
        }

        return update
      }

      Object.assign(
        GlamorousComponent,
        getGlamorousComponentMetadata({
          comp,
          styles,
          rootEl,
          filterProps,
          forwardProps,
          displayName,
          propsToApply: basePropsToApply,
        }),
        {
          isGlamorousComponent: true,
          propsAreCssOverrides,
          withComponent,
          withProps,
          withConfig,
        },
      )
      return GlamorousComponent
    }
This returns a React Component that renders the comp (closure)
with a className based on the given glamor styles object(s)
@param {...Object|Function} styles the styles to create with glamor.
  If any of these are functions, they are invoked with the component
  props and the return value is used.
@return {ReactComponent} the ReactComponent function