"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {
  ColorSection: true,
  BarGraphSection: true,
  CardSection: true,
  CalendarSection: true,
  ButtonSection: true,
  ProgressSection: true,
  LinkSection: true,
  LogoSection: true,
  InputSection: true,
  IconSection: true,
  DefinitionTableSection: true,
  QRCodeSection: true,
  MessagePageCrateSection: true,
  PillSection: true,
  EmptyMessageSection: true,
  LegalDocumentSection: true,
  PromiseButtonSection: true,
  CopyButtonSection: true,
  EnvSection: true,
  DialogSection: true,
  DrugBoxSection: true,
  TabsSection: true,
  MacroSection: true
};
Object.defineProperty(exports, "DialogSection", {
  enumerable: true,
  get: function () {
    return _dialogSection.default;
  }
});
Object.defineProperty(exports, "DrugBoxSection", {
  enumerable: true,
  get: function () {
    return _drugboxSection.DrugBoxSection;
  }
});
Object.defineProperty(exports, "TabsSection", {
  enumerable: true,
  get: function () {
    return _tabsSection.TabsSection;
  }
});
Object.defineProperty(exports, "MacroSection", {
  enumerable: true,
  get: function () {
    return _macroSection.MacroSection;
  }
});
exports.EnvSection = exports.CopyButtonSection = exports.PromiseButtonSection = exports.LegalDocumentSection = exports.EmptyMessageSection = exports.PillSection = exports.MessagePageCrateSection = exports.QRCodeSection = exports.DefinitionTableSection = exports.IconSection = exports.InputSection = exports.LogoSection = exports.LinkSection = exports.ProgressSection = exports.ButtonSection = exports.CalendarSection = exports.CardSection = exports.BarGraphSection = exports.ColorSection = void 0;

var _preact = require("preact");

var _ = require("../");

var _colors = require("../colors");

var _section = _interopRequireDefault(require("./section"));

var _componentCode = _interopRequireDefault(require("./component-code"));

var _introspect = _interopRequireDefault(require("./introspect"));

var _checkMark = require("../check-mark");

var _crate = require("../crate");

var _appointmentStatus = require("../appointment-status");

var _barGraph = require("../bar-graph");

var _card = require("../card");

var _calendar = require("../calendar");

var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));

var _dialogSection = _interopRequireDefault(require("./dialog-section"));

var _drugboxSection = require("./drugbox-section");

var _tabsSection = require("./tabs-section");

var _macroSection = require("./macro-section");

var _formSection = require("./form-section");

Object.keys(_formSection).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _formSection[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function () {
      return _formSection[key];
    }
  });
});

var _timeline = require("./timeline");

Object.keys(_timeline).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _timeline[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function () {
      return _timeline[key];
    }
  });
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const getRandom = array => array[Math.floor(Math.random() * array.length)];

const getRandomColor = () => getRandom(Object.keys(_colors.colors));

class ColorSection extends _preact.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: getRandomColor()
    };
    setInterval(() => {
      this.setState({
        color: getRandomColor()
      });
    }, 2000);
  }

  render() {
    const {
      color
    } = this.state;
    return (0, _preact.h)(_section.default, {
      title: "Colors"
    }, (0, _preact.h)("div", {
      className: "flex flex-wrap items-center gap2"
    }, Object.keys(_colors.colors).map(name => (0, _preact.h)("div", {
      key: name
    }, (0, _preact.h)("div", {
      className: "ba b--light-gray mb1 w4 h2 bg-".concat(name)
    }), (0, _preact.h)("div", {
      className: "f7"
    }, name)))), (0, _preact.h)("div", null, (0, _preact.h)(_componentCode.default, {
      code: ".transition-bg"
    }), (0, _preact.h)("div", {
      key: "thing",
      className: "ba b--light-gray mb1 w4 h2 transition-bg bg-".concat(color)
    }), (0, _preact.h)("div", {
      className: "f7"
    }, color)));
  }

}

exports.ColorSection = ColorSection;
const chartData = [{
  label: 'Item #1',
  value: 3
}, {
  label: 'Item #2',
  value: 2
}, {
  label: 'Item #3',
  value: 1
}, {
  label: 'Item #4',
  value: 1
}];

const BarGraphSection = () => (0, _preact.h)(_section.default, {
  title: "BarGraph"
}, (0, _preact.h)(_componentCode.default, {
  name: "BarGraph",
  code: "<BarGraph data={".concat(JSON.stringify(chartData, null, 2), " />")
}, (0, _preact.h)("div", {
  className: "ba b--light-gray"
}, (0, _preact.h)(_barGraph.BarGraph, {
  data: chartData
}))));

exports.BarGraphSection = BarGraphSection;

const CardSection = () => (0, _preact.h)(_section.default, {
  title: "Card"
}, (0, _preact.h)(_componentCode.default, {
  name: "Card",
  code: "<div className=\"flex items-center gap2 bg-gray pa2\">\n  <Card data={chartData} white>\n    Some content\n  </Card>\n  <Card data={chartData} nearWhite>\n    Some content\n  </Card>\n  <TitleCard icon=\"business\" white title=\"Title\">\n    Some Content\n  </TitleCard>\n  <TitleCard icon=\"business\" white iconColor=\"green\" title=\"Title\">\n    Some Content\n  </TitleCard>\n  <TitleCard icon=\"business\" white iconColor=\"gray\" title=\"Title\">\n    Some Content\n  </TitleCard>\n  <TitleCard icon=\"business\" white iconColor=\"yellow\" title=\"Title\">\n    Some Content\n  </TitleCard>\n</div>"
}, (0, _preact.h)("div", {
  className: "flex items-center gap2 bg-gray pa2"
}, (0, _preact.h)(_card.Card, {
  data: chartData,
  white: true
}, "Some content"), (0, _preact.h)(_card.Card, {
  data: chartData,
  nearWhite: true
}, "Some content"), (0, _preact.h)(_card.TitleCard, {
  icon: "business",
  white: true,
  title: "Title"
}, "Some Content"), (0, _preact.h)(_card.TitleCard, {
  icon: "business",
  white: true,
  iconColor: "green",
  title: "Title"
}, "Some Content"), (0, _preact.h)(_card.TitleCard, {
  icon: "business",
  white: true,
  iconColor: "gray",
  title: "Title"
}, "Some Content"), (0, _preact.h)(_card.TitleCard, {
  icon: "business",
  white: true,
  iconColor: "yellow",
  title: "Title"
}, "Some Content"))));

exports.CardSection = CardSection;

const CalendarSection = () => (0, _preact.h)(_section.default, {
  title: "Calendar"
}, (0, _preact.h)(_componentCode.default, {
  name: "Calendar",
  code: "<Calendar\n  currentDayDate={new Date()}\n  entries={[\n    {\n      label: 'hi',\n      startAsDate: new Date(),\n      endAsDate: new Date(Date.now() + 60000 * 60)\n    }\n  ]}\n  dayContentComponent={({\n    events,\n    isPast,\n    isFuture,\n    isToday,\n    isTopRow,\n    isBottomRow,\n    isFirstColumn,\n    isLastColumn\n  }) => (\n    <div>\n      {events.map(entry => (\n        <div key={entry.id} className=\"pa1 bg-green br1\">\n          {entry.label}\n        </div>\n      ))}\n    </div>\n  )}\n  onDayClick={day => console.log('day clicked', day)}\n  onMonthChange={({\n    // very first time of first day shown on the calendar\n    start,\n    // very last time shown on the calendar\n    end,\n    // first time of current month\n    currentMonthStart,\n    // last time of current month\n    currentMonthEnd\n  }) => {}}\n/>"
}, (0, _preact.h)(_calendar.Calendar, {
  currentDayDate: (0, _startOfDay.default)(new Date()),
  entries: [{
    label: 'hi',
    startAsDate: new Date(),
    endAsDate: new Date(Date.now() + 60000 * 60)
  }],
  dayContentComponent: ({
    events
  }) => (0, _preact.h)("div", null, events.map(entry => (0, _preact.h)("div", {
    key: entry.id,
    className: "pa1 bg-green br1"
  }, entry.label))) // eslint-disable-next-line no-console
  ,
  onDayClick: day => console.log('day clicked', day),
  onMonthChange: ({
    // very first time of first day shown on the calendar
    start,
    // very last time shown on the calendar
    end,
    // first time of current month
    currentMonthStart,
    // last time of current month
    currentMonthEnd
  }) => {
    // eslint-disable-next-line no-console
    console.log({
      start,
      end,
      currentMonthStart,
      currentMonthEnd
    });
  }
})));

exports.CalendarSection = CalendarSection;

const ButtonSection = () => (0, _preact.h)(_section.default, {
  title: "Buttons"
}, (0, _preact.h)(_introspect.default, {
  Component: _.Button,
  name: "Button",
  children: "Button"
}), (0, _preact.h)(_componentCode.default, {
  name: "TriggerWaitingComponent",
  code: "<TriggerWaitingComponent\n  waitTime={5000}\n  render={({ waiting, trigger }) => {\n    return (\n      <Button\n        onClick={() => {\n          trigger()\n        }}\n        disabled={waiting}\n      >\n        {waiting ? 'Waiting...' : 'Click Me!'}\n      </Button>\n    )\n  }}\n/>"
}, (0, _preact.h)("p", null, "Default wait time is 1 second. You get two extra props, \"trigger\" and \"waiting\". It doesn't have to be used with a button."), (0, _preact.h)(_.TriggerWaitingComponent, {
  waitTime: 5000,
  render: ({
    waiting,
    trigger
  }) => {
    return (0, _preact.h)(_.Button, {
      onClick: () => {
        trigger();
      },
      disabled: waiting
    }, waiting ? 'Waiting...' : 'Click Me!');
  }
})), (0, _preact.h)(_componentCode.default, {
  name: "IconButton",
  code: "<div className=\"flex items-center gap2\">\n  <IconButton icon='local_hospital'>Something</IconButton>\n  <IconButton tiny icon='local_hospital'>Something</IconButton>\n  <IconButton large icon='local_hospital'>Something</IconButton>\n</div>"
}, (0, _preact.h)("div", {
  className: "flex items-center gap2"
}, (0, _preact.h)(_.IconButton, {
  tiny: true,
  icon: "local_hospital"
}, "Something"), (0, _preact.h)(_.IconButton, {
  icon: "local_hospital"
}, "Something"), (0, _preact.h)(_.IconButton, {
  large: true,
  icon: "local_hospital"
}, "Something"))));

exports.ButtonSection = ButtonSection;

const ProgressSection = () => (0, _preact.h)(_section.default, {
  title: "ProgressBar"
}, (0, _preact.h)(_componentCode.default, {
  name: "ProgressBar",
  code: "<ProgressBar percentage={0.2} backgroundColor='gray' barColor='light-blue'/>"
}, (0, _preact.h)(_.ProgressBar, {
  backgroundColor: "gray",
  barColor: "light-blue",
  percentage: 0.2
})));

exports.ProgressSection = ProgressSection;

const LinkSection = () => (0, _preact.h)(_section.default, {
  title: "Links"
}, (0, _preact.h)(_componentCode.default, {
  name: "Link",
  code: "<Link href=\"/\">hi</Link>\n<br/>\n<Link underline={false} href=\"/\">I am not underlined</Link>"
}, (0, _preact.h)(_.Link, {
  href: "/"
}, "Some text"), (0, _preact.h)("br", null), (0, _preact.h)(_.Link, {
  underline: false,
  href: "/"
}, "I am not underlined")), (0, _preact.h)(_componentCode.default, {
  name: "SupportLink",
  code: "<SupportLink />"
}, (0, _preact.h)(_.SupportLink, null)), (0, _preact.h)(_componentCode.default, {
  name: "SupportSMSLink",
  code: "<SupportSMSLink />"
}, (0, _preact.h)(_.SupportSMSLink, null)));

exports.LinkSection = LinkSection;

const LogoSection = () => (0, _preact.h)("div", null, (0, _preact.h)(_crate.LogoCrate, {
  wide: true
}), (0, _preact.h)(_section.default, {
  title: "Logos"
}, (0, _preact.h)(_componentCode.default, {
  name: "XChart",
  code: "<div className=\"pa3 w5 ba\">\n  <XChart />\n</div>\n<div className=\"bg-dark-blue pa3 w5\">\n  <XChart light />\n</div>"
}, (0, _preact.h)("div", {
  className: "pa3 w5 ba"
}, (0, _preact.h)(_.XChart, null)), (0, _preact.h)("div", {
  className: "bg-dark-blue pa3 w5"
}, (0, _preact.h)(_.XChart, {
  light: true
})), (0, _preact.h)("div", {
  className: "pa3 w5 ba"
}, (0, _preact.h)(_.XChart, {
  includeDomain: false
})), (0, _preact.h)("div", {
  className: "bg-dark-blue pa3 w5"
}, (0, _preact.h)(_.XChart, {
  light: true,
  includeDomain: false
}))), (0, _preact.h)(_componentCode.default, {
  name: "XMark",
  code: "<div className=\"pa3 w3 ba\">\n  <XMark />\n</div>\n<div className=\"bg-dark-blue pa3 w3\">\n  <XMark light />\n</div>"
}, (0, _preact.h)("div", {
  className: "pa3 w3 ba"
}, (0, _preact.h)(_.XMark, null)), (0, _preact.h)("div", {
  className: "bg-dark-blue pa3 w3 ba"
}, (0, _preact.h)(_.XMark, {
  light: true
})))));

exports.LogoSection = LogoSection;

const InputSection = () => (0, _preact.h)(_section.default, {
  title: "Inputs"
}, (0, _preact.h)(_componentCode.default, {
  name: "Input",
  code: "<Input />"
}, (0, _preact.h)(_.Input, null)), (0, _preact.h)(_componentCode.default, {
  name: "Select",
  code: "<Select>\n  <option>option 1</option>\n  <option>option 2</option>\n</Select>"
}, (0, _preact.h)(_.Select, null, (0, _preact.h)("option", null, "option 1"), (0, _preact.h)("option", null, "option 2"))), (0, _preact.h)(_componentCode.default, {
  name: "Textarea",
  code: "<Textarea />"
}, (0, _preact.h)(_.Textarea, null)), (0, _preact.h)(_componentCode.default, {
  name: "TooltipButton",
  code: "<TooltipButton />"
}, (0, _preact.h)(_.TooltipButton, {
  text: "some content"
}, "Stuff goes here")), (0, _preact.h)(_componentCode.default, {
  name: "CheckMark",
  code: "<CheckMark name=\"name\" isComplete label=\"Selected\" />\n<CheckMark isAuto label=\"Auto select\" />\n<CheckMark label=\"Deselected\" />"
}, (0, _preact.h)(_checkMark.CheckMark, {
  name: "name",
  isComplete: true,
  label: "Selected"
}), (0, _preact.h)(_checkMark.CheckMark, {
  isAuto: true,
  label: "Auto select"
}), (0, _preact.h)(_checkMark.CheckMark, {
  label: "Deselected"
})));

exports.InputSection = InputSection;

class IconSection extends _preact.Component {
  constructor(props) {
    super(props);
    this.max = 300;
    this.min = 0;
    this.state = {
      bpm: 50
    };
  }

  render() {
    const {
      bpm
    } = this.state;
    const playbackSpeed = (0, _.bpmToPlaybackSpeed)(bpm);
    return (0, _preact.h)(_section.default, {
      title: "Icons"
    }, (0, _preact.h)(_componentCode.default, {
      name: "Icon",
      code: "<Icon icon=\"pill\" />\n<Icon icon=\"close\" />\n<Icon icon=\"loading_dots\" />\n<Icon icon=\"live_dot\" />"
    }, (0, _preact.h)("div", {
      className: "flex flex-column"
    }, (0, _preact.h)(_.Icon, {
      icon: "pill",
      size: "20"
    }), (0, _preact.h)(_.Icon, {
      icon: "close",
      size: "20"
    }), (0, _preact.h)(_.Icon, {
      icon: "loading_dots",
      size: "20"
    }), (0, _preact.h)(_.Icon, {
      icon: "settings_ethernet",
      size: "20"
    }), (0, _preact.h)(_.Icon, {
      icon: "sine_wave",
      size: "20"
    }), (0, _preact.h)(_.Icon, {
      icon: "live_dot",
      size: "20"
    })), (0, _preact.h)("div", {
      className: "flex flex-column"
    }, (0, _preact.h)(_.Icon, {
      icon: "pill",
      size: "40",
      className: "green"
    }), (0, _preact.h)(_.Icon, {
      icon: "close",
      size: "40",
      className: "light-blue"
    }), (0, _preact.h)(_.Icon, {
      icon: "loading_dots",
      size: "40",
      className: "light-blue"
    }), (0, _preact.h)(_.Icon, {
      icon: "settings_ethernet",
      size: "40",
      className: "light-blue"
    }), (0, _preact.h)(_.Icon, {
      icon: "sine_wave",
      size: "40",
      className: "light-blue"
    }), (0, _preact.h)(_.Icon, {
      icon: "live_dot",
      size: "40",
      className: "dark-blue",
      speed: playbackSpeed
    }), (0, _preact.h)(_.Icon, {
      icon: "live_dot",
      size: "80",
      className: "dark-blue",
      speed: playbackSpeed
    }), (0, _preact.h)("div", null, bpm, " bpm", (0, _preact.h)("div", null, (0, _preact.h)("input", {
      type: "range",
      min: this.min,
      max: this.max,
      step: 1,
      onInput: e => this.setState({
        bpm: e.target.value
      })
    }))))), (0, _preact.h)(_componentCode.default, {
      name: "CircleIcon",
      code: "<div className='flex flex-column gap2'>\n  {[\n    ['red', 'error'],\n    ['yellow', 'warning'],\n    ['blue', 'info'],\n    ['green', 'check'],\n    ['gray', 'pill'],\n  ].map(([color, icon]) => (\n    <div key='icon' className='flex items-center gap3'>\n      <CircledIcon color={color} icon={icon} />\n      <span>\n        {icon} - {color}\n      </span>\n    </div>\n  ))}\n</div>"
    }, (0, _preact.h)("div", {
      className: "flex flex-column gap2"
    }, [['red', 'error'], ['yellow', 'warning'], ['blue', 'info'], ['green', 'check'], ['gray', 'pill']].map(([color, icon]) => (0, _preact.h)("div", {
      key: "icon",
      className: "flex items-center gap3"
    }, (0, _preact.h)(_.CircledIcon, {
      color: color,
      icon: icon
    }), (0, _preact.h)("span", null, icon, " - ", color))))));
  }

}

exports.IconSection = IconSection;

const DefinitionTableSection = () => (0, _preact.h)(_section.default, {
  title: "DefinitionTable"
}, (0, _preact.h)(_componentCode.default, {
  name: "DefinitionTable",
  code: "<DefinitionTable\n  data={{\n    'Some name': 'Some value',\n    'Something else': 'Some longer value',\n    'A missing value': null,\n    'Another missing value': undefined\n  }}\n/>"
}, (0, _preact.h)(_.DefinitionTable, {
  data: {
    'Some name': 'Some value',
    'Something else': 'Some longer value',
    'A missing value': null,
    'Another missing value': undefined
  }
})));

exports.DefinitionTableSection = DefinitionTableSection;

const QRCodeSection = () => (0, _preact.h)(_section.default, {
  title: "QRCode"
}, (0, _preact.h)(_componentCode.default, {
  name: "QRCode",
  code: "<div className='flex justify-between'>\n  <QRCode data='https://xchart.com' size='200' />\n  <QRCode className='shadow-2' size='200' data='https://xchart.com' />\n  <QRCode noLogo size='200' data='https://xchart.com' />\n</div>"
}, (0, _preact.h)("div", {
  className: "flex justify-between"
}, (0, _preact.h)(_.QRCode, {
  data: "https://xchart.com",
  size: "200"
}), (0, _preact.h)(_.QRCode, {
  className: "shadow-2",
  size: "200",
  data: "https://xchart.com"
}), (0, _preact.h)(_.QRCode, {
  noLogo: true,
  size: "200",
  data: "https://xchart.com"
}))));

exports.QRCodeSection = QRCodeSection;

const MessagePageCrateSection = () => (0, _preact.h)(_section.default, {
  title: "Message Page Crate"
}, (0, _preact.h)(_componentCode.default, {
  name: "MessagePageCrate",
  code: "<MessagePageCrate noShadow wide loading>Loading</MessagePageCrate>\n<MessagePageCrate warning>Uh oh!</MessagePageCrate>\n<MessagePageCrate error>Aw Crap!</MessagePageCrate>"
}, (0, _preact.h)(_.MessagePageCrate, null, "Hello there!"), (0, _preact.h)(_.MessagePageCrate, {
  noShadow: true,
  wide: true,
  info: true
}, "Some info here"), (0, _preact.h)(_.MessagePageCrate, {
  noShadow: true,
  wide: true,
  loading: true
}, "Loading"), (0, _preact.h)(_.MessagePageCrate, {
  warning: true,
  wide: true
}, "Uh oh!"), (0, _preact.h)(_.MessagePageCrate, {
  error: true
}, "Aw Crap!"), (0, _preact.h)(_.MessagePageCrate, {
  success: true
}, "Success!")));

exports.MessagePageCrateSection = MessagePageCrateSection;

const PillSection = () => (0, _preact.h)(_section.default, {
  title: "Pills"
}, (0, _preact.h)(_componentCode.default, {
  name: "Pills",
  code: "<Pills\n  items={[\n    { icon: 'face', text: 'user' },\n    { icon: 'verified_user', text: 'verified user' }\n  ]}\n  pillBgColor=\"light-gray\"\n  pillTextColor=\"dark-blue\"\n/>"
}, (0, _preact.h)(_.Pills, {
  items: [{
    icon: 'face',
    text: 'user'
  }, {
    icon: 'verified_user',
    text: 'verified user'
  }],
  pillBgColor: "light-gray",
  pillTextColor: "dark-blue"
})), (0, _preact.h)(_componentCode.default, {
  name: "AppointmentStatus",
  code: "<AppointmentStatus status=\"arrived\" />\n<AppointmentStatus status=\"booked\" />\n<AppointmentStatus status=\"cancelled\" />\n<AppointmentStatus status=\"checked-in\" />\n<AppointmentStatus status=\"entered-in-error\" />\n<AppointmentStatus status=\"fulfilled\" />\n<AppointmentStatus status=\"noshow\" />\n<AppointmentStatus status=\"pending\" />\n<AppointmentStatus status=\"proposed\" />\n<AppointmentStatus status=\"waitlist\" />"
}, (0, _preact.h)("div", {
  className: "flex items-center flex-wrap gap2"
}, (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "arrived"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "booked"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "cancelled"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "checked-in"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "entered-in-error"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "fulfilled"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "noshow"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "pending"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "proposed"
}), (0, _preact.h)(_appointmentStatus.AppointmentStatus, {
  status: "waitlist"
}))));

exports.PillSection = PillSection;

const EmptyMessageSection = () => (0, _preact.h)(_section.default, {
  title: "EmptyMessage"
}, (0, _preact.h)(_componentCode.default, {
  name: "EmptyMessage",
  code: "<EmptyMessage message=\"nothing\"/>"
}, (0, _preact.h)(_.EmptyMessage, {
  message: "nothing"
})));

exports.EmptyMessageSection = EmptyMessageSection;

const LegalDocumentSection = () => (0, _preact.h)(_section.default, {
  title: "LegalDocument"
}, (0, _preact.h)(_componentCode.default, {
  name: "LegalDocument",
  code: '<LegalDocument html={`<h1>Some HTML</h1>`}/>'
}, (0, _preact.h)(_.LegalDocument, {
  html: "<h2>Hi</h2>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>data</td>\n<td>can make tables</td>\n</tr>\n<tr>\n<td>engine</td>\n<td>use vertical bars for cells</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>You can create quotes like this.</p>\n</blockquote>\n<ol>\n<li>\n<p>Lorem ipsum dolor sit amet</p>\n</li>\n<li>\n<p>Consectetur adipiscing elit</p>\n</li>\n<li>\n<p>Integer molestie lorem at massa</p>\n</li>\n<li>\n<p>You can use sequential numbers\u2026</p>\n</li>\n<li>\n<p>\u2026or keep all the numbers as \u201C1\"\u201D</p>\n</li>\n</ol>\n<ul>\n<li>Lists start with \u201C-\u201D or \u201C*\u201D</li>\n<li>Sub-lists are indented 2 spaces:\n<ul>\n<li>This is indented:\n<ul>\n<li>First item</li>\n<li>Other item</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Pretty easy!</li>\n</ul>"
})));

exports.LegalDocumentSection = LegalDocumentSection;

const PromiseButtonSection = () => (0, _preact.h)(_section.default, {
  title: "PromiseButton"
}, (0, _preact.h)(_componentCode.default, {
  name: "PromiseButton",
  code: "<PromiseButton\n  buttonText='Click Me'\n  onClick={() =>\n    new Promise((resolve, reject) =>\n      setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)\n    )\n  }\n  loadingText='Working...'\n  successText='Success!'\n  errorText='Ooops!'\n  resetTimeout={2500}\n/>"
}, (0, _preact.h)(_.PromiseButton, {
  buttonText: "Click Me",
  onClick: () => new Promise((resolve, reject) => setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)),
  loadingText: "Working...",
  successText: "Success!",
  errorText: "Ooops!",
  resetTimeout: 2500
})));

exports.PromiseButtonSection = PromiseButtonSection;

const CopyButtonSection = () => (0, _preact.h)(_section.default, {
  title: "CopyButton"
}, (0, _preact.h)(_componentCode.default, {
  name: "CopyButton",
  code: "<CopyButton message=\"nothing\"/>"
}, (0, _preact.h)(_.CopyButton, {
  text: "Copy Me!"
})));

exports.CopyButtonSection = CopyButtonSection;

const EnvSection = () => (0, _preact.h)(_section.default, {
  title: "Env"
}, (0, _preact.h)("pre", null, "IS_IOS: ", _.IS_IOS.toString()), (0, _preact.h)("pre", null, "IS_IPAD: ", _.IS_IPAD.toString()), (0, _preact.h)("pre", null, "IS_CHROME: ", _.IS_CHROME.toString()));

exports.EnvSection = EnvSection;