Object.defineProperty(exports, '__esModule', {
  value: true
});

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _templateObject = _taggedTemplateLiteral(['\n              <div class="is-color text-color">@text-color</div>\n              <div class="is-color text-color-subtle">@text-color-subtle</div>\n              <div class="is-color text-color-highlight">@text-color-highlight</div>\n              <div class="is-color text-color-selected">@text-color-selected</div>\n              <div class="is-color"></div>\n              <div class="is-color text-color-info">@text-color-info</div>\n              <div class="is-color text-color-success">@text-color-success</div>\n              <div class="is-color text-color-warning">@text-color-warning</div>\n              <div class="is-color text-color-error">@text-color-error</div>\n            '], ['\n              <div class="is-color text-color">@text-color</div>\n              <div class="is-color text-color-subtle">@text-color-subtle</div>\n              <div class="is-color text-color-highlight">@text-color-highlight</div>\n              <div class="is-color text-color-selected">@text-color-selected</div>\n              <div class="is-color"></div>\n              <div class="is-color text-color-info">@text-color-info</div>\n              <div class="is-color text-color-success">@text-color-success</div>\n              <div class="is-color text-color-warning">@text-color-warning</div>\n              <div class="is-color text-color-error">@text-color-error</div>\n            ']),
    _templateObject2 = _taggedTemplateLiteral(['\n              <div class="is-color background-color-info">@background-color-info</div>\n              <div class="is-color background-color-success">@background-color-success</div>\n              <div class="is-color background-color-warning">@background-color-warning</div>\n              <div class="is-color background-color-error">@background-color-error</div>\n              <div class="is-color"></div>\n              <div class="is-color background-color-highlight">@background-color-highlight</div>\n              <div class="is-color background-color-selected">@background-color-selected</div>\n              <div class="is-color app-background-color">@app-background-color</div>\n            '], ['\n              <div class="is-color background-color-info">@background-color-info</div>\n              <div class="is-color background-color-success">@background-color-success</div>\n              <div class="is-color background-color-warning">@background-color-warning</div>\n              <div class="is-color background-color-error">@background-color-error</div>\n              <div class="is-color"></div>\n              <div class="is-color background-color-highlight">@background-color-highlight</div>\n              <div class="is-color background-color-selected">@background-color-selected</div>\n              <div class="is-color app-background-color">@app-background-color</div>\n            ']),
    _templateObject3 = _taggedTemplateLiteral(['\n              <div class="is-color base-background-color">@base-background-color</div>\n              <div class="is-color base-border-color">@base-border-color</div>\n            '], ['\n              <div class="is-color base-background-color">@base-background-color</div>\n              <div class="is-color base-border-color">@base-border-color</div>\n            ']),
    _templateObject4 = _taggedTemplateLiteral(['\n              <div class="is-color pane-item-background-color">@pane-item-background-color</div>\n              <div class="is-color pane-item-border-color">@pane-item-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color input-background-color">@input-background-color</div>\n              <div class="is-color input-border-color">@input-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color tool-panel-background-color">@tool-panel-background-color</div>\n              <div class="is-color tool-panel-border-color">@tool-panel-border-color</div>\n              <div class="is-color inset-panel-background-color">@inset-panel-background-color</div>\n              <div class="is-color inset-panel-border-color">@inset-panel-border-color</div>\n              <div class="is-color panel-heading-background-color">@panel-heading-background-color</div>\n              <div class="is-color panel-heading-border-color">@panel-heading-border-color</div>\n              <div class="is-color overlay-background-color">@overlay-background-color</div>\n              <div class="is-color overlay-border-color">@overlay-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color button-background-color">@button-background-color</div>\n              <div class="is-color button-background-color-hover">@button-background-color-hover</div>\n              <div class="is-color button-background-color-selected">@button-background-color-selected</div>\n              <div class="is-color button-border-color">@button-border-color</div>\n              <div class="color"></div>\n              <div class="is-color tab-bar-background-color">@tab-bar-background-color</div>\n              <div class="is-color tab-bar-border-color">@tab-bar-border-color</div>\n              <div class="is-color tab-background-color">@tab-background-color</div>\n              <div class="is-color tab-background-color-active">@tab-background-color-active</div>\n              <div class="is-color tab-border-color">@tab-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color tree-view-background-color">@tree-view-background-color</div>\n              <div class="is-color tree-view-border-color">@tree-view-border-color</div>\n            '], ['\n              <div class="is-color pane-item-background-color">@pane-item-background-color</div>\n              <div class="is-color pane-item-border-color">@pane-item-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color input-background-color">@input-background-color</div>\n              <div class="is-color input-border-color">@input-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color tool-panel-background-color">@tool-panel-background-color</div>\n              <div class="is-color tool-panel-border-color">@tool-panel-border-color</div>\n              <div class="is-color inset-panel-background-color">@inset-panel-background-color</div>\n              <div class="is-color inset-panel-border-color">@inset-panel-border-color</div>\n              <div class="is-color panel-heading-background-color">@panel-heading-background-color</div>\n              <div class="is-color panel-heading-border-color">@panel-heading-border-color</div>\n              <div class="is-color overlay-background-color">@overlay-background-color</div>\n              <div class="is-color overlay-border-color">@overlay-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color button-background-color">@button-background-color</div>\n              <div class="is-color button-background-color-hover">@button-background-color-hover</div>\n              <div class="is-color button-background-color-selected">@button-background-color-selected</div>\n              <div class="is-color button-border-color">@button-border-color</div>\n              <div class="color"></div>\n              <div class="is-color tab-bar-background-color">@tab-bar-background-color</div>\n              <div class="is-color tab-bar-border-color">@tab-bar-border-color</div>\n              <div class="is-color tab-background-color">@tab-background-color</div>\n              <div class="is-color tab-background-color-active">@tab-background-color-active</div>\n              <div class="is-color tab-border-color">@tab-border-color</div>\n              <div class="is-color"></div>\n              <div class="is-color tree-view-background-color">@tree-view-background-color</div>\n              <div class="is-color tree-view-border-color">@tree-view-border-color</div>\n            ']),
    _templateObject5 = _taggedTemplateLiteral(['\n              <div class="is-color ui-site-color-1">@ui-site-color-1</div>\n              <div class="is-color ui-site-color-2">@ui-site-color-2</div>\n              <div class="is-color ui-site-color-3">@ui-site-color-3</div>\n              <div class="is-color ui-site-color-4">@ui-site-color-4</div>\n              <div class="is-color ui-site-color-5">@ui-site-color-5</div>\n            '], ['\n              <div class="is-color ui-site-color-1">@ui-site-color-1</div>\n              <div class="is-color ui-site-color-2">@ui-site-color-2</div>\n              <div class="is-color ui-site-color-3">@ui-site-color-3</div>\n              <div class="is-color ui-site-color-4">@ui-site-color-4</div>\n              <div class="is-color ui-site-color-5">@ui-site-color-5</div>\n            ']),
    _templateObject6 = _taggedTemplateLiteral(['\n              <div class="is-size disclosure-arrow-size">@disclosure-arrow-size</div>\n              <div class="is-size component-padding">@component-padding</div>\n              <div class="is-size component-icon-padding">@component-icon-padding</div>\n              <div class="is-size component-icon-size">@component-icon-size</div>\n              <div class="is-size component-line-height">@component-line-height</div>\n              <div class="is-size tab-height">@tab-height</div>\n              <div class="is-size font-size">@font-size</div>\n            '], ['\n              <div class="is-size disclosure-arrow-size">@disclosure-arrow-size</div>\n              <div class="is-size component-padding">@component-padding</div>\n              <div class="is-size component-icon-padding">@component-icon-padding</div>\n              <div class="is-size component-icon-size">@component-icon-size</div>\n              <div class="is-size component-line-height">@component-line-height</div>\n              <div class="is-size tab-height">@tab-height</div>\n              <div class="is-size font-size">@font-size</div>\n            ']),
    _templateObject7 = _taggedTemplateLiteral(['\n              <div class="is-radius component-border-radius">@component-border-radius</div>\n              <div class="is-font font-family">@font-family</div>\n            '], ['\n              <div class="is-radius component-border-radius">@component-border-radius</div>\n              <div class="is-font font-family">@font-family</div>\n            ']),
    _templateObject8 = _taggedTemplateLiteral(['\n              <span class=\'icon icon-alert native-key-bindings\'>alert</span>\n              <span class=\'icon icon-alignment-align\'>alignment-align</span>\n              <span class=\'icon icon-alignment-aligned-to\'>alignment-aligned-to</span>\n              <span class=\'icon icon-alignment-unalign\'>alignment-unalign</span>\n              <span class=\'icon icon-arrow-down\'>arrow-down</span>\n              <span class=\'icon icon-arrow-left\'>arrow-left</span>\n              <span class=\'icon icon-arrow-right\'>arrow-right</span>\n              <span class=\'icon icon-arrow-small-down\'>arrow-small-down</span>\n              <span class=\'icon icon-arrow-small-left\'>arrow-small-left</span>\n              <span class=\'icon icon-arrow-small-right\'>arrow-small-right</span>\n              <span class=\'icon icon-arrow-small-up\'>arrow-small-up</span>\n              <span class=\'icon icon-arrow-up\'>arrow-up</span>\n              <span class=\'icon icon-beaker\'>beaker</span>\n              <span class=\'icon icon-beer\'>beer</span>\n              <span class=\'icon icon-bell\'>bell</span>\n              <span class=\'icon icon-bold\'>bold</span>\n              <span class=\'icon icon-book\'>book</span>\n              <span class=\'icon icon-bookmark\'>bookmark</span>\n              <span class=\'icon icon-briefcase\'>briefcase</span>\n              <span class=\'icon icon-broadcast\'>broadcast</span>\n              <span class=\'icon icon-browser\'>browser</span>\n              <span class=\'icon icon-bug\'>bug</span>\n              <span class=\'icon icon-calendar\'>calendar</span>\n              <span class=\'icon icon-check\'>check</span>\n              <span class=\'icon icon-checklist\'>checklist</span>\n              <span class=\'icon icon-chevron-down\'>chevron-down</span>\n              <span class=\'icon icon-chevron-left\'>chevron-left</span>\n              <span class=\'icon icon-chevron-right\'>chevron-right</span>\n              <span class=\'icon icon-chevron-up\'>chevron-up</span>\n              <span class=\'icon icon-circle-slash\'>circle-slash</span>\n              <span class=\'icon icon-circuit-board\'>circuit-board</span>\n              <span class=\'icon icon-clippy\'>clippy</span>\n              <span class=\'icon icon-clock\'>clock</span>\n              <span class=\'icon icon-cloud-download\'>cloud-download</span>\n              <span class=\'icon icon-cloud-upload\'>cloud-upload</span>\n              <span class=\'icon icon-code\'>code</span>\n              <span class=\'icon icon-color-mode\'>color-mode</span>\n              <span class=\'icon icon-comment\'>comment</span>\n              <span class=\'icon icon-comment-add\'>comment-add</span>\n              <span class=\'icon icon-comment-discussion\'>comment-discussion</span>\n              <span class=\'icon icon-credit-card\'>credit-card</span>\n              <span class=\'icon icon-dash\'>dash</span>\n              <span class=\'icon icon-dashboard\'>dashboard</span>\n              <span class=\'icon icon-database\'>database</span>\n              <span class=\'icon icon-desktop-download\'>desktop-download</span>\n              <span class=\'icon icon-device-camera\'>device-camera</span>\n              <span class=\'icon icon-device-camera-video\'>device-camera-video</span>\n              <span class=\'icon icon-device-desktop\'>device-desktop</span>\n              <span class=\'icon icon-device-mobile\'>device-mobile</span>\n              <span class=\'icon icon-diff\'>diff</span>\n              <span class=\'icon icon-diff-added\'>diff-added</span>\n              <span class=\'icon icon-diff-ignored\'>diff-ignored</span>\n              <span class=\'icon icon-diff-modified\'>diff-modified</span>\n              <span class=\'icon icon-diff-removed\'>diff-removed</span>\n              <span class=\'icon icon-diff-renamed\'>diff-renamed</span>\n              <span class=\'icon icon-ellipses\'>ellipses</span>\n              <span class=\'icon icon-ellipsis\'>ellipsis</span>\n              <span class=\'icon icon-eye\'>eye</span>\n              <span class=\'icon icon-eye-unwatch\'>eye-unwatch</span>\n              <span class=\'icon icon-eye-watch\'>eye-watch</span>\n              <span class=\'icon icon-file\'>file</span>\n              <span class=\'icon icon-file-add\'>file-add</span>\n              <span class=\'icon icon-file-binary\'>file-binary</span>\n              <span class=\'icon icon-file-code\'>file-code</span>\n              <span class=\'icon icon-file-directory\'>file-directory</span>\n              <span class=\'icon icon-file-directory-create\'>file-directory-create</span>\n              <span class=\'icon icon-file-media\'>file-media</span>\n              <span class=\'icon icon-file-pdf\'>file-pdf</span>\n              <span class=\'icon icon-file-submodule\'>file-submodule</span>\n              <span class=\'icon icon-file-symlink-directory\'>file-symlink-directory</span>\n              <span class=\'icon icon-file-symlink-file\'>file-symlink-file</span>\n              <span class=\'icon icon-file-text\'>file-text</span>\n              <span class=\'icon icon-file-zip\'>file-zip</span>\n              <span class=\'icon icon-flame\'>flame</span>\n              <span class=\'icon icon-fold\'>fold</span>\n              <span class=\'icon icon-gear\'>gear</span>\n              <span class=\'icon icon-gift\'>gift</span>\n              <span class=\'icon icon-gist\'>gist</span>\n              <span class=\'icon icon-gist-fork\'>gist-fork</span>\n              <span class=\'icon icon-gist-new\'>gist-new</span>\n              <span class=\'icon icon-gist-private\'>gist-private</span>\n              <span class=\'icon icon-gist-secret\'>gist-secret</span>\n              <span class=\'icon icon-git-branch\'>git-branch</span>\n              <span class=\'icon icon-git-branch-create\'>git-branch-create</span>\n              <span class=\'icon icon-git-branch-delete\'>git-branch-delete</span>\n              <span class=\'icon icon-git-commit\'>git-commit</span>\n              <span class=\'icon icon-git-compare\'>git-compare</span>\n              <span class=\'icon icon-git-fork-private\'>git-fork-private</span>\n              <span class=\'icon icon-git-merge\'>git-merge</span>\n              <span class=\'icon icon-git-pull-request\'>git-pull-request</span>\n              <span class=\'icon icon-git-pull-request-abandoned\'>git-pull-request-abandoned</span>\n              <span class=\'icon icon-globe\'>globe</span>\n              <span class=\'icon icon-grabber\'>grabber</span>\n              <span class=\'icon icon-graph\'>graph</span>\n              <span class=\'icon icon-heart\'>heart</span>\n              <span class=\'icon icon-history\'>history</span>\n              <span class=\'icon icon-home\'>home</span>\n              <span class=\'icon icon-horizontal-rule\'>horizontal-rule</span>\n              <span class=\'icon icon-hourglass\'>hourglass</span>\n              <span class=\'icon icon-hubot\'>hubot</span>\n              <span class=\'icon icon-inbox\'>inbox</span>\n              <span class=\'icon icon-info\'>info</span>\n              <span class=\'icon icon-issue-closed\'>issue-closed</span>\n              <span class=\'icon icon-issue-opened\'>issue-opened</span>\n              <span class=\'icon icon-issue-reopened\'>issue-reopened</span>\n              <span class=\'icon icon-italic\'>italic</span>\n              <span class=\'icon icon-jersey\'>jersey</span>\n              <span class=\'icon icon-jump-down\'>jump-down</span>\n              <span class=\'icon icon-jump-left\'>jump-left</span>\n              <span class=\'icon icon-jump-right\'>jump-right</span>\n              <span class=\'icon icon-jump-up\'>jump-up</span>\n              <span class=\'icon icon-key\'>key</span>\n              <span class=\'icon icon-keyboard\'>keyboard</span>\n              <span class=\'icon icon-law\'>law</span>\n              <span class=\'icon icon-light-bulb\'>light-bulb</span>\n              <span class=\'icon icon-link\'>link</span>\n              <span class=\'icon icon-link-external\'>link-external</span>\n              <span class=\'icon icon-list-ordered\'>list-ordered</span>\n              <span class=\'icon icon-list-unordered\'>list-unordered</span>\n              <span class=\'icon icon-location\'>location</span>\n              <span class=\'icon icon-lock\'>lock</span>\n              <span class=\'icon icon-log-in\'>log-in</span>\n              <span class=\'icon icon-log-out\'>log-out</span>\n              <span class=\'icon icon-logo-gist\'>logo-gist</span>\n              <span class=\'icon icon-logo-github\'>logo-github</span>\n              <span class=\'icon icon-mail\'>mail</span>\n              <span class=\'icon icon-mail-read\'>mail-read</span>\n              <span class=\'icon icon-mail-reply\'>mail-reply</span>\n              <span class=\'icon icon-mark-github\'>mark-github</span>\n              <span class=\'icon icon-markdown\'>markdown</span>\n              <span class=\'icon icon-megaphone\'>megaphone</span>\n              <span class=\'icon icon-mention\'>mention</span>\n              <span class=\'icon icon-microscope\'>microscope</span>\n              <span class=\'icon icon-milestone\'>milestone</span>\n              <span class=\'icon icon-mirror\'>mirror</span>\n              <span class=\'icon icon-mirror-private\'>mirror-private</span>\n              <span class=\'icon icon-mirror-public\'>mirror-public</span>\n              <span class=\'icon icon-mortar-board\'>mortar-board</span>\n              <span class=\'icon icon-move-down\'>move-down</span>\n              <span class=\'icon icon-move-left\'>move-left</span>\n              <span class=\'icon icon-move-right\'>move-right</span>\n              <span class=\'icon icon-move-up\'>move-up</span>\n              <span class=\'icon icon-mute\'>mute</span>\n              <span class=\'icon icon-no-newline\'>no-newline</span>\n              <span class=\'icon icon-octoface\'>octoface</span>\n              <span class=\'icon icon-organization\'>organization</span>\n              <span class=\'icon icon-package\'>package</span>\n              <span class=\'icon icon-paintcan\'>paintcan</span>\n              <span class=\'icon icon-pencil\'>pencil</span>\n              <span class=\'icon icon-person\'>person</span>\n              <span class=\'icon icon-person-add\'>person-add</span>\n              <span class=\'icon icon-person-follow\'>person-follow</span>\n              <span class=\'icon icon-pin\'>pin</span>\n              <span class=\'icon icon-playback-fast-forward\'>playback-fast-forward</span>\n              <span class=\'icon icon-playback-pause\'>playback-pause</span>\n              <span class=\'icon icon-playback-play\'>playback-play</span>\n              <span class=\'icon icon-playback-rewind\'>playback-rewind</span>\n              <span class=\'icon icon-plug\'>plug</span>\n              <span class=\'icon icon-plus-small\'>plus-small</span>\n              <span class=\'icon icon-plus\'>plus</span>\n              <span class=\'icon icon-podium\'>podium</span>\n              <span class=\'icon icon-primitive-dot\'>primitive-dot</span>\n              <span class=\'icon icon-primitive-square\'>primitive-square</span>\n              <span class=\'icon icon-pulse\'>pulse</span>\n              <span class=\'icon icon-puzzle\'>puzzle</span>\n              <span class=\'icon icon-question\'>question</span>\n              <span class=\'icon icon-quote\'>quote</span>\n              <span class=\'icon icon-radio-tower\'>radio-tower</span>\n              <span class=\'icon icon-remove-close\'>remove-close</span>\n              <span class=\'icon icon-reply\'>reply</span>\n              <span class=\'icon icon-repo\'>repo</span>\n              <span class=\'icon icon-repo-clone\'>repo-clone</span>\n              <span class=\'icon icon-repo-create\'>repo-create</span>\n              <span class=\'icon icon-repo-delete\'>repo-delete</span>\n              <span class=\'icon icon-repo-force-push\'>repo-force-push</span>\n              <span class=\'icon icon-repo-forked\'>repo-forked</span>\n              <span class=\'icon icon-repo-pull\'>repo-pull</span>\n              <span class=\'icon icon-repo-push\'>repo-push</span>\n              <span class=\'icon icon-repo-sync\'>repo-sync</span>\n              <span class=\'icon icon-rocket\'>rocket</span>\n              <span class=\'icon icon-rss\'>rss</span>\n              <span class=\'icon icon-ruby\'>ruby</span>\n              <span class=\'icon icon-screen-full\'>screen-full</span>\n              <span class=\'icon icon-screen-normal\'>screen-normal</span>\n              <span class=\'icon icon-search\'>search</span>\n              <span class=\'icon icon-search-save\'>search-save</span>\n              <span class=\'icon icon-server\'>server</span>\n              <span class=\'icon icon-settings\'>settings</span>\n              <span class=\'icon icon-shield\'>shield</span>\n              <span class=\'icon icon-sign-in\'>sign-in</span>\n              <span class=\'icon icon-sign-out\'>sign-out</span>\n              <span class=\'icon icon-smiley\'>smiley</span>\n              <span class=\'icon icon-split\'>split</span>\n              <span class=\'icon icon-squirrel\'>squirrel</span>\n              <span class=\'icon icon-star\'>star</span>\n              <span class=\'icon icon-star-add\'>star-add</span>\n              <span class=\'icon icon-star-delete\'>star-delete</span>\n              <span class=\'icon icon-steps\'>steps</span>\n              <span class=\'icon icon-stop\'>stop</span>\n              <span class=\'icon icon-sync\'>sync</span>\n              <span class=\'icon icon-tag\'>tag</span>\n              <span class=\'icon icon-tag-add\'>tag-add</span>\n              <span class=\'icon icon-tag-remove\'>tag-remove</span>\n              <span class=\'icon icon-tasklist\'>tasklist</span>\n              <span class=\'icon icon-telescope\'>telescope</span>\n              <span class=\'icon icon-terminal\'>terminal</span>\n              <span class=\'icon icon-text-size\'>text-size</span>\n              <span class=\'icon icon-three-bars\'>three-bars</span>\n              <span class=\'icon icon-thumbsdown\'>thumbsdown</span>\n              <span class=\'icon icon-thumbsup\'>thumbsup</span>\n              <span class=\'icon icon-tools\'>tools</span>\n              <span class=\'icon icon-trashcan\'>trashcan</span>\n              <span class=\'icon icon-triangle-down\'>triangle-down</span>\n              <span class=\'icon icon-triangle-left\'>triangle-left</span>\n              <span class=\'icon icon-triangle-right\'>triangle-right</span>\n              <span class=\'icon icon-triangle-up\'>triangle-up</span>\n              <span class=\'icon icon-unfold\'>unfold</span>\n              <span class=\'icon icon-unmute\'>unmute</span>\n              <span class=\'icon icon-unverified\'>unverified</span>\n              <span class=\'icon icon-verified\'>verified</span>\n              <span class=\'icon icon-versions\'>versions</span>\n              <span class=\'icon icon-watch\'>watch</span>\n              <span class=\'icon icon-x\'>x</span>\n              <span class=\'icon icon-zap\'>zap</span>\n            '], ['\n              <span class=\'icon icon-alert native-key-bindings\'>alert</span>\n              <span class=\'icon icon-alignment-align\'>alignment-align</span>\n              <span class=\'icon icon-alignment-aligned-to\'>alignment-aligned-to</span>\n              <span class=\'icon icon-alignment-unalign\'>alignment-unalign</span>\n              <span class=\'icon icon-arrow-down\'>arrow-down</span>\n              <span class=\'icon icon-arrow-left\'>arrow-left</span>\n              <span class=\'icon icon-arrow-right\'>arrow-right</span>\n              <span class=\'icon icon-arrow-small-down\'>arrow-small-down</span>\n              <span class=\'icon icon-arrow-small-left\'>arrow-small-left</span>\n              <span class=\'icon icon-arrow-small-right\'>arrow-small-right</span>\n              <span class=\'icon icon-arrow-small-up\'>arrow-small-up</span>\n              <span class=\'icon icon-arrow-up\'>arrow-up</span>\n              <span class=\'icon icon-beaker\'>beaker</span>\n              <span class=\'icon icon-beer\'>beer</span>\n              <span class=\'icon icon-bell\'>bell</span>\n              <span class=\'icon icon-bold\'>bold</span>\n              <span class=\'icon icon-book\'>book</span>\n              <span class=\'icon icon-bookmark\'>bookmark</span>\n              <span class=\'icon icon-briefcase\'>briefcase</span>\n              <span class=\'icon icon-broadcast\'>broadcast</span>\n              <span class=\'icon icon-browser\'>browser</span>\n              <span class=\'icon icon-bug\'>bug</span>\n              <span class=\'icon icon-calendar\'>calendar</span>\n              <span class=\'icon icon-check\'>check</span>\n              <span class=\'icon icon-checklist\'>checklist</span>\n              <span class=\'icon icon-chevron-down\'>chevron-down</span>\n              <span class=\'icon icon-chevron-left\'>chevron-left</span>\n              <span class=\'icon icon-chevron-right\'>chevron-right</span>\n              <span class=\'icon icon-chevron-up\'>chevron-up</span>\n              <span class=\'icon icon-circle-slash\'>circle-slash</span>\n              <span class=\'icon icon-circuit-board\'>circuit-board</span>\n              <span class=\'icon icon-clippy\'>clippy</span>\n              <span class=\'icon icon-clock\'>clock</span>\n              <span class=\'icon icon-cloud-download\'>cloud-download</span>\n              <span class=\'icon icon-cloud-upload\'>cloud-upload</span>\n              <span class=\'icon icon-code\'>code</span>\n              <span class=\'icon icon-color-mode\'>color-mode</span>\n              <span class=\'icon icon-comment\'>comment</span>\n              <span class=\'icon icon-comment-add\'>comment-add</span>\n              <span class=\'icon icon-comment-discussion\'>comment-discussion</span>\n              <span class=\'icon icon-credit-card\'>credit-card</span>\n              <span class=\'icon icon-dash\'>dash</span>\n              <span class=\'icon icon-dashboard\'>dashboard</span>\n              <span class=\'icon icon-database\'>database</span>\n              <span class=\'icon icon-desktop-download\'>desktop-download</span>\n              <span class=\'icon icon-device-camera\'>device-camera</span>\n              <span class=\'icon icon-device-camera-video\'>device-camera-video</span>\n              <span class=\'icon icon-device-desktop\'>device-desktop</span>\n              <span class=\'icon icon-device-mobile\'>device-mobile</span>\n              <span class=\'icon icon-diff\'>diff</span>\n              <span class=\'icon icon-diff-added\'>diff-added</span>\n              <span class=\'icon icon-diff-ignored\'>diff-ignored</span>\n              <span class=\'icon icon-diff-modified\'>diff-modified</span>\n              <span class=\'icon icon-diff-removed\'>diff-removed</span>\n              <span class=\'icon icon-diff-renamed\'>diff-renamed</span>\n              <span class=\'icon icon-ellipses\'>ellipses</span>\n              <span class=\'icon icon-ellipsis\'>ellipsis</span>\n              <span class=\'icon icon-eye\'>eye</span>\n              <span class=\'icon icon-eye-unwatch\'>eye-unwatch</span>\n              <span class=\'icon icon-eye-watch\'>eye-watch</span>\n              <span class=\'icon icon-file\'>file</span>\n              <span class=\'icon icon-file-add\'>file-add</span>\n              <span class=\'icon icon-file-binary\'>file-binary</span>\n              <span class=\'icon icon-file-code\'>file-code</span>\n              <span class=\'icon icon-file-directory\'>file-directory</span>\n              <span class=\'icon icon-file-directory-create\'>file-directory-create</span>\n              <span class=\'icon icon-file-media\'>file-media</span>\n              <span class=\'icon icon-file-pdf\'>file-pdf</span>\n              <span class=\'icon icon-file-submodule\'>file-submodule</span>\n              <span class=\'icon icon-file-symlink-directory\'>file-symlink-directory</span>\n              <span class=\'icon icon-file-symlink-file\'>file-symlink-file</span>\n              <span class=\'icon icon-file-text\'>file-text</span>\n              <span class=\'icon icon-file-zip\'>file-zip</span>\n              <span class=\'icon icon-flame\'>flame</span>\n              <span class=\'icon icon-fold\'>fold</span>\n              <span class=\'icon icon-gear\'>gear</span>\n              <span class=\'icon icon-gift\'>gift</span>\n              <span class=\'icon icon-gist\'>gist</span>\n              <span class=\'icon icon-gist-fork\'>gist-fork</span>\n              <span class=\'icon icon-gist-new\'>gist-new</span>\n              <span class=\'icon icon-gist-private\'>gist-private</span>\n              <span class=\'icon icon-gist-secret\'>gist-secret</span>\n              <span class=\'icon icon-git-branch\'>git-branch</span>\n              <span class=\'icon icon-git-branch-create\'>git-branch-create</span>\n              <span class=\'icon icon-git-branch-delete\'>git-branch-delete</span>\n              <span class=\'icon icon-git-commit\'>git-commit</span>\n              <span class=\'icon icon-git-compare\'>git-compare</span>\n              <span class=\'icon icon-git-fork-private\'>git-fork-private</span>\n              <span class=\'icon icon-git-merge\'>git-merge</span>\n              <span class=\'icon icon-git-pull-request\'>git-pull-request</span>\n              <span class=\'icon icon-git-pull-request-abandoned\'>git-pull-request-abandoned</span>\n              <span class=\'icon icon-globe\'>globe</span>\n              <span class=\'icon icon-grabber\'>grabber</span>\n              <span class=\'icon icon-graph\'>graph</span>\n              <span class=\'icon icon-heart\'>heart</span>\n              <span class=\'icon icon-history\'>history</span>\n              <span class=\'icon icon-home\'>home</span>\n              <span class=\'icon icon-horizontal-rule\'>horizontal-rule</span>\n              <span class=\'icon icon-hourglass\'>hourglass</span>\n              <span class=\'icon icon-hubot\'>hubot</span>\n              <span class=\'icon icon-inbox\'>inbox</span>\n              <span class=\'icon icon-info\'>info</span>\n              <span class=\'icon icon-issue-closed\'>issue-closed</span>\n              <span class=\'icon icon-issue-opened\'>issue-opened</span>\n              <span class=\'icon icon-issue-reopened\'>issue-reopened</span>\n              <span class=\'icon icon-italic\'>italic</span>\n              <span class=\'icon icon-jersey\'>jersey</span>\n              <span class=\'icon icon-jump-down\'>jump-down</span>\n              <span class=\'icon icon-jump-left\'>jump-left</span>\n              <span class=\'icon icon-jump-right\'>jump-right</span>\n              <span class=\'icon icon-jump-up\'>jump-up</span>\n              <span class=\'icon icon-key\'>key</span>\n              <span class=\'icon icon-keyboard\'>keyboard</span>\n              <span class=\'icon icon-law\'>law</span>\n              <span class=\'icon icon-light-bulb\'>light-bulb</span>\n              <span class=\'icon icon-link\'>link</span>\n              <span class=\'icon icon-link-external\'>link-external</span>\n              <span class=\'icon icon-list-ordered\'>list-ordered</span>\n              <span class=\'icon icon-list-unordered\'>list-unordered</span>\n              <span class=\'icon icon-location\'>location</span>\n              <span class=\'icon icon-lock\'>lock</span>\n              <span class=\'icon icon-log-in\'>log-in</span>\n              <span class=\'icon icon-log-out\'>log-out</span>\n              <span class=\'icon icon-logo-gist\'>logo-gist</span>\n              <span class=\'icon icon-logo-github\'>logo-github</span>\n              <span class=\'icon icon-mail\'>mail</span>\n              <span class=\'icon icon-mail-read\'>mail-read</span>\n              <span class=\'icon icon-mail-reply\'>mail-reply</span>\n              <span class=\'icon icon-mark-github\'>mark-github</span>\n              <span class=\'icon icon-markdown\'>markdown</span>\n              <span class=\'icon icon-megaphone\'>megaphone</span>\n              <span class=\'icon icon-mention\'>mention</span>\n              <span class=\'icon icon-microscope\'>microscope</span>\n              <span class=\'icon icon-milestone\'>milestone</span>\n              <span class=\'icon icon-mirror\'>mirror</span>\n              <span class=\'icon icon-mirror-private\'>mirror-private</span>\n              <span class=\'icon icon-mirror-public\'>mirror-public</span>\n              <span class=\'icon icon-mortar-board\'>mortar-board</span>\n              <span class=\'icon icon-move-down\'>move-down</span>\n              <span class=\'icon icon-move-left\'>move-left</span>\n              <span class=\'icon icon-move-right\'>move-right</span>\n              <span class=\'icon icon-move-up\'>move-up</span>\n              <span class=\'icon icon-mute\'>mute</span>\n              <span class=\'icon icon-no-newline\'>no-newline</span>\n              <span class=\'icon icon-octoface\'>octoface</span>\n              <span class=\'icon icon-organization\'>organization</span>\n              <span class=\'icon icon-package\'>package</span>\n              <span class=\'icon icon-paintcan\'>paintcan</span>\n              <span class=\'icon icon-pencil\'>pencil</span>\n              <span class=\'icon icon-person\'>person</span>\n              <span class=\'icon icon-person-add\'>person-add</span>\n              <span class=\'icon icon-person-follow\'>person-follow</span>\n              <span class=\'icon icon-pin\'>pin</span>\n              <span class=\'icon icon-playback-fast-forward\'>playback-fast-forward</span>\n              <span class=\'icon icon-playback-pause\'>playback-pause</span>\n              <span class=\'icon icon-playback-play\'>playback-play</span>\n              <span class=\'icon icon-playback-rewind\'>playback-rewind</span>\n              <span class=\'icon icon-plug\'>plug</span>\n              <span class=\'icon icon-plus-small\'>plus-small</span>\n              <span class=\'icon icon-plus\'>plus</span>\n              <span class=\'icon icon-podium\'>podium</span>\n              <span class=\'icon icon-primitive-dot\'>primitive-dot</span>\n              <span class=\'icon icon-primitive-square\'>primitive-square</span>\n              <span class=\'icon icon-pulse\'>pulse</span>\n              <span class=\'icon icon-puzzle\'>puzzle</span>\n              <span class=\'icon icon-question\'>question</span>\n              <span class=\'icon icon-quote\'>quote</span>\n              <span class=\'icon icon-radio-tower\'>radio-tower</span>\n              <span class=\'icon icon-remove-close\'>remove-close</span>\n              <span class=\'icon icon-reply\'>reply</span>\n              <span class=\'icon icon-repo\'>repo</span>\n              <span class=\'icon icon-repo-clone\'>repo-clone</span>\n              <span class=\'icon icon-repo-create\'>repo-create</span>\n              <span class=\'icon icon-repo-delete\'>repo-delete</span>\n              <span class=\'icon icon-repo-force-push\'>repo-force-push</span>\n              <span class=\'icon icon-repo-forked\'>repo-forked</span>\n              <span class=\'icon icon-repo-pull\'>repo-pull</span>\n              <span class=\'icon icon-repo-push\'>repo-push</span>\n              <span class=\'icon icon-repo-sync\'>repo-sync</span>\n              <span class=\'icon icon-rocket\'>rocket</span>\n              <span class=\'icon icon-rss\'>rss</span>\n              <span class=\'icon icon-ruby\'>ruby</span>\n              <span class=\'icon icon-screen-full\'>screen-full</span>\n              <span class=\'icon icon-screen-normal\'>screen-normal</span>\n              <span class=\'icon icon-search\'>search</span>\n              <span class=\'icon icon-search-save\'>search-save</span>\n              <span class=\'icon icon-server\'>server</span>\n              <span class=\'icon icon-settings\'>settings</span>\n              <span class=\'icon icon-shield\'>shield</span>\n              <span class=\'icon icon-sign-in\'>sign-in</span>\n              <span class=\'icon icon-sign-out\'>sign-out</span>\n              <span class=\'icon icon-smiley\'>smiley</span>\n              <span class=\'icon icon-split\'>split</span>\n              <span class=\'icon icon-squirrel\'>squirrel</span>\n              <span class=\'icon icon-star\'>star</span>\n              <span class=\'icon icon-star-add\'>star-add</span>\n              <span class=\'icon icon-star-delete\'>star-delete</span>\n              <span class=\'icon icon-steps\'>steps</span>\n              <span class=\'icon icon-stop\'>stop</span>\n              <span class=\'icon icon-sync\'>sync</span>\n              <span class=\'icon icon-tag\'>tag</span>\n              <span class=\'icon icon-tag-add\'>tag-add</span>\n              <span class=\'icon icon-tag-remove\'>tag-remove</span>\n              <span class=\'icon icon-tasklist\'>tasklist</span>\n              <span class=\'icon icon-telescope\'>telescope</span>\n              <span class=\'icon icon-terminal\'>terminal</span>\n              <span class=\'icon icon-text-size\'>text-size</span>\n              <span class=\'icon icon-three-bars\'>three-bars</span>\n              <span class=\'icon icon-thumbsdown\'>thumbsdown</span>\n              <span class=\'icon icon-thumbsup\'>thumbsup</span>\n              <span class=\'icon icon-tools\'>tools</span>\n              <span class=\'icon icon-trashcan\'>trashcan</span>\n              <span class=\'icon icon-triangle-down\'>triangle-down</span>\n              <span class=\'icon icon-triangle-left\'>triangle-left</span>\n              <span class=\'icon icon-triangle-right\'>triangle-right</span>\n              <span class=\'icon icon-triangle-up\'>triangle-up</span>\n              <span class=\'icon icon-unfold\'>unfold</span>\n              <span class=\'icon icon-unmute\'>unmute</span>\n              <span class=\'icon icon-unverified\'>unverified</span>\n              <span class=\'icon icon-verified\'>verified</span>\n              <span class=\'icon icon-versions\'>versions</span>\n              <span class=\'icon icon-watch\'>watch</span>\n              <span class=\'icon icon-x\'>x</span>\n              <span class=\'icon icon-zap\'>zap</span>\n            ']),
    _templateObject9 = _taggedTemplateLiteral(['\n              <input class=\'input-text\' type=\'text\' placeholder=\'Text\'>\n              <input class=\'input-search\' type=\'search\' placeholder=\'Search\'>\n              <textarea class=\'input-textarea\' placeholder=\'Text Area\'></textarea>\n            '], ['\n              <input class=\'input-text\' type=\'text\' placeholder=\'Text\'>\n              <input class=\'input-search\' type=\'search\' placeholder=\'Search\'>\n              <textarea class=\'input-textarea\' placeholder=\'Text Area\'></textarea>\n            ']),
    _templateObject10 = _taggedTemplateLiteral(['\n              <label class=\'input-label\'><input class=\'input-radio\' type=\'radio\' name=\'radio\'> Radio</label>\n              <label class=\'input-label\'><input class=\'input-radio\' type=\'radio\' name=\'radio\' checked> Radio</label>\n              <label class=\'input-label\'><input class=\'input-checkbox\' type=\'checkbox\' checked> Checkbox</label>\n              <label class=\'input-label\'><input class=\'input-toggle\' type=\'checkbox\' checked> Toggle</label>\n              <input class=\'input-range\' type=\'range\'>\n            '], ['\n              <label class=\'input-label\'><input class=\'input-radio\' type=\'radio\' name=\'radio\'> Radio</label>\n              <label class=\'input-label\'><input class=\'input-radio\' type=\'radio\' name=\'radio\' checked> Radio</label>\n              <label class=\'input-label\'><input class=\'input-checkbox\' type=\'checkbox\' checked> Checkbox</label>\n              <label class=\'input-label\'><input class=\'input-toggle\' type=\'checkbox\' checked> Toggle</label>\n              <input class=\'input-range\' type=\'range\'>\n            ']),
    _templateObject11 = _taggedTemplateLiteral(['\n              <input class=\'input-color\' type=\'color\' value=\'#FF85FF\'>\n              <input class=\'input-number\' type=\'number\' min=\'1\' max=\'10\' placeholder=\'1-10\'>\n              <select class=\'input-select\'><option>Option 1</option><option>Option 2</option><option>Option 3</option></select>\n            '], ['\n              <input class=\'input-color\' type=\'color\' value=\'#FF85FF\'>\n              <input class=\'input-number\' type=\'number\' min=\'1\' max=\'10\' placeholder=\'1-10\'>\n              <select class=\'input-select\'><option>Option 1</option><option>Option 2</option><option>Option 3</option></select>\n            ']),
    _templateObject12 = _taggedTemplateLiteral(['\n              <div class=\'text-smaller\'>Smaller text</div>\n              <div>Normal text</div>\n              <div class=\'text-subtle\'>Subtle text</div>\n              <div class=\'text-highlight\'>Highlighted text</div>\n              <div class=\'text-info\'>Info text</div>\n              <div class=\'text-success\'>Success text</div>\n              <div class=\'text-warning\'>Warning text</div>\n              <div class=\'text-error\'>Error text</div>\n            '], ['\n              <div class=\'text-smaller\'>Smaller text</div>\n              <div>Normal text</div>\n              <div class=\'text-subtle\'>Subtle text</div>\n              <div class=\'text-highlight\'>Highlighted text</div>\n              <div class=\'text-info\'>Info text</div>\n              <div class=\'text-success\'>Success text</div>\n              <div class=\'text-warning\'>Warning text</div>\n              <div class=\'text-error\'>Error text</div>\n            ']),
    _templateObject13 = _taggedTemplateLiteral(['\n              <span class=\'inline-block\'>Normal</span>\n              <span class=\'inline-block highlight\'>Highlighted</span>\n              <span class=\'inline-block highlight-info\'>Info</span>\n              <span class=\'inline-block highlight-success\'>Success</span>\n              <span class=\'inline-block highlight-warning\'>Warning</span>\n              <span class=\'inline-block highlight-error\'>Error</span>\n            '], ['\n              <span class=\'inline-block\'>Normal</span>\n              <span class=\'inline-block highlight\'>Highlighted</span>\n              <span class=\'inline-block highlight-info\'>Info</span>\n              <span class=\'inline-block highlight-success\'>Success</span>\n              <span class=\'inline-block highlight-warning\'>Warning</span>\n              <span class=\'inline-block highlight-error\'>Error</span>\n            ']),
    _templateObject14 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <label>You might want to type something here.</label>\n                <atom-text-editor mini>Something you typed...</atom-text-editor>\n              </div>\n              <div class=\'block\'>\n                <label class=\'icon icon-file-directory\'>Another field with an icon</label>\n                <atom-text-editor mini>Something else you typed...</atom-text-editor>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn\'>Do it</button>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <label>You might want to type something here.</label>\n                <atom-text-editor mini>Something you typed...</atom-text-editor>\n              </div>\n              <div class=\'block\'>\n                <label class=\'icon icon-file-directory\'>Another field with an icon</label>\n                <atom-text-editor mini>Something else you typed...</atom-text-editor>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn\'>Do it</button>\n              </div>\n            ']),
    _templateObject15 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <button class=\'inline-block btn\'>Do it</button>\n                <button class=\'inline-block btn\'>Another</button>\n                <button class=\'inline-block btn\'>OMG again</button>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <button class=\'inline-block btn\'>Do it</button>\n                <button class=\'inline-block btn\'>Another</button>\n                <button class=\'inline-block btn\'>OMG again</button>\n              </div>\n            ']),
    _templateObject16 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <button class=\'inline-block-tight btn\'>Do it</button>\n                <button class=\'inline-block-tight btn\'>Another</button>\n                <button class=\'inline-block-tight btn\'>OMG again</button>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <button class=\'inline-block-tight btn\'>Do it</button>\n                <button class=\'inline-block-tight btn\'>Another</button>\n                <button class=\'inline-block-tight btn\'>OMG again</button>\n              </div>\n            ']),
    _templateObject17 = _taggedTemplateLiteral(['\n              <div class=\'status-ignored\'>Ignored</div>\n              <div class=\'status-added\'>Added</div>\n              <div class=\'status-modified\'>Modified</div>\n              <div class=\'status-removed\'>Removed</div>\n              <div class=\'status-renamed\'>Renamed</div>\n            '], ['\n              <div class=\'status-ignored\'>Ignored</div>\n              <div class=\'status-added\'>Added</div>\n              <div class=\'status-modified\'>Modified</div>\n              <div class=\'status-removed\'>Removed</div>\n              <div class=\'status-renamed\'>Renamed</div>\n            ']),
    _templateObject18 = _taggedTemplateLiteral(['\n              <span class=\'inline-block status-ignored icon icon-diff-ignored\'></span>\n              <span class=\'inline-block status-added icon icon-diff-added\'></span>\n              <span class=\'inline-block status-modified icon icon-diff-modified\'></span>\n              <span class=\'inline-block status-removed icon icon-diff-removed\'></span>\n              <span class=\'inline-block status-renamed icon icon-diff-renamed\'></span>\n            '], ['\n              <span class=\'inline-block status-ignored icon icon-diff-ignored\'></span>\n              <span class=\'inline-block status-added icon icon-diff-added\'></span>\n              <span class=\'inline-block status-modified icon icon-diff-modified\'></span>\n              <span class=\'inline-block status-removed icon icon-diff-removed\'></span>\n              <span class=\'inline-block status-renamed icon icon-diff-renamed\'></span>\n            ']),
    _templateObject19 = _taggedTemplateLiteral(['\n              <div class=\'block ui-site-1\'></div>\n              <div class=\'block ui-site-2\'></div>\n              <div class=\'block ui-site-3\'></div>\n              <div class=\'block ui-site-4\'></div>\n              <div class=\'block ui-site-5\'></div>\n            '], ['\n              <div class=\'block ui-site-1\'></div>\n              <div class=\'block ui-site-2\'></div>\n              <div class=\'block ui-site-3\'></div>\n              <div class=\'block ui-site-4\'></div>\n              <div class=\'block ui-site-5\'></div>\n            ']),
    _templateObject20 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <span class=\'badge\'>0</span>\n                <span class=\'badge\'>8</span>\n                <span class=\'badge\'>27</span>\n                <span class=\'badge\'>450</span>\n                <span class=\'badge\'>2869</span>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <span class=\'badge\'>0</span>\n                <span class=\'badge\'>8</span>\n                <span class=\'badge\'>27</span>\n                <span class=\'badge\'>450</span>\n                <span class=\'badge\'>2869</span>\n              </div>\n            ']),
    _templateObject21 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <span class=\'badge badge-info\'>78</span>\n                <span class=\'badge badge-success\'>3</span>\n                <span class=\'badge badge-warning\'>14</span>\n                <span class=\'badge badge-error\'>1845</span>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <span class=\'badge badge-info\'>78</span>\n                <span class=\'badge badge-success\'>3</span>\n                <span class=\'badge badge-warning\'>14</span>\n                <span class=\'badge badge-error\'>1845</span>\n              </div>\n            ']),
    _templateObject22 = _taggedTemplateLiteral(['\n              <div class=\'block\'>Large <span class=\'badge badge-large\'>8</span></div>\n              <div class=\'block\'>Medium <span class=\'badge badge-medium\'>2</span></div>\n              <div class=\'block\'>Small <span class=\'badge badge-small\'>7</span></div>\n            '], ['\n              <div class=\'block\'>Large <span class=\'badge badge-large\'>8</span></div>\n              <div class=\'block\'>Medium <span class=\'badge badge-medium\'>2</span></div>\n              <div class=\'block\'>Small <span class=\'badge badge-small\'>7</span></div>\n            ']),
    _templateObject23 = _taggedTemplateLiteral(['\n              <h1 class=\'block\'>Heading <span class=\'badge badge-flexible\'>1</span></h1>\n              <h2 class=\'block\'>Heading <span class=\'badge badge-flexible\'>2</span></h2>\n              <h3 class=\'block\'>Heading <span class=\'badge badge-flexible\'>3</span></h3>\n            '], ['\n              <h1 class=\'block\'>Heading <span class=\'badge badge-flexible\'>1</span></h1>\n              <h2 class=\'block\'>Heading <span class=\'badge badge-flexible\'>2</span></h2>\n              <h3 class=\'block\'>Heading <span class=\'badge badge-flexible\'>3</span></h3>\n            ']),
    _templateObject24 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <span class=\'badge icon icon-gear\'>4</span>\n                <span class=\'badge badge-info icon icon-cloud-download\'>13</span>\n                <span class=\'badge badge-success icon icon-octoface\'>5</span>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <span class=\'badge icon icon-gear\'>4</span>\n                <span class=\'badge badge-info icon icon-cloud-download\'>13</span>\n                <span class=\'badge badge-success icon icon-octoface\'>5</span>\n              </div>\n            ']),
    _templateObject25 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <button class=\'btn\'>Button</button>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn btn-xs\'>Extra Small Button</button>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn btn-sm\'>Small Button</button>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn btn-lg\'>Large Button</button>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <button class=\'btn\'>Button</button>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn btn-xs\'>Extra Small Button</button>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn btn-sm\'>Small Button</button>\n              </div>\n              <div class=\'block\'>\n                <button class=\'btn btn-lg\'>Large Button</button>\n              </div>\n            ']),
    _templateObject26 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <button class=\'btn btn-primary inline-block-tight\'>Primary</button>\n                <button class=\'btn btn-primary selected inline-block-tight\'>Selected Primary</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-info inline-block-tight\'>Info</button>\n                <button class=\'btn btn-info selected inline-block-tight\'>Selected Info</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-success inline-block-tight\'>Success</button>\n                <button class=\'btn btn-success selected inline-block-tight\'>Selected Success</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-warning inline-block-tight\'>Warning</button>\n                <button class=\'btn btn-warning selected inline-block-tight\'>Selected Warning</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-error inline-block-tight\'>Error</button>\n                <button class=\'btn btn-error selected inline-block-tight\'>Selected Error</button>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <button class=\'btn btn-primary inline-block-tight\'>Primary</button>\n                <button class=\'btn btn-primary selected inline-block-tight\'>Selected Primary</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-info inline-block-tight\'>Info</button>\n                <button class=\'btn btn-info selected inline-block-tight\'>Selected Info</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-success inline-block-tight\'>Success</button>\n                <button class=\'btn btn-success selected inline-block-tight\'>Selected Success</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-warning inline-block-tight\'>Warning</button>\n                <button class=\'btn btn-warning selected inline-block-tight\'>Selected Warning</button>\n              </div>\n\n              <div class=\'block\'>\n                <button class=\'btn btn-error inline-block-tight\'>Error</button>\n                <button class=\'btn btn-error selected inline-block-tight\'>Selected Error</button>\n              </div>\n            ']),
    _templateObject27 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <button class=\'btn icon icon-gear inline-block-tight\'>Settings</button>\n                <button class=\'btn btn-primary icon icon-cloud-download inline-block-tight\'>Install</button>\n                <button class=\'btn btn-error icon icon-octoface inline-block-tight\'>Danger</button>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <button class=\'btn icon icon-gear inline-block-tight\'>Settings</button>\n                <button class=\'btn btn-primary icon icon-cloud-download inline-block-tight\'>Install</button>\n                <button class=\'btn btn-error icon icon-octoface inline-block-tight\'>Danger</button>\n              </div>\n            ']),
    _templateObject28 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <div>Normal size</div>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div>Extra Small</div>\n                <div class=\'btn-group btn-group-xs\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div>Small</div>\n                <div class=\'btn-group btn-group-sm\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div>Large</div>\n                <div class=\'btn-group btn-group-lg\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <div>Normal size</div>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div>Extra Small</div>\n                <div class=\'btn-group btn-group-xs\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div>Small</div>\n                <div class=\'btn-group btn-group-sm\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div>Large</div>\n                <div class=\'btn-group btn-group-lg\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n            ']),
    _templateObject29 = _taggedTemplateLiteral(['\n              <div class=\'btn-toolbar\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>Four</button>\n                  <button class=\'btn\'>Five</button>\n                </div>\n\n                <button class=\'btn\'>Six</button>\n                <button class=\'btn\'>Seven</button>\n              </div>\n            '], ['\n              <div class=\'btn-toolbar\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>Four</button>\n                  <button class=\'btn\'>Five</button>\n                </div>\n\n                <button class=\'btn\'>Six</button>\n                <button class=\'btn\'>Seven</button>\n              </div>\n            ']),
    _templateObject30 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn selected\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn selected\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn selected\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn selected\'>One</button>\n                  <button class=\'btn selected\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn selected\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn selected\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn\'>One</button>\n                  <button class=\'btn\'>Two</button>\n                  <button class=\'btn selected\'>Three</button>\n                </div>\n              </div>\n\n              <div class=\'block\'>\n                <div class=\'btn-group\'>\n                  <button class=\'btn selected\'>One</button>\n                  <button class=\'btn selected\'>Two</button>\n                  <button class=\'btn\'>Three</button>\n                </div>\n              </div>\n            ']),
    _templateObject31 = _taggedTemplateLiteral(['\n              <atom-panel>\n                Some content\n              </atom-panel>\n            '], ['\n              <atom-panel>\n                Some content\n              </atom-panel>\n            ']),
    _templateObject32 = _taggedTemplateLiteral(['\n              <atom-panel class=\'padded\'>\n                <div class="inset-panel padded">Some inset content</div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'padded\'>\n                <div class="inset-panel padded">Some inset content</div>\n              </atom-panel>\n            ']),
    _templateObject33 = _taggedTemplateLiteral(['\n              <atom-panel class=\'padded\'>\n                <div class="inset-panel">\n                  <div class="panel-heading">An inset-panel heading</div>\n                  <div class="panel-body padded">Some Content</div>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'padded\'>\n                <div class="inset-panel">\n                  <div class="panel-heading">An inset-panel heading</div>\n                  <div class="panel-body padded">Some Content</div>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject34 = _taggedTemplateLiteral(['\n              <ul class=\'list-group\'>\n                <li class=\'list-item\'>Normal item</li>\n                <li class=\'list-item selected\'>This is the Selected item</li>\n                <li class=\'list-item text-subtle\'>Subtle</li>\n                <li class=\'list-item text-info\'>Info</li>\n                <li class=\'list-item text-success\'>Success</li>\n                <li class=\'list-item text-warning\'>Warning</li>\n                <li class=\'list-item text-error\'>Error</li>\n              </ul>\n            '], ['\n              <ul class=\'list-group\'>\n                <li class=\'list-item\'>Normal item</li>\n                <li class=\'list-item selected\'>This is the Selected item</li>\n                <li class=\'list-item text-subtle\'>Subtle</li>\n                <li class=\'list-item text-info\'>Info</li>\n                <li class=\'list-item text-success\'>Success</li>\n                <li class=\'list-item text-warning\'>Warning</li>\n                <li class=\'list-item text-error\'>Error</li>\n              </ul>\n            ']),
    _templateObject35 = _taggedTemplateLiteral(['\n              <ul class=\'list-group\'>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-directory\'>Using a span with an icon</span>\n                </li>\n                <li class=\'list-item\'>\n                  <i class=\'icon icon-file-directory\'></i>\n                  <span>With .icon-file-directory using &lt;i&gt; tags</span>\n                </li>\n                <li class=\'list-item selected\'>\n                  <span class=\'icon icon-file-directory\'>Selected with .icon-file-directory</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'no-icon\'>With .no-icon</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-text\'>With icon-file-text</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-media\'>With icon-file-media</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-symlink-file\'>With icon-file-symlink-file</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-submodule\'>With icon-file-submodule</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-book\'>With icon-book</span>\n                </li>\n              </ul>\n            '], ['\n              <ul class=\'list-group\'>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-directory\'>Using a span with an icon</span>\n                </li>\n                <li class=\'list-item\'>\n                  <i class=\'icon icon-file-directory\'></i>\n                  <span>With .icon-file-directory using &lt;i&gt; tags</span>\n                </li>\n                <li class=\'list-item selected\'>\n                  <span class=\'icon icon-file-directory\'>Selected with .icon-file-directory</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'no-icon\'>With .no-icon</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-text\'>With icon-file-text</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-media\'>With icon-file-media</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-symlink-file\'>With icon-file-symlink-file</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-submodule\'>With icon-file-submodule</span>\n                </li>\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-book\'>With icon-book</span>\n                </li>\n              </ul>\n            ']),
    _templateObject36 = _taggedTemplateLiteral(['\n              <ul class=\'list-tree\'>\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-directory\'>A Directory</span>\n                  </div>\n\n                  <ul class=\'list-tree\'>\n                    <li class=\'list-nested-item\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-nested-item collapsed\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Collapsed Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-item\'>\n                      <span class=\'icon icon-file-text\'>File one</span>\n                    </li>\n\n                    <li class=\'list-item selected\'>\n                      <span class=\'icon icon-file-text\'>File three .selected!</span>\n                    </li>\n                  </ul>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-text\'>.icon-file-text</span>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-symlink-file\'>.icon-file-symlink-file</span>\n                </li>\n            '], ['\n              <ul class=\'list-tree\'>\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-directory\'>A Directory</span>\n                  </div>\n\n                  <ul class=\'list-tree\'>\n                    <li class=\'list-nested-item\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-nested-item collapsed\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Collapsed Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-item\'>\n                      <span class=\'icon icon-file-text\'>File one</span>\n                    </li>\n\n                    <li class=\'list-item selected\'>\n                      <span class=\'icon icon-file-text\'>File three .selected!</span>\n                    </li>\n                  </ul>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-text\'>.icon-file-text</span>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-symlink-file\'>.icon-file-symlink-file</span>\n                </li>\n            ']),
    _templateObject37 = _taggedTemplateLiteral(['\n              <ul class=\'list-tree has-collapsable-children\'>\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-directory\'>A Directory</span>\n                  </div>\n\n                  <ul class=\'list-tree\'>\n                    <li class=\'list-nested-item\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-nested-item collapsed\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Collapsed Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-item\'>\n                      <span class=\'icon icon-file-text\'>File one</span>\n                    </li>\n\n                    <li class=\'list-item selected\'>\n                      <span class=\'icon icon-file-text\'>File three .selected!</span>\n                    </li>\n                  </ul>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-text\'>.icon-file-text</span>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-symlink-file\'>.icon-file-symlink-file</span>\n                </li>\n              </ul>\n            '], ['\n              <ul class=\'list-tree has-collapsable-children\'>\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-directory\'>A Directory</span>\n                  </div>\n\n                  <ul class=\'list-tree\'>\n                    <li class=\'list-nested-item\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-nested-item collapsed\'>\n                      <div class=\'list-item\'>\n                        <span class=\'icon icon-file-directory\'>Collapsed Nested Directory</span>\n                      </div>\n\n                      <ul class=\'list-tree\'>\n                        <li class=\'list-item\'>\n                          <span class=\'icon icon-file-text\'>File one</span>\n                        </li>\n                      </ul>\n                    </li>\n\n                    <li class=\'list-item\'>\n                      <span class=\'icon icon-file-text\'>File one</span>\n                    </li>\n\n                    <li class=\'list-item selected\'>\n                      <span class=\'icon icon-file-text\'>File three .selected!</span>\n                    </li>\n                  </ul>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-text\'>.icon-file-text</span>\n                </li>\n\n                <li class=\'list-item\'>\n                  <span class=\'icon icon-file-symlink-file\'>.icon-file-symlink-file</span>\n                </li>\n              </ul>\n            ']),
    _templateObject38 = _taggedTemplateLiteral(['\n              <ul class=\'list-tree has-collapsable-children \'>\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-text\'>This is a collapsable section</span>\n                  </div>\n\n                  <ul class=\'list-tree has-flat-children\'>\n                    <li class=\'list-item\'>Something is here</li>\n                    <li class=\'list-item selected\'>Something selected</li>\n                  </ul>\n                </li>\n\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-directory\'>Another collapsable section</span>\n                  </div>\n\n                  <ul class=\'list-tree has-flat-children\'>\n                    <li class=\'list-item\'>Something is here</li>\n                    <li class=\'list-item\'>Something else</li>\n                  </ul>\n                </li>\n              </ul>\n            '], ['\n              <ul class=\'list-tree has-collapsable-children \'>\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-text\'>This is a collapsable section</span>\n                  </div>\n\n                  <ul class=\'list-tree has-flat-children\'>\n                    <li class=\'list-item\'>Something is here</li>\n                    <li class=\'list-item selected\'>Something selected</li>\n                  </ul>\n                </li>\n\n                <li class=\'list-nested-item\'>\n                  <div class=\'list-item\'>\n                    <span class=\'icon icon-file-directory\'>Another collapsable section</span>\n                  </div>\n\n                  <ul class=\'list-tree has-flat-children\'>\n                    <li class=\'list-item\'>Something is here</li>\n                    <li class=\'list-item\'>Something else</li>\n                  </ul>\n                </li>\n              </ul>\n            ']),
    _templateObject39 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'selected\'>one</li>\n                    <li>two</li>\n                    <li>three</li>\n                  </ol>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'selected\'>one</li>\n                    <li>two</li>\n                    <li>three</li>\n                  </ol>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject40 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'selected\'>\n                      <div class=\'status status-added icon icon-diff-added\'></div>\n                      <div class=\'icon icon-file-text\'>Some file</div>\n                    </li>\n\n                    <li>\n                      <div class=\'status status-modified icon icon-diff-modified\'></div>\n                      <div class=\'icon icon-file-text\'>Another file</div>\n                    </li>\n\n                    <li>\n                      <div class=\'status status-removed icon icon-diff-removed\'></div>\n                      <div class=\'icon icon-file-text\'>Yet another file</div>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'selected\'>\n                      <div class=\'status status-added icon icon-diff-added\'></div>\n                      <div class=\'icon icon-file-text\'>Some file</div>\n                    </li>\n\n                    <li>\n                      <div class=\'status status-modified icon icon-diff-modified\'></div>\n                      <div class=\'icon icon-file-text\'>Another file</div>\n                    </li>\n\n                    <li>\n                      <div class=\'status status-removed icon icon-diff-removed\'></div>\n                      <div class=\'icon icon-file-text\'>Yet another file</div>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject41 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'selected\'>\n                      <div class=\'pull-right\'>\n                        <kbd class=\'key-binding pull-right\'>⌘⌥↓</kbd>\n                      </div>\n\n                      <span class=\'icon icon-file-text\'>Some file</span>\n                    </li>\n\n                    <li>\n                      <div class=\'pull-right key-bindings\'>\n                        <kbd class=\'key-binding\'>⌘⌥A</kbd>\n                        <kbd class=\'key-binding\'>⌘⌥O</kbd>\n                      </div>\n\n                      <span class=\'icon icon-file-text\'>Another file with a long name</span>\n                    </li>\n\n                    <li>\n                      <div class=\'pull-right\'>\n                        <kbd class=\'key-binding\'>⌘⌥↓</kbd>\n                      </div>\n\n                      <span class=\'icon icon-file-text\'>Yet another file</span>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'selected\'>\n                      <div class=\'pull-right\'>\n                        <kbd class=\'key-binding pull-right\'>⌘⌥↓</kbd>\n                      </div>\n\n                      <span class=\'icon icon-file-text\'>Some file</span>\n                    </li>\n\n                    <li>\n                      <div class=\'pull-right key-bindings\'>\n                        <kbd class=\'key-binding\'>⌘⌥A</kbd>\n                        <kbd class=\'key-binding\'>⌘⌥O</kbd>\n                      </div>\n\n                      <span class=\'icon icon-file-text\'>Another file with a long name</span>\n                    </li>\n\n                    <li>\n                      <div class=\'pull-right\'>\n                        <kbd class=\'key-binding\'>⌘⌥↓</kbd>\n                      </div>\n\n                      <span class=\'icon icon-file-text\'>Yet another file</span>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject42 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'two-lines\'>\n                      <div class=\'primary-line\'>Primary line</div>\n                      <div class=\'secondary-line\'>Secondary line</div>\n                    </li>\n\n                    <li class=\'two-lines selected\'>\n                      <div class=\'primary-line\'>A thing</div>\n                      <div class=\'secondary-line\'>Description of the thing</div>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'two-lines\'>\n                      <div class=\'primary-line\'>Primary line</div>\n                      <div class=\'secondary-line\'>Secondary line</div>\n                    </li>\n\n                    <li class=\'two-lines selected\'>\n                      <div class=\'primary-line\'>A thing</div>\n                      <div class=\'secondary-line\'>Description of the thing</div>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject43 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'two-lines\'>\n                      <div class=\'status status-added icon icon-diff-added\'></div>\n                      <div class=\'primary-line icon icon-file-text\'>Primary line</div>\n                      <div class=\'secondary-line no-icon\'>Secondary line</div>\n                    </li>\n\n                    <li class=\'two-lines selected\'>\n                      <div class=\'status status-modified icon icon-diff-modified\'></div>\n                      <div class=\'primary-line icon icon-file-symlink-file\'>A thing</div>\n                      <div class=\'secondary-line no-icon\'>Description of the thing</div>\n                    </li>\n\n                    <li class=\'two-lines\'>\n                      <div class=\'status status-renamed icon icon-diff-renamed\'></div>\n                      <div class=\'primary-line icon icon-file-symlink-file\'>A thing</div>\n                      <div class=\'secondary-line no-icon\'>Description of the thing</div>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group\'>\n                    <li class=\'two-lines\'>\n                      <div class=\'status status-added icon icon-diff-added\'></div>\n                      <div class=\'primary-line icon icon-file-text\'>Primary line</div>\n                      <div class=\'secondary-line no-icon\'>Secondary line</div>\n                    </li>\n\n                    <li class=\'two-lines selected\'>\n                      <div class=\'status status-modified icon icon-diff-modified\'></div>\n                      <div class=\'primary-line icon icon-file-symlink-file\'>A thing</div>\n                      <div class=\'secondary-line no-icon\'>Description of the thing</div>\n                    </li>\n\n                    <li class=\'two-lines\'>\n                      <div class=\'status status-renamed icon icon-diff-renamed\'></div>\n                      <div class=\'primary-line icon icon-file-symlink-file\'>A thing</div>\n                      <div class=\'secondary-line no-icon\'>Description of the thing</div>\n                    </li>\n                  </ol>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject44 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group mark-active\'>\n                    <li class=\'selected\'>Selected &mdash; user is arrowing through the list.</li>\n                    <li class=\'active\'>This is the active item</li>\n                    <li class=\'selected active\'>Selected AND Active!</li>\n                  </ol>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <ol class=\'list-group mark-active\'>\n                    <li class=\'selected\'>Selected &mdash; user is arrowing through the list.</li>\n                    <li class=\'active\'>This is the active item</li>\n                    <li class=\'selected active\'>Selected AND Active!</li>\n                  </ol>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject45 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <atom-text-editor mini>I searched for this</atom-text-editor>\n                  <div class=\'error-message\'>Nothing has been found!</div>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <atom-text-editor mini>I searched for this</atom-text-editor>\n                  <div class=\'error-message\'>Nothing has been found!</div>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject46 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <atom-text-editor mini>User input</atom-text-editor>\n                  <div class=\'loading\'>\n                    <span class=\'loading-message\'>Chill, bro. Things are loading.</span>\n                    <span class=\'badge\'>1234</span>\n                  </div>\n                </div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div class=\'select-list\'>\n                  <atom-text-editor mini>User input</atom-text-editor>\n                  <div class=\'loading\'>\n                    <span class=\'loading-message\'>Chill, bro. Things are loading.</span>\n                    <span class=\'badge\'>1234</span>\n                  </div>\n                </div>\n              </atom-panel>\n            ']),
    _templateObject47 = _taggedTemplateLiteral(['\n              <div class=\'select-list popover-list\'>\n                <atom-text-editor mini>\'User types here..\'</atom-text-editor>\n                <ol class=\'list-group\'>\n                  <li class=\'selected\'>one</li>\n                  <li>two</li>\n                  <li>three</li>\n                </ol>\n              </div>\n            '], ['\n              <div class=\'select-list popover-list\'>\n                <atom-text-editor mini>\'User types here..\'</atom-text-editor>\n                <ol class=\'list-group\'>\n                  <li class=\'selected\'>one</li>\n                  <li>two</li>\n                  <li>three</li>\n                </ol>\n              </div>\n            ']),
    _templateObject48 = _taggedTemplateLiteral(['\n              <atom-panel class=\'modal\'>\n                <div>Some content</div>\n              </atom-panel>\n            '], ['\n              <atom-panel class=\'modal\'>\n                <div>Some content</div>\n              </atom-panel>\n            ']),
    _templateObject49 = _taggedTemplateLiteral(['\n              <div class=\'tooltip top\'>\n                <div class=\'tooltip-arrow\'></div>\n                <div class=\'tooltip-inner\'>This is a message</div>\n              </div>\n\n              <div class=\'tooltip top\'>\n                <div class=\'tooltip-arrow\'></div>\n                <div class=\'tooltip-inner\'>\n                  With a keystroke <span class="keystroke">cmd-shift-o</span>\n                </div>\n              </div>\n            '], ['\n              <div class=\'tooltip top\'>\n                <div class=\'tooltip-arrow\'></div>\n                <div class=\'tooltip-inner\'>This is a message</div>\n              </div>\n\n              <div class=\'tooltip top\'>\n                <div class=\'tooltip-arrow\'></div>\n                <div class=\'tooltip-inner\'>\n                  With a keystroke <span class="keystroke">cmd-shift-o</span>\n                </div>\n              </div>\n            ']),
    _templateObject50 = _taggedTemplateLiteral(['\n              <ul class=\'error-messages block\'>\n                <li>This is an error!</li>\n                <li>And another</li>\n              </ul>\n            '], ['\n              <ul class=\'error-messages block\'>\n                <li>This is an error!</li>\n                <li>And another</li>\n              </ul>\n            ']),
    _templateObject51 = _taggedTemplateLiteral(['\n              <ul class=\'info-messages block\'>\n                <li>Info line</li>\n                <li>Another info line</li>\n              </ul>\n            '], ['\n              <ul class=\'info-messages block\'>\n                <li>Info line</li>\n                <li>Another info line</li>\n              </ul>\n            ']),
    _templateObject52 = _taggedTemplateLiteral(['\n              <ul class=\'background-message\'>\n                <li>No Results</li>\n              </ul>\n            '], ['\n              <ul class=\'background-message\'>\n                <li>No Results</li>\n              </ul>\n            ']),
    _templateObject53 = _taggedTemplateLiteral(['\n              <ul class=\'background-message centered\'>\n                <li>No Results</li>\n              </ul>\n            '], ['\n              <ul class=\'background-message centered\'>\n                <li>No Results</li>\n              </ul>\n            ']),
    _templateObject54 = _taggedTemplateLiteral(['\n              <div class=\'block\'>\n                <progress class=\'inline-block\'></progress>\n                <span class=\'inline-block\'>Indeterminate</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'25\'></progress>\n                <span class=\'inline-block\'>At 25%</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'50\'></progress>\n                <span class=\'inline-block\'>At 50%</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'75\'></progress>\n                <span class=\'inline-block\'>At 75%</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'100\'></progress>\n                <span class=\'inline-block\'>At 100%</span>\n              </div>\n            '], ['\n              <div class=\'block\'>\n                <progress class=\'inline-block\'></progress>\n                <span class=\'inline-block\'>Indeterminate</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'25\'></progress>\n                <span class=\'inline-block\'>At 25%</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'50\'></progress>\n                <span class=\'inline-block\'>At 50%</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'75\'></progress>\n                <span class=\'inline-block\'>At 75%</span>\n              </div>\n\n              <div class=\'block\'>\n                <progress class=\'inline-block\' max=\'100\' value=\'100\'></progress>\n                <span class=\'inline-block\'>At 100%</span>\n              </div>\n            ']),
    _templateObject55 = _taggedTemplateLiteral(['\n              <span class=\'loading loading-spinner-tiny inline-block\'></span>\n              <span class=\'loading loading-spinner-small inline-block\'></span>\n              <span class=\'loading loading-spinner-medium inline-block\'></span>\n              <span class=\'loading loading-spinner-large inline-block\'></span>\n            '], ['\n              <span class=\'loading loading-spinner-tiny inline-block\'></span>\n              <span class=\'loading loading-spinner-small inline-block\'></span>\n              <span class=\'loading loading-spinner-medium inline-block\'></span>\n              <span class=\'loading loading-spinner-large inline-block\'></span>\n            ']);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/** @babel */
/** @jsx etch.dom */

var _etch = require('etch');

var _etch2 = _interopRequireDefault(_etch);

var _dedent = require('dedent');

var _dedent2 = _interopRequireDefault(_dedent);

var _jsBeautify = require('js-beautify');

var _codeBlock = require('./code-block');

var _codeBlock2 = _interopRequireDefault(_codeBlock);

var _styleguideSection = require('./styleguide-section');

var _styleguideSection2 = _interopRequireDefault(_styleguideSection);

var _exampleSelectListView = require('./example-select-list-view');

var _exampleSelectListView2 = _interopRequireDefault(_exampleSelectListView);

var StyleguideView = (function () {
  function StyleguideView(props) {
    _classCallCheck(this, StyleguideView);

    this.uri = props.uri;
    this.collapsedSections = props.collapsedSections ? new Set(props.collapsedSections) : new Set();
    this.sections = [];
    _etch2['default'].initialize(this);
    for (var section of this.sections) {
      if (this.collapsedSections.has(section.name)) {
        section.collapse();
      } else {
        section.expand();
      }
    }
  }

  _createClass(StyleguideView, [{
    key: 'destroy',
    value: function destroy() {
      this.sections = null;
    }
  }, {
    key: 'serialize',
    value: function serialize() {
      return {
        deserializer: this.constructor.name,
        collapsedSections: this.sections.filter(function (s) {
          return s.collapsed;
        }).map(function (s) {
          return s.name;
        }),
        uri: this.uri
      };
    }
  }, {
    key: 'update',
    value: function update() {
      // intentionally empty.
    }
  }, {
    key: 'getURI',
    value: function getURI() {
      return this.uri;
    }
  }, {
    key: 'getTitle',
    value: function getTitle() {
      return 'Styleguide';
    }
  }, {
    key: 'expandAll',
    value: function expandAll() {
      for (var section of this.sections) {
        section.expand();
      }
    }
  }, {
    key: 'collapseAll',
    value: function collapseAll() {
      for (var section of this.sections) {
        section.collapse();
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this = this;

      return _etch2['default'].dom(
        'div',
        { className: 'styleguide pane-item native-key-bindings', tabIndex: '-1' },
        _etch2['default'].dom(
          'header',
          { className: 'styleguide-header' },
          _etch2['default'].dom(
            'h1',
            null,
            'Styleguide'
          ),
          _etch2['default'].dom(
            'p',
            null,
            'This exercises all UI components and acts as a styleguide.'
          ),
          _etch2['default'].dom(
            'div',
            { className: 'styleguide-controls btn-group' },
            _etch2['default'].dom(
              'button',
              { className: 'btn', onclick: function () {
                  return _this.collapseAll();
                } },
              'Collapse All'
            ),
            _etch2['default'].dom(
              'button',
              { className: 'btn', onclick: function () {
                  return _this.expandAll();
                } },
              'Expand All'
            )
          )
        ),
        _etch2['default'].dom(
          'main',
          { className: 'styleguide-sections' },
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'variables', title: 'Variables' },
            _etch2['default'].dom(
              'p',
              null,
              'Use these UI variables in your package\'s stylesheets. They are set by UI themes and therefore your package will match the overall look. Make sure to @import \'ui-variables\' in your stylesheets to use these variables.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Text colors'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject)),
            _etch2['default'].dom(
              'h2',
              null,
              'Background colors'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject2)),
            _etch2['default'].dom(
              'h2',
              null,
              'Base colors'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject3)),
            _etch2['default'].dom(
              'h2',
              null,
              'Component colors'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject4)),
            _etch2['default'].dom(
              'h2',
              null,
              'Site colors'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject5)),
            _etch2['default'].dom(
              'h2',
              null,
              'Sizes'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject6)),
            _etch2['default'].dom(
              'h2',
              null,
              'Misc'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject7))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'icons', title: 'Icons' },
            _etch2['default'].dom(
              'p',
              null,
              'Atom comes bundled with the Octicons. It lets you easily add icons to your packages.'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Currently version ',
              _etch2['default'].dom(
                'code',
                null,
                '4.4.0'
              ),
              ' is available. In addition some older icons from version ',
              _etch2['default'].dom(
                'code',
                null,
                '2.1.2'
              ),
              ' are still kept for backwards compatibility. Make sure to use the ',
              _etch2['default'].dom(
                'code',
                null,
                'icon icon-'
              ),
              ' prefix in front of an icon name. See the ',
              _etch2['default'].dom(
                'a',
                { href: 'http://flight-manual.atom.io/hacking-atom/sections/iconography/' },
                'documentation'
              ),
              ' for more details.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Octicons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject8))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'inputs', title: 'Inputs' },
            _etch2['default'].dom(
              'p',
              null,
              'Various inputs and controls.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Text Inputs'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject9)),
            _etch2['default'].dom(
              'h2',
              null,
              'Controls'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject10)),
            _etch2['default'].dom(
              'h2',
              null,
              'Misc'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject11))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'text', title: 'Text' },
            _etch2['default'].dom(
              'p',
              null,
              'There are a number of text classes.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'text-* classes'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject12)),
            _etch2['default'].dom(
              'h2',
              null,
              'highlight-* classes'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject13))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'layout', title: 'Layout' },
            _etch2['default'].dom(
              'p',
              null,
              'A few things that might be useful for general layout.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              '.block'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Sometimes you need to separate components vertically. Say in a form.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject14)),
            _etch2['default'].dom(
              'h2',
              null,
              '.inline-block'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Sometimes you need to separate components horizontally.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject15)),
            _etch2['default'].dom(
              'h2',
              null,
              '.inline-block-tight'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'You might want things to be a little closer to each other.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject16))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'git', title: 'Git Status' },
            _etch2['default'].dom(
              'p',
              null,
              'Often we need git related classes to specify status.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'status-* classes'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject17)),
            _etch2['default'].dom(
              'h2',
              null,
              'status-* classes with related icons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject18))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'site-highlight', title: 'Site colors' },
            _etch2['default'].dom(
              'p',
              null,
              'Site colors are used for collaboration. A site is another collaborator.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'ui-site-* classes'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'These classes only set the background color, no other styles. You can also use LESS variables ',
              _etch2['default'].dom(
                'code',
                null,
                '@ui-site-#'
              ),
              ' in your plugins where',
              _etch2['default'].dom(
                'code',
                null,
                '#'
              ),
              ' is a number between 1 and 5.'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Site colors will always be in the color progression you see here.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject19))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'badges', title: 'Badges' },
            _etch2['default'].dom(
              'p',
              null,
              'Badges are typically used to show numbers.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Standalone badges'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject20)),
            _etch2['default'].dom(
              'h2',
              null,
              'Colored badges'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject21)),
            _etch2['default'].dom(
              'h2',
              null,
              'Badge sizes'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'By default the ',
              _etch2['default'].dom(
                'code',
                null,
                '@font-size'
              ),
              ' variable from themes is used. Additionally there are also 3 predefined sizes.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject22)),
            _etch2['default'].dom(
              'p',
              null,
              'If you like the size change depending on the parent, use the ',
              _etch2['default'].dom(
                'code',
                null,
                'badge-flexible'
              ),
              ' class. Note: Best used for larger sizes. For smaller sizes it could cause the number to be mis-aligned by a pixel.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject23)),
            _etch2['default'].dom(
              'h2',
              null,
              'Icon Badges'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'See the icons section to get an overview of all Octicons.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject24))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'buttons', title: 'Buttons' },
            _etch2['default'].dom(
              'p',
              null,
              'Buttons are similar to bootstrap buttons'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Standalone buttons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject25)),
            _etch2['default'].dom(
              'h2',
              null,
              'Colored buttons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject26)),
            _etch2['default'].dom(
              'h2',
              null,
              'Icon buttons'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Overview of all ',
              _etch2['default'].dom(
                'a',
                { href: 'https://octicons.github.com/' },
                'Octicons'
              ),
              '.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject27)),
            _etch2['default'].dom(
              'h2',
              null,
              'Button Groups'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject28)),
            _etch2['default'].dom(
              'h2',
              null,
              'Button Toolbars'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject29)),
            _etch2['default'].dom(
              'h2',
              null,
              'Selected buttons'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Buttons can be marked selected by adding a ',
              _etch2['default'].dom(
                'code',
                null,
                '.selected'
              ),
              ' class. Useful for toggle groups.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject30))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'panel', title: 'Panels' },
            _etch2['default'].dom(
              'p',
              null,
              'A container attached to some side of the Atom UI.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject31)),
            _etch2['default'].dom(
              'h2',
              null,
              'Inset Panel'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Use inside a panel'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject32)),
            _etch2['default'].dom(
              'h2',
              null,
              'With a heading'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject33))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'list-group', title: 'List Group' },
            _etch2['default'].dom(
              'p',
              null,
              'Use for anything that requires a list.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject34)),
            _etch2['default'].dom(
              'h2',
              null,
              'With icons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject35))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'list-tree', title: 'List Tree' },
            _etch2['default'].dom(
              'p',
              null,
              'A ',
              _etch2['default'].dom(
                'code',
                null,
                '.list-tree'
              ),
              ' is a special case of ',
              _etch2['default'].dom(
                'code',
                null,
                '.list-group'
              ),
              '.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject36)),
            _etch2['default'].dom(
              'h2',
              null,
              'With disclosure arrows'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Add the class ',
              _etch2['default'].dom(
                'code',
                null,
                '.has-collapsable-children'
              ),
              ' to give the children with nested items disclosure arrows.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject37)),
            _etch2['default'].dom(
              'h2',
              null,
              'With disclosure arrows at only one level.'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Add the class ',
              _etch2['default'].dom(
                'code',
                null,
                '.has-flat-children'
              ),
              ' to sub-',
              _etch2['default'].dom(
                'code',
                null,
                '.list-tree'
              ),
              's to indicate that the children will not be collapsable.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject38))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'select-list', title: 'Select List' },
            _etch2['default'].dom(
              'p',
              null,
              'This is how you will typically specify a ',
              _etch2['default'].dom(
                'code',
                null,
                '.select-list'
              ),
              '.'
            ),
            _etch2['default'].dom(_exampleSelectListView2['default'], null),
            _etch2['default'].dom(
              'p',
              null,
              'The list items have many options you can use, and shows you how they will display.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Basic example with one item selected'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject39)),
            _etch2['default'].dom(
              'h2',
              null,
              'Single line with icons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject40)),
            _etch2['default'].dom(
              'h2',
              null,
              'Single line with key-bindings'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject41)),
            _etch2['default'].dom(
              'h2',
              null,
              'Multiple lines with no icons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject42)),
            _etch2['default'].dom(
              'h2',
              null,
              'Multiple lines with icons'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject43)),
            _etch2['default'].dom(
              'h2',
              null,
              'Using mark-active class to indicate the active item'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Use ...'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject44)),
            _etch2['default'].dom(
              'h2',
              null,
              'Error messages'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject45)),
            _etch2['default'].dom(
              'h2',
              null,
              'Loading message'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject46))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'popover-list', title: 'Popover List' },
            _etch2['default'].dom(
              'p',
              null,
              'A ',
              _etch2['default'].dom(
                'code',
                null,
                '.popover-list'
              ),
              ' is a ',
              _etch2['default'].dom(
                'code',
                null,
                '.select-list'
              ),
              ' that is meant to popover the code for something like autocomplete.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Basic example with one item selected'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject47))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'modal-panel', title: 'Modals' },
            _etch2['default'].dom(
              'p',
              null,
              'Modals are like dialog boxes.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject48))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'tooltips', title: 'Tooltips' },
            _etch2['default'].dom(
              'p',
              null,
              'You do not create the markup directly. You call',
              _etch2['default'].dom(
                'code',
                null,
                'element.setTooltip(title, {command, commandElement}={})'
              ),
              '. Passing in a ',
              _etch2['default'].dom(
                'code',
                null,
                'command'
              ),
              ' (like ',
              _etch2['default'].dom(
                'code',
                null,
                'find-and-replace:show-find'
              ),
              ') and',
              _etch2['default'].dom(
                'code',
                null,
                'commandElement'
              ),
              ' (context for the command) will yield a tip with a keystroke.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject49))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'error-messages', title: 'Messages' },
            _etch2['default'].dom(
              'p',
              null,
              'Use to convey info to the user when something happens. See ',
              _etch2['default'].dom(
                'code',
                null,
                'find-and-replace'
              ),
              'for an example.'
            ),
            _etch2['default'].dom(
              'h2',
              null,
              'Error messages'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject50)),
            _etch2['default'].dom(
              'h2',
              null,
              'Info messages'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject51)),
            _etch2['default'].dom(
              'h2',
              null,
              'Background Messages'
            ),
            _etch2['default'].dom(
              'p',
              null,
              'Subtle background messages for panes. Use for cases when there are no results.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject52)),
            _etch2['default'].dom(
              'p',
              null,
              'Centered background messages will center horizontally and vertically. Your container for this element must have ',
              _etch2['default'].dom(
                'code',
                null,
                'position'
              ),
              ' set with ',
              _etch2['default'].dom(
                'code',
                null,
                'relative'
              ),
              ' or',
              _etch2['default'].dom(
                'code',
                null,
                'absolute'
              ),
              '.'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject53))
          ),
          _etch2['default'].dom(
            _styleguideSection2['default'],
            { onDidInitialize: this.didInitializeSection.bind(this), name: 'progress', title: 'Loading/Progress' },
            _etch2['default'].dom(
              'h2',
              null,
              'Progress Bars'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject54)),
            _etch2['default'].dom(
              'h2',
              null,
              'Loading Spinners'
            ),
            this.renderExampleHTML((0, _dedent2['default'])(_templateObject55))
          )
        )
      );
    }
  }, {
    key: 'renderExampleHTML',
    value: function renderExampleHTML(html) {
      return _etch2['default'].dom(
        'div',
        { className: 'example' },
        _etch2['default'].dom('div', { className: 'example-rendered', innerHTML: html }),
        _etch2['default'].dom(
          'div',
          { className: 'example-code show-example-html' },
          _etch2['default'].dom(_codeBlock2['default'], { cssClass: 'example-html', grammarScopeName: 'text.xml', code: (0, _jsBeautify.html)(html) })
        )
      );
    }
  }, {
    key: 'didInitializeSection',
    value: function didInitializeSection(section) {
      this.sections.push(section);
    }
  }, {
    key: 'isEqual',
    value: function isEqual(other) {
      return other instanceof StyleguideView;
    }
  }]);

  return StyleguideView;
})();

exports['default'] = StyleguideView;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 