/**
 * 1 === normal component, not stylable ===
 */
export class Eh extends React.Component {
    render() {
        return React.createElement("span", null, "eh");
    }
}
/**
 * 1 === made styleable ===
 */
export class Eh extends React.Component {
    render() {
        return React.createElement("span", { className: this.props.className }, "s");
    }
}
/**
 * 1 === example of Eh being used on a ExamplePage
 */
export class ExamplePage extends React.Component {
    render() {
        return (React.createElement("div", { className: this.props.className },
            React.createElement("h1", null, "other stuff"),
            React.createElement(Eh, null)));
    }
}
import { styled } from 'styleh-components';
const StyledEh = styled(Eh) ``;
// if you do not export everything as `StyledSomething`, you can't just style it with
// `${Eh} { }`, because it's not a styled component
// example
const StyledProduct = styled(ExamplePage) `
  ${Eh} {
    color: blue;
  }
`;
// so you need to do the whole implemention! or, this may be the way a lot of things use renderProps... just to make something styled...
// export class WholeOwnExamplePage extends React.Component<{ className?: string }> {
//   render() {
//     return (
//       <div className={this.props.className}>
//         <h1>other stuff</h1>
//         <StyledEh />
//       </div>
//     )
//   }
// }
export { Eh };
export const StyledEh = styled(Eh) ``;
export class ExamplePage extends React.Component {
    render() {
        return (React.createElement("div", { className: this.props.className },
            React.createElement("h1", null, "other stuff"),
            React.createElement(StyledEh, null)));
    }
}
export const StyledExamplePage = styled(ExamplePage) ``;
//# sourceMappingURL=CommonFixes.js.map