{"version":3,"sources":["webpack:///./src/midone/views/button/Main.vue","webpack:///./src/midone/views/button/Main.vue?33d9"],"names":["class","id","data-target","icon","color","script","render"],"mappings":"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","file":"js/chunk-2d0be31a.953954ef.js","sourcesContent":["<template>\n  <div>\n    <div class=\"intro-y flex items-center mt-8\">\n      <h2 class=\"text-lg font-medium mr-auto\">Buttons</h2>\n    </div>\n    <div class=\"intro-y grid grid-cols-12 gap-6 mt-5\">\n      <div class=\"col-span-12 lg:col-span-6\">\n        <!-- BEGIN: Basic Button -->\n        <div class=\"intro-y box\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Basic Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#basic-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"basic-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <button class=\"button w-24 mr-1 mb-2 bg-theme-1 text-white\">\n                Primary\n              </button>\n              <button\n                class=\"button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n              >\n                Secondary\n              </button>\n              <button class=\"button w-24 mr-1 mb-2 bg-theme-9 text-white\">\n                Success\n              </button>\n              <button class=\"button w-24 mr-1 mb-2 bg-theme-12 text-white\">\n                Warning\n              </button>\n              <button class=\"button w-24 mr-1 mb-2 bg-theme-6 text-white\">\n                Danger\n              </button>\n              <button class=\"button w-24 mr-1 mb-2 bg-gray-200 text-gray-600\">\n                Dark\n              </button>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-basic-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-basic-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button class=\"button w-24 mr-1 mb-2 bg-theme-1 text-white\">\n                        Primary\n                      </button>\n                      <button\n                        class=\"button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                      >\n                        Secondary\n                      </button>\n                      <button class=\"button w-24 mr-1 mb-2 bg-theme-9 text-white\">\n                        Success\n                      </button>\n                      <button\n                        class=\"button w-24 mr-1 mb-2 bg-theme-12 text-white\"\n                      >\n                        Warning\n                      </button>\n                      <button class=\"button w-24 mr-1 mb-2 bg-theme-6 text-white\">\n                        Danger\n                      </button>\n                      <button\n                        class=\"button w-24 mr-1 mb-2 bg-gray-200 text-gray-600\"\n                      >\n                        Dark\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Basic Button -->\n        <!-- BEGIN: Button Size -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Button Sizes</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#button-size\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"button-size\" class=\"p-5\">\n            <div class=\"preview\">\n              <div>\n                <button\n                  class=\"button button--sm w-24 mr-1 mb-2 bg-theme-1 text-white\"\n                >\n                  Small\n                </button>\n                <button class=\"button w-24 mr-1 mb-2 bg-theme-1 text-white\">\n                  Medium\n                </button>\n                <button\n                  class=\"button button--lg w-24 mr-1 mb-2 bg-theme-1 text-white\"\n                >\n                  Large\n                </button>\n              </div>\n              <div class=\"mt-5\">\n                <button\n                  class=\"button button--sm w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                >\n                  Small\n                </button>\n                <button\n                  class=\"button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                >\n                  Medium\n                </button>\n                <button\n                  class=\"button button--lg w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                >\n                  Large\n                </button>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-button-size\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-button-size\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <div>\n                        <button\n                          class=\"button button--sm w-24 mr-1 mb-2 bg-theme-1 text-white\"\n                        >\n                          Small\n                        </button>\n                        <button\n                          class=\"button w-24 mr-1 mb-2 bg-theme-1 text-white\"\n                        >\n                          Medium\n                        </button>\n                        <button\n                          class=\"button button--lg w-24 mr-1 mb-2 bg-theme-1 text-white\"\n                        >\n                          Large\n                        </button>\n                      </div>\n                      <div class=\"mt-5\">\n                        <button\n                          class=\"button button--sm w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                        >\n                          Small\n                        </button>\n                        <button\n                          class=\"button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                        >\n                          Medium\n                        </button>\n                        <button\n                          class=\"button button--lg w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                        >\n                          Large\n                        </button>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Button Size -->\n        <!-- BEGIN: Button Link -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Working with Links</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#link-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"link-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <a\n                href=\"\"\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white\"\n                >Link</a\n              >\n              <a\n                href=\"\"\n                class=\"button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                >Button</a\n              >\n              <a\n                href=\"\"\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white\"\n                >Input</a\n              >\n              <a\n                href=\"\"\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white\"\n                >Submit</a\n              >\n              <a\n                href=\"\"\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white\"\n                >Reset</a\n              >\n              <a\n                href=\"\"\n                class=\"button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600\"\n                >Metal</a\n              >\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-link-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-link-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <a\n                        href=\"\"\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white\"\n                        >Link</a\n                      >\n                      <a\n                        href=\"\"\n                        class=\"button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                        >Button</a\n                      >\n                      <a\n                        href=\"\"\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white\"\n                        >Input</a\n                      >\n                      <a\n                        href=\"\"\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white\"\n                        >Submit</a\n                      >\n                      <a\n                        href=\"\"\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white\"\n                        >Reset</a\n                      >\n                      <a\n                        href=\"\"\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-gray-200 text-gray-600\"\n                        >Metal</a\n                      >\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Button Link -->\n        <!-- BEGIN: Elevated Button -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Elevated Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#elevated-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"elevated-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <div>\n                <button\n                  class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-1 text-white\"\n                >\n                  Primary\n                </button>\n                <button\n                  class=\"button w-24 shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                >\n                  Secondary\n                </button>\n                <button\n                  class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-9 text-white\"\n                >\n                  Success\n                </button>\n                <button\n                  class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-12 text-white\"\n                >\n                  Warning\n                </button>\n                <button\n                  class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-6 text-white\"\n                >\n                  Danger\n                </button>\n                <button\n                  class=\"button w-24 shadow-md mr-1 mb-2 bg-gray-200 text-gray-600\"\n                >\n                  Dark\n                </button>\n              </div>\n              <div class=\"mt-5\">\n                <button\n                  class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-1 text-white\"\n                >\n                  Primary\n                </button>\n                <button\n                  class=\"button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                >\n                  Secondary\n                </button>\n                <button\n                  class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-9 text-white\"\n                >\n                  Success\n                </button>\n                <button\n                  class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-12 text-white\"\n                >\n                  Warning\n                </button>\n                <button\n                  class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-6 text-white\"\n                >\n                  Danger\n                </button>\n                <button\n                  class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-gray-200 text-gray-600\"\n                >\n                  Dark\n                </button>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-elevated-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-elevated-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <div>\n                        <button\n                          class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-1 text-white\"\n                        >\n                          Primary\n                        </button>\n                        <button\n                          class=\"button w-24 shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                        >\n                          Secondary\n                        </button>\n                        <button\n                          class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-9 text-white\"\n                        >\n                          Success\n                        </button>\n                        <button\n                          class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-12 text-white\"\n                        >\n                          Warning\n                        </button>\n                        <button\n                          class=\"button w-24 shadow-md mr-1 mb-2 bg-theme-6 text-white\"\n                        >\n                          Danger\n                        </button>\n                        <button\n                          class=\"button w-24 shadow-md mr-1 mb-2 bg-gray-200 text-gray-600\"\n                        >\n                          Dark\n                        </button>\n                      </div>\n                      <div class=\"mt-5\">\n                        <button\n                          class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-1 text-white\"\n                        >\n                          Primary\n                        </button>\n                        <button\n                          class=\"button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                        >\n                          Secondary\n                        </button>\n                        <button\n                          class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-9 text-white\"\n                        >\n                          Success\n                        </button>\n                        <button\n                          class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-12 text-white\"\n                        >\n                          Warning\n                        </button>\n                        <button\n                          class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-theme-6 text-white\"\n                        >\n                          Danger\n                        </button>\n                        <button\n                          class=\"button w-24 rounded-full shadow-md mr-1 mb-2 bg-gray-200 text-gray-600\"\n                        >\n                          Dark\n                        </button>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Elevated Button -->\n        <!-- BEGIN: Social Media Button -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Social Media Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#social-media-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"social-media-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"flex flex-wrap\">\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-32 text-white\"\n                >\n                  <FacebookIcon class=\"w-4 h-4 mr-2\" /> Facebook\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-33 text-white\"\n                >\n                  <TwitterIcon class=\"w-4 h-4 mr-2\" /> Twitter\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-34 text-white\"\n                >\n                  <InstagramIcon class=\"w-4 h-4 mr-2\" /> Instagram\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-35 text-white\"\n                >\n                  <LinkedinIcon class=\"w-4 h-4 mr-2\" /> Linkedin\n                </button>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-social-media-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-social-media-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-32 text-white\"\n                      >\n                        <FacebookIcon class=\"w-4 h-4 mr-2\" />\n                        Facebook\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-33 text-white\"\n                      >\n                        <TwitterIcon class=\"w-4 h-4 mr-2\" />\n                        Twitter\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-34 text-white\"\n                      >\n                        <InstagramIcon class=\"w-4 h-4 mr-2\" />\n                        Instagram\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-35 text-white\"\n                      >\n                        <LinkedinIcon class=\"w-4 h-4 mr-2\" />\n                        Linkedin\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Social Media Button -->\n      </div>\n      <div class=\"col-span-12 lg:col-span-6\">\n        <!-- BEGIN: Outline Button -->\n        <div class=\"intro-y box\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Outline Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#outline-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"outline-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10\"\n              >\n                Link\n              </button>\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                Button\n              </button>\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9\"\n              >\n                Input\n              </button>\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12\"\n              >\n                Submit\n              </button>\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6\"\n              >\n                Reset\n              </button>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-outline-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-outline-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10\"\n                      >\n                        Link\n                      </button>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n                      >\n                        Button\n                      </button>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9\"\n                      >\n                        Input\n                      </button>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12\"\n                      >\n                        Submit\n                      </button>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6\"\n                      >\n                        Reset\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Outline Button -->\n        <!-- BEGIN: Loading Button -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Loading State Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#loading-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"loading-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white inline-flex items-center\"\n              >\n                Saving\n                <LoadingIcon\n                  icon=\"oval\"\n                  color=\"white\"\n                  class=\"w-4 h-4 ml-auto\"\n                />\n              </button>\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white inline-flex items-center\"\n              >\n                Adding\n                <LoadingIcon\n                  icon=\"spinning-circles\"\n                  color=\"white\"\n                  class=\"w-4 h-4 ml-auto\"\n                />\n              </button>\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white inline-flex items-center\"\n              >\n                Loading\n                <LoadingIcon\n                  icon=\"three-dots\"\n                  color=\"white\"\n                  class=\"w-4 h-4 ml-auto\"\n                />\n              </button>\n              <button\n                class=\"button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white inline-flex items-center\"\n              >\n                Deleting\n                <LoadingIcon\n                  icon=\"puff\"\n                  color=\"white\"\n                  class=\"w-4 h-4 ml-auto\"\n                />\n              </button>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-loading-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-loading-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-1 text-white inline-flex items-center\"\n                      >\n                        Saving\n                        <LoadingIcon\n                          icon=\"oval\"\n                          color=\"white\"\n                          class=\"w-4 h-4 ml-auto\"\n                        />\n                      </button>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-9 text-white inline-flex items-center\"\n                      >\n                        Adding\n                        <LoadingIcon\n                          icon=\"spinning-circles\"\n                          color=\"white\"\n                          class=\"w-4 h-4 ml-auto\"\n                        />\n                      </button>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-12 text-white inline-flex items-center\"\n                      >\n                        Loading\n                        <LoadingIcon\n                          icon=\"three-dots\"\n                          color=\"white\"\n                          class=\"w-4 h-4 ml-auto\"\n                        />\n                      </button>\n                      <button\n                        class=\"button w-24 inline-block mr-1 mb-2 bg-theme-6 text-white inline-flex items-center\"\n                      >\n                        Deleting\n                        <LoadingIcon\n                          icon=\"puff\"\n                          color=\"white\"\n                          class=\"w-4 h-4 ml-auto\"\n                        />\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Loading Button -->\n        <!-- BEGIN: Rounded Button -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Rounded Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#rounded-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"rounded-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-1 text-white\"\n              >\n                Primary\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                Secondary\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-9 text-white\"\n              >\n                Success\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-12 text-white\"\n              >\n                Warning\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-6 text-white\"\n              >\n                Danger\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600\"\n              >\n                Dark\n              </button>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-rounded-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-rounded-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-1 text-white\"\n                      >\n                        Primary\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n                      >\n                        Secondary\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-9 text-white\"\n                      >\n                        Success\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-12 text-white\"\n                      >\n                        Warning\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-6 text-white\"\n                      >\n                        Danger\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600\"\n                      >\n                        Dark\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Rounded Button -->\n        <!-- BEGIN: Soft Color Button -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Soft Color Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#softcolor-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"softcolor-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-14 text-theme-10\"\n              >\n                Primary\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                Secondary\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-18 text-theme-9\"\n              >\n                Success\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-17 text-theme-11\"\n              >\n                Warning\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-31 text-theme-6\"\n              >\n                Danger\n              </button>\n              <button\n                class=\"button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600\"\n              >\n                Dark\n              </button>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-softcolor-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-softcolor-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-14 text-theme-10\"\n                      >\n                        Primary\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n                      >\n                        Secondary\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-18 text-theme-9\"\n                      >\n                        Success\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-17 text-theme-11\"\n                      >\n                        Warning\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-theme-31 text-theme-6\"\n                      >\n                        Danger\n                      </button>\n                      <button\n                        class=\"button w-24 rounded-full mr-1 mb-2 bg-gray-200 text-gray-600\"\n                      >\n                        Dark\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Soft Color Button -->\n        <!-- BEGIN: Icon Button -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Icon Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#icon-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"icon-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"flex flex-wrap\">\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-1 text-white\"\n                >\n                  <ActivityIcon class=\"w-4 h-4 mr-2\" /> Activity\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n                >\n                  <HardDriveIcon class=\"w-4 h-4 mr-2\" /> Hard Drive\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white\"\n                >\n                  <CalendarIcon class=\"w-4 h-4 mr-2\" /> Calendar\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-12 text-white\"\n                >\n                  <Share2Icon class=\"w-4 h-4 mr-2\" /> Share\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-6 text-white\"\n                >\n                  <TrashIcon class=\"w-4 h-4 mr-2\" /> Trash\n                </button>\n                <button\n                  class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-gray-200 text-gray-600\"\n                >\n                  <ImageIcon class=\"w-4 h-4 mr-2\" /> Image\n                </button>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-icon-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-icon-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-1 text-white\"\n                      >\n                        <ActivityIcon class=\"w-4 h-4 mr-2\" />\n                        Activity\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n                      >\n                        <HardDriveIcon class=\"w-4 h-4 mr-2\" />\n                        Hard Drive\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-9 text-white\"\n                      >\n                        <CalendarIcon class=\"w-4 h-4 mr-2\" />\n                        Calendar\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-12 text-white\"\n                      >\n                        <Share2Icon class=\"w-4 h-4 mr-2\" /> Share\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-theme-6 text-white\"\n                      >\n                        <TrashIcon class=\"w-4 h-4 mr-2\" /> Trash\n                      </button>\n                      <button\n                        class=\"button w-32 mr-2 mb-2 flex items-center justify-center bg-gray-200 text-gray-600\"\n                      >\n                        <ImageIcon class=\"w-4 h-4 mr-2\" /> Image\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Icon Button -->\n        <!-- BEGIN: Icon Only Button -->\n        <div class=\"intro-y box mt-5\">\n          <div\n            class=\"flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5\"\n          >\n            <h2 class=\"font-medium text-base mr-auto\">Icon Only Buttons</h2>\n            <div\n              class=\"w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0\"\n            >\n              <div class=\"mr-3\">Show example code</div>\n              <input\n                data-target=\"#icon-only-button\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"icon-only-button\" class=\"p-5\">\n            <div class=\"preview\">\n              <button class=\"button px-2 mr-1 mb-2 bg-theme-1 text-white\">\n                <span class=\"w-5 h-5 flex items-center justify-center\">\n                  <ActivityIcon class=\"w-4 h-4\" />\n                </span>\n              </button>\n              <button\n                class=\"button px-2 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n              >\n                <span class=\"w-5 h-5 flex items-center justify-center\">\n                  <HardDriveIcon class=\"w-4 h-4\" />\n                </span>\n              </button>\n              <button class=\"button px-2 mr-1 mb-2 bg-theme-9 text-white\">\n                <span class=\"w-5 h-5 flex items-center justify-center\">\n                  <CalendarIcon class=\"w-4 h-4\" />\n                </span>\n              </button>\n              <button class=\"button px-2 mr-1 mb-2 bg-theme-12 text-white\">\n                <span class=\"w-5 h-5 flex items-center justify-center\">\n                  <Share2Icon class=\"w-4 h-4\" />\n                </span>\n              </button>\n              <button class=\"button px-2 mr-1 mb-2 bg-theme-6 text-white\">\n                <span class=\"w-5 h-5 flex items-center justify-center\">\n                  <TrashIcon class=\"w-4 h-4\" />\n                </span>\n              </button>\n              <button class=\"button px-2 mr-1 mb-2 bg-gray-200 text-gray-600\">\n                <span class=\"w-5 h-5 flex items-center justify-center\">\n                  <ImageIcon class=\"w-4 h-4\" />\n                </span>\n              </button>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-icon-only-button\"\n                class=\"copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300\"\n              >\n                <FileIcon class=\"w-4 h-4 mr-2\" /> Copy example code\n              </button>\n              <div class=\"overflow-y-auto h-64 mt-3\">\n                <Highlight id=\"copy-icon-only-button\" class=\"source-preview\">\n                  <code\n                    class=\"text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10\"\n                  >\n                    <textarea>\n                      <button class=\"button px-2 mr-1 mb-2 bg-theme-1 text-white\">\n                        <span class=\"w-5 h-5 flex items-center justify-center\">\n                          <ActivityIcon class=\"w-4 h-4\" />\n                        </span>\n                      </button>\n                      <button\n                        class=\"button px-2 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300\"\n                      >\n                        <span class=\"w-5 h-5 flex items-center justify-center\">\n                          <HardDriveIcon class=\"w-4 h-4\" />\n                        </span>\n                      </button>\n                      <button class=\"button px-2 mr-1 mb-2 bg-theme-9 text-white\">\n                        <span class=\"w-5 h-5 flex items-center justify-center\">\n                          <CalendarIcon class=\"w-4 h-4\" />\n                        </span>\n                      </button>\n                      <button\n                        class=\"button px-2 mr-1 mb-2 bg-theme-12 text-white\"\n                      >\n                        <span class=\"w-5 h-5 flex items-center justify-center\">\n                          <Share2Icon class=\"w-4 h-4\" />\n                        </span>\n                      </button>\n                      <button class=\"button px-2 mr-1 mb-2 bg-theme-6 text-white\">\n                        <span class=\"w-5 h-5 flex items-center justify-center\">\n                          <TrashIcon class=\"w-4 h-4\" />\n                        </span>\n                      </button>\n                      <button\n                        class=\"button px-2 mr-1 mb-2 bg-gray-200 text-gray-600\"\n                      >\n                        <span class=\"w-5 h-5 flex items-center justify-center\">\n                          <ImageIcon class=\"w-4 h-4\" />\n                        </span>\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Icon Only Button -->\n      </div>\n    </div>\n  </div>\n</template>\n","import { render } from \"./Main.vue?vue&type=template&id=5005e548\"\nconst script = {}\nscript.render = render\n\nexport default script"],"sourceRoot":""}