{"version":3,"sources":["webpack:///./src/midone/views/regular-form/Main.vue","webpack:///./src/midone/views/regular-form/Main.vue?b37c"],"names":["class","id","data-target","type","placeholder","script","render"],"mappings":"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","file":"js/chunk-2d20f7b2.3397eb6a.js","sourcesContent":["<template>\n  <div>\n    <div class=\"intro-y flex items-center mt-8\">\n      <h2 class=\"text-lg font-medium mr-auto\">Regular Form</h2>\n    </div>\n    <div class=\"grid grid-cols-12 gap-6 mt-5\">\n      <div class=\"intro-y col-span-12 lg:col-span-6\">\n        <!-- BEGIN: Input -->\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\">Input</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=\"#input\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"input\" class=\"p-5\">\n            <div class=\"preview\">\n              <div>\n                <label>Input Text</label>\n                <input\n                  type=\"text\"\n                  class=\"input w-full border mt-2\"\n                  placeholder=\"Input text\"\n                />\n              </div>\n              <div class=\"mt-3\">\n                <label>Rounded</label>\n                <input\n                  type=\"text\"\n                  class=\"input w-full rounded-full border mt-2\"\n                  placeholder=\"Rounded\"\n                />\n              </div>\n              <div class=\"mt-3\">\n                <label>With Help</label>\n                <input\n                  type=\"text\"\n                  class=\"input w-full border mt-2\"\n                  placeholder=\"With help\"\n                />\n                <div class=\"text-xs text-gray-600 mt-2\">\n                  Lorem Ipsum is simply dummy text of the printing and\n                  typesetting industry.\n                </div>\n              </div>\n              <div class=\"mt-3\">\n                <label>Password</label>\n                <input\n                  type=\"password\"\n                  class=\"input w-full border mt-2\"\n                  placeholder=\"Password\"\n                />\n              </div>\n              <div class=\"mt-3\">\n                <label>Disabled</label>\n                <input\n                  type=\"text\"\n                  class=\"input w-full border mt-2 bg-gray-100 cursor-not-allowed\"\n                  placeholder=\"Disabled\"\n                  disabled\n                />\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-input\"\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-input\" 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                        <label>Input Text</label>\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border mt-2\"\n                          placeholder=\"Input text\"\n                        />\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Rounded</label>\n                        <input\n                          type=\"text\"\n                          class=\"input w-full rounded-full border mt-2\"\n                          placeholder=\"Rounded\"\n                        />\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>With Help</label>\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border mt-2\"\n                          placeholder=\"With help\"\n                        />\n                        <div class=\"text-xs text-gray-600 mt-2\">\n                          Lorem Ipsum is simply dummy text of the printing and\n                          typesetting industry.\n                        </div>\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Password</label>\n                        <input\n                          type=\"password\"\n                          class=\"input w-full border mt-2\"\n                          placeholder=\"Password\"\n                        />\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Disabled</label>\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border mt-2 bg-gray-100 cursor-not-allowed\"\n                          placeholder=\"Disabled\"\n                          disabled\n                        />\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Input -->\n        <!-- BEGIN: Input Sizing -->\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\">Input Sizing</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=\"#input-sizing\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"input-sizing\" class=\"p-5\">\n            <div class=\"preview\">\n              <input\n                type=\"text\"\n                class=\"input input--sm w-full border\"\n                placeholder=\"Input small\"\n              />\n              <input\n                type=\"text\"\n                class=\"input w-full border mt-2\"\n                placeholder=\"Input normal\"\n              />\n              <input\n                type=\"text\"\n                class=\"input input--lg w-full border mt-2\"\n                placeholder=\"Input large\"\n              />\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-input-sizing\"\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-input-sizing\" 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                      <input\n                        type=\"text\"\n                        class=\"input input--sm w-full border\"\n                        placeholder=\"Input small\"\n                      />\n                      <input\n                        type=\"text\"\n                        class=\"input w-full border mt-2\"\n                        placeholder=\"Input normal\"\n                      />\n                      <input\n                        type=\"text\"\n                        class=\"input input--lg w-full border mt-2\"\n                        placeholder=\"Input large\"\n                      />\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Input Sizing -->\n        <!-- BEGIN: Input Groups -->\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\">Input Groups</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=\"#input-groups\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"input-groups\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"relative\">\n                <div\n                  class=\"absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                >\n                  @\n                </div>\n                <input\n                  type=\"text\"\n                  class=\"input pl-12 w-full border col-span-4\"\n                  placeholder=\"Email\"\n                />\n              </div>\n              <div class=\"relative mt-2\">\n                <input\n                  type=\"text\"\n                  class=\"input pr-12 w-full border col-span-4\"\n                  placeholder=\"Price\"\n                />\n                <div\n                  class=\"absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                >\n                  .00\n                </div>\n              </div>\n              <div class=\"relative mt-2\">\n                <div\n                  class=\"absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                >\n                  @\n                </div>\n                <input\n                  type=\"text\"\n                  class=\"input px-12 w-full border col-span-4\"\n                  placeholder=\"Price\"\n                />\n                <div\n                  class=\"absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                >\n                  .00\n                </div>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-input-groups\"\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-input-groups\" 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 class=\"relative\">\n                        <div\n                          class=\"absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                        >\n                          @\n                        </div>\n                        <input\n                          type=\"text\"\n                          class=\"input pl-12 w-full border col-span-4\"\n                          placeholder=\"Email\"\n                        />\n                      </div>\n                      <div class=\"relative mt-2\">\n                        <input\n                          type=\"text\"\n                          class=\"input pr-12 w-full border col-span-4\"\n                          placeholder=\"Price\"\n                        />\n                        <div\n                          class=\"absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                        >\n                          .00\n                        </div>\n                      </div>\n                      <div class=\"relative mt-2\">\n                        <div\n                          class=\"absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                        >\n                          @\n                        </div>\n                        <input\n                          type=\"text\"\n                          class=\"input px-12 w-full border col-span-4\"\n                          placeholder=\"Price\"\n                        />\n                        <div\n                          class=\"absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600\"\n                        >\n                          .00\n                        </div>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Input Groups -->\n        <!-- BEGIN: Input State -->\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\">Input State</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=\"#input-state\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"input-state\" class=\"p-5\">\n            <div class=\"preview\">\n              <div>\n                <label>Input Success</label>\n                <input\n                  type=\"text\"\n                  class=\"input w-full border border-theme-9 mt-2\"\n                  placeholder=\"Input text\"\n                />\n                <div class=\"w-full grid grid-cols-12 gap-4 h-1 mt-3\">\n                  <div class=\"col-span-3 h-full rounded bg-theme-9\"></div>\n                  <div class=\"col-span-3 h-full rounded bg-theme-9\"></div>\n                  <div class=\"col-span-3 h-full rounded bg-theme-9\"></div>\n                  <div\n                    class=\"col-span-3 h-full rounded bg-gray-200 dark:bg-dark-1\"\n                  ></div>\n                </div>\n                <div class=\"text-theme-9 mt-2\">Strong password</div>\n              </div>\n              <div class=\"mt-3\">\n                <label>Input Warning</label>\n                <input\n                  type=\"text\"\n                  class=\"input w-full border border-theme-12 mt-2\"\n                  placeholder=\"Input text\"\n                />\n                <div class=\"text-theme-12 mt-2\">\n                  Attempting to reconnect to server...\n                </div>\n              </div>\n              <div class=\"mt-3\">\n                <label>Input Error</label>\n                <input\n                  type=\"text\"\n                  class=\"input w-full border border-theme-6 mt-2\"\n                  placeholder=\"Input text\"\n                />\n                <div class=\"text-theme-6 mt-2\">This field is required</div>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-input-state\"\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-input-state\" 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                        <label>Input Success</label>\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border border-theme-9 mt-2\"\n                          placeholder=\"Input text\"\n                        />\n                        <div class=\"w-full grid grid-cols-12 gap-4 h-1 mt-3\">\n                          <div class=\"col-span-3 h-full rounded bg-theme-9\"></div>\n                          <div class=\"col-span-3 h-full rounded bg-theme-9\"></div>\n                          <div class=\"col-span-3 h-full rounded bg-theme-9\"></div>\n                          <div\n                            class=\"col-span-3 h-full rounded bg-gray-200 dark:bg-dark-1\"\n                          ></div>\n                        </div>\n                        <div class=\"text-theme-9 mt-2\">Strong password</div>\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Input Warning</label>\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border border-theme-12 mt-2\"\n                          placeholder=\"Input text\"\n                        />\n                        <div class=\"text-theme-12 mt-2\">\n                          Attempting to reconnect to server...\n                        </div>\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Input Error</label>\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border border-theme-6 mt-2\"\n                          placeholder=\"Input text\"\n                        />\n                        <div class=\"text-theme-6 mt-2\">\n                          This field is required\n                        </div>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Input State -->\n        <!-- BEGIN: Select Options -->\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\">Select Options</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=\"#select-options\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"select-options\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"flex flex-col sm:flex-row items-center\">\n                <div class=\"sm:mt-2\">\n                  <select class=\"input input--sm border mr-2\">\n                    <option>Chris Evans</option>\n                    <option>Liam Neeson</option>\n                    <option>Daniel Craig</option>\n                  </select>\n                </div>\n                <div class=\"mt-2\">\n                  <select class=\"input border mr-2\">\n                    <option>Chris Evans</option>\n                    <option>Liam Neeson</option>\n                    <option>Daniel Craig</option>\n                  </select>\n                </div>\n                <div class=\"mt-2\">\n                  <select class=\"input input--lg border mr-2\">\n                    <option>Chris Evans</option>\n                    <option>Liam Neeson</option>\n                    <option>Daniel Craig</option>\n                  </select>\n                </div>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-select-options\"\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-select-options\" 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 class=\"flex flex-col sm:flex-row items-center\">\n                        <div class=\"sm:mt-2\">\n                          <select class=\"input input--sm border mr-2\">\n                            <option>Chris Evans</option>\n                            <option>Liam Neeson</option>\n                            <option>Daniel Craig</option>\n                          </select>\n                        </div>\n                        <div class=\"mt-2\">\n                          <select class=\"input border mr-2\">\n                            <option>Chris Evans</option>\n                            <option>Liam Neeson</option>\n                            <option>Daniel Craig</option>\n                          </select>\n                        </div>\n                        <div class=\"mt-2\">\n                          <select class=\"input input--lg border mr-2\">\n                            <option>Chris Evans</option>\n                            <option>Liam Neeson</option>\n                            <option>Daniel Craig</option>\n                          </select>\n                        </div>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Select Options -->\n      </div>\n      <div class=\"intro-y col-span-12 lg:col-span-6\">\n        <!-- BEGIN: Vertical Form -->\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\">Vertical Form</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=\"#vertical-form\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"vertical-form\" class=\"p-5\">\n            <div class=\"preview\">\n              <div>\n                <label>Email</label>\n                <input\n                  type=\"email\"\n                  class=\"input w-full border mt-2\"\n                  placeholder=\"example@gmail.com\"\n                />\n              </div>\n              <div class=\"mt-3\">\n                <label>Password</label>\n                <input\n                  type=\"password\"\n                  class=\"input w-full border mt-2\"\n                  placeholder=\"secret\"\n                />\n              </div>\n              <div\n                class=\"flex items-center text-gray-700 dark:text-gray-500 mt-5\"\n              >\n                <input\n                  id=\"vertical-remember-me\"\n                  type=\"checkbox\"\n                  class=\"input border mr-2\"\n                />\n                <label\n                  class=\"cursor-pointer select-none\"\n                  for=\"vertical-remember-me\"\n                  >Remember me</label\n                >\n              </div>\n              <button type=\"button\" class=\"button bg-theme-1 text-white mt-5\">\n                Login\n              </button>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-vertical-form\"\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-vertical-form\" 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                        <label>Email</label>\n                        <input\n                          type=\"email\"\n                          class=\"input w-full border mt-2\"\n                          placeholder=\"example@gmail.com\"\n                        />\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Password</label>\n                        <input\n                          type=\"password\"\n                          class=\"input w-full border mt-2\"\n                          placeholder=\"secret\"\n                        />\n                      </div>\n                      <div\n                        class=\"flex items-center text-gray-700 dark:text-gray-500 mt-5\"\n                      >\n                        <input\n                          id=\"vertical-remember-me\"\n                          type=\"checkbox\"\n                          class=\"input border mr-2\"\n                        />\n                        <label\n                          class=\"cursor-pointer select-none\"\n                          for=\"vertical-remember-me\"\n                          >Remember me</label\n                        >\n                      </div>\n                      <button\n                        type=\"button\"\n                        class=\"button bg-theme-1 text-white mt-5\"\n                      >\n                        Login\n                      </button>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Vertical Form -->\n        <!-- BEGIN: Horizontal Form -->\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\">Horizontal Form</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=\"#horizontal-form\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"horizontal-form\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"flex flex-col sm:flex-row items-center\">\n                <label class=\"w-full sm:w-20 sm:text-right sm:mr-5\"\n                  >Email</label\n                >\n                <input\n                  type=\"email\"\n                  class=\"input w-full border mt-2 flex-1\"\n                  placeholder=\"example@gmail.com\"\n                />\n              </div>\n              <div class=\"flex flex-col sm:flex-row items-center mt-3\">\n                <label class=\"w-full sm:w-20 sm:text-right sm:mr-5\"\n                  >Password</label\n                >\n                <input\n                  type=\"password\"\n                  class=\"input w-full border mt-2 flex-1\"\n                  placeholder=\"secret\"\n                />\n              </div>\n              <div\n                class=\"flex items-center text-gray-700 dark:text-gray-500 mt-5 sm:ml-20 sm:pl-5\"\n              >\n                <input\n                  id=\"horizontal-remember-me\"\n                  type=\"checkbox\"\n                  class=\"input border mr-2\"\n                />\n                <label\n                  class=\"cursor-pointer select-none\"\n                  for=\"horizontal-remember-me\"\n                  >Remember me</label\n                >\n              </div>\n              <div class=\"sm:ml-20 sm:pl-5 mt-5\">\n                <button type=\"button\" class=\"button bg-theme-1 text-white\">\n                  Login\n                </button>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-horizontal-form\"\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-horizontal-form\" 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 class=\"flex flex-col sm:flex-row items-center\">\n                        <label class=\"w-full sm:w-20 sm:text-right sm:mr-5\"\n                          >Email</label\n                        >\n                        <input\n                          type=\"email\"\n                          class=\"input w-full border mt-2 flex-1\"\n                          placeholder=\"example@gmail.com\"\n                        />\n                      </div>\n                      <div class=\"flex flex-col sm:flex-row items-center mt-3\">\n                        <label class=\"w-full sm:w-20 sm:text-right sm:mr-5\"\n                          >Password</label\n                        >\n                        <input\n                          type=\"password\"\n                          class=\"input w-full border mt-2 flex-1\"\n                          placeholder=\"secret\"\n                        />\n                      </div>\n                      <div\n                        class=\"flex items-center text-gray-700 dark:text-gray-500 mt-5 sm:ml-20 sm:pl-5\"\n                      >\n                        <input\n                          id=\"horizontal-remember-me\"\n                          type=\"checkbox\"\n                          class=\"input border mr-2\"\n                        />\n                        <label\n                          class=\"cursor-pointer select-none\"\n                          for=\"horizontal-remember-me\"\n                          >Remember me</label\n                        >\n                      </div>\n                      <div class=\"sm:ml-20 sm:pl-5 mt-5\">\n                        <button\n                          type=\"button\"\n                          class=\"button bg-theme-1 text-white\"\n                        >\n                          Login\n                        </button>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Horizontal Form -->\n        <!-- BEGIN: Inline Form -->\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\">Inline Form</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=\"#inline-form\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"inline-form\" class=\"p-5\">\n            <div class=\"preview\">\n              <div class=\"grid grid-cols-12 gap-2\">\n                <input\n                  type=\"text\"\n                  class=\"input w-full border col-span-4\"\n                  placeholder=\"Input inline 1\"\n                />\n                <input\n                  type=\"text\"\n                  class=\"input w-full border col-span-4\"\n                  placeholder=\"Input inline 2\"\n                />\n                <input\n                  type=\"text\"\n                  class=\"input w-full border col-span-4\"\n                  placeholder=\"Input inline 3\"\n                />\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-inline-form\"\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-inline-form\" 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 class=\"grid grid-cols-12 gap-2\">\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border col-span-4\"\n                          placeholder=\"Input inline 1\"\n                        />\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border col-span-4\"\n                          placeholder=\"Input inline 2\"\n                        />\n                        <input\n                          type=\"text\"\n                          class=\"input w-full border col-span-4\"\n                          placeholder=\"Input inline 3\"\n                        />\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Inline Form -->\n        <!-- BEGIN: Checkbox & Switch -->\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\">Checkbox & Switch</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=\"#checkbox-switch\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"checkbox-switch\" class=\"p-5\">\n            <div class=\"preview\">\n              <div>\n                <label>Vertical Checkbox</label>\n                <div\n                  class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                >\n                  <input\n                    id=\"vertical-checkbox-chris-evans\"\n                    type=\"checkbox\"\n                    class=\"input border mr-2\"\n                  />\n                  <label\n                    class=\"cursor-pointer select-none\"\n                    for=\"vertical-checkbox-chris-evans\"\n                    >Chris evans</label\n                  >\n                </div>\n                <div\n                  class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                >\n                  <input\n                    id=\"vertical-checkbox-liam-neeson\"\n                    type=\"checkbox\"\n                    class=\"input border mr-2\"\n                  />\n                  <label\n                    class=\"cursor-pointer select-none\"\n                    for=\"vertical-checkbox-liam-neeson\"\n                    >Liam Neeson</label\n                  >\n                </div>\n                <div\n                  class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                >\n                  <input\n                    id=\"vertical-checkbox-daniel-craig\"\n                    type=\"checkbox\"\n                    class=\"input border mr-2\"\n                  />\n                  <label\n                    class=\"cursor-pointer select-none\"\n                    for=\"vertical-checkbox-daniel-craig\"\n                    >Daniel Craig</label\n                  >\n                </div>\n              </div>\n              <div class=\"mt-3\">\n                <label>Horizontal Checkbox</label>\n                <div class=\"flex flex-col sm:flex-row mt-2\">\n                  <div\n                    class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2\"\n                  >\n                    <input\n                      id=\"horizontal-checkbox-chris-evans\"\n                      type=\"checkbox\"\n                      class=\"input border mr-2\"\n                    />\n                    <label\n                      class=\"cursor-pointer select-none\"\n                      for=\"horizontal-checkbox-chris-evans\"\n                      >Chris evans</label\n                    >\n                  </div>\n                  <div\n                    class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0\"\n                  >\n                    <input\n                      id=\"horizontal-checkbox-liam-neeson\"\n                      type=\"checkbox\"\n                      class=\"input border mr-2\"\n                    />\n                    <label\n                      class=\"cursor-pointer select-none\"\n                      for=\"horizontal-checkbox-liam-neeson\"\n                      >Liam Neeson</label\n                    >\n                  </div>\n                  <div\n                    class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0\"\n                  >\n                    <input\n                      id=\"horizontal-checkbox-daniel-craig\"\n                      type=\"checkbox\"\n                      class=\"input border mr-2\"\n                    />\n                    <label\n                      class=\"cursor-pointer select-none\"\n                      for=\"horizontal-checkbox-daniel-craig\"\n                      >Daniel Craig</label\n                    >\n                  </div>\n                </div>\n              </div>\n              <div class=\"mt-3\">\n                <label>Switch</label>\n                <div class=\"mt-2\">\n                  <input type=\"checkbox\" class=\"input input--switch border\" />\n                </div>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-checkbox-switch\"\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-checkbox-switch\" 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                        <label>Vertical Checkbox</label>\n                        <div\n                          class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                        >\n                          <input\n                            id=\"vertical-checkbox-chris-evans\"\n                            type=\"checkbox\"\n                            class=\"input border mr-2\"\n                          />\n                          <label\n                            class=\"cursor-pointer select-none\"\n                            for=\"vertical-checkbox-chris-evans\"\n                            >Chris evans</label\n                          >\n                        </div>\n                        <div\n                          class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                        >\n                          <input\n                            id=\"vertical-checkbox-liam-neeson\"\n                            type=\"checkbox\"\n                            class=\"input border mr-2\"\n                          />\n                          <label\n                            class=\"cursor-pointer select-none\"\n                            for=\"vertical-checkbox-liam-neeson\"\n                            >Liam Neeson</label\n                          >\n                        </div>\n                        <div\n                          class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                        >\n                          <input\n                            id=\"vertical-checkbox-daniel-craig\"\n                            type=\"checkbox\"\n                            class=\"input border mr-2\"\n                          />\n                          <label\n                            class=\"cursor-pointer select-none\"\n                            for=\"vertical-checkbox-daniel-craig\"\n                            >Daniel Craig</label\n                          >\n                        </div>\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Horizontal Checkbox</label>\n                        <div class=\"flex flex-col sm:flex-row mt-2\">\n                          <div class=\"flex items-center text-gray-700 mr-2\">\n                            <input\n                              id=\"horizontal-checkbox-chris-evans\"\n                              type=\"checkbox\"\n                              class=\"input border mr-2\"\n                            />\n                            <label\n                              class=\"cursor-pointer select-none\"\n                              for=\"horizontal-checkbox-chris-evans\"\n                              >Chris evans</label\n                            >\n                          </div>\n                          <div\n                            class=\"flex items-center text-gray-700 mr-2 mt-2 sm:mt-0\"\n                          >\n                            <input\n                              id=\"horizontal-checkbox-liam-neeson\"\n                              type=\"checkbox\"\n                              class=\"input border mr-2\"\n                            />\n                            <label\n                              class=\"cursor-pointer select-none\"\n                              for=\"horizontal-checkbox-liam-neeson\"\n                              >Liam Neeson</label\n                            >\n                          </div>\n                          <div\n                            class=\"flex items-center text-gray-700 mr-2 mt-2 sm:mt-0\"\n                          >\n                            <input\n                              id=\"horizontal-checkbox-daniel-craig\"\n                              type=\"checkbox\"\n                              class=\"input border mr-2\"\n                            />\n                            <label\n                              class=\"cursor-pointer select-none\"\n                              for=\"horizontal-checkbox-daniel-craig\"\n                              >Daniel Craig</label\n                            >\n                          </div>\n                        </div>\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Switch</label>\n                        <div class=\"mt-2\">\n                          <input\n                            type=\"checkbox\"\n                            class=\"input input--switch border\"\n                          />\n                        </div>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Checkbox & Switch -->\n        <!-- BEGIN: Radio 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\">Radio</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=\"#radio\"\n                class=\"show-code input input--switch border\"\n                type=\"checkbox\"\n              />\n            </div>\n          </div>\n          <div id=\"radio\" class=\"p-5\">\n            <div class=\"preview\">\n              <div>\n                <label>Vertical Radio Button</label>\n                <div\n                  class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                >\n                  <input\n                    id=\"vertical-radio-chris-evans\"\n                    type=\"radio\"\n                    class=\"input border mr-2\"\n                    name=\"vertical_radio_button\"\n                    value=\"vertical-radio-chris-evans\"\n                  />\n                  <label\n                    class=\"cursor-pointer select-none\"\n                    for=\"vertical-radio-chris-evans\"\n                    >Chris evans</label\n                  >\n                </div>\n                <div\n                  class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                >\n                  <input\n                    id=\"vertical-radio-liam-neeson\"\n                    type=\"radio\"\n                    class=\"input border mr-2\"\n                    name=\"vertical_radio_button\"\n                    value=\"vertical-radio-liam-neeson\"\n                  />\n                  <label\n                    class=\"cursor-pointer select-none\"\n                    for=\"vertical-radio-liam-neeson\"\n                    >Liam Neeson</label\n                  >\n                </div>\n                <div\n                  class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                >\n                  <input\n                    id=\"vertical-radio-daniel-craig\"\n                    type=\"radio\"\n                    class=\"input border mr-2\"\n                    name=\"vertical_radio_button\"\n                    value=\"vertical-radio-daniel-craig\"\n                  />\n                  <label\n                    class=\"cursor-pointer select-none\"\n                    for=\"vertical-radio-daniel-craig\"\n                    >Daniel Craig</label\n                  >\n                </div>\n              </div>\n              <div class=\"mt-3\">\n                <label>Horizontal Radio Button</label>\n                <div class=\"flex flex-col sm:flex-row mt-2\">\n                  <div\n                    class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2\"\n                  >\n                    <input\n                      id=\"horizontal-radio-chris-evans\"\n                      type=\"radio\"\n                      class=\"input border mr-2\"\n                      name=\"horizontal_radio_button\"\n                      value=\"horizontal-radio-chris-evans\"\n                    />\n                    <label\n                      class=\"cursor-pointer select-none\"\n                      for=\"horizontal-radio-chris-evans\"\n                      >Chris Evans</label\n                    >\n                  </div>\n                  <div\n                    class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0\"\n                  >\n                    <input\n                      id=\"horizontal-radio-liam-neeson\"\n                      type=\"radio\"\n                      class=\"input border mr-2\"\n                      name=\"horizontal_radio_button\"\n                      value=\"horizontal-radio-liam-neeson\"\n                    />\n                    <label\n                      class=\"cursor-pointer select-none\"\n                      for=\"horizontal-radio-liam-neeson\"\n                      >Liam Neeson</label\n                    >\n                  </div>\n                  <div\n                    class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0\"\n                  >\n                    <input\n                      id=\"horizontal-radio-daniel-craig\"\n                      type=\"radio\"\n                      class=\"input border mr-2\"\n                      name=\"horizontal_radio_button\"\n                      value=\"horizontal-radio-daniel-craig\"\n                    />\n                    <label\n                      class=\"cursor-pointer select-none\"\n                      for=\"horizontal-radio-daniel-craig\"\n                      >Daniel Craig</label\n                    >\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"source-code hidden\">\n              <button\n                data-target=\"#copy-radio\"\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-radio\" 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                        <label>Vertical Radio Button</label>\n                        <div\n                          class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                        >\n                          <input\n                            id=\"vertical-radio-chris-evans\"\n                            type=\"radio\"\n                            class=\"input border mr-2\"\n                            name=\"vertical_radio_button\"\n                            value=\"vertical-radio-chris-evans\"\n                          />\n                          <label\n                            class=\"cursor-pointer select-none\"\n                            for=\"vertical-radio-chris-evans\"\n                            >Chris evans</label\n                          >\n                        </div>\n                        <div\n                          class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                        >\n                          <input\n                            id=\"vertical-radio-liam-neeson\"\n                            type=\"radio\"\n                            class=\"input border mr-2\"\n                            name=\"vertical_radio_button\"\n                            value=\"vertical-radio-liam-neeson\"\n                          />\n                          <label\n                            class=\"cursor-pointer select-none\"\n                            for=\"vertical-radio-liam-neeson\"\n                            >Liam Neeson</label\n                          >\n                        </div>\n                        <div\n                          class=\"flex items-center text-gray-700 dark:text-gray-500 mt-2\"\n                        >\n                          <input\n                            id=\"vertical-radio-daniel-craig\"\n                            type=\"radio\"\n                            class=\"input border mr-2\"\n                            name=\"vertical_radio_button\"\n                            value=\"vertical-radio-daniel-craig\"\n                          />\n                          <label\n                            class=\"cursor-pointer select-none\"\n                            for=\"vertical-radio-daniel-craig\"\n                            >Daniel Craig</label\n                          >\n                        </div>\n                      </div>\n                      <div class=\"mt-3\">\n                        <label>Horizontal Radio Button</label>\n                        <div class=\"flex flex-col sm:flex-row mt-2\">\n                          <div\n                            class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2\"\n                          >\n                            <input\n                              id=\"horizontal-radio-chris-evans\"\n                              type=\"radio\"\n                              class=\"input border mr-2\"\n                              name=\"horizontal_radio_button\"\n                              value=\"horizontal-radio-chris-evans\"\n                            />\n                            <label\n                              class=\"cursor-pointer select-none\"\n                              for=\"horizontal-radio-chris-evans\"\n                              >Chris Evans</label\n                            >\n                          </div>\n                          <div\n                            class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0\"\n                          >\n                            <input\n                              id=\"horizontal-radio-liam-neeson\"\n                              type=\"radio\"\n                              class=\"input border mr-2\"\n                              name=\"horizontal_radio_button\"\n                              value=\"horizontal-radio-liam-neeson\"\n                            />\n                            <label\n                              class=\"cursor-pointer select-none\"\n                              for=\"horizontal-radio-liam-neeson\"\n                              >Liam Neeson</label\n                            >\n                          </div>\n                          <div\n                            class=\"flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0\"\n                          >\n                            <input\n                              id=\"horizontal-radio-daniel-craig\"\n                              type=\"radio\"\n                              class=\"input border mr-2\"\n                              name=\"horizontal_radio_button\"\n                              value=\"horizontal-radio-daniel-craig\"\n                            />\n                            <label\n                              class=\"cursor-pointer select-none\"\n                              for=\"horizontal-radio-daniel-craig\"\n                              >Daniel Craig</label\n                            >\n                          </div>\n                        </div>\n                      </div>\n                    </textarea>\n                  </code>\n                </Highlight>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- END: Radio Button -->\n      </div>\n    </div>\n  </div>\n</template>\n","import { render } from \"./Main.vue?vue&type=template&id=5edb9656\"\nconst script = {}\nscript.render = render\n\nexport default script"],"sourceRoot":""}