{"version":"5.x-dev","reference":"5e9999afd04460100238ebccae9c18a7188c19e7","locale":"en","messages":{"description":"All MoonShine 5.x-dev components as HTML Web Components.","skip":"Skip to component","catalog_label":"Component catalog","search":"Find a component","search_placeholder":"Name, tag or class…","loading":"Loading catalog…","components_label":"Components","empty":"No components found.","installation_link":"How to install","home":"Back to website ↗","language":"Language","page_title":"Web Components Storybook","intro":"Native HTML tags. Original MoonShine styles and behavior.","width":"Width","responsive":"Responsive","palette":"Palette","dark_theme":"Dark theme","light_theme":"Light theme","reset":"Reset","preview_title":"Interactive MoonShine component preview","copy":"Copy","copied":"Copied","html_caption":"Once the module is loaded, the tag works in plain HTML.","attributes":"Attributes","controls_caption":"Attributes apply to the live example. Fields emit native input and change events and expose value, checked and disabled; setContent() replaces a component's content. error=\"Message\" turns on the validation error state; an empty error only highlights the field.","installation_title":"One module. Plain HTML.","installation_intro":"The module registers all tags and loads the CSS, palette and JavaScript from the installed MoonShine 5.x-dev. Light DOM keeps the original styles and native forms working, but main.css (including Tailwind preflight) and Alpine.js apply to the whole page — on third-party sites with their own styles, embed the components in an iframe. EasyMDE is loaded only when the page contains moonshine-field-markdown.","catalog_intro":"HTML templates are loaded from the","catalog_link":"catalog","catalog_outro":"generated from the installed MoonShine. Examples and Custom Elements contain no Blade. Relationship demos use local data; Eloquent operations, search and persistence require your application API.","noscript":"Enable JavaScript to use Web Components.","count":"{shown} of {total} components","build_info":"{total} components · MoonShine {version} · {reference}","default":"default","content_note":"Content and structure are defined in the HTML example.","clipboard_error":"Clipboard access is unavailable. Select and copy the HTML from the code block.","catalog_error":"Could not load the catalog: {error}","loading_error":"Loading failed","component_not_found":"Component not found","hidden_note":"Document, utility or hidden component. Inspect its DOM output; the HTML tag is shown below the preview.","form_demo":"Form demo: {data}","link_demo":"Link demo: {url}","preview_error":"Preview error: {error}","save":"Save","title":"Title","relationship_note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","preset_note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","group_components":"Components","group_fields":"Fields","group_layout":"Layout","group_relationships":"Relationships","group_input_extensions":"Input extensions","group_html_primitives":"HTML primitives","group_presets":"Ready-made forms and actions","live_preview":"Live preview","components_button":"Components","close_catalog":"Close catalog","previous_component":"← Previous","next_component":"Next →","json_error":"Invalid JSON — the example was not changed.","table_note":"Inside a native <table> the HTML parser moves custom tags out of the table. Put rows and cells into <moonshine-table-builder> or <moonshine-table>, which turns them into <tr>, <td> and <th>. On its own the tag renders inside its own table.","tab_note":"Use the tab inside <moonshine-tabs>: the title comes from the label attribute and the content from the child nodes.","app_note":"Complete AppLayout shell: sidebar, header with breadcrumbs and search, content and footer. The tag content goes into the content area.","desktop_note":"Sidebars are visible on wide screens, so the preview opens at 1280 px. On phones MoonShine opens them with the burger — see the AppLayout example.","mobile_note":"The mobile bar is visible on narrow screens only, so the preview opens at 390 px."},"entries":[{"name":"Core/Paginator/Paginator","source":"MoonShine\\Core\\Paginator\\Paginator","view":"moonshine::components.pagination","group":"Components","tag":"moonshine-core-paginator","html":"<!-- Pagination -->\n    <div class=\"pagination\">\n        <ul class=\"pagination-list\">\n                            <li class=\"pagination-item\">\n                    <a href=\"#page-1\"\n                                              class=\"pagination-link pagination-link--first\"\n                       title=\"&laquo; Previous\"\n                    >\n                        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5\"/>\n</svg>\n    </div>\n                    </a>\n                </li>\n            \n                            \n                \n                                <li class=\"pagination-item\">\n                    <a href=\"#page-1\"\n                                              class=\"pagination-link \"\n                    >\n                        1\n                    </a>\n                </li>\n                                            \n                \n                                <li class=\"pagination-item\">\n                    <a href=\"#page-2\"\n                                              class=\"pagination-link  _is-active \"\n                    >\n                        2\n                    </a>\n                </li>\n                                            \n                \n                                <li class=\"pagination-item\">\n                    <a href=\"#page-3\"\n                                              class=\"pagination-link \"\n                    >\n                        3\n                    </a>\n                </li>\n                            \n                            <li class=\"pagination-item\">\n                    <a href=\"#page-3\"\n                                              class=\"pagination-link pagination-link--last\"\n                       title=\"Next &raquo;\"\n                    >\n                        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5\"/>\n</svg>\n    </div>\n                    </a>\n                </li>\n                    </ul>\n        <div class=\"pagination-results\">\n            Showing\n                            3\n                to\n                4\n                        of\n            6\n            results\n        </div>\n    </div>\n    <!-- END: Pagination -->\n","attributes":[],"example":"<moonshine-core-paginator total=\"120\" per-page=\"10\" current=\"3\" href=\"?page={page}\"></moonshine-core-paginator>","props":[{"name":"total","type":"number","min":0,"render":true},{"name":"per-page","type":"number","min":1,"render":true},{"name":"current","type":"number","min":1,"render":true},{"name":"href","type":"text","render":true}],"i18n":{"showing":"Showing","of":"of","to":"to","results":"results","previous":"&laquo; Previous","next":"Next &raquo;"}},{"name":"Crud/Buttons/CreateButton","source":"MoonShine\\Crud\\Buttons\\CreateButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-create-button","html":"<a class=\"btn btn-primary\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">__MS_LABEL__</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-ms_instance_form`)\" name=\"title\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Create"},"example":"<moonshine-create-button label=\"Create\"></moonshine-create-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Crud/Buttons/DeleteButton","source":"MoonShine\\Crud\\Buttons\\DeleteButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-delete-button","html":"<a class=\"btn btn-error\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_confirm&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_confirm.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Delete</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"default\" data-field-selector=\"_component_name\" :id=\"$id(`field-default`)\" name=\"_component_name\" />\n\n            <div class=\"heading\">\n    <div >\n        Are you sure?\n    </div>\n</div>\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-error\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Delete\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Delete"},"example":"<moonshine-delete-button label=\"Delete\"></moonshine-delete-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Crud/Buttons/DetailButton","source":"MoonShine\\Crud\\Buttons\\DetailButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-detail-button","html":"<a class=\"btn\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">__MS_LABEL__</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            0,\n            0,\n            0,\n            0,\n            null        )\"\n        @table_empty_row_added:default.window='add(true)'        @table_reindex:default.window='resolveReindex'                        \n    >\n        <div >\n    <!-- Table -->\n    <div class=\"table-container\">        <div class=\"table-responsive\">\n            <table class=\"table table-list\" data-name=\"default\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td class=\"space-elements table-grid\">\n    <div class=\"grid grid-cols-12 gap-2\">\n    <div class=\"col-span-12 xl:col-span-2 space-elements\">\n        <div class=\"form-label\">\n            ID\n        </div>\n    </div>\n    <div class=\"col-span-12 xl:col-span-10 space-elements\">\n        <div >\n            1\n        </div>\n    </div>\n</div>\n<div class=\"grid grid-cols-12 gap-2\">\n    <div class=\"col-span-12 xl:col-span-2 space-elements\">\n        <div class=\"form-label\">\n            Title\n        </div>\n    </div>\n    <div class=\"col-span-12 xl:col-span-10 space-elements\">\n        <div >\n            <div class=\"text-ellipsis\">MoonShine</div>\n        </div>\n    </div>\n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n    </div>\n</div>\n    </div>\n</div>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Show"},"example":"<moonshine-detail-button label=\"Show\"></moonshine-detail-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Crud/Buttons/EditButton","source":"MoonShine\\Crud\\Buttons\\EditButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-edit-button","html":"<a class=\"btn btn-primary\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">__MS_LABEL__</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-ms_instance_form`)\" name=\"title\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Edit"},"example":"<moonshine-edit-button label=\"Edit\"></moonshine-edit-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Crud/Buttons/FiltersButton","source":"MoonShine\\Crud\\Buttons\\FiltersButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-filters-button","html":"<a class=\"btn btn-secondary\" href=\"#\" x-on:click.prevent=\"$dispatch(&#039;off_canvas_toggled:ms_instance_canvas&#039;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"offCanvas(\n    '',\n    '',\n    '1')\"\n    \n>\n    \n    <template x-teleport=\"body\">\n        <div\n            class=\"offcanvas-template\"\n            @off_canvas_toggled:ms_instance_canvas.window='toggleCanvas'        >\n            <div\n                x-show=\"open\"\n                x-bind=\"dismissCanvas\"\n                                    x-transition:enter=\"transition ease-out duration-300\"\n                    x-transition:enter-start=\"opacity-0 translate-x-full\"\n                    x-transition:enter-end=\"opacity-100 translate-x-0\"\n                    x-transition:leave=\"transition ease-in duration-150\"\n                    x-transition:leave-start=\"opacity-100 translate-x-0\"\n                    x-transition:leave-end=\"opacity-0 translate-x-full\"\n                                class=\"offcanvas offcanvas-right\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n            >\n                <div class=\"offcanvas-header\">\n                    <h5 class=\"offcanvas-title\">__MS_LABEL__</h5>\n                    <button\n                        type=\"button\"\n                        class=\"offcanvas-close btn-fit\"\n                        @click.prevent=\"toggleCanvas\"\n                        aria-label=\"Close\"\n                    >\n                        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                    </button>\n                </div>\n                <div class=\"offcanvas-body\">\n                    \n                    <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_filters.window=\"formReset\" @form_submit:ms_instance_filters.window=\"submit\" @show_when_refresh:ms_instance_filters.window=\"whenFieldsInit\" data-component=\"ms_instance_filters\" x-data=\"formBuilder(&#039;ms_instance_filters&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_filters\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_filters`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"search\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_filters']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_filters')\"\n        class=\"form-label\"\n>\n    Search\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-ms_instance_filters`)\" name=\"search\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"status\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_filters']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_filters')\"\n        class=\"form-label\"\n>\n    Status\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <select\n                    x-data=\"select('', [], [])\"\n                class=\"\" data-validation-field=\"status\" :id=\"$id(`field-ms_instance_filters`)\" name=\"status\" x-on:change=\"onChangeField($event)\"\n>\n            \n                                    <option                         value=\"active\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Active\n                </option>\n                        </select>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Filters\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                </div>\n            </div>\n            <div x-show=\"open\" x-transition.opacity class=\"offcanvas-backdrop\"></div>\n        </div>\n    </template>\n</div>\n\n    </template>\n","attributes":{"label":"Filters"},"example":"<moonshine-filters-button label=\"Filters\"></moonshine-filters-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Crud/Buttons/MassDeleteButton","source":"MoonShine\\Crud\\Buttons\\MassDeleteButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-mass-delete-button","html":"<a class=\"btn btn-error\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_confirm&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_confirm.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Delete</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"default\" data-field-selector=\"_component_name\" :id=\"$id(`field-default`)\" name=\"_component_name\" />\n\n            <div class=\"heading\">\n    <div >\n        Are you sure?\n    </div>\n</div>\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-error\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Delete\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Delete"},"example":"<moonshine-mass-delete-button label=\"Delete\"></moonshine-mass-delete-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Crud/Components/Fragment","source":"MoonShine\\Crud\\Components\\Fragment","view":"moonshine::components.fragment","group":"Components","tag":"moonshine-fragment","html":"<div @fragment_updated:ms_instance_fragment.window=\"fragmentUpdate(``,null)\" x-data=\"fragment(&#039;https:\\/\\/getmoonshine.app\\/storybook\\/catalog.json?_lang=en\\u0026_fragment-load=ms_instance_fragment&#039;)\">\n        <slot>MoonShine</slot>\n\n\n        \n    </div>\n\n\n","attributes":[],"example":"<moonshine-fragment>MoonShine Web Component</moonshine-fragment>","props":[]},{"name":"Crud/Components/Layout/Locales","source":"MoonShine\\Crud\\Components\\Layout\\Locales","view":"moonshine::components.layout.locales","group":"Layout","tag":"moonshine-layout-locales","html":"<!-- Languages -->\n<div class=\"languages\">\n    <div x-data=\"dropdown\"\n     @click.outside=\"closeDropdown\"\n     data-dropdown-strategy=\"fixed\"\n     data-dropdown-placement=\"bottom-end\"\n     data-searchable=\"\"\n     class=\"dropdown\"\n>\n    <button type=\"button\" @click.prevent=\"toggleDropdown\" class=\"dropdown-btn\">\n        <a \n                class=\"languages-btn dropdown-btn\"\n                :class=\"open && '_is-opened'\"\n            >\n                <div class=\"icon-wrapper text-current languages-btn-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802\"/>\n</svg>\n    </div>\n                <div class=\"icon-wrapper text-current languages-btn-arrow\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"/>\n</svg>\n    </div>\n            </a>\n    </button>\n\n    <div class=\"dropdown-body\">\n        \n        <div class=\"dropdown-content\">\n                            <ul class=\"languages-menu dropdown-menu\">\n                            <li class=\"languages-item dropdown-menu-item\">\n                    <a\n                        href=\"#en\"\n                        class=\"languages-link dropdown-menu-link\"\n                    >\n                        English\n                    </a>\n                </li>\n                            <li class=\"languages-item dropdown-menu-item\">\n                    <a\n                        href=\"#ru\"\n                        class=\"languages-link dropdown-menu-link\"\n                    >\n                        Русский\n                    </a>\n                </li>\n                    </ul>\n            \n                    </div>\n\n            </div>\n</div>\n</div>\n<!-- END: Languages -->\n","attributes":[],"example":"<moonshine-layout-locales><a href=\"?_lang=en\">English</a><a href=\"?_lang=ru\">Русский</a></moonshine-layout-locales>","props":[]},{"name":"Crud/Components/Layout/Notifications","source":"MoonShine\\Crud\\Components\\Layout\\Notifications","view":"moonshine::components.layout.notifications","group":"Layout","tag":"moonshine-layout-notifications","html":"<!-- Notifications -->\n    <div class=\"notifications\">\n        <div x-data=\"dropdown\"\n     @click.outside=\"closeDropdown\"\n     data-dropdown-strategy=\"fixed\"\n     data-dropdown-placement=\"bottom-end\"\n     data-searchable=\"\"\n     class=\"dropdown\"\n>\n    <button type=\"button\" @click.prevent=\"toggleDropdown\" class=\"dropdown-btn notifications-trigger\">\n        <span class=\"notifications-trigger-dot\"></span>\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"/>\n</svg>\n    </div>\n    </button>\n\n    <div class=\"dropdown-body w-[264px] xs:w-80\">\n                    <div class=\"dropdown-heading\">Notifications</div>\n        \n        <div class=\"dropdown-content\">\n                            <div class=\"notifications-item\">\n                    <form action=\"/\"\n                          method=\"POST\"\n                          class=\"notifications-remove\"\n                    >\n                        \n                        <button type=\"submit\"\n                                title=\"Mark as read\"\n                        >\n                            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                        </button>\n                    </form>\n\n                    <div class=\"notifications-category text-info\">\n                        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"/>\n</svg>\n    </div>\n                    </div>\n\n                    <div class=\"notifications-content\">\n                        <p class=\"notifications-text\">Welcome to MoonShine 5</p>\n\n                        \n                        <span class=\"notifications-time\">10.11.2026 00:00</span>\n                    </div>\n                </div>\n            \n                    </div>\n\n                    <div class=\"dropdown-footer\">\n                <form action=\"#\" method=\"POST\">\n                    \n                    <button type=\"submit\" class=\"notifications-read\">\n                        Read all\n                    </button>\n                </form>\n            </div>\n            </div>\n</div>\n    </div>\n    <!-- END: Notifications-->\n","attributes":[],"example":"<moonshine-layout-notifications items='[{\"message\":\"Welcome to MoonShine 5\",\"date\":\"10.11.2026 09:00\",\"color\":\"info\"},{\"message\":\"Backup finished\",\"date\":\"10.11.2026 10:30\",\"color\":\"success\"}]'></moonshine-layout-notifications>","props":[{"name":"items","type":"json","render":true}]},{"name":"Crud/Components/Layout/Search","source":"MoonShine\\Crud\\Components\\Layout\\Search","view":"moonshine::components.layout.search","group":"Layout","tag":"moonshine-layout-search","html":"<div\n        x-data=\"{\n            isPopover: false,\n            observer: null,\n            init() {\n                this.observer = new ResizeObserver(entries => {\n                    for (let entry of entries) {\n                        const width = entry.contentRect.width;\n                        this.isPopover = width < 100;\n                    }\n                });\n                this.observer.observe(this.$el.parentElement);\n            },\n            destroy() {\n                this.observer.disconnect();\n            }\n        }\"\n        x-init=\"init\"\n        x-on:destroy.window=\"destroy\"\n        class=\"search-wrapper\"\n    >\n        <span\n    @popover_toggled:default.window=\"toggle\" x-show=\"isPopover\"\n    class=\"popover-trigger\"\n    title=\"\"\n    x-data=\"popover({placement: 'auto'})\"\n>\n    <button class=\"flex justify-center w-full search-form-show\">\n                    <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n                </button>\n    <div x-ignore class=\"hidden popover-body-content\"><div class=\"search\">\n                <form\n    class=\"search-form\" method=\"get\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" x-ref=\"searchForm\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n    \n            <div x-data=\"JSON.parse(&#039;{\\u0022searchValue\\u0022:\\u0022\\u0022,\\u0022hasRequestValue\\u0022:false,\\u0022isCtrlPressed\\u0022:false,\\u0022isKPressed\\u0022:false}&#039;)\" style=\"display: inline;\" >\n            <input class=\"form-input search-form-field\" type=\"search\" value=\"\" data-field-selector=\"search\" :id=\"$id(`field-default`)\" name=\"search\" x-ref=\"searchInput\" @keyup.ctrl.k.window=\"$refs.searchInput.focus()\" @keyup.ctrl.period.window=\"$refs.searchInput.focus()\" @input.debounce.300ms=\"\" placeholder=\"Search\" x-model=\"searchValue\" x-on:change=\"onChangeField($event)\"\n/>\n\n            <button type=\"submit\" class=\"search-form-submit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <button type=\"button\" class=\"search-form-clear\" x-show=\"searchValue!=&#039;&#039;\" x-on:click=\"searchValue = &quot;&quot;; $refs.searchInput.value = &quot;&quot;\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <div @keydown.meta.window=\"isCtrlPressed = true\" @keyup.meta.window=\"isCtrlPressed = false\" @keydown.control.window=\"isCtrlPressed = true\" @keyup.control.window=\"isCtrlPressed = false\" @keydown.k.window=\"isKPressed = true; if (isCtrlPressed) { $refs.searchInput.focus(); $event.preventDefault() }\" @keyup.k.window=\"isKPressed = false\" class=\"search-button-keys\" x-show=\"searchValue==&#039;&#039;\" >\n            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isCtrlPressed }\"\n                                x-text=\"`${(navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone') ? '⌘' : '^'}`\">^</kbd>\n                            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isKPressed }\"\n                            >K</kbd>\n                        \n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    \n    </form>\n\n            </div></div>\n</span>\n\n        <div class=\"search\" x-show=\"!isPopover\">\n            <form\n    class=\"search-form\" method=\"get\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" x-ref=\"searchForm\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n    \n            <div x-data=\"JSON.parse(&#039;{\\u0022searchValue\\u0022:\\u0022\\u0022,\\u0022hasRequestValue\\u0022:false,\\u0022isCtrlPressed\\u0022:false,\\u0022isKPressed\\u0022:false}&#039;)\" style=\"display: inline;\" >\n            <input class=\"form-input search-form-field\" type=\"search\" value=\"\" data-field-selector=\"search\" :id=\"$id(`field-default`)\" name=\"search\" x-ref=\"searchInput\" @keyup.ctrl.k.window=\"$refs.searchInput.focus()\" @keyup.ctrl.period.window=\"$refs.searchInput.focus()\" @input.debounce.300ms=\"\" placeholder=\"Search\" x-model=\"searchValue\" x-on:change=\"onChangeField($event)\"\n/>\n\n            <button type=\"submit\" class=\"search-form-submit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <button type=\"button\" class=\"search-form-clear\" x-show=\"searchValue!=&#039;&#039;\" x-on:click=\"searchValue = &quot;&quot;; $refs.searchInput.value = &quot;&quot;\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <div @keydown.meta.window=\"isCtrlPressed = true\" @keyup.meta.window=\"isCtrlPressed = false\" @keydown.control.window=\"isCtrlPressed = true\" @keyup.control.window=\"isCtrlPressed = false\" @keydown.k.window=\"isKPressed = true; if (isCtrlPressed) { $refs.searchInput.focus(); $event.preventDefault() }\" @keyup.k.window=\"isKPressed = false\" class=\"search-button-keys\" x-show=\"searchValue==&#039;&#039;\" >\n            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isCtrlPressed }\"\n                                x-text=\"`${(navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone') ? '⌘' : '^'}`\">^</kbd>\n                            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isKPressed }\"\n                            >K</kbd>\n                        \n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    \n    </form>\n\n        </div>\n    </div>\n","attributes":[],"example":"<moonshine-layout-search></moonshine-layout-search>","props":[]},{"name":"Crud/Components/Paginator","source":"MoonShine\\Crud\\Components\\Paginator","view":"moonshine::components.pagination","group":"Components","tag":"moonshine-paginator","html":"<!-- Pagination -->\n    <div class=\"pagination\">\n        <ul class=\"pagination-list\">\n                            <li class=\"pagination-item\">\n                    <a href=\"#page?_lang=en&amp;page=1\"\n                                              class=\"pagination-link pagination-link--first\"\n                       title=\"&laquo; Previous\"\n                    >\n                        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5\"/>\n</svg>\n    </div>\n                    </a>\n                </li>\n            \n                            \n                \n                                <li class=\"pagination-item\">\n                    <a href=\"#page?_lang=en&amp;page=1\"\n                                              class=\"pagination-link \"\n                    >\n                        1\n                    </a>\n                </li>\n                                            \n                \n                                <li class=\"pagination-item\">\n                    <a href=\"#page?_lang=en&amp;page=2\"\n                                              class=\"pagination-link  _is-active \"\n                    >\n                        2\n                    </a>\n                </li>\n                                            \n                \n                                <li class=\"pagination-item\">\n                    <a href=\"#page?_lang=en&amp;page=3\"\n                                              class=\"pagination-link \"\n                    >\n                        3\n                    </a>\n                </li>\n                            \n                            <li class=\"pagination-item\">\n                    <a href=\"#page?_lang=en&amp;page=3\"\n                                              class=\"pagination-link pagination-link--last\"\n                       title=\"Next &raquo;\"\n                    >\n                        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5\"/>\n</svg>\n    </div>\n                    </a>\n                </li>\n                    </ul>\n        <div class=\"pagination-results\">\n            Showing\n                            11\n                to\n                12\n                        of\n            30\n            results\n        </div>\n    </div>\n    <!-- END: Pagination -->\n","attributes":[],"example":"<moonshine-paginator total=\"120\" per-page=\"10\" current=\"3\" href=\"?page={page}\"></moonshine-paginator>","props":[{"name":"total","type":"number","min":0,"render":true},{"name":"per-page","type":"number","min":1,"render":true},{"name":"current","type":"number","min":1,"render":true},{"name":"href","type":"text","render":true}],"i18n":{"showing":"Showing","of":"of","to":"to","results":"results","previous":"&laquo; Previous","next":"Next &raquo;"}},{"name":"Crud/Forms/FiltersForm","source":"MoonShine\\Crud\\Forms\\FiltersForm","view":"moonshine::components.form.builder","group":"Presets","tag":"moonshine-filters-form","html":"<form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_filters.window=\"formReset\" @form_submit:ms_instance_filters.window=\"submit\" @show_when_refresh:ms_instance_filters.window=\"whenFieldsInit\" data-component=\"ms_instance_filters\" x-data=\"formBuilder(&#039;ms_instance_filters&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_filters\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_filters`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"search\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_filters']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_filters')\"\n        class=\"form-label\"\n>\n    Search\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-ms_instance_filters`)\" name=\"search\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"status\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_filters']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_filters')\"\n        class=\"form-label\"\n>\n    Status\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <select\n                    x-data=\"select('', [], [])\"\n                class=\"\" data-validation-field=\"status\" :id=\"$id(`field-ms_instance_filters`)\" name=\"status\" x-on:change=\"onChangeField($event)\"\n>\n            \n                                    <option                         value=\"active\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Active\n                </option>\n                        </select>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Filters\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n","attributes":[],"example":"<moonshine-filters-form></moonshine-filters-form>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[]},{"name":"Crud/Forms/LoginForm","source":"MoonShine\\Crud\\Forms\\LoginForm","view":"moonshine::components.form.builder","group":"Presets","tag":"moonshine-login-form","html":"<form\n    class=\"form space-elements authentication-form\" method=\"post\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"default\" data-field-selector=\"_component_name\" :id=\"$id(`field-default`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"username\"\n     x-id=\"['input-wrapper', 'field-' + 'default']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'default')\"\n        class=\"form-label\"\n>\n    Username\n\n            <span class=\"required\">*</span>\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-default`)\" name=\"username\" autofocus=\"autofocus\" autocomplete=\"username\" required=\"required\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"password\"\n     x-id=\"['input-wrapper', 'field-' + 'default']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'default')\"\n        class=\"form-label\"\n>\n    Password\n\n            <span class=\"required\">*</span>\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"password\" value=\"\" :id=\"$id(`field-default`)\" name=\"password\" required=\"required\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field form-group-inline\" data-field-selector=\"remember\"\n     x-id=\"['input-wrapper', 'field-' + 'default']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    <label class=\"form-switcher\" x-data>\n    <input class=\"form-hidden\" type=\"hidden\" name=\"remember\" value=\"0\" data-checkbox-hidden=\"data-checkbox-hidden\"\n/>\n\n    <input class=\"form-checkbox form-switcher-control peer sr-only\" type=\"checkbox\" name=\"remember\" value=\"0\" x-bind:checked=\"$el.checked\" :id=\"$id(`field-default`)\" x-on:change=\"onChangeField($event);$el.value = $el.checked ? `1` : `0`\"\n/>\n\n    <span class=\"form-switcher-toggler\"></span>\n</label>\n\n            <label\n            :for=\"$id('field-' + 'default')\"\n        class=\"form-label\"\n>\n    Remember me\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        \n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary btn-lg w-full\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Log in\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n","attributes":[],"example":"<moonshine-login-form></moonshine-login-form>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[]},{"name":"Crud/QueryTags/QueryTag","source":"MoonShine\\Crud\\QueryTags\\QueryTag","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-crud-query-tag","html":"<a class=\"btn\" href=\"#active\">\n        \n        \n        Active\n                    <span class=\"badge\">12</span>\n            </a>\n\n","attributes":[],"example":"<moonshine-crud-query-tag></moonshine-crud-query-tag>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[]},{"name":"EasyMde/Fields/Markdown","source":"MoonShine\\EasyMde\\Fields\\Markdown","view":"moonshine-easymde::fields.markdown","group":"Fields","tag":"moonshine-field-markdown","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_markdown\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"easyMde\">\n    <textarea class=\"form-textarea\" x-data=\"easyMde({&quot;previewClass&quot;:[&quot;prose&quot;,&quot;dark:prose-invert&quot;],&quot;forceSync&quot;:true,&quot;spellChecker&quot;:false,&quot;status&quot;:false,&quot;toolbar&quot;:[&quot;bold&quot;,&quot;italic&quot;,&quot;strikethrough&quot;,&quot;code&quot;,&quot;quote&quot;,&quot;horizontal-rule&quot;,&quot;|&quot;,&quot;heading-1&quot;,&quot;heading-2&quot;,&quot;heading-3&quot;,&quot;|&quot;,&quot;table&quot;,&quot;unordered-list&quot;,&quot;ordered-list&quot;,&quot;|&quot;,&quot;link&quot;,&quot;image&quot;,&quot;|&quot;,&quot;preview&quot;,&quot;side-by-side&quot;,&quot;fullscreen&quot;,&quot;|&quot;,&quot;guide&quot;]})\" :id=\"$id(`field-`)\" name=\"ms_instance_markdown\"># MoonShine\n\n**Markdown** editor.</textarea>\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Markdown"},"example":"<moonshine-field-markdown label=\"Markdown\"></moonshine-field-markdown>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"Laravel/Buttons/BelongsToManyPivotButton","source":"MoonShine\\Laravel\\Buttons\\BelongsToManyPivotButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-belongs-to-many-pivot-button","html":"<a class=\"btn btn-primary\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Create</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-ms_instance_form`)\" name=\"title\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Add"},"example":"<moonshine-belongs-to-many-pivot-button label=\"Add\"></moonshine-belongs-to-many-pivot-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Laravel/Buttons/BelongsToOrManyButton","source":"MoonShine\\Laravel\\Buttons\\BelongsToOrManyButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-belongs-to-or-many-button","html":"<a class=\"btn btn-primary\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Create</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-ms_instance_form`)\" name=\"title\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Add"},"example":"<moonshine-belongs-to-or-many-button label=\"Add\"></moonshine-belongs-to-or-many-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Laravel/Buttons/HasManyButton","source":"MoonShine\\Laravel\\Buttons\\HasManyButton","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-has-many-button","html":"<a class=\"btn btn-primary\" href=\"#\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"/>\n</svg>\n    </div>\n\n        \n        __MS_LABEL__\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Create</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-ms_instance_form`)\" name=\"title\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n","attributes":{"label":"Add"},"example":"<moonshine-has-many-button label=\"Add\"></moonshine-has-many-button>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[{"name":"label","type":"text"}]},{"name":"Laravel/Components/Layout/Profile","source":"MoonShine\\Laravel\\Components\\Layout\\Profile","view":"moonshine::components.layout.profile","group":"Layout","tag":"moonshine-layout-profile","html":"<div class=\"profile\">\n                <a href=\"#profile\" class=\"profile-main\">\n                                    <div class=\"profile-photo\">\n                    <img\n                        class=\"h-full w-full object-cover\"\n                        src=\"/vendor/moonshine/avatar.jpg\"\n                        alt=\"Demo User\"\n                    />\n                </div>\n            \n                            <div class=\"profile-info\">\n                    <h5 class=\"name\">Demo User</h5>\n                    <div class=\"email\">demo@example.com</div>\n                </div>\n                            </a>\n        \n                                    <form\n    class=\"profile-actions\" method=\"POST\" action=\"#logout\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n        <input class=\"form-hidden\" type=\"hidden\" name=\"_method\" value=\"delete\"\n/>\n\n                    <button\n    type=\"submit\" class=\"profile-exit btn-fit\" title=\"Logout\"\n>\n    \n    <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9\"/>\n</svg>\n    </div>\n</button>\n\n    </form>\n                        </div>\n\n\n\n","attributes":[],"example":"<moonshine-layout-profile name=\"Demo User\" email=\"demo@example.com\" avatar=\"/vendor/moonshine/avatar.jpg\" href=\"#profile\" logout-href=\"#logout\"></moonshine-layout-profile>","props":[{"name":"name","type":"text","render":true},{"name":"email","type":"text","render":true},{"name":"avatar","type":"text","render":true},{"name":"href","type":"text","render":true},{"name":"logout-href","type":"text","render":true}]},{"name":"Laravel/Fields/Relationships/BelongsTo","source":"MoonShine\\Laravel\\Fields\\Relationships\\BelongsTo","view":"moonshine::fields.relationships.belongs-to","group":"Relationships","tag":"moonshine-relation-belongs-to","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <select\n                    x-data=\"select('', [], [])\"\n                class=\"\" data-search-enabled=\"data-search-enabled\" data-validation-field=\"ms_instance_relation\" :id=\"$id(`field-`)\" name=\"ms_instance_relation\"\n>\n            \n                                    <option selected                        value=\"1\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    MoonShine\n                </option>\n                                                <option                         value=\"2\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Laravel\n                </option>\n                                                <option                         value=\"3\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Livewire\n                </option>\n                        </select>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"BelongsTo"},"example":"<moonshine-relation-belongs-to label=\"BelongsTo\"></moonshine-relation-belongs-to>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"Laravel/Fields/Relationships/BelongsToMany","source":"MoonShine\\Laravel\\Fields\\Relationships\\BelongsToMany","view":"moonshine::fields.relationships.belongs-to-many","group":"Relationships","tag":"moonshine-relation-belongs-to-many","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div x-id=\"['belongs-to-many']\"\n     :id=\"$id('belongs-to-many')\"\n     data-show-when-field=\"ms_instance_relation\"\n     data-validation-field=\"ms_instance_relation\"\n>\n                                                    <div x-data=\"belongsToMany\" x-init='pivot([1,2])'>\n                        <div class=\"flex items-center gap-2 mb-4\">\n        \n                                    <a class=\"btn btn-primary\" href=\"javascript:void(0);\" x-on:click.prevent=\"checkAll\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 12.75 6 6 9-13.5\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"javascript:void(0);\" x-on:click.prevent=\"uncheckAll\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n                        <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            0,\n            0,\n            1,\n            0,\n            null        )\"\n        @table_empty_row_added:ms_instance_relation_table.window='add(true)'        @table_reindex:ms_instance_relation_table.window='resolveReindex'                        \n    >\n        <div >\n    <!-- Table -->\n            <div class=\"table-responsive\">\n            <table class=\"table\" data-name=\"ms_instance_relation_table\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"ms_instance_relation\">\n    #\n</th>\n\n            <th class=\"\" data-column-selection=\"title\">\n    Title\n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"ms_instance_relation\" class=\"form-group-inline w-10\">\n    <div >\n    \n    <input class=\"form-checkbox js-pivot-checker\" type=\"checkbox\" value=\"1\" data-field-selector=\"ms_instance_relation.${index0}\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}]\" data-name=\"ms_instance_relation[${index0}]\" data-column=\"id\" data-level=\"0\"\n/>\n</div>\n\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div data-field-selector=\"title\" class=\"js-pivot-title\" :id=\"$id(`field-`)\">\n    MoonShine\n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"ms_instance_relation\" class=\"form-group-inline w-10\">\n    <div >\n    \n    <input class=\"form-checkbox js-pivot-checker\" type=\"checkbox\" value=\"2\" data-field-selector=\"ms_instance_relation.${index0}\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}]\" data-name=\"ms_instance_relation[${index0}]\" data-column=\"id\" data-level=\"0\"\n/>\n</div>\n\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div data-field-selector=\"title\" class=\"js-pivot-title\" :id=\"$id(`field-`)\">\n    Laravel\n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"ms_instance_relation\" class=\"form-group-inline w-10\">\n    <div >\n    \n    <input class=\"form-checkbox js-pivot-checker\" type=\"checkbox\" value=\"3\" data-field-selector=\"ms_instance_relation.${index0}\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}]\" data-name=\"ms_instance_relation[${index0}]\" data-column=\"id\" data-level=\"0\"\n/>\n</div>\n\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div data-field-selector=\"title\" class=\"js-pivot-title\" :id=\"$id(`field-`)\">\n    Livewire\n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n</div>\n    </div>\n</div>\n\n                    </div>\n                                    </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"BelongsToMany"},"example":"<moonshine-relation-belongs-to-many label=\"BelongsToMany\"></moonshine-relation-belongs-to-many>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"checked","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"Laravel/Fields/Relationships/HasMany","source":"MoonShine\\Laravel\\Fields\\Relationships\\HasMany","view":"moonshine::fields.relationships.has-many","group":"Relationships","tag":"moonshine-relation-has-many","html":"<div class=\"box space-elements\">\n     <h2 class=\"box-title\">__MS_LABEL__</h2> \n            <div x-id=\"['has-many']\"\n     :id=\"$id('has-many')\"\n>\n            <div\n    class=\"flex gap-4 items-start justify-between flex-wrap\"\n>\n    \n    <a class=\"btn btn-primary\" href=\"#create\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"/>\n</svg>\n    </div>\n\n        \n        Add\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Create</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[title]\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.description\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Description\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <textarea class=\"form-textarea\" aria-label=\"Description\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[description]\" x-on:change=\"onChangeField($event)\">Admin panel for Laravel</textarea>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n</div>\n\n\n        <div class=\"my-4\"></div>\n    \n    <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            0,\n            0,\n            0,\n            0,\n            null        )\"\n        @table_empty_row_added:default.window='add(true)'        @table_reindex:default.window='resolveReindex'                        \n    >\n        <div >\n    <!-- Table -->\n    <div class=\"table-container\">        <div class=\"table-responsive\">\n            <table class=\"table table-list\" data-name=\"default\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"id\">\n    ID\n</th>\n\n            <th class=\"\" data-column-selection=\"title\">\n    Title\n</th>\n\n            <th class=\"\">\n    \n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    1\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">MoonShine</div>\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-primary\" href=\"#edit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"#delete\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    2\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">Laravel</div>\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-primary\" href=\"#edit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"#delete\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n    </div>\n</div>\n    </div>\n</div>\n\n</div>\n\n    \n    \n</div>\n","attributes":{"label":"HasMany"},"example":"<moonshine-relation-has-many label=\"HasMany\"></moonshine-relation-has-many>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"Laravel/Fields/Relationships/HasManyThrough","source":"MoonShine\\Laravel\\Fields\\Relationships\\HasManyThrough","view":"moonshine::fields.relationships.has-many","group":"Relationships","tag":"moonshine-relation-has-many-through","html":"<div class=\"box space-elements\">\n     <h2 class=\"box-title\">__MS_LABEL__</h2> \n            <div x-id=\"['has-many']\"\n     :id=\"$id('has-many')\"\n>\n            <div\n    class=\"flex gap-4 items-start justify-between flex-wrap\"\n>\n    \n    <a class=\"btn btn-primary\" href=\"#create\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"/>\n</svg>\n    </div>\n\n        \n        Add\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Create</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[title]\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.description\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Description\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <textarea class=\"form-textarea\" aria-label=\"Description\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[description]\" x-on:change=\"onChangeField($event)\">Admin panel for Laravel</textarea>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n</div>\n\n\n        <div class=\"my-4\"></div>\n    \n    <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            0,\n            0,\n            0,\n            0,\n            null        )\"\n        @table_empty_row_added:default.window='add(true)'        @table_reindex:default.window='resolveReindex'                        \n    >\n        <div >\n    <!-- Table -->\n    <div class=\"table-container\">        <div class=\"table-responsive\">\n            <table class=\"table table-list\" data-name=\"default\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"id\">\n    ID\n</th>\n\n            <th class=\"\" data-column-selection=\"title\">\n    Title\n</th>\n\n            <th class=\"\">\n    \n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    1\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">MoonShine</div>\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-primary\" href=\"#edit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"#delete\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    2\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">Laravel</div>\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-primary\" href=\"#edit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"#delete\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n    </div>\n</div>\n    </div>\n</div>\n\n</div>\n\n    \n    \n</div>\n","attributes":{"label":"HasManyThrough"},"example":"<moonshine-relation-has-many-through label=\"HasManyThrough\"></moonshine-relation-has-many-through>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"Laravel/Fields/Relationships/HasOne","source":"MoonShine\\Laravel\\Fields\\Relationships\\HasOne","view":"moonshine::fields.relationships.has-one","group":"Relationships","tag":"moonshine-relation-has-one","html":"<div class=\"box space-elements\">\n     <h2 class=\"box-title\">__MS_LABEL__</h2> \n            <div x-id=\"['has-one']\"\n     :id=\"$id('has-one')\"\n>\n    <div class=\"my-4\"></div>\n\n    <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[title]\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.description\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Description\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <textarea class=\"form-textarea\" aria-label=\"Description\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[description]\" x-on:change=\"onChangeField($event)\">Admin panel for Laravel</textarea>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n</div>\n\n    \n    \n</div>\n","attributes":{"label":"HasOne"},"example":"<moonshine-relation-has-one label=\"HasOne\"></moonshine-relation-has-one>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"Laravel/Fields/Relationships/HasOneThrough","source":"MoonShine\\Laravel\\Fields\\Relationships\\HasOneThrough","view":"moonshine::fields.relationships.has-one","group":"Relationships","tag":"moonshine-relation-has-one-through","html":"<div class=\"box space-elements\">\n     <h2 class=\"box-title\">__MS_LABEL__</h2> \n            <div x-id=\"['has-one']\"\n     :id=\"$id('has-one')\"\n>\n    <div class=\"my-4\"></div>\n\n    <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[title]\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.description\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Description\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <textarea class=\"form-textarea\" aria-label=\"Description\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[description]\" x-on:change=\"onChangeField($event)\">Admin panel for Laravel</textarea>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n</div>\n\n    \n    \n</div>\n","attributes":{"label":"HasOneThrough"},"example":"<moonshine-relation-has-one-through label=\"HasOneThrough\"></moonshine-relation-has-one-through>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"Laravel/Fields/Relationships/MorphMany","source":"MoonShine\\Laravel\\Fields\\Relationships\\MorphMany","view":"moonshine::fields.relationships.has-many","group":"Relationships","tag":"moonshine-relation-morph-many","html":"<div class=\"box space-elements\">\n     <h2 class=\"box-title\">__MS_LABEL__</h2> \n            <div x-id=\"['has-many']\"\n     :id=\"$id('has-many')\"\n>\n            <div\n    class=\"flex gap-4 items-start justify-between flex-wrap\"\n>\n    \n    <a class=\"btn btn-primary\" href=\"#create\" x-on:click.prevent=\"window.MoonShine.ui.toggleModal(&quot;ms_instance_modal&quot;)\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 4.5v15m7.5-7.5h-15\"/>\n</svg>\n    </div>\n\n        \n        Add\n            </a>\n\n    <template x-teleport=\"body\">\n        <div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">Create</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[title]\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.description\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Description\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <textarea class=\"form-textarea\" aria-label=\"Description\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[description]\" x-on:change=\"onChangeField($event)\">Admin panel for Laravel</textarea>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n\n    </template>\n</div>\n\n\n        <div class=\"my-4\"></div>\n    \n    <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            0,\n            0,\n            0,\n            0,\n            null        )\"\n        @table_empty_row_added:default.window='add(true)'        @table_reindex:default.window='resolveReindex'                        \n    >\n        <div >\n    <!-- Table -->\n    <div class=\"table-container\">        <div class=\"table-responsive\">\n            <table class=\"table table-list\" data-name=\"default\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"id\">\n    ID\n</th>\n\n            <th class=\"\" data-column-selection=\"title\">\n    Title\n</th>\n\n            <th class=\"\">\n    \n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    1\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">MoonShine</div>\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-primary\" href=\"#edit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"#delete\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    2\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">Laravel</div>\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-primary\" href=\"#edit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"#delete\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n    </div>\n</div>\n    </div>\n</div>\n\n</div>\n\n    \n    \n</div>\n","attributes":{"label":"MorphMany"},"example":"<moonshine-relation-morph-many label=\"MorphMany\"></moonshine-relation-morph-many>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"Laravel/Fields/Relationships/MorphOne","source":"MoonShine\\Laravel\\Fields\\Relationships\\MorphOne","view":"moonshine::fields.relationships.has-one","group":"Relationships","tag":"moonshine-relation-morph-one","html":"<div class=\"box space-elements\">\n     <h2 class=\"box-title\">__MS_LABEL__</h2> \n            <div x-id=\"['has-one']\"\n     :id=\"$id('has-one')\"\n>\n    <div class=\"my-4\"></div>\n\n    <form\n    class=\"form space-elements\" method=\"post\" @form_reset:ms_instance_form.window=\"formReset\" @form_submit:ms_instance_form.window=\"submit\" @show_when_refresh:ms_instance_form.window=\"whenFieldsInit\" data-component=\"ms_instance_form\" x-data=\"formBuilder(&#039;ms_instance_form&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"ms_instance_form\" data-field-selector=\"_component_name\" :id=\"$id(`field-ms_instance_form`)\" name=\"_component_name\" />\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.title\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[title]\" x-on:change=\"onChangeField($event)\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n            <div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation.description\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_form']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_form')\"\n        class=\"form-label\"\n>\n    Description\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <textarea class=\"form-textarea\" aria-label=\"Description\" :id=\"$id(`field-ms_instance_form`)\" name=\"ms_instance_relation[description]\" x-on:change=\"onChangeField($event)\">Admin panel for Laravel</textarea>\n\n        \n\n            </div>\n</div>\n\n\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn btn-primary\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n\n</div>\n\n    \n    \n</div>\n","attributes":{"label":"MorphOne"},"example":"<moonshine-relation-morph-one label=\"MorphOne\"></moonshine-relation-morph-one>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"Laravel/Fields/Relationships/MorphTo","source":"MoonShine\\Laravel\\Fields\\Relationships\\MorphTo","view":"moonshine::fields.relationships.morph-to","group":"Relationships","tag":"moonshine-relation-morph-to","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div x-data=\"{morphType: 'article'}\"\n     class=\"flex items-center gap-x-2\"\n>\n    <div class=\"sm:w-1/4 w-full\">\n        <select\n                    x-data=\"select('', [], [])\"\n                name=\"ms_instance_relation_type\" x-model=\"morphType\" required=\"required\"\n>\n            \n                                    <option selected                        value=\"article\"\n                        data-custom-properties='{\"customProperties\":[]}'\n                        \n                >\n                    Article\n                </option>\n                                                <option                         value=\"video\"\n                        data-custom-properties='{\"customProperties\":[]}'\n                        \n                >\n                    Video\n                </option>\n                        </select>\n    </div>\n\n    <div class=\"sm:w-3/4 w-full\">\n        <select\n                    x-data=\"select('', [], [])\"\n                class=\"\" data-search-enabled=\"data-search-enabled\" data-async-extra-key=\"ms_instance_relation_type\" x-bind:data-async-extra=\"morphType\" x-effect=\"morphClear(morphType)\" value=\"1\" data-async-on-init=\"true\" data-async-on-init-dropdown=\"true\" data-validation-field=\"ms_instance_relation\" :id=\"$id(`field-`)\" name=\"ms_instance_relation\"\n>\n            \n                                    <option selected                        value=\"1\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    MoonShine\n                </option>\n                                                <option                         value=\"2\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Laravel\n                </option>\n                                                <option                         value=\"3\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Livewire\n                </option>\n                        </select>\n    </div>\n\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"MorphTo"},"example":"<moonshine-relation-morph-to label=\"MorphTo\"></moonshine-relation-morph-to>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"Laravel/Fields/Relationships/MorphToMany","source":"MoonShine\\Laravel\\Fields\\Relationships\\MorphToMany","view":"moonshine::fields.relationships.belongs-to-many","group":"Relationships","tag":"moonshine-relation-morph-to-many","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div x-id=\"['belongs-to-many']\"\n     :id=\"$id('belongs-to-many')\"\n     data-show-when-field=\"ms_instance_relation\"\n     data-validation-field=\"ms_instance_relation\"\n>\n                                                    <div x-data=\"belongsToMany\" x-init='pivot([1,2])'>\n                        <div class=\"flex items-center gap-2 mb-4\">\n        \n                                    <a class=\"btn btn-primary\" href=\"javascript:void(0);\" x-on:click.prevent=\"checkAll\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 12.75 6 6 9-13.5\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"javascript:void(0);\" x-on:click.prevent=\"uncheckAll\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n                        <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            0,\n            0,\n            1,\n            0,\n            null        )\"\n        @table_empty_row_added:ms_instance_relation_table.window='add(true)'        @table_reindex:ms_instance_relation_table.window='resolveReindex'                        \n    >\n        <div >\n    <!-- Table -->\n            <div class=\"table-responsive\">\n            <table class=\"table\" data-name=\"ms_instance_relation_table\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"ms_instance_relation\">\n    #\n</th>\n\n            <th class=\"\" data-column-selection=\"title\">\n    Title\n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"ms_instance_relation\" class=\"form-group-inline w-10\">\n    <div >\n    \n    <input class=\"form-checkbox js-pivot-checker\" type=\"checkbox\" value=\"1\" data-field-selector=\"ms_instance_relation.${index0}\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}]\" data-name=\"ms_instance_relation[${index0}]\" data-column=\"id\" data-level=\"0\"\n/>\n</div>\n\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div data-field-selector=\"title\" class=\"js-pivot-title\" :id=\"$id(`field-`)\">\n    MoonShine\n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"ms_instance_relation\" class=\"form-group-inline w-10\">\n    <div >\n    \n    <input class=\"form-checkbox js-pivot-checker\" type=\"checkbox\" value=\"2\" data-field-selector=\"ms_instance_relation.${index0}\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}]\" data-name=\"ms_instance_relation[${index0}]\" data-column=\"id\" data-level=\"0\"\n/>\n</div>\n\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div data-field-selector=\"title\" class=\"js-pivot-title\" :id=\"$id(`field-`)\">\n    Laravel\n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"ms_instance_relation\" class=\"form-group-inline w-10\">\n    <div >\n    \n    <input class=\"form-checkbox js-pivot-checker\" type=\"checkbox\" value=\"3\" data-field-selector=\"ms_instance_relation.${index0}\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}]\" data-name=\"ms_instance_relation[${index0}]\" data-column=\"id\" data-level=\"0\"\n/>\n</div>\n\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div data-field-selector=\"title\" class=\"js-pivot-title\" :id=\"$id(`field-`)\">\n    Livewire\n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n</div>\n    </div>\n</div>\n\n                    </div>\n                                    </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"MorphToMany"},"example":"<moonshine-relation-morph-to-many label=\"MorphToMany\"></moonshine-relation-morph-to-many>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"checked","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"Laravel/Fields/Relationships/RelationRepeater","source":"MoonShine\\Laravel\\Fields\\Relationships\\RelationRepeater","view":"moonshine::fields.json","group":"Relationships","tag":"moonshine-relation-repeater","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_relation\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div x-id=\"['json']\"\n     :id=\"$id('json')\"\n     class=\"\"\n     data-show-when-field=\"ms_instance_relation[]\"\n>\n    <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            1,\n            1,\n            1,\n            0,\n            null        )\"\n        @table_empty_row_added:repeater_ms_instance_relation.window='add(true)'        @table_reindex:repeater_ms_instance_relation.window='resolveReindex'                        data-remove-after-clone=\"1\" data-validation-wrapper=\"data-validation-wrapper\" data-handle=\".handle\" data-top-level=\"data-top-level\" :id=\"$id(`field-`)\" data-inside=\"field\"\n    >\n        <div >\n    <!-- Table -->\n            <div class=\"table-responsive\">\n            <table class=\"table\" creatable=\"creatable\" data-name=\"repeater_ms_instance_relation\" data-remove-after-clone=\"1\" data-validation-wrapper=\"data-validation-wrapper\" data-handle=\".handle\" data-top-level=\"data-top-level\" :id=\"$id(`field-`)\" data-inside=\"field\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"handle\">\n    \n</th>\n\n            <th class=\"\" data-column-selection=\"ms_instance_relation_title\">\n    Title\n</th>\n\n            <th class=\"\">\n    \n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"handle\" class=\"\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\">\n    <div class=\"form-group moonshine-field\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"handle\" style=\"cursor: move;\" :id=\"$id(`field-`)\">\n    <div class=\"icon-wrapper size-5 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25\"/>\n</svg>\n    </div>\n\n</div>\n\n        \n\n            </div>\n</div>\n\n\n\n</td>\n\n            <td data-column-selection=\"ms_instance_relation_title\" class=\"\">\n    <input class=\"form-input\" type=\"text\" value=\"MoonShine\" data-field-selector=\"ms_instance_relation.${index0}.title\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}][title]\" data-name=\"ms_instance_relation[${index0}][title]\" data-column=\"title\" data-level=\"0\" x-id=\"[`field-`]\" x-on:change=\"onChangeField($event)\"\n/>\n\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-error\" href=\"javascript:void(0);\" x-on:click.prevent=\"remove\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"handle\" class=\"\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\">\n    <div class=\"form-group moonshine-field\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"handle\" style=\"cursor: move;\" :id=\"$id(`field-`)\">\n    <div class=\"icon-wrapper size-5 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25\"/>\n</svg>\n    </div>\n\n</div>\n\n        \n\n            </div>\n</div>\n\n\n\n</td>\n\n            <td data-column-selection=\"ms_instance_relation_title\" class=\"\">\n    <input class=\"form-input\" type=\"text\" value=\"\" data-field-selector=\"ms_instance_relation.${index0}.title\" :id=\"$id(`field-`)\" name=\"ms_instance_relation[${index0}][title]\" data-name=\"ms_instance_relation[${index0}][title]\" data-column=\"title\" data-level=\"0\" x-id=\"[`field-`]\" x-on:change=\"onChangeField($event)\"\n/>\n\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-error\" href=\"javascript:void(0);\" x-on:click.prevent=\"remove\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n    \n                            <hr class=\"divider\" />\n\n                <a class=\"btn w-full\" href=\"javascript:void(0);\" @click.prevent=\"add()\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n\n        \n        Add\n            </a>\n</div>\n    </div>\n</div>\n\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"RelationRepeater"},"example":"<moonshine-relation-repeater label=\"RelationRepeater\"></moonshine-relation-repeater>","note":"MoonShine's own relationship field view with local demo data. Eloquent queries, async search and saving relationships require a Laravel backend.","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"Laravel/Fields/Slug","source":"MoonShine\\Laravel\\Fields\\Slug","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-slug","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_slug\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"moonshine\" :id=\"$id(`field-`)\" name=\"ms_instance_slug\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Slug"},"example":"<moonshine-field-slug label=\"Slug\"></moonshine-field-slug>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"Laravel/Layouts/AppLayout","source":"MoonShine\\Laravel\\Layouts\\AppLayout","view":null,"group":"Layout","tag":"moonshine-layout-app","html":"<div class=\"layout-wrapper\"\n     :class=\"minimizedMenu && 'layout-wrapper-short'\"\n>\n    <!-- Sidebar -->\n<aside class=\"layout-menu\"\n       :class=\"{ '_is-minimized': minimizedMenu, '_is-opened': $store.menu.isSidebarOpen }\"\n>\n    <div class=\"menu-header\" >\n            <div class=\"menu-logo\" >\n            <a class=\"logo block\" rel=\"home\" href=\"/\">\n    <img src=\"/vendor/moonshine/logo.svg\"\n        class=\"hidden h-14 xl:block\" :class=\"minimizedMenu &amp;&amp; &#039;!hidden&#039;\"\n         alt=\"MoonShine\"\n            />\n\n    \n            <img src=\"/vendor/moonshine/logo-small.svg\"\n            class=\"block h-8 lg:h-10 xl:hidden\" :class=\"minimizedMenu &amp;&amp; &#039;!block&#039;\"\n             alt=\"MoonShine\"\n                     />\n    \n    </a>\n\n    \n    \n</div>\n\n            <div class=\"menu-actions\" >\n            <div class=\"theme-switcher\">\n    <button @click.prevent=\"$dispatch('darkMode:toggle')\"\n            class=\"theme-switcher-btn btn-fit\"\n            type=\"button\"\n            :title=\"$store.darkMode.on ? 'Toggle light mode' : 'Toggle dark mode'\"\n    >\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"!$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\"\n            />\n        </svg>\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\"\n            />\n        </svg>\n    </button>\n</div>\n\n    \n    \n</div>\n\n            <div class=\"menu-burger\" >\n            <button\n    type=\"button\"\n    class=\"btn-burger btn-fit\"\n            @click.prevent=\"$store.menu['toggleSidebar']()\"\n    >\n    <svg x-show=\"!$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n    </svg>\n    <svg x-cloak x-show=\"$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n</button>\n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    <div class=\"menu menu--vertical\" >\n            <ul class=\"menu-list\">\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#overview\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Overview</span>\n\n    </a>\n\n\n</li>\n\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#settings\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Settings</span>\n\n    </a>\n\n\n</li>\n\n            </ul>\n\n\n\n    \n    \n</div>\n\n\n    \n    \n</aside>\n<!-- END: Sidebar -->\n\n    <div class=\"layout-main\" >\n            <div class=\"layout-page\" >\n            <div class=\"layout-navigation\">\n    <div class=\"menu-burger\" >\n            <button\n    type=\"button\"\n    class=\"btn-burger btn-fit\"\n            @click.prevent=\"$store.menu['toggleSidebar']()\"\n    >\n    <svg x-show=\"!$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n    </svg>\n    <svg x-cloak x-show=\"$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n</button>\n\n    \n    \n</div>\n\n    <!-- Breadcrumbs -->\n    <div class=\"breadcrumbs\">\n        <ul class=\"breadcrumbs-list\">\n                            <li class=\"breadcrumbs-item\">\n                                            <a href=\"/\"\n                                                   >\n                            \n                            Home\n                        </a>\n                                    </li>\n                            <li class=\"breadcrumbs-item\">\n                                            <span>\n                            Storybook\n                        </span>\n                                    </li>\n                    </ul>\n    </div>\n    <!-- END: Breadcrumbs -->\n\n    <div\n        x-data=\"{\n            isPopover: false,\n            observer: null,\n            init() {\n                this.observer = new ResizeObserver(entries => {\n                    for (let entry of entries) {\n                        const width = entry.contentRect.width;\n                        this.isPopover = width < 100;\n                    }\n                });\n                this.observer.observe(this.$el.parentElement);\n            },\n            destroy() {\n                this.observer.disconnect();\n            }\n        }\"\n        x-init=\"init\"\n        x-on:destroy.window=\"destroy\"\n        class=\"search-wrapper\"\n    >\n        <span\n    @popover_toggled:default.window=\"toggle\" x-show=\"isPopover\"\n    class=\"popover-trigger\"\n    title=\"\"\n    x-data=\"popover({placement: 'auto'})\"\n>\n    <button class=\"flex justify-center w-full search-form-show\">\n                    <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n                </button>\n    <div x-ignore class=\"hidden popover-body-content\"><div class=\"search\">\n                <form\n    class=\"search-form\" method=\"get\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" x-ref=\"searchForm\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n    \n            <div x-data=\"JSON.parse(&#039;{\\u0022searchValue\\u0022:\\u0022\\u0022,\\u0022hasRequestValue\\u0022:false,\\u0022isCtrlPressed\\u0022:false,\\u0022isKPressed\\u0022:false}&#039;)\" style=\"display: inline;\" >\n            <input class=\"form-input search-form-field\" type=\"search\" value=\"\" data-field-selector=\"search\" :id=\"$id(`field-default`)\" name=\"search\" x-ref=\"searchInput\" @keyup.ctrl.k.window=\"$refs.searchInput.focus()\" @keyup.ctrl.period.window=\"$refs.searchInput.focus()\" @input.debounce.300ms=\"\" placeholder=\"Search\" x-model=\"searchValue\" x-on:change=\"onChangeField($event)\"\n/>\n\n            <button type=\"submit\" class=\"search-form-submit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <button type=\"button\" class=\"search-form-clear\" x-show=\"searchValue!=&#039;&#039;\" x-on:click=\"searchValue = &quot;&quot;; $refs.searchInput.value = &quot;&quot;\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <div @keydown.meta.window=\"isCtrlPressed = true\" @keyup.meta.window=\"isCtrlPressed = false\" @keydown.control.window=\"isCtrlPressed = true\" @keyup.control.window=\"isCtrlPressed = false\" @keydown.k.window=\"isKPressed = true; if (isCtrlPressed) { $refs.searchInput.focus(); $event.preventDefault() }\" @keyup.k.window=\"isKPressed = false\" class=\"search-button-keys\" x-show=\"searchValue==&#039;&#039;\" >\n            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isCtrlPressed }\"\n                                x-text=\"`${(navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone') ? '⌘' : '^'}`\">^</kbd>\n                            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isKPressed }\"\n                            >K</kbd>\n                        \n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    \n    </form>\n\n            </div></div>\n</span>\n\n        <div class=\"search\" x-show=\"!isPopover\">\n            <form\n    class=\"search-form\" method=\"get\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" x-ref=\"searchForm\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n    \n            <div x-data=\"JSON.parse(&#039;{\\u0022searchValue\\u0022:\\u0022\\u0022,\\u0022hasRequestValue\\u0022:false,\\u0022isCtrlPressed\\u0022:false,\\u0022isKPressed\\u0022:false}&#039;)\" style=\"display: inline;\" >\n            <input class=\"form-input search-form-field\" type=\"search\" value=\"\" data-field-selector=\"search\" :id=\"$id(`field-default`)\" name=\"search\" x-ref=\"searchInput\" @keyup.ctrl.k.window=\"$refs.searchInput.focus()\" @keyup.ctrl.period.window=\"$refs.searchInput.focus()\" @input.debounce.300ms=\"\" placeholder=\"Search\" x-model=\"searchValue\" x-on:change=\"onChangeField($event)\"\n/>\n\n            <button type=\"submit\" class=\"search-form-submit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <button type=\"button\" class=\"search-form-clear\" x-show=\"searchValue!=&#039;&#039;\" x-on:click=\"searchValue = &quot;&quot;; $refs.searchInput.value = &quot;&quot;\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <div @keydown.meta.window=\"isCtrlPressed = true\" @keyup.meta.window=\"isCtrlPressed = false\" @keydown.control.window=\"isCtrlPressed = true\" @keyup.control.window=\"isCtrlPressed = false\" @keydown.k.window=\"isKPressed = true; if (isCtrlPressed) { $refs.searchInput.focus(); $event.preventDefault() }\" @keyup.k.window=\"isKPressed = false\" class=\"search-button-keys\" x-show=\"searchValue==&#039;&#039;\" >\n            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isCtrlPressed }\"\n                                x-text=\"`${(navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone') ? '⌘' : '^'}`\">^</kbd>\n                            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isKPressed }\"\n                            >K</kbd>\n                        \n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    \n    </form>\n\n        </div>\n    </div>\n\n    <div class=\"theme-switcher\">\n    <button @click.prevent=\"$dispatch('darkMode:toggle')\"\n            class=\"theme-switcher-btn btn-fit\"\n            type=\"button\"\n            :title=\"$store.darkMode.on ? 'Toggle light mode' : 'Toggle dark mode'\"\n    >\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"!$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\"\n            />\n        </svg>\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\"\n            />\n        </svg>\n    </button>\n</div>\n\n\n    \n</div>\n\n            <main class=\"layout-content\">\n    <slot>MoonShine</slot>\n\n\n    \n</main>\n\n            <footer class=\"layout-footer\">\n    <div class=\"flex flex-col flex-wrap items-center justify-between gap-y-4 gap-x-8 md:flex-row\">\n        \n        \n\n        <div class=\"text-center text-sm md:text-left\">\n            &copy; MoonShine\n        </div>\n\n                    <nav class=\"flex flex-wrap justify-center gap-x-4 gap-y-2 md:justify-start lg:gap-x-6\">\n                                    <a href=\"https://getmoonshine.app/docs\"\n                       class=\"text-sm\"\n                       target=\"_blank\">\n                        Documentation\n                    </a>\n                            </nav>\n            </div>\n</footer>\n\n    \n    \n</div>\n\n    \n    \n</div>\n\n\n    \n\n    <div\n        class=\"layout-overlay\"\n        x-cloak\n        x-show=\"$store.menu.isSidebarOpen\"\n        x-on:click=\"$store.menu.toggleSidebar()\"\n        x-transition.opacity\n    >\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-layout-app><moonshine-layout-box label=\"Dashboard\"><moonshine-progress-bar value=\"65\"></moonshine-progress-bar></moonshine-layout-box></moonshine-layout-app>","props":[],"note":"Complete AppLayout shell: sidebar, header with breadcrumbs and search, content and footer. The tag content goes into the content area.","height":640},{"name":"Laravel/QueryTags/QueryTag","source":"MoonShine\\Laravel\\QueryTags\\QueryTag","view":"moonshine::components.action-button","group":"Presets","tag":"moonshine-query-tag","html":"<a class=\"btn btn-primary\" href=\"#published\">\n        \n        \n        Published\n            </a>\n\n","attributes":[],"example":"<moonshine-query-tag></moonshine-query-tag>","note":"UI preset with local demo data. Resource actions, authorization, filtering and persistence require a Laravel backend.","props":[]},{"name":"MenuManager/MenuDivider","source":"MoonShine\\MenuManager\\MenuDivider","view":"moonshine::components.menu.divider","group":"Components","tag":"moonshine-menu-divider","html":"<li class=\"menu-divider\">\n            <span>Navigation</span>\n    </li>\n","attributes":[],"example":"<moonshine-menu-divider></moonshine-menu-divider>","props":[]},{"name":"MenuManager/MenuGroup","source":"MoonShine\\MenuManager\\MenuGroup","view":"moonshine::components.menu.group","group":"Components","tag":"moonshine-menu-group","html":"<li class=\"menu-item\"\n            x-data=\"{ dropdown: false }\"\n        :class=\"dropdown && 'menu-item--opened'\"\n    x-ref=\"dropdownMenu\"\n>\n    <button\n                    x-data=\"navTooltip\"\n            @mouseenter=\"toggleTooltip()\"\n                @click.prevent=\"dropdown = ! dropdown; $nextTick(() => { if (dropdown && $refs.dropdownMenu) $refs.dropdownMenu.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); })\"\n        class=\"menu-button\"\n        :class=\"dropdown && '_is-active'\"\n        type=\"button\"\n    >\n                    <div class=\"menu-icon\">\n                <div class=\"icon-wrapper text-current\" x-show=\"!dropdown\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z\"/>\n</svg>\n    </div>\n                <div class=\"icon-wrapper text-current\" x-show=\"dropdown\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776\"/>\n</svg>\n    </div>\n            </div>\n        \n        <span class=\"menu-text \">Menu group</span>\n        <span class=\"menu-arrow\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"/>\n</svg>\n    </div>\n        </span>\n    </button>\n\n            <ul class=\"menu-submenu\" style=\"display: none;\" x-transition.top=\"\" x-show=\"dropdown\">\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n    \n    <span class=\"menu-text \">MoonShine</span>\n\n    </a>\n\n\n</li>\n\n            </ul>\n\n\n    </li>\n","attributes":[],"example":"<moonshine-menu-group></moonshine-menu-group>","props":[]},{"name":"MenuManager/MenuItem","source":"MoonShine\\MenuManager\\MenuItem","view":"moonshine::components.menu.item","group":"Components","tag":"moonshine-menu-item","html":"<li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#\"\n    class=\"menu-link\"\n    >\n    \n    <span class=\"menu-text \">Menu item</span>\n\n    </a>\n</li>\n","attributes":[],"example":"<moonshine-menu-item></moonshine-menu-item>","props":[]},{"name":"UI/Components/ActionButton","source":"MoonShine\\UI\\Components\\ActionButton","view":"moonshine::components.action-button","group":"Components","tag":"moonshine-action-button","html":"<a class=\"btn\" href=\"__MS_HREF__\">\n        \n        \n        __MS_LABEL__\n            </a>\n\n","attributes":{"label":"ActionButton","href":"#"},"example":"<moonshine-action-button label=\"ActionButton\"></moonshine-action-button>","props":[{"name":"label","type":"text"},{"name":"href","type":"text"},{"name":"color","type":"select","options":["primary","secondary","success","warning","error","info"]}]},{"name":"UI/Components/ActionGroup","source":"MoonShine\\UI\\Components\\ActionGroup","view":"moonshine::components.action-group","group":"Components","tag":"moonshine-action-group","html":"<div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn\" href=\"javascript:void(0);\">\n        \n        \n        Edit\n            </a>\n\n\n                            <a class=\"btn btn-error\" href=\"javascript:void(0);\">\n        \n        \n        Delete\n            </a>\n\n\n                    \n        \n    </div>\n","attributes":[],"example":"<moonshine-action-group></moonshine-action-group>","props":[]},{"name":"UI/Components/Alert","source":"MoonShine\\UI\\Components\\Alert","view":"moonshine::components.alert","group":"Components","tag":"moonshine-alert","html":"<div class=\"alert alert-info\"\n    >\n    <div class=\"alert-icon\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5\"/>\n</svg>\n    </div>\n    </div>\n    <p class=\"alert-content\"><slot>Information</slot></p>\n\n    </div>\n","attributes":[],"example":"<moonshine-alert>MoonShine Web Component</moonshine-alert>","props":[{"name":"color","type":"select","options":["primary","secondary","success","warning","error","info","purple","pink","blue","green","yellow","red","gray"]}]},{"name":"UI/Components/Badge","source":"MoonShine\\UI\\Components\\Badge","view":"moonshine::components.badge","group":"Components","tag":"moonshine-badge","html":"<span class=\"badge badge-purple\">__MS_LABEL__</span>\n","attributes":{"label":"Badge"},"example":"<moonshine-badge label=\"Badge\" color=\"success\"></moonshine-badge>","props":[{"name":"label","type":"text"},{"name":"color","type":"select","options":["primary","secondary","success","warning","error","info","purple","pink","blue","green","yellow","red","gray"]}]},{"name":"UI/Components/Boolean","source":"MoonShine\\UI\\Components\\Boolean","view":"moonshine::components.boolean","group":"Components","tag":"moonshine-boolean","html":"<div class=\"h-2 w-2 rounded-full bg-green-500\"></div>\n","attributes":[],"example":"<moonshine-boolean value=\"true\"></moonshine-boolean>","props":[{"name":"value","type":"select","options":["true","false"],"render":true}]},{"name":"UI/Components/Breadcrumbs","source":"MoonShine\\UI\\Components\\Breadcrumbs","view":"moonshine::components.breadcrumbs","group":"Components","tag":"moonshine-breadcrumbs","html":"<!-- Breadcrumbs -->\n    <div class=\"breadcrumbs\">\n        <ul class=\"breadcrumbs-list\">\n                            <li class=\"breadcrumbs-item\">\n                                            <a href=\"/\"\n                                                   >\n                            \n                            Home\n                        </a>\n                                    </li>\n                            <li class=\"breadcrumbs-item\">\n                                            <span>\n                            Storybook\n                        </span>\n                                    </li>\n                    </ul>\n    </div>\n    <!-- END: Breadcrumbs -->\n","attributes":[],"example":"<moonshine-breadcrumbs><a href=\"/\">Home</a><a href=\"/storybook\">Storybook</a><span>Breadcrumbs</span></moonshine-breadcrumbs>","props":[]},{"name":"UI/Components/Card","source":"MoonShine\\UI\\Components\\Card","view":"moonshine::components.card","group":"Components","tag":"moonshine-card","html":"<!-- Card -->\n<div class=\"card card-category\">\n            <div class=\"card-photo\">\n            \n                            <img src=\"/images/image_1.jpg\" alt=\"__MS_LABEL__\" />\n                    </div>\n    \n    <div class=\"card-body\">\n                    \n\n            <h3 class=\"title\"><a href=\"__MS_HREF__\">__MS_LABEL__</a></h3>\n\n                    \n                    <table>\n            <tbody>\n                                    <tr>\n                        <th width=\"40%\">Version:</th>\n                        <td width=\"60%\">5.x-dev</td>\n                    </tr>\n                            </tbody>\n            </table>\n        \n            \n    </div>\n\n    </div>\n<!-- END: Card -->\n","attributes":{"label":"Card","href":"#"},"example":"<moonshine-card label=\"MoonShine\" href=\"https://getmoonshine.app\" src=\"/images/image_1.jpg\"><dl><dt>Version</dt><dd>5.x-dev</dd><dt>License</dt><dd>MIT</dd></dl></moonshine-card>","props":[{"name":"label","type":"text"},{"name":"href","type":"text"},{"name":"src","type":"text","render":true}]},{"name":"UI/Components/CardsBuilder","source":"MoonShine\\UI\\Components\\CardsBuilder","view":"moonshine::components.cards","group":"Components","tag":"moonshine-cards-builder","html":"<div class=\"js-cards-builder-container\">\n    <div x-data=\"cardsBuilder(\n    0,\n    '')\"\n                 \n    >\n        <div class=\"text-center\" x-show=\"loading\">\n    <div class=\"spinner spinner-lg spinner--primary\"></div>\n</div>\n\n<div  x-show=\"!loading\" >\n    <div class=\"grid grid-cols-12 gap-6\">\n    \n    <div\n    class=\"col-span-12 xl:col-span-4 space-elements\"\n>\n    \n    <!-- Card -->\n<div class=\"card card-category\">\n    \n    <div class=\"card-body\">\n        \n                    <table>\n            <tbody>\n                                    <tr>\n                        <th width=\"40%\">Title:</th>\n                        <td width=\"60%\"><div class=\"text-ellipsis\">MoonShine</div></td>\n                    </tr>\n                            </tbody>\n            </table>\n        \n            \n    </div>\n\n    </div>\n<!-- END: Card -->\n</div>\n                                            <div\n    class=\"col-span-12 xl:col-span-4 space-elements\"\n>\n    \n    <!-- Card -->\n<div class=\"card card-category\">\n    \n    <div class=\"card-body\">\n        \n                    <table>\n            <tbody>\n                                    <tr>\n                        <th width=\"40%\">Title:</th>\n                        <td width=\"60%\"><div class=\"text-ellipsis\">Laravel</div></td>\n                    </tr>\n                            </tbody>\n            </table>\n        \n            \n    </div>\n\n    </div>\n<!-- END: Card -->\n</div>\n</div>\n</div>\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-cards-builder items='[{\"Title\":\"MoonShine\",\"Stars\":\"1.2k\"},{\"Title\":\"Laravel\",\"Stars\":\"80k\"}]'></moonshine-cards-builder>","props":[{"name":"items","type":"json","render":true}]},{"name":"UI/Components/Carousel","source":"MoonShine\\UI\\Components\\Carousel","view":"moonshine::components.carousel","group":"Components","tag":"moonshine-carousel","html":"<div class=\"carousel\"\n     x-data='carousel([\"\\/images\\/image_1.jpg\",\"\\/images\\/image_2.jpg\"])'\n>\n    <template x-for=\"(slide, index) in slides\">\n        <carousel-slide class=\"carousel-slide\" :class=\"(activeSlide === index) ? '_is-active' : ''\">\n            <img :src=\"slide\" alt=\"MoonShine demo\">\n        </carousel-slide>\n    </template>\n\n    <div class=\"carousel-navigation\">\n        <a @click.prevent=\"previous\" href=\"javascript:void(0);\" class=\"carousel-navigation-next\" x-show=\"activeSlide !== 0\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\"/>\n</svg>\n    </div>\n        </a>\n        <a @click.prevent=\"next\" href=\"javascript:void(0);\" class=\"carousel-navigation-prev\" x-show=\"activeSlide !== 1\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"/>\n</svg>\n    </div>\n        </a>\n    </div>\n    <div class=\"carousel-slide-count\">\n        <span x-text=\"activeSlide+1\"></span> / 2\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-carousel alt=\"MoonShine demo\"><img src=\"/images/image_1.jpg\"><img src=\"/images/image_2.jpg\"></moonshine-carousel>","props":[{"name":"alt","type":"text","render":true}]},{"name":"UI/Components/Collapse","source":"MoonShine\\UI\\Components\\Collapse","view":"moonshine::components.collapse","group":"Components","tag":"moonshine-collapse","html":"<div\n    class=\"accordion\"\n    x-data=\"\n                    collapse($persist(false).as($id('collapse')))\n            \"\n>\n    <div class=\"accordion-item\" :class=\"{ '_is-opened': open }\">\n        <button \n            type=\"button\"\n            class=\"accordion-btn\"\n            :class=\"{ '_is-active': open }\"\n            @click.prevent=\"toggle()\"\n        >\n            <div class=\"flex gap-2 items-center\">\n                \n                __MS_LABEL__\n            </div>\n\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" />\n                </svg>\n                    </button>\n        <div \n            x-cloak\n            :class=\"open ? 'block' : 'hidden'\"\n            class=\"accordion-body\"\n        >\n            <div class=\"accordion-content space-elements\">\n                <slot>MoonShine</slot>\n\n\n                \n            </div>\n        </div>\n    </div>\n</div>\n","attributes":{"label":"Collapse"},"example":"<moonshine-collapse label=\"Collapse\">MoonShine Web Component</moonshine-collapse>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/Color","source":"MoonShine\\UI\\Components\\Color","view":"moonshine::components.color","group":"Components","tag":"moonshine-color","html":"<div class=\"flex gap-2 items-center\">\n    <span class=\"size-4 rounded-sm\" style=\"background-color: #8b5cf6\"></span>\n    <span> #8b5cf6 </span>\n</div>\n","attributes":[],"example":"<moonshine-color value=\"#8b5cf6\"></moonshine-color>","props":[{"name":"value","type":"color","render":true}]},{"name":"UI/Components/Components","source":"MoonShine\\UI\\Components\\Components","view":"moonshine::components.components","group":"Components","tag":"moonshine-components","html":"<slot>MoonShine</slot>\n\n","attributes":[],"example":"<moonshine-components>MoonShine Web Component</moonshine-components>","props":[]},{"name":"UI/Components/Dropdown","source":"MoonShine\\UI\\Components\\Dropdown","view":"moonshine::components.dropdown","group":"Components","tag":"moonshine-dropdown","html":"<div x-data=\"dropdown\"\n     @click.outside=\"closeDropdown\"\n     data-dropdown-strategy=\"fixed\"\n     data-dropdown-placement=\"bottom-start\"\n     data-searchable=\"\"\n     class=\"dropdown\"\n>\n    <button type=\"button\" @click.prevent=\"toggleDropdown\" class=\"dropdown-btn\">\n        Open menu\n    </button>\n\n    <div class=\"dropdown-body\">\n                    <div class=\"dropdown-heading\">__MS_LABEL__</div>\n        \n        <div class=\"dropdown-content\">\n                            <slot>Dropdown content</slot>\n            \n                    </div>\n\n            </div>\n</div>\n","attributes":{"label":"Dropdown"},"example":"<moonshine-dropdown label=\"Dropdown\">MoonShine Web Component</moonshine-dropdown>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/FieldsGroup","source":"MoonShine\\UI\\Components\\FieldsGroup","view":"moonshine::components.fields-group","group":"Components","tag":"moonshine-fields-group","html":"<slot>MoonShine</slot>\n\n","attributes":[],"example":"<moonshine-fields-group><moonshine-field-text label=\"Title\" name=\"title\" value=\"MoonShine\"></moonshine-field-text><moonshine-field-email label=\"Email\" name=\"email\"></moonshine-field-email></moonshine-fields-group>","props":[]},{"name":"UI/Components/Files","source":"MoonShine\\UI\\Components\\Files","view":"moonshine::components.files","group":"Components","tag":"moonshine-files","html":"<div class=\"dropzone\">\n        <div class=\"dropzone-items\">\n                            <div\n                    class=\"dropzone-item dropzone-item-file\"\n                >\n                    <span class=\"dropzone-file-icon\">\n    <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"/>\n</svg>\n    </div>\n</span>\n<h5 class=\"dropzone-file-name\">\n    <a\n         download href=\"/images/image_1.jpg\"     >\n        image.jpg\n    </a>\n</h5>\n                </div>\n                    </div>\n    </div>\n","attributes":[],"example":"<moonshine-files></moonshine-files>","props":[]},{"name":"UI/Components/FlexibleRender","source":"MoonShine\\UI\\Components\\FlexibleRender","view":"moonshine::components.flexible-render","group":"Components","tag":"moonshine-flexible-render","html":"<slot>MoonShine</slot>\n","attributes":[],"example":"<moonshine-flexible-render>MoonShine Web Component</moonshine-flexible-render>","props":[]},{"name":"UI/Components/FormBuilder","source":"MoonShine\\UI\\Components\\FormBuilder","view":"moonshine::components.form.builder","group":"Components","tag":"moonshine-form-builder","html":"<form\n    class=\"form space-elements\" method=\"post\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n                \n            <input class=\"form-hidden\" type=\"hidden\" value=\"default\" data-field-selector=\"_component_name\" :id=\"$id(`field-default`)\" name=\"_component_name\" />\n\n            <slot>MoonShine</slot>\n\n    \n            <div class=\"grid grid-cols-12 gap-6\">\n            <div class=\"col-span-12 xl:col-span-12 space-elements\">\n                <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    <button type=\"submit\" class=\"btn\">\n        \n        <div class=\"spinner spinner-sm js-form-submit-button-loader\" style=\"display: none;\"></div>\n\n        Save\n            </button>\n\n\n\n                                    </div>\n            </div>\n\n                    </div>\n    </form>\n","attributes":[],"example":"<moonshine-form-builder><moonshine-field-text label=\"Title\" name=\"title\" value=\"MoonShine\"></moonshine-field-text><moonshine-field-email label=\"Email\" name=\"email\"></moonshine-field-email></moonshine-form-builder>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"UI/Components/Heading","source":"MoonShine\\UI\\Components\\Heading","view":"moonshine::components.heading","group":"Components","tag":"moonshine-heading","html":"<div class=\"heading\">\n    <div >\n        __MS_LABEL__\n    </div>\n</div>\n","attributes":{"label":"Heading"},"example":"<moonshine-heading label=\"Heading\"></moonshine-heading>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/Icon","source":"MoonShine\\UI\\Components\\Icon","view":"moonshine::components.icon","group":"Components","tag":"moonshine-icon","html":"<div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"/>\n</svg>\n    </div>\n","attributes":[],"example":"<moonshine-icon icon=\"star\" size=\"8\" color=\"warning\"></moonshine-icon>","props":[{"name":"icon","type":"text","render":true},{"name":"size","type":"number","min":1,"max":10,"render":true},{"name":"color","type":"select","options":["primary","secondary","success","warning","error","info","purple","pink","blue","green","yellow","red","gray"],"render":true}]},{"name":"UI/Components/Img","source":"MoonShine\\UI\\Components\\Img","view":"moonshine::components.img","group":"Components","tag":"moonshine-img","html":"<img src=\"/images/image_1.jpg\" alt=\"MoonShine demo\">\n","attributes":[],"example":"<moonshine-img src=\"/images/image_1.jpg\" alt=\"MoonShine demo\"></moonshine-img>","props":[{"name":"src","type":"text","render":true},{"name":"alt","type":"text","render":true}]},{"name":"UI/Components/Layout/Assets","source":"MoonShine\\UI\\Components\\Layout\\Assets","view":"moonshine::components.layout.assets","group":"Layout","tag":"moonshine-layout-assets","html":"<style id=\"colors-definer\">\n    :root:not(.dark) {\n    --ms-cm-body: oklch(98.50% 0.008 293.756);\n--ms-cm-primary: oklch(58.00% 0.24 293.756);\n--ms-cm-primary-text: oklch(98.50% 0.008 293.756);\n--ms-cm-secondary: oklch(92.00% 0.06 293.756);\n--ms-cm-secondary-text: oklch(22.00% 0.02 293.756);\n--ms-cm-base-text: oklch(22.00% 0.02 293.756);\n--ms-cm-base-stroke: oklch(58.00% 0.24 293.756 / 20%);\n--ms-cm-base-default: oklch(98.50% 0.008 293.756);\n--ms-cm-base-50: oklch(96.90% 0.016 293.756);\n--ms-cm-base-100: oklch(95.00% 0.025 293.756);\n--ms-cm-base-200: oklch(93.00% 0.045 293.756);\n--ms-cm-base-300: oklch(90.00% 0.07 293.756);\n--ms-cm-base-400: oklch(86.00% 0.11 293.756);\n--ms-cm-base-500: oklch(77.00% 0.16 293.756);\n--ms-cm-base-600: oklch(67.00% 0.2 293.756);\n--ms-cm-base-700: oklch(58.00% 0.24 293.756);\n--ms-cm-base-800: oklch(48.00% 0.19 293.756);\n--ms-cm-base-900: oklch(38.00% 0.14 293.756);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 293.756);\n--ms-cm-primary: oklch(72.00% 0.18 293.756);\n--ms-cm-primary-text: oklch(16.00% 0.05 293.756);\n--ms-cm-secondary: oklch(48.00% 0.14 293.756);\n--ms-cm-secondary-text: oklch(94.00% 0.04 293.756);\n--ms-cm-base-text: oklch(90.00% 0.03 293.756);\n--ms-cm-base-stroke: oklch(72.00% 0.18 293.756 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 293.756);\n--ms-cm-base-50: oklch(24.00% 0.05 293.756);\n--ms-cm-base-100: oklch(29.00% 0.06 293.756);\n--ms-cm-base-200: oklch(33.00% 0.07 293.756);\n--ms-cm-base-300: oklch(39.00% 0.09 293.756);\n--ms-cm-base-400: oklch(46.00% 0.12 293.756);\n--ms-cm-base-500: oklch(54.00% 0.15 293.756);\n--ms-cm-base-600: oklch(63.00% 0.17 293.756);\n--ms-cm-base-700: oklch(72.00% 0.18 293.756);\n--ms-cm-base-800: oklch(80.00% 0.15 293.756);\n--ms-cm-base-900: oklch(87.00% 0.12 293.756);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n</style>\n\n\n\n\n\n<style>\n    [x-cloak] { display: none !important; }\n</style>\n\n<script>\n    const translates = JSON.parse('{\\u0022home\\u0022:\\u0022Home\\u0022,\\u0022profile\\u0022:\\u0022Profile\\u0022,\\u0022dashboard\\u0022:\\u0022Dashboard\\u0022,\\u0022add\\u0022:\\u0022Add\\u0022,\\u0022create\\u0022:\\u0022Create\\u0022,\\u0022edit\\u0022:\\u0022Edit\\u0022,\\u0022show\\u0022:\\u0022Show\\u0022,\\u0022save\\u0022:\\u0022Save\\u0022,\\u0022saved\\u0022:\\u0022Saved\\u0022,\\u0022saved_error\\u0022:\\u0022Error\\u0022,\\u0022filters\\u0022:\\u0022Filters\\u0022,\\u0022search\\u0022:\\u0022Search\\u0022,\\u0022reset\\u0022:\\u0022Reset\\u0022,\\u0022total\\u0022:\\u0022Total\\u0022,\\u0022deleted\\u0022:\\u0022Deleted\\u0022,\\u0022delete\\u0022:\\u0022Delete\\u0022,\\u0022deleting\\u0022:\\u0022Deleting\\u0022,\\u0022download\\u0022:\\u0022Download\\u0022,\\u0022export\\u0022:\\u0022Export\\u0022,\\u0022import\\u0022:\\u0022Import\\u0022,\\u0022cancel\\u0022:\\u0022Cancel\\u0022,\\u0022confirm\\u0022:\\u0022Confirm\\u0022,\\u0022close\\u0022:\\u0022Close\\u0022,\\u0022confirm_message\\u0022:\\u0022Are you sure?\\u0022,\\u0022back\\u0022:\\u0022Back\\u0022,\\u0022more\\u0022:\\u0022More\\u0022,\\u0022all_sections\\u0022:\\u0022All sections\\u0022,\\u0022file\\u0022:\\u0022File\\u0022,\\u0022loading\\u0022:\\u0022Loading ...\\u0022,\\u0022notfound\\u0022:\\u0022Records not found\\u0022,\\u0022collapse_menu\\u0022:\\u0022Collapse menu\\u0022,\\u0022404\\u0022:\\u0022Houston we have a problem page not found\\u0022,\\u0022copied\\u0022:\\u0022Copied!\\u0022,\\u0022notifications\\u0022:{\\u0022title\\u0022:\\u0022Notifications\\u0022,\\u0022mark_as_read_all\\u0022:\\u0022Mark all as read\\u0022,\\u0022mark_as_read\\u0022:\\u0022Mark as read\\u0022},\\u0022login\\u0022:{\\u0022title\\u0022:\\u0022Welcome to :moonshine_title!\\u0022,\\u0022description\\u0022:\\u0022Please sign-in to your account\\u0022,\\u0022authorization\\u0022:\\u0022Authorization\\u0022,\\u0022remember_me\\u0022:\\u0022Remember me\\u0022,\\u0022login\\u0022:\\u0022Log in\\u0022,\\u0022logout\\u0022:\\u0022Log out\\u0022,\\u0022username\\u0022:\\u0022Username\\u0022,\\u0022email\\u0022:\\u0022E-mail\\u0022,\\u0022password\\u0022:\\u0022Password\\u0022},\\u0022resource\\u0022:{\\u0022system\\u0022:\\u0022System\\u0022,\\u0022role\\u0022:\\u0022Roles\\u0022,\\u0022name\\u0022:\\u0022Name\\u0022,\\u0022email\\u0022:\\u0022E-mail\\u0022,\\u0022password\\u0022:\\u0022Password\\u0022,\\u0022repeat_password\\u0022:\\u0022Repeat password\\u0022,\\u0022avatar\\u0022:\\u0022Avatar\\u0022,\\u0022created_at\\u0022:\\u0022Created At\\u0022,\\u0022admins_title\\u0022:\\u0022Admins\\u0022,\\u0022role_title\\u0022:\\u0022Roles\\u0022,\\u0022role_name\\u0022:\\u0022Title\\u0022,\\u0022main_information\\u0022:\\u0022Main information\\u0022,\\u0022change_password\\u0022:\\u0022Change password\\u0022,\\u0022queued\\u0022:\\u0022Queued\\u0022,\\u0022export\\u0022:{\\u0022exported\\u0022:\\u0022File exported\\u0022},\\u0022import\\u0022:{\\u0022imported\\u0022:\\u0022Imported\\u0022,\\u0022file_required\\u0022:\\u0022File is required\\u0022,\\u0022extension_not_supported\\u0022:\\u0022File extension not supported\\u0022}},\\u0022select\\u0022:{\\u0022no_results\\u0022:\\u0022No results found\\u0022,\\u0022no_options\\u0022:\\u0022No options to choose from\\u0022,\\u0022add_item\\u0022:\\u0022Press Enter to add :value\\u0022,\\u0022unique_item\\u0022:\\u0022Only unique values can be added\\u0022,\\u0022custom_add_item\\u0022:\\u0022Only values matching specific conditions can be added\\u0022,\\u0022max_item\\u0022:\\u0022Only :count values can be added\\u0022,\\u0022remove_item\\u0022:\\u0022Remove item\\u0022,\\u0022clear_all\\u0022:\\u0022Clear all\\u0022},\\u0022choices\\u0022:{\\u0022no_results\\u0022:\\u0022No results found\\u0022,\\u0022no_choices\\u0022:\\u0022No choices to choose from\\u0022,\\u0022item_select\\u0022:\\u0022Press to select\\u0022,\\u0022unique_item\\u0022:\\u0022Only unique values can be added\\u0022,\\u0022custom_add_item\\u0022:\\u0022Only values matching specific conditions can be added\\u0022,\\u0022add_item\\u0022:\\u0022Press Enter to add \\\\u0022:value\\\\u0022\\u0022,\\u0022max_item\\u0022:\\u0022Only :count values can be added\\u0022,\\u0022remove_item\\u0022:\\u0022Remove item\\u0022}}');\n</script>\n","attributes":[],"example":"<moonshine-layout-assets></moonshine-layout-assets>","props":[]},{"name":"UI/Components/Layout/Body","source":"MoonShine\\UI\\Components\\Layout\\Body","view":"moonshine::components.layout.body","group":"Layout","tag":"moonshine-layout-body","html":"<body class=\"antialiased\"\n    x-cloak\n    x-data=\"{ minimizedMenu: $persist(false).as('minimizedMenu') }\"\n>\n    <slot>MoonShine</slot>\n\n\n    \n\n    <div x-data=\"imgPopup()\" @img-popup.window=\"show($event.detail)\">\n    <template x-teleport=\"body\">\n        <div class=\"modal-template\" data-img-popup>\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                class=\"modal\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                @click.self=\"close\"\n            >\n                <div\n                    class=\"modal-dialog\"\n                    :class=\"{'modal-dialog-auto': auto, 'modal-dialog-xl': wide}\"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"close\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            <img\n                                @click.outside=\"close\"\n                                src=\"\"\n                                :src=\"src\"\n                                :style=\"styles\"\n                                alt=\"\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n</div>\n    <div x-data=\"toasts()\"\n     class=\"toast-container\"\n     @toast.window=\"add($event.detail)\"\n>\n    <template x-for=\"toast of toasts\" :key=\"toast.id\">\n        <div\n            x-show=\"visible.includes(toast)\"\n            x-transition:enter=\"transition ease-in duration-300\"\n            x-transition:enter-start=\"transform opacity-0\"\n            x-transition:enter-end=\"transform opacity-100\"\n            x-transition:leave=\"transition ease duration-300\"\n            x-transition:leave-start=\"transform scale-100 opacity-100\"\n            x-transition:leave-end=\"transform scale-90 opacity-0\"\n            @click=\"remove(toast.id)\"\n            class=\"toast-item\"\n            :class=\"{\n                    'toast-primary': toast.type === 'primary',\n                    'toast-secondary': toast.type === 'secondary',\n                    'toast-success': toast.type === 'success',\n                    'toast-info': toast.type === 'info',\n                    'toast-warning': toast.type === 'warning',\n                    'toast-error': toast.type === 'error',\n                }\"\n        >\n            <template x-if=\"toast.type === 'success'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'error'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'warning'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'info'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'primary'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'secondary'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"/>\n</svg>\n    </div>\n            </template>\n            <p x-text=\"toast.text\"></p>\n        </div>\n    </template>\n</div>\n\n    </body>\n","attributes":[],"example":"<moonshine-layout-body>MoonShine Web Component</moonshine-layout-body>","props":[]},{"name":"UI/Components/Layout/BottomBar","source":"MoonShine\\UI\\Components\\Layout\\BottomBar","view":"moonshine::components.layout.bottom-bar","group":"Layout","tag":"moonshine-layout-bottom-bar","html":"<div class=\"layout-bottom-bar always-visible\"\n    x-data=\"bottomBarMenu\"\n>\n    <div class=\"layout-bottom-bar-content\">\n        <button\n            type=\"button\"\n            class=\"layout-bottom-bar-back\"\n            x-show=\"showBackButton\"\n            @click=\"navigateBack()\"\n            x-cloak\n        >\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\"/>\n</svg>\n    </div>\n            <span class=\"layout-bottom-bar-back-text\">Back</span>\n        </button>\n\n        <div class=\"layout-bottom-bar-items\">\n            <template x-for=\"(item, index) in currentItems\" :key=\"index\">\n                <a\n                    :href=\"item.url\"\n                    class=\"layout-bottom-bar-item\"\n                    @click.prevent=\"handleItemClick(item)\"\n                    :class=\"{ '_is-active': item.isActive }\"\n                >\n                    <div class=\"layout-bottom-bar-item-icon\" x-html=\"item.icon\"></div>\n                    <div class=\"layout-bottom-bar-item-text\" x-text=\"item.text\"></div>\n                    <div class=\"layout-bottom-bar-item-badge\" x-show=\"item.badge\" x-text=\"item.badge\" x-cloak></div>\n                </a>\n            </template>\n        </div>\n    </div>\n\n    <div style=\"display: none;\" data-bottom-menu-source>\n        <ul class=\"menu-list\">\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#overview\"\n    class=\"menu-link\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Overview</span>\n\n    </a>\n\n\n</li>\n\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#settings\"\n    class=\"menu-link\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Settings</span>\n\n    </a>\n\n\n</li>\n\n            </ul>\n\n\n\n        \n    </div>\n</div>\n","attributes":[],"example":"<moonshine-layout-bottom-bar></moonshine-layout-bottom-bar>","props":[]},{"name":"UI/Components/Layout/Box","source":"MoonShine\\UI\\Components\\Layout\\Box","view":"moonshine::components.layout.box","group":"Layout","tag":"moonshine-layout-box","html":"<div class=\"box space-elements\">\n     <h2 class=\"box-title\">__MS_LABEL__</h2> \n            <slot>MoonShine</slot>\n\n    \n    \n</div>\n","attributes":{"label":"Box"},"example":"<moonshine-layout-box label=\"Box\">MoonShine Web Component</moonshine-layout-box>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/Layout/Burger","source":"MoonShine\\UI\\Components\\Layout\\Burger","view":"moonshine::components.layout.burger","group":"Layout","tag":"moonshine-layout-burger","html":"<button\n    type=\"button\"\n    class=\"btn-burger btn-fit\"\n            @click.prevent=\"$store.menu['toggleSidebar']()\"\n    >\n    <svg x-show=\"!$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n    </svg>\n    <svg x-cloak x-show=\"$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n</button>\n","attributes":[],"example":"<moonshine-layout-burger></moonshine-layout-burger>","props":[]},{"name":"UI/Components/Layout/Column","source":"MoonShine\\UI\\Components\\Layout\\Column","view":"moonshine::components.layout.column","group":"Layout","tag":"moonshine-layout-column","html":"<div\n    class=\"col-span-12 xl:col-span-6 space-elements\"\n>\n            <slot>MoonShine</slot>\n\n    \n    \n</div>\n","attributes":[],"example":"<moonshine-layout-column>MoonShine Web Component</moonshine-layout-column>","props":[]},{"name":"UI/Components/Layout/Content","source":"MoonShine\\UI\\Components\\Layout\\Content","view":"moonshine::components.layout.content","group":"Layout","tag":"moonshine-layout-content","html":"<main class=\"layout-content\">\n    <slot>MoonShine</slot>\n\n\n    \n</main>\n","attributes":[],"example":"<moonshine-layout-content>MoonShine Web Component</moonshine-layout-content>","props":[]},{"name":"UI/Components/Layout/Div","source":"MoonShine\\UI\\Components\\Layout\\Div","view":"moonshine::components.layout.div","group":"Layout","tag":"moonshine-layout-div","html":"<div  >\n            <slot>MoonShine</slot>\n\n    \n    \n</div>\n","attributes":[],"example":"<moonshine-layout-div>MoonShine Web Component</moonshine-layout-div>","props":[]},{"name":"UI/Components/Layout/Divider","source":"MoonShine\\UI\\Components\\Layout\\Divider","view":"moonshine::components.layout.divider","group":"Layout","tag":"moonshine-layout-divider","html":"<div class=\"divider\">\n        __MS_LABEL__\n    </div>\n","attributes":{"label":"Divider"},"example":"<moonshine-layout-divider label=\"Divider\"></moonshine-layout-divider>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/Layout/Favicon","source":"MoonShine\\UI\\Components\\Layout\\Favicon","view":"moonshine::components.layout.favicon","group":"Layout","tag":"moonshine-layout-favicon","html":"<link rel=\"apple-touch-icon\"\n      sizes=\"180x180\"\n      href=\"https://getmoonshine.app/vendor/moonshine/apple-touch-icon.png\"\n>\n\n<link rel=\"icon\" type=\"image/png\"\n      sizes=\"32x32\"\n      href=\"https://getmoonshine.app/vendor/moonshine/favicon-32x32.png\"\n>\n\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\"\n      href=\"https://getmoonshine.app/vendor/moonshine/favicon-16x16.png\"\n>\n\n<link rel=\"mask-icon\"\n      href=\"https://getmoonshine.app/vendor/moonshine/safari-pinned-tab.svg\"\n      color=\"\"\n>\n\n\n","attributes":[],"example":"<moonshine-layout-favicon></moonshine-layout-favicon>","props":[]},{"name":"UI/Components/Layout/Flash","source":"MoonShine\\UI\\Components\\Layout\\Flash","view":"moonshine::components.layout.flash","group":"Layout","tag":"moonshine-layout-flash","html":"<div class=\"alert alert-info\"\n    >\n    <div class=\"alert-icon\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5\"/>\n</svg>\n    </div>\n    </div>\n    <p class=\"alert-content\">Flash message</p>\n\n    </div>\n\n","attributes":[],"example":"<moonshine-layout-flash></moonshine-layout-flash>","props":[]},{"name":"UI/Components/Layout/Flex","source":"MoonShine\\UI\\Components\\Layout\\Flex","view":"moonshine::components.layout.flex","group":"Layout","tag":"moonshine-layout-flex","html":"<div\n    class=\"flex gap-4 items-center justify-center flex-wrap\"\n>\n            <span class=\"badge badge-purple\">One</span>\n\n            <span class=\"badge badge-purple\">Two</span>\n\n    \n    \n</div>\n","attributes":[],"example":"<moonshine-layout-flex></moonshine-layout-flex>","props":[]},{"name":"UI/Components/Layout/Footer","source":"MoonShine\\UI\\Components\\Layout\\Footer","view":"moonshine::components.layout.footer","group":"Layout","tag":"moonshine-layout-footer","html":"<footer class=\"layout-footer\">\n    <div class=\"flex flex-col flex-wrap items-center justify-between gap-y-4 gap-x-8 md:flex-row\">\n        \n        \n\n        <div class=\"text-center text-sm md:text-left\">\n            &copy; MoonShine\n        </div>\n\n                    <nav class=\"flex flex-wrap justify-center gap-x-4 gap-y-2 md:justify-start lg:gap-x-6\">\n                                    <a href=\"https://getmoonshine.app/docs\"\n                       class=\"text-sm\"\n                       target=\"_blank\">\n                        Documentation\n                    </a>\n                            </nav>\n            </div>\n</footer>\n","attributes":[],"example":"<moonshine-layout-footer></moonshine-layout-footer>","props":[]},{"name":"UI/Components/Layout/Grid","source":"MoonShine\\UI\\Components\\Layout\\Grid","view":"moonshine::components.layout.grid","group":"Layout","tag":"moonshine-layout-grid","html":"<div class=\"grid grid-cols-12 gap-6\">\n            <div\n    class=\"col-span-12 xl:col-span-6 space-elements\"\n>\n            <span class=\"badge badge-purple\">One</span>\n\n    \n    \n</div>\n\n            <div\n    class=\"col-span-12 xl:col-span-6 space-elements\"\n>\n            <span class=\"badge badge-purple\">Two</span>\n\n    \n    \n</div>\n\n    \n    \n</div>\n","attributes":[],"example":"<moonshine-layout-grid></moonshine-layout-grid>","props":[]},{"name":"UI/Components/Layout/Head","source":"MoonShine\\UI\\Components\\Layout\\Head","view":"moonshine::components.layout.head","group":"Layout","tag":"moonshine-layout-head","html":"<head \n>\n    <meta charset=\"utf-8\" />\n\n    <title>MoonShine Storybook</title>\n\n    <meta name=\"description\"\n          content=\"MoonShine Storybook\"\n    />\n\n    <meta name=\"viewport\"\n          content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"\n    />\n\n    <meta name=\"msapplication-TileColor\" content=\"\">\n    <meta name=\"theme-color\" content=\"\">\n\n    \n    \n</head>\n","attributes":[],"example":"<moonshine-layout-head></moonshine-layout-head>","props":[]},{"name":"UI/Components/Layout/Header","source":"MoonShine\\UI\\Components\\Layout\\Header","view":"moonshine::components.layout.header","group":"Layout","tag":"moonshine-layout-header","html":"<div class=\"layout-navigation\">\n    <div class=\"menu-burger\" >\n            <button\n    type=\"button\"\n    class=\"btn-burger btn-fit\"\n            @click.prevent=\"$store.menu['toggleSidebar']()\"\n    >\n    <svg x-show=\"!$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n    </svg>\n    <svg x-cloak x-show=\"$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n</button>\n\n    \n    \n</div>\n\n    <!-- Breadcrumbs -->\n    <div class=\"breadcrumbs\">\n        <ul class=\"breadcrumbs-list\">\n                            <li class=\"breadcrumbs-item\">\n                                            <a href=\"/\"\n                                                   >\n                            \n                            Home\n                        </a>\n                                    </li>\n                            <li class=\"breadcrumbs-item\">\n                                            <span>\n                            Storybook\n                        </span>\n                                    </li>\n                    </ul>\n    </div>\n    <!-- END: Breadcrumbs -->\n\n    <div\n        x-data=\"{\n            isPopover: false,\n            observer: null,\n            init() {\n                this.observer = new ResizeObserver(entries => {\n                    for (let entry of entries) {\n                        const width = entry.contentRect.width;\n                        this.isPopover = width < 100;\n                    }\n                });\n                this.observer.observe(this.$el.parentElement);\n            },\n            destroy() {\n                this.observer.disconnect();\n            }\n        }\"\n        x-init=\"init\"\n        x-on:destroy.window=\"destroy\"\n        class=\"search-wrapper\"\n    >\n        <span\n    @popover_toggled:default.window=\"toggle\" x-show=\"isPopover\"\n    class=\"popover-trigger\"\n    title=\"\"\n    x-data=\"popover({placement: 'auto'})\"\n>\n    <button class=\"flex justify-center w-full search-form-show\">\n                    <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n                </button>\n    <div x-ignore class=\"hidden popover-body-content\"><div class=\"search\">\n                <form\n    class=\"search-form\" method=\"get\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" x-ref=\"searchForm\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n    \n            <div x-data=\"JSON.parse(&#039;{\\u0022searchValue\\u0022:\\u0022\\u0022,\\u0022hasRequestValue\\u0022:false,\\u0022isCtrlPressed\\u0022:false,\\u0022isKPressed\\u0022:false}&#039;)\" style=\"display: inline;\" >\n            <input class=\"form-input search-form-field\" type=\"search\" value=\"\" data-field-selector=\"search\" :id=\"$id(`field-default`)\" name=\"search\" x-ref=\"searchInput\" @keyup.ctrl.k.window=\"$refs.searchInput.focus()\" @keyup.ctrl.period.window=\"$refs.searchInput.focus()\" @input.debounce.300ms=\"\" placeholder=\"Search\" x-model=\"searchValue\" x-on:change=\"onChangeField($event)\"\n/>\n\n            <button type=\"submit\" class=\"search-form-submit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <button type=\"button\" class=\"search-form-clear\" x-show=\"searchValue!=&#039;&#039;\" x-on:click=\"searchValue = &quot;&quot;; $refs.searchInput.value = &quot;&quot;\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <div @keydown.meta.window=\"isCtrlPressed = true\" @keyup.meta.window=\"isCtrlPressed = false\" @keydown.control.window=\"isCtrlPressed = true\" @keyup.control.window=\"isCtrlPressed = false\" @keydown.k.window=\"isKPressed = true; if (isCtrlPressed) { $refs.searchInput.focus(); $event.preventDefault() }\" @keyup.k.window=\"isKPressed = false\" class=\"search-button-keys\" x-show=\"searchValue==&#039;&#039;\" >\n            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isCtrlPressed }\"\n                                x-text=\"`${(navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone') ? '⌘' : '^'}`\">^</kbd>\n                            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isKPressed }\"\n                            >K</kbd>\n                        \n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    \n    </form>\n\n            </div></div>\n</span>\n\n        <div class=\"search\" x-show=\"!isPopover\">\n            <form\n    class=\"search-form\" method=\"get\" @form_reset:default.window=\"formReset\" @form_submit:default.window=\"submit\" @show_when_refresh:default.window=\"whenFieldsInit\" data-component=\"default\" x-data=\"formBuilder(&#039;default&#039;,{&quot;whenFields&quot;:[],&quot;reactiveUrl&quot;:&quot;&quot;},[])\" x-ref=\"searchForm\" action=\"#\" enctype=\"multipart/form-data\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n    \n            <div x-data=\"JSON.parse(&#039;{\\u0022searchValue\\u0022:\\u0022\\u0022,\\u0022hasRequestValue\\u0022:false,\\u0022isCtrlPressed\\u0022:false,\\u0022isKPressed\\u0022:false}&#039;)\" style=\"display: inline;\" >\n            <input class=\"form-input search-form-field\" type=\"search\" value=\"\" data-field-selector=\"search\" :id=\"$id(`field-default`)\" name=\"search\" x-ref=\"searchInput\" @keyup.ctrl.k.window=\"$refs.searchInput.focus()\" @keyup.ctrl.period.window=\"$refs.searchInput.focus()\" @input.debounce.300ms=\"\" placeholder=\"Search\" x-model=\"searchValue\" x-on:change=\"onChangeField($event)\"\n/>\n\n            <button type=\"submit\" class=\"search-form-submit\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <button type=\"button\" class=\"search-form-clear\" x-show=\"searchValue!=&#039;&#039;\" x-on:click=\"searchValue = &quot;&quot;; $refs.searchInput.value = &quot;&quot;\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n\n        \n        \n            </button>\n\n\n            <div @keydown.meta.window=\"isCtrlPressed = true\" @keyup.meta.window=\"isCtrlPressed = false\" @keydown.control.window=\"isCtrlPressed = true\" @keyup.control.window=\"isCtrlPressed = false\" @keydown.k.window=\"isKPressed = true; if (isCtrlPressed) { $refs.searchInput.focus(); $event.preventDefault() }\" @keyup.k.window=\"isKPressed = false\" class=\"search-button-keys\" x-show=\"searchValue==&#039;&#039;\" >\n            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isCtrlPressed }\"\n                                x-text=\"`${(navigator.platform.startsWith('Mac') || navigator.platform === 'iPhone') ? '⌘' : '^'}`\">^</kbd>\n                            <kbd\n                                class=\"search-button-key\"\n                                :class=\"{ 'search-button-key--pressed': isKPressed }\"\n                            >K</kbd>\n                        \n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    \n    </form>\n\n        </div>\n    </div>\n\n    <div class=\"theme-switcher\">\n    <button @click.prevent=\"$dispatch('darkMode:toggle')\"\n            class=\"theme-switcher-btn btn-fit\"\n            type=\"button\"\n            :title=\"$store.darkMode.on ? 'Toggle light mode' : 'Toggle dark mode'\"\n    >\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"!$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\"\n            />\n        </svg>\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\"\n            />\n        </svg>\n    </button>\n</div>\n\n\n    \n</div>\n","attributes":[],"example":"<moonshine-layout-header></moonshine-layout-header>","props":[]},{"name":"UI/Components/Layout/Html","source":"MoonShine\\UI\\Components\\Layout\\Html","view":"moonshine::components.layout.html","group":"Layout","tag":"moonshine-layout-html","html":"<!DOCTYPE html>\n<html >\n    <slot>MoonShine</slot>\n\n\n    \n</html>\n","attributes":[],"example":"<moonshine-layout-html>MoonShine Web Component</moonshine-layout-html>","props":[]},{"name":"UI/Components/Layout/Layout","source":"MoonShine\\UI\\Components\\Layout\\Layout","view":"moonshine::components.layout.index","group":"Layout","tag":"moonshine-layout-layout","html":"<slot>MoonShine</slot>\n\n\n\n","attributes":[],"example":"<moonshine-layout-layout>MoonShine Web Component</moonshine-layout-layout>","props":[]},{"name":"UI/Components/Layout/LineBreak","source":"MoonShine\\UI\\Components\\Layout\\LineBreak","view":"moonshine::components.layout.line-break","group":"Layout","tag":"moonshine-layout-line-break","html":"<div class=\"my-4\"></div>\n","attributes":[],"example":"<moonshine-layout-line-break></moonshine-layout-line-break>","props":[]},{"name":"UI/Components/Layout/Logo","source":"MoonShine\\UI\\Components\\Layout\\Logo","view":"moonshine::components.layout.logo","group":"Layout","tag":"moonshine-layout-logo","html":"<a class=\"logo block\" rel=\"home\" href=\"/\">\n    <img src=\"/vendor/moonshine/logo.svg\"\n        class=\"hidden h-14 xl:block\"\n         alt=\"MoonShine\"\n            />\n\n    \n            <img src=\"/vendor/moonshine/logo-small.svg\"\n            class=\"block h-8 lg:h-10 xl:hidden\"\n             alt=\"MoonShine\"\n                     />\n    \n    </a>\n","attributes":[],"example":"<moonshine-layout-logo href=\"/\" src=\"/vendor/moonshine/logo.svg\" small-src=\"/vendor/moonshine/logo-small.svg\" alt=\"MoonShine\"></moonshine-layout-logo>","props":[{"name":"href","type":"text","render":true},{"name":"src","type":"text","render":true},{"name":"small-src","type":"text","render":true},{"name":"alt","type":"text","render":true}]},{"name":"UI/Components/Layout/Menu","source":"MoonShine\\UI\\Components\\Layout\\Menu","view":"moonshine::components.menu.index","group":"Layout","tag":"moonshine-layout-menu","html":"<ul class=\"menu-list\">\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#overview\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Overview</span>\n\n    </a>\n\n\n</li>\n\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#settings\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Settings</span>\n\n    </a>\n\n\n</li>\n\n            </ul>\n\n\n","attributes":[],"example":"<moonshine-layout-menu></moonshine-layout-menu>","props":[]},{"name":"UI/Components/Layout/Meta","source":"MoonShine\\UI\\Components\\Layout\\Meta","view":"","group":"Layout","tag":"moonshine-layout-meta","html":"<meta name=\"description\" content=\"MoonShine Web Components\" />","attributes":[],"example":"<moonshine-layout-meta></moonshine-layout-meta>","props":[]},{"name":"UI/Components/Layout/MobileBar","source":"MoonShine\\UI\\Components\\Layout\\MobileBar","view":"moonshine::components.layout.mobile-bar","group":"Layout","tag":"moonshine-layout-mobile-bar","html":"<!-- Mobile bar -->\n<div class=\"layout-menu-mobile layout-menu-horizontal\"\n    :class=\"$store.menu.isMobileBarOpen && '_is-opened'\"\n>\n    <div class=\"menu-logo\" >\n            <a class=\"logo block\" rel=\"home\" href=\"/\">\n    <img src=\"/vendor/moonshine/logo.svg\"\n        class=\"hidden h-14 xl:block\" :class=\"minimizedMenu &amp;&amp; &#039;!hidden&#039;\"\n         alt=\"MoonShine\"\n            />\n\n    \n            <img src=\"/vendor/moonshine/logo-small.svg\"\n            class=\"block h-8 lg:h-10 xl:hidden\" :class=\"minimizedMenu &amp;&amp; &#039;!block&#039;\"\n             alt=\"MoonShine\"\n                     />\n    \n    </a>\n\n    \n    \n</div>\n\n    <div class=\"menu-actions\" >\n            <div class=\"theme-switcher\">\n    <button @click.prevent=\"$dispatch('darkMode:toggle')\"\n            class=\"theme-switcher-btn btn-fit\"\n            type=\"button\"\n            :title=\"$store.darkMode.on ? 'Toggle light mode' : 'Toggle dark mode'\"\n    >\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"!$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\"\n            />\n        </svg>\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\"\n            />\n        </svg>\n    </button>\n</div>\n\n            <button\n    type=\"button\"\n    class=\"btn-burger btn-fit\"\n            @click.prevent=\"$store.menu['toggleMobileBar']()\"\n    >\n    <svg x-show=\"!$store.menu['isMobileBarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n    </svg>\n    <svg x-cloak x-show=\"$store.menu['isMobileBarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n</button>\n\n    \n    \n</div>\n\n\n    \n</div>\n<!-- END: Mobile bar -->\n","attributes":[],"example":"<moonshine-layout-mobile-bar></moonshine-layout-mobile-bar>","props":[],"note":"The mobile bar is visible on narrow screens only, so the preview opens at 390 px.","viewport":"390px"},{"name":"UI/Components/Layout/SecondBar","source":"MoonShine\\UI\\Components\\Layout\\SecondBar","view":"moonshine::components.layout.second-bar","group":"Layout","tag":"moonshine-layout-second-bar","html":"<aside class=\"layout-second-sidebar\"\n       :class=\"{ '_is-minimized': minimizedMenu }\"\n>\n    <ul class=\"menu-list\">\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#overview\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Overview</span>\n\n    </a>\n\n\n</li>\n\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#settings\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Settings</span>\n\n    </a>\n\n\n</li>\n\n            </ul>\n\n\n\n\n    \n    \n</aside>\n","attributes":[],"example":"<moonshine-layout-second-bar></moonshine-layout-second-bar>","props":[],"note":"Sidebars are visible on wide screens, so the preview opens at 1280 px. On phones MoonShine opens them with the burger — see the AppLayout example.","viewport":"1280px"},{"name":"UI/Components/Layout/Sidebar","source":"MoonShine\\UI\\Components\\Layout\\Sidebar","view":"moonshine::components.layout.sidebar","group":"Layout","tag":"moonshine-layout-sidebar","html":"<!-- Sidebar -->\n<aside class=\"layout-menu\"\n       :class=\"{ '_is-minimized': minimizedMenu, '_is-opened': $store.menu.isSidebarOpen }\"\n>\n    <div class=\"menu-header\" >\n            <div class=\"menu-logo\" >\n            <a class=\"logo block\" rel=\"home\" href=\"/\">\n    <img src=\"/vendor/moonshine/logo.svg\"\n        class=\"hidden h-14 xl:block\" :class=\"minimizedMenu &amp;&amp; &#039;!hidden&#039;\"\n         alt=\"MoonShine\"\n            />\n\n    \n            <img src=\"/vendor/moonshine/logo-small.svg\"\n            class=\"block h-8 lg:h-10 xl:hidden\" :class=\"minimizedMenu &amp;&amp; &#039;!block&#039;\"\n             alt=\"MoonShine\"\n                     />\n    \n    </a>\n\n    \n    \n</div>\n\n            <div class=\"menu-actions\" >\n            <div class=\"theme-switcher\">\n    <button @click.prevent=\"$dispatch('darkMode:toggle')\"\n            class=\"theme-switcher-btn btn-fit\"\n            type=\"button\"\n            :title=\"$store.darkMode.on ? 'Toggle light mode' : 'Toggle dark mode'\"\n    >\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"!$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\"\n            />\n        </svg>\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\"\n            />\n        </svg>\n    </button>\n</div>\n\n    \n    \n</div>\n\n            <div class=\"menu-burger\" >\n            <button\n    type=\"button\"\n    class=\"btn-burger btn-fit\"\n            @click.prevent=\"$store.menu['toggleSidebar']()\"\n    >\n    <svg x-show=\"!$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n    </svg>\n    <svg x-cloak x-show=\"$store.menu['isSidebarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n</button>\n\n    \n    \n</div>\n\n    \n    \n</div>\n\n    <div class=\"menu menu--vertical\" >\n            <ul class=\"menu-list\">\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#overview\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Overview</span>\n\n    </a>\n\n\n</li>\n\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#settings\"\n    class=\"menu-link\" x-data=\"navTooltip\" @mouseenter=\"toggleTooltip\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Settings</span>\n\n    </a>\n\n\n</li>\n\n            </ul>\n\n\n\n    \n    \n</div>\n\n\n    \n    \n</aside>\n<!-- END: Sidebar -->\n","attributes":[],"example":"<moonshine-layout-sidebar></moonshine-layout-sidebar>","props":[],"note":"Sidebars are visible on wide screens, so the preview opens at 1280 px. On phones MoonShine opens them with the burger — see the AppLayout example.","viewport":"1280px"},{"name":"UI/Components/Layout/ThemeSwitcher","source":"MoonShine\\UI\\Components\\Layout\\ThemeSwitcher","view":"moonshine::components.layout.theme-switcher","group":"Layout","tag":"moonshine-layout-theme-switcher","html":"<div class=\"theme-switcher\">\n    <button @click.prevent=\"$dispatch('darkMode:toggle')\"\n            class=\"theme-switcher-btn btn-fit\"\n            type=\"button\"\n            :title=\"$store.darkMode.on ? 'Toggle light mode' : 'Toggle dark mode'\"\n    >\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"!$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\"\n            />\n        </svg>\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\"\n            />\n        </svg>\n    </button>\n</div>\n","attributes":[],"example":"<moonshine-layout-theme-switcher></moonshine-layout-theme-switcher>","props":[]},{"name":"UI/Components/Layout/TopBar","source":"MoonShine\\UI\\Components\\Layout\\TopBar","view":"moonshine::components.layout.top-bar","group":"Layout","tag":"moonshine-layout-top-bar","html":"<!-- Top bar -->\n<div class=\"layout-menu-horizontal\"\n    :class=\"$store.menu.isTopbarOpen && '_is-opened'\"\n>\n    <div class=\"menu-logo\" >\n            <a class=\"logo block\" rel=\"home\" href=\"/\">\n    <img src=\"/vendor/moonshine/logo.svg\"\n        class=\"hidden h-14 xl:block\" :class=\"minimizedMenu &amp;&amp; &#039;!hidden&#039;\"\n         alt=\"MoonShine\"\n            />\n\n    \n            <img src=\"/vendor/moonshine/logo-small.svg\"\n            class=\"block h-8 lg:h-10 xl:hidden\" :class=\"minimizedMenu &amp;&amp; &#039;!block&#039;\"\n             alt=\"MoonShine\"\n                     />\n    \n    </a>\n\n    \n    \n</div>\n\n    <div class=\"menu menu--horizontal\" >\n            <ul class=\"menu-list\">\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#overview\"\n    class=\"menu-link\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Overview</span>\n\n    </a>\n\n\n</li>\n\n                    <li\n    class=\"menu-item\"\n>\n    <a\n    href=\"#settings\"\n    class=\"menu-link\"\n    >\n            <div class=\"menu-icon\">\n            <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n\n        </div>\n    \n    <span class=\"menu-text \">Settings</span>\n\n    </a>\n\n\n</li>\n\n            </ul>\n\n\n\n    \n    \n</div>\n\n    <div class=\"menu-actions\" >\n            <div class=\"theme-switcher\">\n    <button @click.prevent=\"$dispatch('darkMode:toggle')\"\n            class=\"theme-switcher-btn btn-fit\"\n            type=\"button\"\n            :title=\"$store.darkMode.on ? 'Toggle light mode' : 'Toggle dark mode'\"\n    >\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"!$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z\"\n            />\n        </svg>\n        <svg\n            class=\"theme-switcher-icon\"\n            x-show=\"$store.darkMode.on\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke-width=\"1.5\"\n            stroke=\"currentColor\"\n        >\n            <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z\"\n            />\n        </svg>\n    </button>\n</div>\n\n            <div class=\"menu-burger\" >\n            <button\n    type=\"button\"\n    class=\"btn-burger btn-fit\"\n            @click.prevent=\"$store.menu['toggleTopbar']()\"\n    >\n    <svg x-show=\"!$store.menu['isTopbarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\" />\n    </svg>\n    <svg x-cloak x-show=\"$store.menu['isTopbarOpen']\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n</button>\n\n    \n    \n</div>\n\n    \n    \n</div>\n\n\n    \n</div>\n<!-- END: Top bar -->\n","attributes":[],"example":"<moonshine-layout-top-bar></moonshine-layout-top-bar>","props":[]},{"name":"UI/Components/Layout/Wrapper","source":"MoonShine\\UI\\Components\\Layout\\Wrapper","view":"moonshine::components.layout.wrapper","group":"Layout","tag":"moonshine-layout-wrapper","html":"<div class=\"layout-wrapper\"\n     :class=\"minimizedMenu && 'layout-wrapper-short'\"\n>\n    <slot>MoonShine</slot>\n\n\n    \n\n    <div\n        class=\"layout-overlay\"\n        x-cloak\n        x-show=\"$store.menu.isSidebarOpen\"\n        x-on:click=\"$store.menu.toggleSidebar()\"\n        x-transition.opacity\n    >\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-layout-wrapper>MoonShine Web Component</moonshine-layout-wrapper>","props":[]},{"name":"UI/Components/Link","source":"MoonShine\\UI\\Components\\Link","view":"","group":"Components","tag":"moonshine-link","html":"<a class=\"inline-flex items-center gap-1 max-w-full\" href=\"__MS_HREF__\">\n    \n    __MS_LABEL__\n    </a>\n","attributes":{"label":"Link","href":"#"},"example":"<moonshine-link label=\"Link\"></moonshine-link>","props":[{"name":"label","type":"text"},{"name":"href","type":"text"}]},{"name":"UI/Components/Loader","source":"MoonShine\\UI\\Components\\Loader","view":"moonshine::components.loader","group":"Components","tag":"moonshine-loader","html":"<div class=\"text-center\">\n    <div class=\"spinner spinner-lg spinner--primary\"></div>\n</div>\n","attributes":[],"example":"<moonshine-loader></moonshine-loader>","props":[]},{"name":"UI/Components/Metrics/Wrapped/ValueMetric","source":"MoonShine\\UI\\Components\\Metrics\\Wrapped\\ValueMetric","view":"moonshine::components.metrics.wrapped.value","group":"Components","tag":"moonshine-value-metric","html":"<div\n    class=\"col-span-12 xl:col-span-12 space-elements\" xmlns:x-moonshine=\"http://www.w3.org/1999/html\"\n>\n    \n    <div class=\"box space-elements h-full p-0\">\n    \n    \n    <div class=\"report-card\" :id=\"$id(`metrics`)\">\n    \n    \n    <div class=\"report-card-body\">\n        <div class=\"report-card-value\">1280</div>\n        <h5 class=\"report-card-title\">__MS_LABEL__</h5>\n    </div>\n</div>\n</div>\n</div>\n","attributes":{"label":"ValueMetric"},"example":"<moonshine-value-metric label=\"Visitors\" value=\"1280\"></moonshine-value-metric>","props":[{"name":"label","type":"text"},{"name":"value","type":"text","render":true}]},{"name":"UI/Components/Modal","source":"MoonShine\\UI\\Components\\Modal","view":"moonshine::components.modal","group":"Components","tag":"moonshine-modal","html":"<div x-data=\"modal(\n    '',\n    '',\n    '1')\"\n    \n>\n    <template x-teleport=\"body\">\n        <div\n            class=\"modal-template\"\n            @modal_toggled:ms_instance_modal.window='toggleModal($event)'        >\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                class=\"modal\"\n                 @click.self=\"toggleModal\"             >\n                <div\n                    class=\"modal-dialog\n                    \"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <div>\n                                <h5 class=\"modal-title\">__MS_LABEL__</h5>\n                                                            </div>\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"toggleModal\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            \n                            <slot>Modal content</slot>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n\n    </div>\n","attributes":{"label":"Modal"},"example":"<moonshine-modal label=\"Modal\">MoonShine Web Component</moonshine-modal>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/OffCanvas","source":"MoonShine\\UI\\Components\\OffCanvas","view":"moonshine::components.off-canvas","group":"Components","tag":"moonshine-off-canvas","html":"<div x-data=\"offCanvas(\n    '',\n    '',\n    '1')\"\n    \n>\n    \n    <template x-teleport=\"body\">\n        <div\n            class=\"offcanvas-template\"\n            @off_canvas_toggled:ms_instance_canvas.window='toggleCanvas'        >\n            <div\n                x-show=\"open\"\n                x-bind=\"dismissCanvas\"\n                                    x-transition:enter=\"transition ease-out duration-300\"\n                    x-transition:enter-start=\"opacity-0 translate-x-full\"\n                    x-transition:enter-end=\"opacity-100 translate-x-0\"\n                    x-transition:leave=\"transition ease-in duration-150\"\n                    x-transition:leave-start=\"opacity-100 translate-x-0\"\n                    x-transition:leave-end=\"opacity-0 translate-x-full\"\n                                class=\"offcanvas offcanvas-right\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n            >\n                <div class=\"offcanvas-header\">\n                    <h5 class=\"offcanvas-title\">__MS_LABEL__</h5>\n                    <button\n                        type=\"button\"\n                        class=\"offcanvas-close btn-fit\"\n                        @click.prevent=\"toggleCanvas\"\n                        aria-label=\"Close\"\n                    >\n                        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                    </button>\n                </div>\n                <div class=\"offcanvas-body\">\n                    \n                    <slot>OffCanvas content</slot>\n                </div>\n            </div>\n            <div x-show=\"open\" x-transition.opacity class=\"offcanvas-backdrop\"></div>\n        </div>\n    </template>\n</div>\n","attributes":{"label":"OffCanvas"},"example":"<moonshine-off-canvas label=\"OffCanvas\">MoonShine Web Component</moonshine-off-canvas>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/Popover","source":"MoonShine\\UI\\Components\\Popover","view":"moonshine::components.popover","group":"Components","tag":"moonshine-popover","html":"<span\n    @popover_toggled:default.window=\"toggle\" data-trigger=\"click\"\n    class=\"popover-trigger\"\n    title=\"__MS_LABEL__\"\n    x-data=\"popover({placement: 'right'})\"\n>\n    Open popover\n    <div x-ignore class=\"hidden popover-body-content\"><slot>Popover content</slot></div>\n</span>\n","attributes":{"label":"Popover"},"example":"<moonshine-popover label=\"Popover\">MoonShine Web Component</moonshine-popover>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/PrettyLimit","source":"MoonShine\\UI\\Components\\PrettyLimit","view":"moonshine::components.pretty-limit","group":"Components","tag":"moonshine-pretty-limit","html":"<span class=\"pretty-limit\"\n       style=\"--pretty-limit-width: 150px\" >\n    <span class=\"pretty-limit-inner pretty-limit-secondary\">\n                <span class=\"pretty-limit-value\">MoonShine makes administration simple. MoonShine makes administration simple. MoonShine makes administration simple. MoonShine makes administration simple. MoonShine makes administration simple. MoonShine makes administration simple. MoonShine makes administration simple. MoonShine makes administration simple. </span>\n    </span>\n</span>\n","attributes":[],"example":"<moonshine-pretty-limit></moonshine-pretty-limit>","props":[]},{"name":"UI/Components/ProgressBar","source":"MoonShine\\UI\\Components\\ProgressBar","view":"moonshine::components.progress-bar","group":"Components","tag":"moonshine-progress-bar","html":"<div class=\"progress\">\n        <div class=\"progress-bar \"\n             role=\"progressbar\"\n             style=\"width: 65%\"\n        >65%</div>\n    </div>\n","attributes":[],"example":"<moonshine-progress-bar value=\"65\"></moonshine-progress-bar>","props":[{"name":"value","type":"number","min":0,"max":100,"render":true},{"name":"color","type":"select","options":["primary","secondary","success","warning","error","info","purple","pink","blue","green","yellow","red","gray"]}]},{"name":"UI/Components/Rating","source":"MoonShine\\UI\\Components\\Rating","view":"moonshine::components.rating","group":"Components","tag":"moonshine-rating","html":"<div class=\"flex items-center gap-x-1\">\n            <div class=\"icon-wrapper size-4 text-current text-primary\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path fill-rule=\"evenodd\" d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\" clip-rule=\"evenodd\"/>\n</svg>\n    </div>\n\n            <div class=\"icon-wrapper size-4 text-current text-primary\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path fill-rule=\"evenodd\" d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\" clip-rule=\"evenodd\"/>\n</svg>\n    </div>\n\n            <div class=\"icon-wrapper size-4 text-current text-primary\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path fill-rule=\"evenodd\" d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\" clip-rule=\"evenodd\"/>\n</svg>\n    </div>\n\n            <div class=\"icon-wrapper size-4 text-current text-primary\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path fill-rule=\"evenodd\" d=\"M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z\" clip-rule=\"evenodd\"/>\n</svg>\n    </div>\n\n            <div class=\"icon-wrapper size-4 text-current text-secondary\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z\"/>\n</svg>\n    </div>\n\n    </div>\n","attributes":[],"example":"<moonshine-rating value=\"4\"></moonshine-rating>","props":[{"name":"value","type":"number","min":0,"max":5,"render":true}]},{"name":"UI/Components/Snippet","source":"MoonShine\\UI\\Components\\Snippet","view":"moonshine::components.snippet","group":"Components","tag":"moonshine-snippet","html":"<div class=\"snippet snippet-info\"\n     x-data=\"{\n        copy() {\n            navigator.clipboard.writeText($refs.content.textContent);\n        }\n     }\"\n>\n    <code class=\"snippet-content\" x-ref=\"content\">composer require moonshine/moonshine:5.x-dev</code>\n    <button @click.prevent=\"copy()\"\n            class=\"snippet-copy\"\n            type=\"button\"\n            x-data=\"tooltip('Copied!', {placement: 'top', trigger: 'click', delay: [0, 800]})\"\n    >\n        <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75\"/>\n</svg>\n    </div>\n    </button>\n</div>\n","attributes":[],"example":"<moonshine-snippet value=\"composer require moonshine/moonshine\"></moonshine-snippet>","props":[{"name":"value","type":"text","render":true}]},{"name":"UI/Components/Spinner","source":"MoonShine\\UI\\Components\\Spinner","view":"moonshine::components.spinner","group":"Components","tag":"moonshine-spinner","html":"<div class=\"spinner spinner-sm\"></div>\n","attributes":[],"example":"<moonshine-spinner size=\"lg\" color=\"primary\"></moonshine-spinner>","props":[{"name":"size","type":"select","options":["sm","md","lg","xl"],"render":true},{"name":"color","type":"select","options":["primary","secondary","success","warning","error","info","purple","pink","blue","green","yellow","red","gray"]}]},{"name":"UI/Components/Table/TableBuilder","source":"MoonShine\\UI\\Components\\Table\\TableBuilder","view":"moonshine::components.table.builder","group":"Components","tag":"moonshine-table-builder","html":"<div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            0,\n            0,\n            0,\n            0,\n            null        )\"\n        @table_empty_row_added:default.window='add(true)'        @table_reindex:default.window='resolveReindex'                        \n    >\n        <div >\n    <!-- Table -->\n    <div class=\"table-container\">        <div class=\"table-responsive\">\n            <table class=\"table table-list\" data-name=\"default\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"id\">\n    ID\n</th>\n\n            <th class=\"\" data-column-selection=\"title\">\n    Title\n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    1\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">MoonShine</div>\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"id\" class=\"\">\n    2\n</td>\n\n            <td data-column-selection=\"title\" class=\"\">\n    <div class=\"text-ellipsis\">Laravel</div>\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n    </div>\n</div>\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-table-builder><moonshine-table-row><moonshine-table-th>ID</moonshine-table-th><moonshine-table-th>Title</moonshine-table-th></moonshine-table-row><moonshine-table-row><moonshine-table-td>1</moonshine-table-td><moonshine-table-td>MoonShine</moonshine-table-td></moonshine-table-row><moonshine-table-row><moonshine-table-td>2</moonshine-table-td><moonshine-table-td>Laravel</moonshine-table-td></moonshine-table-row></moonshine-table-builder>","props":[{"name":"columns","type":"json","render":true},{"name":"items","type":"json","render":true}]},{"name":"UI/Components/Table/TableRow","source":"MoonShine\\UI\\Components\\Table\\TableRow","view":"moonshine::components.table.row","group":"Components","tag":"moonshine-table-row","html":"<tr >\n            <td >\n    MoonShine\n</td>\n\n            <td >\n    5.x-dev\n</td>\n\n    </tr>\n","attributes":[],"example":"<moonshine-table-row><moonshine-table-td>MoonShine</moonshine-table-td><moonshine-table-td>5.x-dev</moonshine-table-td></moonshine-table-row>","props":[],"note":"Inside a native <table> the HTML parser moves custom tags out of the table. Put rows and cells into <moonshine-table-builder> or <moonshine-table>, which turns them into <tr>, <td> and <th>. On its own the tag renders inside its own table."},{"name":"UI/Components/Table/TableTd","source":"MoonShine\\UI\\Components\\Table\\TableTd","view":"moonshine::components.table.td","group":"Components","tag":"moonshine-table-td","html":"<td >\n    <slot>Table cell</slot>\n</td>\n","attributes":[],"example":"<moonshine-table-td>MoonShine Web Component</moonshine-table-td>","props":[],"note":"Inside a native <table> the HTML parser moves custom tags out of the table. Put rows and cells into <moonshine-table-builder> or <moonshine-table>, which turns them into <tr>, <td> and <th>. On its own the tag renders inside its own table."},{"name":"UI/Components/Table/TableTh","source":"MoonShine\\UI\\Components\\Table\\TableTh","view":"moonshine::components.table.th","group":"Components","tag":"moonshine-table-th","html":"<th >\n    <slot>Table heading</slot>\n</th>\n","attributes":[],"example":"<moonshine-table-th>MoonShine Web Component</moonshine-table-th>","props":[],"note":"Inside a native <table> the HTML parser moves custom tags out of the table. Put rows and cells into <moonshine-table-builder> or <moonshine-table>, which turns them into <tr>, <td> and <th>. On its own the tag renders inside its own table."},{"name":"UI/Components/Tabs","source":"MoonShine\\UI\\Components\\Tabs","view":"moonshine::components.tabs","group":"Components","tag":"moonshine-tabs","html":"<!-- Tabs -->\n    <div class=\"tabs\"\n        x-data=\"tabs(\n            'overview',\n            false        )\"\n    >\n        <!-- Tabs Buttons -->\n        <ul class=\"tabs-list justify-start\">\n                            <li class=\"tabs-item\">\n                    <button @click.prevent=\"setActiveTab(`overview`)\" :class=\"{ &#039;_is-active&#039;: activeTab === &#039;overview&#039; }\" class=\"tabs-button\"\n                            type=\"button\"\n                    >\n                        \n                        Overview\n                    </button>\n                </li>\n                            <li class=\"tabs-item\">\n                    <button @click.prevent=\"setActiveTab(`details`)\" :class=\"{ &#039;_is-active&#039;: activeTab === &#039;details&#039; }\" class=\"tabs-button\"\n                            type=\"button\"\n                    >\n                        \n                        Details\n                    </button>\n                </li>\n                    </ul>\n        <!-- END: Tabs Buttons -->\n\n        <!-- Tabs content -->\n        <div class=\"tabs-content\">\n                            <div @set-active-tab=\"setActiveTab(`overview`)\" :class=\"activeTab === &#039;overview&#039; ? &#039;block&#039; : &#039;hidden&#039;\" class=\"tab-panel\" @tab_active:default.window=\"setActiveTab(`overview`)\">\n                    <div class=\"tabs-body space-elements\">\n                        <div class=\"heading\">\n    <div >\n        Overview\n    </div>\n</div>\n\n\n                    </div>\n                </div>\n                            <div @set-active-tab=\"setActiveTab(`details`)\" :class=\"activeTab === &#039;details&#039; ? &#039;block&#039; : &#039;hidden&#039;\" class=\"tab-panel\" @tab_active:default.window=\"setActiveTab(`details`)\">\n                    <div class=\"tabs-body space-elements\">\n                        <div class=\"heading\">\n    <div >\n        Details\n    </div>\n</div>\n\n\n                    </div>\n                </div>\n                    </div>\n        <!-- END: Tabs content -->\n    </div>\n    <!-- END: Tabs -->\n","attributes":[],"example":"<moonshine-tabs><moonshine-tab label=\"Overview\">Overview content</moonshine-tab><moonshine-tab label=\"Details\">Details content</moonshine-tab></moonshine-tabs>","props":[]},{"name":"UI/Components/Tabs/Tab","source":"MoonShine\\UI\\Components\\Tabs\\Tab","view":"","group":"Components","tag":"moonshine-tab","html":"<div class=\"tabs-body space-elements\"><slot>Tab content</slot></div>","attributes":[],"example":"<moonshine-tab label=\"Overview\">Tab content</moonshine-tab>","props":[],"note":"Use the tab inside <moonshine-tabs>: the title comes from the label attribute and the content from the child nodes."},{"name":"UI/Components/Thumbnails","source":"MoonShine\\UI\\Components\\Thumbnails","view":"moonshine::components.thumbnails","group":"Components","tag":"moonshine-thumbnails","html":"<div class=\"images-row\">\n                    <div\n                class=\"zoom-in images-row-item bg-base cursor-pointer\"\n            >\n                <img\n                    class=\"h-full w-full object-cover\"\n                    src=\"/images/image_1.jpg\"\n                    alt=\"\"\n                    @click.stop=\"$dispatch('img-popup', {\n                        open: true,\n                        src: '\\/images\\/image_1.jpg',\n                        wide: false,\n                        auto: false,\n                        styles: '',\n                    })\"\n                />\n            </div>\n                    <div\n                class=\"zoom-in images-row-item bg-base cursor-pointer\"\n            >\n                <img\n                    class=\"h-full w-full object-cover\"\n                    src=\"/images/image_2.jpg\"\n                    alt=\"\"\n                    @click.stop=\"$dispatch('img-popup', {\n                        open: true,\n                        src: '\\/images\\/image_2.jpg',\n                        wide: false,\n                        auto: false,\n                        styles: '',\n                    })\"\n                />\n            </div>\n            </div>\n","attributes":[],"example":"<moonshine-thumbnails><img src=\"/images/image_1.jpg\" alt=\"First\"><img src=\"/images/image_2.jpg\" alt=\"Second\"></moonshine-thumbnails>","props":[]},{"name":"UI/Components/Title","source":"MoonShine\\UI\\Components\\Title","view":"moonshine::components.title","group":"Components","tag":"moonshine-title","html":"<h1 class=\"truncate text-xl font-medium\">\n    __MS_LABEL__\n</h1>\n","attributes":{"label":"Title"},"example":"<moonshine-title label=\"Title\"></moonshine-title>","props":[{"name":"label","type":"text"}]},{"name":"UI/Components/When","source":"MoonShine\\UI\\Components\\When","view":"moonshine::components.components","group":"Components","tag":"moonshine-when","html":"<slot>MoonShine</slot>\n\n","attributes":[],"example":"<moonshine-when>MoonShine Web Component</moonshine-when>","props":[]},{"name":"UI/Fields/Checkbox","source":"MoonShine\\UI\\Fields\\Checkbox","view":"moonshine::fields.checkbox","group":"Fields","tag":"moonshine-field-checkbox","html":"<div class=\"form-group moonshine-field form-group-inline\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    <div  x-data >\n            <input class=\"form-hidden\" type=\"hidden\" value=\"0\" data-checkbox-hidden=\"data-checkbox-hidden\" x-bind:checked=\"$el.checked\" name=\"ms_instance_field\" x-on:change=\"$el.value = $el.checked ? `1` : `0`\"\n/>\n    \n    <input class=\"form-checkbox\" type=\"checkbox\" value=\"1\" checked=\"checked\" x-bind:checked=\"$el.checked\" :id=\"$id(`field-`)\" name=\"ms_instance_field\" x-on:change=\"$el.value = $el.checked ? `1` : `0`\"\n/>\n</div>\n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        \n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Checkbox"},"example":"<moonshine-field-checkbox label=\"Checkbox\"></moonshine-field-checkbox>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"checked","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Color","source":"MoonShine\\UI\\Fields\\Color","view":"moonshine::fields.color","group":"Fields","tag":"moonshine-field-color","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div x-data=\"{ color: '#8b5cf6' }\">\n    <div class=\"form-color\">\n        <div class=\"form-color-thumb\">\n            <input class=\"form-color\" type=\"color\" x-model:value=\"color\" data-color-thumb=\"data-color-thumb\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n        </div>\n\n        <input class=\"form-input\" type=\"text\" x-model:value=\"color\" placeholder=\"#000000\" data-color-input=\"data-color-input\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n    </div>\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Color"},"example":"<moonshine-field-color label=\"Color\"></moonshine-field-color>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Date","source":"MoonShine\\UI\\Fields\\Date","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-date","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"date\" value=\"2026-11-10\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Date"},"example":"<moonshine-field-date label=\"Date\"></moonshine-field-date>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/DateRange","source":"MoonShine\\UI\\Fields\\DateRange","view":"moonshine::fields.range","group":"Fields","tag":"moonshine-field-date-range","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div\n    x-data=\"{\n        ['date_range_from_ms_instance_field']: '2026-11-01',\n        ['date_range_to_ms_instance_field']: '2026-11-30',\n    }\"\n    data-range-from-column=\"date_range_from_ms_instance_field\"\n    data-range-to-column=\"date_range_to_ms_instance_field\"\n    class=\"form-group form-group-inline\"\n\n    data-show-when-field=\"ms_instance_field[]\"\n>\n    <input class=\"form-input\" type=\"date\" x-bind:max=\"$data[$root.dataset.rangeToColumn]\" x-model=\"$data[$root.dataset.rangeFromColumn]\" value=\"2026-11-01\" name=\"ms_instance_field[from]\" data-sync-with=\"ms_instance_field[to]\" :id=\"$id(`field-`)\" min=\"\" max=\"\" step=\"any\"\n/>\n\n    <input class=\"form-input\" type=\"date\" x-bind:min=\"$data[$root.dataset.rangeFromColumn]\" x-model=\"$data[$root.dataset.rangeToColumn]\" value=\"2026-11-30\" name=\"ms_instance_field[to]\" data-sync-with=\"ms_instance_field[from]\" :id=\"$id(`field-`)\" min=\"\" max=\"\" step=\"any\"\n/>\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"DateRange"},"example":"<moonshine-field-date-range label=\"DateRange\"></moonshine-field-date-range>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Email","source":"MoonShine\\UI\\Fields\\Email","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-email","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"email\" value=\"demo@example.com\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Email"},"example":"<moonshine-field-email label=\"Email\"></moonshine-field-email>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Enum","source":"MoonShine\\UI\\Fields\\Enum","view":"moonshine::fields.select","group":"Fields","tag":"moonshine-field-enum","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <select\n                    x-data=\"select('', [], [])\"\n                class=\"\" data-validation-field=\"ms_instance_field\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n>\n            \n                                    <option                         value=\"moonshine\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    MoonShine\n                </option>\n                                                <option                         value=\"laravel\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Laravel\n                </option>\n                        </select>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Enum"},"example":"<moonshine-field-enum label=\"Enum\"></moonshine-field-enum>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/FieldContainer","source":"MoonShine\\UI\\Fields\\FieldContainer","view":"moonshine::components.field-container","group":"Fields","tag":"moonshine-field-field-container","html":"<div class=\"form-group moonshine-field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" data-field-selector=\"title\" :id=\"$id(`field-`)\" name=\"title\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":[],"example":"<moonshine-field-field-container></moonshine-field-field-container>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Fieldset","source":"MoonShine\\UI\\Fields\\Fieldset","view":"moonshine::fields.fieldset","group":"Fields","tag":"moonshine-field-fieldset","html":"<fieldset class=\"\" data-field-selector=\"fieldset\" :id=\"$id(`field-`)\" name=\"fieldset\">\n    <legend>Fieldset</legend>\n\n    <div class=\"space-elements\">\n        <div class=\"form-group moonshine-field\" data-field-selector=\"title\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-`)\" name=\"title\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n    </div>\n</fieldset>\n","attributes":[],"example":"<moonshine-field-fieldset></moonshine-field-fieldset>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"UI/Fields/File","source":"MoonShine\\UI\\Fields\\File","view":"moonshine::fields.file","group":"Fields","tag":"moonshine-field-file","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group form-group-dropzone\" >\n    <input class=\"form-input form-file-upload\" type=\"file\" accept=\"*/*\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n    </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"File"},"example":"<moonshine-field-file label=\"File\"></moonshine-field-file>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Hidden","source":"MoonShine\\UI\\Fields\\Hidden","view":"moonshine::fields.hidden","group":"Fields","tag":"moonshine-field-hidden","html":"<input class=\"form-hidden\" type=\"hidden\" value=\"MoonShine\" data-field-selector=\"ms_instance_field\" :id=\"$id(`field-`)\" name=\"ms_instance_field\" />\n","attributes":[],"example":"<moonshine-field-hidden></moonshine-field-hidden>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"UI/Fields/HiddenIds","source":"MoonShine\\UI\\Fields\\HiddenIds","view":"moonshine::fields.hidden-ids","group":"Fields","tag":"moonshine-field-hidden-ids","html":"<div\n    class=\"hidden-ids\" data-for-component=\"ms_instance_table\"\n>\n</div>\n","attributes":[],"example":"<moonshine-field-hidden-ids></moonshine-field-hidden-ids>","props":[]},{"name":"UI/Fields/ID","source":"MoonShine\\UI\\Fields\\ID","view":"moonshine::fields.hidden","group":"Fields","tag":"moonshine-field-id","html":"<input class=\"form-hidden\" type=\"hidden\" value=\"MoonShine\" data-field-selector=\"ms_instance_field\" :id=\"$id(`field-`)\" name=\"ms_instance_field\" />\n","attributes":[],"example":"<moonshine-field-id></moonshine-field-id>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"UI/Fields/Image","source":"MoonShine\\UI\\Fields\\Image","view":"moonshine::fields.image","group":"Fields","tag":"moonshine-field-image","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group form-group-dropzone\" >\n    <input class=\"form-input form-file-upload\" type=\"file\" accept=\"*/*\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n    </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Image"},"example":"<moonshine-field-image label=\"Image\"></moonshine-field-image>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Json","source":"MoonShine\\UI\\Fields\\Json","view":"moonshine::fields.json","group":"Fields","tag":"moonshine-field-json","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div x-id=\"['json']\"\n     :id=\"$id('json')\"\n     class=\"\"\n     data-show-when-field=\"ms_instance_field[]\"\n>\n    <div\n    class=\"js-table-builder-container\"\n    >\n    <div\n        class=\"js-table-builder-wrapper\"\n        x-data=\"tableBuilder(\n            1,\n            1,\n            1,\n            0,\n            null        )\"\n        @table_empty_row_added:repeater_ms_instance_field.window='add(true)'        @table_reindex:repeater_ms_instance_field.window='resolveReindex'                        data-remove-after-clone=\"1\" data-validation-wrapper=\"data-validation-wrapper\" data-handle=\".handle\" data-top-level=\"data-top-level\" :id=\"$id(`field-`)\" data-inside=\"field\"\n    >\n        <div >\n    <!-- Table -->\n            <div class=\"table-responsive\">\n            <table class=\"table\" creatable=\"creatable\" data-name=\"repeater_ms_instance_field\" data-remove-after-clone=\"1\" data-validation-wrapper=\"data-validation-wrapper\" data-handle=\".handle\" data-top-level=\"data-top-level\" :id=\"$id(`field-`)\" data-inside=\"field\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                <tr >\n            <th class=\"\" data-column-selection=\"handle\">\n    \n</th>\n\n            <th class=\"\" data-column-selection=\"ms_instance_field_title\">\n    Title\n</th>\n\n            <th class=\"\">\n    \n</th>\n\n    </tr>\n                </thead>\n                <tbody  >\n                \n                <tr >\n            <td data-column-selection=\"handle\" class=\"\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\">\n    <div class=\"form-group moonshine-field\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"handle\" style=\"cursor: move;\" :id=\"$id(`field-`)\">\n    <div class=\"icon-wrapper size-5 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25\"/>\n</svg>\n    </div>\n\n</div>\n\n        \n\n            </div>\n</div>\n\n\n\n</td>\n\n            <td data-column-selection=\"ms_instance_field_title\" class=\"\">\n    <input class=\"form-input\" type=\"text\" value=\"MoonShine\" data-field-selector=\"ms_instance_field.${index0}.title\" :id=\"$id(`field-`)\" name=\"ms_instance_field[${index0}][title]\" data-name=\"ms_instance_field[${index0}][title]\" data-column=\"title\" data-level=\"0\" x-id=\"[`field-`]\" x-on:change=\"onChangeField($event)\"\n/>\n\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-error\" href=\"javascript:void(0);\" x-on:click.prevent=\"remove\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n\n                                                    <tr >\n            <td data-column-selection=\"handle\" class=\"\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\">\n    <div class=\"form-group moonshine-field\" style=\"width: 10px; white-space: nowrap;\" data-field-selector=\"__handle\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"handle\" style=\"cursor: move;\" :id=\"$id(`field-`)\">\n    <div class=\"icon-wrapper size-5 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25\"/>\n</svg>\n    </div>\n\n</div>\n\n        \n\n            </div>\n</div>\n\n\n\n</td>\n\n            <td data-column-selection=\"ms_instance_field_title\" class=\"\">\n    <input class=\"form-input\" type=\"text\" value=\"\" data-field-selector=\"ms_instance_field.${index0}.title\" :id=\"$id(`field-`)\" name=\"ms_instance_field[${index0}][title]\" data-name=\"ms_instance_field[${index0}][title]\" data-column=\"title\" data-level=\"0\" x-id=\"[`field-`]\" x-on:change=\"onChangeField($event)\"\n/>\n\n</td>\n\n            <td class=\"w-10\">\n    <div\n    class=\"flex gap-4 items-center justify-end flex-wrap\"\n>\n            <div class=\"flex items-center gap-2\">\n        \n                                    <a class=\"btn btn-error\" href=\"javascript:void(0);\" x-on:click.prevent=\"remove\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"/>\n</svg>\n    </div>\n\n        \n        \n            </a>\n\n\n                    \n        \n    </div>\n\n    \n    \n</div>\n\n</td>\n\n    </tr>\n                </tbody>\n\n                                    <tfoot >\n                    \n                    </tfoot>\n                            </table>\n        </div>\n    \n                            <hr class=\"divider\" />\n\n                <a class=\"btn w-full\" href=\"javascript:void(0);\" @click.prevent=\"add()\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n\n        \n        Add\n            </a>\n</div>\n    </div>\n</div>\n\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Json"},"example":"<moonshine-field-json label=\"Json\"></moonshine-field-json>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Number","source":"MoonShine\\UI\\Fields\\Number","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-number","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"number\" value=\"42\" :id=\"$id(`field-`)\" name=\"ms_instance_field\" step=\"1\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Number"},"example":"<moonshine-field-number label=\"Number\"></moonshine-field-number>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Password","source":"MoonShine\\UI\\Fields\\Password","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-password","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"password\" value=\"\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Password"},"example":"<moonshine-field-password label=\"Password\"></moonshine-field-password>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/PasswordRepeat","source":"MoonShine\\UI\\Fields\\PasswordRepeat","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-password-repeat","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"password\" value=\"\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"PasswordRepeat"},"example":"<moonshine-field-password-repeat label=\"PasswordRepeat\"></moonshine-field-password-repeat>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Phone","source":"MoonShine\\UI\\Fields\\Phone","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-phone","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"tel\" value=\"+1 555 0100\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Phone"},"example":"<moonshine-field-phone label=\"Phone\"></moonshine-field-phone>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Position","source":"MoonShine\\UI\\Fields\\Position","view":"moonshine::fields.preview","group":"Fields","tag":"moonshine-field-position","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"\" :id=\"$id(`field-`)\" data-increment-position=\"data-increment-position\">\n    1\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Position"},"example":"<moonshine-field-position label=\"Position\"></moonshine-field-position>","props":[{"name":"label","type":"text"}]},{"name":"UI/Fields/Preview","source":"MoonShine\\UI\\Fields\\Preview","view":"moonshine::fields.preview","group":"Fields","tag":"moonshine-field-preview","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"\" :id=\"$id(`field-`)\">\n    MoonShine\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Preview"},"example":"<moonshine-field-preview label=\"Preview\"></moonshine-field-preview>","props":[{"name":"label","type":"text"}]},{"name":"UI/Fields/Range","source":"MoonShine\\UI\\Fields\\Range","view":"moonshine::fields.range","group":"Fields","tag":"moonshine-field-range","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div\n    x-data=\"{\n        ['range_from_ms_instance_field']: 20,\n        ['range_to_ms_instance_field']: 80,\n    }\"\n    data-range-from-column=\"range_from_ms_instance_field\"\n    data-range-to-column=\"range_to_ms_instance_field\"\n    class=\"form-group form-group-inline\"\n\n    data-show-when-field=\"ms_instance_field[]\"\n>\n    <input class=\"form-input\" type=\"number\" x-bind:max=\"$data[$root.dataset.rangeToColumn]\" x-model=\"$data[$root.dataset.rangeFromColumn]\" value=\"20\" name=\"ms_instance_field[from]\" data-sync-with=\"ms_instance_field[to]\" :id=\"$id(`field-`)\" max=\"100\" min=\"0\" step=\"1\"\n/>\n\n    <input class=\"form-input\" type=\"number\" x-bind:min=\"$data[$root.dataset.rangeFromColumn]\" x-model=\"$data[$root.dataset.rangeToColumn]\" value=\"80\" name=\"ms_instance_field[to]\" data-sync-with=\"ms_instance_field[from]\" :id=\"$id(`field-`)\" max=\"100\" min=\"0\" step=\"1\"\n/>\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Range"},"example":"<moonshine-field-range label=\"Price\" name=\"price\" value='{\"from\":20,\"to\":80}'></moonshine-field-range>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/RangeSlider","source":"MoonShine\\UI\\Fields\\RangeSlider","view":"moonshine::fields.slide","group":"Fields","tag":"moonshine-field-range-slider","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group-range\">\n    <div x-data=\"range(20, 80)\"\n         x-init=\"mintrigger(); maxtrigger()\"\n         data-min=\"0\"\n         data-max=\"100\"\n         data-step=\"1\"\n    >\n        <div class=\"form-group-range-wrapper\">\n            <input class=\"form-range\" type=\"range\" step=\"1\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"mintrigger\" x-model=\"minValue\" name=\"ms_instance_field[from]\" data-sync-with=\"ms_instance_field[to]\" :id=\"$id(`field-`)\" max=\"100\" min=\"0\"\n/>\n\n            <input class=\"form-range\" type=\"range\" step=\"1\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"maxtrigger\" x-model=\"maxValue\" name=\"ms_instance_field[to]\" data-sync-with=\"ms_instance_field[from]\" :id=\"$id(`field-`)\" max=\"100\" min=\"0\"\n/>\n\n\n            <div class=\"form-range-slider\">\n                <div class=\"form-range-tracker\"></div>\n                <div class=\"form-range-connect\" x-bind:style=\"'right:'+maxthumb+'%; left:'+minthumb+'%'\"></div>\n            </div>\n        </div>\n\n        <div class=\"form-group-range-fields\">\n            <input class=\"form-input\" type=\"number\" maxlength=\"5\" step=\"1\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"mintrigger\" x-model=\"minValue\" value=\"20\" name=\"ms_instance_field[from]\" data-sync-with=\"ms_instance_field[to]\" :id=\"$id(`field-`)\" max=\"100\" min=\"0\"\n/>\n\n            <input class=\"form-input\" type=\"number\" step=\"1\" maxlength=\"5\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"maxtrigger\" x-model=\"maxValue\" value=\"80\" name=\"ms_instance_field[to]\" data-sync-with=\"ms_instance_field[from]\" :id=\"$id(`field-`)\" max=\"100\" min=\"0\"\n/>\n        </div>\n    </div>\n</div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"RangeSlider"},"example":"<moonshine-field-range-slider label=\"Price\" name=\"price\" value='{\"from\":20,\"to\":80}'></moonshine-field-range-slider>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Select","source":"MoonShine\\UI\\Fields\\Select","view":"moonshine::fields.select","group":"Fields","tag":"moonshine-field-select","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <select\n                    x-data=\"select('', [], [])\"\n                class=\"\" data-validation-field=\"ms_instance_field\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n>\n            \n                                    <option                         value=\"moonshine\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    MoonShine\n                </option>\n                                                <option                         value=\"laravel\"\n                        data-custom-properties='{\"customProperties\":{\"image\":null}}'\n                        \n                >\n                    Laravel\n                </option>\n                        </select>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Select"},"example":"<moonshine-field-select label=\"Framework\" name=\"framework\" value=\"laravel\"><option value=\"moonshine\">MoonShine</option><option value=\"laravel\">Laravel</option><option value=\"symfony\">Symfony</option></moonshine-field-select>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Switcher","source":"MoonShine\\UI\\Fields\\Switcher","view":"moonshine::fields.switch","group":"Fields","tag":"moonshine-field-switcher","html":"<div class=\"form-group moonshine-field form-group-inline\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    <label class=\"form-switcher\" x-data>\n    <input class=\"form-hidden\" type=\"hidden\" name=\"ms_instance_field\" value=\"0\" data-checkbox-hidden=\"data-checkbox-hidden\"\n/>\n\n    <input class=\"form-checkbox form-switcher-control peer sr-only\" type=\"checkbox\" name=\"ms_instance_field\" value=\"1\" checked=\"checked\" x-bind:checked=\"$el.checked\" :id=\"$id(`field-`)\" x-on:change=\"$el.value = $el.checked ? `1` : `0`\"\n/>\n\n    <span class=\"form-switcher-toggler\"></span>\n</label>\n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        \n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Switcher"},"example":"<moonshine-field-switcher label=\"Switcher\"></moonshine-field-switcher>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"checked","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Template","source":"MoonShine\\UI\\Fields\\Template","view":"","group":"Fields","tag":"moonshine-field-template","html":"<slot>Template content</slot>","attributes":[],"example":"<moonshine-field-template>MoonShine Web Component</moonshine-field-template>","props":[]},{"name":"UI/Fields/Text","source":"MoonShine\\UI\\Fields\\Text","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-text","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Text"},"example":"<moonshine-field-text label=\"Text\"></moonshine-field-text>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Textarea","source":"MoonShine\\UI\\Fields\\Textarea","view":"moonshine::fields.textarea","group":"Fields","tag":"moonshine-field-textarea","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <textarea class=\"form-textarea\" aria-label=\"__MS_LABEL__\" :id=\"$id(`field-`)\" name=\"ms_instance_field\">MoonShine</textarea>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Textarea"},"example":"<moonshine-field-textarea label=\"Textarea\"></moonshine-field-textarea>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/Fields/Url","source":"MoonShine\\UI\\Fields\\Url","view":"moonshine::fields.input","group":"Fields","tag":"moonshine-field-url","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_field\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"url\" value=\"https://getmoonshine.app\" :id=\"$id(`field-`)\" name=\"ms_instance_field\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"Url"},"example":"<moonshine-field-url label=\"Url\"></moonshine-field-url>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/InputExtensions/InputCopy","source":"MoonShine\\UI\\InputExtensions\\InputCopy","view":"moonshine::components.form.input-extensions.copy","group":"Input extensions","tag":"moonshine-input-copy","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_extension\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group-expansion form-group-expansion--has-suffix\" x-init=\"\" x-data=\"{  copy(value) {\n     navigator.clipboard.writeText(value.replace('{{value}}', $refs.extensionInput.value));\n  }}\">\n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-`)\" name=\"ms_instance_extension\" x-ref=\"extensionInput\"\n/>\n\n        \n        \n        \n                    <div class=\"expansion-wrapper expansion-wrapper--suffix\">\n                                    <button @click.prevent=\"copy(null)\"\n        class=\"expansion\"\n        type=\"button\"\n        x-data=\"tooltip('Copied!', {placement: 'top', trigger: 'click', delay: [0, 800]})\"\n>\n    <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184\"/>\n</svg>\n    </div>\n</button>\n\n                            </div>\n            </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"InputCopy"},"example":"<moonshine-input-copy label=\"InputCopy\"></moonshine-input-copy>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/InputExtensions/InputExt","source":"MoonShine\\UI\\InputExtensions\\InputExt","view":"moonshine::components.form.input-extensions.ext","group":"Input extensions","tag":"moonshine-input-ext","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_extension\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group-expansion form-group-expansion--has-suffix\" x-init=\"\" x-data=\"{}\">\n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-`)\" name=\"ms_instance_extension\" x-ref=\"extensionInput\"\n/>\n\n        \n        \n        \n                    <div class=\"expansion-wrapper expansion-wrapper--suffix\">\n                                    <span class=\"expansion\">.app</span>\n\n                            </div>\n            </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"InputExt"},"example":"<moonshine-input-ext label=\"InputExt\"></moonshine-input-ext>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/InputExtensions/InputEye","source":"MoonShine\\UI\\InputExtensions\\InputEye","view":"moonshine::components.form.input-extensions.eye","group":"Input extensions","tag":"moonshine-input-eye","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_extension\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group-expansion form-group-expansion--has-suffix\" x-init=\"$refs.extensionInput.type=`password`\" x-data=\"{isHidden: true,  toggleEye() {\n    this.isHidden = ! this.isHidden;\n    $refs.extensionInput.type = this.isHidden ? `password` : `text`;\n  }}\">\n\n        <input class=\"form-input\" type=\"password\" value=\"\" :id=\"$id(`field-`)\" name=\"ms_instance_extension\" x-ref=\"extensionInput\"\n/>\n\n        \n        \n        \n                    <div class=\"expansion-wrapper expansion-wrapper--suffix\">\n                                    <button @click.prevent=\"toggleEye()\"\n        class=\"expansion\"\n        type=\"button\"\n>\n    <span x-show=\"isHidden\">\n        <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\"/>\n</svg>\n    </div>\n    </span>\n    <span x-show=\"!isHidden\">\n        <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"/>\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"/>\n</svg>\n    </div>\n    </span>\n</button>\n\n                            </div>\n            </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"InputEye"},"example":"<moonshine-input-eye label=\"InputEye\"></moonshine-input-eye>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/InputExtensions/InputLock","source":"MoonShine\\UI\\InputExtensions\\InputLock","view":"moonshine::components.form.input-extensions.lock","group":"Input extensions","tag":"moonshine-input-lock","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_extension\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group-expansion form-group-expansion--has-suffix\" x-init=\"$refs.extensionInput.readOnly=true\" x-data=\"{isLock: true,  toggleLock() {\n    this.isLock = ! this.isLock;\n    $refs.extensionInput.readOnly = this.isLock;\n    if(!this.isLock) $refs.extensionInput.focus();\n  }}\">\n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-`)\" name=\"ms_instance_extension\" x-ref=\"extensionInput\"\n/>\n\n        \n        \n        \n                    <div class=\"expansion-wrapper expansion-wrapper--suffix\">\n                                    <button @click.prevent=\"toggleLock()\"\n        class=\"expansion\"\n        type=\"button\"\n>\n    <span x-show=\"isLock\">\n        <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"/>\n</svg>\n    </div>\n    </span>\n    <span x-show=\"!isLock\">\n        <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z\"/>\n</svg>\n    </div>\n    </span>\n</button>\n\n                            </div>\n            </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"InputLock"},"example":"<moonshine-input-lock label=\"InputLock\"></moonshine-input-lock>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/InputExtensions/InputNumberUpDown","source":"MoonShine\\UI\\InputExtensions\\InputNumberUpDown","view":"moonshine::components.form.input-extensions.up-down","group":"Input extensions","tag":"moonshine-input-number-up-down","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_extension\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group-expansion form-group-expansion--has-suffix\" x-init=\"\" x-data=\"{}\">\n\n        <input class=\"form-input\" type=\"number\" value=\"42\" :id=\"$id(`field-`)\" name=\"ms_instance_extension\" x-ref=\"extensionInput\" step=\"1\"\n/>\n\n        \n        \n        \n                    <div class=\"expansion-wrapper expansion-wrapper--suffix\">\n                                    <button\n    class=\"expansion\"\n    type=\"button\"\n    @click.prevent=\"$refs.extensionInput.stepDown()\"\n    :disabled=\"$refs.extensionInput.disabled || $refs.extensionInput.readOnly\"\n>\n    <span>\n        <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 12H6\"/>\n</svg>\n    </div>\n    </span>\n</button>\n\n<button\n    class=\"expansion\"\n    type=\"button\"\n    @click.prevent=\"$refs.extensionInput.stepUp()\"\n    :disabled=\"$refs.extensionInput.disabled || $refs.extensionInput.readOnly\"\n>\n    <span>\n        <div class=\"icon-wrapper size-4 text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v12m6-6H6\"/>\n</svg>\n    </div>\n    </span>\n</button>\n\n                            </div>\n            </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"InputNumberUpDown"},"example":"<moonshine-input-number-up-down label=\"InputNumberUpDown\"></moonshine-input-number-up-down>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"UI/InputExtensions/InputPrefix","source":"MoonShine\\UI\\InputExtensions\\InputPrefix","view":"moonshine::components.form.input-extensions.prefix","group":"Input extensions","tag":"moonshine-input-prefix","html":"<div class=\"form-group moonshine-field\" data-field-selector=\"ms_instance_extension\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    __MS_LABEL__\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <div class=\"form-group-expansion form-group-expansion--has-prefix\" x-init=\"\" x-data=\"{}\">\n\n        <input class=\"form-input\" type=\"text\" value=\"MoonShine\" :id=\"$id(`field-`)\" name=\"ms_instance_extension\" x-ref=\"extensionInput\"\n/>\n\n        \n                    <div class=\"expansion-wrapper expansion-wrapper--prefix\">\n                                    <span class=\"expansion expansion--prefix\">\n    https://\n</span>\n\n                            </div>\n        \n        \n            </div>\n\n        \n\n            </div>\n</div>\n\n\n","attributes":{"label":"InputPrefix"},"example":"<moonshine-input-prefix label=\"InputPrefix\"></moonshine-input-prefix>","props":[{"name":"label","type":"text"},{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::fields.stack","source":"moonshine::fields.stack","view":"moonshine::fields.stack","group":"HTML primitives","tag":"moonshine-fields-stack","html":"<div class=\"space-elements\">\n    <div class=\"form-group moonshine-field\" data-field-selector=\"title\"\n     x-id=\"['input-wrapper', 'field-' + '']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + '')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" value=\"\" :id=\"$id(`field-`)\" name=\"title\"\n/>\n\n        \n\n            </div>\n</div>\n\n\n\n</div>\n","attributes":[],"example":"<moonshine-fields-stack></moonshine-fields-stack>","props":[]},{"name":"moonshine::file","source":"moonshine::file","view":"moonshine::components.file","group":"HTML primitives","tag":"moonshine-file","html":"<span class=\"dropzone-file-icon\">\n    <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"/>\n</svg>\n    </div>\n</span>\n<h5 class=\"dropzone-file-name\">\n    <a\n         download href=\"/images/image_1.jpg\"     >\n        image.jpg\n    </a>\n</h5>\n","attributes":[],"example":"<moonshine-file></moonshine-file>","props":[]},{"name":"moonshine::form","source":"moonshine::form","view":"moonshine::components.form.index","group":"HTML primitives","tag":"moonshine-form","html":"<form\n    class=\"form space-elements\" method=\"get\" action=\"#\"\n            x-id=\"['form']\" :id=\"$id('form')\"\n    >\n    \n        <slot>Form content</slot>\n\n            <div class=\"grid grid-cols-12 gap-6\">\n    \n    <div\n    class=\"col-span-12 xl:col-span-12 space-elements\"\n>\n    \n    <div class=\"mt-3 flex w-full flex-wrap justify-start gap-2\">\n                    \n                </div>\n</div>\n</div>\n    </form>\n","attributes":[],"example":"<moonshine-form></moonshine-form>","props":[]},{"name":"moonshine::form.all-errors","source":"moonshine::form.all-errors","view":"moonshine::components.form.all-errors","group":"HTML primitives","tag":"moonshine-form-all-errors","html":"<div class=\"alert alert-error\"\n    >\n    <div class=\"alert-icon\">\n        <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5\"/>\n</svg>\n    </div>\n    </div>\n    <p class=\"alert-content\">Title is required</p>\n\n    </div>\n            \n    <div class=\"my-4\"></div>\n","attributes":[],"example":"<moonshine-form-all-errors></moonshine-form-all-errors>","props":[]},{"name":"moonshine::form.button","source":"moonshine::form.button","view":"moonshine::components.form.button","group":"HTML primitives","tag":"moonshine-form-button","html":"<button\n    type=\"button\" class=\"btn\"\n>\n    \n    <slot>Button</slot>\n</button>\n","attributes":[],"example":"<moonshine-form-button></moonshine-form-button>","props":[]},{"name":"moonshine::form.fieldset","source":"moonshine::form.fieldset","view":"moonshine::components.form.fieldset","group":"HTML primitives","tag":"moonshine-form-fieldset","html":"<fieldset >\n    <legend>Fieldset</legend>\n\n    <slot>Fields</slot>\n</fieldset>\n","attributes":[],"example":"<moonshine-form-fieldset></moonshine-form-fieldset>","props":[]},{"name":"moonshine::form.file","source":"moonshine::form.file","view":"moonshine::components.form.file","group":"HTML primitives","tag":"moonshine-form-file","html":"<div class=\"form-group form-group-dropzone\" >\n    <input class=\"form-input form-file-upload\" type=\"file\" name=\"ms_instance_file\"\n/>\n\n    </div>\n","attributes":[],"example":"<moonshine-form-file></moonshine-form-file>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::form.file-item","source":"moonshine::form.file-item","view":"moonshine::components.form.file-item","group":"HTML primitives","tag":"moonshine-form-file-item","html":"<div\n    \n        class=\"x-removeable dropzone-item zoom-in \"\n    >\n    <input class=\"form-hidden\" type=\"hidden\" value=\"image_1.jpg\"\n/>\n\n    \n    \n            <img src=\"/images/image_1.jpg\"\n             @click.stop=\"$dispatch('img-popup', {open: true, src: '\\/images\\/image_1.jpg'})\"\n             alt=\"image.jpg\"\n        />\n    </div>\n","attributes":[],"example":"<moonshine-form-file-item></moonshine-form-file-item>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"}]},{"name":"moonshine::form.hint","source":"moonshine::form.hint","view":"moonshine::components.form.hint","group":"HTML primitives","tag":"moonshine-form-hint","html":"<div class=\"form-hint\"><slot>Hint</slot></div>\n","attributes":[],"example":"<moonshine-form-hint></moonshine-form-hint>","props":[]},{"name":"moonshine::form.input","source":"moonshine::form.input","view":"moonshine::components.form.input","group":"HTML primitives","tag":"moonshine-form-input","html":"<input class=\"form-input\" type=\"text\" name=\"ms_instance_input\" placeholder=\"Type here\"\n/>\n","attributes":[],"example":"<moonshine-form-input></moonshine-form-input>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::form.input-error","source":"moonshine::form.input-error","view":"moonshine::components.form.input-error","group":"HTML primitives","tag":"moonshine-form-input-error","html":"<div class=\"form-error\"><slot>Validation error</slot></div>\n","attributes":[],"example":"<moonshine-form-input-error></moonshine-form-input-error>","props":[]},{"name":"moonshine::form.input-extensions","source":"moonshine::form.input-extensions","view":"moonshine::components.form.input-extensions","group":"HTML primitives","tag":"moonshine-form-input-extensions","html":"<div class=\"form-group-expansion form-group-expansion--has-prefix\">\n\n        <input class=\"form-input\" type=\"text\" value=\"getmoonshine.app\"\n/>\n\n        \n                    <div class=\"expansion-wrapper expansion-wrapper--prefix\">\n                                    <span class=\"expansion expansion--prefix\">\n    https://\n</span>\n\n                            </div>\n        \n        \n            </div>\n","attributes":[],"example":"<moonshine-form-input-extensions></moonshine-form-input-extensions>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::form.label","source":"moonshine::form.label","view":"moonshine::components.form.label","group":"HTML primitives","tag":"moonshine-form-label","html":"<label\n        class=\"form-label\" for=\"ms_instance_input\"\n>\n    <slot>Label</slot>\n\n    </label>\n","attributes":[],"example":"<moonshine-form-label></moonshine-form-label>","props":[]},{"name":"moonshine::form.select","source":"moonshine::form.select","view":"moonshine::components.form.select","group":"HTML primitives","tag":"moonshine-form-select","html":"<select\n                    x-data=\"select('', [], [])\"\n                name=\"ms_instance_select\"\n>\n            <option value=\"1\">MoonShine</option><option value=\"2\">Laravel</option>\n    </select>\n","attributes":[],"example":"<moonshine-form-select></moonshine-form-select>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::form.slide-range","source":"moonshine::form.slide-range","view":"moonshine::components.form.slide-range","group":"HTML primitives","tag":"moonshine-form-slide-range","html":"<div class=\"form-group-range\">\n    <div x-data=\"range(20, 80)\"\n         x-init=\"mintrigger(); maxtrigger()\"\n         data-min=\"0\"\n         data-max=\"100\"\n         data-step=\"1\"\n    >\n        <div class=\"form-group-range-wrapper\">\n            <input class=\"form-range\" type=\"range\" step=\"1\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"mintrigger\" x-model=\"minValue\"\n/>\n\n            <input class=\"form-range\" type=\"range\" step=\"1\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"maxtrigger\" x-model=\"maxValue\"\n/>\n\n\n            <div class=\"form-range-slider\">\n                <div class=\"form-range-tracker\"></div>\n                <div class=\"form-range-connect\" x-bind:style=\"'right:'+maxthumb+'%; left:'+minthumb+'%'\"></div>\n            </div>\n        </div>\n\n        <div class=\"form-group-range-fields\">\n            <input class=\"form-input\" type=\"number\" maxlength=\"5\" step=\"1\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"mintrigger\" x-model=\"minValue\" value=\"20\" name=\"range[from]\"\n/>\n\n            <input class=\"form-input\" type=\"number\" step=\"1\" maxlength=\"5\" x-bind:min=\"min\" x-bind:max=\"max\" x-on:input=\"maxtrigger\" x-model=\"maxValue\" value=\"80\" name=\"range[to]\"\n/>\n        </div>\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-form-slide-range></moonshine-form-slide-range>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::form.switcher","source":"moonshine::form.switcher","view":"moonshine::components.form.switcher","group":"HTML primitives","tag":"moonshine-form-switcher","html":"<label class=\"form-switcher\" x-data>\n    <input class=\"form-hidden\" type=\"hidden\" name=\"ms_instance_switcher\" value=\"0\" data-checkbox-hidden=\"data-checkbox-hidden\"\n/>\n\n    <input class=\"form-checkbox form-switcher-control peer sr-only\" type=\"checkbox\" name=\"ms_instance_switcher\"\n/>\n\n    <span class=\"form-switcher-toggler\"></span>\n</label>\n","attributes":[],"example":"<moonshine-form-switcher></moonshine-form-switcher>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"checked","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::form.textarea","source":"moonshine::form.textarea","view":"moonshine::components.form.textarea","group":"HTML primitives","tag":"moonshine-form-textarea","html":"<textarea class=\"form-textarea\" name=\"ms_instance_textarea\">MoonShine</textarea>\n","attributes":[],"example":"<moonshine-form-textarea></moonshine-form-textarea>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::form.wrapper","source":"moonshine::form.wrapper","view":"moonshine::components.form.wrapper","group":"HTML primitives","tag":"moonshine-form-wrapper","html":"<div class=\"form-group moonshine-field\"\n     x-id=\"['input-wrapper', 'field-' + 'ms_instance_input']\"\n     :id=\"$id('input-wrapper')\"\n     data-validation-wrapper\n>\n    \n\n            <label\n            :for=\"$id('field-' + 'ms_instance_input')\"\n        class=\"form-label\"\n>\n    Title\n\n    </label>\n    \n    <div data-validation-wrapper>\n        \n\n        <input class=\"form-input\" type=\"text\" id=\"ms_instance_input\"\n/>\n\n        \n\n            </div>\n</div>\n","attributes":[],"example":"<moonshine-form-wrapper></moonshine-form-wrapper>","props":[{"name":"name","type":"text"},{"name":"value","type":"text"},{"name":"placeholder","type":"text"},{"name":"readonly","type":"checkbox"},{"name":"disabled","type":"checkbox"},{"name":"required","type":"checkbox"},{"name":"error","type":"text"}]},{"name":"moonshine::iterable-wrapper","source":"moonshine::iterable-wrapper","view":"moonshine::components.iterable-wrapper","group":"HTML primitives","tag":"moonshine-iterable-wrapper","html":"<div >\n    <slot>Iterable content</slot>\n</div>\n","attributes":[],"example":"<moonshine-iterable-wrapper></moonshine-iterable-wrapper>","props":[]},{"name":"moonshine::layout.block","source":"moonshine::layout.block","view":"moonshine::components.layout.block","group":"HTML primitives","tag":"moonshine-layout-block","html":"<div >\n    \n    <slot>Block content</slot>\n</div>\n","attributes":[],"example":"<moonshine-layout-block></moonshine-layout-block>","props":[]},{"name":"moonshine::link-button","source":"moonshine::link-button","view":"moonshine::components.link-button","group":"HTML primitives","tag":"moonshine-link-button","html":"<a class=\"btn\" href=\"#\">\n    \n    <slot>Link button</slot>\n    </a>\n","attributes":[],"example":"<moonshine-link-button></moonshine-link-button>","props":[]},{"name":"moonshine::link-native","source":"moonshine::link-native","view":"moonshine::components.link-native","group":"HTML primitives","tag":"moonshine-link-native","html":"<a class=\"inline-flex items-center gap-1 max-w-full\" href=\"#\">\n    \n    <slot>Link</slot>\n    </a>\n","attributes":[],"example":"<moonshine-link-native></moonshine-link-native>","props":[]},{"name":"moonshine::menu.item-link","source":"moonshine::menu.item-link","view":"moonshine::components.menu.item-link","group":"HTML primitives","tag":"moonshine-menu-item-link","html":"<a\n    href=\"#\"\n    class=\"menu-link\"\n    >\n    \n    <span class=\"menu-text \">Menu link</span>\n\n    </a>\n\n","attributes":[],"example":"<moonshine-menu-item-link></moonshine-menu-item-link>","props":[]},{"name":"moonshine::metrics.value","source":"moonshine::metrics.value","view":"moonshine::components.metrics.value","group":"HTML primitives","tag":"moonshine-metrics-value","html":"<div class=\"report-card\">\n    \n    \n    <div class=\"report-card-body\">\n        <div class=\"report-card-value\">1280</div>\n        <h5 class=\"report-card-title\">Visitors</h5>\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-metrics-value label=\"Visitors\" value=\"1280\"></moonshine-metrics-value>","props":[{"name":"label","type":"text","render":true},{"name":"value","type":"text","render":true}]},{"name":"moonshine::shared.img-popup","source":"moonshine::shared.img-popup","view":"moonshine::shared.img-popup","group":"HTML primitives","tag":"moonshine-shared-img-popup","html":"<div x-data=\"imgPopup()\" @img-popup.window=\"show($event.detail)\">\n    <template x-teleport=\"body\">\n        <div class=\"modal-template\" data-img-popup>\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                class=\"modal\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                @click.self=\"close\"\n            >\n                <div\n                    class=\"modal-dialog\"\n                    :class=\"{'modal-dialog-auto': auto, 'modal-dialog-xl': wide}\"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"close\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            <img\n                                @click.outside=\"close\"\n                                src=\"\"\n                                :src=\"src\"\n                                :style=\"styles\"\n                                alt=\"\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n</div>\n<button type=\"button\" class=\"btn\" @click=\"$dispatch('img-popup', {src: '/images/image_1.jpg'})\">Open image</button>","attributes":[],"example":"<moonshine-shared-img-popup></moonshine-shared-img-popup>","props":[]},{"name":"moonshine::shared.toasts","source":"moonshine::shared.toasts","view":"moonshine::shared.toasts","group":"HTML primitives","tag":"moonshine-shared-toasts","html":"<div x-data=\"toasts()\"\n     class=\"toast-container\"\n     @toast.window=\"add($event.detail)\"\n>\n    <template x-for=\"toast of toasts\" :key=\"toast.id\">\n        <div\n            x-show=\"visible.includes(toast)\"\n            x-transition:enter=\"transition ease-in duration-300\"\n            x-transition:enter-start=\"transform opacity-0\"\n            x-transition:enter-end=\"transform opacity-100\"\n            x-transition:leave=\"transition ease duration-300\"\n            x-transition:leave-start=\"transform scale-100 opacity-100\"\n            x-transition:leave-end=\"transform scale-90 opacity-0\"\n            @click=\"remove(toast.id)\"\n            class=\"toast-item\"\n            :class=\"{\n                    'toast-primary': toast.type === 'primary',\n                    'toast-secondary': toast.type === 'secondary',\n                    'toast-success': toast.type === 'success',\n                    'toast-info': toast.type === 'info',\n                    'toast-warning': toast.type === 'warning',\n                    'toast-error': toast.type === 'error',\n                }\"\n        >\n            <template x-if=\"toast.type === 'success'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'error'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'warning'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'info'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'primary'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'secondary'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"/>\n</svg>\n    </div>\n            </template>\n            <p x-text=\"toast.text\"></p>\n        </div>\n    </template>\n</div>\n<button type=\"button\" class=\"btn\" @click=\"$dispatch('toast', {text: 'Hello MoonShine', type: 'info'})\">Show toast</button>","attributes":[],"example":"<moonshine-shared-toasts></moonshine-shared-toasts>","props":[]},{"name":"moonshine::skeleton","source":"moonshine::skeleton","view":"moonshine::components.skeleton","group":"HTML primitives","tag":"moonshine-skeleton","html":"<div style=\"height:96px; width:100%; background:var(--ms-cm-base-200); border-radius:8px\">\n    \n</div>\n","attributes":[],"example":"<moonshine-skeleton></moonshine-skeleton>","props":[]},{"name":"moonshine::table","source":"moonshine::table","view":"moonshine::components.table.index","group":"HTML primitives","tag":"moonshine-table","html":"<!-- Table -->\n    <div class=\"table-container\">        <div class=\"table-responsive\">\n            <table class=\"table table-list\"\n                x-id=\"['table-component']\" :id=\"$id('table-component')\"\n            >\n                <thead >\n                                    <tr>\n                                                    <th>\n                                Name\n                            </th>\n                                                    <th>\n                                Version\n                            </th>\n                                            </tr>\n                                \n                </thead>\n                <tbody  >\n                                                            <tr>\n                                                            <td>\n                                    MoonShine\n                                </td>\n                                                            <td>\n                                    5.x-dev\n                                </td>\n                                                    </tr>\n                                    \n                \n                </tbody>\n\n                            </table>\n        </div>\n    </div>","attributes":[],"example":"<moonshine-table columns='[\"Name\",\"Version\"]' items='[[\"MoonShine\",\"5.x-dev\"],[\"Laravel\",\"12.x\"]]'></moonshine-table>","props":[{"name":"columns","type":"json","render":true},{"name":"items","type":"json","render":true}]},{"name":"moonshine::table.vertical-field","source":"moonshine::table.vertical-field","view":"moonshine::components.table.vertical-field","group":"HTML primitives","tag":"moonshine-table-vertical-field","html":"<div class=\"grid grid-cols-12 gap-2\">\n    <div class=\"col-span-4\">\n        <div class=\"form-label\">\n            Title\n        </div>\n    </div>\n    <div class=\"col-span-8\">\n        <div >\n            MoonShine\n        </div>\n    </div>\n</div>\n","attributes":[],"example":"<moonshine-table-vertical-field></moonshine-table-vertical-field>","props":[]},{"name":"moonshine::toast","source":"moonshine::toast","view":"moonshine::components.toast","group":"HTML primitives","tag":"moonshine-toast","html":"<div x-data=\"{ show(){$dispatch('toast', {type: 'default', text: 'Hello MoonShine', duration: null})} }\">\n        <button type=\"button\" class=\"btn\" @click=\"show()\">Show toast</button>\n    </div>\n","attributes":[],"example":"<moonshine-toast></moonshine-toast>","props":[]},{"name":"moonshine::tooltip","source":"moonshine::tooltip","view":"moonshine::components.tooltip","group":"HTML primitives","tag":"moonshine-tooltip","html":"<span class=\"inline-block\"\n     x-data=\"tooltip('Tooltip content', {placement: 'right'})\"\n>\n    <button type=\"button\" class=\"btn\">Hover me</button>\n</span>\n","attributes":[],"example":"<moonshine-tooltip></moonshine-tooltip>","props":[]},{"name":"moonshine::url","source":"moonshine::url","view":"moonshine::components.url","group":"HTML primitives","tag":"moonshine-url","html":"<a href=\"#\"\n   class=\"inline-flex items-center gap-1 max-w-full\"\n    >\n            <div class=\"icon-wrapper text-current shrink-0\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244\"/>\n</svg>\n    </div>\n    \n    <div class=\"text-ellipsis overflow-hidden\">\n        <slot>MoonShine</slot>\n    </div>\n</a>\n","attributes":[],"example":"<moonshine-url></moonshine-url>","props":[]}],"support":"<div x-data=\"toasts()\"\n     class=\"toast-container\"\n     @toast.window=\"add($event.detail)\"\n>\n    <template x-for=\"toast of toasts\" :key=\"toast.id\">\n        <div\n            x-show=\"visible.includes(toast)\"\n            x-transition:enter=\"transition ease-in duration-300\"\n            x-transition:enter-start=\"transform opacity-0\"\n            x-transition:enter-end=\"transform opacity-100\"\n            x-transition:leave=\"transition ease duration-300\"\n            x-transition:leave-start=\"transform scale-100 opacity-100\"\n            x-transition:leave-end=\"transform scale-90 opacity-0\"\n            @click=\"remove(toast.id)\"\n            class=\"toast-item\"\n            :class=\"{\n                    'toast-primary': toast.type === 'primary',\n                    'toast-secondary': toast.type === 'secondary',\n                    'toast-success': toast.type === 'success',\n                    'toast-info': toast.type === 'info',\n                    'toast-warning': toast.type === 'warning',\n                    'toast-error': toast.type === 'error',\n                }\"\n        >\n            <template x-if=\"toast.type === 'success'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'error'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'warning'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'info'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'primary'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"/>\n</svg>\n    </div>\n            </template>\n            <template x-if=\"toast.type === 'secondary'\">\n                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0\"/>\n</svg>\n    </div>\n            </template>\n            <p x-text=\"toast.text\"></p>\n        </div>\n    </template>\n</div>\n<div x-data=\"imgPopup()\" @img-popup.window=\"show($event.detail)\">\n    <template x-teleport=\"body\">\n        <div class=\"modal-template\" data-img-popup>\n            <div\n                x-show=\"open\"\n                x-transition:enter=\"transition ease-out duration-250\"\n                x-transition:enter-start=\"opacity-0 scale-95\"\n                x-transition:enter-end=\"opacity-100 scale-100\"\n                x-transition:leave=\"transition ease-in duration-150\"\n                x-transition:leave-start=\"opacity-100 scale-100\"\n                x-transition:leave-end=\"opacity-0 scale-95\"\n                class=\"modal\"\n                aria-modal=\"true\"\n                role=\"dialog\"\n                @click.self=\"close\"\n            >\n                <div\n                    class=\"modal-dialog\"\n                    :class=\"{'modal-dialog-auto': auto, 'modal-dialog-xl': wide}\"\n                >\n                    <div class=\"modal-content\">\n                        <div class=\"modal-header\">\n                            <button\n                                type=\"button\"\n                                class=\"modal-close btn-fit\"\n                                @click.stop=\"close\"\n                                aria-label=\"Close\"\n                            >\n                                <div class=\"icon-wrapper text-current\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n    </div>\n                            </button>\n                        </div>\n                        <div class=\"modal-body\">\n                            <img\n                                @click.outside=\"close\"\n                                src=\"\"\n                                :src=\"src\"\n                                :style=\"styles\"\n                                alt=\"\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div x-show=\"open\" x-transition.opacity class=\"modal-backdrop\"></div>\n        </div>\n    </template>\n</div>\n","palettes":{"Cyan":{"label":"Cyan","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.50% 0.009 200.873);\n--ms-cm-primary: oklch(65.00% 0.19 200.873);\n--ms-cm-primary-text: oklch(99.00% 0.009 200.873);\n--ms-cm-secondary: oklch(92.00% 0.07 200.873);\n--ms-cm-secondary-text: oklch(22.00% 0.03 200.873);\n--ms-cm-base-text: oklch(22.00% 0.03 200.873);\n--ms-cm-base-stroke: oklch(65.00% 0.19 200.873 / 20%);\n--ms-cm-base-default: oklch(99.50% 0.009 200.873);\n--ms-cm-base-50: oklch(98.40% 0.019 200.873);\n--ms-cm-base-100: oklch(97.00% 0.03 200.873);\n--ms-cm-base-200: oklch(94.00% 0.06 200.873);\n--ms-cm-base-300: oklch(90.00% 0.09 200.873);\n--ms-cm-base-400: oklch(85.00% 0.12 200.873);\n--ms-cm-base-500: oklch(78.00% 0.15 200.873);\n--ms-cm-base-600: oklch(71.00% 0.17 200.873);\n--ms-cm-base-700: oklch(65.00% 0.19 200.873);\n--ms-cm-base-800: oklch(55.00% 0.15 200.873);\n--ms-cm-base-900: oklch(45.00% 0.11 200.873);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 200.873);\n--ms-cm-primary: oklch(74.00% 0.16 200.873);\n--ms-cm-primary-text: oklch(16.00% 0.05 200.873);\n--ms-cm-secondary: oklch(51.00% 0.13 200.873);\n--ms-cm-secondary-text: oklch(94.00% 0.04 200.873);\n--ms-cm-base-text: oklch(90.00% 0.03 200.873);\n--ms-cm-base-stroke: oklch(74.00% 0.16 200.873 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 200.873);\n--ms-cm-base-50: oklch(24.00% 0.05 200.873);\n--ms-cm-base-100: oklch(29.00% 0.06 200.873);\n--ms-cm-base-200: oklch(34.00% 0.07 200.873);\n--ms-cm-base-300: oklch(41.00% 0.09 200.873);\n--ms-cm-base-400: oklch(49.00% 0.11 200.873);\n--ms-cm-base-500: oklch(58.00% 0.13 200.873);\n--ms-cm-base-600: oklch(67.00% 0.15 200.873);\n--ms-cm-base-700: oklch(74.00% 0.16 200.873);\n--ms-cm-base-800: oklch(82.00% 0.13 200.873);\n--ms-cm-base-900: oklch(88.00% 0.1 200.873);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Gray":{"label":"Gray","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.50% 0.001 247.839);\n--ms-cm-primary: oklch(55.00% 0.02 247.839);\n--ms-cm-primary-text: oklch(99.50% 0.001 247.839);\n--ms-cm-secondary: oklch(92.00% 0.005 247.839);\n--ms-cm-secondary-text: oklch(22.00% 0.005 247.839);\n--ms-cm-base-text: oklch(22.00% 0.005 247.839);\n--ms-cm-base-stroke: oklch(55.00% 0.02 247.839 / 20%);\n--ms-cm-base-default: oklch(99.50% 0.001 247.839);\n--ms-cm-base-50: oklch(98.50% 0.002 247.839);\n--ms-cm-base-100: oklch(97.00% 0.003 247.839);\n--ms-cm-base-200: oklch(94.00% 0.005 247.839);\n--ms-cm-base-300: oklch(90.00% 0.007 247.839);\n--ms-cm-base-400: oklch(85.00% 0.01 247.839);\n--ms-cm-base-500: oklch(75.00% 0.013 247.839);\n--ms-cm-base-600: oklch(65.00% 0.016 247.839);\n--ms-cm-base-700: oklch(55.00% 0.02 247.839);\n--ms-cm-base-800: oklch(45.00% 0.015 247.839);\n--ms-cm-base-900: oklch(35.00% 0.01 247.839);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.003 247.839);\n--ms-cm-primary: oklch(70.00% 0.015 247.839);\n--ms-cm-primary-text: oklch(16.00% 0.005 247.839);\n--ms-cm-secondary: oklch(48.00% 0.01 247.839);\n--ms-cm-secondary-text: oklch(94.00% 0.003 247.839);\n--ms-cm-base-text: oklch(90.00% 0.002 247.839);\n--ms-cm-base-stroke: oklch(70.00% 0.015 247.839 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.004 247.839);\n--ms-cm-base-50: oklch(24.00% 0.004 247.839);\n--ms-cm-base-100: oklch(28.00% 0.005 247.839);\n--ms-cm-base-200: oklch(33.00% 0.006 247.839);\n--ms-cm-base-300: oklch(39.00% 0.007 247.839);\n--ms-cm-base-400: oklch(46.00% 0.009 247.839);\n--ms-cm-base-500: oklch(54.00% 0.011 247.839);\n--ms-cm-base-600: oklch(62.00% 0.013 247.839);\n--ms-cm-base-700: oklch(70.00% 0.015 247.839);\n--ms-cm-base-800: oklch(78.00% 0.012 247.839);\n--ms-cm-base-900: oklch(86.00% 0.008 247.839);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Green":{"label":"Green","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.20% 0.009 155.826);\n--ms-cm-primary: oklch(63.00% 0.19 155.826);\n--ms-cm-primary-text: oklch(99.20% 0.009 155.826);\n--ms-cm-secondary: oklch(92.00% 0.06 155.826);\n--ms-cm-secondary-text: oklch(22.00% 0.02 155.826);\n--ms-cm-base-text: oklch(22.00% 0.02 155.826);\n--ms-cm-base-stroke: oklch(63.00% 0.19 155.826 / 20%);\n--ms-cm-base-default: oklch(99.20% 0.009 155.826);\n--ms-cm-base-50: oklch(98.20% 0.018 155.826);\n--ms-cm-base-100: oklch(96.00% 0.03 155.826);\n--ms-cm-base-200: oklch(93.00% 0.05 155.826);\n--ms-cm-base-300: oklch(90.00% 0.08 155.826);\n--ms-cm-base-400: oklch(86.00% 0.11 155.826);\n--ms-cm-base-500: oklch(78.00% 0.14 155.826);\n--ms-cm-base-600: oklch(70.00% 0.17 155.826);\n--ms-cm-base-700: oklch(63.00% 0.19 155.826);\n--ms-cm-base-800: oklch(53.00% 0.15 155.826);\n--ms-cm-base-900: oklch(43.00% 0.11 155.826);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.03 155.826);\n--ms-cm-primary: oklch(73.00% 0.16 155.826);\n--ms-cm-primary-text: oklch(16.00% 0.04 155.826);\n--ms-cm-secondary: oklch(49.00% 0.13 155.826);\n--ms-cm-secondary-text: oklch(94.00% 0.03 155.826);\n--ms-cm-base-text: oklch(90.00% 0.02 155.826);\n--ms-cm-base-stroke: oklch(73.00% 0.16 155.826 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.04 155.826);\n--ms-cm-base-50: oklch(24.00% 0.04 155.826);\n--ms-cm-base-100: oklch(29.00% 0.05 155.826);\n--ms-cm-base-200: oklch(34.00% 0.07 155.826);\n--ms-cm-base-300: oklch(40.00% 0.09 155.826);\n--ms-cm-base-400: oklch(48.00% 0.11 155.826);\n--ms-cm-base-500: oklch(56.00% 0.13 155.826);\n--ms-cm-base-600: oklch(64.00% 0.15 155.826);\n--ms-cm-base-700: oklch(73.00% 0.16 155.826);\n--ms-cm-base-800: oklch(81.00% 0.13 155.826);\n--ms-cm-base-900: oklch(88.00% 0.1 155.826);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Halloween":{"label":"Halloween","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(98.00% 0.02 285);\n--ms-cm-primary: oklch(65.00% 0.22 40);\n--ms-cm-primary-text: oklch(100.00% 0.03 40);\n--ms-cm-secondary: oklch(85.00% 0.15 285);\n--ms-cm-secondary-text: oklch(22.00% 0.04 285);\n--ms-cm-base-text: oklch(22.00% 0.04 285);\n--ms-cm-base-stroke: oklch(65.00% 0.22 40 / 20%);\n--ms-cm-base-default: oklch(98.00% 0.02 285);\n--ms-cm-base-50: oklch(96.00% 0.04 285);\n--ms-cm-base-100: oklch(93.00% 0.07 285);\n--ms-cm-base-200: oklch(90.00% 0.1 285);\n--ms-cm-base-300: oklch(86.00% 0.12 285);\n--ms-cm-base-400: oklch(81.00% 0.14 285);\n--ms-cm-base-500: oklch(75.00% 0.16 40);\n--ms-cm-base-600: oklch(70.00% 0.19 40);\n--ms-cm-base-700: oklch(65.00% 0.22 40);\n--ms-cm-base-800: oklch(55.00% 0.18 40);\n--ms-cm-base-900: oklch(45.00% 0.14 40);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(15.00% 0.04 285);\n--ms-cm-primary: oklch(68.00% 0.2 40);\n--ms-cm-primary-text: oklch(12.00% 0.05 285);\n--ms-cm-secondary: oklch(55.00% 0.18 285);\n--ms-cm-secondary-text: oklch(92.00% 0.06 40);\n--ms-cm-base-text: oklch(88.00% 0.05 40);\n--ms-cm-base-stroke: oklch(68.00% 0.2 40 / 20%);\n--ms-cm-base-default: oklch(20.00% 0.06 285);\n--ms-cm-base-50: oklch(22.00% 0.06 285);\n--ms-cm-base-100: oklch(27.00% 0.08 285);\n--ms-cm-base-200: oklch(32.00% 0.1 285);\n--ms-cm-base-300: oklch(39.00% 0.12 285);\n--ms-cm-base-400: oklch(47.00% 0.15 285);\n--ms-cm-base-500: oklch(55.00% 0.18 285);\n--ms-cm-base-600: oklch(62.00% 0.19 40);\n--ms-cm-base-700: oklch(68.00% 0.2 40);\n--ms-cm-base-800: oklch(76.00% 0.17 40);\n--ms-cm-base-900: oklch(84.00% 0.13 40);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Lime":{"label":"Lime","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.50% 0.015 120.757);\n--ms-cm-primary: oklch(65.00% 0.24 120.757);\n--ms-cm-primary-text: oklch(99.50% 0.015 120.757);\n--ms-cm-secondary: oklch(92.00% 0.08 120.757);\n--ms-cm-secondary-text: oklch(22.00% 0.03 120.757);\n--ms-cm-base-text: oklch(22.00% 0.03 120.757);\n--ms-cm-base-stroke: oklch(65.00% 0.24 120.757 / 20%);\n--ms-cm-base-default: oklch(99.50% 0.015 120.757);\n--ms-cm-base-50: oklch(98.60% 0.031 120.757);\n--ms-cm-base-100: oklch(97.00% 0.045 120.757);\n--ms-cm-base-200: oklch(94.00% 0.07 120.757);\n--ms-cm-base-300: oklch(91.00% 0.1 120.757);\n--ms-cm-base-400: oklch(87.00% 0.13 120.757);\n--ms-cm-base-500: oklch(80.00% 0.16 120.757);\n--ms-cm-base-600: oklch(72.00% 0.21 120.757);\n--ms-cm-base-700: oklch(65.00% 0.24 120.757);\n--ms-cm-base-800: oklch(55.00% 0.19 120.757);\n--ms-cm-base-900: oklch(45.00% 0.12 120.757);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 120.757);\n--ms-cm-primary: oklch(75.00% 0.19 120.757);\n--ms-cm-primary-text: oklch(16.00% 0.05 120.757);\n--ms-cm-secondary: oklch(50.00% 0.15 120.757);\n--ms-cm-secondary-text: oklch(94.00% 0.04 120.757);\n--ms-cm-base-text: oklch(90.00% 0.03 120.757);\n--ms-cm-base-stroke: oklch(75.00% 0.19 120.757 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 120.757);\n--ms-cm-base-50: oklch(24.00% 0.05 120.757);\n--ms-cm-base-100: oklch(29.00% 0.06 120.757);\n--ms-cm-base-200: oklch(34.00% 0.07 120.757);\n--ms-cm-base-300: oklch(40.00% 0.09 120.757);\n--ms-cm-base-400: oklch(48.00% 0.11 120.757);\n--ms-cm-base-500: oklch(56.00% 0.13 120.757);\n--ms-cm-base-600: oklch(65.00% 0.17 120.757);\n--ms-cm-base-700: oklch(75.00% 0.19 120.757);\n--ms-cm-base-800: oklch(82.00% 0.16 120.757);\n--ms-cm-base-900: oklch(88.00% 0.1 120.757);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Neutral":{"label":"Neutral","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.00% 0 0);\n--ms-cm-primary: oklch(25.00% 0 0);\n--ms-cm-primary-text: oklch(100.00% 0 0);\n--ms-cm-secondary: oklch(60.00% 0 0);\n--ms-cm-secondary-text: oklch(100.00% 0 0);\n--ms-cm-base-text: oklch(25.00% 0 0);\n--ms-cm-base-stroke: oklch(25.00% 0 0 / 20%);\n--ms-cm-base-default: oklch(100.00% 0 0);\n--ms-cm-base-50: oklch(98.50% 0 0);\n--ms-cm-base-100: oklch(97.00% 0 0);\n--ms-cm-base-200: oklch(95.50% 0 0);\n--ms-cm-base-300: oklch(94.00% 0 0);\n--ms-cm-base-400: oklch(92.50% 0 0);\n--ms-cm-base-500: oklch(91.00% 0 0);\n--ms-cm-base-600: oklch(88.00% 0 0);\n--ms-cm-base-700: oklch(85.00% 0 0);\n--ms-cm-base-800: oklch(80.00% 0 0);\n--ms-cm-base-900: oklch(75.00% 0 0);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(20.00% 0 0);\n--ms-cm-primary: oklch(100.00% 0 0);\n--ms-cm-primary-text: oklch(0.00% 0 0);\n--ms-cm-secondary: oklch(80.00% 0 0);\n--ms-cm-secondary-text: oklch(20.00% 0 0);\n--ms-cm-base-text: oklch(90.00% 0 0);\n--ms-cm-base-stroke: oklch(85.00% 0 0 / 20%);\n--ms-cm-base-default: oklch(24.00% 0 0);\n--ms-cm-base-50: oklch(26.00% 0 0);\n--ms-cm-base-100: oklch(28.00% 0 0);\n--ms-cm-base-200: oklch(32.00% 0 0);\n--ms-cm-base-300: oklch(38.00% 0 0);\n--ms-cm-base-400: oklch(45.00% 0 0);\n--ms-cm-base-500: oklch(52.00% 0 0);\n--ms-cm-base-600: oklch(60.00% 0 0);\n--ms-cm-base-700: oklch(70.00% 0 0);\n--ms-cm-base-800: oklch(80.00% 0 0);\n--ms-cm-base-900: oklch(88.00% 0 0);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Orange":{"label":"Orange","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.50% 0.008 73.684);\n--ms-cm-primary: oklch(70.00% 0.2 73.684);\n--ms-cm-primary-text: oklch(99.00% 0.008 73.684);\n--ms-cm-secondary: oklch(92.00% 0.07 73.684);\n--ms-cm-secondary-text: oklch(22.00% 0.03 73.684);\n--ms-cm-base-text: oklch(22.00% 0.03 73.684);\n--ms-cm-base-stroke: oklch(70.00% 0.2 73.684 / 20%);\n--ms-cm-base-default: oklch(99.50% 0.008 73.684);\n--ms-cm-base-50: oklch(98.00% 0.016 73.684);\n--ms-cm-base-100: oklch(96.00% 0.03 73.684);\n--ms-cm-base-200: oklch(93.00% 0.06 73.684);\n--ms-cm-base-300: oklch(89.00% 0.09 73.684);\n--ms-cm-base-400: oklch(84.00% 0.13 73.684);\n--ms-cm-base-500: oklch(78.00% 0.16 73.684);\n--ms-cm-base-600: oklch(73.00% 0.18 73.684);\n--ms-cm-base-700: oklch(70.00% 0.2 73.684);\n--ms-cm-base-800: oklch(60.00% 0.16 73.684);\n--ms-cm-base-900: oklch(50.00% 0.12 73.684);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 73.684);\n--ms-cm-primary: oklch(76.00% 0.17 73.684);\n--ms-cm-primary-text: oklch(16.00% 0.05 73.684);\n--ms-cm-secondary: oklch(51.00% 0.13 73.684);\n--ms-cm-secondary-text: oklch(94.00% 0.04 73.684);\n--ms-cm-base-text: oklch(90.00% 0.03 73.684);\n--ms-cm-base-stroke: oklch(76.00% 0.17 73.684 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 73.684);\n--ms-cm-base-50: oklch(24.00% 0.05 73.684);\n--ms-cm-base-100: oklch(29.00% 0.06 73.684);\n--ms-cm-base-200: oklch(34.00% 0.07 73.684);\n--ms-cm-base-300: oklch(41.00% 0.09 73.684);\n--ms-cm-base-400: oklch(49.00% 0.11 73.684);\n--ms-cm-base-500: oklch(58.00% 0.13 73.684);\n--ms-cm-base-600: oklch(67.00% 0.15 73.684);\n--ms-cm-base-700: oklch(76.00% 0.17 73.684);\n--ms-cm-base-800: oklch(83.00% 0.14 73.684);\n--ms-cm-base-900: oklch(89.00% 0.1 73.684);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Pink":{"label":"Pink","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(98.50% 0.007 343.198);\n--ms-cm-primary: oklch(58.00% 0.24 343.198);\n--ms-cm-primary-text: oklch(98.50% 0.007 343.198);\n--ms-cm-secondary: oklch(92.00% 0.06 343.198);\n--ms-cm-secondary-text: oklch(22.00% 0.02 343.198);\n--ms-cm-base-text: oklch(22.00% 0.02 343.198);\n--ms-cm-base-stroke: oklch(58.00% 0.24 343.198 / 20%);\n--ms-cm-base-default: oklch(98.50% 0.007 343.198);\n--ms-cm-base-50: oklch(97.10% 0.014 343.198);\n--ms-cm-base-100: oklch(95.00% 0.025 343.198);\n--ms-cm-base-200: oklch(93.00% 0.045 343.198);\n--ms-cm-base-300: oklch(90.00% 0.07 343.198);\n--ms-cm-base-400: oklch(86.00% 0.11 343.198);\n--ms-cm-base-500: oklch(77.00% 0.16 343.198);\n--ms-cm-base-600: oklch(67.00% 0.2 343.198);\n--ms-cm-base-700: oklch(58.00% 0.24 343.198);\n--ms-cm-base-800: oklch(48.00% 0.19 343.198);\n--ms-cm-base-900: oklch(38.00% 0.14 343.198);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 343.198);\n--ms-cm-primary: oklch(72.00% 0.18 343.198);\n--ms-cm-primary-text: oklch(16.00% 0.05 343.198);\n--ms-cm-secondary: oklch(48.00% 0.14 343.198);\n--ms-cm-secondary-text: oklch(94.00% 0.04 343.198);\n--ms-cm-base-text: oklch(90.00% 0.03 343.198);\n--ms-cm-base-stroke: oklch(72.00% 0.18 343.198 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 343.198);\n--ms-cm-base-50: oklch(24.00% 0.05 343.198);\n--ms-cm-base-100: oklch(29.00% 0.06 343.198);\n--ms-cm-base-200: oklch(33.00% 0.07 343.198);\n--ms-cm-base-300: oklch(39.00% 0.09 343.198);\n--ms-cm-base-400: oklch(46.00% 0.12 343.198);\n--ms-cm-base-500: oklch(54.00% 0.15 343.198);\n--ms-cm-base-600: oklch(63.00% 0.17 343.198);\n--ms-cm-base-700: oklch(72.00% 0.18 343.198);\n--ms-cm-base-800: oklch(80.00% 0.15 343.198);\n--ms-cm-base-900: oklch(87.00% 0.12 343.198);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Purple":{"label":"Purple","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(98.50% 0.008 293.756);\n--ms-cm-primary: oklch(58.00% 0.24 293.756);\n--ms-cm-primary-text: oklch(98.50% 0.008 293.756);\n--ms-cm-secondary: oklch(92.00% 0.06 293.756);\n--ms-cm-secondary-text: oklch(22.00% 0.02 293.756);\n--ms-cm-base-text: oklch(22.00% 0.02 293.756);\n--ms-cm-base-stroke: oklch(58.00% 0.24 293.756 / 20%);\n--ms-cm-base-default: oklch(98.50% 0.008 293.756);\n--ms-cm-base-50: oklch(96.90% 0.016 293.756);\n--ms-cm-base-100: oklch(95.00% 0.025 293.756);\n--ms-cm-base-200: oklch(93.00% 0.045 293.756);\n--ms-cm-base-300: oklch(90.00% 0.07 293.756);\n--ms-cm-base-400: oklch(86.00% 0.11 293.756);\n--ms-cm-base-500: oklch(77.00% 0.16 293.756);\n--ms-cm-base-600: oklch(67.00% 0.2 293.756);\n--ms-cm-base-700: oklch(58.00% 0.24 293.756);\n--ms-cm-base-800: oklch(48.00% 0.19 293.756);\n--ms-cm-base-900: oklch(38.00% 0.14 293.756);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 293.756);\n--ms-cm-primary: oklch(72.00% 0.18 293.756);\n--ms-cm-primary-text: oklch(16.00% 0.05 293.756);\n--ms-cm-secondary: oklch(48.00% 0.14 293.756);\n--ms-cm-secondary-text: oklch(94.00% 0.04 293.756);\n--ms-cm-base-text: oklch(90.00% 0.03 293.756);\n--ms-cm-base-stroke: oklch(72.00% 0.18 293.756 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 293.756);\n--ms-cm-base-50: oklch(24.00% 0.05 293.756);\n--ms-cm-base-100: oklch(29.00% 0.06 293.756);\n--ms-cm-base-200: oklch(33.00% 0.07 293.756);\n--ms-cm-base-300: oklch(39.00% 0.09 293.756);\n--ms-cm-base-400: oklch(46.00% 0.12 293.756);\n--ms-cm-base-500: oklch(54.00% 0.15 293.756);\n--ms-cm-base-600: oklch(63.00% 0.17 293.756);\n--ms-cm-base-700: oklch(72.00% 0.18 293.756);\n--ms-cm-base-800: oklch(80.00% 0.15 293.756);\n--ms-cm-base-900: oklch(87.00% 0.12 293.756);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Retro":{"label":"Retro","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(98.00% 0.012 90.515);\n--ms-cm-primary: oklch(70.00% 0.11 90.515);\n--ms-cm-primary-text: oklch(22.00% 0.02 90.515);\n--ms-cm-secondary: oklch(78.00% 0.18 190);\n--ms-cm-secondary-text: oklch(22.00% 0.04 320);\n--ms-cm-base-text: oklch(22.00% 0.02 90.515);\n--ms-cm-base-stroke: oklch(70.00% 0.11 90.515 / 20%);\n--ms-cm-base-default: oklch(98.00% 0.012 90.515);\n--ms-cm-base-50: oklch(96.00% 0.025 90.515);\n--ms-cm-base-100: oklch(94.00% 0.03 90.515);\n--ms-cm-base-200: oklch(91.00% 0.04 90.515);\n--ms-cm-base-300: oklch(88.00% 0.05 90.515);\n--ms-cm-base-400: oklch(84.00% 0.07 90.515);\n--ms-cm-base-500: oklch(80.00% 0.08 90.515);\n--ms-cm-base-600: oklch(76.00% 0.09 90.515);\n--ms-cm-base-700: oklch(70.00% 0.11 90.515);\n--ms-cm-base-800: oklch(62.00% 0.09 90.515);\n--ms-cm-base-900: oklch(54.00% 0.07 90.515);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.03 90.515);\n--ms-cm-primary: oklch(76.00% 0.09 90.515);\n--ms-cm-primary-text: oklch(16.00% 0.04 90.515);\n--ms-cm-secondary: oklch(65.00% 0.16 190);\n--ms-cm-secondary-text: oklch(94.00% 0.04 320);\n--ms-cm-base-text: oklch(90.00% 0.02 90.515);\n--ms-cm-base-stroke: oklch(76.00% 0.09 90.515 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.04 90.515);\n--ms-cm-base-50: oklch(24.00% 0.04 90.515);\n--ms-cm-base-100: oklch(29.00% 0.05 90.515);\n--ms-cm-base-200: oklch(34.00% 0.05 90.515);\n--ms-cm-base-300: oklch(41.00% 0.06 90.515);\n--ms-cm-base-400: oklch(49.00% 0.07 90.515);\n--ms-cm-base-500: oklch(58.00% 0.08 90.515);\n--ms-cm-base-600: oklch(67.00% 0.08 90.515);\n--ms-cm-base-700: oklch(76.00% 0.09 90.515);\n--ms-cm-base-800: oklch(83.00% 0.07 90.515);\n--ms-cm-base-900: oklch(89.00% 0.06 90.515);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Rose":{"label":"Rose","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(98.50% 0.008 12.422);\n--ms-cm-primary: oklch(58.00% 0.24 12.422);\n--ms-cm-primary-text: oklch(98.50% 0.008 12.422);\n--ms-cm-secondary: oklch(92.00% 0.06 12.422);\n--ms-cm-secondary-text: oklch(22.00% 0.02 12.422);\n--ms-cm-base-text: oklch(22.00% 0.02 12.422);\n--ms-cm-base-stroke: oklch(58.00% 0.24 12.422 / 20%);\n--ms-cm-base-default: oklch(98.50% 0.008 12.422);\n--ms-cm-base-50: oklch(96.90% 0.015 12.422);\n--ms-cm-base-100: oklch(95.00% 0.025 12.422);\n--ms-cm-base-200: oklch(93.00% 0.045 12.422);\n--ms-cm-base-300: oklch(90.00% 0.07 12.422);\n--ms-cm-base-400: oklch(86.00% 0.11 12.422);\n--ms-cm-base-500: oklch(77.00% 0.16 12.422);\n--ms-cm-base-600: oklch(67.00% 0.2 12.422);\n--ms-cm-base-700: oklch(58.00% 0.24 12.422);\n--ms-cm-base-800: oklch(48.00% 0.19 12.422);\n--ms-cm-base-900: oklch(38.00% 0.14 12.422);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 12.422);\n--ms-cm-primary: oklch(72.00% 0.18 12.422);\n--ms-cm-primary-text: oklch(16.00% 0.05 12.422);\n--ms-cm-secondary: oklch(48.00% 0.14 12.422);\n--ms-cm-secondary-text: oklch(94.00% 0.04 12.422);\n--ms-cm-base-text: oklch(90.00% 0.03 12.422);\n--ms-cm-base-stroke: oklch(72.00% 0.18 12.422 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 12.422);\n--ms-cm-base-50: oklch(24.00% 0.05 12.422);\n--ms-cm-base-100: oklch(29.00% 0.06 12.422);\n--ms-cm-base-200: oklch(33.00% 0.07 12.422);\n--ms-cm-base-300: oklch(39.00% 0.09 12.422);\n--ms-cm-base-400: oklch(46.00% 0.12 12.422);\n--ms-cm-base-500: oklch(54.00% 0.15 12.422);\n--ms-cm-base-600: oklch(63.00% 0.17 12.422);\n--ms-cm-base-700: oklch(72.00% 0.18 12.422);\n--ms-cm-base-800: oklch(80.00% 0.15 12.422);\n--ms-cm-base-900: oklch(87.00% 0.12 12.422);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Sky":{"label":"Sky","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.00% 0.006 236.62);\n--ms-cm-primary: oklch(60.00% 0.2 236.62);\n--ms-cm-primary-text: oklch(99.00% 0.006 236.62);\n--ms-cm-secondary: oklch(92.00% 0.05 236.62);\n--ms-cm-secondary-text: oklch(22.00% 0.02 236.62);\n--ms-cm-base-text: oklch(22.00% 0.02 236.62);\n--ms-cm-base-stroke: oklch(60.00% 0.2 236.62 / 20%);\n--ms-cm-base-default: oklch(99.00% 0.006 236.62);\n--ms-cm-base-50: oklch(97.70% 0.013 236.62);\n--ms-cm-base-100: oklch(96.00% 0.022 236.62);\n--ms-cm-base-200: oklch(93.00% 0.04 236.62);\n--ms-cm-base-300: oklch(90.00% 0.07 236.62);\n--ms-cm-base-400: oklch(86.00% 0.1 236.62);\n--ms-cm-base-500: oklch(77.00% 0.14 236.62);\n--ms-cm-base-600: oklch(68.00% 0.17 236.62);\n--ms-cm-base-700: oklch(60.00% 0.2 236.62);\n--ms-cm-base-800: oklch(50.00% 0.16 236.62);\n--ms-cm-base-900: oklch(40.00% 0.12 236.62);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.03 236.62);\n--ms-cm-primary: oklch(72.00% 0.16 236.62);\n--ms-cm-primary-text: oklch(16.00% 0.04 236.62);\n--ms-cm-secondary: oklch(48.00% 0.13 236.62);\n--ms-cm-secondary-text: oklch(94.00% 0.03 236.62);\n--ms-cm-base-text: oklch(90.00% 0.02 236.62);\n--ms-cm-base-stroke: oklch(72.00% 0.16 236.62 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.04 236.62);\n--ms-cm-base-50: oklch(24.00% 0.04 236.62);\n--ms-cm-base-100: oklch(29.00% 0.05 236.62);\n--ms-cm-base-200: oklch(33.00% 0.06 236.62);\n--ms-cm-base-300: oklch(39.00% 0.08 236.62);\n--ms-cm-base-400: oklch(46.00% 0.1 236.62);\n--ms-cm-base-500: oklch(54.00% 0.13 236.62);\n--ms-cm-base-600: oklch(63.00% 0.15 236.62);\n--ms-cm-base-700: oklch(72.00% 0.16 236.62);\n--ms-cm-base-800: oklch(80.00% 0.13 236.62);\n--ms-cm-base-900: oklch(87.00% 0.1 236.62);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Spring":{"label":"Spring","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.00% 0.006 145);\n--ms-cm-primary: oklch(75.00% 0.14 145);\n--ms-cm-primary-text: oklch(25.00% 0.03 145);\n--ms-cm-secondary: oklch(92.00% 0.06 85);\n--ms-cm-secondary-text: oklch(25.00% 0.03 85);\n--ms-cm-base-text: oklch(25.00% 0.03 145);\n--ms-cm-base-stroke: oklch(75.00% 0.14 145 / 20%);\n--ms-cm-base-default: oklch(99.00% 0.006 145);\n--ms-cm-base-50: oklch(97.00% 0.012 145);\n--ms-cm-base-100: oklch(94.00% 0.025 145);\n--ms-cm-base-200: oklch(91.00% 0.04 145);\n--ms-cm-base-300: oklch(87.00% 0.06 145);\n--ms-cm-base-400: oklch(83.00% 0.09 145);\n--ms-cm-base-500: oklch(79.00% 0.11 145);\n--ms-cm-base-600: oklch(77.00% 0.13 145);\n--ms-cm-base-700: oklch(75.00% 0.14 145);\n--ms-cm-base-800: oklch(65.00% 0.11 145);\n--ms-cm-base-900: oklch(55.00% 0.09 145);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 145);\n--ms-cm-primary: oklch(78.00% 0.12 145);\n--ms-cm-primary-text: oklch(16.00% 0.05 145);\n--ms-cm-secondary: oklch(65.00% 0.1 85);\n--ms-cm-secondary-text: oklch(94.00% 0.03 145);\n--ms-cm-base-text: oklch(90.00% 0.03 145);\n--ms-cm-base-stroke: oklch(78.00% 0.12 145 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 145);\n--ms-cm-base-50: oklch(24.00% 0.05 145);\n--ms-cm-base-100: oklch(29.00% 0.06 145);\n--ms-cm-base-200: oklch(34.00% 0.07 145);\n--ms-cm-base-300: oklch(41.00% 0.08 145);\n--ms-cm-base-400: oklch(49.00% 0.09 145);\n--ms-cm-base-500: oklch(58.00% 0.1 145);\n--ms-cm-base-600: oklch(68.00% 0.11 145);\n--ms-cm-base-700: oklch(78.00% 0.12 145);\n--ms-cm-base-800: oklch(84.00% 0.1 145);\n--ms-cm-base-900: oklch(89.00% 0.08 145);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Teal":{"label":"Teal","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.00% 0.007 180.72);\n--ms-cm-primary: oklch(60.00% 0.18 180.72);\n--ms-cm-primary-text: oklch(99.00% 0.007 180.72);\n--ms-cm-secondary: oklch(92.00% 0.05 180.72);\n--ms-cm-secondary-text: oklch(22.00% 0.02 180.72);\n--ms-cm-base-text: oklch(22.00% 0.02 180.72);\n--ms-cm-base-stroke: oklch(60.00% 0.18 180.72 / 20%);\n--ms-cm-base-default: oklch(99.00% 0.007 180.72);\n--ms-cm-base-50: oklch(98.00% 0.014 180.72);\n--ms-cm-base-100: oklch(96.00% 0.022 180.72);\n--ms-cm-base-200: oklch(93.00% 0.04 180.72);\n--ms-cm-base-300: oklch(90.00% 0.06 180.72);\n--ms-cm-base-400: oklch(86.00% 0.09 180.72);\n--ms-cm-base-500: oklch(77.00% 0.13 180.72);\n--ms-cm-base-600: oklch(68.00% 0.16 180.72);\n--ms-cm-base-700: oklch(60.00% 0.18 180.72);\n--ms-cm-base-800: oklch(50.00% 0.14 180.72);\n--ms-cm-base-900: oklch(40.00% 0.1 180.72);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.03 180.72);\n--ms-cm-primary: oklch(72.00% 0.15 180.72);\n--ms-cm-primary-text: oklch(16.00% 0.04 180.72);\n--ms-cm-secondary: oklch(48.00% 0.12 180.72);\n--ms-cm-secondary-text: oklch(94.00% 0.03 180.72);\n--ms-cm-base-text: oklch(90.00% 0.02 180.72);\n--ms-cm-base-stroke: oklch(72.00% 0.15 180.72 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.04 180.72);\n--ms-cm-base-50: oklch(24.00% 0.04 180.72);\n--ms-cm-base-100: oklch(29.00% 0.05 180.72);\n--ms-cm-base-200: oklch(33.00% 0.06 180.72);\n--ms-cm-base-300: oklch(39.00% 0.08 180.72);\n--ms-cm-base-400: oklch(46.00% 0.1 180.72);\n--ms-cm-base-500: oklch(54.00% 0.12 180.72);\n--ms-cm-base-600: oklch(63.00% 0.14 180.72);\n--ms-cm-base-700: oklch(72.00% 0.15 180.72);\n--ms-cm-base-800: oklch(80.00% 0.12 180.72);\n--ms-cm-base-900: oklch(87.00% 0.09 180.72);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Valentine":{"label":"Valentine","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(98.00% 0.02 340);\n--ms-cm-primary: oklch(55.00% 0.28 355);\n--ms-cm-primary-text: oklch(99.00% 0.01 340);\n--ms-cm-secondary: oklch(92.00% 0.08 340);\n--ms-cm-secondary-text: oklch(22.00% 0.03 355);\n--ms-cm-base-text: oklch(22.00% 0.03 355);\n--ms-cm-base-stroke: oklch(55.00% 0.28 355 / 20%);\n--ms-cm-base-default: oklch(98.00% 0.02 340);\n--ms-cm-base-50: oklch(96.00% 0.04 340);\n--ms-cm-base-100: oklch(93.00% 0.06 340);\n--ms-cm-base-200: oklch(90.00% 0.09 340);\n--ms-cm-base-300: oklch(86.00% 0.12 340);\n--ms-cm-base-400: oklch(81.00% 0.16 340);\n--ms-cm-base-500: oklch(74.00% 0.2 355);\n--ms-cm-base-600: oklch(65.00% 0.24 355);\n--ms-cm-base-700: oklch(55.00% 0.28 355);\n--ms-cm-base-800: oklch(45.00% 0.22 355);\n--ms-cm-base-900: oklch(35.00% 0.16 355);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.06 340);\n--ms-cm-primary: oklch(70.00% 0.22 355);\n--ms-cm-primary-text: oklch(16.00% 0.07 340);\n--ms-cm-secondary: oklch(48.00% 0.16 340);\n--ms-cm-secondary-text: oklch(94.00% 0.05 355);\n--ms-cm-base-text: oklch(90.00% 0.04 340);\n--ms-cm-base-stroke: oklch(70.00% 0.22 355 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.07 340);\n--ms-cm-base-50: oklch(24.00% 0.07 340);\n--ms-cm-base-100: oklch(29.00% 0.08 340);\n--ms-cm-base-200: oklch(34.00% 0.1 340);\n--ms-cm-base-300: oklch(41.00% 0.12 340);\n--ms-cm-base-400: oklch(49.00% 0.14 340);\n--ms-cm-base-500: oklch(57.00% 0.17 355);\n--ms-cm-base-600: oklch(64.00% 0.2 355);\n--ms-cm-base-700: oklch(70.00% 0.22 355);\n--ms-cm-base-800: oklch(78.00% 0.18 355);\n--ms-cm-base-900: oklch(85.00% 0.14 355);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Winter":{"label":"Winter","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.50% 0.004 210);\n--ms-cm-primary: oklch(65.00% 0.16 210);\n--ms-cm-primary-text: oklch(99.50% 0.004 210);\n--ms-cm-secondary: oklch(92.00% 0.03 200);\n--ms-cm-secondary-text: oklch(22.00% 0.02 210);\n--ms-cm-base-text: oklch(22.00% 0.02 210);\n--ms-cm-base-stroke: oklch(65.00% 0.16 210 / 20%);\n--ms-cm-base-default: oklch(99.50% 0.004 210);\n--ms-cm-base-50: oklch(98.00% 0.008 210);\n--ms-cm-base-100: oklch(96.00% 0.015 210);\n--ms-cm-base-200: oklch(92.00% 0.03 210);\n--ms-cm-base-300: oklch(88.00% 0.05 210);\n--ms-cm-base-400: oklch(82.00% 0.08 210);\n--ms-cm-base-500: oklch(75.00% 0.12 210);\n--ms-cm-base-600: oklch(70.00% 0.14 210);\n--ms-cm-base-700: oklch(65.00% 0.16 210);\n--ms-cm-base-800: oklch(55.00% 0.13 210);\n--ms-cm-base-900: oklch(45.00% 0.1 210);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(17.00% 0.04 210);\n--ms-cm-primary: oklch(72.00% 0.14 210);\n--ms-cm-primary-text: oklch(15.00% 0.05 210);\n--ms-cm-secondary: oklch(50.00% 0.12 200);\n--ms-cm-secondary-text: oklch(94.00% 0.03 210);\n--ms-cm-base-text: oklch(92.00% 0.02 210);\n--ms-cm-base-stroke: oklch(72.00% 0.14 210 / 20%);\n--ms-cm-base-default: oklch(21.00% 0.05 210);\n--ms-cm-base-50: oklch(23.00% 0.05 210);\n--ms-cm-base-100: oklch(28.00% 0.06 210);\n--ms-cm-base-200: oklch(33.00% 0.07 210);\n--ms-cm-base-300: oklch(40.00% 0.09 210);\n--ms-cm-base-400: oklch(47.00% 0.11 210);\n--ms-cm-base-500: oklch(56.00% 0.12 210);\n--ms-cm-base-600: oklch(64.00% 0.13 210);\n--ms-cm-base-700: oklch(72.00% 0.14 210);\n--ms-cm-base-800: oklch(80.00% 0.12 210);\n--ms-cm-base-900: oklch(88.00% 0.09 210);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"},"Yellow":{"label":"Yellow","css":"\n    :root:not(.dark) {\n    --ms-cm-body: oklch(99.50% 0.013 91.936);\n--ms-cm-primary: oklch(85.20% 0.199 91.936);\n--ms-cm-primary-text: oklch(22.00% 0.03 91.936);\n--ms-cm-secondary: oklch(92.00% 0.07 91.936);\n--ms-cm-secondary-text: oklch(22.00% 0.03 91.936);\n--ms-cm-base-text: oklch(22.00% 0.03 91.936);\n--ms-cm-base-stroke: oklch(68.00% 0.2 91.936 / 20%);\n--ms-cm-base-default: oklch(99.50% 0.013 91.936);\n--ms-cm-base-50: oklch(98.70% 0.026 91.936);\n--ms-cm-base-100: oklch(97.00% 0.04 91.936);\n--ms-cm-base-200: oklch(94.00% 0.06 91.936);\n--ms-cm-base-300: oklch(91.00% 0.09 91.936);\n--ms-cm-base-400: oklch(87.00% 0.12 91.936);\n--ms-cm-base-500: oklch(80.00% 0.15 91.936);\n--ms-cm-base-600: oklch(73.00% 0.18 91.936);\n--ms-cm-base-700: oklch(68.00% 0.2 91.936);\n--ms-cm-base-800: oklch(58.00% 0.16 91.936);\n--ms-cm-base-900: oklch(48.00% 0.11 91.936);\n--ms-cm-success: oklch(64.00% 0.22 142.49);\n--ms-cm-success-text: oklch(46.00% 0.16 142.49);\n--ms-cm-warning: oklch(75.00% 0.17 75.35);\n--ms-cm-warning-text: oklch(50.00% 0.1 76.1);\n--ms-cm-error: oklch(58.00% 0.21 26.855);\n--ms-cm-error-text: oklch(37.00% 0.145 26.85);\n--ms-cm-info: oklch(60.00% 0.219 257.63);\n--ms-cm-info-text: oklch(35.00% 0.12 257.63);\n    }\n    :root.dark {\n    --ms-cm-body: oklch(18.00% 0.04 91.936);\n--ms-cm-primary: oklch(85.20% 0.199 91.936);\n--ms-cm-primary-text: oklch(16.00% 0.05 91.936);\n--ms-cm-secondary: oklch(51.00% 0.13 91.936);\n--ms-cm-secondary-text: oklch(94.00% 0.04 91.936);\n--ms-cm-base-text: oklch(90.00% 0.03 91.936);\n--ms-cm-base-stroke: oklch(76.00% 0.17 91.936 / 20%);\n--ms-cm-base-default: oklch(22.00% 0.05 91.936);\n--ms-cm-base-50: oklch(24.00% 0.05 91.936);\n--ms-cm-base-100: oklch(29.00% 0.06 91.936);\n--ms-cm-base-200: oklch(34.00% 0.07 91.936);\n--ms-cm-base-300: oklch(41.00% 0.09 91.936);\n--ms-cm-base-400: oklch(49.00% 0.11 91.936);\n--ms-cm-base-500: oklch(58.00% 0.13 91.936);\n--ms-cm-base-600: oklch(67.00% 0.15 91.936);\n--ms-cm-base-700: oklch(76.00% 0.17 91.936);\n--ms-cm-base-800: oklch(83.00% 0.14 91.936);\n--ms-cm-base-900: oklch(89.00% 0.1 91.936);\n--ms-cm-success: oklch(64.00% 0.22 142.495);\n--ms-cm-success-text: oklch(93.00% 0.12 144.46);\n--ms-cm-warning: oklch(90.00% 0.22 92.72);\n--ms-cm-warning-text: oklch(99.00% 0.072 107.64);\n--ms-cm-error: oklch(58.90% 0.214 26.855);\n--ms-cm-error-text: oklch(71.00% 0.24 25.96);\n--ms-cm-info: oklch(60.00% 0.22 257.63);\n--ms-cm-info-text: oklch(88.00% 0.065 244.38);\n    }\n"}}}