utopia-ui 3.0.107 → 3.0.109

package/dist/index.cjs.js

@@ -0,0 +1,2105 @@
+'use strict';
+
+require('leaflet/dist/leaflet.css');
+require('leaflet.locatecontrol/dist/L.Control.Locate.css');
+require('react-image-crop/dist/ReactCrop.css');
+require('react-toastify/dist/ReactToastify.css');
+var jsxRuntime = require('react/jsx-runtime');
+var leaflet = require('leaflet');
+var reactLeaflet = require('react-leaflet');
+var reactQuery = require('@tanstack/react-query');
+var React = require('react');
+var reactRouterDom = require('react-router-dom');
+var reactToastify = require('react-toastify');
+var TagView = require('./TagView-N0Ody3tW.js');
+var MarkerClusterGroup = require('react-leaflet-cluster');
+var SVG = require('react-inlinesvg');
+var axios = require('axios');
+var QuestionMarkIcon = require('@heroicons/react/24/outline/QuestionMarkCircleIcon');
+var ChevronRightIcon = require('@heroicons/react/24/outline/ChevronRightIcon');
+var ChevronDownIcon = require('@heroicons/react/24/outline/ChevronDownIcon');
+require('react-markdown');
+require('remark-breaks');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$c = ".react-photo-album{display:flex}.react-photo-album,.react-photo-album *{box-sizing:border-box}.react-photo-album--track{align-items:flex-start;display:flex}.react-photo-album--photo{padding:calc(var(--react-photo-album--padding)*1px);position:relative}.react-photo-album--image{aspect-ratio:var(--react-photo-album--photo-width)/var(--react-photo-album--photo-height);display:block;height:auto;width:100%}.react-photo-album--button{background:initial;border:initial;cursor:pointer}.react-photo-album--rows{flex-direction:column;row-gap:calc(var(--react-photo-album--spacing)*1px)}.react-photo-album--rows .react-photo-album--track{justify-content:space-between;--react-photo-album--track-gaps:calc(var(--react-photo-album--spacing)*(var(--react-photo-album--track-size) - 1) + var(--react-photo-album--padding)*2*var(--react-photo-album--track-size))}.react-photo-album--rows .react-photo-album--photo{width:calc((100% - var(--react-photo-album--track-gaps)*1px)/(var(--react-photo-album--container-width) - var(--react-photo-album--track-gaps))*var(--react-photo-album--photo-width) + 2px*var(--react-photo-album--padding))}";
+styleInject(css_248z$c);
+
+var css_248z$b = ".yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}";
+styleInject(css_248z$b);
+
+var css_248z$a = "/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --tw-color-red-500: oklch(0.637 0.237 25.331);\n    --tw-color-red-600: oklch(0.577 0.245 27.325);\n    --tw-color-green-500: oklch(0.723 0.219 149.579);\n    --tw-color-slate-200: oklch(0.929 0.013 255.508);\n    --tw-color-slate-300: oklch(0.869 0.022 252.894);\n    --tw-color-gray-200: oklch(0.928 0.006 264.531);\n    --tw-color-gray-400: oklch(0.707 0.022 261.325);\n    --tw-color-gray-500: oklch(0.551 0.027 264.364);\n    --tw-color-gray-600: oklch(0.446 0.03 256.802);\n    --tw-color-zinc-500: oklch(0.552 0.016 285.938);\n    --tw-color-zinc-800: oklch(0.274 0.006 286.033);\n    --tw-color-white: #fff;\n    --tw-spacing: 0.25rem;\n    --tw-container-xs: 20rem;\n    --tw-container-xl: 36rem;\n    --tw-container-2xl: 42rem;\n    --tw-container-3xl: 48rem;\n    --tw-container-6xl: 72rem;\n    --tw-text-xs: 0.75rem;\n    --tw-text-xs--line-height: calc(1 / 0.75);\n    --tw-text-sm: 0.875rem;\n    --tw-text-sm--line-height: calc(1.25 / 0.875);\n    --tw-text-base: 1rem;\n    --tw-text-base--line-height: calc(1.5 / 1);\n    --tw-text-lg: 1.125rem;\n    --tw-text-lg--line-height: calc(1.75 / 1.125);\n    --tw-text-xl: 1.25rem;\n    --tw-text-xl--line-height: calc(1.75 / 1.25);\n    --tw-text-2xl: 1.5rem;\n    --tw-text-2xl--line-height: calc(2 / 1.5);\n    --tw-text-3xl: 1.875rem;\n    --tw-text-3xl--line-height: calc(2.25 / 1.875);\n    --tw-text-6xl: 3.75rem;\n    --tw-text-6xl--line-height: 1;\n    --tw-font-weight-normal: 400;\n    --tw-font-weight-medium: 500;\n    --tw-font-weight-semibold: 600;\n    --tw-font-weight-bold: 700;\n    --tw-radius-md: 0.375rem;\n    --tw-radius-lg: 0.5rem;\n    --tw-radius-xl: 0.75rem;\n    --tw-radius-2xl: 1rem;\n    --tw-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n    --tw-ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --tw-default-transition-duration: 150ms;\n    --tw-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --tw-z-index-500: 500;\n    --tw-z-index-1000: 1000;\n    --tw-z-index-2000: 2000;\n    --tw-z-index-3000: 3000;\n    --tw-min-width-80: 320px;\n    --tw-container-52: 208px;\n    --tw-min-height-56: 224px;\n    --tw-min-height-80: 320px;\n    --tw-text-map: 13px;\n    --tw-leading-map: 1.4em;\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" );\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var( --default-font-variation-settings, normal );\n    -webkit-tap-highlight-color: transparent;\n  }\n  body {\n    line-height: inherit;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace );\n    font-feature-settings: var( --default-mono-font-feature-settings, normal );\n    font-variation-settings: var( --default-mono-font-variation-settings, normal );\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n    color: color-mix(in oklab, currentColor 50%, transparent);\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .tw\\:\\@container {\n    container-type: inline-size;\n  }\n  .tw\\:modal {\n    pointer-events: none;\n    visibility: hidden;\n    position: fixed;\n    inset: calc(0.25rem * 0);\n    margin: calc(0.25rem * 0);\n    display: grid;\n    height: 100%;\n    max-height: none;\n    width: 100%;\n    max-width: none;\n    align-items: center;\n    justify-items: center;\n    background-color: transparent;\n    padding: calc(0.25rem * 0);\n    color: inherit;\n    overflow-x: hidden;\n    transition: transform 0.3s ease-out, visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;\n    overflow-y: hidden;\n    overscroll-behavior: contain;\n    z-index: 999;\n    &::backdrop {\n      display: none;\n    }\n    &.tw\\:modal-open, &[open], &:target {\n      background-color: oklch(0% 0 0/ 0.4);\n      transition: transform 0.3s ease-out, background-color 0.3s ease-out, opacity 0.1s ease-out;\n      pointer-events: auto;\n      visibility: visible;\n      opacity: 100%;\n      .tw\\:modal-box {\n        translate: 0 0;\n        scale: 1;\n        opacity: 1;\n      }\n    }\n    @starting-style {\n      &.tw\\:modal-open, &[open], &:target {\n        visibility: hidden;\n        opacity: 0%;\n      }\n    }\n  }\n  .tw\\:tooltip {\n    position: relative;\n    display: inline-block;\n    --tt-bg: var(--color-neutral);\n    --tt-off: calc(100% + 0.5rem);\n    --tt-tail: calc(100% + 1px + 0.25rem);\n    > :where(.tw\\:tooltip-content), &[data-tip]:before {\n      position: absolute;\n      max-width: 20rem;\n      border-radius: var(--radius-field);\n      padding-inline: calc(0.25rem * 2);\n      padding-block: calc(0.25rem * 1);\n      text-align: center;\n      white-space: normal;\n      color: var(--color-neutral-content);\n      opacity: 0%;\n      font-size: 0.875rem;\n      line-height: 1.25em;\n      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n      background-color: var(--tt-bg);\n      width: max-content;\n      pointer-events: none;\n      z-index: 1;\n      --tw-content: attr(data-tip);\n      content: var(--tw-content);\n    }\n    &:after {\n      position: absolute;\n      position: absolute;\n      opacity: 0%;\n      background-color: var(--tt-bg);\n      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n      content: \"\";\n      pointer-events: none;\n      width: 0.625rem;\n      height: 0.25rem;\n      display: block;\n      mask-repeat: no-repeat;\n      mask-position: -1px 0;\n      --mask-tooltip: url(\"data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A\");\n      mask-image: var(--mask-tooltip);\n    }\n    &.tw\\:tooltip-open, &[data-tip]:hover, &:hover, &:has(:focus-visible) {\n      > .tw\\:tooltip-content, &[data-tip]:before, &:after {\n        opacity: 100%;\n        --tt-pos: 0rem;\n        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n      }\n    }\n    > .tw\\:tooltip-content, &[data-tip]:before {\n      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n      inset: auto auto var(--tt-off) 50%;\n    }\n    &:after {\n      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n      inset: auto auto var(--tt-tail) 50%;\n    }\n  }\n  .tw\\:tab {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n    appearance: none;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    webkit-user-select: none;\n    user-select: none;\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-base-content);\n      }\n    }\n    --tab-p: 1rem;\n    --tab-bg: var(--color-base-100);\n    --tab-border-color: var(--color-base-300);\n    --tab-radius-ss: 0;\n    --tab-radius-se: 0;\n    --tab-radius-es: 0;\n    --tab-radius-ee: 0;\n    --tab-order: 0;\n    --tab-radius-min: calc(0.75rem - var(--border));\n    border-color: #0000;\n    order: var(--tab-order);\n    height: calc(var(--size-field, 0.25rem) * 10);\n    font-size: 0.875rem;\n    padding-inline-start: var(--tab-p);\n    padding-inline-end: var(--tab-p);\n    &:is(input[type=\"radio\"]) {\n      min-width: fit-content;\n      &:after {\n        content: attr(aria-label);\n      }\n    }\n    &:is(label) {\n      position: relative;\n      input {\n        position: absolute;\n        inset: calc(0.25rem * 0);\n        cursor: pointer;\n        appearance: none;\n        opacity: 0%;\n      }\n    }\n    &:checked, &:is(label:has(:checked)), &:is(.tw\\:tab-active, [aria-selected=\"true\"]) {\n      & + .tw\\:tab-content {\n        display: block;\n        height: 100%;\n      }\n    }\n    &:not(:checked, label:has(:checked), :hover, .tw\\:tab-active, [aria-selected=\"true\"]) {\n      color: color-mix(in oklab, var(--color-base-content) 50%, transparent);\n    }\n    &:not(input):empty {\n      flex-grow: 1;\n      cursor: default;\n    }\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n    &:focus-visible, &:is(label:has(:checked:focus-visible)) {\n      outline: 2px solid currentColor;\n      outline-offset: -5px;\n    }\n    &[disabled] {\n      pointer-events: none;\n      opacity: 40%;\n    }\n  }\n  .tw\\:menu {\n    display: flex;\n    width: fit-content;\n    flex-direction: column;\n    flex-wrap: wrap;\n    padding: calc(0.25rem * 2);\n    --menu-active-fg: var(--color-neutral-content);\n    --menu-active-bg: var(--color-neutral);\n    font-size: 0.875rem;\n    :where(li ul) {\n      position: relative;\n      margin-inline-start: calc(0.25rem * 4);\n      padding-inline-start: calc(0.25rem * 2);\n      white-space: nowrap;\n      &:before {\n        position: absolute;\n        inset-inline-start: calc(0.25rem * 0);\n        top: calc(0.25rem * 3);\n        bottom: calc(0.25rem * 3);\n        background-color: var(--color-base-content);\n        opacity: 10%;\n        width: var(--border);\n        content: \"\";\n      }\n    }\n    :where(li > .tw\\:menu-dropdown:not(.tw\\:menu-dropdown-show)) {\n      display: none;\n    }\n    :where(li:not(.tw\\:menu-title) > *:not(ul, details, .tw\\:menu-title, .tw\\:btn)), :where(li:not(.tw\\:menu-title) > details > summary:not(.tw\\:menu-title)) {\n      display: grid;\n      grid-auto-flow: column;\n      align-content: flex-start;\n      align-items: center;\n      gap: calc(0.25rem * 2);\n      border-radius: var(--radius-field);\n      padding-inline: calc(0.25rem * 3);\n      padding-block: calc(0.25rem * 1.5);\n      text-align: start;\n      transition-property: color, background-color, box-shadow;\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n      grid-auto-columns: minmax(auto, max-content) auto max-content;\n      text-wrap: balance;\n      user-select: none;\n    }\n    :where(li > details > summary) {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n      &::-webkit-details-marker {\n        display: none;\n      }\n    }\n    :where(li > details > summary), :where(li > .tw\\:menu-dropdown-toggle) {\n      &:after {\n        justify-self: flex-end;\n        display: block;\n        height: 0.375rem;\n        width: 0.375rem;\n        rotate: -135deg;\n        translate: 0 -1px;\n        transition-property: rotate, translate;\n        transition-duration: 0.2s;\n        content: \"\";\n        transform-origin: 50% 50%;\n        box-shadow: 2px 2px inset;\n        pointer-events: none;\n      }\n    }\n    :where(li > details[open] > summary):after, :where(li > .tw\\:menu-dropdown-toggle.tw\\:menu-dropdown-show):after {\n      rotate: 45deg;\n      translate: 0 1px;\n    }\n    :where( li:not(.tw\\:menu-title, .tw\\:disabled) > *:not(ul, details, .tw\\:menu-title), li:not(.tw\\:menu-title, .tw\\:disabled) > details > summary:not(.tw\\:menu-title) ):not(.tw\\:menu-active, :active, .tw\\:btn) {\n      &.tw\\:menu-focus, &:focus-visible {\n        cursor: pointer;\n        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);\n        color: var(--color-base-content);\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n      }\n    }\n    :where( li:not(.tw\\:menu-title, .tw\\:disabled) > *:not(ul, details, .tw\\:menu-title):not(.tw\\:menu-active, :active, .tw\\:btn):hover, li:not(.tw\\:menu-title, .tw\\:disabled) > details > summary:not(.tw\\:menu-title):not(.tw\\:menu-active, :active, .tw\\:btn):hover ) {\n      cursor: pointer;\n      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n      box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset;\n    }\n    :where(li:empty) {\n      background-color: var(--color-base-content);\n      opacity: 10%;\n      margin: 0.5rem 1rem;\n      height: 1px;\n    }\n    :where(li) {\n      position: relative;\n      display: flex;\n      flex-shrink: 0;\n      flex-direction: column;\n      flex-wrap: wrap;\n      align-items: stretch;\n      .tw\\:badge {\n        justify-self: flex-end;\n      }\n      & > *:not(ul, .tw\\:menu-title, details, .tw\\:btn):active, & > *:not(ul, .tw\\:menu-title, details, .tw\\:btn).tw\\:menu-active, & > details > summary:active {\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n        color: var(--menu-active-fg);\n        background-color: var(--menu-active-bg);\n        background-size: auto, calc(var(--noise) * 100%);\n        background-image: none, var(--fx-noise);\n        &:not(&:active) {\n          box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg);\n        }\n      }\n      &.tw\\:menu-disabled {\n        pointer-events: none;\n        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);\n      }\n    }\n    .tw\\:dropdown:focus-within {\n      .tw\\:menu-dropdown-toggle:after {\n        rotate: 45deg;\n        translate: 0 1px;\n      }\n    }\n    .tw\\:dropdown-content {\n      margin-top: calc(0.25rem * 2);\n      padding: calc(0.25rem * 2);\n      &:before {\n        display: none;\n      }\n    }\n  }\n  .tw\\:dropdown {\n    position: relative;\n    display: inline-block;\n    position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);\n    & > *:not(summary):focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n    .tw\\:dropdown-content {\n      position: absolute;\n    }\n    &:not(details, .tw\\:dropdown-open, .tw\\:dropdown-hover:hover, :focus-within) {\n      .tw\\:dropdown-content {\n        display: none;\n        transform-origin: top;\n        opacity: 0%;\n        scale: 95%;\n      }\n    }\n    &[popover], .tw\\:dropdown-content {\n      z-index: 999;\n      animation: dropdown 0.2s;\n      transition-property: opacity, scale, display;\n      transition-behavior: allow-discrete;\n      transition-duration: 0.2s;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    }\n    @starting-style {\n      &[popover], .tw\\:dropdown-content {\n        scale: 95%;\n        opacity: 0;\n      }\n    }\n    &.tw\\:dropdown-open, &:not(.tw\\:dropdown-hover):focus, &:focus-within {\n      > [tabindex]:first-child {\n        pointer-events: none;\n      }\n      .tw\\:dropdown-content {\n        opacity: 100%;\n      }\n    }\n    &.tw\\:dropdown-hover:hover {\n      .tw\\:dropdown-content {\n        opacity: 100%;\n        scale: 100%;\n      }\n    }\n    &:is(details) {\n      summary {\n        &::-webkit-details-marker {\n          display: none;\n        }\n      }\n    }\n    &.tw\\:dropdown-open, &:focus, &:focus-within {\n      .tw\\:dropdown-content {\n        scale: 100%;\n      }\n    }\n    &:where([popover]) {\n      background: #0000;\n    }\n    &[popover] {\n      position: fixed;\n      color: inherit;\n      @supports not (position-area: bottom) {\n        margin: auto;\n        &.tw\\:dropdown-open:not(:popover-open) {\n          display: none;\n          transform-origin: top;\n          opacity: 0%;\n          scale: 95%;\n        }\n        &::backdrop {\n          background-color: color-mix(in oklab, #000 30%, #0000);\n        }\n      }\n      &:not(.tw\\:dropdown-open, :popover-open) {\n        display: none;\n        transform-origin: top;\n        opacity: 0%;\n        scale: 95%;\n      }\n    }\n  }\n  .tw\\:btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    cursor: pointer;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 1.5);\n    text-align: center;\n    vertical-align: middle;\n    outline-offset: 2px;\n    webkit-user-select: none;\n    user-select: none;\n    padding-inline: var(--btn-p);\n    color: var(--btn-fg);\n    --tw-prose-links: var(--btn-fg);\n    height: var(--size);\n    font-size: var(--fontsize, 0.875rem);\n    font-weight: 600;\n    outline-color: var(--btn-color, var(--color-base-content));\n    transition-property: color, background-color, border-color, box-shadow;\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    transition-duration: 0.2s;\n    border-start-start-radius: var(--join-ss, var(--radius-field));\n    border-start-end-radius: var(--join-se, var(--radius-field));\n    border-end-start-radius: var(--join-es, var(--radius-field));\n    border-end-end-radius: var(--join-ee, var(--radius-field));\n    background-color: var(--btn-bg);\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--btn-noise);\n    border-width: var(--border);\n    border-style: solid;\n    border-color: var(--btn-border);\n    text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15));\n    box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);\n    --size: calc(var(--size-field, 0.25rem) * 10);\n    --btn-bg: var(--btn-color, var(--color-base-200));\n    --btn-fg: var(--color-base-content);\n    --btn-p: 1rem;\n    --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%));\n    --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000),\n    0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000);\n    --btn-noise: var(--fx-noise);\n    .tw\\:prose & {\n      text-decoration-line: none;\n    }\n    @media (hover: hover) {\n      &:hover {\n        --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);\n      }\n    }\n    &:focus-visible {\n      outline-width: 2px;\n      outline-style: solid;\n    }\n    &:active:not(.tw\\:btn-active) {\n      translate: 0 0.5px;\n      --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%);\n      --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);\n      --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);\n    }\n    &:is(:disabled, [disabled], .tw\\:btn-disabled) {\n      &:not(.tw\\:btn-link, .tw\\:btn-ghost) {\n        background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);\n        box-shadow: none;\n      }\n      pointer-events: none;\n      --btn-border: #0000;\n      --btn-noise: none;\n      --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n      @media (hover: hover) {\n        &:hover {\n          pointer-events: none;\n          background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent);\n          --btn-border: #0000;\n          --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n        }\n      }\n    }\n    &:is(input[type=\"checkbox\"], input[type=\"radio\"]) {\n      appearance: none;\n      &::after {\n        content: attr(aria-label);\n      }\n    }\n    &:where(input:checked:not(.tw\\:filter .tw\\:btn)) {\n      --btn-color: var(--color-primary);\n      --btn-fg: var(--color-primary-content);\n      isolation: isolate;\n    }\n  }\n  .tw\\:loading {\n    pointer-events: none;\n    display: inline-block;\n    aspect-ratio: 1 / 1;\n    background-color: currentColor;\n    vertical-align: middle;\n    width: calc(var(--size-selector, 0.25rem) * 6);\n    mask-size: 100%;\n    mask-repeat: no-repeat;\n    mask-position: center;\n    mask-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E\");\n  }\n  .tw\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .tw\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .tw\\:tabs-lift {\n    --tabs-height: auto;\n    --tabs-direction: row;\n    > .tw\\:tab {\n      --tab-border: 0 0 var(--border) 0;\n      --tab-radius-ss: min(var(--radius-field), var(--tab-radius-min));\n      --tab-radius-se: min(var(--radius-field), var(--tab-radius-min));\n      --tab-radius-es: 0;\n      --tab-radius-ee: 0;\n      --tab-paddings: var(--border) var(--tab-p) 0 var(--tab-p);\n      --tab-border-colors: #0000 #0000 var(--tab-border-color) #0000;\n      --tab-corner-width: calc(100% + min(var(--radius-field), var(--tab-radius-min)) * 2);\n      --tab-corner-height: min(var(--radius-field), var(--tab-radius-min));\n      --tab-corner-position: top left, top right;\n      border-width: var(--tab-border);\n      border-start-start-radius: var(--tab-radius-ss);\n      border-start-end-radius: var(--tab-radius-se);\n      border-end-start-radius: var(--tab-radius-es);\n      border-end-end-radius: var(--tab-radius-ee);\n      padding: var(--tab-paddings);\n      border-color: var(--tab-border-colors);\n      &:is(.tw\\:tab-active, [aria-selected=\"true\"]):not(.tw\\:tab-disabled, [disabled]), &:is(input:checked, label:has(:checked)) {\n        --tab-border: var(--border) var(--border) 0 var(--border);\n        --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000\n        var(--tab-border-color);\n        --tab-paddings: 0 calc(var(--tab-p) - var(--border)) var(--border)\n        calc(var(--tab-p) - var(--border));\n        --tab-inset: auto auto 0 auto;\n        --tab-grad: calc(69% - var(--border));\n        --radius-start: radial-gradient(\n        circle at top left,\n        #0000 var(--tab-grad),\n        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),\n        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),\n        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)\n      );\n        --radius-end: radial-gradient(\n        circle at top right,\n        #0000 var(--tab-grad),\n        var(--tab-border-color) calc(var(--tab-grad) + 0.25px),\n        var(--tab-border-color) calc(var(--tab-grad) + var(--border)),\n        var(--tab-bg) calc(var(--tab-grad) + var(--border) + 0.25px)\n      );\n        background-color: var(--tab-bg);\n        &:before {\n          z-index: 1;\n          content: \"\";\n          display: block;\n          position: absolute;\n          width: var(--tab-corner-width);\n          height: var(--tab-corner-height);\n          background-position: var(--tab-corner-position);\n          background-image: var(--radius-start), var(--radius-end);\n          background-size: min(var(--radius-field), var(--tab-radius-min)) min(var(--radius-field), var(--tab-radius-min));\n          background-repeat: no-repeat;\n          inset: var(--tab-inset);\n        }\n        &:first-child:before {\n          --radius-start: none;\n        }\n        [dir=\"rtl\"] &:first-child:before {\n          transform: rotateY(180deg);\n        }\n        &:last-child:before {\n          --radius-end: none;\n        }\n        [dir=\"rtl\"] &:last-child:before {\n          transform: rotateY(180deg);\n        }\n      }\n    }\n    &:has(.tw\\:tab-content) {\n      > .tw\\:tab:first-child {\n        &:not(.tw\\:tab-active, [aria-selected=\"true\"]) {\n          --tab-border-colors: var(--tab-border-color) var(--tab-border-color) #0000\n          var(--tab-border-color);\n        }\n      }\n    }\n    .tw\\:tab-content {\n      --tabcontent-margin: calc(-1 * var(--border)) 0 0 0;\n      --tabcontent-radius-ss: 0;\n      --tabcontent-radius-se: var(--radius-box);\n      --tabcontent-radius-es: var(--radius-box);\n      --tabcontent-radius-ee: var(--radius-box);\n    }\n    :checked, label:has(:checked), :is(.tw\\:tab-active, [aria-selected=\"true\"]) {\n      & + .tw\\:tab-content {\n        &:nth-child(1), &:nth-child(n + 3) {\n          --tabcontent-radius-ss: var(--radius-box);\n        }\n      }\n    }\n  }\n  .tw\\:input {\n    cursor: text;\n    border: var(--border) solid #0000;\n    position: relative;\n    display: inline-flex;\n    flex-shrink: 1;\n    appearance: none;\n    align-items: center;\n    gap: calc(0.25rem * 2);\n    background-color: var(--color-base-100);\n    padding-inline: calc(0.25rem * 3);\n    vertical-align: middle;\n    white-space: nowrap;\n    width: clamp(3rem, 20rem, 100%);\n    height: var(--size);\n    font-size: 0.875rem;\n    border-start-start-radius: var(--join-ss, var(--radius-field));\n    border-start-end-radius: var(--join-se, var(--radius-field));\n    border-end-start-radius: var(--join-es, var(--radius-field));\n    border-end-end-radius: var(--join-ee, var(--radius-field));\n    border-color: var(--input-color);\n    box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;\n    --size: calc(var(--size-field, 0.25rem) * 10);\n    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);\n    &:where(input) {\n      display: inline-flex;\n    }\n    :where(input) {\n      display: inline-flex;\n      height: 100%;\n      width: 100%;\n      appearance: none;\n      background-color: transparent;\n      border: none;\n      &:focus, &:focus-within {\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n      }\n    }\n    &:focus, &:focus-within {\n      --input-color: var(--color-base-content);\n      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);\n      outline: 2px solid var(--input-color);\n      outline-offset: 2px;\n      isolation: isolate;\n    }\n    &:has(> input[disabled]), &:is(:disabled, [disabled]) {\n      cursor: not-allowed;\n      border-color: var(--color-base-200);\n      background-color: var(--color-base-200);\n      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);\n      &::placeholder {\n        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);\n      }\n      box-shadow: none;\n    }\n    &:has(> input[disabled]) > input[disabled] {\n      cursor: not-allowed;\n    }\n    &::-webkit-date-and-time-value {\n      text-align: inherit;\n    }\n    &[type=\"number\"] {\n      &::-webkit-inner-spin-button {\n        margin-block: calc(0.25rem * -3);\n        margin-inline-end: calc(0.25rem * -3);\n      }\n    }\n    &::-webkit-calendar-picker-indicator {\n      position: absolute;\n      inset-inline-end: 0.75em;\n    }\n  }\n  .tw\\:indicator {\n    position: relative;\n    display: inline-flex;\n    width: max-content;\n    :where(.tw\\:indicator-item) {\n      z-index: 1;\n      position: absolute;\n      white-space: nowrap;\n      top: var(--inidicator-t, 0);\n      bottom: var(--inidicator-b, auto);\n      left: var(--inidicator-s, auto);\n      right: var(--inidicator-e, 0);\n      translate: var(--inidicator-x, 50%) var(--indicator-y, -50%);\n    }\n  }\n  .tw\\:table {\n    font-size: 0.875rem;\n    position: relative;\n    width: 100%;\n    border-radius: var(--radius-box);\n    text-align: left;\n    &:where(:dir(rtl), [dir=\"rtl\"], [dir=\"rtl\"] *) {\n      text-align: right;\n    }\n    tr.tw\\:row-hover {\n      &, &:nth-child(even) {\n        &:hover {\n          @media (hover: hover) {\n            background-color: var(--color-base-200);\n          }\n        }\n      }\n    }\n    :where(th, td) {\n      padding-inline: calc(0.25rem * 4);\n      padding-block: calc(0.25rem * 3);\n      vertical-align: middle;\n    }\n    :where(thead, tfoot) {\n      white-space: nowrap;\n      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n      font-size: 0.875rem;\n      font-weight: 600;\n    }\n    :where(tfoot) {\n      border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);\n    }\n    :where(.tw\\:table-pin-rows thead tr) {\n      position: sticky;\n      top: calc(0.25rem * 0);\n      z-index: 1;\n      background-color: var(--color-base-100);\n    }\n    :where(.tw\\:table-pin-rows tfoot tr) {\n      position: sticky;\n      bottom: calc(0.25rem * 0);\n      z-index: 1;\n      background-color: var(--color-base-100);\n    }\n    :where(.tw\\:table-pin-cols tr th) {\n      position: sticky;\n      right: calc(0.25rem * 0);\n      left: calc(0.25rem * 0);\n      background-color: var(--color-base-100);\n    }\n    :where(thead tr, tbody tr:not(:last-child)) {\n      border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000);\n    }\n  }\n  .tw\\:card {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border-radius: var(--radius-box);\n    outline-width: 2px;\n    transition: outline 0.2s ease-in-out;\n    outline: 0 solid #0000;\n    outline-offset: 2px;\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n    &:focus-visible {\n      outline-color: currentColor;\n    }\n    :where(figure:first-child) {\n      overflow: hidden;\n      border-start-start-radius: inherit;\n      border-start-end-radius: inherit;\n      border-end-start-radius: unset;\n      border-end-end-radius: unset;\n    }\n    :where(figure:last-child) {\n      overflow: hidden;\n      border-start-start-radius: unset;\n      border-start-end-radius: unset;\n      border-end-start-radius: inherit;\n      border-end-end-radius: inherit;\n    }\n    &:where(.tw\\:card-border) {\n      border: var(--border) solid var(--color-base-200);\n    }\n    &:where(.tw\\:card-dash) {\n      border: var(--border) dashed var(--color-base-200);\n    }\n    &.tw\\:image-full {\n      display: grid;\n      &:before {\n        position: relative;\n        grid-column-start: 1;\n        grid-row-start: 1;\n        border-radius: var(--radius-box);\n        background-color: var(--color-neutral);\n        opacity: 75%;\n        content: \"\";\n      }\n      > * {\n        grid-column-start: 1;\n        grid-row-start: 1;\n      }\n      > .tw\\:card-body {\n        position: relative;\n        color: var(--color-neutral-content);\n      }\n      :where(figure) {\n        overflow: hidden;\n        border-radius: inherit;\n      }\n      > figure img {\n        height: 100%;\n        object-fit: cover;\n      }\n    }\n    figure {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    &:has(> input:is(input[type=\"checkbox\"], input[type=\"radio\"])) {\n      cursor: pointer;\n      user-select: none;\n    }\n    &:has(> :checked) {\n      outline: 2px solid currentColor;\n    }\n  }\n  .tw\\:select {\n    border: var(--border) solid #0000;\n    position: relative;\n    display: inline-flex;\n    flex-shrink: 1;\n    appearance: none;\n    align-items: center;\n    gap: calc(0.25rem * 1.5);\n    background-color: var(--color-base-100);\n    padding-inline-start: calc(0.25rem * 4);\n    padding-inline-end: calc(0.25rem * 7);\n    vertical-align: middle;\n    width: clamp(3rem, 20rem, 100%);\n    height: var(--size);\n    font-size: 0.875rem;\n    border-start-start-radius: var(--join-ss, var(--radius-field));\n    border-start-end-radius: var(--join-se, var(--radius-field));\n    border-end-start-radius: var(--join-es, var(--radius-field));\n    border-end-end-radius: var(--join-ee, var(--radius-field));\n    background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);\n    background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);\n    background-size: 4px 4px, 4px 4px;\n    background-repeat: no-repeat;\n    text-overflow: ellipsis;\n    box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;\n    border-color: var(--input-color);\n    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);\n    --size: calc(var(--size-field, 0.25rem) * 10);\n    [dir=\"rtl\"] & {\n      background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);\n    }\n    select {\n      margin-inline-start: calc(0.25rem * -4);\n      margin-inline-end: calc(0.25rem * -7);\n      width: calc(100% + 2.75rem);\n      appearance: none;\n      padding-inline-start: calc(0.25rem * 4);\n      padding-inline-end: calc(0.25rem * 7);\n      height: calc(100% - 2px);\n      background: inherit;\n      border-radius: inherit;\n      border-style: none;\n      &:focus, &:focus-within {\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n      }\n      &:not(:last-child) {\n        margin-inline-end: calc(0.25rem * -5.5);\n        background-image: none;\n      }\n    }\n    &:focus, &:focus-within {\n      --input-color: var(--color-base-content);\n      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);\n      outline: 2px solid var(--input-color);\n      outline-offset: 2px;\n    }\n    &:has(> select[disabled]), &:is(:disabled, [disabled]) {\n      cursor: not-allowed;\n      border-color: var(--color-base-200);\n      background-color: var(--color-base-200);\n      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);\n      &::placeholder {\n        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);\n      }\n    }\n    &:has(> select[disabled]) > select[disabled] {\n      cursor: not-allowed;\n    }\n  }\n  .tw\\:menu-horizontal {\n    display: inline-flex;\n    flex-direction: row;\n    & > li:not(.tw\\:menu-title) > details > ul {\n      position: absolute;\n      margin-inline-start: calc(0.25rem * 0);\n      margin-top: calc(0.25rem * 4);\n      padding-block: calc(0.25rem * 2);\n      padding-inline-end: calc(0.25rem * 2);\n    }\n    & > li > details > ul {\n      &:before {\n        content: none;\n      }\n    }\n    :where(& > li:not(.tw\\:menu-title) > details > ul) {\n      border-radius: var(--radius-box);\n      background-color: var(--color-base-100);\n      box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1);\n    }\n  }\n  .tw\\:avatar {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    & > div {\n      display: block;\n      aspect-ratio: 1 / 1;\n      overflow: hidden;\n    }\n    img {\n      height: 100%;\n      width: 100%;\n      object-fit: cover;\n    }\n  }\n  .tw\\:checkbox {\n    border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));\n    position: relative;\n    flex-shrink: 0;\n    cursor: pointer;\n    appearance: none;\n    border-radius: var(--radius-selector);\n    padding: calc(0.25rem * 1);\n    vertical-align: middle;\n    color: var(--color-base-content);\n    box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000;\n    transition: background-color 0.2s, box-shadow 0.2s;\n    --size: calc(var(--size-selector, 0.25rem) * 6);\n    width: var(--size);\n    height: var(--size);\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--fx-noise);\n    &:before {\n      --tw-content: \"\";\n      content: var(--tw-content);\n      display: block;\n      width: 100%;\n      height: 100%;\n      rotate: 45deg;\n      background-color: currentColor;\n      opacity: 0%;\n      transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s;\n      transition-delay: 0.1s;\n      clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);\n      box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;\n      font-size: 1rem;\n      line-height: 0.75;\n    }\n    &:focus-visible {\n      outline: 2px solid var(--input-color, currentColor);\n      outline-offset: 2px;\n    }\n    &:checked, &[aria-checked=\"true\"] {\n      background-color: var(--input-color, #0000);\n      box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));\n      &:before {\n        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);\n        opacity: 100%;\n      }\n      @media (forced-colors: active) {\n        &:before {\n          rotate: 0deg;\n          background-color: transparent;\n          --tw-content: \"✔︎\";\n          clip-path: none;\n        }\n      }\n      @media print {\n        &:before {\n          rotate: 0deg;\n          background-color: transparent;\n          --tw-content: \"✔︎\";\n          clip-path: none;\n        }\n      }\n    }\n    &:indeterminate {\n      &:before {\n        rotate: 0deg;\n        opacity: 100%;\n        translate: 0 -35%;\n        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);\n      }\n    }\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 20%;\n    }\n  }\n  .tw\\:stats {\n    position: relative;\n    display: inline-grid;\n    grid-auto-flow: column;\n    overflow-x: auto;\n    border-radius: var(--radius-box);\n  }\n  .tw\\:absolute {\n    position: absolute;\n  }\n  .tw\\:fixed {\n    position: fixed;\n  }\n  .tw\\:relative {\n    position: relative;\n  }\n  .tw\\:tooltip-left {\n    > .tw\\:tooltip-content, &[data-tip]:before {\n      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);\n      inset: 50% var(--tt-off) auto auto;\n    }\n    &:after {\n      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);\n      inset: 50% calc(var(--tt-tail) + 1px) auto auto;\n    }\n  }\n  .tw\\:tooltip-right {\n    > .tw\\:tooltip-content, &[data-tip]:before {\n      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);\n      inset: 50% auto auto var(--tt-off);\n    }\n    &:after {\n      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);\n      inset: 50% auto auto calc(var(--tt-tail) + 1px);\n    }\n  }\n  .tw\\:inset-0 {\n    inset: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:inset-y-0 {\n    inset-block: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:dropdown-end {\n    --anchor-h: span-left;\n    :where(.tw\\:dropdown-content) {\n      inset-inline-end: calc(0.25rem * 0);\n      translate: 0 0;\n    }\n    &.tw\\:dropdown-left {\n      --anchor-h: left;\n      --anchor-v: span-top;\n      .tw\\:dropdown-content {\n        top: auto;\n        bottom: calc(0.25rem * 0);\n      }\n    }\n    &.tw\\:dropdown-right {\n      --anchor-h: right;\n      --anchor-v: span-top;\n      .tw\\:dropdown-content {\n        top: auto;\n        bottom: calc(0.25rem * 0);\n      }\n    }\n  }\n  .tw\\:dropdown-bottom {\n    --anchor-v: bottom;\n    .tw\\:dropdown-content {\n      top: 100%;\n      bottom: auto;\n      transform-origin: top;\n    }\n  }\n  .tw\\:dropdown-top {\n    --anchor-v: top;\n    .tw\\:dropdown-content {\n      top: auto;\n      bottom: 100%;\n      transform-origin: bottom;\n    }\n  }\n  .tw\\:-top-2 {\n    top: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:top-0 {\n    top: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:top-1 {\n    top: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:top-2 {\n    top: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:top-4 {\n    top: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:top-14 {\n    top: calc(var(--tw-spacing) * 14);\n  }\n  .tw\\:-right-2 {\n    right: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:right-0 {\n    right: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:right-1 {\n    right: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:right-2 {\n    right: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:right-4 {\n    right: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:right-5 {\n    right: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:right-6 {\n    right: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:bottom-0 {\n    bottom: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:bottom-4 {\n    bottom: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:bottom-24\\! {\n    bottom: calc(var(--tw-spacing) * 24) !important;\n  }\n  .tw\\:-left-6 {\n    left: calc(var(--tw-spacing) * -6);\n  }\n  .tw\\:left-0 {\n    left: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:left-0\\! {\n    left: calc(var(--tw-spacing) * 0) !important;\n  }\n  .tw\\:left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .tw\\:left-4 {\n    left: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:left-auto\\! {\n    left: auto !important;\n  }\n  .tw\\:file-input {\n    cursor: pointer;\n    cursor: pointer;\n    border: var(--border) solid #0000;\n    display: inline-flex;\n    appearance: none;\n    align-items: center;\n    background-color: var(--color-base-100);\n    vertical-align: middle;\n    webkit-user-select: none;\n    user-select: none;\n    width: clamp(3rem, 20rem, 100%);\n    height: var(--size);\n    padding-inline-end: 0.75rem;\n    font-size: 0.875rem;\n    line-height: 2;\n    border-start-start-radius: var(--join-ss, var(--radius-field));\n    border-start-end-radius: var(--join-se, var(--radius-field));\n    border-end-start-radius: var(--join-es, var(--radius-field));\n    border-end-end-radius: var(--join-ee, var(--radius-field));\n    border-color: var(--input-color);\n    box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;\n    --size: calc(var(--size-field, 0.25rem) * 10);\n    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);\n    &::file-selector-button {\n      margin-inline-end: calc(0.25rem * 4);\n      cursor: pointer;\n      padding-inline: calc(0.25rem * 4);\n      webkit-user-select: none;\n      user-select: none;\n      height: calc(100% + var(--border) * 2);\n      margin-block: calc(var(--border) * -1);\n      margin-inline-start: calc(var(--border) * -1);\n      font-size: 0.875rem;\n      color: var(--btn-fg);\n      border-width: var(--border);\n      border-style: solid;\n      border-color: var(--btn-border);\n      border-start-start-radius: calc(var(--join-ss, var(--radius-field) - var(--border)));\n      border-end-start-radius: calc(var(--join-es, var(--radius-field) - var(--border)));\n      font-weight: 600;\n      background-color: var(--btn-bg);\n      background-size: calc(var(--noise) * 100%);\n      background-image: var(--btn-noise);\n      text-shadow: 0 0.5px oklch(1 0 0 / calc(var(--depth) * 0.15));\n      box-shadow: 0 0.5px 0 0.5px color-mix( in oklab, color-mix(in oklab, white 30%, var(--btn-bg)) calc(var(--depth) * 20%), #0000 ) inset, var(--btn-shadow);\n      --size: calc(var(--size-field, 0.25rem) * 10);\n      --btn-bg: var(--btn-color, var(--color-base-200));\n      --btn-fg: var(--color-base-content);\n      --btn-border: color-mix(in oklab, var(--btn-bg), #000 5%);\n      --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000),\n      0 4px 3px -2px color-mix(in oklab, var(--btn-bg) 30%, #0000);\n      --btn-noise: var(--fx-noise);\n    }\n    &:focus {\n      --input-color: var(--color-base-content);\n      box-shadow: 0 1px color-mix(in oklab, var(--input-color) 10%, #0000);\n      outline: 2px solid var(--input-color);\n      outline-offset: 2px;\n      isolation: isolate;\n    }\n    &:has(> input[disabled]), &:is(:disabled, [disabled]) {\n      cursor: not-allowed;\n      border-color: var(--color-base-200);\n      background-color: var(--color-base-200);\n      &::placeholder {\n        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);\n      }\n      box-shadow: none;\n      color: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n      &::file-selector-button {\n        cursor: not-allowed;\n        border-color: var(--color-base-200);\n        background-color: var(--color-base-200);\n        --btn-border: #0000;\n        --btn-noise: none;\n        --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000);\n      }\n    }\n  }\n  .tw\\:textarea {\n    border: var(--border) solid #0000;\n    min-height: calc(0.25rem * 20);\n    flex-shrink: 1;\n    appearance: none;\n    border-radius: var(--radius-field);\n    background-color: var(--color-base-100);\n    padding-block: calc(0.25rem * 2);\n    vertical-align: middle;\n    width: clamp(3rem, 20rem, 100%);\n    padding-inline-start: 0.75rem;\n    padding-inline-end: 0.75rem;\n    font-size: 0.875rem;\n    border-color: var(--input-color);\n    box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;\n    --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);\n    textarea {\n      appearance: none;\n      background-color: transparent;\n      border: none;\n      &:focus, &:focus-within {\n        --tw-outline-style: none;\n        outline-style: none;\n        @media (forced-colors: active) {\n          outline: 2px solid transparent;\n          outline-offset: 2px;\n        }\n      }\n    }\n    &:focus, &:focus-within {\n      --input-color: var(--color-base-content);\n      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);\n      outline: 2px solid var(--input-color);\n      outline-offset: 2px;\n      isolation: isolate;\n    }\n    &:has(> textarea[disabled]), &:is(:disabled, [disabled]) {\n      cursor: not-allowed;\n      border-color: var(--color-base-200);\n      background-color: var(--color-base-200);\n      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);\n      &::placeholder {\n        color: color-mix(in oklab, var(--color-base-content) 20%, transparent);\n      }\n      box-shadow: none;\n    }\n    &:has(> textarea[disabled]) > textarea[disabled] {\n      cursor: not-allowed;\n    }\n  }\n  .tw\\:modal-backdrop {\n    grid-column-start: 1;\n    grid-row-start: 1;\n    display: grid;\n    align-self: stretch;\n    justify-self: stretch;\n    color: transparent;\n    z-index: -1;\n    button {\n      cursor: pointer;\n    }\n  }\n  .tw\\:z-1 {\n    z-index: 1;\n  }\n  .tw\\:z-500 {\n    z-index: var(--tw-z-index-500);\n  }\n  .tw\\:z-999 {\n    z-index: 999;\n  }\n  .tw\\:z-1000 {\n    z-index: var(--tw-z-index-1000);\n  }\n  .tw\\:z-2000 {\n    z-index: var(--tw-z-index-2000);\n  }\n  .tw\\:z-3000 {\n    z-index: var(--tw-z-index-3000);\n  }\n  .tw\\:z-4000 {\n    z-index: 4000;\n  }\n  .tw\\:z-9998 {\n    z-index: 9998;\n  }\n  .tw\\:z-10000 {\n    z-index: 10000;\n  }\n  .tw\\:z-10000\\! {\n    z-index: 10000 !important;\n  }\n  .tw\\:z-10035 {\n    z-index: 10035;\n  }\n  .tw\\:tab-content {\n    order: var(--tabcontent-order);\n    display: none;\n    border-color: transparent;\n    --tabcontent-radius-ss: 0;\n    --tabcontent-radius-se: 0;\n    --tabcontent-radius-es: 0;\n    --tabcontent-radius-ee: 0;\n    --tabcontent-order: 1;\n    width: 100%;\n    margin: var(--tabcontent-margin);\n    border-width: var(--border);\n    border-start-start-radius: var(--tabcontent-radius-ss);\n    border-start-end-radius: var(--tabcontent-radius-se);\n    border-end-start-radius: var(--tabcontent-radius-es);\n    border-end-end-radius: var(--tabcontent-radius-ee);\n  }\n  .tw\\:col-span-1 {\n    grid-column: span 1 / span 1;\n  }\n  .tw\\:modal-box {\n    grid-column-start: 1;\n    grid-row-start: 1;\n    max-height: 100vh;\n    width: calc(11/12 * 100%);\n    max-width: 32rem;\n    background-color: var(--color-base-100);\n    padding: calc(0.25rem * 6);\n    transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out;\n    border-top-left-radius: var(--modal-tl, var(--radius-box));\n    border-top-right-radius: var(--modal-tr, var(--radius-box));\n    border-bottom-left-radius: var(--modal-bl, var(--radius-box));\n    border-bottom-right-radius: var(--modal-br, var(--radius-box));\n    scale: 95%;\n    opacity: 0;\n    box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n  .tw\\:stat-value {\n    grid-column-start: 1;\n    white-space: nowrap;\n    font-size: 2rem;\n    font-weight: 800;\n  }\n  .tw\\:stat-title {\n    grid-column-start: 1;\n    white-space: nowrap;\n    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);\n    font-size: 0.75rem;\n  }\n  .tw\\:float-left {\n    float: left;\n  }\n  .tw\\:float-right {\n    float: right;\n  }\n  .tw\\:divider {\n    display: flex;\n    height: calc(0.25rem * 4);\n    flex-direction: row;\n    align-items: center;\n    align-self: stretch;\n    white-space: nowrap;\n    margin: var(--divider-m, 1rem 0);\n    &:before, &:after {\n      content: \"\";\n      height: calc(0.25rem * 0.5);\n      width: 100%;\n      flex-grow: 1;\n      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);\n    }\n    @media print {\n      &:before, &:after {\n        border: 0.5px solid;\n      }\n    }\n    &:not(:empty) {\n      gap: calc(0.25rem * 4);\n    }\n  }\n  .tw\\:m-1 {\n    margin: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:m-2 {\n    margin: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:m-4 {\n    margin: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:m-4\\! {\n    margin: calc(var(--tw-spacing) * 4) !important;\n  }\n  .tw\\:m-auto {\n    margin: auto;\n  }\n  .tw\\:mx-0\\.5 {\n    margin-inline: calc(var(--tw-spacing) * 0.5);\n  }\n  .tw\\:mx-1 {\n    margin-inline: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mx-2 {\n    margin-inline: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mx-4 {\n    margin-inline: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mx-6 {\n    margin-inline: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:input-md {\n    --size: calc(var(--size-field, 0.25rem) * 10);\n    font-size: 0.875rem;\n    &[type=\"number\"] {\n      &::-webkit-inner-spin-button {\n        margin-block: calc(0.25rem * -3);\n        margin-inline-end: calc(0.25rem * -3);\n      }\n    }\n  }\n  .tw\\:input-sm {\n    --size: calc(var(--size-field, 0.25rem) * 8);\n    font-size: 0.75rem;\n    &[type=\"number\"] {\n      &::-webkit-inner-spin-button {\n        margin-block: calc(0.25rem * -2);\n        margin-inline-end: calc(0.25rem * -3);\n      }\n    }\n  }\n  .tw\\:my-0\\! {\n    margin-block: calc(var(--tw-spacing) * 0) !important;\n  }\n  .tw\\:my-1 {\n    margin-block: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:my-2 {\n    margin-block: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:my-4 {\n    margin-block: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:my-10 {\n    margin-block: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:label {\n    display: inline-flex;\n    align-items: center;\n    gap: calc(0.25rem * 1.5);\n    white-space: nowrap;\n    color: color-mix(in oklab, currentColor 60%, transparent);\n    &:has(input) {\n      cursor: pointer;\n    }\n    &:is(.tw\\:input > *, .tw\\:select > *) {\n      display: flex;\n      height: calc(100% - 0.5rem);\n      align-items: center;\n      padding-inline: calc(0.25rem * 3);\n      white-space: nowrap;\n      font-size: inherit;\n      &:first-child {\n        margin-inline-start: calc(0.25rem * -3);\n        margin-inline-end: calc(0.25rem * 3);\n        border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);\n      }\n      &:last-child {\n        margin-inline-start: calc(0.25rem * 3);\n        margin-inline-end: calc(0.25rem * -3);\n        border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000);\n      }\n    }\n  }\n  .tw\\:-mt-2 {\n    margin-top: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:mt-0 {\n    margin-top: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:mt-1 {\n    margin-top: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mt-1\\.5 {\n    margin-top: calc(var(--tw-spacing) * 1.5);\n  }\n  .tw\\:mt-2 {\n    margin-top: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mt-3 {\n    margin-top: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:mt-4 {\n    margin-top: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mt-5 {\n    margin-top: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:mt-5\\.5 {\n    margin-top: calc(var(--tw-spacing) * 5.5);\n  }\n  .tw\\:mt-6 {\n    margin-top: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:mt-8 {\n    margin-top: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:mt-12 {\n    margin-top: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:mt-16 {\n    margin-top: calc(var(--tw-spacing) * 16);\n  }\n  .tw\\:-mr-4 {\n    margin-right: calc(var(--tw-spacing) * -4);\n  }\n  .tw\\:-mr-6 {\n    margin-right: calc(var(--tw-spacing) * -6);\n  }\n  .tw\\:mr-1 {\n    margin-right: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mr-2 {\n    margin-right: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mr-4 {\n    margin-right: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mr-5 {\n    margin-right: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:-mb-1 {\n    margin-bottom: calc(var(--tw-spacing) * -1);\n  }\n  .tw\\:-mb-2 {\n    margin-bottom: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:-mb-4 {\n    margin-bottom: calc(var(--tw-spacing) * -4);\n  }\n  .tw\\:mb-0 {\n    margin-bottom: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:mb-1 {\n    margin-bottom: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mb-2 {\n    margin-bottom: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mb-3 {\n    margin-bottom: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:mb-4 {\n    margin-bottom: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mb-6 {\n    margin-bottom: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:mb-10 {\n    margin-bottom: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:ml-1 {\n    margin-left: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:ml-2 {\n    margin-left: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:ml-3 {\n    margin-left: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:ml-4 {\n    margin-left: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:ml-14 {\n    margin-left: calc(var(--tw-spacing) * 14);\n  }\n  .tw\\:ml-48 {\n    margin-left: calc(var(--tw-spacing) * 48);\n  }\n  .tw\\:badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: calc(0.25rem * 2);\n    border-radius: var(--radius-selector);\n    vertical-align: middle;\n    color: var(--badge-fg);\n    border: var(--border) solid var(--badge-color, var(--color-base-200));\n    font-size: 0.875rem;\n    width: fit-content;\n    padding-inline: calc(0.25rem * 3 - var(--border));\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--fx-noise);\n    background-color: var(--badge-bg);\n    --badge-bg: var(--badge-color, var(--color-base-100));\n    --badge-fg: var(--color-base-content);\n    --size: calc(var(--size-selector, 0.25rem) * 6);\n    height: var(--size);\n    &.tw\\:badge-outline {\n      --badge-fg: var(--badge-color);\n      --badge-bg: #0000;\n      background-image: none;\n    }\n    &.tw\\:badge-dash {\n      --badge-fg: var(--badge-color);\n      --badge-bg: #0000;\n      border-style: dashed;\n      background-image: none;\n    }\n    &.tw\\:badge-soft {\n      color: var(--badge-color, var(--color-base-content));\n      background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );\n      border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );\n      background-image: none;\n    }\n  }\n  .tw\\:tabs {\n    display: flex;\n    flex-wrap: wrap;\n    --tabs-height: auto;\n    --tabs-direction: row;\n    height: var(--tabs-height);\n    flex-direction: var(--tabs-direction);\n  }\n  .tw\\:navbar {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    padding: 0.5rem;\n    min-height: 4rem;\n  }\n  .tw\\:stat {\n    display: inline-grid;\n    width: 100%;\n    column-gap: calc(0.25rem * 4);\n    padding-inline: calc(0.25rem * 6);\n    padding-block: calc(0.25rem * 4);\n    grid-template-columns: repeat(1, 1fr);\n    &:not(:last-child) {\n      border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);\n      border-block-end: none;\n    }\n  }\n  .tw\\:card-body {\n    display: flex;\n    flex: auto;\n    flex-direction: column;\n    gap: calc(0.25rem * 2);\n    padding: var(--card-p, 1.5rem);\n    font-size: var(--card-fs, 0.875rem);\n    :where(p) {\n      flex-grow: 1;\n    }\n  }\n  .tw\\:alert {\n    display: grid;\n    align-items: center;\n    gap: calc(0.25rem * 4);\n    border-radius: var(--radius-box);\n    padding-inline: calc(0.25rem * 4);\n    padding-block: calc(0.25rem * 3);\n    color: var(--color-base-content);\n    background-color: var(--alert-color, var(--color-base-200));\n    justify-content: start;\n    justify-items: start;\n    grid-auto-flow: column;\n    grid-template-columns: auto minmax(auto, 1fr);\n    text-align: start;\n    border: var(--border) solid var(--color-base-200);\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    background-size: auto, calc(var(--noise) * 100%);\n    background-image: none, var(--fx-noise);\n    box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));\n    &.tw\\:alert-outline {\n      background-color: transparent;\n      color: var(--alert-color);\n      box-shadow: none;\n      background-image: none;\n    }\n    &.tw\\:alert-dash {\n      background-color: transparent;\n      color: var(--alert-color);\n      border-style: dashed;\n      box-shadow: none;\n      background-image: none;\n    }\n    &.tw\\:alert-soft {\n      color: var(--alert-color, var(--color-base-content));\n      background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );\n      border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) );\n      box-shadow: none;\n      background-image: none;\n    }\n  }\n  .tw\\:card-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    gap: calc(0.25rem * 2);\n  }\n  .tw\\:card-title {\n    display: flex;\n    align-items: center;\n    gap: calc(0.25rem * 2);\n    font-size: var(--cardtitle-fs, 1.125rem);\n    font-weight: 600;\n  }\n  .tw\\:mask {\n    display: inline-block;\n    vertical-align: middle;\n    mask-size: contain;\n    mask-repeat: no-repeat;\n    mask-position: center;\n  }\n  .tw\\:block {\n    display: block;\n  }\n  .tw\\:flex {\n    display: flex;\n  }\n  .tw\\:grid {\n    display: grid;\n  }\n  .tw\\:hidden {\n    display: none;\n  }\n  .tw\\:inline {\n    display: inline;\n  }\n  .tw\\:inline-block {\n    display: inline-block;\n  }\n  .tw\\:inline-flex {\n    display: inline-flex;\n  }\n  .tw\\:table {\n    display: table;\n  }\n  .tw\\:btn-circle {\n    border-radius: calc(infinity * 1px);\n    padding-inline: calc(0.25rem * 0);\n    width: var(--size);\n    height: var(--size);\n  }\n  .tw\\:btn-square {\n    padding-inline: calc(0.25rem * 0);\n    width: var(--size);\n    height: var(--size);\n  }\n  .tw\\:\\!h-\\[calc\\(100dvh-280px\\)\\] {\n    height: calc(100dvh - 280px) !important;\n  }\n  .tw\\:h-2 {\n    height: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:h-3 {\n    height: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:h-3\\/4 {\n    height: calc(3/4 * 100%);\n  }\n  .tw\\:h-4 {\n    height: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:h-5 {\n    height: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:h-6 {\n    height: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:h-8 {\n    height: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:h-10 {\n    height: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:h-12 {\n    height: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:h-16 {\n    height: calc(var(--tw-spacing) * 16);\n  }\n  .tw\\:h-20 {\n    height: calc(var(--tw-spacing) * 20);\n  }\n  .tw\\:h-24 {\n    height: calc(var(--tw-spacing) * 24);\n  }\n  .tw\\:h-28 {\n    height: calc(var(--tw-spacing) * 28);\n  }\n  .tw\\:h-32 {\n    height: calc(var(--tw-spacing) * 32);\n  }\n  .tw\\:h-36 {\n    height: calc(var(--tw-spacing) * 36);\n  }\n  .tw\\:h-40 {\n    height: calc(var(--tw-spacing) * 40);\n  }\n  .tw\\:h-48 {\n    height: calc(var(--tw-spacing) * 48);\n  }\n  .tw\\:h-64 {\n    height: calc(var(--tw-spacing) * 64);\n  }\n  .tw\\:h-\\[2em\\] {\n    height: 2em;\n  }\n  .tw\\:h-\\[calc\\(50\\%-0\\.75em\\)\\] {\n    height: calc(50% - 0.75em);\n  }\n  .tw\\:h-\\[calc\\(50\\%-1\\.5em\\)\\] {\n    height: calc(50% - 1.5em);\n  }\n  .tw\\:h-\\[calc\\(100\\%-1rem\\)\\] {\n    height: calc(100% - 1rem);\n  }\n  .tw\\:h-\\[calc\\(100dvh-22px\\)\\] {\n    height: calc(100dvh - 22px);\n  }\n  .tw\\:h-\\[calc\\(100dvh-64px\\)\\] {\n    height: calc(100dvh - 64px);\n  }\n  .tw\\:h-\\[calc\\(100dvh-268px\\)\\] {\n    height: calc(100dvh - 268px);\n  }\n  .tw\\:h-fit {\n    height: fit-content;\n  }\n  .tw\\:h-full {\n    height: 100%;\n  }\n  .tw\\:max-h-64 {\n    max-height: calc(var(--tw-spacing) * 64);\n  }\n  .tw\\:max-h-124 {\n    max-height: calc(var(--tw-spacing) * 124);\n  }\n  .tw\\:max-h-136 {\n    max-height: calc(var(--tw-spacing) * 136);\n  }\n  .tw\\:max-h-\\[1000px\\] {\n    max-height: 1000px;\n  }\n  .tw\\:max-h-\\[calc\\(100dvh-96px\\)\\] {\n    max-height: calc(100dvh - 96px);\n  }\n  .tw\\:max-h-\\[calc\\(100dvh-152px\\)\\] {\n    max-height: calc(100dvh - 152px);\n  }\n  .tw\\:max-h-full {\n    max-height: 100%;\n  }\n  .tw\\:min-h-0 {\n    min-height: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:min-h-36 {\n    min-height: calc(var(--tw-spacing) * 36);\n  }\n  .tw\\:min-h-42 {\n    min-height: calc(var(--tw-spacing) * 42);\n  }\n  .tw\\:min-h-56 {\n    min-height: var(--tw-min-height-56);\n  }\n  .tw\\:min-h-80 {\n    min-height: var(--tw-min-height-80);\n  }\n  .tw\\:min-h-\\[5em\\] {\n    min-height: 5em;\n  }\n  .tw\\:min-h-\\[21px\\] {\n    min-height: 21px;\n  }\n  .tw\\:btn-block {\n    width: 100%;\n  }\n  .tw\\:loading-lg {\n    width: calc(var(--size-selector, 0.25rem) * 7);\n  }\n  .tw\\:loading-md {\n    width: calc(var(--size-selector, 0.25rem) * 6);\n  }\n  .tw\\:loading-sm {\n    width: calc(var(--size-selector, 0.25rem) * 5);\n  }\n  .tw\\:loading-xl {\n    width: calc(var(--size-selector, 0.25rem) * 8);\n  }\n  .tw\\:w-1 {\n    width: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:w-2 {\n    width: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:w-4 {\n    width: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:w-5 {\n    width: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:w-6 {\n    width: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:w-8 {\n    width: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:w-10 {\n    width: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:w-12 {\n    width: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:w-14 {\n    width: calc(var(--tw-spacing) * 14);\n  }\n  .tw\\:w-16 {\n    width: calc(var(--tw-spacing) * 16);\n  }\n  .tw\\:w-20 {\n    width: calc(var(--tw-spacing) * 20);\n  }\n  .tw\\:w-28 {\n    width: calc(var(--tw-spacing) * 28);\n  }\n  .tw\\:w-36 {\n    width: calc(var(--tw-spacing) * 36);\n  }\n  .tw\\:w-48 {\n    width: calc(var(--tw-spacing) * 48);\n  }\n  .tw\\:w-52 {\n    width: var(--tw-container-52);\n  }\n  .tw\\:w-80 {\n    width: calc(var(--tw-spacing) * 80);\n  }\n  .tw\\:w-83 {\n    width: calc(var(--tw-spacing) * 83);\n  }\n  .tw\\:w-96 {\n    width: calc(var(--tw-spacing) * 96);\n  }\n  .tw\\:w-\\[1px\\] {\n    width: 1px;\n  }\n  .tw\\:w-\\[calc\\(100\\%-32px\\)\\] {\n    width: calc(100% - 32px);\n  }\n  .tw\\:w-\\[calc\\(100vw-2rem\\)\\] {\n    width: calc(100vw - 2rem);\n  }\n  .tw\\:w-fit {\n    width: fit-content;\n  }\n  .tw\\:w-full {\n    width: 100%;\n  }\n  .tw\\:w-xl {\n    width: var(--tw-container-xl);\n  }\n  .tw\\:max-w-3xl {\n    max-width: var(--tw-container-3xl);\n  }\n  .tw\\:max-w-69 {\n    max-width: calc(var(--tw-spacing) * 69);\n  }\n  .tw\\:max-w-\\[17rem\\] {\n    max-width: 17rem;\n  }\n  .tw\\:max-w-\\[22rem\\] {\n    max-width: 22rem;\n  }\n  .tw\\:max-w-\\[calc\\(100\\%-60px\\)\\] {\n    max-width: calc(100% - 60px);\n  }\n  .tw\\:max-w-full {\n    max-width: 100%;\n  }\n  .tw\\:max-w-xl {\n    max-width: var(--tw-container-xl);\n  }\n  .tw\\:max-w-xs {\n    max-width: var(--tw-container-xs);\n  }\n  .tw\\:min-w-0 {\n    min-width: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:min-w-80 {\n    min-width: var(--tw-min-width-80);\n  }\n  .tw\\:min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .tw\\:min-w-\\[10\\.4em\\] {\n    min-width: 10.4em;\n  }\n  .tw\\:min-w-fit {\n    min-width: fit-content;\n  }\n  .tw\\:flex-1 {\n    flex: 1;\n  }\n  .tw\\:flex-none {\n    flex: none;\n  }\n  .tw\\:shrink {\n    flex-shrink: 1;\n  }\n  .tw\\:flex-grow {\n    flex-grow: 1;\n  }\n  .tw\\:grow {\n    flex-grow: 1;\n  }\n  .tw\\:basis-1\\/5 {\n    flex-basis: calc(1/5 * 100%);\n  }\n  .tw\\:basis-2\\/5 {\n    flex-basis: calc(2/5 * 100%);\n  }\n  .tw\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:-translate-x-full {\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:translate-x-0 {\n    --tw-translate-x: calc(var(--tw-spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:translate-x-1\\/3 {\n    --tw-translate-x: calc(1/3 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:-translate-y-1\\/3 {\n    --tw-translate-y: calc(calc(1/3 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:rotate-180 {\n    rotate: 180deg;\n  }\n  .tw\\:transform {\n    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);\n  }\n  .tw\\:animate-none {\n    animation: none;\n  }\n  .tw\\:cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .tw\\:cursor-pointer {\n    cursor: pointer;\n  }\n  .tw\\:cursor-text {\n    cursor: text;\n  }\n  .tw\\:resize-none {\n    resize: none;\n  }\n  .tw\\:list-none {\n    list-style-type: none;\n  }\n  .tw\\:columns-1 {\n    columns: 1;\n  }\n  .tw\\:break-inside-avoid {\n    break-inside: avoid;\n  }\n  .tw\\:stats-horizontal {\n    grid-auto-flow: column;\n    overflow-x: auto;\n    .tw\\:stat:not(:last-child) {\n      border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);\n      border-block-end: none;\n    }\n  }\n  .tw\\:grid-flow-col {\n    grid-auto-flow: column;\n  }\n  .tw\\:grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .tw\\:grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .tw\\:grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .tw\\:grid-cols-6 {\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n  }\n  .tw\\:flex-col {\n    flex-direction: column;\n  }\n  .tw\\:flex-row {\n    flex-direction: row;\n  }\n  .tw\\:flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .tw\\:flex-wrap {\n    flex-wrap: wrap;\n  }\n  .tw\\:place-content-center {\n    place-content: center;\n  }\n  .tw\\:place-content-end {\n    place-content: end;\n  }\n  .tw\\:place-items-center {\n    place-items: center;\n  }\n  .tw\\:place-items-end {\n    place-items: end;\n  }\n  .tw\\:items-center {\n    align-items: center;\n  }\n  .tw\\:justify-between {\n    justify-content: space-between;\n  }\n  .tw\\:justify-center {\n    justify-content: center;\n  }\n  .tw\\:justify-end {\n    justify-content: flex-end;\n  }\n  .tw\\:justify-normal {\n    justify-content: normal;\n  }\n  .tw\\:justify-start {\n    justify-content: flex-start;\n  }\n  .tw\\:gap-2 {\n    gap: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:gap-4 {\n    gap: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:gap-6 {\n    gap: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--tw-spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--tw-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .tw\\:space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--tw-spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--tw-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .tw\\:space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--tw-spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--tw-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .tw\\:space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--tw-spacing) * 2) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--tw-spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .tw\\:space-x-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--tw-spacing) * 3) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--tw-spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .tw\\:place-self-center {\n    place-self: center;\n  }\n  .tw\\:place-self-end {\n    place-self: end;\n  }\n  .tw\\:self-center {\n    align-self: center;\n  }\n  .tw\\:truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .tw\\:overflow-auto {\n    overflow: auto;\n  }\n  .tw\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .tw\\:overflow-scroll {\n    overflow: scroll;\n  }\n  .tw\\:overflow-x-auto {\n    overflow-x: auto;\n  }\n  .tw\\:overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .tw\\:overflow-y-auto {\n    overflow-y: auto;\n  }\n  .tw\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .tw\\:rounded-2xl {\n    border-radius: var(--tw-radius-2xl);\n  }\n  .tw\\:rounded-box {\n    border-radius: var(--radius-box);\n  }\n  .tw\\:rounded-box {\n    border-radius: var(--radius-box);\n  }\n  .tw\\:rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .tw\\:rounded-lg {\n    border-radius: var(--tw-radius-lg);\n  }\n  .tw\\:rounded-md {\n    border-radius: var(--tw-radius-md);\n  }\n  .tw\\:rounded-none {\n    border-radius: 0;\n  }\n  .tw\\:rounded-none\\! {\n    border-radius: 0 !important;\n  }\n  .tw\\:rounded-xl {\n    border-radius: var(--tw-radius-xl);\n  }\n  .tw\\:rounded-tr-md {\n    border-top-right-radius: var(--tw-radius-md);\n  }\n  .tw\\:rounded-b-none {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .tw\\:rounded-br-md {\n    border-bottom-right-radius: var(--tw-radius-md);\n  }\n  .tw\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .tw\\:border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .tw\\:border-1 {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .tw\\:border-4 {\n    border-style: var(--tw-border-style);\n    border-width: 4px;\n  }\n  .tw\\:border-\\[1px\\] {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .tw\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .tw\\:border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .tw\\:border-base-200 {\n    border-color: var(--color-base-200);\n  }\n  .tw\\:border-base-300 {\n    border-color: var(--color-base-300);\n  }\n  .tw\\:border-base-content\\/20 {\n    border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);\n  }\n  .tw\\:border-current\\/10 {\n    border-color: color-mix(in oklab, currentColor 10%, transparent);\n  }\n  .tw\\:border-current\\/50 {\n    border-color: color-mix(in oklab, currentColor 50%, transparent);\n  }\n  .tw\\:bg-base-100 {\n    background-color: var(--color-base-100);\n  }\n  .tw\\:bg-base-200 {\n    background-color: var(--color-base-200);\n  }\n  .tw\\:bg-base-300 {\n    background-color: var(--color-base-300);\n  }\n  .tw\\:bg-base-content\\/10 {\n    background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);\n  }\n  .tw\\:bg-gray-200 {\n    background-color: var(--tw-color-gray-200);\n  }\n  .tw\\:bg-neutral-content {\n    background-color: var(--color-neutral-content);\n  }\n  .tw\\:bg-primary {\n    background-color: var(--color-primary);\n  }\n  .tw\\:bg-red-500 {\n    background-color: var(--tw-color-red-500);\n  }\n  .tw\\:bg-slate-200 {\n    background-color: var(--tw-color-slate-200);\n  }\n  .tw\\:bg-transparent {\n    background-color: transparent;\n  }\n  .tw\\:bg-white {\n    background-color: var(--tw-color-white);\n  }\n  .tw\\:fill-current {\n    fill: currentColor;\n  }\n  .tw\\:stroke-3 {\n    stroke-width: 3;\n  }\n  .tw\\:stroke-\\[2\\.5\\] {\n    stroke-width: 2.5;\n  }\n  .tw\\:object-cover {\n    object-fit: cover;\n  }\n  .tw\\:checkbox-xs {\n    padding: 0.125rem;\n    --size: calc(var(--size-selector, 0.25rem) * 4);\n  }\n  .tw\\:p-0 {\n    padding: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:p-0\\! {\n    padding: calc(var(--tw-spacing) * 0) !important;\n  }\n  .tw\\:p-1 {\n    padding: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:p-2 {\n    padding: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:p-3 {\n    padding: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:p-4 {\n    padding: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:p-4\\! {\n    padding: calc(var(--tw-spacing) * 4) !important;\n  }\n  .tw\\:p-6 {\n    padding: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:p-9\\! {\n    padding: calc(var(--tw-spacing) * 9) !important;\n  }\n  .tw\\:p-\\[1px\\] {\n    padding: 1px;\n  }\n  .tw\\:px-0 {\n    padding-inline: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:px-1 {\n    padding-inline: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:px-1\\.5 {\n    padding-inline: calc(var(--tw-spacing) * 1.5);\n  }\n  .tw\\:px-2 {\n    padding-inline: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:px-4 {\n    padding-inline: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:px-6 {\n    padding-inline: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:px-8 {\n    padding-inline: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:py-0\\.5 {\n    padding-block: calc(var(--tw-spacing) * 0.5);\n  }\n  .tw\\:py-1 {\n    padding-block: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:py-2 {\n    padding-block: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:ps-2\\! {\n    padding-inline-start: calc(var(--tw-spacing) * 2) !important;\n  }\n  .tw\\:pe-2\\! {\n    padding-inline-end: calc(var(--tw-spacing) * 2) !important;\n  }\n  .tw\\:pt-0 {\n    padding-top: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:pt-1 {\n    padding-top: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:pt-2 {\n    padding-top: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:pt-4 {\n    padding-top: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:pt-6 {\n    padding-top: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:pr-1 {\n    padding-right: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:pr-4 {\n    padding-right: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:pr-12 {\n    padding-right: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:pb-0 {\n    padding-bottom: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:pb-1 {\n    padding-bottom: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:pb-2 {\n    padding-bottom: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:pb-4 {\n    padding-bottom: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:pb-6 {\n    padding-bottom: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:pl-2 {\n    padding-left: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:text-center {\n    text-align: center;\n  }\n  .tw\\:text-right {\n    text-align: right;\n  }\n  .tw\\:align-middle {\n    vertical-align: middle;\n  }\n  .tw\\:text-2xl {\n    font-size: var(--tw-text-2xl);\n    line-height: var(--tw-leading, var(--tw-text-2xl--line-height));\n  }\n  .tw\\:text-3xl {\n    font-size: var(--tw-text-3xl);\n    line-height: var(--tw-leading, var(--tw-text-3xl--line-height));\n  }\n  .tw\\:text-6xl {\n    font-size: var(--tw-text-6xl);\n    line-height: var(--tw-leading, var(--tw-text-6xl--line-height));\n  }\n  .tw\\:text-base {\n    font-size: var(--tw-text-base);\n    line-height: var(--tw-leading, var(--tw-text-base--line-height));\n  }\n  .tw\\:text-lg {\n    font-size: var(--tw-text-lg);\n    line-height: var(--tw-leading, var(--tw-text-lg--line-height));\n  }\n  .tw\\:text-sm {\n    font-size: var(--tw-text-sm);\n    line-height: var(--tw-leading, var(--tw-text-sm--line-height));\n  }\n  .tw\\:text-xl {\n    font-size: var(--tw-text-xl);\n    line-height: var(--tw-leading, var(--tw-text-xl--line-height));\n  }\n  .tw\\:text-xs {\n    font-size: var(--tw-text-xs);\n    line-height: var(--tw-leading, var(--tw-text-xs--line-height));\n  }\n  .tw\\:text-map {\n    font-size: var(--tw-text-map);\n  }\n  .tw\\:leading-3 {\n    --tw-leading: calc(var(--tw-spacing) * 3);\n    line-height: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:leading-5 {\n    --tw-leading: calc(var(--tw-spacing) * 5);\n    line-height: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:leading-map {\n    --tw-leading: var(--tw-leading-map);\n    line-height: var(--tw-leading-map);\n  }\n  .tw\\:font-bold {\n    --tw-font-weight: var(--tw-font-weight-bold);\n    font-weight: var(--tw-font-weight-bold);\n  }\n  .tw\\:font-medium {\n    --tw-font-weight: var(--tw-font-weight-medium);\n    font-weight: var(--tw-font-weight-medium);\n  }\n  .tw\\:font-normal {\n    --tw-font-weight: var(--tw-font-weight-normal);\n    font-weight: var(--tw-font-weight-normal);\n  }\n  .tw\\:font-semibold {\n    --tw-font-weight: var(--tw-font-weight-semibold);\n    font-weight: var(--tw-font-weight-semibold);\n  }\n  .tw\\:text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .tw\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .tw\\:checkbox-success {\n    color: var(--color-success-content);\n    --input-color: var(--color-success);\n  }\n  .tw\\:text-base-content {\n    color: var(--color-base-content);\n  }\n  .tw\\:text-base-content\\! {\n    color: var(--color-base-content) !important;\n  }\n  .tw\\:text-base-content\\/50 {\n    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);\n  }\n  .tw\\:text-current {\n    color: currentColor;\n  }\n  .tw\\:text-error {\n    color: var(--color-error);\n  }\n  .tw\\:text-error\\! {\n    color: var(--color-error) !important;\n  }\n  .tw\\:text-gray-400 {\n    color: var(--tw-color-gray-400);\n  }\n  .tw\\:text-gray-500 {\n    color: var(--tw-color-gray-500);\n  }\n  .tw\\:text-gray-600 {\n    color: var(--tw-color-gray-600);\n  }\n  .tw\\:text-green-500 {\n    color: var(--tw-color-green-500);\n  }\n  .tw\\:text-neutral-content {\n    color: var(--color-neutral-content);\n  }\n  .tw\\:text-primary {\n    color: var(--color-primary);\n  }\n  .tw\\:text-red-500 {\n    color: var(--tw-color-red-500);\n  }\n  .tw\\:text-white {\n    color: var(--tw-color-white);\n  }\n  .tw\\:text-zinc-500 {\n    color: var(--tw-color-zinc-500);\n  }\n  .tw\\:normal-case {\n    text-transform: none;\n  }\n  .tw\\:italic {\n    font-style: italic;\n  }\n  .tw\\:opacity-0 {\n    opacity: 0%;\n  }\n  .tw\\:opacity-50 {\n    opacity: 50%;\n  }\n  .tw\\:opacity-60 {\n    opacity: 60%;\n  }\n  .tw\\:opacity-100 {\n    opacity: 100%;\n  }\n  .tw\\:shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-xl {\n    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:btn-ghost {\n    &:not(.tw\\:btn-active, :hover, :active:focus, :focus-visible) {\n      --btn-shadow: \"\";\n      --btn-bg: #0000;\n      --btn-border: #0000;\n      --btn-noise: none;\n      &:not(:disabled, [disabled], .tw\\:btn-disabled) {\n        outline-color: currentColor;\n        --btn-fg: currentColor;\n      }\n    }\n  }\n  .tw\\:drop-shadow-md {\n    --tw-drop-shadow: drop-shadow(var(--tw-drop-shadow-md));\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .tw\\:backdrop-brightness-75 {\n    --tw-backdrop-brightness: brightness(75%);\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .tw\\:transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;\n    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));\n  }\n  .tw\\:transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));\n  }\n  .tw\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));\n  }\n  .tw\\:transition-none {\n    transition-property: none;\n  }\n  .tw\\:delay-400 {\n    transition-delay: 400ms;\n  }\n  .tw\\:duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .tw\\:duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .tw\\:duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .tw\\:ease-in {\n    --tw-ease: var(--tw-ease-in);\n    transition-timing-function: var(--tw-ease-in);\n  }\n  .tw\\:btn-lg {\n    --fontsize: 1.125rem;\n    --btn-p: 1.25rem;\n    --size: calc(var(--size-field, 0.25rem) * 12);\n  }\n  .tw\\:btn-sm {\n    --fontsize: 0.75rem;\n    --btn-p: 0.75rem;\n    --size: calc(var(--size-field, 0.25rem) * 8);\n  }\n  .tw\\:btn-xs {\n    --fontsize: 0.6875rem;\n    --btn-p: 0.5rem;\n    --size: calc(var(--size-field, 0.25rem) * 6);\n  }\n  .tw\\:badge-success {\n    --badge-color: var(--color-success);\n    --badge-fg: var(--color-success-content);\n  }\n  .tw\\:btn-error {\n    --btn-color: var(--color-error);\n    --btn-fg: var(--color-error-content);\n  }\n  .tw\\:btn-neutral {\n    --btn-color: var(--color-neutral);\n    --btn-fg: var(--color-neutral-content);\n  }\n  .tw\\:btn-primary {\n    --btn-color: var(--color-primary);\n    --btn-fg: var(--color-primary-content);\n  }\n  .tw\\:loading-spinner {\n    mask-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E\");\n  }\n  .tw\\:mask-circle {\n    mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e\");\n  }\n  .tw\\:mask-hexagon-2 {\n    mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='182' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M64.786 181.4c-9.196 0-20.063-6.687-25.079-14.21L3.762 105.33c-5.016-8.36-5.016-20.9 0-29.259l35.945-61.86C44.723 5.851 55.59 0 64.786 0h71.055c9.196 0 20.063 6.688 25.079 14.211l35.945 61.86c4.18 8.36 4.18 20.899 0 29.258l-35.945 61.86c-4.18 8.36-15.883 14.211-25.079 14.211H64.786Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e\");\n  }\n  .tw\\:mask-squircle {\n    mask-image: url(\"data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e\");\n  }\n  .tw\\:hover\\:cursor-pointer {\n    &:hover {\n      @media (hover: hover) {\n        cursor: pointer;\n      }\n    }\n  }\n  .tw\\:hover\\:bg-base-200 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-base-200);\n      }\n    }\n  }\n  .tw\\:hover\\:bg-red-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--tw-color-red-600);\n      }\n    }\n  }\n  .tw\\:hover\\:bg-slate-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--tw-color-slate-300);\n      }\n    }\n  }\n  .tw\\:hover\\:bg-transparent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: transparent;\n      }\n    }\n  }\n  .tw\\:hover\\:font-bold {\n    &:hover {\n      @media (hover: hover) {\n        --tw-font-weight: var(--tw-font-weight-bold);\n        font-weight: var(--tw-font-weight-bold);\n      }\n    }\n  }\n  .tw\\:hover\\:text-primary {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-primary);\n      }\n    }\n  }\n  .tw\\:hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .tw\\:focus\\:ring-0 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .tw\\:focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .tw\\:focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .tw\\:sm\\:left-auto\\! {\n    @media (width >= 40rem) {\n      left: auto !important;\n    }\n  }\n  .tw\\:sm\\:w-2xl {\n    @media (width >= 40rem) {\n      width: var(--tw-container-2xl);\n    }\n  }\n  .tw\\:sm\\:grid-cols-2 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:md\\:mb-0 {\n    @media (width >= 48rem) {\n      margin-bottom: calc(var(--tw-spacing) * 0);\n    }\n  }\n  .tw\\:md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .tw\\:md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .tw\\:md\\:max-h-full {\n    @media (width >= 48rem) {\n      max-height: 100%;\n    }\n  }\n  .tw\\:md\\:w-1\\/2 {\n    @media (width >= 48rem) {\n      width: calc(1/2 * 100%);\n    }\n  }\n  .tw\\:md\\:w-\\[calc\\(50\\%-32px\\)\\] {\n    @media (width >= 48rem) {\n      width: calc(50% - 32px);\n    }\n  }\n  .tw\\:md\\:columns-2 {\n    @media (width >= 48rem) {\n      columns: 2;\n    }\n  }\n  .tw\\:md\\:grid-cols-1 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  }\n  .tw\\:md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:md\\:space-x-4 {\n    @media (width >= 48rem) {\n      :where(& > :not(:last-child)) {\n        --tw-space-x-reverse: 0;\n        margin-inline-start: calc(calc(var(--tw-spacing) * 4) * var(--tw-space-x-reverse));\n        margin-inline-end: calc(calc(var(--tw-spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n      }\n    }\n  }\n  .tw\\:md\\:text-2xl {\n    @media (width >= 48rem) {\n      font-size: var(--tw-text-2xl);\n      line-height: var(--tw-leading, var(--tw-text-2xl--line-height));\n    }\n  }\n  .tw\\:lg\\:columns-3 {\n    @media (width >= 64rem) {\n      columns: 3;\n    }\n  }\n  .tw\\:lg\\:grid-cols-1 {\n    @media (width >= 64rem) {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  }\n  .tw\\:xl\\:max-w-6xl {\n    @media (width >= 80rem) {\n      max-width: var(--tw-container-6xl);\n    }\n  }\n  .tw\\:xl\\:grid-cols-1 {\n    @media (width >= 80rem) {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  }\n  .tw\\:xl\\:text-3xl {\n    @media (width >= 80rem) {\n      font-size: var(--tw-text-3xl);\n      line-height: var(--tw-leading, var(--tw-text-3xl--line-height));\n    }\n  }\n  .tw\\:2xl\\:columns-4 {\n    @media (width >= 96rem) {\n      columns: 4;\n    }\n  }\n  .tw\\:2xl\\:grid-cols-2 {\n    @media (width >= 96rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:\\@sm\\:tooltip {\n    @container (width >= 24rem) {\n      position: relative;\n      display: inline-block;\n      --tt-bg: var(--color-neutral);\n      --tt-off: calc(100% + 0.5rem);\n      --tt-tail: calc(100% + 1px + 0.25rem);\n      > :where(.tw\\:tooltip-content), &[data-tip]:before {\n        position: absolute;\n        max-width: 20rem;\n        border-radius: var(--radius-field);\n        padding-inline: calc(0.25rem * 2);\n        padding-block: calc(0.25rem * 1);\n        text-align: center;\n        white-space: normal;\n        color: var(--color-neutral-content);\n        opacity: 0%;\n        font-size: 0.875rem;\n        line-height: 1.25em;\n        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n        background-color: var(--tt-bg);\n        width: max-content;\n        pointer-events: none;\n        z-index: 1;\n        --tw-content: attr(data-tip);\n        content: var(--tw-content);\n      }\n      &:after {\n        position: absolute;\n        position: absolute;\n        opacity: 0%;\n        background-color: var(--tt-bg);\n        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;\n        content: \"\";\n        pointer-events: none;\n        width: 0.625rem;\n        height: 0.25rem;\n        display: block;\n        mask-repeat: no-repeat;\n        mask-position: -1px 0;\n        --mask-tooltip: url(\"data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A\");\n        mask-image: var(--mask-tooltip);\n      }\n      &.tw\\:tooltip-open, &[data-tip]:hover, &:hover, &:has(:focus-visible) {\n        > .tw\\:tooltip-content, &[data-tip]:before, &:after {\n          opacity: 100%;\n          --tt-pos: 0rem;\n          transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n        }\n      }\n      > .tw\\:tooltip-content, &[data-tip]:before {\n        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n        inset: auto auto var(--tt-off) 50%;\n      }\n      &:after {\n        transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));\n        inset: auto auto var(--tt-tail) 50%;\n      }\n    }\n  }\n  .tw\\:\\@sm\\:block {\n    @container (width >= 24rem) {\n      display: block;\n    }\n  }\n  .tw\\:\\@sm\\:grid-cols-2 {\n    @container (width >= 24rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:\\@sm\\:overflow-visible {\n    @container (width >= 24rem) {\n      overflow: visible;\n    }\n  }\n  .tw\\:\\@md\\:grid-cols-3 {\n    @container (width >= 28rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .tw\\:\\@lg\\:grid-cols-4 {\n    @container (width >= 32rem) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n  .tw\\:dark\\:bg-zinc-800 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--tw-color-zinc-800);\n    }\n  }\n}\n@layer base {\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    border-color: var(--color-gray-200, currentColor);\n  }\n}\n.modal {\n  z-index: 1200 !important;\n}\n.menu li a {\n  border-radius: 10px;\n}\n.modal {\n  z-index: 1200 !important;\n  max-height: 100dvh;\n}\n.modal-box {\n  max-height: calc(100dvh - 2em);\n}\n@layer base {\n  :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(98% 0 0);\n    --color-base-300: oklch(95% 0 0);\n    --color-base-content: oklch(21% 0.006 285.885);\n    --color-primary: oklch(45% 0.24 277.023);\n    --color-primary-content: oklch(93% 0.034 272.788);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  @media (prefers-color-scheme: dark) {\n    :root {\n      color-scheme: dark;\n      --color-base-100: oklch(25.33% 0.016 252.42);\n      --color-base-200: oklch(23.26% 0.014 253.1);\n      --color-base-300: oklch(21.15% 0.012 254.09);\n      --color-base-content: oklch(97.807% 0.029 256.847);\n      --color-primary: oklch(58% 0.233 277.117);\n      --color-primary-content: oklch(96% 0.018 272.314);\n      --color-secondary: oklch(65% 0.241 354.308);\n      --color-secondary-content: oklch(94% 0.028 342.258);\n      --color-accent: oklch(77% 0.152 181.912);\n      --color-accent-content: oklch(38% 0.063 188.416);\n      --color-neutral: oklch(14% 0.005 285.823);\n      --color-neutral-content: oklch(92% 0.004 286.32);\n      --color-info: oklch(74% 0.16 232.661);\n      --color-info-content: oklch(29% 0.066 243.157);\n      --color-success: oklch(76% 0.177 163.223);\n      --color-success-content: oklch(37% 0.077 168.94);\n      --color-warning: oklch(82% 0.189 84.429);\n      --color-warning-content: oklch(41% 0.112 45.904);\n      --color-error: oklch(71% 0.194 13.428);\n      --color-error-content: oklch(27% 0.105 12.094);\n      --radius-selector: 0.5rem;\n      --radius-field: 0.25rem;\n      --radius-box: 0.5rem;\n      --size-selector: 0.25rem;\n      --size-field: 0.25rem;\n      --border: 1px;\n      --depth: 1;\n      --noise: 0;\n    }\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=light]:checked),[data-theme=light] {\n    color-scheme: light;\n    --color-base-100: oklch(100% 0 0);\n    --color-base-200: oklch(98% 0 0);\n    --color-base-300: oklch(95% 0 0);\n    --color-base-content: oklch(21% 0.006 285.885);\n    --color-primary: oklch(45% 0.24 277.023);\n    --color-primary-content: oklch(93% 0.034 272.788);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] {\n    color-scheme: dark;\n    --color-base-100: oklch(25.33% 0.016 252.42);\n    --color-base-200: oklch(23.26% 0.014 253.1);\n    --color-base-300: oklch(21.15% 0.012 254.09);\n    --color-base-content: oklch(97.807% 0.029 256.847);\n    --color-primary: oklch(58% 0.233 277.117);\n    --color-primary-content: oklch(96% 0.018 272.314);\n    --color-secondary: oklch(65% 0.241 354.308);\n    --color-secondary-content: oklch(94% 0.028 342.258);\n    --color-accent: oklch(77% 0.152 181.912);\n    --color-accent-content: oklch(38% 0.063 188.416);\n    --color-neutral: oklch(14% 0.005 285.823);\n    --color-neutral-content: oklch(92% 0.004 286.32);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(76% 0.177 163.223);\n    --color-success-content: oklch(37% 0.077 168.94);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(71% 0.194 13.428);\n    --color-error-content: oklch(27% 0.105 12.094);\n    --radius-selector: 0.5rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=valentine]:checked),[data-theme=valentine] {\n    color-scheme: light;\n    --color-base-100: oklch(97% 0.014 343.198);\n    --color-base-200: oklch(94% 0.028 342.258);\n    --color-base-300: oklch(89% 0.061 343.231);\n    --color-base-content: oklch(52% 0.223 3.958);\n    --color-primary: oklch(65% 0.241 354.308);\n    --color-primary-content: oklch(100% 0 0);\n    --color-secondary: oklch(62% 0.265 303.9);\n    --color-secondary-content: oklch(97% 0.014 308.299);\n    --color-accent: oklch(82% 0.111 230.318);\n    --color-accent-content: oklch(39% 0.09 240.876);\n    --color-neutral: oklch(40% 0.153 2.432);\n    --color-neutral-content: oklch(89% 0.061 343.231);\n    --color-info: oklch(86% 0.127 207.078);\n    --color-info-content: oklch(44% 0.11 240.79);\n    --color-success: oklch(84% 0.143 164.978);\n    --color-success-content: oklch(43% 0.095 166.913);\n    --color-warning: oklch(75% 0.183 55.934);\n    --color-warning-content: oklch(26% 0.079 36.259);\n    --color-error: oklch(63% 0.237 25.331);\n    --color-error-content: oklch(97% 0.013 17.38);\n    --radius-selector: 1rem;\n    --radius-field: 2rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=retro]:checked),[data-theme=retro] {\n    color-scheme: light;\n    --color-base-100: oklch(91.637% 0.034 90.515);\n    --color-base-200: oklch(88.272% 0.049 91.774);\n    --color-base-300: oklch(84.133% 0.065 90.856);\n    --color-base-content: oklch(41% 0.112 45.904);\n    --color-primary: oklch(80% 0.114 19.571);\n    --color-primary-content: oklch(39% 0.141 25.723);\n    --color-secondary: oklch(92% 0.084 155.995);\n    --color-secondary-content: oklch(44% 0.119 151.328);\n    --color-accent: oklch(68% 0.162 75.834);\n    --color-accent-content: oklch(41% 0.112 45.904);\n    --color-neutral: oklch(44% 0.011 73.639);\n    --color-neutral-content: oklch(86% 0.005 56.366);\n    --color-info: oklch(58% 0.158 241.966);\n    --color-info-content: oklch(96% 0.059 95.617);\n    --color-success: oklch(51% 0.096 186.391);\n    --color-success-content: oklch(96% 0.059 95.617);\n    --color-warning: oklch(64% 0.222 41.116);\n    --color-warning-content: oklch(96% 0.059 95.617);\n    --color-error: oklch(70% 0.191 22.216);\n    --color-error-content: oklch(40% 0.123 38.172);\n    --radius-selector: 0.25rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=aqua]:checked),[data-theme=aqua] {\n    color-scheme: dark;\n    --color-base-100: oklch(37% 0.146 265.522);\n    --color-base-200: oklch(28% 0.091 267.935);\n    --color-base-300: oklch(22% 0.091 267.935);\n    --color-base-content: oklch(90% 0.058 230.902);\n    --color-primary: oklch(85.661% 0.144 198.645);\n    --color-primary-content: oklch(40.124% 0.068 197.603);\n    --color-secondary: oklch(60.682% 0.108 309.782);\n    --color-secondary-content: oklch(96% 0.016 293.756);\n    --color-accent: oklch(93.426% 0.102 94.555);\n    --color-accent-content: oklch(18.685% 0.02 94.555);\n    --color-neutral: oklch(27% 0.146 265.522);\n    --color-neutral-content: oklch(80% 0.146 265.522);\n    --color-info: oklch(54.615% 0.215 262.88);\n    --color-info-content: oklch(90.923% 0.043 262.88);\n    --color-success: oklch(62.705% 0.169 149.213);\n    --color-success-content: oklch(12.541% 0.033 149.213);\n    --color-warning: oklch(66.584% 0.157 58.318);\n    --color-warning-content: oklch(27% 0.077 45.635);\n    --color-error: oklch(73.95% 0.19 27.33);\n    --color-error-content: oklch(14.79% 0.038 27.33);\n    --radius-selector: 1rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=cyberpunk]:checked),[data-theme=cyberpunk] {\n    color-scheme: light;\n    --color-base-100: oklch(94.51% 0.179 104.32);\n    --color-base-200: oklch(91.51% 0.179 104.32);\n    --color-base-300: oklch(85.51% 0.179 104.32);\n    --color-base-content: oklch(0% 0 0);\n    --color-primary: oklch(74.22% 0.209 6.35);\n    --color-primary-content: oklch(14.844% 0.041 6.35);\n    --color-secondary: oklch(83.33% 0.184 204.72);\n    --color-secondary-content: oklch(16.666% 0.036 204.72);\n    --color-accent: oklch(71.86% 0.217 310.43);\n    --color-accent-content: oklch(14.372% 0.043 310.43);\n    --color-neutral: oklch(23.04% 0.065 269.31);\n    --color-neutral-content: oklch(94.51% 0.179 104.32);\n    --color-info: oklch(72.06% 0.191 231.6);\n    --color-info-content: oklch(0% 0 0);\n    --color-success: oklch(64.8% 0.15 160);\n    --color-success-content: oklch(0% 0 0);\n    --color-warning: oklch(84.71% 0.199 83.87);\n    --color-warning-content: oklch(0% 0 0);\n    --color-error: oklch(71.76% 0.221 22.18);\n    --color-error-content: oklch(0% 0 0);\n    --radius-selector: 0rem;\n    --radius-field: 0rem;\n    --radius-box: 0rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 0;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=caramellatte]:checked),[data-theme=caramellatte] {\n    color-scheme: light;\n    --color-base-100: oklch(98% 0.016 73.684);\n    --color-base-200: oklch(95% 0.038 75.164);\n    --color-base-300: oklch(90% 0.076 70.697);\n    --color-base-content: oklch(40% 0.123 38.172);\n    --color-primary: oklch(0% 0 0);\n    --color-primary-content: oklch(100% 0 0);\n    --color-secondary: oklch(22.45% 0.075 37.85);\n    --color-secondary-content: oklch(90% 0.076 70.697);\n    --color-accent: oklch(46.44% 0.111 37.85);\n    --color-accent-content: oklch(90% 0.076 70.697);\n    --color-neutral: oklch(55% 0.195 38.402);\n    --color-neutral-content: oklch(98% 0.016 73.684);\n    --color-info: oklch(42% 0.199 265.638);\n    --color-info-content: oklch(90% 0.076 70.697);\n    --color-success: oklch(43% 0.095 166.913);\n    --color-success-content: oklch(90% 0.076 70.697);\n    --color-warning: oklch(82% 0.189 84.429);\n    --color-warning-content: oklch(41% 0.112 45.904);\n    --color-error: oklch(70% 0.191 22.216);\n    --color-error-content: oklch(39% 0.141 25.723);\n    --radius-selector: 2rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 2px;\n    --depth: 1;\n    --noise: 1;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=abyss]:checked),[data-theme=abyss] {\n    color-scheme: dark;\n    --color-base-100: oklch(20% 0.08 209);\n    --color-base-200: oklch(15% 0.08 209);\n    --color-base-300: oklch(10% 0.08 209);\n    --color-base-content: oklch(90% 0.076 70.697);\n    --color-primary: oklch(92% 0.2653 125);\n    --color-primary-content: oklch(50% 0.2653 125);\n    --color-secondary: oklch(83.27% 0.0764 298.3);\n    --color-secondary-content: oklch(43.27% 0.0764 298.3);\n    --color-accent: oklch(43% 0 0);\n    --color-accent-content: oklch(98% 0 0);\n    --color-neutral: oklch(30% 0.08 209);\n    --color-neutral-content: oklch(90% 0.076 70.697);\n    --color-info: oklch(74% 0.16 232.661);\n    --color-info-content: oklch(29% 0.066 243.157);\n    --color-success: oklch(79% 0.209 151.711);\n    --color-success-content: oklch(26% 0.065 152.934);\n    --color-warning: oklch(84.8% 0.1962 84.62);\n    --color-warning-content: oklch(44.8% 0.1962 84.62);\n    --color-error: oklch(65% 0.1985 24.22);\n    --color-error-content: oklch(27% 0.1985 24.22);\n    --radius-selector: 2rem;\n    --radius-field: 0.25rem;\n    --radius-box: 0.5rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 1px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  :root:has(input.theme-controller[value=silk]:checked),[data-theme=silk] {\n    color-scheme: light;\n    --color-base-100: oklch(97% 0.0035 67.78);\n    --color-base-200: oklch(95% 0.0081 61.42);\n    --color-base-300: oklch(90% 0.0081 61.42);\n    --color-base-content: oklch(40% 0.0081 61.42);\n    --color-primary: oklch(23.27% 0.0249 284.3);\n    --color-primary-content: oklch(94.22% 0.2505 117.44);\n    --color-secondary: oklch(23.27% 0.0249 284.3);\n    --color-secondary-content: oklch(73.92% 0.2135 50.94);\n    --color-accent: oklch(23.27% 0.0249 284.3);\n    --color-accent-content: oklch(88.92% 0.2061 189.9);\n    --color-neutral: oklch(20% 0 0);\n    --color-neutral-content: oklch(80% 0.0081 61.42);\n    --color-info: oklch(80.39% 0.1148 241.68);\n    --color-info-content: oklch(30.39% 0.1148 241.68);\n    --color-success: oklch(83.92% 0.0901 136.87);\n    --color-success-content: oklch(23.92% 0.0901 136.87);\n    --color-warning: oklch(83.92% 0.1085 80);\n    --color-warning-content: oklch(43.92% 0.1085 80);\n    --color-error: oklch(75.1% 0.1814 22.37);\n    --color-error-content: oklch(35.1% 0.1814 22.37);\n    --radius-selector: 2rem;\n    --radius-field: 0.5rem;\n    --radius-box: 1rem;\n    --size-selector: 0.25rem;\n    --size-field: 0.25rem;\n    --border: 2px;\n    --depth: 1;\n    --noise: 0;\n  }\n}\n@layer base {\n  @property --radialprogress {\n    syntax: \"<percentage>\";\n    inherits: true;\n    initial-value: 0%;\n  }\n}\n@layer base {\n  :root {\n    scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;\n  }\n}\n@layer base {\n  :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not([class*=\"drawer-open\"]) > .drawer-toggle:checked ) {\n    overflow: hidden;\n  }\n}\n@layer base {\n  :root,\n[data-theme] {\n    background-color: var(--root-bg, var(--color-base-100));\n    color: var(--color-base-content);\n  }\n}\n@layer base {\n  :root {\n    --fx-noise: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E\");\n  }\n  .chat {\n    --mask-chat: url(\"data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e\");\n  }\n}\n@layer base {\n  :where(\n  :root:has(\n      .modal-open,\n      .modal[open],\n      .modal:target,\n      .modal-toggle:checked,\n      .drawer:not(.drawer-open) > .drawer-toggle:checked\n    )\n) {\n    scrollbar-gutter: stable;\n    background-image: linear-gradient(var(--color-base-100), var(--color-base-100));\n    --root-bg: color-mix(in srgb, var(--color-base-100), oklch(0% 0 0) 40%);\n  }\n}\n@keyframes skeleton {\n  0% {\n    background-position: 150%;\n  }\n  100% {\n    background-position: -50%;\n  }\n}\n@keyframes progress {\n  50% {\n    background-position-x: -115%;\n  }\n}\n@keyframes radio {\n  0% {\n    padding: 5px;\n  }\n  50% {\n    padding: 3px;\n  }\n}\n@keyframes dropdown {\n  0% {\n    opacity: 0;\n  }\n}\n@keyframes rating {\n  0%, 40% {\n    scale: 1.1;\n    filter: brightness(1.05) contrast(1.05);\n  }\n}\n@keyframes toast {\n  0% {\n    scale: 0.9;\n    opacity: 0;\n  }\n  100% {\n    scale: 1;\n    opacity: 1;\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateX(0);\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateY(0);\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateZ(0);\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewX(0);\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewY(0);\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}";
+styleInject(css_248z$a);
+
+var css_248z$9 = ".masonry {\n    column-count: 1;\n    column-gap: 1.5rem;\n}\n\n.masonry-item {\n    break-inside: avoid;\n    margin-bottom: 1.5rem;\n}\n\n@media (min-width: 640px) {\n    .masonry {\n        column-count: 2;\n    }\n}\n\n@media (min-width: 1024px) {\n    .masonry {\n        column-count: 3;\n    }\n}\n\n@media (min-width: 1536px) {\n    .masonry {\n        column-count: 4;\n    }\n}";
+styleInject(css_248z$9);
+
+var css_248z$8 = ":root {\n    --toastify-color-info: var(--color-info);\n    --toastify-color-success: var(--color-success);\n    --toastify-color-warning: var(--color-warning);\n    --toastify-color-error: var(--color-error);\n}\n\n.Toastify__toast {\n    border-radius: var(--radius-box);\n    --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    --shadow-colored: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);\n    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);\n    margin-left: 1rem;\n    margin-right: 1rem;\n    margin-bottom: 1rem;\n    background-color: var(--color-base-100);\n    color: var(--color-base-content);\n}\n\n.Toastify__toast-container {\n    z-index: 2001 !important;\n}\n\n.Toastify__toast-container--top-right {\n    top: 4.75em !important;\n}";
+styleInject(css_248z$8);
+
+var css_248z$7 = ".custom-file-upload {\n    cursor: pointer;\n}\n\ninput[type=\"file\"] {\n    display: none;\n}\n\n.custom-file-upload:hover .button {\n    opacity: 0.8;\n}\n\n.custom-file-upload .button {\n    transition: .5s ease;\n    opacity: 0;\n    position: absolute;\n    transform: translate(16px, 16px);\n}";
+styleInject(css_248z$7);
+
+var css_248z$6 = ".fade {\n    mask-image: linear-gradient(180deg, transparent, #000 1%, #000 99%, transparent);\n}\n\n.placeholder-center::placeholder {\n    text-align: center;\n}\n\ninput {\n    box-sizing: border-box;\n}\n\ntextarea {\n    box-sizing: border-box;\n}\n\n.crosshair-cursor-enabled {\n    cursor: crosshair;\n}\n\n.marker-cluster span {\n    color: #000;\n}";
+styleInject(css_248z$6);
+
+var css_248z$5 = ".svg-container {\n    position: relative;\n    width: 33px; /* gleiche Breite wie das untere SVG */\n    height: 44px; /* gleiche Höhe wie das untere SVG */\n  }\n  \n  .overlay-svg {\n    position: absolute;\n    width: 12.5px;\n    top: calc(50% - 5px);\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }";
+styleInject(css_248z$5);
+
+var css_248z$4 = " .leaflet-control-attribution {\n     display: none;\n }\n\n .leaflet-control-locate {\n     display: none;\n }\n\n .leaflet-data-marker {\n     background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat;\n     background-position: 6px 32px;\n }\n\n .leaflet-container {\n     cursor: inherit;\n }\n\n .leaflet-popup-scrolled {\n     overflow-x: hidden;\n }\n\n .leaflet-popup-content-wrapper,\n .leaflet-popup-tip {\n     background-color: var(--color-base-100);\n     color: var(--color-base-content);\n     border-radius: var(--radius-box);\n }\n\n .leaflet-popup-tip-container,\n .leaflet-popup-tip {\n     border-radius: 0;\n }\n\n .leaflet-tooltip {\n     background-color: var(--color-base-100);\n     color: var(--color-base-content);\n     border-width: 0px;\n }\n\n .leaflet-tooltip {\n     border-radius: var(--radius-box);\n     transition: opacity 500ms;\n     transition-delay: 50ms;\n }\n\n .leaflet-tooltip::before {\n     border-top-color: var(--color-base-100);\n }\n\n .leaflet-container {\n     text-align: left;\n     background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n     background-repeat: no-repeat;\n     background-attachment: fixed;\n     background-position: 50% 80%;\n }\n\n .leaflet-popup-close-button span {\n     color: var(--color-base-content);\n     opacity: 50%;\n }\n\n .leaflet-top {\n     top: 6em\n }\n\n .leaflet-left {\n     left: 0.5em\n }\n\n .leaflet-control-zoom {\n     border-radius: var(--radius-box);\n     color: var(--color-base-content);\n     background-color: var(--color-base-100);\n     width: calc(var(--tw-spacing) * 10);\n     border: 2px solid var(--color-base-300) !important;\n     box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;\n }\n\n .leaflet-control-zoom-in {\n     border-top-left-radius: var(--radius-box) !important;\n     border-top-right-radius: var(--radius-box) !important;\n     color: var(--color-base-content) !important;\n     background-color: var(--color-base-100) !important;\n     width: calc(var(--tw-spacing) * 9) !important;\n     border-bottom: 1px solid var(--color-base-300) !important;\n     height: calc(var(--tw-spacing) * 9) !important;\n     line-height: 40px !important;\n }\n\n .leaflet-control-zoom-out {\n     border-bottom-left-radius: var(--radius-box) !important;\n     border-bottom-right-radius: var(--radius-box) !important;\n     color: var(--color-base-content) !important;\n     background-color: var(--color-base-100) !important;\n     width: calc(var(--tw-spacing) * 9) !important;\n     height: calc(var(--tw-spacing) * 9) !important;\n     line-height: 40px !important;\n }\n\n .leaflet-popup-content p {\n     margin: calc(var(--tw-spacing) * 1) !important\n }";
+styleInject(css_248z$4);
+
+var css_248z$3 = ".picker {\n    position: relative;\n}\n\n.swatch {\n    width: 28px;\n    height: 28px;\n    border-radius: 8px;\n    border: 3px solid #fff;\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n}\n\n.popover {\n    position: absolute;\n    top: 0;\n    left: 36px;\n    border-radius: 9px;\n    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n}";
+styleInject(css_248z$3);
+
+var css_248z$2 = "/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --tw-color-red-500: oklch(0.637 0.237 25.331);\n    --tw-color-red-600: oklch(0.577 0.245 27.325);\n    --tw-color-green-500: oklch(0.723 0.219 149.579);\n    --tw-color-slate-200: oklch(0.929 0.013 255.508);\n    --tw-color-slate-300: oklch(0.869 0.022 252.894);\n    --tw-color-gray-200: oklch(0.928 0.006 264.531);\n    --tw-color-gray-400: oklch(0.707 0.022 261.325);\n    --tw-color-gray-500: oklch(0.551 0.027 264.364);\n    --tw-color-gray-600: oklch(0.446 0.03 256.802);\n    --tw-color-zinc-500: oklch(0.552 0.016 285.938);\n    --tw-color-zinc-800: oklch(0.274 0.006 286.033);\n    --tw-color-white: #fff;\n    --tw-spacing: 0.25rem;\n    --tw-container-xs: 20rem;\n    --tw-container-xl: 36rem;\n    --tw-container-2xl: 42rem;\n    --tw-container-3xl: 48rem;\n    --tw-container-6xl: 72rem;\n    --tw-text-xs: 0.75rem;\n    --tw-text-xs--line-height: calc(1 / 0.75);\n    --tw-text-sm: 0.875rem;\n    --tw-text-sm--line-height: calc(1.25 / 0.875);\n    --tw-text-base: 1rem;\n    --tw-text-base--line-height: calc(1.5 / 1);\n    --tw-text-lg: 1.125rem;\n    --tw-text-lg--line-height: calc(1.75 / 1.125);\n    --tw-text-xl: 1.25rem;\n    --tw-text-xl--line-height: calc(1.75 / 1.25);\n    --tw-text-2xl: 1.5rem;\n    --tw-text-2xl--line-height: calc(2 / 1.5);\n    --tw-text-3xl: 1.875rem;\n    --tw-text-3xl--line-height: calc(2.25 / 1.875);\n    --tw-text-6xl: 3.75rem;\n    --tw-text-6xl--line-height: 1;\n    --tw-font-weight-normal: 400;\n    --tw-font-weight-medium: 500;\n    --tw-font-weight-semibold: 600;\n    --tw-font-weight-bold: 700;\n    --tw-leading-relaxed: 1.625;\n    --tw-radius-md: 0.375rem;\n    --tw-radius-lg: 0.5rem;\n    --tw-radius-xl: 0.75rem;\n    --tw-radius-2xl: 1rem;\n    --tw-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n    --tw-ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --tw-aspect-video: 16 / 9;\n    --tw-default-transition-duration: 150ms;\n    --tw-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" );\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var( --default-font-variation-settings, normal );\n    -webkit-tap-highlight-color: transparent;\n  }\n  body {\n    line-height: inherit;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace );\n    font-feature-settings: var( --default-mono-font-feature-settings, normal );\n    font-variation-settings: var( --default-mono-font-variation-settings, normal );\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n    color: color-mix(in oklab, currentColor 50%, transparent);\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .tw\\:\\@container {\n    container-type: inline-size;\n  }\n  .tw\\:pointer-events-auto {\n    pointer-events: auto;\n  }\n  .tw\\:pointer-events-none {\n    pointer-events: none;\n  }\n  .tw\\:absolute {\n    position: absolute;\n  }\n  .tw\\:fixed {\n    position: fixed;\n  }\n  .tw\\:relative {\n    position: relative;\n  }\n  .tw\\:inset-0 {\n    inset: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:inset-y-0 {\n    inset-block: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:-top-2 {\n    top: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:top-0 {\n    top: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:top-1 {\n    top: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:top-2 {\n    top: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:top-4 {\n    top: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:top-14 {\n    top: calc(var(--tw-spacing) * 14);\n  }\n  .tw\\:-right-2 {\n    right: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:right-0 {\n    right: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:right-1 {\n    right: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:right-2 {\n    right: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:right-4 {\n    right: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:right-5 {\n    right: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:right-6 {\n    right: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:bottom-0 {\n    bottom: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:bottom-4 {\n    bottom: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:bottom-24\\! {\n    bottom: calc(var(--tw-spacing) * 24) !important;\n  }\n  .tw\\:-left-6 {\n    left: calc(var(--tw-spacing) * -6);\n  }\n  .tw\\:left-0 {\n    left: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:left-0\\! {\n    left: calc(var(--tw-spacing) * 0) !important;\n  }\n  .tw\\:left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .tw\\:left-4 {\n    left: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:left-auto\\! {\n    left: auto !important;\n  }\n  .tw\\:z-1 {\n    z-index: 1;\n  }\n  .tw\\:z-500 {\n    z-index: 500;\n  }\n  .tw\\:z-999 {\n    z-index: 999;\n  }\n  .tw\\:z-1000 {\n    z-index: 1000;\n  }\n  .tw\\:z-2000 {\n    z-index: 2000;\n  }\n  .tw\\:z-3000 {\n    z-index: 3000;\n  }\n  .tw\\:z-4000 {\n    z-index: 4000;\n  }\n  .tw\\:z-9998 {\n    z-index: 9998;\n  }\n  .tw\\:z-10000 {\n    z-index: 10000;\n  }\n  .tw\\:z-10000\\! {\n    z-index: 10000 !important;\n  }\n  .tw\\:z-10035 {\n    z-index: 10035;\n  }\n  .tw\\:col-span-1 {\n    grid-column: span 1 / span 1;\n  }\n  .tw\\:float-left {\n    float: left;\n  }\n  .tw\\:float-right {\n    float: right;\n  }\n  .tw\\:m-1 {\n    margin: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:m-2 {\n    margin: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:m-4 {\n    margin: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:m-4\\! {\n    margin: calc(var(--tw-spacing) * 4) !important;\n  }\n  .tw\\:m-auto {\n    margin: auto;\n  }\n  .tw\\:mx-0\\.5 {\n    margin-inline: calc(var(--tw-spacing) * 0.5);\n  }\n  .tw\\:mx-1 {\n    margin-inline: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mx-2 {\n    margin-inline: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mx-4 {\n    margin-inline: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mx-6 {\n    margin-inline: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:my-0\\! {\n    margin-block: calc(var(--tw-spacing) * 0) !important;\n  }\n  .tw\\:my-1 {\n    margin-block: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:my-2 {\n    margin-block: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:my-4 {\n    margin-block: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:my-10 {\n    margin-block: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:-mt-2 {\n    margin-top: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:mt-0 {\n    margin-top: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:mt-1 {\n    margin-top: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mt-1\\.5 {\n    margin-top: calc(var(--tw-spacing) * 1.5);\n  }\n  .tw\\:mt-2 {\n    margin-top: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mt-3 {\n    margin-top: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:mt-4 {\n    margin-top: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mt-5 {\n    margin-top: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:mt-5\\.5 {\n    margin-top: calc(var(--tw-spacing) * 5.5);\n  }\n  .tw\\:mt-6 {\n    margin-top: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:mt-8 {\n    margin-top: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:mt-12 {\n    margin-top: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:mt-16 {\n    margin-top: calc(var(--tw-spacing) * 16);\n  }\n  .tw\\:-mr-4 {\n    margin-right: calc(var(--tw-spacing) * -4);\n  }\n  .tw\\:-mr-6 {\n    margin-right: calc(var(--tw-spacing) * -6);\n  }\n  .tw\\:mr-1 {\n    margin-right: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mr-2 {\n    margin-right: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mr-4 {\n    margin-right: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mr-5 {\n    margin-right: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:-mb-1 {\n    margin-bottom: calc(var(--tw-spacing) * -1);\n  }\n  .tw\\:-mb-2 {\n    margin-bottom: calc(var(--tw-spacing) * -2);\n  }\n  .tw\\:-mb-4 {\n    margin-bottom: calc(var(--tw-spacing) * -4);\n  }\n  .tw\\:mb-0 {\n    margin-bottom: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:mb-1 {\n    margin-bottom: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:mb-2 {\n    margin-bottom: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:mb-3 {\n    margin-bottom: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:mb-4 {\n    margin-bottom: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:mb-6 {\n    margin-bottom: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:mb-10 {\n    margin-bottom: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:ml-1 {\n    margin-left: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:ml-2 {\n    margin-left: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:ml-3 {\n    margin-left: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:ml-4 {\n    margin-left: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:ml-14 {\n    margin-left: calc(var(--tw-spacing) * 14);\n  }\n  .tw\\:ml-48 {\n    margin-left: calc(var(--tw-spacing) * 48);\n  }\n  .tw\\:block {\n    display: block;\n  }\n  .tw\\:flex {\n    display: flex;\n  }\n  .tw\\:grid {\n    display: grid;\n  }\n  .tw\\:hidden {\n    display: none;\n  }\n  .tw\\:inline {\n    display: inline;\n  }\n  .tw\\:inline-block {\n    display: inline-block;\n  }\n  .tw\\:inline-flex {\n    display: inline-flex;\n  }\n  .tw\\:table {\n    display: table;\n  }\n  .tw\\:\\!h-\\[calc\\(100dvh-280px\\)\\] {\n    height: calc(100dvh - 280px) !important;\n  }\n  .tw\\:h-2 {\n    height: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:h-3 {\n    height: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:h-3\\/4 {\n    height: calc(3/4 * 100%);\n  }\n  .tw\\:h-4 {\n    height: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:h-5 {\n    height: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:h-6 {\n    height: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:h-8 {\n    height: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:h-10 {\n    height: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:h-12 {\n    height: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:h-16 {\n    height: calc(var(--tw-spacing) * 16);\n  }\n  .tw\\:h-20 {\n    height: calc(var(--tw-spacing) * 20);\n  }\n  .tw\\:h-24 {\n    height: calc(var(--tw-spacing) * 24);\n  }\n  .tw\\:h-28 {\n    height: calc(var(--tw-spacing) * 28);\n  }\n  .tw\\:h-32 {\n    height: calc(var(--tw-spacing) * 32);\n  }\n  .tw\\:h-36 {\n    height: calc(var(--tw-spacing) * 36);\n  }\n  .tw\\:h-40 {\n    height: calc(var(--tw-spacing) * 40);\n  }\n  .tw\\:h-48 {\n    height: calc(var(--tw-spacing) * 48);\n  }\n  .tw\\:h-64 {\n    height: calc(var(--tw-spacing) * 64);\n  }\n  .tw\\:h-\\[2em\\] {\n    height: 2em;\n  }\n  .tw\\:h-\\[calc\\(50\\%-0\\.75em\\)\\] {\n    height: calc(50% - 0.75em);\n  }\n  .tw\\:h-\\[calc\\(50\\%-1\\.5em\\)\\] {\n    height: calc(50% - 1.5em);\n  }\n  .tw\\:h-\\[calc\\(100\\%-1rem\\)\\] {\n    height: calc(100% - 1rem);\n  }\n  .tw\\:h-\\[calc\\(100dvh-22px\\)\\] {\n    height: calc(100dvh - 22px);\n  }\n  .tw\\:h-\\[calc\\(100dvh-64px\\)\\] {\n    height: calc(100dvh - 64px);\n  }\n  .tw\\:h-\\[calc\\(100dvh-268px\\)\\] {\n    height: calc(100dvh - 268px);\n  }\n  .tw\\:h-fit {\n    height: fit-content;\n  }\n  .tw\\:h-full {\n    height: 100%;\n  }\n  .tw\\:max-h-64 {\n    max-height: calc(var(--tw-spacing) * 64);\n  }\n  .tw\\:max-h-124 {\n    max-height: calc(var(--tw-spacing) * 124);\n  }\n  .tw\\:max-h-136 {\n    max-height: calc(var(--tw-spacing) * 136);\n  }\n  .tw\\:max-h-\\[1000px\\] {\n    max-height: 1000px;\n  }\n  .tw\\:max-h-\\[calc\\(100dvh-96px\\)\\] {\n    max-height: calc(100dvh - 96px);\n  }\n  .tw\\:max-h-\\[calc\\(100dvh-152px\\)\\] {\n    max-height: calc(100dvh - 152px);\n  }\n  .tw\\:max-h-full {\n    max-height: 100%;\n  }\n  .tw\\:min-h-0 {\n    min-height: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:min-h-36 {\n    min-height: calc(var(--tw-spacing) * 36);\n  }\n  .tw\\:min-h-42 {\n    min-height: calc(var(--tw-spacing) * 42);\n  }\n  .tw\\:min-h-56 {\n    min-height: calc(var(--tw-spacing) * 56);\n  }\n  .tw\\:min-h-80 {\n    min-height: calc(var(--tw-spacing) * 80);\n  }\n  .tw\\:min-h-\\[5em\\] {\n    min-height: 5em;\n  }\n  .tw\\:min-h-\\[21px\\] {\n    min-height: 21px;\n  }\n  .tw\\:w-1 {\n    width: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:w-2 {\n    width: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:w-4 {\n    width: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:w-5 {\n    width: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:w-6 {\n    width: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:w-8 {\n    width: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:w-10 {\n    width: calc(var(--tw-spacing) * 10);\n  }\n  .tw\\:w-12 {\n    width: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:w-14 {\n    width: calc(var(--tw-spacing) * 14);\n  }\n  .tw\\:w-16 {\n    width: calc(var(--tw-spacing) * 16);\n  }\n  .tw\\:w-20 {\n    width: calc(var(--tw-spacing) * 20);\n  }\n  .tw\\:w-28 {\n    width: calc(var(--tw-spacing) * 28);\n  }\n  .tw\\:w-36 {\n    width: calc(var(--tw-spacing) * 36);\n  }\n  .tw\\:w-48 {\n    width: calc(var(--tw-spacing) * 48);\n  }\n  .tw\\:w-52 {\n    width: calc(var(--tw-spacing) * 52);\n  }\n  .tw\\:w-80 {\n    width: calc(var(--tw-spacing) * 80);\n  }\n  .tw\\:w-83 {\n    width: calc(var(--tw-spacing) * 83);\n  }\n  .tw\\:w-96 {\n    width: calc(var(--tw-spacing) * 96);\n  }\n  .tw\\:w-\\[1px\\] {\n    width: 1px;\n  }\n  .tw\\:w-\\[calc\\(100\\%-32px\\)\\] {\n    width: calc(100% - 32px);\n  }\n  .tw\\:w-\\[calc\\(100vw-2rem\\)\\] {\n    width: calc(100vw - 2rem);\n  }\n  .tw\\:w-fit {\n    width: fit-content;\n  }\n  .tw\\:w-full {\n    width: 100%;\n  }\n  .tw\\:w-xl {\n    width: var(--tw-container-xl);\n  }\n  .tw\\:max-w-3xl {\n    max-width: var(--tw-container-3xl);\n  }\n  .tw\\:max-w-69 {\n    max-width: calc(var(--tw-spacing) * 69);\n  }\n  .tw\\:max-w-\\[17rem\\] {\n    max-width: 17rem;\n  }\n  .tw\\:max-w-\\[22rem\\] {\n    max-width: 22rem;\n  }\n  .tw\\:max-w-\\[calc\\(100\\%-60px\\)\\] {\n    max-width: calc(100% - 60px);\n  }\n  .tw\\:max-w-full {\n    max-width: 100%;\n  }\n  .tw\\:max-w-xl {\n    max-width: var(--tw-container-xl);\n  }\n  .tw\\:max-w-xs {\n    max-width: var(--tw-container-xs);\n  }\n  .tw\\:min-w-0 {\n    min-width: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:min-w-80 {\n    min-width: calc(var(--tw-spacing) * 80);\n  }\n  .tw\\:min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .tw\\:min-w-\\[10\\.4em\\] {\n    min-width: 10.4em;\n  }\n  .tw\\:min-w-fit {\n    min-width: fit-content;\n  }\n  .tw\\:flex-1 {\n    flex: 1;\n  }\n  .tw\\:flex-none {\n    flex: none;\n  }\n  .tw\\:shrink {\n    flex-shrink: 1;\n  }\n  .tw\\:flex-grow {\n    flex-grow: 1;\n  }\n  .tw\\:grow {\n    flex-grow: 1;\n  }\n  .tw\\:basis-1\\/5 {\n    flex-basis: calc(1/5 * 100%);\n  }\n  .tw\\:basis-2\\/5 {\n    flex-basis: calc(2/5 * 100%);\n  }\n  .tw\\:-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:-translate-x-full {\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:translate-x-0 {\n    --tw-translate-x: calc(var(--tw-spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:translate-x-1\\/3 {\n    --tw-translate-x: calc(1/3 * 100%);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:-translate-y-1\\/3 {\n    --tw-translate-y: calc(calc(1/3 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .tw\\:rotate-180 {\n    rotate: 180deg;\n  }\n  .tw\\:transform {\n    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);\n  }\n  .tw\\:animate-none {\n    animation: none;\n  }\n  .tw\\:cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .tw\\:cursor-pointer {\n    cursor: pointer;\n  }\n  .tw\\:cursor-text {\n    cursor: text;\n  }\n  .tw\\:resize-none {\n    resize: none;\n  }\n  .tw\\:list-none {\n    list-style-type: none;\n  }\n  .tw\\:columns-1 {\n    columns: 1;\n  }\n  .tw\\:break-inside-avoid {\n    break-inside: avoid;\n  }\n  .tw\\:grid-flow-col {\n    grid-auto-flow: column;\n  }\n  .tw\\:grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .tw\\:grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .tw\\:grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .tw\\:grid-cols-6 {\n    grid-template-columns: repeat(6, minmax(0, 1fr));\n  }\n  .tw\\:flex-col {\n    flex-direction: column;\n  }\n  .tw\\:flex-row {\n    flex-direction: row;\n  }\n  .tw\\:flex-nowrap {\n    flex-wrap: nowrap;\n  }\n  .tw\\:flex-wrap {\n    flex-wrap: wrap;\n  }\n  .tw\\:place-content-center {\n    place-content: center;\n  }\n  .tw\\:place-content-end {\n    place-content: end;\n  }\n  .tw\\:place-items-center {\n    place-items: center;\n  }\n  .tw\\:place-items-end {\n    place-items: end;\n  }\n  .tw\\:items-center {\n    align-items: center;\n  }\n  .tw\\:justify-between {\n    justify-content: space-between;\n  }\n  .tw\\:justify-center {\n    justify-content: center;\n  }\n  .tw\\:justify-end {\n    justify-content: flex-end;\n  }\n  .tw\\:justify-normal {\n    justify-content: normal;\n  }\n  .tw\\:justify-start {\n    justify-content: flex-start;\n  }\n  .tw\\:gap-2 {\n    gap: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:gap-4 {\n    gap: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:gap-6 {\n    gap: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--tw-spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--tw-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .tw\\:space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--tw-spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--tw-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .tw\\:space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--tw-spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--tw-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .tw\\:space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--tw-spacing) * 2) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--tw-spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .tw\\:space-x-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--tw-spacing) * 3) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--tw-spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .tw\\:place-self-center {\n    place-self: center;\n  }\n  .tw\\:place-self-end {\n    place-self: end;\n  }\n  .tw\\:self-center {\n    align-self: center;\n  }\n  .tw\\:truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .tw\\:overflow-auto {\n    overflow: auto;\n  }\n  .tw\\:overflow-hidden {\n    overflow: hidden;\n  }\n  .tw\\:overflow-scroll {\n    overflow: scroll;\n  }\n  .tw\\:overflow-x-auto {\n    overflow-x: auto;\n  }\n  .tw\\:overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .tw\\:overflow-y-auto {\n    overflow-y: auto;\n  }\n  .tw\\:rounded {\n    border-radius: 0.25rem;\n  }\n  .tw\\:rounded-2xl {\n    border-radius: var(--tw-radius-2xl);\n  }\n  .tw\\:rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .tw\\:rounded-lg {\n    border-radius: var(--tw-radius-lg);\n  }\n  .tw\\:rounded-md {\n    border-radius: var(--tw-radius-md);\n  }\n  .tw\\:rounded-none {\n    border-radius: 0;\n  }\n  .tw\\:rounded-none\\! {\n    border-radius: 0 !important;\n  }\n  .tw\\:rounded-xl {\n    border-radius: var(--tw-radius-xl);\n  }\n  .tw\\:rounded-tr-md {\n    border-top-right-radius: var(--tw-radius-md);\n  }\n  .tw\\:rounded-b-none {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .tw\\:rounded-br-md {\n    border-bottom-right-radius: var(--tw-radius-md);\n  }\n  .tw\\:border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .tw\\:border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .tw\\:border-1 {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .tw\\:border-4 {\n    border-style: var(--tw-border-style);\n    border-width: 4px;\n  }\n  .tw\\:border-\\[1px\\] {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .tw\\:border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .tw\\:border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .tw\\:border-current\\/10 {\n    border-color: color-mix(in oklab, currentColor 10%, transparent);\n  }\n  .tw\\:border-current\\/50 {\n    border-color: color-mix(in oklab, currentColor 50%, transparent);\n  }\n  .tw\\:bg-gray-200 {\n    background-color: var(--tw-color-gray-200);\n  }\n  .tw\\:bg-red-500 {\n    background-color: var(--tw-color-red-500);\n  }\n  .tw\\:bg-slate-200 {\n    background-color: var(--tw-color-slate-200);\n  }\n  .tw\\:bg-transparent {\n    background-color: transparent;\n  }\n  .tw\\:bg-white {\n    background-color: var(--tw-color-white);\n  }\n  .tw\\:fill-current {\n    fill: currentColor;\n  }\n  .tw\\:stroke-3 {\n    stroke-width: 3;\n  }\n  .tw\\:stroke-\\[2\\.5\\] {\n    stroke-width: 2.5;\n  }\n  .tw\\:object-cover {\n    object-fit: cover;\n  }\n  .tw\\:p-0 {\n    padding: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:p-0\\! {\n    padding: calc(var(--tw-spacing) * 0) !important;\n  }\n  .tw\\:p-1 {\n    padding: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:p-2 {\n    padding: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:p-3 {\n    padding: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:p-4 {\n    padding: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:p-4\\! {\n    padding: calc(var(--tw-spacing) * 4) !important;\n  }\n  .tw\\:p-6 {\n    padding: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:p-9\\! {\n    padding: calc(var(--tw-spacing) * 9) !important;\n  }\n  .tw\\:p-\\[1px\\] {\n    padding: 1px;\n  }\n  .tw\\:px-0 {\n    padding-inline: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:px-1 {\n    padding-inline: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:px-1\\.5 {\n    padding-inline: calc(var(--tw-spacing) * 1.5);\n  }\n  .tw\\:px-2 {\n    padding-inline: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:px-4 {\n    padding-inline: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:px-6 {\n    padding-inline: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:px-8 {\n    padding-inline: calc(var(--tw-spacing) * 8);\n  }\n  .tw\\:py-0\\.5 {\n    padding-block: calc(var(--tw-spacing) * 0.5);\n  }\n  .tw\\:py-1 {\n    padding-block: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:py-2 {\n    padding-block: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:ps-2\\! {\n    padding-inline-start: calc(var(--tw-spacing) * 2) !important;\n  }\n  .tw\\:pe-2\\! {\n    padding-inline-end: calc(var(--tw-spacing) * 2) !important;\n  }\n  .tw\\:pt-0 {\n    padding-top: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:pt-1 {\n    padding-top: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:pt-2 {\n    padding-top: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:pt-4 {\n    padding-top: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:pt-6 {\n    padding-top: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:pr-1 {\n    padding-right: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:pr-4 {\n    padding-right: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:pr-12 {\n    padding-right: calc(var(--tw-spacing) * 12);\n  }\n  .tw\\:pb-0 {\n    padding-bottom: calc(var(--tw-spacing) * 0);\n  }\n  .tw\\:pb-1 {\n    padding-bottom: calc(var(--tw-spacing) * 1);\n  }\n  .tw\\:pb-2 {\n    padding-bottom: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:pb-4 {\n    padding-bottom: calc(var(--tw-spacing) * 4);\n  }\n  .tw\\:pb-6 {\n    padding-bottom: calc(var(--tw-spacing) * 6);\n  }\n  .tw\\:pl-2 {\n    padding-left: calc(var(--tw-spacing) * 2);\n  }\n  .tw\\:text-center {\n    text-align: center;\n  }\n  .tw\\:text-right {\n    text-align: right;\n  }\n  .tw\\:align-middle {\n    vertical-align: middle;\n  }\n  .tw\\:text-2xl {\n    font-size: var(--tw-text-2xl);\n    line-height: var(--tw-leading, var(--tw-text-2xl--line-height));\n  }\n  .tw\\:text-3xl {\n    font-size: var(--tw-text-3xl);\n    line-height: var(--tw-leading, var(--tw-text-3xl--line-height));\n  }\n  .tw\\:text-6xl {\n    font-size: var(--tw-text-6xl);\n    line-height: var(--tw-leading, var(--tw-text-6xl--line-height));\n  }\n  .tw\\:text-base {\n    font-size: var(--tw-text-base);\n    line-height: var(--tw-leading, var(--tw-text-base--line-height));\n  }\n  .tw\\:text-lg {\n    font-size: var(--tw-text-lg);\n    line-height: var(--tw-leading, var(--tw-text-lg--line-height));\n  }\n  .tw\\:text-sm {\n    font-size: var(--tw-text-sm);\n    line-height: var(--tw-leading, var(--tw-text-sm--line-height));\n  }\n  .tw\\:text-xl {\n    font-size: var(--tw-text-xl);\n    line-height: var(--tw-leading, var(--tw-text-xl--line-height));\n  }\n  .tw\\:text-xs {\n    font-size: var(--tw-text-xs);\n    line-height: var(--tw-leading, var(--tw-text-xs--line-height));\n  }\n  .tw\\:leading-3 {\n    --tw-leading: calc(var(--tw-spacing) * 3);\n    line-height: calc(var(--tw-spacing) * 3);\n  }\n  .tw\\:leading-5 {\n    --tw-leading: calc(var(--tw-spacing) * 5);\n    line-height: calc(var(--tw-spacing) * 5);\n  }\n  .tw\\:font-bold {\n    --tw-font-weight: var(--tw-font-weight-bold);\n    font-weight: var(--tw-font-weight-bold);\n  }\n  .tw\\:font-medium {\n    --tw-font-weight: var(--tw-font-weight-medium);\n    font-weight: var(--tw-font-weight-medium);\n  }\n  .tw\\:font-normal {\n    --tw-font-weight: var(--tw-font-weight-normal);\n    font-weight: var(--tw-font-weight-normal);\n  }\n  .tw\\:font-semibold {\n    --tw-font-weight: var(--tw-font-weight-semibold);\n    font-weight: var(--tw-font-weight-semibold);\n  }\n  .tw\\:text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .tw\\:whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .tw\\:text-current {\n    color: currentColor;\n  }\n  .tw\\:text-gray-400 {\n    color: var(--tw-color-gray-400);\n  }\n  .tw\\:text-gray-500 {\n    color: var(--tw-color-gray-500);\n  }\n  .tw\\:text-gray-600 {\n    color: var(--tw-color-gray-600);\n  }\n  .tw\\:text-green-500 {\n    color: var(--tw-color-green-500);\n  }\n  .tw\\:text-red-500 {\n    color: var(--tw-color-red-500);\n  }\n  .tw\\:text-white {\n    color: var(--tw-color-white);\n  }\n  .tw\\:text-zinc-500 {\n    color: var(--tw-color-zinc-500);\n  }\n  .tw\\:normal-case {\n    text-transform: none;\n  }\n  .tw\\:italic {\n    font-style: italic;\n  }\n  .tw\\:opacity-0 {\n    opacity: 0%;\n  }\n  .tw\\:opacity-50 {\n    opacity: 50%;\n  }\n  .tw\\:opacity-60 {\n    opacity: 60%;\n  }\n  .tw\\:opacity-100 {\n    opacity: 100%;\n  }\n  .tw\\:shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:shadow-xl {\n    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .tw\\:drop-shadow-md {\n    --tw-drop-shadow: drop-shadow(var(--tw-drop-shadow-md));\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .tw\\:backdrop-brightness-75 {\n    --tw-backdrop-brightness: brightness(75%);\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .tw\\:transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;\n    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));\n  }\n  .tw\\:transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));\n  }\n  .tw\\:transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));\n  }\n  .tw\\:transition-none {\n    transition-property: none;\n  }\n  .tw\\:delay-400 {\n    transition-delay: 400ms;\n  }\n  .tw\\:duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .tw\\:duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .tw\\:duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .tw\\:ease-in {\n    --tw-ease: var(--tw-ease-in);\n    transition-timing-function: var(--tw-ease-in);\n  }\n  .tw\\:hover\\:cursor-pointer {\n    &:hover {\n      @media (hover: hover) {\n        cursor: pointer;\n      }\n    }\n  }\n  .tw\\:hover\\:bg-red-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--tw-color-red-600);\n      }\n    }\n  }\n  .tw\\:hover\\:bg-slate-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--tw-color-slate-300);\n      }\n    }\n  }\n  .tw\\:hover\\:bg-transparent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: transparent;\n      }\n    }\n  }\n  .tw\\:hover\\:font-bold {\n    &:hover {\n      @media (hover: hover) {\n        --tw-font-weight: var(--tw-font-weight-bold);\n        font-weight: var(--tw-font-weight-bold);\n      }\n    }\n  }\n  .tw\\:hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .tw\\:focus\\:ring-0 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .tw\\:focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .tw\\:focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .tw\\:sm\\:left-auto\\! {\n    @media (width >= 40rem) {\n      left: auto !important;\n    }\n  }\n  .tw\\:sm\\:w-2xl {\n    @media (width >= 40rem) {\n      width: var(--tw-container-2xl);\n    }\n  }\n  .tw\\:sm\\:grid-cols-2 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:md\\:mb-0 {\n    @media (width >= 48rem) {\n      margin-bottom: calc(var(--tw-spacing) * 0);\n    }\n  }\n  .tw\\:md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .tw\\:md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .tw\\:md\\:max-h-full {\n    @media (width >= 48rem) {\n      max-height: 100%;\n    }\n  }\n  .tw\\:md\\:w-1\\/2 {\n    @media (width >= 48rem) {\n      width: calc(1/2 * 100%);\n    }\n  }\n  .tw\\:md\\:w-\\[calc\\(50\\%-32px\\)\\] {\n    @media (width >= 48rem) {\n      width: calc(50% - 32px);\n    }\n  }\n  .tw\\:md\\:columns-2 {\n    @media (width >= 48rem) {\n      columns: 2;\n    }\n  }\n  .tw\\:md\\:grid-cols-1 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  }\n  .tw\\:md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:md\\:space-x-4 {\n    @media (width >= 48rem) {\n      :where(& > :not(:last-child)) {\n        --tw-space-x-reverse: 0;\n        margin-inline-start: calc(calc(var(--tw-spacing) * 4) * var(--tw-space-x-reverse));\n        margin-inline-end: calc(calc(var(--tw-spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n      }\n    }\n  }\n  .tw\\:md\\:text-2xl {\n    @media (width >= 48rem) {\n      font-size: var(--tw-text-2xl);\n      line-height: var(--tw-leading, var(--tw-text-2xl--line-height));\n    }\n  }\n  .tw\\:lg\\:columns-3 {\n    @media (width >= 64rem) {\n      columns: 3;\n    }\n  }\n  .tw\\:lg\\:grid-cols-1 {\n    @media (width >= 64rem) {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  }\n  .tw\\:xl\\:max-w-6xl {\n    @media (width >= 80rem) {\n      max-width: var(--tw-container-6xl);\n    }\n  }\n  .tw\\:xl\\:grid-cols-1 {\n    @media (width >= 80rem) {\n      grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n  }\n  .tw\\:xl\\:text-3xl {\n    @media (width >= 80rem) {\n      font-size: var(--tw-text-3xl);\n      line-height: var(--tw-leading, var(--tw-text-3xl--line-height));\n    }\n  }\n  .tw\\:2xl\\:columns-4 {\n    @media (width >= 96rem) {\n      columns: 4;\n    }\n  }\n  .tw\\:2xl\\:grid-cols-2 {\n    @media (width >= 96rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:\\@sm\\:block {\n    @container (width >= 24rem) {\n      display: block;\n    }\n  }\n  .tw\\:\\@sm\\:grid-cols-2 {\n    @container (width >= 24rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .tw\\:\\@sm\\:overflow-visible {\n    @container (width >= 24rem) {\n      overflow: visible;\n    }\n  }\n  .tw\\:\\@md\\:grid-cols-3 {\n    @container (width >= 28rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .tw\\:\\@lg\\:grid-cols-4 {\n    @container (width >= 32rem) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n  .tw\\:dark\\:bg-zinc-800 {\n    @media (prefers-color-scheme: dark) {\n      background-color: var(--tw-color-zinc-800);\n    }\n  }\n}\n@layer markdown {\n  .markdown {\n    h1 {\n      margin-block: calc(var(--tw-spacing) * 4);\n      font-size: var(--tw-text-2xl);\n      line-height: var(--tw-leading, var(--tw-text-2xl--line-height));\n      --tw-font-weight: var(--tw-font-weight-bold);\n      font-weight: var(--tw-font-weight-bold);\n    }\n    h2 {\n      margin-block: calc(var(--tw-spacing) * 3);\n      font-size: var(--tw-text-xl);\n      line-height: var(--tw-leading, var(--tw-text-xl--line-height));\n      --tw-font-weight: var(--tw-font-weight-bold);\n      font-weight: var(--tw-font-weight-bold);\n    }\n    h3, h4 {\n      margin-block: calc(var(--tw-spacing) * 2);\n      font-size: var(--tw-text-lg);\n      line-height: var(--tw-leading, var(--tw-text-lg--line-height));\n      --tw-font-weight: var(--tw-font-weight-bold);\n      font-weight: var(--tw-font-weight-bold);\n    }\n    h5, h6 {\n      margin-block: calc(var(--tw-spacing) * 2);\n      font-size: var(--tw-text-base);\n      line-height: var(--tw-leading, var(--tw-text-base--line-height));\n      --tw-font-weight: var(--tw-font-weight-bold);\n      font-weight: var(--tw-font-weight-bold);\n    }\n    p {\n      margin-block: calc(var(--tw-spacing) * 1);\n      --tw-leading: var(--tw-leading-relaxed);\n      line-height: var(--tw-leading-relaxed);\n    }\n    ul, ol {\n      margin-block: calc(var(--tw-spacing) * 2);\n      padding-left: calc(var(--tw-spacing) * 6);\n    }\n    ul li {\n      list-style-position: outside;\n      list-style-type: disc;\n    }\n    ol li {\n      list-style-position: outside;\n      list-style-type: decimal;\n    }\n    li > p {\n      margin-block: calc(var(--tw-spacing) * 0);\n      display: inline-block;\n    }\n    hr {\n      margin-block: calc(var(--tw-spacing) * 4);\n      border-color: currentColor;\n    }\n    img {\n      max-width: 100%;\n      border-radius: 0.25rem;\n      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n    a {\n      --tw-font-weight: var(--tw-font-weight-bold);\n      font-weight: var(--tw-font-weight-bold);\n      text-decoration-line: underline;\n    }\n    iframe {\n      aspect-ratio: var(--tw-aspect-video);\n      width: 100%;\n    }\n    .hashtag {\n      cursor: pointer;\n      --tw-font-weight: var(--tw-font-weight-bold);\n      font-weight: var(--tw-font-weight-bold);\n      color: #faa;\n      text-decoration: none;\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateX(0);\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateY(0);\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateZ(0);\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewX(0);\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewY(0);\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n";
+styleInject(css_248z$2);
+
+var css_248z$1 = "\n\n.editor-wrapper div {\n    min-height: 0;\n    flex: 1;\n    outline: none;\n}\n\n.tiptap p.is-editor-empty:first-child::before {\n    color: var(--color-base-content);\n    opacity: 0.5;\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n}\n\n/* Bubble menu */\n.bubble-menu {\n    background-color: var(--color-base-100);\n    border: 1px solid var(--color-base-200);\n    border-radius: 0.7rem;\n    box-shadow: var(--shadow);\n    display: flex;\n    padding: 0.2rem;\n  \n    button {\n      background-color: unset;\n  \n      &:hover {\n        background-color: var(--color-base-300);\n      }\n  \n      &.is-active {\n        background-color: var(--color-base-200);\n  \n        &:hover {\n          background-color: var(--color-base-300);\n        }\n      }\n    }\n  }\n  ";
+styleInject(css_248z$1);
+
+var css_248z = ".yarl__portal_open {\n    z-index: 10050;\n}";
+styleInject(css_248z);
+
+const QuestContext = React.createContext({
+    open: false,
+    setQuestsOpen: () => { },
+});
+function useQuestsManager(initialOpen) {
+    const [open, setOpen] = React.useState(initialOpen);
+    const setQuestsOpen = React.useCallback((questOpen) => {
+        setOpen(questOpen);
+    }, []);
+    return { open, setQuestsOpen };
+}
+const QuestsProvider = ({ initialOpen, children, }) => (jsxRuntime.jsx(QuestContext.Provider, { value: useQuestsManager(initialOpen), children: children }));
+const useQuestsOpen = () => {
+    const { open } = React.useContext(QuestContext);
+    return open;
+};
+const useSetQuestOpen = () => {
+    const { setQuestsOpen } = React.useContext(QuestContext);
+    return setQuestsOpen;
+};
+
+const PoupFormContext = React.createContext({
+    popupForm: {},
+    setPopupForm: () => {
+        /* empty function */
+    },
+});
+function usePopupFormManager() {
+    const [popupForm, setPopupForm] = React.useState(null);
+    return { popupForm, setPopupForm };
+}
+const PopupFormProvider = ({ children }) => (jsxRuntime.jsx(PoupFormContext.Provider, { value: usePopupFormManager(), children: children }));
+const usePopupForm = () => {
+    const { popupForm, setPopupForm } = React.useContext(PoupFormContext);
+    return { popupForm, setPopupForm };
+};
+
+// Helper context to determine if the ContextWrapper is already present.
+const ContextCheckContext = React.createContext(false);
+const CloseButton = ({ closeToast }) => (jsxRuntime.jsx("button", { className: 'tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden', onClick: closeToast, children: "\u2715" }));
+const ContextWrapper = ({ children }) => {
+    const isWrapped = React.useContext(ContextCheckContext);
+    const isInsideRouter = reactRouterDom.useInRouterContext();
+    let returnValue = children;
+    if (!isWrapped) {
+        returnValue = (jsxRuntime.jsx(ContextCheckContext.Provider, { value: true, children: jsxRuntime.jsx(Wrappers, { children: returnValue }) }));
+    }
+    if (!isInsideRouter) {
+        returnValue = jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: returnValue });
+    }
+    return returnValue;
+};
+// eslint-disable-next-line react/prop-types
+const Wrappers = ({ children }) => {
+    const queryClient = new reactQuery.QueryClient();
+    return (jsxRuntime.jsx(TagView.PermissionsProvider, { initialPermissions: [], children: jsxRuntime.jsx(TagView.TagsProvider, { initialTags: [], children: jsxRuntime.jsx(TagView.LayersProvider, { initialLayers: [], children: jsxRuntime.jsx(TagView.FilterProvider, { initialTags: [], children: jsxRuntime.jsx(TagView.ItemsProvider, { initialItems: [], children: jsxRuntime.jsx(TagView.SelectPositionProvider, { children: jsxRuntime.jsx(TagView.LeafletRefsProvider, { initialLeafletRefs: {}, children: jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: jsxRuntime.jsx(TagView.AppStateProvider, { children: jsxRuntime.jsx(TagView.ClusterRefProvider, { children: jsxRuntime.jsx(PopupFormProvider, { children: jsxRuntime.jsxs(QuestsProvider, { initialOpen: true, children: [jsxRuntime.jsx(reactToastify.ToastContainer, { position: 'top-right', autoClose: 2000, hideProgressBar: true, newestOnTop: false, closeOnClick: true, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true, theme: 'light', closeButton: CloseButton }), children] }) }) }) }) }) }) }) }) }) }) }) }));
+};
+
+const useTheme = (defaultTheme = 'default') => {
+    React.useEffect(() => {
+        const savedTheme = localStorage.getItem('theme');
+        const initialTheme = savedTheme ? JSON.parse(savedTheme) : defaultTheme;
+        if (initialTheme !== 'default') {
+            document.documentElement.setAttribute('data-theme', defaultTheme);
+            localStorage.setItem('theme', JSON.stringify(initialTheme));
+        }
+    }, [defaultTheme]);
+};
+
+function containsUUID(str) {
+    const uuidRegex = /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/i;
+    return uuidRegex.test(str);
+}
+
+var PlusSVG = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgY2xhc3M9InctNSBoLTUiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEyIDQuNXYxNW03LjUtNy41aC0xNSI+PC9wYXRoPjwvc3ZnPg==';
+
+function AddButton({ triggerAction, }) {
+    const layers = TagView.useLayers();
+    const hasUserPermission = TagView.useHasUserPermission();
+    const canAddItems = () => {
+        let canAdd = false;
+        layers.map((layer) => {
+            if (layer.api?.createItem &&
+                hasUserPermission(layer.api.collectionName, 'create', undefined, layer) &&
+                layer.listed)
+                canAdd = true;
+            return null;
+        });
+        return canAdd;
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: canAddItems() ? (jsxRuntime.jsxs("div", { className: 'tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4', children: [jsxRuntime.jsx("label", { tabIndex: 0, className: 'tw:z-500 tw:btn tw:btn-circle tw:btn-lg  tw:shadow tw:bg-base-100', children: jsxRuntime.jsx(SVG, { src: PlusSVG, className: 'tw:h-5 tw:w-5' }) }), jsxRuntime.jsx("ul", { tabIndex: 0, className: 'tw:dropdown-content tw:pr-1 tw:list-none', children: layers.map((layer) => layer.api?.createItem &&
+                        hasUserPermission(layer.api.collectionName, 'create', undefined, layer) &&
+                        layer.listed && (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { children: jsxRuntime.jsx("div", { className: 'tw:tooltip tw:tooltip-left', "data-tip": layer.menuText, children: jsxRuntime.jsx("button", { tabIndex: 0, className: 'tw:z-500  tw:border-0 tw:pl-2 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden', style: { backgroundColor: layer.menuColor || '#777' }, onClick: () => {
+                                        triggerAction(layer);
+                                    }, onTouchEnd: (e) => {
+                                        triggerAction(layer);
+                                        e.preventDefault();
+                                    }, children: jsxRuntime.jsx("img", { src: layer.menuIcon, className: 'tw:h-6 tw:w-6 tw:text-white', style: { filter: 'invert(100%) brightness(200%)' } }) }) }) }) }, layer.name))) })] })) : ('') }));
+}
+
+const Control = ({ position, children, zIndex, absolute, }) => {
+    const controlContainerRef = React.createRef();
+    React.useEffect(() => {
+        if (controlContainerRef.current !== null) {
+            leaflet.DomEvent.disableClickPropagation(controlContainerRef.current);
+            leaflet.DomEvent.disableScrollPropagation(controlContainerRef.current);
+        }
+    }, [controlContainerRef]);
+    return (jsxRuntime.jsx("div", { ref: controlContainerRef, style: { zIndex }, className: `${absolute && 'tw:absolute'} tw:z-999 tw:flex-col ${position === 'topLeft' && 'tw:top-4 tw:left-4'} ${position === 'bottomLeft' && 'tw:bottom-4 tw:left-4'} ${position === 'topRight' && 'tw:bottom-4 tw:right-4'} ${position === 'bottomRight' && 'tw:bottom-4 tw:right-4'}`, children: children }));
+};
+
+function FunnelIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
+  }));
+}
+const ForwardRef$4 = /*#__PURE__*/ React__namespace.forwardRef(FunnelIcon);
+
+function FilterControl() {
+    const [open, setOpen] = React.useState(false);
+    const groupTypes = [
+        { text: 'Regional Gruppe', value: 'Regional-Gruppe' },
+        { text: 'Themen Gruppe', value: 'Themen-Gruppe' },
+        { text: 'liebevoll.jetzt', value: 'liebevoll.jetzt' },
+    ];
+    React.useEffect(() => {
+        groupTypes.map((layer) => addVisibleGroupType(layer.value));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const isGroupTypeVisible = TagView.useIsGroupTypeVisible();
+    const toggleVisibleGroupType = TagView.useToggleVisibleGroupType();
+    const addVisibleGroupType = TagView.useAddVisibleGroupType();
+    const visibleGroupTypes = TagView.useVisibleGroupType();
+    return (jsxRuntime.jsx("div", { className: 'tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit', children: open ? (jsxRuntime.jsxs("div", { className: 'tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:w-fit tw:transition-all tw:duration-300', children: [jsxRuntime.jsx("label", { className: 'tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600', onClick: () => {
+                        setOpen(false);
+                    }, children: jsxRuntime.jsx("p", { className: 'tw:text-center ', children: "\u2715" }) }), jsxRuntime.jsx("ul", { className: 'tw:flex-row', children: groupTypes.map((groupType) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("label", { htmlFor: groupType.value, className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-1', children: [jsxRuntime.jsx("input", { id: groupType.value, onChange: () => toggleVisibleGroupType(groupType.value), type: 'checkbox', className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: isGroupTypeVisible(groupType.value) }), jsxRuntime.jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer', children: groupType.text })] }) }, groupType.value))) })] })) : (jsxRuntime.jsxs("div", { className: 'tw:indicator', children: [visibleGroupTypes.length < groupTypes.length && (jsxRuntime.jsx("span", { className: 'tw:indicator-item tw:badge tw:badge-success tw:h-4 tw:p-2 tw:translate-x-1/3 tw:-translate-y-1/3 tw:border-0' })), jsxRuntime.jsx("div", { className: 'tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer', onClick: () => {
+                        setOpen(true);
+                    }, children: jsxRuntime.jsx(ForwardRef$4, { className: 'size-6 tw:stroke-[2.5]' }) })] })) }));
+}
+
+function HeartIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
+  }));
+}
+const ForwardRef$3 = /*#__PURE__*/ React__namespace.forwardRef(HeartIcon);
+
+const GratitudeControl = () => {
+    const navigate = reactRouterDom.useNavigate();
+    const { isAuthenticated } = TagView.useAuth();
+    if (isAuthenticated) {
+        return (jsxRuntime.jsx("div", { className: 'tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit', children: jsxRuntime.jsx("div", { className: 'tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer', onClick: () => {
+                    navigate('/select-user');
+                }, children: jsxRuntime.jsx(ForwardRef$3, { className: 'tw:stroke-[2.5]' }) }) }));
+    }
+    else
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+
+var LayerSVG = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHZpZXdCb3g9JzAgMCAyMCAyMCcgc3Ryb2tlLXdpZHRoPSIyIiB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPgogICAgPHBhdGgKICAgICAgICBpZD0nc3ZnXzEnCiAgICAgICAgZmlsbD0nY3VycmVudENvbG9yJwogICAgICAgIGQ9J20yLjc1NTY1LDExLjkwNzI3bC0xLjAzODUyLDAuMjgzNzJjLTAuNzc3MTgsMC4zODg1OSAtMC43NzcxOCwxLjAxMzggMCwxLjQwMjNsNy4wMTU2LDMuNTA3OGMwLjc3NzE4LDAuMzg4NTkgMi4wMjc1LDAuMzg4NTkgMi44MDQ3LDBsNy4wMTU2LC0zLjUwNzhjMC43NzcxOCwtMC4zODg1OSAwLjc3NzE4LC0xLjAxMzggMCwtMS40MDIzbC0wLjYzMzExLC0wLjQ4NjQzbC00LjY3NzE4LDIuMjM2MjRjLTEuNTQ1MiwwLjc3MjYyIC0zLjMxODc3LDEuNTgzNDMgLTQuODY0MDcsMC44MTA4MWwtNS42MjMwMiwtMi44NDQzNHonCiAgICAvPgogICAgPHBhdGgKICAgICAgICBpZD0nc3ZnXzInCiAgICAgICAgc3Ryb2tlPSdjdXJyZW50Q29sb3InCiAgICAgICAgZmlsbD0nbm9uZScKICAgICAgICBkPSdtMTEuMjQ3LDQuMzA4NTFsNi4yMzQ5LDMuMDg3N2MwLjY5MDgzLDAuMzQyMTEgMC42OTA4MywwLjg5Mjk1IDAsMS4yMzUxbC02LjIzNDksMy4wODc3Yy0wLjY5MDgzLDAuMzQyMTEgLTEuODAzMSwwLjM0MjEyIC0yLjQ5NCwwbC02LjIzNDksLTMuMDg3N2MtMC42OTA4MywtMC4zNDIxMSAtMC42OTA4MywtMC44OTI5NSAwLC0xLjIzNTFsNi4yMzQ5LC0zLjA4NzdjMC42OTA4MywtMC4zNDIxMSAxLjgwMzEsLTAuMzQyMTEgMi40OTQsMHonCiAgICAvPgo8L3N2Zz4=';
+
+function LayerControl({ expandLayerControl = false }) {
+    const [open, setOpen] = React.useState(expandLayerControl);
+    const layers = TagView.useLayers();
+    const isLayerVisible = TagView.useIsLayerVisible();
+    const toggleVisibleLayer = TagView.useToggleVisibleLayer();
+    return (jsxRuntime.jsx("div", { className: 'tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit', children: open ? (jsxRuntime.jsxs("div", { className: 'tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:transition-all tw:w-fit tw:duration-300', children: [jsxRuntime.jsx("label", { className: 'tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600', onClick: () => {
+                        setOpen(false);
+                    }, children: jsxRuntime.jsx("p", { className: 'tw:text-center ', children: "\u2715" }) }), jsxRuntime.jsx("ul", { className: 'tw:flex-row', children: layers.map((layer) => layer.listed && (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("label", { htmlFor: layer.name, className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-1 tw:text-base-content', children: [jsxRuntime.jsx("input", { id: layer.name, onChange: () => toggleVisibleLayer(layer), type: 'checkbox', className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: isLayerVisible(layer) }), jsxRuntime.jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer', children: layer.name })] }) }, layer.name))) })] })) : (jsxRuntime.jsx("div", { className: 'tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer', onClick: () => {
+                setOpen(true);
+            }, children: jsxRuntime.jsx(SVG, { src: LayerSVG }) })) }));
+}
+
+function FlagIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5"
+  }));
+}
+const ForwardRef$2 = /*#__PURE__*/ React__namespace.forwardRef(FlagIcon);
+
+function MagnifyingGlassIcon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "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"
+  }));
+}
+const ForwardRef$1 = /*#__PURE__*/ React__namespace.forwardRef(MagnifyingGlassIcon);
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+const useTimeout = (callback, delay) => {
+    const callbackRef = React.useRef(callback);
+    const timeoutRef = React.useRef();
+    React.useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    const set = React.useCallback(() => {
+        timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
+    }, [delay]);
+    const clear = React.useCallback(() => {
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+    }, []);
+    React.useEffect(() => {
+        set();
+        return clear;
+    }, [delay, set, clear]);
+    const reset = React.useCallback(() => {
+        clear();
+        set();
+    }, [clear, set]);
+    return { reset, clear };
+};
+
+const useDebounce = (callback, delay, deps) => {
+    const { reset, clear } = useTimeout(callback, delay);
+    React.useEffect(reset, [...deps, reset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(clear, []);
+};
+
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+const createSvg = (shape, markerColor, borderColor) => {
+    const svgMap = {
+        circle: '<svg width="33" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307" fill="' +
+            markerColor +
+            '" /><path d="M17.488 2.748c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.44-17.863.055-.08a15.422 15.422 0 002.343-6.112c.124-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307m0 1.071c7.68 0 13.929 6.386 13.929 14.236 0 .685-.064 1.423-.193 2.258-.325 2.075-1.059 3.99-2.164 5.667l-.055.078-11.557 16.595L6.032 26.14l-.12-.174a14.256 14.256 0 01-2.105-5.29 14.698 14.698 0 01-.247-2.62c0-7.851 6.249-14.237 13.928-14.237" fill="' +
+            borderColor +
+            '" opacity="1" /></svg>',
+        square: '<svg width="33" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M28.205 3.217H6.777c-2.367 0-4.286 1.87-4.286 4.179v19.847c0 2.308 1.919 4.179 4.286 4.179h5.357l5.337 13.58 5.377-13.58h5.357c2.366 0 4.285-1.87 4.285-4.179V7.396c0-2.308-1.919-4.179-4.285-4.179" fill="' +
+            markerColor +
+            '" /><g opacity="1" transform="matrix(1.0714 0 0 -1.0714 -233.22 146.783)"><path d="M244 134h-20c-2.209 0-4-1.746-4-3.9v-18.525c0-2.154 1.791-3.9 4-3.9h5L233.982 95 239 107.675h5c2.209 0 4 1.746 4 3.9V130.1c0 2.154-1.791 3.9-4 3.9m0-1c1.654 0 3-1.301 3-2.9v-18.525c0-1.599-1.346-2.9-3-2.9h-5.68l-.25-.632-4.084-10.318-4.055 10.316-.249.634H224c-1.654 0-3 1.301-3 2.9V130.1c0 1.599 1.346 2.9 3 2.9h20" fill="' +
+            borderColor +
+            '" /></g></svg>',
+        star: '<svg width="34" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M32.92 16.93l-3.525-3.525V8.419a1.983 1.983 0 00-1.983-1.982h-4.985L18.9 2.91a1.984 1.984 0 00-2.803 0l-3.524 3.526H7.588a1.983 1.983 0 00-1.982 1.982v4.986L2.081 16.93a1.982 1.982 0 000 2.803l3.525 3.526v4.984c0 1.096.888 1.983 1.982 1.983h4.986L17.457 45l4.97-14.773h4.985a1.983 1.983 0 001.983-1.983V23.26l3.525-3.526a1.982 1.982 0 000-2.803" fill="' +
+            markerColor +
+            '" /><g opacity=".15" transform="matrix(1.0667 0 0 -1.0667 -347.3 97.26)"><path d="M342 89c-.476 0-.951-.181-1.314-.544l-3.305-3.305h-4.673a1.858 1.858 0 01-1.859-1.858v-4.674l-3.305-3.305a1.857 1.857 0 010-2.627l3.305-3.305v-4.674a1.86 1.86 0 011.859-1.859h4.673L341.959 49l4.659 13.849h4.674a1.86 1.86 0 011.859 1.859v4.674l3.305 3.305a1.858 1.858 0 010 2.627l-3.305 3.305v4.674a1.859 1.859 0 01-1.859 1.858h-4.674l-3.304 3.305A1.851 1.851 0 01342 89m0-1a.853.853 0 00.607-.251l3.304-3.305.293-.293h5.088a.86.86 0 00.859-.858v-5.088l3.598-3.598A.852.852 0 00356 74a.85.85 0 00-.251-.606l-3.598-3.598v-5.088a.86.86 0 00-.859-.859h-5.393l-.229-.681-3.702-11.006-3.637 11.001-.227.686h-5.396a.86.86 0 00-.859.859v5.088l-3.598 3.598c-.162.162-.251.377-.251.606s.089.445.251.607l3.598 3.598v5.088a.86.86 0 00.859.858h5.087l3.598 3.598A.853.853 0 00342 88" fill="#231f20" /></g></svg>',
+        penta: '<svg width="33" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M1.872 17.35L9.679 2.993h15.615L33.1 17.35 17.486 44.992z" fill="' +
+            markerColor +
+            '" /><g opacity=".15" transform="matrix(1.0769 0 0 -1.0769 -272.731 48.23)"><path d="M276.75 42h-14.5L255 28.668 269.5 3 284 28.668zm-.595-1l6.701-12.323L269.5 5.033l-13.356 23.644L262.845 41z" fill="#231f20" /></g></svg>',
+    };
+    // eslint-disable-next-line security/detect-object-injection
+    return svgMap[shape];
+};
+const MarkerIconFactory = (shape, color1, color2, icon, assetsURL) => {
+    if (icon)
+        return leaflet.divIcon({
+            html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img class="overlay-svg" style="width: ${icon.size ? icon.size : '12.5'}px; filter: invert(1) brightness(2);" src="${`${assetsURL ?? ''}` + icon.image}"></div>`,
+            iconAnchor: [17, 40],
+            popupAnchor: [0, -40],
+            iconSize: new leaflet.Point(40, 46),
+            className: 'leaflet-data-marker',
+            shadowAnchor: [0, 0],
+        });
+    else
+        return leaflet.divIcon({
+            html: `<div class="svg-container">${createSvg(shape, color1, color2)}<svg fill="#fff" class="overlay-svg" width="13"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"/></svg></div>`,
+            iconAnchor: [17, 40],
+            popupAnchor: [0, -40],
+            iconSize: new leaflet.Point(40, 46),
+            className: 'leaflet-data-marker',
+            shadowAnchor: [0, 0],
+        });
+};
+
+var TargetSVG = 'data:image/svg+xml;base64,PHN2ZwogICAgZmlsbD0nY3VycmVudENvbG9yJwogICAgdmlld0JveD0nMCAwIDMyIDMyJwogICAgdmVyc2lvbj0nMS4xJwogICAgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJwo+CiAgPHBhdGggZD0nTTMwIDE0Ljc1aC0yLjgyNGMtMC42MDgtNS4yMTktNC43MDctOS4zMTgtOS44NzQtOS45MjFsLTAuMDUzLTAuMDA1di0yLjgyNGMwLTAuNjktMC41Ni0xLjI1LTEuMjUtMS4yNXMtMS4yNSAwLjU2LTEuMjUgMS4yNXYwIDIuODI0Yy01LjIxOSAwLjYwOC05LjMxOCA0LjcwNy05LjkyMSA5Ljg3NGwtMC4wMDUgMC4wNTNoLTIuODI0Yy0wLjY5IDAtMS4yNSAwLjU2LTEuMjUgMS4yNXMwLjU2IDEuMjUgMS4yNSAxLjI1djBoMi44MjRjMC42MDggNS4yMTkgNC43MDcgOS4zMTggOS44NzQgOS45MjFsMC4wNTMgMC4wMDV2Mi44MjRjMCAwLjY5IDAuNTYgMS4yNSAxLjI1IDEuMjVzMS4yNS0wLjU2IDEuMjUtMS4yNXYwLTIuODI0YzUuMjE5LTAuNjA4IDkuMzE4LTQuNzA3IDkuOTIxLTkuODc0bDAuMDA1LTAuMDUzaDIuODI0YzAuNjkgMCAxLjI1LTAuNTYgMS4yNS0xLjI1cy0wLjU2LTEuMjUtMS4yNS0xLjI1djB6TTE3LjI1IDI0LjYyNHYtMi42MjRjMC0wLjY5LTAuNTYtMS4yNS0xLjI1LTEuMjVzLTEuMjUgMC41Ni0xLjI1IDEuMjV2MCAyLjYyNGMtMy44MjEtMC41Ny02LjgwMy0zLjU1My03LjM2OC03LjMyNmwtMC4wMDYtMC4wNDhoMi42MjRjMC42OSAwIDEuMjUtMC41NiAxLjI1LTEuMjVzLTAuNTYtMS4yNS0xLjI1LTEuMjV2MGgtMi42MjRjMC41Ny0zLjgyMSAzLjU1My02LjgwNCA3LjMyNi03LjM2OGwwLjA0OC0wLjAwNnYyLjYyNGMwIDAuNjkgMC41NiAxLjI1IDEuMjUgMS4yNXMxLjI1LTAuNTYgMS4yNS0xLjI1djAtMi42MjRjMy44MjEgMC41NyA2LjgwMyAzLjU1MyA3LjM2OCA3LjMyNmwwLjAwNiAwLjA0OGgtMi42MjRjLTAuNjkgMC0xLjI1IDAuNTYtMS4yNSAxLjI1czAuNTYgMS4yNSAxLjI1IDEuMjV2MGgyLjYyNGMtMC41NzEgMy44MjEtMy41NTMgNi44MDMtNy4zMjYgNy4zNjhsLTAuMDQ4IDAuMDA2eic+PC9wYXRoPgo8L3N2Zz4=';
+
+// Converts leaflet.locatecontrol to a React Component
+const LocateControl = () => {
+    const map = reactLeaflet.useMap();
+    // prevent react18 from calling useEffect twice
+    const init = React.useRef(false);
+    const [lc, setLc] = React.useState(null);
+    const [active, setActive] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    React.useEffect(() => {
+        if (!init.current) {
+            // @ts-ignore
+            setLc(leaflet.control.locate().addTo(map));
+            init.current = true;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    reactLeaflet.useMapEvents({
+        locationfound: () => {
+            setLoading(false);
+            setActive(true);
+        },
+    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: 'tw:card tw:flex-none tw:h-12 tw:w-12 tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center  tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:ml-2', children: jsxRuntime.jsx("div", { className: 'tw:card-body tw:card tw:p-2 tw:h-10 tw:w-10  ', onClick: () => {
+                    if (active) {
+                        lc.stop();
+                        setActive(false);
+                    }
+                    else {
+                        lc.start();
+                        setLoading(true);
+                    }
+                }, children: loading ? (jsxRuntime.jsx("span", { className: 'tw:loading tw:loading-spinner tw:loading-md tw:mt-1' })) : (jsxRuntime.jsx(SVG, { src: TargetSVG, className: 'tw:mt-1 tw:p-[1px]', style: { fill: `${active ? '#fc8702' : 'currentColor'}` } })) }) }) }));
+};
+
+function Bars3Icon({
+  title,
+  titleId,
+  ...props
+}, svgRef) {
+  return /*#__PURE__*/React__namespace.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: svgRef,
+    "aria-labelledby": titleId
+  }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M2 3.75A.75.75 0 0 1 2.75 3h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 3.75ZM2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8Zm0 4.25a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z",
+    clipRule: "evenodd"
+  }));
+}
+const ForwardRef = /*#__PURE__*/ React__namespace.forwardRef(Bars3Icon);
+
+// Converts leaflet.locatecontrol to a React Component
+const SidebarControl = () => {
+    const appState = TagView.useAppState();
+    const setAppState = TagView.useSetAppState();
+    const toggleSidebar = () => {
+        setAppState({ sideBarOpen: !appState.sideBarOpen });
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: 'tw:card tw:justify-center tw:items-center tw:bg-base-100 tw:flex-none tw:shadow-xl tw:px-0 tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:mr-2 tw:h-12 tw:w-12 ', onClick: () => toggleSidebar(), children: jsxRuntime.jsx(ForwardRef, { className: 'tw:inline-block tw:w-5 tw:h-5' }) }) }));
+};
+
+const SearchControl = () => {
+    const windowDimensions = TagView.useWindowDimensions();
+    const [popupOpen, setPopupOpen] = React.useState(false);
+    const [value, setValue] = React.useState('');
+    const [geoResults, setGeoResults] = React.useState([]);
+    const [tagsResults, setTagsResults] = React.useState([]);
+    const [itemsResults, setItemsResults] = React.useState([]);
+    const [hideSuggestions, setHideSuggestions] = React.useState(true);
+    const map = reactLeaflet.useMap();
+    const tags = TagView.useTags();
+    const items = TagView.useItems();
+    const leafletRefs = TagView.useLeafletRefs();
+    const addFilterTag = TagView.useAddFilterTag();
+    const appState = TagView.useAppState();
+    reactLeaflet.useMapEvents({
+        popupopen: () => {
+            setPopupOpen(true);
+        },
+        popupclose: () => {
+            setPopupOpen(false);
+        },
+    });
+    const navigate = reactRouterDom.useNavigate();
+    useDebounce(() => {
+        const searchGeo = async () => {
+            try {
+                const { data } = await axios.get(`https://photon.komoot.io/api/?q=${value}&limit=5`);
+                setGeoResults(data.features);
+                // eslint-disable-next-line no-catch-all/no-catch-all
+            }
+            catch (error) {
+                // eslint-disable-next-line no-console
+                console.log(error);
+            }
+        };
+        searchGeo();
+        setItemsResults(items.filter((item) => {
+            return (value.length > 2 &&
+                ((item.layer?.listed && item.name.toLowerCase().includes(value.toLowerCase())) ||
+                    item.text?.toLowerCase().includes(value.toLowerCase())));
+        }));
+        let phrase = value;
+        if (value.startsWith('#'))
+            phrase = value.substring(1);
+        setTagsResults(tags.filter((tag) => tag.name.toLowerCase().includes(phrase.toLowerCase())));
+    }, 500, [value]);
+    const hide = async () => {
+        setTimeout(() => {
+            setHideSuggestions(true);
+        }, 200);
+    };
+    const searchInput = React.useRef(null);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !(windowDimensions.height < 500 && popupOpen && hideSuggestions) && (jsxRuntime.jsxs("div", { className: 'tw:w-[calc(100vw-2rem)] tw:max-w-[22rem] ', children: [jsxRuntime.jsxs("div", { className: 'tw:flex tw:flex-row', children: [appState.embedded && jsxRuntime.jsx(SidebarControl, {}), jsxRuntime.jsxs("div", { className: 'tw:relative tw:shrink tw:max-w-69 tw:w-full', children: [jsxRuntime.jsx("input", { type: 'text', placeholder: 'search ...', autoComplete: 'off', value: value, className: 'tw:input tw:input-bordered tw:h-12 tw:grow tw:shadow-xl tw:rounded-box tw:pr-12 tw:w-full', ref: searchInput, onChange: (e) => setValue(e.target.value), onFocus: () => {
+                                        setHideSuggestions(false);
+                                        if (windowDimensions.width < 500)
+                                            map.closePopup();
+                                    }, onBlur: () => hide() }), value.length > 0 && (jsxRuntime.jsx("button", { className: 'tw:btn tw:btn-sm tw:btn-circle tw:absolute tw:right-2 tw:top-2', onClick: () => setValue(''), children: "\u2715" }))] }), jsxRuntime.jsx(LocateControl, {})] }), hideSuggestions ||
+                    (Array.from(geoResults).length === 0 &&
+                        itemsResults.length === 0 &&
+                        tagsResults.length === 0 &&
+                        !isGeoCoordinate(value)) ||
+                    value.length === 0 ? ('') : (jsxRuntime.jsxs("div", { className: 'tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000 tw:w-83', children: [tagsResults.length > 0 && (jsxRuntime.jsx("div", { className: 'tw:flex tw:flex-wrap', children: tagsResults.slice(0, 3).map((tag) => (jsxRuntime.jsx("div", { className: 'tw:rounded-2xl tw:text-white tw:p-1 tw:px-4 tw:shadow-md tw:card tw:mr-2 tw:mb-2 tw:cursor-pointer', style: { backgroundColor: tag.color }, onClick: () => {
+                                    addFilterTag(tag);
+                                }, children: jsxRuntime.jsxs("b", { children: ["#", TagView.decodeTag(tag.name)] }) }, tag.name))) })), itemsResults.length > 0 && tagsResults.length > 0 && (jsxRuntime.jsx("hr", { className: 'tw:opacity-50' })), itemsResults.slice(0, 5).map((item) => (jsxRuntime.jsxs("div", { className: 'tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row', onClick: () => {
+                                const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
+                                    .marker;
+                                if (marker) {
+                                    navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`);
+                                }
+                                else {
+                                    navigate('item/' + item.id + '?' + new URLSearchParams(window.location.search));
+                                }
+                            }, children: [item.layer?.menuIcon ? (jsxRuntime.jsx(SVG, { src: item.layer.menuIcon, className: 'tw:text-current tw:mr-2 tw:mt-0 tw:w-5 tw:h-5', preProcessor: (code) => {
+                                        code = code.replace(/fill=".*?"/g, 'fill="currentColor"');
+                                        code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"');
+                                        return code;
+                                    } })) : (jsxRuntime.jsx("div", { className: 'tw:w-5' })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: 'tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]', children: item.name }), jsxRuntime.jsx("div", { className: 'tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]', children: item.text })] })] }, item.id))), Array.from(geoResults).length > 0 &&
+                            (itemsResults.length > 0 || tagsResults.length > 0) && (jsxRuntime.jsx("hr", { className: 'tw:opacity-50' })), Array.from(geoResults).map((geo) => (jsxRuntime.jsxs("div", { className: 'tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer', onClick: () => {
+                                searchInput.current?.blur();
+                                leaflet.marker(new leaflet.LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), {
+                                    icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)'),
+                                })
+                                    .addTo(map)
+                                    .bindPopup(`<h3 class="tw:text-base tw:font-bold">${geo?.properties.name ? geo?.properties.name : value}<h3>${capitalizeFirstLetter(geo?.properties?.osm_value)}`)
+                                    .openPopup()
+                                    .addEventListener('popupclose', (e) => {
+                                    // eslint-disable-next-line no-console
+                                    console.log(e.target.remove());
+                                });
+                                if (geo.properties.extent)
+                                    map.fitBounds(new leaflet.LatLngBounds(new leaflet.LatLng(geo.properties.extent[1], geo.properties.extent[0]), new leaflet.LatLng(geo.properties.extent[3], geo.properties.extent[2])));
+                                else
+                                    map.setView(new leaflet.LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), 15, { duration: 1 });
+                                hide();
+                            }, children: [jsxRuntime.jsx(ForwardRef$1, { className: 'tw:text-current tw:mr-2 tw:mt-0 tw:w-5' }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: 'tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]', children: geo?.properties.name ? geo?.properties.name : value }), jsxRuntime.jsxs("div", { className: 'tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]', children: [geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `, ' ', geo?.properties?.osm_value &&
+                                                    geo?.properties?.osm_value !== 'yes' &&
+                                                    geo?.properties?.osm_value !== 'primary' &&
+                                                    geo?.properties?.osm_value !== 'path' &&
+                                                    geo?.properties?.osm_value !== 'secondary' &&
+                                                    geo?.properties?.osm_value !== 'residential' &&
+                                                    geo?.properties?.osm_value !== 'unclassified' &&
+                                                    `${capitalizeFirstLetter(geo?.properties?.osm_value)}, `, ' ', geo.properties.state && `${geo.properties.state}, `, ' ', geo.properties.country && geo.properties.country] })] })] }, Math.random()))), isGeoCoordinate(value) && (jsxRuntime.jsxs("div", { className: 'tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer', onClick: () => {
+                                leaflet.marker(new leaflet.LatLng(extractCoordinates(value)[0], extractCoordinates(value)[1]), {
+                                    icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)'),
+                                })
+                                    .addTo(map)
+                                    .bindPopup(`<h3 class="tw:text-base tw:font-bold">${extractCoordinates(value)[0]}, ${extractCoordinates(value)[1]}</h3>`)
+                                    .openPopup()
+                                    .addEventListener('popupclose', (e) => {
+                                    // eslint-disable-next-line no-console
+                                    console.log(e.target.remove());
+                                });
+                                map.setView(new leaflet.LatLng(extractCoordinates(value)[0], extractCoordinates(value)[1]), 15, { duration: 1 });
+                            }, children: [jsxRuntime.jsx(ForwardRef$2, { className: 'tw:text-current tw:mr-2 tw:mt-0 tw:w-4' }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: 'tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]', children: value }), jsxRuntime.jsx("div", { className: 'tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]', children: 'Coordiante' })] })] }))] }))] })) }));
+};
+function isGeoCoordinate(input) {
+    const geokoordinatenRegex = 
+    // eslint-disable-next-line security/detect-unsafe-regex
+    /^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?),\s*[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/;
+    return geokoordinatenRegex.test(input);
+}
+function extractCoordinates(input) {
+    const result = input.split(',');
+    if (result) {
+        const latitude = parseFloat(result[0]);
+        const longitude = parseFloat(result[1]);
+        if (!isNaN(latitude) && !isNaN(longitude)) {
+            return [latitude, longitude];
+        }
+    }
+    return null; // Invalid input or error
+}
+function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+const TagsControl = () => {
+    const filterTags = TagView.useFilterTags();
+    const removeFilterTag = TagView.useRemoveFilterTag();
+    return (jsxRuntime.jsx("div", { className: 'tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs', children: filterTags.map((tag) => (jsxRuntime.jsxs("div", { className: 'tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw:card tw:mr-2 tw:mb-2', style: { backgroundColor: tag.color }, children: [jsxRuntime.jsx("div", { className: 'tw:card-actions tw:justify-end', children: jsxRuntime.jsx("label", { className: 'tw:btn tw:btn-xs tw:btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600', onClick: () => removeFilterTag(tag.name), children: "\u2715" }) }), jsxRuntime.jsxs("b", { children: ["#", TagView.decodeTag(tag.name)] })] }, tag.id))) }));
+};
+
+const SelectPosition = ({ setSelectNewItemPosition, selectNewItemPosition, }) => {
+    return (jsxRuntime.jsxs("div", { className: 'tw:animate-pulseGrow tw:button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md', children: [jsxRuntime.jsx("label", { className: 'tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600', onClick: () => {
+                    setSelectNewItemPosition(null);
+                }, children: jsxRuntime.jsx("p", { className: 'tw:text-center ', children: "\u2715" }) }), jsxRuntime.jsx("div", { className: 'tw:alert tw:bg-base-100 tw:text-base-content', children: jsxRuntime.jsxs("div", { children: [selectNewItemPosition && 'text' in selectNewItemPosition && (jsxRuntime.jsxs("span", { className: 'tw:text-lg', children: ["Select new position of ", jsxRuntime.jsx("b", { children: selectNewItemPosition.name }), " on the map!"] })), selectNewItemPosition && 'menuIcon' in selectNewItemPosition && (jsxRuntime.jsx("span", { className: 'tw:text-lg', children: "Select position on the map!" }))] }) })] }));
+};
+
+function UtopiaMapInner({ children, geo, showFilterControl = false, showGratitudeControl = false, showLayerControl = true, showThemeControl = false, defaultTheme = '', donationWidget, expandLayerControl, }) {
+    const selectNewItemPosition = TagView.useSelectPosition();
+    const setSelectNewItemPosition = TagView.useSetSelectPosition();
+    const setClusterRef = TagView.useSetClusterRef();
+    const clusterRef = TagView.useClusterRef();
+    const setMapClicked = TagView.useSetMapClicked();
+    const { setPopupForm } = usePopupForm();
+    const layers = TagView.useLayers();
+    const addVisibleLayer = TagView.useAddVisibleLayer();
+    const leafletRefs = TagView.useLeafletRefs();
+    const location = reactRouterDom.useLocation();
+    const map = reactLeaflet.useMap();
+    useTheme(defaultTheme);
+    React.useEffect(() => {
+        layers.forEach((layer) => addVisibleLayer(layer));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layers]);
+    const setAppState = TagView.useSetAppState();
+    React.useEffect(() => {
+        setAppState({ showThemeControl });
+    }, [setAppState, showThemeControl]);
+    const init = React.useRef(false);
+    React.useEffect(() => {
+        if (!init.current) {
+            donationWidget &&
+                setTimeout(() => {
+                    reactToastify.toast(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TagView.TextView, { itemId: '', rawText: '## Do you like this Map?' }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(TagView.TextView, { itemId: '', rawText: 'Support us building free opensource maps for communities and help us grow 🌱☀️' }), jsxRuntime.jsx("a", { href: 'https://opencollective.com/utopia-project', children: jsxRuntime.jsx("div", { className: 'tw:btn  tw:btn-sm tw:float-right tw:btn-primary', children: "Donate" }) })] })] }), { autoClose: false });
+                }, 600000);
+            init.current = true;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    function MapEventListener() {
+        reactLeaflet.useMapEvents({
+            click: (e) => {
+                resetMetaTags();
+                // eslint-disable-next-line no-console
+                console.log(e.latlng.lat + ',' + e.latlng.lng);
+                if (selectNewItemPosition) {
+                    setMapClicked({ position: e.latlng, setItemFormPopup: setPopupForm });
+                }
+            },
+            moveend: () => { },
+        });
+        return null;
+    }
+    reactLeaflet.useMapEvents({
+        popupopen: (e) => {
+            const item = Object.entries(leafletRefs).find((r) => r[1].popup === e.popup)?.[1].item;
+            if (window.location.pathname.split('/')[1] !== item?.id) {
+                const params = new URLSearchParams(window.location.search);
+                if (!location.pathname.includes('/item/')) {
+                    window.history.pushState({}, '', `/${item?.id}` + `${params.toString() !== '' ? `?${params}` : ''}`);
+                }
+                let title = '';
+                if (item?.name)
+                    title = item.name;
+                document.title = `${document.title.split('-')[0]} - ${title}`;
+            }
+        },
+    });
+    const openPopup = () => {
+        if (!containsUUID(window.location.pathname)) {
+            map.closePopup();
+        }
+        else {
+            if (window.location.pathname.split('/')[1]) {
+                const id = window.location.pathname.split('/')[1];
+                // eslint-disable-next-line security/detect-object-injection
+                const ref = leafletRefs[id];
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (ref) {
+                    clusterRef.hasLayer(ref.marker) &&
+                        clusterRef?.zoomToShowLayer(ref.marker, () => {
+                            ref.marker.openPopup();
+                        });
+                    let title = '';
+                    if (ref.item.name)
+                        title = ref.item.name;
+                    document.title = `${document.title.split('-')[0]} - ${title}`;
+                    document
+                        .querySelector('meta[property="og:title"]')
+                        ?.setAttribute('content', ref.item.name);
+                    document
+                        .querySelector('meta[property="og:description"]')
+                        ?.setAttribute('content', ref.item.text ?? '');
+                }
+            }
+        }
+    };
+    React.useEffect(() => {
+        openPopup();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [leafletRefs, location]);
+    const resetMetaTags = () => {
+        const params = new URLSearchParams(window.location.search);
+        if (!containsUUID(window.location.pathname)) {
+            window.history.pushState({}, '', '/' + `${params.toString() !== '' ? `?${params}` : ''}`);
+        }
+        document.title = document.title.split('-')[0];
+        document.querySelector('meta[property="og:title"]')?.setAttribute('content', document.title);
+        document
+            .querySelector('meta[property="og:description"]')
+            ?.setAttribute('content', `${document.querySelector('meta[name="description"]')?.getAttribute('content')}`);
+    };
+    const onEachFeature = (feature, layer) => {
+        if (feature.properties) {
+            layer.bindPopup(feature.properties.name);
+        }
+    };
+    const addFilterTag = TagView.useAddFilterTag();
+    const resetFilterTags = TagView.useResetFilterTags();
+    const tags = TagView.useTags();
+    const filterTags = TagView.useFilterTags();
+    React.useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const urlTags = params.get('tags');
+        const decodedTags = urlTags ? decodeURIComponent(urlTags) : '';
+        const decodedTagsArray = decodedTags.split(';').filter(Boolean);
+        const urlDiffersFromState = decodedTagsArray.some((ut) => !filterTags.find((ft) => ut.toLowerCase() === ft.name.toLowerCase())) ||
+            filterTags.some((ft) => !decodedTagsArray.find((ut) => ut.toLowerCase() === ft.name.toLowerCase()));
+        if (urlDiffersFromState) {
+            resetFilterTags();
+            decodedTagsArray.forEach((urlTag) => {
+                const match = tags.find((t) => t.name.toLowerCase() === urlTag.toLowerCase());
+                if (match)
+                    addFilterTag(match);
+            });
+        }
+    }, [location, tags, filterTags, addFilterTag, resetFilterTags]);
+    const toggleVisibleLayer = TagView.useToggleVisibleLayer();
+    const allLayers = TagView.useLayers();
+    const initializedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (initializedRef.current || allLayers.length === 0)
+            return;
+        const params = new URLSearchParams(location.search);
+        const urlLayersParam = params.get('layers');
+        if (!urlLayersParam) {
+            initializedRef.current = true;
+            return;
+        }
+        const urlLayerNames = urlLayersParam.split(',').filter(Boolean);
+        const layerNamesToHide = allLayers
+            .map((l) => l.name)
+            .filter((name) => !urlLayerNames.includes(name));
+        layerNamesToHide.forEach((name) => {
+            const match = allLayers.find((l) => l.name === name);
+            if (match)
+                toggleVisibleLayer(match);
+        });
+        initializedRef.current = true;
+    }, [location, allLayers, toggleVisibleLayer]);
+    return (jsxRuntime.jsxs("div", { className: `tw:h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`, children: [jsxRuntime.jsx(reactRouterDom.Outlet, {}), jsxRuntime.jsxs(Control, { position: 'topLeft', zIndex: '1000', absolute: true, children: [jsxRuntime.jsx(SearchControl, {}), jsxRuntime.jsx(TagsControl, {})] }), jsxRuntime.jsxs(Control, { position: 'bottomLeft', zIndex: '999', absolute: true, children: [showFilterControl && jsxRuntime.jsx(FilterControl, {}), showLayerControl && jsxRuntime.jsx(LayerControl, { expandLayerControl: expandLayerControl ?? false }), showGratitudeControl && jsxRuntime.jsx(GratitudeControl, {})] }), jsxRuntime.jsx(reactLeaflet.TileLayer, { maxZoom: 19, attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png' }), jsxRuntime.jsx(MarkerClusterGroup, { ref: (r) => setClusterRef(r), showCoverageOnHover: true, chunkedLoading: true, maxClusterRadius: 50, removeOutsideVisibleBounds: false, children: children }), geo && (jsxRuntime.jsx(reactLeaflet.GeoJSON, { data: geo, onEachFeature: onEachFeature, eventHandlers: {
+                    click: (e) => {
+                        if (selectNewItemPosition) {
+                            e.layer.closePopup();
+                            setMapClicked({ position: e.latlng, setItemFormPopup: setPopupForm });
+                        }
+                    },
+                } })), jsxRuntime.jsx(MapEventListener, {}), jsxRuntime.jsx(AddButton, { triggerAction: setSelectNewItemPosition }), selectNewItemPosition != null && (jsxRuntime.jsx(SelectPosition, { selectNewItemPosition: selectNewItemPosition, setSelectNewItemPosition: setSelectNewItemPosition }))] }));
+}
+
+/**
+ * This component creates the map.
+ * ```tsx
+ *   <UtopiaMap center={[50.6, 9.5]} zoom={5} height="100dvh" width="100dvw" />
+ *  ```
+ * You can define its {@link Layer | `Layers`}  as supcomponents.
+ * ```tsx
+ *     <UtopiaMap center={[50.6, 15.5]} zoom={5} height="100dvh" width="100dvw">
+ *       <Layer
+ *         name="events"
+ *         markerIcon="calendar"
+ *         markerShape="square"
+ *         markerDefaultColor="#700"
+ *         data={events}
+ *       />
+ *       <Layer
+ *         name="places"
+ *         markerIcon="point"
+ *         markerShape="circle"
+ *         markerDefaultColor="#007"
+ *         data={places}
+ *       />
+ *     </UtopiaMap>
+ *  ```
+ * You can also pass {@link Tags | `Tags`}  or {@link Permissions | `Permissions`}  as subcomponents.
+ * ```tsx
+ *     <UtopiaMap center={[50.6, 15.5]} zoom={5} height="100dvh" width="100dvw">
+ *       ...
+ *       <Tags data={tags} />
+ *       <Permissions data={permissions} />
+ *     </UtopiaMap>
+ * ```
+ * @category Map
+ */
+function UtopiaMap({ height = '500px', width = '100%', center = [50.6, 9.5], zoom = 10, children, geo, showFilterControl = false, showGratitudeControl = false, showLayerControl = true, showZoomControl = false, showThemeControl = false, defaultTheme, donationWidget, expandLayerControl, }) {
+    return (jsxRuntime.jsx(ContextWrapper, { children: jsxRuntime.jsx(reactLeaflet.MapContainer, { style: { height, width }, center: new leaflet.LatLng(center[0], center[1]), zoom: zoom, zoomControl: showZoomControl, maxZoom: 19, children: jsxRuntime.jsx(UtopiaMapInner, { geo: geo, showFilterControl: showFilterControl, showGratitudeControl: showGratitudeControl, showLayerControl: showLayerControl, donationWidget: donationWidget, showThemeControl: showThemeControl, defaultTheme: defaultTheme, expandLayerControl: expandLayerControl, children: children }) }) }));
+}
+
+const LayerContext = React.createContext({
+    name: '',
+    markerDefaultColor: '',
+    markerDefaultColor2: '',
+    markerShape: '',
+    menuText: '',
+});
+
+/**
+ * @category Map
+ */
+const Layer = ({ data, children, name = 'places', menuIcon = 'MapPinIcon', menuText = 'add new place', menuColor = '#2E7D32', markerIcon, markerShape = 'circle', markerDefaultColor = '#777', markerDefaultColor2 = 'RGBA(35, 31, 32, 0.2)', api, itemType, userProfileLayer = false, customEditLink, customEditParameter, 
+// eslint-disable-next-line camelcase
+public_edit_items, listed = true, }) => {
+    const setItemsApi = TagView.useSetItemsApi();
+    const setItemsData = TagView.useSetItemsData();
+    const addTag = TagView.useAddTag();
+    const [newTagsToAdd] = React.useState([]);
+    const [tagsReady] = React.useState(false);
+    React.useEffect(() => {
+        data &&
+            setItemsData({
+                data,
+                children,
+                name,
+                menuIcon,
+                menuText,
+                menuColor,
+                markerIcon,
+                markerShape,
+                markerDefaultColor,
+                markerDefaultColor2,
+                api,
+                itemType,
+                userProfileLayer,
+                // Can we just use editCallback for all cases?
+                customEditLink,
+                customEditParameter,
+                // eslint-disable-next-line camelcase
+                public_edit_items,
+                listed,
+            });
+        api &&
+            setItemsApi({
+                data,
+                children,
+                name,
+                menuIcon,
+                menuText,
+                menuColor,
+                markerIcon,
+                markerShape,
+                markerDefaultColor,
+                markerDefaultColor2,
+                api,
+                itemType,
+                userProfileLayer,
+                customEditLink,
+                customEditParameter,
+                // eslint-disable-next-line camelcase
+                public_edit_items,
+                listed,
+            });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, api]);
+    React.useEffect(() => {
+        if (tagsReady) {
+            const processedTags = {};
+            newTagsToAdd.map((newtag) => {
+                if (!processedTags[newtag.name]) {
+                    processedTags[newtag.name] = true;
+                    addTag(newtag);
+                }
+                return null;
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tagsReady]);
+    return (jsxRuntime.jsx(LayerContext.Provider, { value: {
+            name,
+            markerDefaultColor,
+            markerDefaultColor2,
+            markerShape,
+            markerIcon,
+            menuText,
+        }, children: children }));
+};
+
+/**
+ * This Components injects Tags comming from an {@link ItemsApi | `API`}
+ * ```tsx
+ * <Tags api={tagsApi} />
+ * ```
+ * or from on {@link Tag| `Array`}
+ * ```tsx
+ * <Tags data={tags} />
+ * ```
+ * Can be child of {@link AppShell | `AppShell`}
+ * ```tsx
+ * <AppShell>
+ *     ...
+ *     <Tags api={tagsApi} />
+ * </AppShell>
+ *  ```
+ * Or child of {@link UtopiaMap | `UtopiaMap`}
+ * ```tsx
+ * <UtopiaMap>
+ *     ...
+ *     <Tags api={tagsApi} />
+ * </UtopiaMap>
+ * ```
+ * @category Map
+ */
+function Tags({ data, api }) {
+    const setTagData = TagView.useSetTagData();
+    const setTagApi = TagView.useSetTagApi();
+    React.useEffect(() => {
+        data && setTagData(data);
+        api && setTagApi(api);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api, data]);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+}
+
+/**
+ * This Components injects Permissions comming from an {@link ItemsApi | `API`}
+ * ```tsx
+ * <Permissions api={itemsApiInstance} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * ```
+ * or from on {@link Permission| `Array`}
+ * ```tsx
+ * <Permissions data={permissions} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * ```
+ * Can be child of {@link AppShell | `AppShell`}
+ * ```tsx
+ * <AppShell>
+ *     ...
+ *     <Permissions api={itemsApiInstance} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * </AppShell>
+ *  ```
+ * Or child of {@link UtopiaMap | `UtopiaMap`}
+ * ```tsx
+ * <UtopiaMap>
+ *     ...
+ *     <Permissions api={itemsApiInstance} adminRole="8141dee8-8e10-48d0-baf1-680aea271298" />
+ * </UtopiaMap>
+ * ```
+ * @category Map
+ */
+function Permissions({ data, api, adminRole, }) {
+    const setPermissionData = TagView.useSetPermissionData();
+    const setPermissionApi = TagView.useSetPermissionApi();
+    const setAdminRole = TagView.useSetAdminRole();
+    const { user } = TagView.useAuth();
+    React.useEffect(() => {
+        adminRole && setAdminRole(adminRole);
+        data && setPermissionData(data);
+        api && setPermissionApi(api);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [api, data, adminRole, user]);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+}
+
+const themes = [
+    'default',
+    'light',
+    'dark',
+    'valentine',
+    'retro',
+    'aqua',
+    'cyberpunk',
+    'caramellatte',
+    'abyss',
+    'silk',
+];
+const ThemeControl = () => {
+    const [theme, setTheme] = React.useState(() => {
+        const savedTheme = localStorage.getItem('theme');
+        return savedTheme ? JSON.parse(savedTheme) : 'default';
+    });
+    React.useEffect(() => {
+        if (theme !== 'default') {
+            localStorage.setItem('theme', JSON.stringify(theme));
+        }
+        else
+            localStorage.removeItem('theme');
+        document.documentElement.setAttribute('data-theme', theme);
+    }, [theme]);
+    return (jsxRuntime.jsxs("div", { className: 'tw:dropdown tw:mr-2', children: [jsxRuntime.jsxs("div", { tabIndex: 0, role: 'button', className: 'tw:btn tw:m-1', children: ["Theme", jsxRuntime.jsx("svg", { width: '12px', height: '12px', className: 'tw:inline-block tw:h-2 tw:w-2 tw:fill-current tw:opacity-60', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 2048 2048', children: jsxRuntime.jsx("path", { d: 'M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z' }) })] }), jsxRuntime.jsx("ul", { tabIndex: 0, className: 'tw:dropdown-content tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-36 tw:p-2 tw:shadow-2xl', children: themes.map((t) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("input", { className: `tw:btn ${theme === t ? 'tw:bg-base-300' : ''} tw:btn-sm tw:btn-block tw:btn-ghost tw:justify-start`, type: 'radio', name: 'theme', value: t, checked: theme === t, onChange: () => setTheme(t), "aria-label": t.toLowerCase() }) }, t))) })] }));
+};
+
+const UserControl = () => {
+    const { isAuthenticated, user, logout } = TagView.useAuth();
+    const appState = TagView.useAppState();
+    const [userProfile, setUserProfile] = React.useState({});
+    const items = TagView.useItems();
+    React.useEffect(() => {
+        const profile = user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer);
+        profile
+            ? setUserProfile(profile)
+            : setUserProfile({ id: 'new', name: user?.first_name ?? '', text: '' });
+    }, [user, items]);
+    const onLogout = async () => {
+        await reactToastify.toast.promise(logout(), {
+            success: {
+                render() {
+                    return 'Bye bye';
+                },
+                // other options
+                icon: '👋',
+            },
+            error: {
+                render({ data }) {
+                    return JSON.stringify(data);
+                },
+            },
+            pending: 'logging out ..',
+        });
+    };
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isAuthenticated ? (jsxRuntime.jsxs("div", { className: 'tw:flex tw:mr-2', children: [jsxRuntime.jsxs(reactRouterDom.Link, { to: `${userProfile.id && '/item/' + userProfile.id}`, className: 'tw:flex tw:items-center', children: [userProfile.image && (jsxRuntime.jsx("div", { className: 'tw:avatar', children: jsxRuntime.jsx("div", { className: 'tw:w-10 tw:rounded-full', children: jsxRuntime.jsx("img", { src: appState.assetsApi.url + userProfile.image }) }) })), jsxRuntime.jsx("div", { className: 'tw:ml-2 tw:mr-2', children: userProfile.name || user?.first_name })] }), jsxRuntime.jsxs("div", { className: 'tw:dropdown tw:dropdown-end', children: [jsxRuntime.jsx("label", { tabIndex: 0, className: 'tw:btn tw:btn-ghost tw:btn-square', children: jsxRuntime.jsx(TagView.ForwardRef, { className: 'tw:h-5 tw:w-5' }) }), jsxRuntime.jsxs("ul", { tabIndex: 0, className: 'tw:menu tw:menu-compact tw:dropdown-content tw:mt-4 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!', children: [jsxRuntime.jsx("li", { children: jsxRuntime.jsx(reactRouterDom.Link, { to: `${userProfile.id && '/edit-item/' + userProfile.id}`, children: "Profile" }) }), jsxRuntime.jsx("li", { children: jsxRuntime.jsx(reactRouterDom.Link, { to: '/user-settings', children: "Settings" }) }), jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { onClick: () => {
+                                            void onLogout();
+                                        }, children: "Logout" }) })] })] })] })) : (jsxRuntime.jsxs("div", { className: 'tw:mr-2 tw:flex tw:items-center', children: [jsxRuntime.jsxs("div", { className: 'tw:hidden tw:md:flex', children: [jsxRuntime.jsx(reactRouterDom.Link, { to: '/login', children: jsxRuntime.jsx("div", { className: 'tw:self-center tw:btn tw:btn-ghost tw:mr-2', children: "Login" }) }), jsxRuntime.jsx(reactRouterDom.Link, { to: '/signup', children: jsxRuntime.jsx("div", { className: 'tw:btn tw:btn-ghost tw:mr-2', children: "Sign Up" }) })] }), jsxRuntime.jsxs("div", { className: 'tw:dropdown tw:dropdown-end', children: [jsxRuntime.jsx("label", { tabIndex: 1, className: 'tw:btn tw:btn-ghost tw:md:hidden', children: jsxRuntime.jsx(TagView.ForwardRef, { className: 'tw:h-5 tw:w-5' }) }), jsxRuntime.jsxs("ul", { tabIndex: 1, className: 'tw:menu tw:dropdown-content tw:mt-4 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!', children: [jsxRuntime.jsx("li", { children: jsxRuntime.jsx(reactRouterDom.Link, { to: '/login', children: "Login" }) }), jsxRuntime.jsx("li", { children: jsxRuntime.jsx(reactRouterDom.Link, { to: '/signup', children: "Sign Up" }) })] })] })] })) }));
+};
+
+function NavBar({ appName }) {
+    const appState = TagView.useAppState();
+    const setAppState = TagView.useSetAppState();
+    const toggleSidebar = () => {
+        setAppState({ sideBarOpen: !appState.sideBarOpen });
+    };
+    const nameRef = React.useRef(null);
+    const [nameWidth, setNameWidth] = React.useState(0);
+    React.useEffect(() => {
+        !appState.embedded && nameRef.current && setNameWidth(nameRef.current.scrollWidth);
+    }, [nameRef, appName, appState.embedded]);
+    if (!appState.embedded) {
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: 'tw:navbar tw:bg-base-100 tw:z-9998 tw:shadow-xl tw:relative tw:p-0', children: [jsxRuntime.jsx("button", { className: 'tw:btn tw:btn-square tw:btn-ghost tw:ml-3', "aria-controls": '#sidenav', "aria-haspopup": 'true', onClick: () => toggleSidebar(), children: jsxRuntime.jsx(ForwardRef, { className: 'tw:inline-block tw:w-5 tw:h-5' }) }), jsxRuntime.jsx("div", { className: 'tw:flex-1 tw:mr-2', children: jsxRuntime.jsxs("div", { className: 'tw:flex-1 tw:truncate tw:grid tw:grid-flow-col', style: { maxWidth: nameWidth + 62 }, children: [jsxRuntime.jsx(reactRouterDom.Link, { className: 'tw:btn tw:btn-ghost tw:px-2 tw:normal-case tw:text-xl tw:flex-1 tw:truncate', to: '/', children: jsxRuntime.jsx("h1", { ref: nameRef, className: 'tw:truncate', children: appName }) }), jsxRuntime.jsx("button", { className: 'tw:btn tw:px-2  tw:btn-ghost', onClick: () => window.my_modal_3.showModal(), children: jsxRuntime.jsx(QuestionMarkIcon, { className: 'tw:h-5 tw:w-5' }) })] }) }), appState.showThemeControl && jsxRuntime.jsx(ThemeControl, {}), jsxRuntime.jsx(UserControl, {})] }) }));
+    }
+    else
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+}
+
+const SetAppState = ({ assetsApi, embedded, openCollectiveApiKey, }) => {
+    const setAppState = TagView.useSetAppState();
+    React.useEffect(() => {
+        setAppState({ assetsApi });
+    }, [assetsApi, setAppState]);
+    React.useEffect(() => {
+        setAppState({ embedded });
+    }, [embedded, setAppState]);
+    React.useEffect(() => {
+        setAppState({ openCollectiveApiKey });
+    }, [openCollectiveApiKey, setAppState]);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+
+/**
+ * @category AppShell
+ */
+function AppShell({ appName, children, assetsApi, embedded, openCollectiveApiKey, }) {
+    return (jsxRuntime.jsx(ContextWrapper, { children: jsxRuntime.jsxs("div", { className: 'tw:flex tw:flex-col tw:h-full', children: [jsxRuntime.jsx(SetAppState, { assetsApi: assetsApi, embedded: embedded, openCollectiveApiKey: openCollectiveApiKey }), jsxRuntime.jsx(NavBar, { appName: appName }), jsxRuntime.jsx("div", { id: 'app-content', className: 'tw:flex', children: children })] }) }));
+}
+
+function SidebarSubmenu({ submenu, name, icon, }) {
+    const location = reactRouterDom.useLocation();
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    /** Open Submenu list if path found in routes, this is for directly loading submenu routes  first time */
+    React.useEffect(() => {
+        if (submenu?.filter((m) => {
+            return m.path === location.pathname;
+        })[0])
+            setIsExpanded(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: 'flex-col', children: [jsxRuntime.jsxs("div", { className: 'w-full', onClick: () => setIsExpanded(!isExpanded), children: [icon, " ", jsxRuntime.jsxs("span", { children: [name, " "] }), jsxRuntime.jsx(ChevronDownIcon, { className: 'w-5 h-5 mt-1 float-right delay-400 duration-500 transition-all  ' +
+                            (isExpanded ? 'rotate-180' : '') })] }), jsxRuntime.jsx("div", { className: ' w-full' + (isExpanded ? '' : 'hidden'), children: jsxRuntime.jsx("ul", { className: 'menu menu-compact', children: submenu?.map((m, k) => {
+                        return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(reactRouterDom.Link, { to: m.path, className: '', children: [m.icon, jsxRuntime.jsx("span", { className: '', "data-te-sidenav-slim": 'false', children: m.name }), location.pathname === m.path ? (jsxRuntime.jsx("span", { className: 'absolute mt-1 mb-1 inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary ', "aria-hidden": 'true' })) : null] }) }, k));
+                    }) }) })] }));
+}
+
+/**
+ * @category AppShell
+ */
+function SideBar({ routes, bottomRoutes }) {
+    const location = reactRouterDom.useLocation();
+    const params = new URLSearchParams(window.location.search);
+    const appState = TagView.useAppState();
+    const setAppState = TagView.useSetAppState();
+    const toggleSidebarOpen = () => {
+        setAppState({ sideBarOpen: !appState.sideBarOpen });
+    };
+    const toggleSidebarSlim = () => {
+        setAppState({ sideBarSlim: !appState.sideBarSlim });
+    };
+    return (jsxRuntime.jsx("nav", { id: 'sidenav', className: `${appState.sideBarOpen ? 'tw:translate-x-0' : 'tw:-translate-x-full'}
+          ${appState.sideBarSlim ? 'tw:w-14' : 'tw:w-48'}
+          ${appState.embedded ? 'tw:mt-5.5 tw:h-[calc(100dvh-22px)]' : 'tw:mt-16 tw:h-[calc(100dvh-64px)]'}
+          tw:fixed tw:left-0 tw:transition-all tw:duration-300 tw:top-0 tw:z-10035 
+          tw:overflow-hidden tw:shadow-xl tw:dark:bg-zinc-800`, children: jsxRuntime.jsxs("div", { className: `tw:flex tw:flex-col  ${appState.embedded ? 'tw:h-full' : 'tw:h-[calc(100dvh-64px)]'}`, children: [jsxRuntime.jsx("ul", { className: 'tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0', children: routes.map((route, k) => {
+                        return (jsxRuntime.jsx("li", { className: '', children: route.submenu ? (jsxRuntime.jsx(SidebarSubmenu, { ...route })) : (jsxRuntime.jsxs(reactRouterDom.NavLink, { end: true, target: route.blank ? '_blank' : '_self', 
+                                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                                to: `${route.path}${params && '?' + params.toString()}`, className: ({ isActive }) => `${isActive ? 'tw:font-semibold  tw:bg-base-200 tw:rounded-none!' : 'tw:font-normal tw:rounded-none!'}`, onClick: () => {
+                                    if (screen.width < 640 && !appState.sideBarSlim)
+                                        toggleSidebarOpen();
+                                }, children: [route.icon, jsxRuntime.jsx("span", { className: `${appState.sideBarSlim ? 'tw:hidden' : ''}`, "data-te-sidenav-slim": 'false', children: route.name }), (location.pathname.includes(route.path) && route.path.length > 1) ||
+                                        location.pathname === route.path ? (jsxRuntime.jsx("span", { className: 'tw:absolute tw:inset-y-0 tw:left-0 tw:w-1 tw:rounded-tr-md tw:rounded-br-md tw:bg-primary ', "aria-hidden": 'true' })) : null] })) }, k));
+                    }) }), jsxRuntime.jsx("div", { id: 'slim-toggler', className: 'tw:w-full tw:bg-base-100  tw:flex-1 tw:grid tw:place-items-end', "aria-haspopup": 'true', children: jsxRuntime.jsxs("div", { className: 'tw:w-full', children: [jsxRuntime.jsx("ul", { className: 'tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0 tw:mb-0', "data-te-sidenav-menu-ref": true, children: bottomRoutes?.map((route, k) => {
+                                    return (jsxRuntime.jsx("li", { className: '', children: route.submenu ? (jsxRuntime.jsx(SidebarSubmenu, { ...route })) : (jsxRuntime.jsxs(reactRouterDom.NavLink, { end: true, target: route.blank ? '_blank' : '_self', to: route.path, className: ({ isActive }) => `${isActive ? 'tw:font-semibold  tw:bg-base-200 tw:rounded-none!' : 'tw:font-normal tw:rounded-none!'}`, onClick: () => {
+                                                if (screen.width < 640 && !appState.sideBarSlim)
+                                                    toggleSidebarOpen();
+                                            }, children: [route.icon, jsxRuntime.jsx("span", { className: `${appState.sideBarSlim ? 'tw:hidden' : ''}`, "data-te-sidenav-slim": 'false', children: route.name }), (location.pathname.includes(route.path) && route.path.length > 1) ||
+                                                    location.pathname === route.path ? (jsxRuntime.jsx("span", { className: 'tw:absolute tw:inset-y-0 tw:left-0 tw:w-1 tw:rounded-tr-md tw:rounded-br-md tw:bg-primary ', "aria-hidden": 'true' })) : null] })) }, k));
+                                }) }), jsxRuntime.jsx(ChevronRightIcon, { className: 'tw:w-5 tw:h-5 tw:mb-4 tw:mr-5 tw:mt-2  tw:cursor-pointer tw:float-right tw:delay-400 tw:duration-500 tw:transition-all ' +
+                                    (!appState.sideBarSlim ? 'tw:rotate-180' : ''), onClick: () => toggleSidebarSlim() })] }) })] }) }));
+}
+
+/**
+ * @category AppShell
+ */
+function Content({ children }) {
+    const appState = TagView.useAppState();
+    return (jsxRuntime.jsx("div", { className: `${appState.sideBarOpen && !appState.sideBarSlim ? 'tw:ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw:ml-14' : ''} tw:w-full tw:h-full tw:bg-base-200 tw:relative tw:transition-all tw:duration-300`, children: children }));
+}
+
+/**
+ * @category Auth
+ */
+function LoginPage() {
+    const [email, setEmail] = React.useState('');
+    const [password, setPassword] = React.useState('');
+    const { login, loading } = TagView.useAuth();
+    const navigate = reactRouterDom.useNavigate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onLogin = async () => {
+        await reactToastify.toast.promise(login({ email, password }), {
+            success: {
+                render({ data }) {
+                    navigate('/');
+                    return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`;
+                },
+                // other options
+                icon: '✌️',
+            },
+            error: {
+                render({ data }) {
+                    return `${data}`;
+                },
+                autoClose: 10000,
+            },
+            pending: 'logging in ...',
+        });
+    };
+    React.useEffect(() => {
+        const keyDownHandler = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                onLogin();
+            }
+        };
+        document.addEventListener('keydown', keyDownHandler);
+        return () => {
+            document.removeEventListener('keydown', keyDownHandler);
+        };
+    }, [onLogin]);
+    return (jsxRuntime.jsxs(TagView.MapOverlayPage, { backdrop: true, className: 'tw:max-w-xs tw:h-fit', children: [jsxRuntime.jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: "Login" }), jsxRuntime.jsx("input", { type: 'email', placeholder: 'E-Mail', value: email, onChange: (e) => setEmail(e.target.value), className: 'tw:input tw:input-bordered tw:w-full tw:max-w-xs' }), jsxRuntime.jsx("input", { type: 'password', placeholder: 'Password', onChange: (e) => setPassword(e.target.value), className: 'tw:input tw:input-bordered tw:w-full tw:max-w-xs' }), jsxRuntime.jsx("div", { className: 'tw:text-right tw:text-primary', children: jsxRuntime.jsx(reactRouterDom.Link, { to: '/reset-password', children: jsxRuntime.jsx("span", { className: 'tw:text-sm  tw:inline-block  tw:hover:text-primary tw:hover:underline tw:hover:cursor-pointer tw:transition tw:duration-200', children: "Forgot Password?" }) }) }), jsxRuntime.jsx("div", { className: 'tw:card-actions', children: jsxRuntime.jsx("button", { className: loading
+                        ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+                        : 'tw:btn tw:btn-primary tw:btn-block', 
+                    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                    onClick: () => onLogin(), children: loading ? jsxRuntime.jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Login' }) })] }));
+}
+
+/**
+ * @category Auth
+ */
+function SignupPage() {
+    const [email, setEmail] = React.useState('');
+    const [userName, setUserName] = React.useState('');
+    const [password, setPassword] = React.useState('');
+    const { register, loading } = TagView.useAuth();
+    const navigate = reactRouterDom.useNavigate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const onRegister = async () => {
+        await reactToastify.toast.promise(register({ email, password }, userName), {
+            success: {
+                render({ data }) {
+                    navigate('/');
+                    return `Hi ${data?.first_name ? data.first_name : 'Traveler'}`;
+                },
+                // other options
+                icon: '✌️',
+            },
+            error: {
+                render({ data }) {
+                    return `${data}`;
+                },
+                autoClose: 10000,
+            },
+            pending: 'creating new user ...',
+        });
+    };
+    React.useEffect(() => {
+        const keyDownHandler = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                onRegister();
+            }
+        };
+        document.addEventListener('keydown', keyDownHandler);
+        return () => {
+            document.removeEventListener('keydown', keyDownHandler);
+        };
+    }, [onRegister]);
+    return (jsxRuntime.jsxs(TagView.MapOverlayPage, { backdrop: true, className: 'tw:max-w-xs  tw:h-fit', children: [jsxRuntime.jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: "Sign Up" }), jsxRuntime.jsx("input", { type: 'text', placeholder: 'Name', value: userName, onChange: (e) => setUserName(e.target.value), className: 'tw:input tw:input-bordered tw:w-full tw:max-w-xs' }), jsxRuntime.jsx("input", { type: 'email', placeholder: 'E-Mail', value: email, onChange: (e) => setEmail(e.target.value), className: 'tw:input tw:input-bordered tw:w-full tw:max-w-xs' }), jsxRuntime.jsx("input", { type: 'password', placeholder: 'Password', onChange: (e) => setPassword(e.target.value), className: 'tw:input tw:input-bordered tw:w-full tw:max-w-xs' }), jsxRuntime.jsx("div", { className: 'tw:card-actions tw:mt-4', children: jsxRuntime.jsx("button", { className: loading
+                        ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+                        : 'tw:btn tw:btn-primary tw:btn-block', 
+                    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                    onClick: () => onRegister(), children: loading ? jsxRuntime.jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Sign Up' }) })] }));
+}
+
+/**
+ * @category Auth
+ */
+function RequestPasswordPage({ resetUrl }) {
+    const [email, setEmail] = React.useState('');
+    const { requestPasswordReset, loading } = TagView.useAuth();
+    const navigate = reactRouterDom.useNavigate();
+    const onReset = async () => {
+        await reactToastify.toast.promise(requestPasswordReset(email, resetUrl), {
+            success: {
+                render() {
+                    navigate('/');
+                    return 'Check your mailbox';
+                },
+                // other options
+                icon: '📬',
+            },
+            error: {
+                render({ data }) {
+                    return `${data}`;
+                },
+            },
+            pending: 'sending email ...',
+        });
+    };
+    return (jsxRuntime.jsxs(TagView.MapOverlayPage, { backdrop: true, className: 'tw:max-w-xs  tw:h-fit', children: [jsxRuntime.jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: "Reset Password" }), jsxRuntime.jsx("input", { type: 'email', placeholder: 'E-Mail', value: email, onChange: (e) => setEmail(e.target.value), className: 'tw:input tw:input-bordered tw:w-full tw:max-w-xs' }), jsxRuntime.jsx("div", { className: 'tw:card-actions tw:mt-4', children: jsxRuntime.jsx("button", { className: loading
+                        ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+                        : 'tw:btn tw:btn-primary tw:btn-block', 
+                    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                    onClick: () => onReset(), children: loading ? jsxRuntime.jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Send' }) })] }));
+}
+
+/**
+ * @category Auth
+ */
+function SetNewPasswordPage() {
+    const [password, setPassword] = React.useState('');
+    const { passwordReset, loading } = TagView.useAuth();
+    const navigate = reactRouterDom.useNavigate();
+    const onReset = async () => {
+        const token = window.location.search.split('token=')[1];
+        await reactToastify.toast.promise(passwordReset(token, password), {
+            success: {
+                render() {
+                    navigate('/');
+                    return 'New password set';
+                },
+            },
+            error: {
+                render({ data }) {
+                    return `${data}`;
+                },
+            },
+            pending: 'setting password ...',
+        });
+    };
+    return (jsxRuntime.jsxs(TagView.MapOverlayPage, { backdrop: true, className: 'tw:max-w-xs  tw:h-fit', children: [jsxRuntime.jsx("h2", { className: 'tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center', children: "Set new Password" }), jsxRuntime.jsx("input", { type: 'password', placeholder: 'Password', onChange: (e) => setPassword(e.target.value), className: 'tw:input tw:input-bordered tw:w-full tw:max-w-xs' }), jsxRuntime.jsx("div", { className: 'tw:card-actions tw:mt-4', children: jsxRuntime.jsx("button", { className: loading
+                        ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+                        : 'tw:btn tw:btn-primary tw:btn-block', 
+                    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                    onClick: () => onReset(), children: loading ? jsxRuntime.jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Set' }) })] }));
+}
+
+/**
+ * @category Gaming
+ */
+function Modal({ children, showOnStartup, }) {
+    React.useEffect(() => {
+        if (showOnStartup) {
+            window.my_modal_3.showModal();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("dialog", { id: 'my_modal_3', className: 'tw:modal tw:transition-all tw:duration-300', children: [jsxRuntime.jsxs("form", { method: 'dialog', className: 'tw:modal-box tw:transition-none', children: [jsxRuntime.jsx("button", { className: 'tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden', children: "\u2715" }), children] }), jsxRuntime.jsx("form", { method: 'dialog', className: 'tw:modal-backdrop', children: jsxRuntime.jsx("button", { children: "close" }) })] }) }));
+}
+
+/**
+ * @category Gaming
+ */
+function Quests() {
+    const questsOpen = useQuestsOpen();
+    const setQuestsOpen = useSetQuestOpen();
+    const { isAuthenticated, user } = TagView.useAuth();
+    React.useEffect(() => {
+        setQuestsOpen(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const [profile, setProfie] = React.useState();
+    const items = TagView.useItems();
+    React.useEffect(() => {
+        setProfie(items.find((i) => i.user_created?.id === user?.id &&
+            i.layer?.userProfileLayer &&
+            i.user_created?.id != null));
+    }, [items, user]);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: questsOpen ? (jsxRuntime.jsx("div", { className: 'tw:card tw:w-48 tw:bg-base-100 tw:shadow-xl tw:absolute tw:bottom-4 tw:left-4 tw:z-2000', children: jsxRuntime.jsxs("div", { className: 'tw:card-body tw:p-4 tw:pt-0', children: [jsxRuntime.jsx("div", { className: 'tw:card-actions tw:justify-end', children: jsxRuntime.jsx("label", { className: 'tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-1 tw:top-1', onClick: () => setQuestsOpen(false), children: "\u2715" }) }), jsxRuntime.jsxs("h2", { className: 'tw:card-title tw:m-auto ', children: ["Level 1", jsxRuntime.jsx(QuestionMarkIcon, {})] }), jsxRuntime.jsxs("ul", { className: 'tw:flex-row', children: [jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("label", { className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-0', children: [jsxRuntime.jsx("input", { type: 'checkbox', readOnly: true, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: isAuthenticated || false }), jsxRuntime.jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2', children: "Sign Up" })] }) }), jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("label", { className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-0', children: [jsxRuntime.jsx("input", { type: 'checkbox', readOnly: true, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: !!profile?.text }), jsxRuntime.jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2', children: "Fill Profile" })] }) }), jsxRuntime.jsx("li", { children: jsxRuntime.jsxs("label", { className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-0', children: [jsxRuntime.jsx("input", { type: 'checkbox', readOnly: true, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: !!profile?.image }), jsxRuntime.jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2', children: "Upload Avatar" })] }) })] }), ' '] }) })) : ('') }));
+}
+
+function Subtitle({ styleClass, children }) {
+    return jsxRuntime.jsx("div", { className: `tw:text-xl tw:font-semibold ${styleClass}`, children: children });
+}
+
+/**
+ * @category Templates
+ */
+function TitleCard({ title, hideTitle, children, topMargin, TopSideButtons, className, }) {
+    return (jsxRuntime.jsxs("div", { className: 'card tw:w-full tw:p-6 tw:bg-base-100 tw:shadow-xl tw:h-fit tw:mb-4 ' +
+            (className ?? '') +
+            ' ' +
+            (topMargin ?? 'tw:mt-6'), children: [!hideTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Subtitle, { styleClass: TopSideButtons ? 'tw:inline-block' : '', children: [title, TopSideButtons && (jsxRuntime.jsx("div", { className: 'tw:inline-block tw:float-right', children: TopSideButtons }))] }), jsxRuntime.jsx("div", { className: 'divider tw:mt-2' })] })), jsxRuntime.jsx("div", { className: 'tw:h-full tw:bg-transparent tw:w-full tw:pb-6 tw:bg-base-100', children: children })] }));
+}
+
+/**
+ * @category Templates
+ */
+function CardPage({ title, hideTitle, children, parents, }) {
+    return (jsxRuntime.jsx("main", { className: 'tw:flex-1 tw:overflow-y-auto tw:overflow-x-hidden tw:pt-2 tw:px-6 tw:min-w-80 tw:flex tw:justify-center', children: jsxRuntime.jsxs("div", { className: 'tw:w-full tw:xl:max-w-6xl ', children: [jsxRuntime.jsx("div", { className: 'tw:text-sm breadcrumbs', children: jsxRuntime.jsxs("ul", { children: [jsxRuntime.jsx("li", { children: jsxRuntime.jsx(reactRouterDom.Link, { to: '/', children: "Home" }) }), parents?.map((b, i) => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx(reactRouterDom.Link, { to: b.path, children: b.name }) }, i))), jsxRuntime.jsx("li", { children: title })] }) }), jsxRuntime.jsx(TitleCard, { hideTitle: hideTitle, title: title, topMargin: 'tw:my-2', className: ' tw:mb-4', children: children })] }) }));
+}
+
+/**
+ * @category Templates
+ */
+const SelectUser = () => {
+    const appState = TagView.useAppState();
+    const items = TagView.useItems();
+    const users = items.filter((i) => i.layer?.userProfileLayer);
+    const [selectedUsers, setSelectedUsers] = React.useState([]);
+    return (jsxRuntime.jsxs(TagView.MapOverlayPage, { backdrop: true, className: 'tw:h-3/4 tw:w-80', children: [jsxRuntime.jsx("div", { className: 'tw:text-center tw:text-xl tw:font-bold tw:mb-4', children: "Gratitude to ..." }), jsxRuntime.jsx("div", { className: 'tw:overflow-x-auto tw:w-full fade', children: jsxRuntime.jsx("table", { className: 'tw:table tw:w-full', children: jsxRuntime.jsx("tbody", { children: users.map((u, k) => {
+                            return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx("td", { children: jsxRuntime.jsx("input", { type: 'checkbox', onChange: () => setSelectedUsers((prev) => [...prev, u.id]), className: 'checkbox checkbox-sm' }) }), jsxRuntime.jsx("td", { children: jsxRuntime.jsxs("div", { className: 'tw:flex tw:items-center tw:space-x-3', children: [u.image ? (jsxRuntime.jsx("div", { className: 'tw:avatar', children: jsxRuntime.jsx("div", { className: 'tw:mask tw:mask-circle tw:w-8 tw:h-8', children: jsxRuntime.jsx("img", { src: appState.assetsApi.url + u.image + '?width=40&heigth=40', alt: 'Avatar' }) }) })) : (jsxRuntime.jsx("div", { className: 'tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8' })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: 'tw:font-bold', children: u.name }) })] }) })] }, k));
+                        }) }) }) }), jsxRuntime.jsx("div", { className: 'tw:w-full tw:grid tw:mt-4', children: jsxRuntime.jsx(reactRouterDom.Link, { className: 'tw:place-self-center ', to: '/attestation-form' + '?to=' + selectedUsers.map((u) => u, ','), children: jsxRuntime.jsx("button", { className: 'tw:btn tw:px-8', children: "Next" }) }) })] }));
+};
+
+/**
+ * @category Map
+ */
+const PopupTextAreaInput$1 = ({ dataField, placeholder, style, item, }) => {
+    return (jsxRuntime.jsx(TagView.TextAreaInput, { defaultValue: item?.text ? item.text : '', dataField: dataField, placeholder: placeholder, inputStyle: style }));
+};
+
+/**
+ * @category Map
+ */
+const PopupTextInput$1 = ({ dataField, placeholder, style, item, }) => {
+    return (jsxRuntime.jsx(TagView.TextInput, { defaultValue: item?.name ? item.name : '', dataField: dataField, placeholder: placeholder, inputStyle: style, type: 'text', containerStyle: 'tw:mt-4 tw:mb-2' }));
+};
+
+/**
+ * @category Map
+ */
+const PopupCheckboxInput$1 = ({ dataField, label, item, }) => {
+    return (jsxRuntime.jsxs("label", { htmlFor: item?.id, className: 'tw:label tw:justify-normal tw:pt-1 tw:pb-1', children: [jsxRuntime.jsx("input", { id: item?.id, type: 'checkbox', name: dataField, className: 'tw:checkbox tw:checkbox-xs tw:checkbox-success', checked: item?.public_edit }), jsxRuntime.jsx("span", { className: 'tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer', children: label })] }));
+};
+
+/**
+ * @category Map
+ */
+const PopupButton$1 = ({ url, parameterField, text, item, }) => {
+    const params = new URLSearchParams(window.location.search);
+    const getItemTags = TagView.useGetItemTags();
+    return (jsxRuntime.jsx(reactRouterDom.Link, { to: `${url}/${parameterField ? item?.id : ''}?${params}`, children: jsxRuntime.jsx("button", { style: {
+                backgroundColor: `${item?.color ?? (item && (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (item?.layer?.markerDefaultColor ?? '#000')))}`,
+            }, className: 'tw:btn tw:text-white tw:btn-sm tw:float-right tw:mt-1', children: text }) }));
+};
+
+function PlusButton({ layer, triggerAction, color, collection = 'items', }) {
+    const hasUserPermission = TagView.useHasUserPermission();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasUserPermission(collection, 'create', undefined, layer) && (jsxRuntime.jsx("button", { tabIndex: 0, className: 'tw:btn tw:btn-circle tw:shadow tw:z-3000 tw:absolute tw:right-4 tw:bottom-4', onClick: () => {
+                triggerAction();
+            }, style: { backgroundColor: color, color: '#fff' }, children: jsxRuntime.jsx(TagView.ForwardRef$1, { className: 'tw:w-5 tw:h-5 tw:stroke-[2.5]' }) })) }));
+}
+
+const DateUserInfo = ({ item }) => {
+    const [infoExpanded, setInfoExpanded] = React.useState(false);
+    return (jsxRuntime.jsxs("div", { className: 'tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:-mt-2', onClick: (e) => e.stopPropagation(), children: [infoExpanded ? (jsxRuntime.jsx("p", { className: 'tw:italic tw:min-h-[21px] tw:my-0! tw:text-gray-500', onClick: () => setInfoExpanded(false), children: `${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item.user_created?.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? TagView.timeAgo(item.date_updated) : TagView.timeAgo(item.date_created)}` })) : (jsxRuntime.jsx("p", { className: 'tw:my-0! tw:min-h-[21px] tw:font-bold tw:cursor-pointer tw:text-gray-500', onClick: () => setInfoExpanded(true), children: "\u24D8" })), jsxRuntime.jsx("div", { className: 'tw:grow ' })] }));
+};
+
+const ItemCard = ({ i, loading, url, deleteCallback, }) => {
+    const navigate = reactRouterDom.useNavigate();
+    const windowDimensions = TagView.useWindowDimensions();
+    const map = reactLeaflet.useMap();
+    const setSelectPosition = TagView.useSetSelectPosition();
+    return (jsxRuntime.jsxs("div", { className: 'tw:cursor-pointer tw:card tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-4 tw:mb-4 tw:h-fit', onClick: () => {
+            // We could have an onClick callback instead
+            const params = new URLSearchParams(window.location.search);
+            if (windowDimensions.width < 786 && i.position)
+                navigate('/' + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`);
+            else
+                navigate(url + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`);
+        }, children: [jsxRuntime.jsx(TagView.HeaderView, { loading: loading, item: i, api: i.layer?.api, editCallback: () => navigate('/edit-item/' + i.id), setPositionCallback: () => {
+                    map.closePopup();
+                    setSelectPosition(i);
+                    navigate('/');
+                }, deleteCallback: () => deleteCallback(i) }), jsxRuntime.jsxs("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: [i.layer?.itemType.show_start_end && jsxRuntime.jsx(TagView.StartEndView, { item: i }), i.layer?.itemType.show_text && jsxRuntime.jsx(TagView.TextView, { truncate: true, text: i.text, itemId: i.id })] }), jsxRuntime.jsx(DateUserInfo, { item: i })] }));
+};
+
+/**
+ * @category Templates
+ */
+const OverlayItemsIndexPage = ({ url, layerName, parameterField, }) => {
+    const [loading, setLoading] = React.useState(false);
+    const [addItemPopupOpen, setAddItemPopupOpen] = React.useState(false);
+    const tabRef = React.useRef(null);
+    function scroll() {
+        tabRef.current?.scrollIntoView();
+    }
+    React.useEffect(() => {
+        if (addItemPopupOpen) {
+            scroll();
+        }
+    }, [addItemPopupOpen]);
+    const tags = TagView.useTags();
+    const addTag = TagView.useAddTag();
+    const { user } = TagView.useAuth();
+    const items = TagView.useItems();
+    const addItem = TagView.useAddItem();
+    const removeItem = TagView.useRemoveItem();
+    const layers = TagView.useLayers();
+    const filterTags = TagView.useFilterTags();
+    const getItemTags = TagView.useGetItemTags();
+    const layer = layers.find((l) => l.name === layerName);
+    const submitNewItem = async (evt) => {
+        evt.preventDefault();
+        const formItem = {};
+        Array.from(evt.target).forEach((input) => {
+            if (input.name) {
+                formItem[input.name] = input.value;
+            }
+        });
+        setLoading(true);
+        if (formItem.text) {
+            formItem.text
+                .toLocaleLowerCase()
+                .match(TagView.hashTagRegex)
+                ?.map((tag) => {
+                if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+                    addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: TagView.randomColor() });
+                }
+                return null;
+            });
+        }
+        const uuid = crypto.randomUUID();
+        let success = false;
+        try {
+            await layer?.api?.createItem({ ...formItem, id: uuid });
+            success = true;
+            // eslint-disable-next-line no-catch-all/no-catch-all
+        }
+        catch (error) {
+            reactToastify.toast.error(error.toString());
+        }
+        if (success) {
+            reactToastify.toast.success('New item created');
+        }
+        addItem({ ...formItem, user_created: user ?? undefined, id: uuid, layer, public_edit: !user });
+        setLoading(false);
+        setAddItemPopupOpen(false);
+    };
+    const deleteItem = async (item) => {
+        setLoading(true);
+        let success = false;
+        try {
+            await layer?.api?.deleteItem(item.id);
+            success = true;
+            // eslint-disable-next-line no-catch-all/no-catch-all
+        }
+        catch (error) {
+            reactToastify.toast.error(error.toString());
+        }
+        if (success) {
+            reactToastify.toast.success('Item deleted');
+        }
+        removeItem(item);
+        setLoading(false);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TagView.MapOverlayPage, { className: 'tw:rounded-none tw:overflow-y-auto tw:bg-base-200 tw:p-4!', children: jsxRuntime.jsxs("div", { className: 'tw:flex tw:flex-col tw:h-full', children: [jsxRuntime.jsx("div", { className: 'tw:flex-none', children: jsxRuntime.jsxs(Control, { position: 'topLeft', zIndex: '1000', absolute: false, children: [jsxRuntime.jsx(SearchControl, {}), jsxRuntime.jsx(TagsControl, {})] }) }), jsxRuntime.jsx("div", { className: 'tw:overflow-scroll fade tw:flex-1', children: jsxRuntime.jsxs("div", { className: 'tw:columns-1 tw:md:columns-2 tw:lg:columns-3 tw:2xl:columns-4 tw:gap-6 tw:pt-4', children: [items
+                                        .filter((i) => i.layer?.name === layerName)
+                                        .filter((item) => filterTags.length === 0
+                                        ? item
+                                        : filterTags.some((tag) => getItemTags(item).some((filterTag) => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))
+                                        .sort((a, b) => {
+                                        // Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds)
+                                        const dateA = a.date_updated
+                                            ? new Date(a.date_updated).getTime()
+                                            : a.date_created
+                                                ? new Date(a.date_created).getTime()
+                                                : 0;
+                                        const dateB = b.date_updated
+                                            ? new Date(b.date_updated).getTime()
+                                            : b.date_created
+                                                ? new Date(b.date_created).getTime()
+                                                : 0;
+                                        return dateB - dateA; // Subtracts milliseconds which are numbers
+                                    })
+                                        .map((i, k) => (jsxRuntime.jsx("div", { className: 'tw:break-inside-avoid tw:mb-6', children: jsxRuntime.jsx(ItemCard, { i: i, loading: loading, url: url, deleteCallback: () => deleteItem(i) }) }, k))), addItemPopupOpen && (jsxRuntime.jsx("form", { ref: tabRef, autoComplete: 'off', onSubmit: (e) => submitNewItem(e), children: jsxRuntime.jsxs("div", { className: 'tw:cursor-pointer tw:break-inside-avoid card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10', children: [jsxRuntime.jsx("label", { className: 'tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600', onClick: () => setAddItemPopupOpen(false), children: jsxRuntime.jsx("p", { className: 'tw:text-center', children: "\u2715" }) }), jsxRuntime.jsx("div", { className: 'tw:flex tw:justify-center tw:mb-4', children: jsxRuntime.jsx("b", { className: 'tw:text-xl tw:text-center tw:font-bold', children: layer?.menuText }) }), jsxRuntime.jsx(TagView.TextInput, { type: 'text', placeholder: 'Name', dataField: 'name', defaultValue: '', inputStyle: '' }), layer?.itemType.show_start_end_input && (jsxRuntime.jsx(TagView.PopupStartEndInput, { containerStyle: 'tw:mt-3', showLabels: false })), jsxRuntime.jsx("div", { className: 'tw:flex tw:justify-center', children: jsxRuntime.jsx("button", { className: loading
+                                                            ? 'btn btn-disabled tw:mt-5 tw:place-self-center'
+                                                            : 'btn tw:mt-5 tw:place-self-center', type: 'submit', children: loading ? jsxRuntime.jsx("span", { className: 'loading loading-spinner' }) : 'Save' }) })] }) }))] }) })] }) }), !layer?.userProfileLayer && (jsxRuntime.jsx(PlusButton, { layer: layer, triggerAction: () => {
+                    setAddItemPopupOpen(true);
+                    scroll();
+                }, color: '#777', collection: 'items' }))] }));
+};
+
+const EmojiPicker = ({ selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const emojis = [
+        '❤️',
+        '🙏',
+        '👍',
+        '🌻',
+        '✨',
+        '☀️',
+        '🔥',
+        '🪵',
+        '💧',
+        '🎶',
+        '🎨',
+        '🍄',
+        '📝',
+        '✉️',
+        '🧩',
+        '💡',
+        '🎓',
+        '💬',
+        '🛠',
+        '💻',
+        '🕹',
+        '🖨',
+        '🚐',
+        '🛒',
+        '⚽️',
+        '🧵',
+        '👀',
+        '🌱',
+        '🏕',
+        '💪',
+        '🎁',
+        '🏹',
+        '🥕',
+        '🥇',
+        '🥈',
+        '🥉',
+    ];
+    const shapes = ['squircle', 'circle', 'hexagon-2'];
+    const colors = [
+        '#FF99C8',
+        '#fff0d6',
+        '#FCF6BD',
+        '#D0F4DE',
+        '#A9DEF9',
+        '#E4C1F9',
+        '#de324c',
+        '#f4895f',
+        '#f8e16f',
+        '#95cf92',
+        '#369acc',
+        '#9656a2',
+    ];
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+    const selectEmoji = (emoji) => {
+        setSelectedEmoji(emoji);
+        setIsOpen(false);
+    };
+    const selectShape = (shape) => {
+        setSelectedShape(shape);
+        setIsOpen(false);
+    };
+    const selectColor = (color) => {
+        setSelectedColor(color);
+        setIsOpen(false);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: toggleDropdown, className: `tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} tw:mask tw:mask-${selectedShape} tw:p-6`, style: { backgroundColor: selectedColor }, children: selectedEmoji }), isOpen && (jsxRuntime.jsxs("div", { className: 'tw:absolute tw:z-3000 tw:top-0 tw:left-1/2 tw:transform tw:-translate-x-1/2 tw:mt-12 tw:bg-base-100 tw:rounded-2xl tw:shadow-lg tw:p-2 tw:w-full', children: [jsxRuntime.jsx("div", { className: 'tw:grid tw:grid-cols-6 tw:gap-2 tw:pb-2', children: emojis.map((emoji) => (jsxRuntime.jsx("button", { onClick: () => selectEmoji(emoji), className: `tw:cursor-pointer  tw:text-2xl tw:p-2 tw:hover:bg-base-200 tw:rounded-md ${emoji === selectedEmoji ? 'tw:bg-base-300' : ''}`, children: emoji }, emoji))) }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsx("div", { className: 'tw:grid tw:grid-cols-3 tw:gap-2 tw:py-2', children: shapes.map((shape) => (jsxRuntime.jsx("div", { className: `tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 ${shape === selectedShape ? 'tw:bg-base-300' : ''}`, onClick: () => selectShape(shape), children: jsxRuntime.jsx("div", { className: `tw:h-12 tw:w-full tw:mask ${shape === 'squircle' ? 'tw:mask-squircle' : shape === 'circle' ? 'tw:mask-circle' : 'tw:mask-hexagon-2'}  tw:bg-neutral-content` }) }, shape))) }), jsxRuntime.jsx("hr", {}), jsxRuntime.jsx("div", { className: 'tw:grid tw:grid-cols-6 tw:gap-2 tw:py-2 tw:px-6', children: colors.map((color) => (jsxRuntime.jsx("div", { className: `tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 tw:flex tw:justify-center tw:items-center  ${color === selectedColor ? 'tw:bg-base-300' : ''}`, onClick: () => selectColor(color), children: jsxRuntime.jsx("div", { className: `tw:h-8 tw:w-8 tw:rounded-full`, style: { backgroundColor: color } }) }, color))) })] }))] }));
+};
+
+/**
+ * @category Templates
+ */
+const AttestationForm = ({ api }) => {
+    const items = TagView.useItems();
+    const appState = TagView.useAppState();
+    const [users, setUsers] = React.useState();
+    const navigate = reactRouterDom.useNavigate();
+    React.useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const toUserIds = params.get('to');
+        setUsers(items.filter((i) => toUserIds?.includes(i.id)));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items, location]);
+    const [inputValue, setInputValue] = React.useState('');
+    const inputRef = React.useRef(null);
+    React.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.style.width = 'auto';
+            inputRef.current.style.width = `${inputRef.current.scrollWidth + 20}px`;
+        }
+    }, [inputValue]);
+    const handleChange = (event) => {
+        setInputValue(event.target.value);
+    };
+    const sendAttestation = () => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const to = [];
+        users?.map((u) => to.push({ directus_users_id: u.user_created?.id }));
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        api?.createItem &&
+            reactToastify.toast
+                .promise(api.createItem({
+                text: inputValue,
+                emoji: selectedEmoji,
+                color: selectedColor,
+                shape: selectedShape,
+                to,
+            }), {
+                pending: 'creating attestation ...',
+                success: 'Attestation created',
+                error: {
+                    render({ data }) {
+                        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                        return `${data}`;
+                    },
+                },
+            })
+                .then(() => navigate('/item/' +
+                // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+                items.find((i) => 
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                i.user_created?.id === to[0].directus_users_id &&
+                    i.layer?.userProfileLayer === true)?.id +
+                '?tab=2'));
+    };
+    const [selectedEmoji, setSelectedEmoji] = React.useState('select badge');
+    const [selectedShape, setSelectedShape] = React.useState('circle');
+    const [selectedColor, setSelectedColor] = React.useState('#fff0d6');
+    return (jsxRuntime.jsxs(TagView.MapOverlayPage, { backdrop: true, className: 'tw:h-fit tw:min-h-56 tw:w-96', children: [jsxRuntime.jsx("div", { className: 'tw:text-center tw:text-xl tw:font-bold', children: "Gratitude" }), jsxRuntime.jsx("div", { className: 'tw:text-center tw:text-base tw:text-gray-400', children: "to" }), jsxRuntime.jsx("div", { className: 'tw:flex tw:flex-row tw:justify-center tw:items-center tw:flex-wrap', children: users?.map((u, k) => (jsxRuntime.jsxs("div", { className: 'tw:flex tw:items-center tw:space-x-3 tw:mx-2 tw:my-1', children: [u.image ? (jsxRuntime.jsx("div", { className: 'tw:avatar', children: jsxRuntime.jsx("div", { className: 'tw:mask tw:mask-circle tw:w-8 tw:h-8', children: jsxRuntime.jsx("img", { src: appState.assetsApi.url + u.image + '?width=40&heigth=40', alt: 'Avatar' }) }) })) : (jsxRuntime.jsx("div", { className: 'tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8' })), jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: 'tw:font-bold', children: u.name }) })] }, k)), ', ') }), jsxRuntime.jsxs("div", { className: 'tw:w-full', children: [jsxRuntime.jsx("div", { className: 'tw:flex tw:justify-center tw:items-center', children: jsxRuntime.jsx("div", { className: ' tw:flex tw:justify-center tw:items-center tw:w-28 tw:h-28 tw:m-4', children: jsxRuntime.jsx(EmojiPicker, { selectedEmoji: selectedEmoji, selectedColor: selectedColor, selectedShape: selectedShape, setSelectedEmoji: setSelectedEmoji, setSelectedColor: setSelectedColor, setSelectedShape: setSelectedShape }) }) }), jsxRuntime.jsx("div", { className: 'tw:flex tw:justify-center tw:items-center', children: jsxRuntime.jsx("input", { ref: inputRef, value: inputValue, onChange: handleChange, type: 'text', placeholder: '... and say some words', className: 'input tw:min-w-0 tw:w-fit tw:resize-none tw:overflow-hidden tw:text-center ' }) })] }), jsxRuntime.jsx("div", { className: 'tw:w-full tw:grid tw:mt-4', children: jsxRuntime.jsx("button", { onClick: sendAttestation, className: 'tw:btn tw:place-self-center tw:px-8', children: "Next" }) })] }));
+};
+
+function groupAndCount(arr) {
+    const grouped = arr.reduce((acc, obj) => {
+        const found = acc.find((item) => JSON.stringify(item.object) === JSON.stringify(obj));
+        if (found) {
+            found.count += 1;
+        }
+        else {
+            acc.push({ object: obj, count: 1 });
+        }
+        return acc;
+    }, []);
+    return grouped.sort((a, b) => b.count - a.count);
+}
+/**
+ * @category Templates
+ */
+const MarketView = () => {
+    const [offers, setOffers] = React.useState([]);
+    const [needs, setNeeds] = React.useState([]);
+    const navigate = reactRouterDom.useNavigate();
+    const items = TagView.useItems();
+    const tags = TagView.useTags();
+    React.useEffect(() => {
+        setOffers([]);
+        setNeeds([]);
+        for (const item of items) {
+            item.offers?.forEach((o) => {
+                const tag = tags.find((t) => t.id === o.tags_id);
+                tag && setOffers((current) => [...current, tag]);
+            });
+            item.needs?.forEach((n) => {
+                const tag = tags.find((t) => t.id === n.tags_id);
+                tag && setNeeds((current) => [...current, tag]);
+            });
+        }
+        // eslint-disable-next-line no-console
+        console.log(offers);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items]);
+    return (jsxRuntime.jsx(TagView.MapOverlayPage, { className: 'tw:rounded-none tw:overflow-y-auto tw:bg-base-200 tw:p-4!', children: jsxRuntime.jsxs("div", { className: 'tw:grid tw:grid-cols-1 tw:md:grid-cols-2', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: 'tw:text-lg tw:font-bold', children: "Offers" }), jsxRuntime.jsx("div", { className: 'tw:flex tw:flex-wrap', children: groupAndCount(offers).map((o) => (jsxRuntime.jsx(TagView.TagView, { onClick: () => navigate(`/?tags=${o.object.name}`), tag: o.object, count: o.count }, o.object.id))) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: 'tw:text-lg tw:font-bold', children: "Needs" }), jsxRuntime.jsx("div", { className: 'tw:flex tw:flex-wrap', children: groupAndCount(needs).map((o) => (jsxRuntime.jsx(TagView.TagView, { onClick: () => navigate(`/?tags=${o.object.name}`), tag: o.object, count: o.count }, o.object.id))) })] })] }) }));
+};
+
+const LoadingMapOverlay = () => {
+    return (jsxRuntime.jsx(TagView.MapOverlayPage, { backdrop: true, className: 'tw:max-w-xs tw:h-64 tw:bg-transparent', card: false, children: jsxRuntime.jsx("div", { className: 'tw:flex tw:justify-center tw:items-center tw:h-full', children: jsxRuntime.jsx("div", { className: 'tw:loading tw:loading-spinner tw:loading-xl' }) }) }));
+};
+
+const ItemContext = React.createContext(undefined);
+
+function templateify(Component) {
+    const TemplateComponent = (props) => {
+        const item = React.useContext(ItemContext);
+        return jsxRuntime.jsx(Component, { ...props, item: item });
+    };
+    return TemplateComponent;
+}
+
+function ItemFormPopup(props) {
+    const layerContext = React.useContext(LayerContext);
+    const { menuText, name: activeLayerName } = layerContext;
+    const { popupForm, setPopupForm } = usePopupForm();
+    const [spinner, setSpinner] = React.useState(false);
+    const formRef = React.useRef(null);
+    const map = reactLeaflet.useMap();
+    const addItem = TagView.useAddItem();
+    const updateItem = TagView.useUpdateItem();
+    const items = TagView.useItems();
+    const tags = TagView.useTags();
+    const addTag = TagView.useAddTag();
+    const resetFilterTags = TagView.useResetFilterTags();
+    const { user } = TagView.useAuth();
+    const handleSubmit = async (evt) => {
+        if (!popupForm) {
+            throw new Error('Popup form is not defined');
+        }
+        const formItem = {};
+        Array.from(evt.target).forEach((input) => {
+            if (input.name) {
+                formItem[input.name] = input.value;
+            }
+        });
+        formItem.position = {
+            type: 'Point',
+            coordinates: [popupForm.position.lng, popupForm.position.lat],
+        };
+        evt.preventDefault();
+        const name = formItem.name ? formItem.name : user?.first_name;
+        if (!name) {
+            reactToastify.toast.error('Name is must be defined');
+            return;
+        }
+        setSpinner(true);
+        formItem.text &&
+            formItem.text
+                .toLocaleLowerCase()
+                .match(TagView.hashTagRegex)
+                ?.map((tag) => {
+                if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+                    addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: TagView.randomColor() });
+                }
+                return null;
+            });
+        if (popupForm.item) {
+            let success = false;
+            try {
+                await popupForm.layer.api?.updateItem({ ...formItem, id: popupForm.item.id });
+                success = true;
+                // eslint-disable-next-line no-catch-all/no-catch-all
+            }
+            catch (error) {
+                reactToastify.toast.error(error.toString());
+            }
+            if (success) {
+                updateItem({ ...popupForm.item, ...formItem });
+                reactToastify.toast.success('Item updated');
+            }
+            setSpinner(false);
+            map.closePopup();
+        }
+        else {
+            const item = items.find((i) => i.user_created?.id === user?.id && i.layer === popupForm.layer);
+            const uuid = crypto.randomUUID();
+            let success = false;
+            try {
+                popupForm.layer.userProfileLayer &&
+                    item &&
+                    (await popupForm.layer.api?.updateItem({ ...formItem, id: item.id }));
+                (!popupForm.layer.userProfileLayer || !item) &&
+                    (await popupForm.layer.api?.createItem({
+                        ...formItem,
+                        name,
+                        id: uuid,
+                    }));
+                success = true;
+                // eslint-disable-next-line no-catch-all/no-catch-all
+            }
+            catch (error) {
+                reactToastify.toast.error(error.toString());
+            }
+            if (success) {
+                if (popupForm.layer.userProfileLayer && item)
+                    updateItem({ ...item, ...formItem });
+                if (!popupForm.layer.userProfileLayer || !item) {
+                    addItem({
+                        ...formItem,
+                        name: (formItem.name ? formItem.name : user?.first_name) ?? '',
+                        user_created: user ?? undefined,
+                        id: uuid,
+                        layer: popupForm.layer,
+                        public_edit: !user,
+                    });
+                }
+                reactToastify.toast.success('New item created');
+                resetFilterTags();
+            }
+            setSpinner(false);
+            map.closePopup();
+        }
+        setPopupForm(null);
+    };
+    const resetPopup = () => {
+        if (formRef.current) {
+            formRef.current.reset();
+        }
+    };
+    React.useEffect(() => {
+        resetPopup();
+    }, [popupForm?.position]);
+    return (popupForm &&
+        popupForm.layer.name === activeLayerName && (jsxRuntime.jsx(reactLeaflet.Popup, { minWidth: 275, maxWidth: 275, autoPanPadding: [20, 80], eventHandlers: {
+            remove: () => {
+                setTimeout(function () {
+                    resetPopup();
+                }, 100);
+            },
+        }, position: popupForm.position, children: jsxRuntime.jsxs("form", { ref: formRef, onReset: resetPopup, autoComplete: 'off', onSubmit: (e) => handleSubmit(e), children: [popupForm.item ? (jsxRuntime.jsx("div", { className: 'tw:h-3' })) : (jsxRuntime.jsx("div", { className: 'tw:flex tw:justify-center', children: jsxRuntime.jsx("b", { className: 'tw:text-xl tw:text-center tw:font-bold', children: menuText }) })), props.children ? (jsxRuntime.jsx(ItemContext.Provider, { value: popupForm.item, children: props.children })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TagView.TextInput, { type: 'text', placeholder: 'Name', dataField: 'name', defaultValue: popupForm.item ? popupForm.item.name : '', inputStyle: '' }), jsxRuntime.jsx(TagView.TextAreaInput, { placeholder: 'Text', dataField: 'text', defaultValue: popupForm.item?.text ?? '', inputStyle: 'tw:h-40 tw:mt-5' }, popupForm.position.toString())] })), jsxRuntime.jsx("div", { className: 'tw:flex tw:justify-center', children: jsxRuntime.jsx("button", { className: spinner
+                            ? 'tw:btn tw:btn-disabled tw:mt-5 tw:place-self-center'
+                            : 'tw:btn tw:mt-5 tw:place-self-center', type: 'submit', children: spinner ? jsxRuntime.jsx("span", { className: 'tw:loading tw:loading-spinner' }) : 'Save' }) })] }) })));
+}
+
+/**
+ * @category Item
+ */
+const PopupForm = ({ children }) => {
+    return jsxRuntime.jsx(ItemFormPopup, { children: children });
+};
+
+// eslint-disable-next-line react/display-name
+const ItemViewPopup = React.forwardRef((props, ref) => {
+    const map = reactLeaflet.useMap();
+    const [loading, setLoading] = React.useState(false);
+    const removeItem = TagView.useRemoveItem();
+    const updadateItem = TagView.useUpdateItem();
+    const navigate = reactRouterDom.useNavigate();
+    const setSelectPosition = TagView.useSetSelectPosition();
+    const { setPopupForm } = usePopupForm();
+    const [infoExpanded, setInfoExpanded] = React.useState(false);
+    const handleEdit = (event) => {
+        event.stopPropagation();
+        map.closePopup();
+        if (!props.item.layer) {
+            throw new Error('Layer is not defined');
+        }
+        setPopupForm({
+            position: new leaflet.LatLng(props.item.position?.coordinates[1], props.item.position?.coordinates[0]),
+            layer: props.item.layer,
+            item: props.item,
+        });
+    };
+    const handleDelete = async (event) => {
+        event.stopPropagation();
+        setLoading(true);
+        let success = false;
+        try {
+            !props.item.layer?.userProfileLayer &&
+                (await props.item.layer?.api?.deleteItem(props.item.id));
+            props.item.layer?.userProfileLayer &&
+                (await props.item.layer.api?.updateItem({ id: props.item.id, position: null }));
+            success = true;
+            // eslint-disable-next-line no-catch-all/no-catch-all
+        }
+        catch (error) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            reactToastify.toast.error(error.toString());
+        }
+        if (success) {
+            !props.item.layer?.userProfileLayer && removeItem(props.item);
+            props.item.layer?.userProfileLayer && updadateItem({ ...props.item, position: undefined });
+            reactToastify.toast.success('Item deleted');
+        }
+        setLoading(false);
+        map.closePopup();
+        const params = new URLSearchParams(window.location.search);
+        window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`);
+        navigate('/');
+    };
+    return (jsxRuntime.jsx(reactLeaflet.Popup, { ref: ref, maxHeight: 377, minWidth: 275, maxWidth: 275, autoPanPadding: [20, 80], children: jsxRuntime.jsxs("div", { className: 'tw:bg-base-100 tw:text-base-content', children: [jsxRuntime.jsx(TagView.HeaderView, { api: props.item.layer?.api, item: props.item, editCallback: handleEdit, deleteCallback: handleDelete, setPositionCallback: () => {
+                        map.closePopup();
+                        setSelectPosition(props.item);
+                        navigate('/');
+                    }, loading: loading }), jsxRuntime.jsx("div", { className: 'tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade', children: props.children ?? jsxRuntime.jsx(TagView.TextView, { text: props.item.text, itemId: props.item.id }) }), jsxRuntime.jsxs("div", { className: 'tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:mt-1', children: [infoExpanded ? (jsxRuntime.jsx("p", { className: 'tw:italic tw:min-h-[21px] tw:my-0! tw:opacity-50', children: `${props.item.date_updated && props.item.date_updated !== props.item.date_created ? 'updated' : 'posted'} ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ''} ${props.item.date_updated ? TagView.timeAgo(props.item.date_updated) : TagView.timeAgo(props.item.date_created)}` })) : (jsxRuntime.jsx("p", { className: 'tw:my-0! tw:min-h-[21px] tw:font-bold tw:cursor-pointer tw:text-gray-500', onClick: () => setInfoExpanded(true), children: "\u24D8" })), jsxRuntime.jsx("div", { className: 'tw:grow' })] })] }) }));
+});
+
+/**
+ * @category Item
+ */
+const PopupView = ({ children }) => {
+    const layerContext = React.useContext(LayerContext);
+    const { name, markerDefaultColor, markerDefaultColor2, markerShape, markerIcon } = layerContext;
+    const filterTags = TagView.useFilterTags();
+    const appState = TagView.useAppState();
+    const items = TagView.useItems();
+    const getItemTags = TagView.useGetItemTags();
+    const addMarker = TagView.useAddMarker();
+    const addPopup = TagView.useAddPopup();
+    const leafletRefs = TagView.useLeafletRefs();
+    const allTagsLoaded = TagView.useAllTagsLoaded();
+    const allItemsLoaded = TagView.useAllItemsLoaded();
+    const setMarkerClicked = TagView.useSetMarkerClicked();
+    const selectPosition = TagView.useSelectPosition();
+    const tags = TagView.useTags();
+    const [newTagsToAdd, setNewTagsToAdd] = React.useState([]);
+    const [tagsReady, setTagsReady] = React.useState(false);
+    const isLayerVisible = TagView.useIsLayerVisible();
+    const isGroupTypeVisible = TagView.useIsGroupTypeVisible();
+    const visibleGroupTypes = TagView.useVisibleGroupType();
+    const visibleItems = React.useMemo(() => items
+        .filter((item) => item.layer?.name === name)
+        .filter((item) => filterTags.length === 0
+        ? item
+        : filterTags.some((tag) => getItemTags(item).some((filterTag) => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))
+        .filter((item) => item.layer && isLayerVisible(item.layer))
+        .filter((item) => (item.group_type && isGroupTypeVisible(item.group_type)) ||
+        visibleGroupTypes.length === 0), [
+        filterTags,
+        getItemTags,
+        isGroupTypeVisible,
+        isLayerVisible,
+        items,
+        name,
+        visibleGroupTypes.length,
+    ]);
+    return visibleItems.map((item) => {
+        if (!(item.position?.coordinates[0] && item.position.coordinates[1]))
+            return null;
+        if (item.tags) {
+            item.text += '\n\n';
+            item.tags.map((tag) => {
+                if (!item.text?.includes(`#${TagView.encodeTag(tag)}`)) {
+                    item.text += `#${TagView.encodeTag(tag)}`;
+                }
+                return item.text;
+            });
+        }
+        if (allTagsLoaded && allItemsLoaded) {
+            item.text?.match(TagView.hashTagRegex)?.map((tag) => {
+                if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase()) &&
+                    !newTagsToAdd.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+                    const newTag = {
+                        id: crypto.randomUUID(),
+                        name: tag.slice(1),
+                        color: TagView.randomColor(),
+                    };
+                    setNewTagsToAdd((current) => [...current, newTag]);
+                }
+                return null;
+            });
+            !tagsReady && setTagsReady(true);
+        }
+        const itemTags = getItemTags(item);
+        const latitude = item.position.coordinates[1];
+        const longitude = item.position.coordinates[0];
+        let color1 = markerDefaultColor;
+        let color2 = markerDefaultColor2;
+        if (item.color) {
+            color1 = item.color;
+        }
+        else if (itemTags[0]) {
+            color1 = itemTags[0].color;
+        }
+        if (itemTags[0] && item.color) {
+            color2 = itemTags[0].color;
+        }
+        else if (itemTags[1]) {
+            color2 = itemTags[1].color;
+        }
+        return (jsxRuntime.jsx(ItemContext.Provider, { value: item, children: jsxRuntime.jsxs(reactLeaflet.Marker, { ref: (r) => {
+                    if (!(item.id in leafletRefs && leafletRefs[item.id].marker === r)) {
+                        r && addMarker(item, r);
+                    }
+                }, eventHandlers: {
+                    click: () => {
+                        selectPosition && setMarkerClicked(item);
+                    },
+                }, icon: MarkerIconFactory(markerShape, color1, color2, item.markerIcon ?? markerIcon, appState.assetsApi.url), position: [latitude, longitude], children: [jsxRuntime.jsx(ItemViewPopup, { ref: (r) => {
+                            if (!(item.id in leafletRefs && leafletRefs[item.id].popup === r)) {
+                                r && addPopup(item, r);
+                            }
+                        }, item: item, children: children }), jsxRuntime.jsx(reactLeaflet.Tooltip, { offset: [0, -38], direction: 'top', children: item.name })] }) }, item.id));
+    });
+};
+
+const TextView = templateify(TagView.TextView);
+const StartEndView = templateify(TagView.StartEndView);
+const PopupTextInput = templateify(PopupTextInput$1);
+const PopupButton = templateify(PopupButton$1);
+const PopupCheckboxInput = templateify(PopupCheckboxInput$1);
+const PopupTextAreaInput = templateify(PopupTextAreaInput$1);
+const PopupStartEndInput = templateify(TagView.PopupStartEndInput);
+
+exports.AuthProvider = TagView.AuthProvider;
+exports.MapOverlayPage = TagView.MapOverlayPage;
+exports.TextAreaInput = TagView.TextAreaInput;
+exports.TextInput = TagView.TextInput;
+exports.SVG = SVG;
+exports.AppShell = AppShell;
+exports.AttestationForm = AttestationForm;
+exports.CardPage = CardPage;
+exports.Content = Content;
+exports.Layer = Layer;
+exports.LoadingMapOverlay = LoadingMapOverlay;
+exports.LoginPage = LoginPage;
+exports.MarketView = MarketView;
+exports.Modal = Modal;
+exports.OverlayItemsIndexPage = OverlayItemsIndexPage;
+exports.Permissions = Permissions;
+exports.PopupButton = PopupButton;
+exports.PopupCheckboxInput = PopupCheckboxInput;
+exports.PopupForm = PopupForm;
+exports.PopupStartEndInput = PopupStartEndInput;
+exports.PopupTextAreaInput = PopupTextAreaInput;
+exports.PopupTextInput = PopupTextInput;
+exports.PopupView = PopupView;
+exports.Quests = Quests;
+exports.RequestPasswordPage = RequestPasswordPage;
+exports.SelectUser = SelectUser;
+exports.SetNewPasswordPage = SetNewPasswordPage;
+exports.SideBar = SideBar;
+exports.SignupPage = SignupPage;
+exports.StartEndView = StartEndView;
+exports.Tags = Tags;
+exports.TextView = TextView;
+exports.TitleCard = TitleCard;
+exports.UtopiaMap = UtopiaMap;
+//# sourceMappingURL=index.cjs.js.map