import { Component, h, State } from '@stencil/core';
import { Button, Grid, Col, Card, CardContent, Heading, Paragraph, ThemeProvider } from '../../core';
// import { PrismicRichText } from '../../web/components/prismic/PrismicRichText';
import { PrismicContent } from '../../web/components/prismic/PrismicContent';
import Prismic from 'prismic-javascript';
export class Demo {
  constructor() {
    this.getPage = async (prismicId) => {
      const apiURL = 'https://ionicframeworkcom.prismic.io/api/v2';
      const defaults = {
        title: 'Ionic - Putting Web Technologies to Work For You',
        description: 'Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript',
        meta_image: 'https://ionicframework.com/img/meta/ionic-framework-og.png'
      };
      if (!prismicId)
        return;
      try {
        const api = await Prismic.getApi(apiURL);
        // const response: PrismicDocument = await api.getSingle(prismicId)
        const response = await api.getByID(prismicId);
        this.data = response.data;
        // if the page has meta data, set it, otherwise use the default
        // note, if you're hard coding meta data, do it after calling getPage()
        ['title', 'description', 'meta_image'].forEach(prop => {
          this.data[prop] = response.data[prop] ? response.data[prop] : defaults[prop];
        });
      }
      catch (e) {
        console.warn(e);
      }
    };
  }
  async componentWillLoad() {
    await this.getPage('XGSEmBAAACwAiigU');
  }
  render() {
    const { data } = this;
    if (!data)
      return;
    return (h("div", { class: "demos" },
      h(GridDemo2, null),
      h(PrismicContent, { content: data.body }),
      h("site-platform-bar", { "product-name": "a jalapeno" }),
      h(ButtonDemo, null),
      h(HeadingDemo, null),
      h(ParagraphDemo, null),
      h(GridDemo, null),
      h(CardDemo, null),
      h(MoresResourcesDemo, null)));
  }
  static get is() { return "shared-demo"; }
  static get originalStyleUrls() { return {
    "$": ["demo.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["demo.css"]
  }; }
  static get states() { return {
    "data": {}
  }; }
}
const GridDemo2 = () => [
  h(Grid, null,
    h(Col, { size: 2, style: { background: '#eee' } },
      h("img", { src: '...logo.png' })),
    h(Col, { size: 1, offset: 1, centered: true, style: { background: '#fee' } },
      h("nav", null, "...")),
    h(Col, { size: 3, right: true, style: { background: '#efe' } },
      h("nav", null, "..."))),
  h(Grid, null,
    h(Col, { size: 10, offset: 1, centered: true, style: { background: '#eef' } },
      h(Heading, { level: 1 }, "..."),
      h(Paragraph, null, "..."),
      h(Button, null, "...")),
    h(Col, { size: 12, gutter: false, style: { background: '#ffe' } },
      h("img", { src: "...screenshot.png" })))
];
const ButtonDemo = () => (h("div", { class: "demo demo-button" },
  h(Heading, { level: 3, bordered: true }, "Buttons"),
  h("a", { href: "#", class: "ui-button" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "blue", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { size: "lg", kind: "display", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "blue", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "md", kind: "display", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "blue", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "sm", kind: "display", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "blue", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "blue", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "blue", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "blue", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "blue", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "xl", kind: "display", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "indigo", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { size: "lg", kind: "display", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "indigo", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "md", kind: "display", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "indigo", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "sm", kind: "display", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "indigo", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "indigo", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "indigo", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "indigo", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "indigo", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "xl", kind: "display", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "green", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { size: "lg", kind: "display", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "green", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "md", kind: "display", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "green", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "sm", kind: "display", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "green", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "green", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "green", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "green", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "green", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "xl", kind: "display", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "regular", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "xl", kind: "round", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "xl", kind: "display", color: "red", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { size: "lg", kind: "display", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "display", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "regular", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "lg", kind: "round", color: "red", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "md", kind: "display", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "display", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "regular", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "md", kind: "round", color: "red", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { size: "sm", kind: "display", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "display", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "regular", color: "red", variation: "ghost" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "red", variation: "fill" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "red", variation: "muted" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "red", variation: "light" }, "Button"),
  h(Button, { size: "sm", kind: "round", color: "red", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "yellow", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "yellow", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "yellow", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "yellow", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "yellow", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "yellow", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "yellow", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "yellow", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "orange", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "orange", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "orange", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "orange", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "orange", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "orange", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "orange", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "orange", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "cyan", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "cyan", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "cyan", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "cyan", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "cyan", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "cyan", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "cyan", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "cyan", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "regular", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "round", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "xl", kind: "display", color: "lavender", variation: "ghost", disabled: true }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "display", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "regular", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "lg", kind: "round", color: "lavender", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "display", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "regular", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "md", kind: "round", color: "lavender", variation: "ghost" }, "Button"),
  h("hr", null),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "display", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "regular", color: "lavender", variation: "ghost" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "lavender", variation: "fill" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "lavender", variation: "muted" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "lavender", variation: "light" }, "Button"),
  h(Button, { anchor: true, href: "/demo", size: "sm", kind: "round", color: "lavender", variation: "ghost" }, "Button"),
  h("hr", null)));
const ParagraphDemo = () => (h("div", { class: "demo demo-heading" },
  h(Paragraph, { level: 1 }, "La final de la Copa de Campeones de Europa de 1977-78 fue un partido de f\u00FAtbol disputado el 10 de mayo de 1978 entre el Liverpool de Inglaterra y el Club Brujas de B\u00E9lgica en el Estadio Wembley de Londres, lugar definido por el comit\u00E9 ejecutivo de la UEFA el 20 de septiembre de 1977. El partido defini\u00F3 al campe\u00F3n de la Copa de Campeones de Europa 1977-78, principal competici\u00F3n futbol\u00EDstica europea de la temporada. Liverpool lleg\u00F3 a la instancia como el vigente campe\u00F3n y esta era su segunda final en la competencia, mientras que para Club Brujas era la primera vez que llegaba al encuentro definitorio. Anteriormente se enfrentaron en la final de la Copa de la UEFA 1975-76, con victoria por 4-3 del equipo ingl\u00E9s en el global."),
  h(Paragraph, { level: 2 }, "La final de la Copa de Campeones de Europa de 1977-78 fue un partido de f\u00FAtbol disputado el 10 de mayo de 1978 entre el Liverpool de Inglaterra y el Club Brujas de B\u00E9lgica en el Estadio Wembley de Londres, lugar definido por el comit\u00E9 ejecutivo de la UEFA el 20 de septiembre de 1977. El partido defini\u00F3 al campe\u00F3n de la Copa de Campeones de Europa 1977-78, principal competici\u00F3n futbol\u00EDstica europea de la temporada. Liverpool lleg\u00F3 a la instancia como el vigente campe\u00F3n y esta era su segunda final en la competencia, mientras que para Club Brujas era la primera vez que llegaba al encuentro definitorio. Anteriormente se enfrentaron en la final de la Copa de la UEFA 1975-76, con victoria por 4-3 del equipo ingl\u00E9s en el global."),
  h(Paragraph, { level: 3 }, "La final de la Copa de Campeones de Europa de 1977-78 fue un partido de f\u00FAtbol disputado el 10 de mayo de 1978 entre el Liverpool de Inglaterra y el Club Brujas de B\u00E9lgica en el Estadio Wembley de Londres, lugar definido por el comit\u00E9 ejecutivo de la UEFA el 20 de septiembre de 1977. El partido defini\u00F3 al campe\u00F3n de la Copa de Campeones de Europa 1977-78, principal competici\u00F3n futbol\u00EDstica europea de la temporada. Liverpool lleg\u00F3 a la instancia como el vigente campe\u00F3n y esta era su segunda final en la competencia, mientras que para Club Brujas era la primera vez que llegaba al encuentro definitorio. Anteriormente se enfrentaron en la final de la Copa de la UEFA 1975-76, con victoria por 4-3 del equipo ingl\u00E9s en el global."),
  h(Paragraph, { level: 4, leading: 'prose' }, "La final de la Copa de Campeones de Europa de 1977-78 fue un partido de f\u00FAtbol disputado el 10 de mayo de 1978 entre el Liverpool de Inglaterra y el Club Brujas de B\u00E9lgica en el Estadio Wembley de Londres, lugar definido por el comit\u00E9 ejecutivo de la UEFA el 20 de septiembre de 1977. El partido defini\u00F3 al campe\u00F3n de la Copa de Campeones de Europa 1977-78, principal competici\u00F3n futbol\u00EDstica europea de la temporada. Liverpool lleg\u00F3 a la instancia como el vigente campe\u00F3n y esta era su segunda final en la competencia, mientras que para Club Brujas era la primera vez que llegaba al encuentro definitorio. Anteriormente se enfrentaron en la final de la Copa de la UEFA 1975-76, con victoria por 4-3 del equipo ingl\u00E9s en el global."),
  h(Paragraph, { level: 5, leading: 'prose' }, "La final de la Copa de Campeones de Europa de 1977-78 fue un partido de f\u00FAtbol disputado el 10 de mayo de 1978 entre el Liverpool de Inglaterra y el Club Brujas de B\u00E9lgica en el Estadio Wembley de Londres, lugar definido por el comit\u00E9 ejecutivo de la UEFA el 20 de septiembre de 1977. El partido defini\u00F3 al campe\u00F3n de la Copa de Campeones de Europa 1977-78, principal competici\u00F3n futbol\u00EDstica europea de la temporada. Liverpool lleg\u00F3 a la instancia como el vigente campe\u00F3n y esta era su segunda final en la competencia, mientras que para Club Brujas era la primera vez que llegaba al encuentro definitorio. Anteriormente se enfrentaron en la final de la Copa de la UEFA 1975-76, con victoria por 4-3 del equipo ingl\u00E9s en el global."),
  h(Paragraph, { level: 6 }, "La final de la Copa de Campeones de Europa de 1977-78 fue un partido de f\u00FAtbol disputado el 10 de mayo de 1978 entre el Liverpool de Inglaterra y el Club Brujas de B\u00E9lgica en el Estadio Wembley de Londres, lugar definido por el comit\u00E9 ejecutivo de la UEFA el 20 de septiembre de 1977. El partido defini\u00F3 al campe\u00F3n de la Copa de Campeones de Europa 1977-78, principal competici\u00F3n futbol\u00EDstica europea de la temporada. Liverpool lleg\u00F3 a la instancia como el vigente campe\u00F3n y esta era su segunda final en la competencia, mientras que para Club Brujas era la primera vez que llegaba al encuentro definitorio. Anteriormente se enfrentaron en la final de la Copa de la UEFA 1975-76, con victoria por 4-3 del equipo ingl\u00E9s en el global.")));
const HeadingDemo = () => (h("div", { class: "demo demo-heading" },
  h(ThemeProvider, { kind: 'editorial' },
    h(Heading, { level: 1, as: 'h6' }, "Headings"),
    h(Heading, { level: 3, as: 'h5' }, "Level 1"),
    h(Heading, { level: 2 }, "Level 2"),
    h(Heading, { level: 3 }, "Level 3"),
    h(Heading, { level: 4 }, "Level 4"),
    h(Heading, { level: 5 }, "Level 5"),
    h(Heading, { level: 6 }, "Level 6"))));
const GridDemo = () => (h("div", { class: "demo demo-grid" },
  h(Heading, { level: 3, bordered: true }, "Grid"),
  h(Grid, { class: "demo demo-grid" },
    h(Col, { md: 3, sm: 3, xs: 3, cols: 12 }, "Column 1"),
    h(Col, { md: 3, sm: 3, xs: 3, cols: 12 }, "Column 2"),
    h(Col, { md: 3, sm: 3, xs: 3, cols: 12 }, "Column 3"),
    h(Col, { md: 3, sm: 3, xs: 3, cols: 12 }, "Column 4"))));
const CardDemo = () => (h("div", { class: "demo demo-card" },
  h(Heading, { level: 3, bordered: true }, "Cards"),
  h(Card, null,
    h(CardContent, null,
      h("hgroup", null,
        h(Heading, { level: 3 }, "Card"),
        h(Paragraph, null, "Unicorn next level roof party health goth, squid brooklyn pabst biodiesel kickstarter man bun small batch kale chips flexitarian. Edison bulb selfies mumblecore ethical, helvetica affogato palo santo. Taxidermy humblebrag hexagon, pabst stumptown PBR&B succulents. Lumbersexual fam shabby chic cardigan lomo quinoa put a bird on it salvia authentic hell of migas aesthetic truffaut gentrify tattooed. Migas direct trade polaroid distillery, ugh brunch farm-to-table fingerstache vaporware readymade occupy aesthetic four dollar toast. Freegan lyft vegan ramps vexillologist taxidermy listicle vinyl blue bottle pug."))))));
const MoresResourcesDemo = () => (h("div", null));
